From c0c7c149594534fa6238f69477c888029cd20317 Mon Sep 17 00:00:00 2001 From: Ruben Smit Date: Thu, 24 Oct 2024 18:03:42 +0200 Subject: [PATCH 1/9] feat(storybook): first attempt at adding a template page to storybook --- apps/rhc-templates/package.json | 1 + packages/storybook/package.json | 1 + packages/storybook/src/templates/home.stories.tsx | 13 +++++++++++++ packages/storybook/src/templates/home.tsx | 12 ++++++++++++ pnpm-lock.yaml | 6 ++++++ 5 files changed, 33 insertions(+) create mode 100644 packages/storybook/src/templates/home.stories.tsx create mode 100644 packages/storybook/src/templates/home.tsx diff --git a/apps/rhc-templates/package.json b/apps/rhc-templates/package.json index 61ea53c5c..28e072d07 100644 --- a/apps/rhc-templates/package.json +++ b/apps/rhc-templates/package.json @@ -34,6 +34,7 @@ "@nl-rvo/assets": "1.0.0-alpha.360", "@rijkshuisstijl-community/components-css": "workspace:*", "@rijkshuisstijl-community/components-react": "workspace:*", + "@rijkshuisstijl-community/design-tokens": "workspace:*", "@rijkshuisstijl-community/font": "workspace:*", "@rijkshuisstijl-community/rivm-design-tokens": "workspace:*", "@rijkshuisstijl-community/web-components-react": "workspace:*", diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 9a5bb1a89..070f695f4 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -36,6 +36,7 @@ "@rijkshuisstijl-community/font": "workspace:*", "@rijkshuisstijl-community/logius-design-tokens": "workspace:*", "@rijkshuisstijl-community/mijnoverheid-design-tokens": "workspace:*", + "@rijkshuisstijl-community/rhc-templates": "workspace:*", "@rijkshuisstijl-community/rivm-design-tokens": "workspace:*", "@rijkshuisstijl-community/web-components-react": "workspace:*", "@rijkshuisstijl-community/web-components-stencil": "workspace:*", diff --git a/packages/storybook/src/templates/home.stories.tsx b/packages/storybook/src/templates/home.stories.tsx new file mode 100644 index 000000000..745111287 --- /dev/null +++ b/packages/storybook/src/templates/home.stories.tsx @@ -0,0 +1,13 @@ +import type { Meta, StoryObj } from '@storybook/react/*'; +import Home from './home'; + +const meta: Meta = { + title: 'Templates/Home', + component: Home, + parameters: {}, +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/storybook/src/templates/home.tsx b/packages/storybook/src/templates/home.tsx new file mode 100644 index 000000000..4887a9e0c --- /dev/null +++ b/packages/storybook/src/templates/home.tsx @@ -0,0 +1,12 @@ +import RootLayout from '@rijkshuisstijl-community/rhc-templates/src/app/layout'; +import Page from '@rijkshuisstijl-community/rhc-templates/src/app/page'; + +export default function Home() { + return ( + <> + + + + + ); +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c2e23d840..0ac0eaa81 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -112,6 +112,9 @@ importers: '@rijkshuisstijl-community/components-react': specifier: workspace:* version: link:../../packages/components-react + '@rijkshuisstijl-community/design-tokens': + specifier: workspace:* + version: link:../../proprietary/design-tokens '@rijkshuisstijl-community/font': specifier: workspace:* version: link:../../packages/font @@ -392,6 +395,9 @@ importers: '@rijkshuisstijl-community/mijnoverheid-design-tokens': specifier: workspace:* version: link:../../proprietary/mijnoverheid-design-tokens + '@rijkshuisstijl-community/rhc-templates': + specifier: workspace:* + version: link:../../apps/rhc-templates '@rijkshuisstijl-community/rivm-design-tokens': specifier: workspace:* version: link:../../proprietary/rivm-design-tokens From 620a0139072b245634bbafadaa4979d893f29879 Mon Sep 17 00:00:00 2001 From: Ruben Smit Date: Fri, 25 Oct 2024 10:48:03 +0200 Subject: [PATCH 2/9] attempted to fix storybook error --- apps/rhc-templates/src/app/layout.tsx | 4 +-- pnpm-lock.yaml | 42 ++++++++++++++++++++++----- 2 files changed, 37 insertions(+), 9 deletions(-) diff --git a/apps/rhc-templates/src/app/layout.tsx b/apps/rhc-templates/src/app/layout.tsx index 89e717361..57a2dd097 100644 --- a/apps/rhc-templates/src/app/layout.tsx +++ b/apps/rhc-templates/src/app/layout.tsx @@ -1,6 +1,6 @@ 'use client'; import { Document } from '@utrecht/component-library-react'; -import { PropsWithChildren } from 'react'; +import { PropsWithChildren, ReactNode } from 'react'; import '@nl-rvo/assets/fonts/index.css'; import '@rijkshuisstijl-community/design-tokens/dist/index.css'; import '@rijkshuisstijl-community/components-css/index.scss'; @@ -9,7 +9,7 @@ import '@rijkshuisstijl-community/font/src/index.mjs'; import './globals.css'; import Head from 'next/head'; -const RHCTheme = ({ children }: PropsWithChildren<{}>) =>
{children}
; +const RHCTheme = ({ children }: { children: ReactNode }) =>
{children}
; export default function RootLayout({ children }: PropsWithChildren<{}>) { return ( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0ac0eaa81..243f7a3bb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13013,8 +13013,8 @@ snapshots: '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.3) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0) - eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.16.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.16.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0) + eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.10.0(eslint@8.57.0) eslint-plugin-react: 7.34.4(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -13037,19 +13037,19 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0): + eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.16.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0): dependencies: '@nolyfill/is-core-module': 1.0.39 debug: 4.3.7 enhanced-resolve: 5.17.1 eslint: 8.57.0 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.16.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.8.1 is-bun-module: 1.2.1 is-glob: 4.0.3 optionalDependencies: - eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.16.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0) + eslint-plugin-import: 2.30.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0) transitivePeerDependencies: - '@typescript-eslint/parser' - eslint-import-resolver-node @@ -13087,14 +13087,14 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0))(eslint@8.57.0): + eslint-module-utils@2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.16.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: debug: 3.2.7 optionalDependencies: '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.3) eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0)(eslint@8.57.0) + eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.16.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0) transitivePeerDependencies: - supports-color @@ -13126,6 +13126,34 @@ snapshots: - eslint-import-resolver-webpack - supports-color + eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0): + dependencies: + '@rtsao/scc': 1.1.0 + array-includes: 3.1.8 + array.prototype.findlastindex: 1.2.5 + array.prototype.flat: 1.3.2 + array.prototype.flatmap: 1.3.2 + debug: 3.2.7 + doctrine: 2.1.0 + eslint: 8.57.0 + eslint-import-resolver-node: 0.3.9 + eslint-module-utils: 2.12.0(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.3))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.30.0(@typescript-eslint/parser@7.16.1(eslint@8.57.0)(typescript@5.5.3))(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) + hasown: 2.0.2 + is-core-module: 2.15.1 + is-glob: 4.0.3 + minimatch: 3.1.2 + object.fromentries: 2.0.8 + object.groupby: 1.0.3 + object.values: 1.2.0 + semver: 6.3.1 + tsconfig-paths: 3.15.0 + optionalDependencies: + '@typescript-eslint/parser': 7.2.0(eslint@8.57.0)(typescript@5.5.3) + transitivePeerDependencies: + - eslint-import-resolver-typescript + - eslint-import-resolver-webpack + - supports-color + eslint-plugin-json@3.1.0: dependencies: lodash: 4.17.21 From e6c52dce9f3f9f84908b0eb3ddf3c208dd20cb8a Mon Sep 17 00:00:00 2001 From: Ruben Smit Date: Wed, 30 Oct 2024 11:58:26 +0100 Subject: [PATCH 3/9] chore(storybook-templates): added layout file --- .../src/templates/layouts/globals.css | 76 +++++++++++++++++++ .../src/templates/layouts/layout.tsx | 40 ++++++++++ 2 files changed, 116 insertions(+) create mode 100644 packages/storybook/src/templates/layouts/globals.css create mode 100644 packages/storybook/src/templates/layouts/layout.tsx diff --git a/packages/storybook/src/templates/layouts/globals.css b/packages/storybook/src/templates/layouts/globals.css new file mode 100644 index 000000000..d2a571f27 --- /dev/null +++ b/packages/storybook/src/templates/layouts/globals.css @@ -0,0 +1,76 @@ +/* global CSS here */ +body { + margin: 0; + display: flex; + flex-direction: column; + padding: 0; +} + +.page { + background-color: #f2f4f6; +} + +.unstarted { + border: 2px dashed red; +} + +.unfinished { + border: 2px dashed yellow; +} + +.explanation { + color: red; +} +.dutch-map { + --utrecht-icon-size: 48px; +} + +.rhc-background-color-white { + background-color: var(--rhc-color-wit); +} + +.rhc-background-color-lint-blauw { + background-color: var(--rhc-color-lintblauw-500); +} + +.rhc-spacing-2 { + margin-block-end: var(--rhc-space-400); +} + +.rhc-main-content { + display: flex; + justify-content: center; + align-items: center; +} + +.utrecht-figure { + margin-inline-start: 0; + margin-inline-end: 0; +} + +.rhc-page-content { + --utrecht-page-content-padding-block-end: var(--rhc-space-600); + --utrecht-page-content-padding-block-start: var(--rhc-space-600); + --utrecht-page-padding-inline-end: var(--rhc-space-700); + --utrecht-page-padding-inline-start: var(--rhc-space-700); + + margin-block-start: 80px; + margin-block-end: 80px; + width: 70%; +} + +.utrecht-nav-list { + gap: 0.5rem; +} + +.utrecht-nav-list__link a { + color: white; +} + +@media (max-width: 780px) { + .rhc-page-content { + width: 100%; + margin-block-start: 0; + margin-block-end: 0; + } +} diff --git a/packages/storybook/src/templates/layouts/layout.tsx b/packages/storybook/src/templates/layouts/layout.tsx new file mode 100644 index 000000000..8fb33b4d3 --- /dev/null +++ b/packages/storybook/src/templates/layouts/layout.tsx @@ -0,0 +1,40 @@ +'use client'; +import { Document } from '@utrecht/component-library-react'; +import { PropsWithChildren, ReactNode } from 'react'; +import '@nl-rvo/assets/fonts/index.css'; +import '@rijkshuisstijl-community/design-tokens/dist/index.css'; +import '@rijkshuisstijl-community/components-css/index.scss'; +import { Logo, Icon, NavBar, PageHeader } from '@rijkshuisstijl-community/components-react'; +import '@rijkshuisstijl-community/font/src/index.mjs'; +import './globals.css'; + +const RHCTheme = ({ children }: { children: ReactNode }) =>
{children}
; + +export default function RootLayout({ children }: PropsWithChildren<{}>) { + return ( + + + +
+ + + + + +
+ +
+ {children} +
+ + + + ); +} From a1de724211e538882511c12b2265b8f51b9a1aa0 Mon Sep 17 00:00:00 2001 From: Ruben Smit Date: Fri, 1 Nov 2024 11:59:41 +0100 Subject: [PATCH 4/9] feat(storybook-templates): created storybook templates and updated old rhc-templates to get them from storybook --- apps/rhc-templates/package.json | 1 + apps/rhc-templates/src/app/collage/page.tsx | 279 +---------------- apps/rhc-templates/src/app/details/page.tsx | 169 +---------- apps/rhc-templates/src/app/form/page.tsx | 223 +------------- apps/rhc-templates/src/app/page.tsx | 279 +---------------- packages/components-react/src/Button.tsx | 12 +- packages/components-react/src/index.ts | 2 + packages/storybook/package.json | 1 - .../src/templates/collage.stories.tsx | 14 + .../storybook/src/templates/collage/index.tsx | 278 +++++++++++++++++ .../src/templates/details.stories.tsx | 14 + .../storybook/src/templates/details/index.tsx | 165 +++++++++++ .../{home.stories.tsx => form.stories.tsx} | 9 +- .../storybook/src/templates/form/index.tsx | 213 +++++++++++++ .../src/templates/{layouts => }/globals.css | 53 ++-- packages/storybook/src/templates/home.tsx | 12 - .../src/templates/layouts/layout.tsx | 40 --- .../src/templates/rich-text.stories.tsx | 14 + .../src/templates/rich-text/index.tsx | 280 ++++++++++++++++++ pnpm-lock.yaml | 64 ++-- 20 files changed, 1047 insertions(+), 1075 deletions(-) create mode 100644 packages/storybook/src/templates/collage.stories.tsx create mode 100644 packages/storybook/src/templates/collage/index.tsx create mode 100644 packages/storybook/src/templates/details.stories.tsx create mode 100644 packages/storybook/src/templates/details/index.tsx rename packages/storybook/src/templates/{home.stories.tsx => form.stories.tsx} (54%) create mode 100644 packages/storybook/src/templates/form/index.tsx rename packages/storybook/src/templates/{layouts => }/globals.css (62%) delete mode 100644 packages/storybook/src/templates/home.tsx delete mode 100644 packages/storybook/src/templates/layouts/layout.tsx create mode 100644 packages/storybook/src/templates/rich-text.stories.tsx create mode 100644 packages/storybook/src/templates/rich-text/index.tsx diff --git a/apps/rhc-templates/package.json b/apps/rhc-templates/package.json index 5375a7259..ea20aaedf 100644 --- a/apps/rhc-templates/package.json +++ b/apps/rhc-templates/package.json @@ -37,6 +37,7 @@ "@rijkshuisstijl-community/design-tokens": "workspace:*", "@rijkshuisstijl-community/font": "workspace:*", "@rijkshuisstijl-community/rivm-design-tokens": "workspace:*", + "@rijkshuisstijl-community/storybook": "workspace:*", "@rijkshuisstijl-community/web-components-react": "workspace:*", "@rijkshuisstijl-community/web-components-stencil": "workspace:*", "@tabler/icons-react": "3.11.0", diff --git a/apps/rhc-templates/src/app/collage/page.tsx b/apps/rhc-templates/src/app/collage/page.tsx index 37fd50410..72f48199f 100644 --- a/apps/rhc-templates/src/app/collage/page.tsx +++ b/apps/rhc-templates/src/app/collage/page.tsx @@ -1,280 +1,7 @@ 'use client'; -import { - AccordionProvider, - Alert, - Article, - Blockquote, - Button, - FormFieldCheckboxGroup, - FormFieldCheckboxOption, - FormFieldTextarea, - Heading, - IconButton, - Image, - Link, - LinkList, - LinkListLink, - Paragraph, - Separator, - Table, - TableBody, - TableCaption, - TableCell, - TableFooter, - TableHeader, - TableHeaderCell, - TableRow, - UnorderedList, - DataList, - DataListActions, - DataListItem, - DataListKey, - DataListValue, - FormField, - FormFieldErrorMessage, - OrderedList, - OrderedListItem, - Textbox, - UnorderedListItem, - FormFieldTextbox, - FormFieldRadioOption, -} from '@rijkshuisstijl-community/components-react'; -import { IconArrowRight, IconCalendarEvent } from '@tabler/icons-react/dist/esm/tabler-icons-react'; -import { RichText } from '@utrecht/component-library-react/dist/css-module'; +import PageContent from '@rijkshuisstijl-community/storybook/src/templates/collage'; -export default function Collage() { - return ( -
- {/* -
- - - Label - - -
- */} -
-
- - {/* -
- -
- */} - Componenten collage NL Design System - Multicolored tulip field - - In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen. - - - In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen. Zo kan de - hele Nederlandse overheid samenwerken aan een begrijpelijke, gebruiksvriendelijke én toegankelijke online - dienstverlening. - - - Verkies makkelijke korte boven formele lange woorden. - - Gebruik korte, eenvoudige zinnen. Probeer niet meer dan 15 woorden per zin te gebruiken, langere zinnen - kunnen eventueel opgebroken worden in meerdere zinnen. - - Zorg voor vergelijkbare ervaring. - Geef controle. - - - Maak gebruik van opsommingstekens waar dat mogelijk is. - - - Verkies makkelijke korte boven formele lange woorden. - - Gebruik korte, eenvoudige zinnen. Probeer niet meer dan 15 woorden per zin te gebruiken, langere zinnen - kunnen eventueel opgebroken worden in meerdere zinnen. - - Zorg voor vergelijkbare ervaring. - Geef controle. - - - Maak gebruik van opsommingstekens waar dat mogelijk is. - - - In het NL Design System verzamelen we principes, handvatten, elementen, patronen en richtlijnen. - -
- Ik heb het nog nooit gedaan dus ik denk dat ik het wel kan -
- - - {`Hello, I'm a link `} - - - - - - - - - - - - - - - - - - - - - - - - - - - - Label - Label - Label - - - - - Error message - - - - - Key - Value - - Label - - - - - Key - Value - - - - Key - Value - - -
- -
-
- -
-
- -
-
- -
- - {/* -
- 9 -
-
- Label -
-
- Label -
-
- Label -
-
- Label -
-
- Label -
- */} - - Caption van tabel - - - Label - Label - Label - - - - - Label - Label - Label - - - - - Label - Label - Label - - -
- {/*} -
- -
- */} - -
-
-
- ); +export default function Page() { + return ; } diff --git a/apps/rhc-templates/src/app/details/page.tsx b/apps/rhc-templates/src/app/details/page.tsx index 6e716d92c..cdb655d35 100644 --- a/apps/rhc-templates/src/app/details/page.tsx +++ b/apps/rhc-templates/src/app/details/page.tsx @@ -1,170 +1,7 @@ 'use client'; -import { - Article, - BreadcrumbNav, - BreadcrumbNavLink, - Figure, - FigureCaption, - Footer, - Heading, - Icon, - Image, - LinkList, - LinkListLink, - PageHeader, - Paragraph, - Separator, - SubNavBar, -} from '@rijkshuisstijl-community/components-react'; -import { RichText } from '@utrecht/component-library-react/dist/css-module'; +import PageContent from '@rijkshuisstijl-community/storybook/src/templates/details'; -export default function Details() { - return ( - <> -
- - - - Home - - - Onderwerpen - - - Werktijden - - -
-
- Veel bekeken - - Wat zijn de wettelijke regels voor mijn werktijden en rusttijden? - Wat zijn de wettelijke regels voor pauzes tijdens mijn werk? - -
-
- - -
-
- - - De Arbeidstijdenwet geeft regels voor werktijden, pauzes en rusttijden van werknemers. Met deze regels - wil de Rijksoverheid werknemers beschermen tegen te lange werkdagen. Maar ook de combinatie van werk, - privé en zorgtaken gemakkelijker maken. - - - Vraag en antwoord - - Wat zijn de regels bij consignatie (oproepdienst)? - Hoe vaak mag ik nachtdienst hebben? - Welke brochures zijn er over Arbeidstijdenwet en Arbeidstijdenbesluit? - Wanneer geldt de Arbeidstijdenwet niet (of gedeeltelijk) voor mij? - Meer vragen en antwoorden - - Uitgelicht -
-
-
- Multicolored tulip field - Bijschrift (figcaption) van een afbeelding) -
-
-
-
- Multicolored tulip field - Bijschrift (figcaption) van een afbeelding) -
-
-
- -
-
-
-
- }> - 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 - - - ), - }, - ]} - >
- - ); +export default function Page() { + return ; } diff --git a/apps/rhc-templates/src/app/form/page.tsx b/apps/rhc-templates/src/app/form/page.tsx index fb9afaab1..7725b5f82 100644 --- a/apps/rhc-templates/src/app/form/page.tsx +++ b/apps/rhc-templates/src/app/form/page.tsx @@ -1,224 +1,7 @@ 'use client'; -import { - AccordionProvider, - BreadcrumbNav, - BreadcrumbNavLink, - BreadcrumbNavSeparator, - Button, - Fieldset, - FieldsetLegend, - Footer, - FormFieldTextarea, - FormFieldTextbox, - Heading, - Link, - LinkList, - LinkListLink, - PageContent, - Paragraph, - Article, - FormFieldRadioOption, - FormFieldCheckboxOption, - Icon, - FileInput, - UnorderedList, - UnorderedListItem, -} from '@rijkshuisstijl-community/components-react'; -import { FormLabel } from '@utrecht/component-library-react'; -// import { DateInput } from '@amsterdam/design-system-react'; -import { RichText } from '@utrecht/component-library-react/dist/css-module'; +import PageContent from '@rijkshuisstijl-community/storybook/src/templates/form'; -export default function Form() { - const SIZE_IN_BYTES_10_MB = 10485760; - - return ( - <> -
- -
- - - - Home - - - - - - Home 1 - - - - - - Home 2 - - - Formulier voor vragen over Sisa - Heeft u vragen over Single information, Single audit (SiSa)? - Gebruik dan het formulier hieronder. - {/* -
- - - U kunt meerdere bestanden tegelijk toevoegen. - U mag maximaal 10 Mb aan bestanden toevoegen. - - Toegestane bestandstypen: doc, docx, xslx, pdf, zip, jpg, png, bpm en gif. - - - - - - Hoe moet ik extra regels toevoegen bij de macro-versie? - Er zitten fouten in het Excel bestand of de macro-versie? - Macro bestand werkt niet - Hierziene aanleveringen - Tabel van fouten en onzekerheden - Inloggegevens CBS - Aanlevering CBS - Controle verklaring - Hoe leg ik verantwoording af? - -
- */} - - Lees verder over de verantwoordingsmethode SiSa. - -
- - - - - {/* -
- - - -
- */} - - -
- Label -
- - - - -
-
- - Bestand toevoegen - - U kunt meerdere bestanden tegelijk toevoegen. - Een bestand mag maximaal 10MB groot zijn. - - Toegestane bestandstypen: doc, docx, xslx, pdf, zip, jpg, png, bmp en gif. - - - - Informatie over de verwerking van uw persoonsgegevens - - Wij gebruiken gegevens die u heeft ingevuld om uw vraag te beantwoorden. Daarna worden ze volgens in - de archiefwet tijdelijk bewaard in de daarvoor bestemde archiefsystemen. Deze zijn van het Ministerie - van Binnenlandse Zaken & Koninkrijksrelaties (BZK). - - -
- Akkoordverklaring - -
- -
- -
- -
-
- }> - 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 - - - ), - }, - ]} - >
- - ); +export default function Page() { + return ; } diff --git a/apps/rhc-templates/src/app/page.tsx b/apps/rhc-templates/src/app/page.tsx index 339823a7a..b4b169f3a 100644 --- a/apps/rhc-templates/src/app/page.tsx +++ b/apps/rhc-templates/src/app/page.tsx @@ -1,282 +1,7 @@ 'use client'; -import { ButtonLink } from '@utrecht/component-library-react/dist/css-module'; -import { - Article, - ActionGroup, - Blockquote, - Button, - Figure, - FigureCaption, - Footer, - Heading, - Icon, - Image, - Link, - LinkList, - LinkListLink, - Paragraph, - PageContent, - Separator, - OrderedList, - OrderedListItem, - Table, - TableBody, - TableCaption, - TableCell, - TableFooter, - TableHeader, - TableHeaderCell, - TableRow, - UnorderedList, - UnorderedListItem, -} from '@rijkshuisstijl-community/components-react'; -import { RichText } from '@utrecht/component-library-react/dist/css-module'; +import PageContent from '@rijkshuisstijl-community/storybook/src/templates/rich-text'; export default function Page() { - return ( - <> -
- -
- -
- Titel van de pagina - Hier zou een korte introductie van de pagina kunnen staan. -
- Multicolored tulip field - Bijschrift (figcaption) van een afbeelding) -
-
-
- Dit is een H2 - Dit is een paragraaf. - Opsomming ordered list - - Ordered list item. - Ordered list item. - Ordered list item. - - Opsomming unordered list - - Unordered list item. - Unordered list item. - Unordered list item. - -
-
- Dit is een H3 - Dit is een paragraaf. - - Een externe link - - - Caption van tabel - - - Label - Label - Label - - - - - Label - Label - Label - - - - - Label - Label - Label - - -
-
-
- Dit is een H4 - - Dit is een wat langere paragraaf. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut orci - mauris, convallis id nisl vel, accumsan placerat elit. Aliquam sed viverra nunc, sit amet aliquet - velit. Sed mollis, felis eu placerat eleifend, libero augue congue sem, at dignissim dui libero ac - nisi. Sed bibendum quis eros quis luctus. Curabitur lobortis convallis ante, sit amet eleifend nunc - dictum et. - - -
- Lorem ipsum dolor sit amet, consectetur ad * isicing elit, sed do eiusmod * -
-
-
- Dit is een H5 - Dit is een paragraaf. -
-
- - - Document delen - - - - E-mail - - - - - - - - - - Twitter - - - - - - - - - - LinkedIn - - - - - - - - - - - - -
- -
- -
-