diff --git a/apps/rhc-templates/package.json b/apps/rhc-templates/package.json index b939b0a79..e6d875845 100644 --- a/apps/rhc-templates/package.json +++ b/apps/rhc-templates/package.json @@ -36,6 +36,7 @@ "@rijkshuisstijl-community/components-react": "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) -
-
-
- -
-
-
- - - ); +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/layout.tsx b/apps/rhc-templates/src/app/layout.tsx index 89e717361..3f3d78cbe 100644 --- a/apps/rhc-templates/src/app/layout.tsx +++ b/apps/rhc-templates/src/app/layout.tsx @@ -1,16 +1,12 @@ 'use client'; -import { Document } from '@utrecht/component-library-react'; import { PropsWithChildren } 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'; +import '@rijkshuisstijl-community/storybook/src/templates/globals.css'; import Head from 'next/head'; -const RHCTheme = ({ children }: PropsWithChildren<{}>) =>
{children}
; - export default function RootLayout({ children }: PropsWithChildren<{}>) { return ( @@ -18,26 +14,7 @@ export default function RootLayout({ children }: PropsWithChildren<{}>) { Rijkshuisstijl demo - Index - -
- - - - - -
- -
- {children} -
- +
{children}
; ); 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 - - - - - - - - - - - - -
- -
- -
-