🧐 #4 - feat: debug control to page story

src/components/page/page.stories.tsx

@@ -6,16 +6,20 @@ import { Column } from "../layout/column";
 import { Logo } from "../logo";
 import { Page } from "./page";
 
+type PagePropsAndCustomArgs = React.ComponentProps<typeof Page> & {
+  debug?: boolean;
+};
+
 const meta = {
   title: "Building Blocks/Page",
   component: Page,
   parameters: {
     layout: "fullscreen",
   },
-} satisfies Meta<typeof Page>;
+} satisfies Meta<PagePropsAndCustomArgs>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<PagePropsAndCustomArgs>;
 
 export const PageComponent: Story = {
   args: {
@@ -25,10 +29,13 @@ export const PageComponent: Story = {
 
 export const SamplePage: Story = {
   args: {
-    children: (
-      <Container>
-        <Grid>
-          <Column span={12}>
+    debug: false,
+  },
+  render: ({ debug }) => (
+    <Page>
+      <Container debug={debug}>
+        <Grid debug={debug}>
+          <Column debug={debug} span={12}>
             <Logo
               href="/?path=/story/building-blocks-page--sample-page"
               hrefLabel="Navigate to story page"
@@ -37,6 +44,6 @@ export const SamplePage: Story = {
           </Column>
         </Grid>
       </Container>
-    ),
-  },
+    </Page>
+  ),
 };