Wrap Header and Footer stories in Screen

Amsterdam · Sep 30, 2024 · 285a869 · 285a869
1 parent 359edc6
commit 285a869
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/storybook/src/components/Footer/Footer.stories.tsx b/storybook/src/components/Footer/Footer.stories.tsx
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { Grid, Heading, LinkList, PageMenu, Paragraph } from '@amsterdam/design-system-react'
+import { Grid, Heading, LinkList, PageMenu, Paragraph, Screen } from '@amsterdam/design-system-react'
 import { Footer } from '@amsterdam/design-system-react/src'
 import {
   CameraIcon,
@@ -20,6 +20,13 @@ import { Default as PageMenuStory } from '../../components/PageMenu/PageMenu.sto
 const meta = {
   title: 'Components/Containers/Footer',
   component: Footer,
+  decorators: [
+    (Story) => (
+      <Screen>
+        <Story />
+      </Screen>
+    ),
+  ],
 } satisfies Meta<typeof Footer>
 
 export default meta

diff --git a/storybook/src/components/Header/Header.stories.tsx b/storybook/src/components/Header/Header.stories.tsx
@@ -3,14 +3,21 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { PageMenu } from '@amsterdam/design-system-react'
+import { PageMenu, Screen } from '@amsterdam/design-system-react'
 import { Header } from '@amsterdam/design-system-react/src'
 import { SearchIcon } from '@amsterdam/design-system-react-icons'
 import { Meta, StoryObj } from '@storybook/react'
 
 const meta = {
   title: 'Components/Containers/Header',
   component: Header,
+  decorators: [
+    (Story) => (
+      <Screen>
+        <Story />
+      </Screen>
+    ),
+  ],
 } satisfies Meta<typeof Header>
 
 export default meta