From b3897c3683fd0af8c2e1f6b639a4a01b80f4a4e7 Mon Sep 17 00:00:00 2001 From: Ruben Smit Date: Thu, 9 Jan 2025 16:58:08 +0100 Subject: [PATCH] feat(template-pages): added root, page-body and page-layout components to template pages (#1096) Co-authored-by: Ruben Smit --- apps/rhc-templates/package.json | 3 + apps/rhc-templates/src/app/layout.tsx | 10 +- packages/storybook/config/preview.tsx | 12 +- packages/storybook/package.json | 3 + .../src/community/page-header.stories.tsx | 3 + .../src/templates/collage.stories.tsx | 1 + .../storybook/src/templates/collage/index.tsx | 35 ++-- .../src/templates/details.stories.tsx | 1 + .../storybook/src/templates/details/index.tsx | 165 +++++++++-------- .../storybook/src/templates/form.stories.tsx | 1 + .../storybook/src/templates/form/index.tsx | 167 +++++++++--------- .../src/templates/mijn-omgeving.stories.tsx | 1 + .../src/templates/mijn-omgeving/index.tsx | 166 +++++++++-------- .../src/templates/rich-text.stories.tsx | 1 + .../src/templates/rich-text/index.tsx | 165 +++++++++-------- pnpm-lock.yaml | 76 +++++++- 16 files changed, 445 insertions(+), 365 deletions(-) diff --git a/apps/rhc-templates/package.json b/apps/rhc-templates/package.json index b80c292a5..9ea7b5f54 100644 --- 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 index 85bee7393..90533afbe 100644 --- 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 ( - + Rijkshuisstijl demo - Index - -
{children}
+ + {children} - + ); } diff --git a/packages/storybook/config/preview.tsx b/packages/storybook/config/preview.tsx index 682fc3f5c..30b07fc07 100644 --- 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'] ? ( + + {Story()} + + ) : ( + Story() + ); + }, ], parameters: { previewTabs: { diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 29ca8c8d3..8f8244561 100644 --- 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 index 846b327c2..acb6e821c 100644 --- 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; diff --git a/packages/storybook/src/templates/collage.stories.tsx b/packages/storybook/src/templates/collage.stories.tsx index 240be22e2..ae22a666b 100644 --- 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 index fe8f1617e..d19425cb2 100644 --- 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 ( <> -
- - - - - -
- -
+ + + + + + +
@@ -274,7 +273,7 @@ export default function Collage() {
-
+ ); } diff --git a/packages/storybook/src/templates/details.stories.tsx b/packages/storybook/src/templates/details.stories.tsx index a9c6f67d7..c5cda5289 100644 --- 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 index 4e306464c..0d79f3213 100644 --- 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 ( <> -
- - - - - -
- -
+ + + + + + +
-
- }> - Contact - - }> - Abonneren - - }> - RSS - - }> - Vacatures - - }> - Sitemap - - }> - Help - - }> - Archief - - , - ], - }, - { - heading: 'Over deze site', - children: ( - - }> - Over Rijksoverheid.nl - - }> - Wetten en regelingen - - }> - Copyright - - }> - Privacy - - }> - Cookies - - }> - Toegankelijkheid - - }> - Open data - - }> - Kwetsbaarheid melden - - - ), - }, - ]} - >
- + +