feat(template-pages): added root, page-body and page-layout component…

…s to template pages (#1096) Co-authored-by: Ruben Smit <[email protected]>
nl-design-system · Jan 9, 2025 · b3897c3 · b3897c3
1 parent e46206f
commit b3897c3
Show file tree

Hide file tree

Showing 16 changed files with 445 additions and 365 deletions.
diff --git a/apps/rhc-templates/package.json b/apps/rhc-templates/package.json
@@ -48,6 +48,9 @@
     "@utrecht/component-library-css": "7.0.0",
     "@utrecht/component-library-react": "7.3.7",
     "@utrecht/components": "7.4.0",
+    "@utrecht/page-body-react": "1.0.3",
+    "@utrecht/page-layout-react": "1.0.3",
+    "@utrecht/root-react": "1.0.3",
     "@utrecht/web-component-library-react": "3.0.0",
     "eslint": "9.15.0",
     "eslint-config-next": "15.0.4",

diff --git a/apps/rhc-templates/src/app/layout.tsx b/apps/rhc-templates/src/app/layout.tsx
@@ -5,17 +5,19 @@ import '@rijkshuisstijl-community/design-tokens/dist/index.css';
 import '@rijkshuisstijl-community/components-css/dist/index.css';
 import '@rijkshuisstijl-community/font/src/index.mjs';
 import '@rijkshuisstijl-community/storybook/src/templates/globals.css';
+import { PageLayout } from '@utrecht/page-layout-react';
+import { Root } from '@utrecht/root-react';
 import Head from 'next/head';
 
 export default function RootLayout({ children }: PropsWithChildren<{}>) {
   return (
-    <html lang="nl">
+    <Root>
       <Head>
         <title>Rijkshuisstijl demo - Index</title>
       </Head>
-      <body>
-        <div className="rhc-theme">{children}</div>
+      <body className="rhc-theme">
+        <PageLayout>{children}</PageLayout>
       </body>
-    </html>
+    </Root>
   );
 }
diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx
@@ -11,6 +11,8 @@ import { defineCustomElements } from '@rijkshuisstijl-community/web-components-s
 import { withThemeByClassName } from '@storybook/addon-themes';
 import { Controls, Description, Primary, Stories, useOf } from '@storybook/blocks';
 import { Preview } from '@storybook/react';
+import { PageLayout } from '@utrecht/page-layout-react';
+import { Root } from '@utrecht/root-react';
 import { defineCustomElements as defineUtrechtCustomElements } from '@utrecht/web-component-library-stencil/loader/index';
 import { Fragment } from 'react';
 
@@ -30,7 +32,15 @@ const preview: Preview = {
       },
       defaultTheme: 'RijkshuisstijlCommunity',
     }),
-    (Story: any) => Story(),
+    (Story, options) => {
+      return options.parameters['isPage'] ? (
+        <Root Component="div">
+          <PageLayout>{Story()}</PageLayout>
+        </Root>
+      ) : (
+        Story()
+      );
+    },
   ],
   parameters: {
     previewTabs: {

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -65,6 +65,9 @@
     "@types/twig": "1.12.16",
     "@utrecht/component-library-react": "8.0.4",
     "@utrecht/components": "7.4.0",
+    "@utrecht/page-body-react": "1.0.3",
+    "@utrecht/page-layout-react": "1.0.3",
+    "@utrecht/root-react": "1.0.3",
     "@utrecht/web-component-library-react": "3.0.2",
     "@utrecht/web-component-library-stencil": "3.0.1",
     "@whitespace/storybook-addon-html": "6.1.1",

diff --git a/packages/storybook/src/community/page-header.stories.tsx b/packages/storybook/src/community/page-header.stories.tsx
@@ -18,6 +18,9 @@ const meta = {
         component: mergeMarkdown([readme]),
       },
     },
+    // TODO: add Figma, GitHub and NL DesignSystem links
+    componentOrigin:
+      'Dit component is overgenomen van de Gemeente Utrecht, voor dit component zijn (nog) geen specifieke design tokens gedefinieerd.',
   },
 } satisfies Meta<typeof PageHeader>;
 

