diff --git a/.storybook/decorators.ts b/.storybook/decorators.ts new file mode 100644 index 0000000000..270cdec3a5 --- /dev/null +++ b/.storybook/decorators.ts @@ -0,0 +1,20 @@ +import AppFooter from '~/components/AppFooter.vue' +import AppHeader from '~/components/AppHeader.vue' + +/** + * Wraps a page story with the standard site chrome: AppHeader, main content + * area, and AppFooter. Use this for any full-page story so the layout stays + * consistent and changes only need to be made in one place. + */ +export const pageDecorator = () => ({ + components: { AppHeader, AppFooter }, + template: ` +
+ +
+ +
+ +
+ `, +}) diff --git a/app/pages/about.stories.ts b/app/pages/about.stories.ts index b895ba8e70..7d97312345 100644 --- a/app/pages/about.stories.ts +++ b/app/pages/about.stories.ts @@ -1,27 +1,13 @@ import About from './about.vue' import type { Meta, StoryObj } from '@storybook-vue/nuxt' -import AppHeader from '~/components/AppHeader.vue' -import AppFooter from '~/components/AppFooter.vue' +import { pageDecorator } from '../../.storybook/decorators' const meta = { component: About, parameters: { layout: 'fullscreen', }, - decorators: [ - () => ({ - components: { AppHeader, AppFooter }, - template: ` -
- -
- -
- -
- `, - }), - ], + decorators: [pageDecorator], } satisfies Meta export default meta diff --git a/app/pages/accessibility.stories.ts b/app/pages/accessibility.stories.ts index bfd0968592..9a6943ace5 100644 --- a/app/pages/accessibility.stories.ts +++ b/app/pages/accessibility.stories.ts @@ -1,27 +1,13 @@ import Accessibility from './accessibility.vue' import type { Meta, StoryObj } from '@storybook-vue/nuxt' -import AppHeader from '~/components/AppHeader.vue' -import AppFooter from '~/components/AppFooter.vue' +import { pageDecorator } from '../../.storybook/decorators' const meta = { component: Accessibility, parameters: { layout: 'fullscreen', }, - decorators: [ - () => ({ - components: { AppHeader, AppFooter }, - template: ` -
- -
- -
- -
- `, - }), - ], + decorators: [pageDecorator], } satisfies Meta export default meta diff --git a/app/pages/privacy.stories.ts b/app/pages/privacy.stories.ts new file mode 100644 index 0000000000..7e2e566b3e --- /dev/null +++ b/app/pages/privacy.stories.ts @@ -0,0 +1,16 @@ +import Privacy from './privacy.vue' +import type { Meta, StoryObj } from '@storybook-vue/nuxt' +import { pageDecorator } from '../../.storybook/decorators' + +const meta = { + component: Privacy, + parameters: { + layout: 'fullscreen', + }, + decorators: [pageDecorator], +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = {}