wip

packages/storybook/src/css-stories/page-content.stories.tsx

@@ -0,0 +1,55 @@
+/* @license CC0-1.0 */
+
+import { Meta, StoryObj } from '@storybook/react';
+import { Heading1, PageContent, Paragraph } from '@utrecht/component-library-react/dist/css-module';
+
+const PageContentStory = ({ children, main }) => (
+  <PageContent>
+    {main && <main className="utrecht-page-content__main">{main}</main>}
+    {children}
+  </PageContent>
+);
+
+const meta = {
+  title: 'CSS Component/Page content',
+  id: 'css-page-content',
+  component: PageContent,
+  argTypes: {
+    children: {
+      description: 'Page content',
+    },
+    // main: {
+    //   description: 'Main page content',
+    // },
+  },
+  args: {
+    children: [],
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        //   component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof PageContent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: [
+      <Heading1>Frameless</Heading1>,
+      <Paragraph>
+        Herbruikbare componenten onafhankelijk van huisstijl, daar mag je ons voor wakker maken! Frameless heeft al aan
+        meerdere white-label design systems mogen werken en is trots op onze bijdrage aan NL Design System. Wij helpen
+        ook graag als technisch partner bij het bouwen van toegankelijke en gebruiksvriendelijke web applicaties.
+      </Paragraph>,
+    ],
+  },
+};
+
+//

packages/storybook/src/css-stories/page.stories.tsx

@@ -0,0 +1,44 @@
+/* @license CC0-1.0 */
+
+import { Meta, StoryObj } from '@storybook/react';
+import { Page, PageContent } from '@utrecht/component-library-react/dist/css-module';
+// TODO for future version: add PageHeader + PageFooter?
+// import { Page } from '@frameless/components-react'; // TODO: use frameless package instead
+
+const meta = {
+  title: 'CSS Component/Page',
+  id: 'css-page',
+  component: Page,
+  argTypes: {
+    children: {
+      description: 'Page content',
+    },
+  },
+  args: {
+    children: [],
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        //   component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Page>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: [
+      //   <PageHeader>Header area</PageHeader>,
+      <PageContent>
+        <main className="utrecht-page-content__main">Content area</main>
+      </PageContent>,
+      //   <PageFooter>Footer area</PageFooter>,
+    ],
+  },
+};

packages/storybook/src/react-stories/page-content.stories.tsx

@@ -0,0 +1,47 @@
+/* @license CC0-1.0 */
+
+import { Meta, StoryObj } from '@storybook/react';
+import { Heading1, PageContent, Paragraph } from '@utrecht/component-library-react/dist/css-module';
+
+const PageContentStory = ({ children }) => <PageContent>{children}</PageContent>;
+
+const meta = {
+  title: 'React Component/Page content',
+  id: 'react-page-content',
+  component: PageContentStory,
+  argTypes: {
+    children: {
+      description: 'Page content',
+    },
+  },
+  args: {
+    children: [],
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        //   component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof PageContentStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: [
+      <Heading1>Frameless</Heading1>,
+      <Paragraph>
+        Herbruikbare componenten onafhankelijk van huisstijl, daar mag je ons voor wakker maken! Frameless heeft al aan
+        meerdere white-label design systems mogen werken en is trots op onze bijdrage aan NL Design System. Wij helpen
+        ook graag als technisch partner bij het bouwen van toegankelijke en gebruiksvriendelijke web applicaties.
+      </Paragraph>,
+    ],
+  },
+};
+
+//

packages/storybook/src/react-stories/page.stories.tsx

@@ -0,0 +1,45 @@
+/* @license CC0-1.0 */
+
+import { Meta, StoryObj } from '@storybook/react';
+import { Page, PageContent } from '@utrecht/component-library-react/dist/css-module';
+// TODO for future version: add PageHeader + PageFooter?
+// import { Page } from '@frameless/components-react'; // TODO: use frameless package instead
+
+const meta = {
+  title: 'React Component/Page',
+  id: 'react-page',
+  component: Page,
+  argTypes: {
+    children: {
+      description: 'Page content',
+    },
+  },
+  args: {
+    children: [],
+  },
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        //   component: readme,
+      },
+    },
+  },
+} satisfies Meta<typeof Page>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: [
+      //   <PageHeader>Header area</PageHeader>,
+      <PageContent>
+        <main className="utrecht-page-content__main">Content area</main>
+        {/* do we need this class? utrecht? frameless? at all? */}
+      </PageContent>,
+      //   <PageFooter>Footer area</PageFooter>,
+    ],
+  },
+};