diff --git a/packages/storybook/src/templates/collage.stories.tsx b/packages/storybook/src/templates/collage.stories.tsx
@@ -9,6 +9,7 @@ const meta: Meta = {
     status: {
       type: 'UNSTABLE',
     },
+    isPage: true,
   },
 };
 export default meta;

diff --git a/packages/storybook/src/templates/collage/index.tsx b/packages/storybook/src/templates/collage/index.tsx
@@ -38,27 +38,26 @@ import {
   UnorderedListItem,
 } from '@rijkshuisstijl-community/components-react';
 import { IconArrowRight, IconCalendarEvent } from '@tabler/icons-react/dist/esm/tabler-icons-react';
+import { PageBody } from '@utrecht/page-body-react';
 
 export default function Collage() {
   return (
     <>
-      <div className="rhc-templates-background-color-white">
-        <PageHeader>
-          <Logo organisation="Rijkshuisstijl Community">
-            <Icon className={'dutch-map'} icon={'nederland-map'} />
-          </Logo>
-        </PageHeader>
-      </div>
-      <NavBar
-        items={[
-          { id: '1', href: '/', label: 'Rich Text' },
-          { id: '2', href: '/form', label: 'Form' },
-          { id: '3', href: '/details', label: 'Details' },
-          { id: '4', href: '/collage', label: 'Collage' },
-          { id: '5', href: '/mijn-omgeving', label: 'Mijn Omgeving' },
-        ]}
-      ></NavBar>
-      <main className="rhc-templates-page">
+      <PageHeader>
+        <Logo organisation="Rijkshuisstijl Community">
+          <Icon className={'dutch-map'} icon={'nederland-map'} />
+        </Logo>
+        <NavBar
+          items={[
+            { id: '1', href: '/', label: 'Rich Text' },
+            { id: '2', href: '/form', label: 'Form' },
+            { id: '3', href: '/details', label: 'Details' },
+            { id: '4', href: '/collage', label: 'Collage' },
+            { id: '5', href: '/mijn-omgeving', label: 'Mijn Omgeving' },
+          ]}
+        ></NavBar>
+      </PageHeader>
+      <PageBody className="rhc-templates-page">
         <div className="rhc-templates-background-color-white">
           <div className="rhc-templates-main-content">
             <div className="utrecht-page-content rhc-templates-page-content">
@@ -274,7 +273,7 @@ export default function Collage() {
             </div>
           </div>
         </div>
-      </main>
+      </PageBody>
     </>
   );
 }
diff --git a/packages/storybook/src/templates/details.stories.tsx b/packages/storybook/src/templates/details.stories.tsx
@@ -9,6 +9,7 @@ const meta: Meta = {
     status: {
       type: 'UNSTABLE',
     },
+    isPage: true,
   },
 };
 export default meta;

diff --git a/packages/storybook/src/templates/details/index.tsx b/packages/storybook/src/templates/details/index.tsx
@@ -16,27 +16,26 @@ import {
   SubNavBar,
 } from '@rijkshuisstijl-community/components-react';
 import { ColumnLayout } from '@utrecht/component-library-react';
