diff --git a/packages/hub-ui/src/client/components/display/ToastOverlay.stories.ts b/packages/hub-ui/src/client/components/display/ToastOverlay.stories.ts index 08b29191..70837db5 100644 --- a/packages/hub-ui/src/client/components/display/ToastOverlay.stories.ts +++ b/packages/hub-ui/src/client/components/display/ToastOverlay.stories.ts @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite' import { h, onMounted } from 'vue' +import { MESSAGES_DOCK_ID } from '../../constants' import { addToast } from '../../state/toasts' import { message } from '../../stories/fixtures' import ToastOverlay from './ToastOverlay.vue' @@ -36,3 +37,23 @@ export const Stack: Story = { }, }), } + +/** A toast whose message carries an `activate` action, rendered alongside the dismiss control. */ +export const WithAction: Story = { + render: () => ({ + setup() { + onMounted(() => { + addToast(message({ + level: 'warn', + message: 'New a11y violation detected', + notify: true, + autoDismiss: 10 ** 7, + actions: [ + { id: 'view', label: 'View', kind: 'activate', activate: { dockId: MESSAGES_DOCK_ID } }, + ], + })) + }) + return () => h(ToastOverlay) + }, + }), +} diff --git a/packages/hub-ui/src/client/components/display/ToastOverlay.vue b/packages/hub-ui/src/client/components/display/ToastOverlay.vue index f9b35ab7..bcd03f32 100644 --- a/packages/hub-ui/src/client/components/display/ToastOverlay.vue +++ b/packages/hub-ui/src/client/components/display/ToastOverlay.vue @@ -1,4 +1,5 @@