+import { PageBody } from '@utrecht/page-body-react';
 
 export default function Details() {
   return (
     <>
-      <div className="rhc-templates-background-color-white">
-        <PageHeader>
-          <Logo organisation="Rijkshuisstijl Community">
-            <Icon className={'dutch-map'} icon={'nederland-map'} />
-          </Logo>
-        </PageHeader>
-      </div>
-      <NavBar
-        items={[
-          { id: '1', href: '/', label: 'Rich Text' },
-          { id: '2', href: '/form', label: 'Form' },
-          { id: '3', href: '/details', label: 'Details' },
-          { id: '4', href: '/collage', label: 'Collage' },
-          { id: '5', href: '/mijn-omgeving', label: 'Mijn Omgeving' },
-        ]}
-      ></NavBar>
-      <div className="rhc-templates-page">
+      <PageHeader>
+        <Logo organisation="Rijkshuisstijl Community">
+          <Icon className={'dutch-map'} icon={'nederland-map'} />
+        </Logo>
+        <NavBar
+          items={[
+            { id: '1', href: '/', label: 'Rich Text' },
+            { id: '2', href: '/form', label: 'Form' },
+            { id: '3', href: '/details', label: 'Details' },
+            { id: '4', href: '/collage', label: 'Collage' },
+            { id: '5', href: '/mijn-omgeving', label: 'Mijn Omgeving' },
+          ]}
+        ></NavBar>
+      </PageHeader>
+      <PageBody className="rhc-templates-page">
         <Hero
           className="rhc-hero-details-template"
           imageAlt="Tullip field"
@@ -133,72 +132,72 @@ export default function Details() {
             </div>
           </div>
         </div>
-        <Footer
-          appearanceLevel={3}
-          heading="De Rijksoverheid. Voor Nederland"
-          columns={[
-            {
-              heading: 'Service',
-              children: [
-                <LinkList key="1">
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Contact
-                  </LinkListLink>
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Abonneren
-                  </LinkListLink>
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    RSS
-                  </LinkListLink>
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Vacatures
-                  </LinkListLink>
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Sitemap
-                  </LinkListLink>
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Help
-                  </LinkListLink>
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Archief
-                  </LinkListLink>
-                </LinkList>,
-              ],
-            },
-            {
-              heading: 'Over deze site',
-              children: (
-                <LinkList key="2">
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Over Rijksoverheid.nl
-                  </LinkListLink>
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Wetten en regelingen
-                  </LinkListLink>
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Copyright
-                  </LinkListLink>
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Privacy
-                  </LinkListLink>
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Cookies
-                  </LinkListLink>
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Toegankelijkheid
-                  </LinkListLink>
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Open data
-                  </LinkListLink>
-                  <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
-                    Kwetsbaarheid melden
-                  </LinkListLink>
-                </LinkList>
-              ),
-            },
-          ]}
-        ></Footer>
-      </div>
+      </PageBody>
+      <Footer
+        appearanceLevel={3}
+        heading="De Rijksoverheid. Voor Nederland"
+        columns={[
+          {
+            heading: 'Service',
+            children: [
+              <LinkList key="1">
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Contact
+                </LinkListLink>
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Abonneren
+                </LinkListLink>
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  RSS
+                </LinkListLink>
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Vacatures
+                </LinkListLink>
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Sitemap
+                </LinkListLink>
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Help
+                </LinkListLink>
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Archief
+                </LinkListLink>
+              </LinkList>,
+            ],
+          },
+          {
+            heading: 'Over deze site',
+            children: (
+              <LinkList key="2">
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Over Rijksoverheid.nl
+                </LinkListLink>
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Wetten en regelingen
+                </LinkListLink>
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Copyright
+                </LinkListLink>
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Privacy
+                </LinkListLink>
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Cookies
+                </LinkListLink>
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Toegankelijkheid
+                </LinkListLink>
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Open data
+                </LinkListLink>
+                <LinkListLink href="#" icon={<Icon icon={'chevron-right'} />}>
+                  Kwetsbaarheid melden
+                </LinkListLink>
+              </LinkList>
+            ),
+          },
+        ]}
+      />
     </>
   );
 }
diff --git a/packages/storybook/src/templates/form.stories.tsx b/packages/storybook/src/templates/form.stories.tsx
@@ -9,6 +9,7 @@ const meta: Meta = {
     status: {
       type: 'UNSTABLE',
     },
+    isPage: true,
   },
 };
 export default meta;