nl-design-system / rijkshuisstijl-community

Unofficial Rijkshuisstijl components and design tokens based on the NL Design System architecture. This project is not endorsed by the Dutch Ministry of General Affairs.

Design Tokens for Rijkhuisstijl

This project is not endorsed by the Dutch Ministry of General Affairs.

Applying design elements from this project is strictly prohibited for organisations that are not part of the central Government of The Netherlands.

This project is part of a community iniative to use NL Design System components for projects that need to adhere to Rijkshuisstijl. Organisations from the central Government of the Netherlands (for example: Belastingdienst, DUO, Logius, SVB), as well as those who are contracted by them to develop websites and apps, are able to collaborate via this project.

License

This project contains both proprietary and free and open-source software licensed under the European Union Public License (EUPL) v1.2.

For information about proprietary assets in this repository, please carefully read the NOTICE file.

Logo and style guide

Copyright applies to the Rijkshuisstijl logo and Rijkhuisstijl brand identity. Use of logo and brand identity is strictly prohibited for any other use than developing websites and apps for the central Government of The Netherlands.

Fonts

Fonts used for the Rijkshuisstijl are designed specifcally for the central Government of The Netherlands and are not open source. Before applying the web fonts to your project, ensure you have permission from the Rijkshuisstijl. Until you have permission, use fallback fonts instead, such as the system fonts Arial, Verdana or Times New Roman.

Permission

When you are developing a website for the central Government of the Netherlands, you request permission by contacting the Ministry of General Affairs.

Code of Conduct

We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and healthy community. Read our Code of Conduct if you haven't already.

Development

This project is based on the NL Design System template repository and can be used by the Rijksoverheid organisations that want to use NL Design System and collaborate on extra components a shared theme and storybook templates.

NodeJS and pnpm

We use NodeJS for installing and managing our javascript packages. Check in your terminal with node -v if you have NodeJS installed. Otherwise install node https://nodejs.org/en before you start.

NodeJS comes with npm. We will not use npm to install our packages, but pnpm instead. This is so we can ensure super stable package resolution. To get started make sure you have pnpm installed by checking with pnpm -v. If you do not see a version use npm install -g pnpm to install pnpm globally on your machine.

Handy Commands

All commands are run from the root of the project, from a terminal:

Command	Action
pnpm install	Installs dependencies
pnpm run storybook	Starts local dev server at localhost:6006 and a watcher for design tokens
pnpm run build	Build your production site to ./dist/
pnpm run lint	Run the linting scripts to ensure your code meets the project standards
pnpm run lint-fix	Run the linting scripts and automatically fix all possible errors

Best to be run from packages/components-react because then you get a more detailed view of how many test suites and tests are ran and which have passed:

Command	Action
pnpm run test	Run all test suites

Packages

Package	Purpose
components-css	When no component exists in the NL Design System community, candidate of hall-of-fame a component can be added here for use by the community
components-react	Optionally when a CSS component exists but a React wrapper is missing, the React wrapper can be added here for use by the community
design-tokens	The rijkshuisstijl themes are managed here for use in combination with themeless NL Design System. Note these should move to proprietary instead
storybook	Extra components and page templates can be added as a story to document the existance and use of components and visual regression testing
web-components-stencil	When a CSS component exists but a Web component wrapper is missing, the web-component wrapper can be added for use by the community
web-components-react	When a web-component exists a React web-component wrapper can be added for convenience

Proprietary

Branding, fonts and other assets should often not be part of the EUPL license. By adding those in the proprietary packages they are legally excluded based on the LICENSE and NOTICE files. Each rijksoverheid organisation working with a NL Design System thema can add their theme as a package here.

rijkshuisstijl-community's Issues

Paragraph

Figma
Paragraph in NLDS - Rijksoverheid - Bibliotheek

Template: Rich text pagina

Stakeholder in Community: NLdoc team bij Logius.

Figma: https://www.figma.com/design/H4hSqpPbvFMLklDZgswwgd/NLDS---Rijkshuisstijl---Templates?node-id=4401-5676&t=fgW9qo7Mdx5CKe9c-4

Componenten:

• Button group #479
• Buttons #455
• Link #448
• Table #465
• Unordered list #467
• Figure #480
• Heading 1 #469
• Heading 2 #469
• Image #477
• Link List #478
• Logo #153
• Navigation bar #152
• Ordered List #476
• Page footer #154
• Paragraph #475
• Separator #473

Daarna:

• update imports
• remove unstarted borders
• fix potentially missing tokens in rich-text wrapper
• change logo design to not have blue lint

Figure component

Icon only button

Dit is geen losse component, dit is Utrecht met met aria-label

Figma
Icon only button in NLDS - Rijksoverheid - Bibliotheek

Blockquote component

Figma
Blockquote in NLDS - Rijksoverheid - Bibliotheek

Uitlog knop component

Deze component kan Ruben O bijdragen vanuit DICTU (onder voorbehoud van toestemming)

Template: MijnOverheid

Template in Figma

Template: collage

Template: form

https://www.figma.com/design/H4hSqpPbvFMLklDZgswwgd/NLDS---Rijkshuisstijl---Templates?node-id=3085-5078&t=dIBesYtMvXxkEdRY-0

• finish #460
• update imports
• remove unstarted borders
• fix potentially missing tokens in rich-text wrapper
• change logo design to not have blue lint

Patch round 2024-01

Pro-tip: ignore warnings about deprecated packages until you have completed upgrade of major releases. Often major releases will fix deprecated warnings.

Configuration

The following configuration is a prerequisite for this workflow. All of this should have already been installed and configured.

• npm-check-updates is installed in the root, and there are three npm scripts:
  • pnpm run update-patch with .ncurc.patch.cjs as configuration file
  • pnpm run update-patch with .ncurc.minor.cjs as configuration file
  • pnpm run update-major with .ncurc.major.cjs as configuration file
  • pnpm run test-update to run the continuous integration steps as "smoke test".
• npm-package-json-lint with .npmpackagejsonlintrc.json as configuration file
• Require fixed version dependencies for npm:
  • .npmrc has save-prefix= to override the ^ or ~ with an empty string
  • none of the existing package.json files have ^ and ~ dependencies.
  • package-json-lint checks the following rules:
    • "no-caret-version-dependencies": "error"
    • "no-caret-version-devDependencies": "error"
    • "no-tilde-version-dependencies": "error"
    • "no-tilde-version-devDependencies": "error"
• the pnpm-lock.yaml lock file for the package manager has been committed to the git repo (and lock files for other package managers have been added to .gitignore to prevent accidentally committing those)
• "Security advisories" for this repository are enabled, as well as Dependabot alerts.

Preparation

• Check the /.patches/ directory in the root (if present), and see if there are any npm packages that have overrides for their code.
  • When for a patch/minor/major update these package are updated, you must also create a new version of the patch file. Create a task for this in this issue.
  • Sometimes the patch is no longer necessary, because the bug that the patch is for has been fixed in the actual package. Read the commit message for the patch, or read the GitHub PR comments or the related GitHub issue comments to find out what the patch was for.
  • Ideally the patch files have a code comment in .patches/README.md explaining the conditions when the patch is no longer required.

npm dependencies

We use the npm-check-updates package to upgrade to new versions of npm packages, and have consistent versions across all packages in our mono-repository.

There are three configuration files:

• .ncurc.patch.cjs: include packages in this array to prevent upgrading patch versions and higher.

• .ncurc.minor.cjs: prevent upgrading to new minor versions and higher.

• .ncurc.major.cjs: prevent upgrading to new major versions and higher.

• Check the configuration files above, to see if some of the updates no longer need to be blocked. Ideally the entries in these files have a code comment explaining the conditions where the upgrade no longer needs to be prevented.

patch versions

We don't allow ~1.0.0 style dependencies, so patch versions will not be installed automatically (1.0.0 to 1.0.1). That's why it is important to frequently install patches yourself.

• Run pnpm run update-patch to install new patch versions.
• Run npm run test-update and see if the build/lint/test scripts are still OK.
• Check if the logs contain any (new) warnings. You can compare the logs with GitHub Action logs for the main branch.
• If a patch update is problematic, you can temporarily add the package to the "ignore updates" list in .ncurc.patch.js.

Not all package maintainers use semantic versioning, especially 0.x.x versions, and alpha and beta versions. Unfortunately they will be installed as part of update-patch, so update-patch isn't as safe as you might think. You might want to read change logs of patch upgrades below 1.0.0 to see if there are breaking API changes.

• Check if any packages have upgrades like 0.1.2 ➝ 0.1.9, and pay extra attention to these packages.

Create a pull request at this stage already, since minor upgrades and major upgrades might take some effort. Patches sometimes contain security vulnerability fixes.

minor versions

We don't allow ^1.0.0 style dependencies (1.0.0 to 1.0.1)

• ideally install pnpm run update-minor.
• Run npm run test-update and see if the build/lint/test scripts are still OK
• If a minor update is problematic, you can add the package to the "ignore updates" list in .ncurc.minor.js.

major versions

• if there is time, install pnpm run update-major.
• Run npm run test-update and see if the build/lint/test scripts are still OK
• If a major update is problematic, you can add the package to the "ignore updates" list in .ncurc.major.js.

Make an issue for minor/major upgrades that require so much time we better schedule it in a sprint.

deprecations

Run pnpm install. If the log still contains deprecation warnings at this stage, check if they are direct dependencies. Are the dependencies mentioned in our own package.json files? Then it its probably worthwhile to investigate why the package is deprecated. A good information source is often the README on the page about the package on npmjs.com. They will likely mention the reason for deprecating the page (e.g: no time to install security patches, you are on your own!) and they might even suggest alternative packages.

GitHub Action

Dependabot pull requests are a great way to detect outdated dependencies in GitHub Actions.

• Upgrade all GitHub Action dependencies

Node.js

Check the Node.js website to see what the long term support version is ("Node LTS")

• Upgrade to the latest minor Node LTS version (long term support)
  • package.json
  • .nvmrc
  • .github/workflows/*: configure node-version or reference node-version-file: ".nvmrc"
• Vercel: go to project Settings ➝ General ➝ Node.js version and select the new major version

pnpm

• Upgrade to latest pnpm version
  • .github/workflows/*": upgrade pnpm version in GitHub Actions for pnpm
  • package.json under engines. "^version" is usually okay, an exact version dependency is undesirable for developer experience, unless everyone develops in Docker containers. You can install an exact version of pnpm in GitHub Action if you want to.

Vulnerabilities

• Check the "Security" tab of this GitHub repository and consider the Vulnerabilities
• Upgrade all vulnerable dependencies, or dismiss the alerts with a good reason.

Docker images

Currently this repo doesn't have a docker-compose.yml where image needs to be updated, or any Dockerfile where FROM needs to be updated.

Logo component

Bijna alle teams die meedoen hebben het logo nodig.

Een veel voorkomend probleem met het logo in de praktijk is dat de tekst niet zichtbaar is in forced colors mode, waardoor de afzender niet duidelijk is op veel sites voor mensen die dat nodig hebben, omdat de tekst ofwel een PNG is met zwarte tekst en transparante achtergrond, of dat het een afbeelding is met witte achtergrond (te fel voor sommige mensen), of dat het zwarte tekst is in een SVG. Dat is op te lossen door een SVG met currentColor te gebruiken.

Een ander probleem is dat de tekst vaak kleiner is dan 16px, waardoor de afzender niet leesbaar is voor veel bezoekers.

• web component
  • titel instelbaar
  • subtitel instelbaar
• toegankelijk
• werkt in dark mode
• werkt in forced colors + high contrast mode
• kan werken als link naar homepage
• reponsive: breedte lint is instelbaar op basis van container of viewport

RVO heeft al een implementatie hiervoor in hun open source repository in HTML + CSS, maar het is nog geen web component.

Link list component

RhcChevronRight bestaat misschien nog niet, en also, die is copyrighted, dus even een open source alternatief verzinnen. Misschien bij Tabler of bij Utrecht.

https://nl-design-system.github.io/utrecht/storybook-react/?path=/docs/react-link-list--docs

<LinkList>
    <LinkListLink
      href="#"
      icon={<RhcChevronRight />}
    >
      Learn about{' '}
      <i lang="fr">
        joi de vivre
      </i>
      , an essential foreign phrase!
    </LinkListLink>
    <LinkListLink
      href="#"
      icon={<RhcChevronRight />}
    >
      Link 2
    </LinkListLink>
    <LinkListLink
      href="#"
      icon={<RhcChevronRight />}
    >
      Link 3
    </LinkListLink>
</LinkList>

Figma
Link list in Local - Rijkshuisstijl - Bibliotheek

Beslisboom

Deze component kan Ruben O bijdragen vanuit DICTU (onder voorbehoud van toestemming)

Button component

https://nl-design-system.github.io/utrecht/storybook-react/?path=/docs/react-button--docs

Figma
Button component in NLDS - Rijksoverheid - Bibliotheek

Hero component

Moet echt gerefined worden, er is nog veel onduidelijk. Deze component bestaat nog niet in de frontend ergens.

Figma
Hero in NLDS - Rijkshuisstijl - Bibliotheek

⚠️ Let op! Deze moeten we nog met de designers bespreken en voorzien van design tokens.

Unordered list

https://nl-design-system.github.io/utrecht/storybook-react/?path=/docs/react-unordered-list--docs

<UnorderedList>
  <UnorderedListItem>
    List item 1
  </UnorderedListItem>
  <UnorderedListItem>
    List item 2
  </UnorderedListItem>
  <UnorderedListItem>
    List item 3
  </UnorderedListItem>
</UnorderedList>

Figma
Unordered list in NLDS - Rijksoverheid - Bibliotheek

Navigatiebalk

RIVM:

Rijksoverheid.nl

Rijksoverheid.nl/onderwerpen

Rijkswaterstaat

Rijkswaterstaat mega menu:

Logius.nl:

Logius.nl mega menu:

DigiToegankelijk.nl:

DigiToegankelijk.nl mega menu:

Coronadashboard:

DigiD:

Belastingdienst.nl

Belastingdienst.nl mega menu:

Belastingdienst toeslagen:

Douane:

Forum standaardisatie:

Forum standaardisatie mega menu:

Pleio Rijkshuisstijl thema op peppolautoriteit.nl:

Pleio Rijkshuisstijl uitgeklapt menu:

DICTU:

DUO (heeft op de homepage geen navigatiebalk, maar wel op subpagina's)

DUO zoeken uitgeklapt:

KNMI:

Defensie:

Defensie subpagina:

Nederland wereldwijd (homepage)

Nederland wereldwijd mega menu:

Nederland wereldwijd subpagina:

Portaal menu

Het menu van een portaal waar je bent ingelogd heeft meestal een ander design, waarschijnlijk moet dat een speciale component worden. Bijvoorbeeld MijnOverheid.nl:

RVO in Storybook:

Extra navigatie

DUO.nl heeft bovenin een extra balk:

Belastingdienst ingelogd met DigiD op formulier:

Belastingdienst ingelogd met DigiD op formulier (uitgeklapt):

Elementen

Veelvoorkomende elementen:

• Expliciete "Home" link als eerste link
• Breadcrumb navigatie in plaats van categorie navigatie, voor sites waar de navigatie via de main content gaat (PRO sites, DUO)
• Uitklap menu met 1 niveau (eigenlijk alleen Pleio)
• Mega menu met 1 niveau (Nederland Wereldwijd)
• Mega menu met 2 niveau's (Logius/DigiToegankelijk/Belastingdienst/Forum Standaardisatie)
• Ingelogd status/Uitlogknop (Belastingdienst, DUO, RVO)
• Zoeken
  • Zoek button met expandable zoek form (DigiD, sommige PRO sites)
  • Zoek inputveld + zoek button (sommige PRO sites)
  • Zoekveld met placeholder ("Waar bent u naar op zoek?", "Voer uw zoekterm in", "Zoeken")
  • Zoek

Template: RVO

Template in Figma

Bestand invoer component

Figma
Deze component bestaat uit een aantal componenten:

• Form field label in NLDS - Rijksoverheid - Bibliotheek
• Unordered list in NLDS - Rijksoverheid - Bibliotheek
• Button in NLDS - Rijksoverheid - Bibliotheek

Separator

Figma
Separator in NLDS - Rijksoverheid - Bibliotheek

Accordion component

AccordionProvider van Utrecht

Figma
Accordion component in NLDS - Rijksoverheid - Bibliotheek

Page footer

Belastingdienst.nl:

Belastingdienst toeslagen:

Douane.nl:

Forum Standaardisatie:

Rijkswaterstaat.nl:

Rijksoverheid.nl:

DigiD.nl:

Logius.nl:

MijnOverheid.nl homepage:

DUO.nl:

Plei voor Rijkshuisstijl thema op peppolautoriteit.nl:

Defensie:

KNMI:

Nederland Wereldwijd:

DICTU:

NFI:

RIVM.nl:

DigiToegankelijk.nl:

DigiToegankelijk dashboard

Elementen

Veelvoorkomende elementen:

• sections / columns met heading en link list
• alternate language links
• slogan
• link "back to top"
• links naar privacy / toegankelijkheid / cookies / copyright / kwetsbaarheid melden (responsible disclosure)
• links naar social media met icon van logo
• links naar externe website (soms met icon)

Template: Mijn Logius

Template in Figma

Navigation bar component

Figma
De Navigation bar is uitgebreid zodat het voldoet aan de mogelijkheden die voorkomen bij verschillende organisaties.

Navigation bar in NLDS - Rijkshuisstijl - Bibliotheek ⭕️

⚠️ Let op! Deze moeten we eerst nog intern en met de designers bespreken voordat het gebouwd mag worden.

Skip link

Figma
Skip link in NLDS - Rijksoverheid - Bibliotheek

• maak de Story met de skiplink
• zorg dat de skiplink zichtbaar is in Storybook by default, niet pas zichtbaar bij tabben (ik denk daar utrecht-skip-link--visible ofzo voor is)
• voeg de skiplink toe aan de templates, die moet linken naar id="main" met href="#main", en die moet uitkomen voorbij de navigatie zoals breadcrumb, maar direct bij de inhoud.
• de skiplink moet in de templates in de element zitten. Niet in een <nav> stoppen.

Image

Voor de NLdoc pagina is er een image nodig die keep aspect ratio doet.

Je kunt de Utrecht Image gebruiken met de photo boolean. Misschien wil je die wel standaard op true zetten?

https://nl-design-system.github.io/utrecht/storybook-react/?path=/docs/react-image--docs

<Image
  alt="Nijntje mascotte met Vuelta 2022 t-shirt bij het Utrecht stadskantoor"
  height={1536}
  photo
  src="example/photo-nijntje-vuelta.jpg"
  width={2048}
/>

Als je een Next.js image wilt hebben, met image size optimization en source sets and all the good things, die is ook al een keer gemaakt, vraag @Robbert of @AliKdhim87

Figma
Image in NLDS - Rijksoverheid - Bibliotheek

Alert

Dit is gewoon een Alert

Figma
Alert in NLDS - Rijksoverheid - Bibliotheek

Template: detail

Card component

Card as link in Local - Rijkshuisstijl - Bibliotheek ⭕️

⚠️ Let op! Deze moeten we eerst nog intern en met de designers bespreken voordat het gebouwd mag worden.

Komt voor bij Rijksoverheid, Mijn Logius en RVO.

Action group / Button group component

Voorstel: noem 'm ActionGroup. Skate where the puck is going to be.
https://nldesignsystem.nl/action-group/

https://nl-design-system.github.io/utrecht/storybook-react/?path=/docs/react-button-group--docs

Voorbeeld van hoe die toegepast wordt door RVO:
https://nl-design-system.github.io/rvo/?path=/docs/componenten-button-group--documentatie

RVO heeft ook nog wat tweaks om rechts uitlijnen mogelijk te maken, maar dat is niet recommended vanuit NL Design System voor gebruiksvriendelijkheid. Overleg even met Aline wat handig is voor de Rijkshuisstijl.

Figma
Action group in NLDS - Voorbeeld - Bibliotheek

Toggletip component

Figma
Toggletip in Local - Rijkshuisstijl - Bibliotheek

PR - added toggletip tokens: #657

Breadcrumb navigation component

https://nl-design-system.github.io/utrecht/storybook-react/?path=/docs/react-breadcrumb-nav--docs#separator

Breadcrumb navigation met separator

import { BreadcrumbNav } from '@utrecht/component-library-react/dist/css-module/';

Figma
Breadcrumb navigation in NLDS - Rijksoverheid - Bibliotheek

Heading 1 - Heading 6 en variable Heading

We kiezen ervoor om alleen de "Variable heading" component te exporteren en te documenteren:

https://nl-design-system.github.io/utrecht/storybook-react/?path=/docs/react-heading--docs

<Heading level={1}>
  The Quick Brown Fox Jumps Over The Lazy Dog
</Heading>

Figma
Heading component in NLDS - Rijksoverheid - Bibliotheek

Vlaggen van landen als icoon (SVG)

Kijk of je het kan combineren met de Utrecht <Icon> voor icon-size dat die automatisch werkt, verder is dit een heel handige toevoeging.

Deze component kan Ruben O bijdragen vanuit DICTU (onder voorbehoud van toestemming)

Externe link component

Waarschijnlijk het handigst een wrapper te maken van de Utrecht Link met jullie externe link functionaliteit als extra feature.

• Gebruik de wrapper van Utrecht als je een externe link icoon hebt
• Let op de accessibility van icon, moet wel text-equivalent hebben
• external prop gebruiken (en weer doorgeven aan Utrecht Link) voor privacy en noreferrer enzo

Link.tsx aanmaken in deze component library voor React:

import { Link as UtrechtLink, type LinkProps as UtrechtLinkProps } from '@utrecht/component-library-react/dist/css-module';

interface RhcLinkProps extends UtrechtLinkProps {
  externalLabel?: string;
}

export const Link = forwardRef(
  (({ externalLabel, ...restProps}: RhcLinkProps, ref: ForwaredRef<HTMLAnchorElement>) => <UtrechtLink {...restProps} ref={ref}>{restProps.external && <Icon role="img" aria-label={externalLabel}><ExternalIconSVG/></Icon>}{children}</Link>);

index.ts:

export * from '@utrecht/component-library-react/dist/css-module';

// Overwrite some components
export { Link } from './Link';

Voorbeeld van een wrapper van UtrechtLink voor Next.js: https://github.com/frameless/strapi/blob/main/packages/ui/src/components/AdvancedLink/index.tsx

Figma
Link component in NLDS - Rijksoverheid - Bibliotheek

Template: link to the 3 template pages

Icon component

Extra uitdaging, de Rijkshuisstijl icons zijn niet open source. We moeten een mapping gaan aanleggen van bestaande proprietary icon IDs naar open source icons.

• Voor functionele icons kunnen we Tabler icons gebruiken: https://tabler.io/icons
• Voor overheids-onderwerpen kunnen we https://Gemeenteniconen.nl gebruiken
• Icons die geen alternatief hebben moeten we Gebruiker Centraal en Martijn Rietveld lief aankijken

Form field radio group

Figma

• Radio group in NLDS - Rijkshuisstijl - Bibliotheek
• Form field radio option in NLDS - Rijkshuisstijl - Bibliotheek
• Form field option label in NLDS - Rijkshuisstijl - Bibliotheek

Chromatic toevoegen

• CHROMATIC_PROJECT_TOKEN instellen
• chromatic toevoegen aan storybook: https://github.com/nl-design-system/lux/pull/70/files#diff-84eee7b835422bb2108283ad71e23c058d1fb2bb966e0a835f12d70197def68d
• chromatic toevoegen aan github actions https://github.com/nl-design-system/lux/pull/70/files#diff-af36bb0ba98217223305c14372a4e893c25a61dcfa63a78b32eb3f37c6cd1285

Checkbox + Checkbox group component

Figma

• Checkbox in NLDS - Rijkshuisstijl - Bibliotheek
• Checkbox group in NLDS - Rijkshuisstijl - Bibliotheek
• Form field checkbox option in NLDS - Rijkshuisstijl - Bibliotheek
• Form field option label in NLDS - Rijkshuisstijl - Bibliotheek

Table

Figma
Table in NLDS - Rijksoverheid - Bibliotheek

Navigation list component

Navigation list in Local - Rijkshuisstijl - Bibliotheek ⭕️

⚠️ Let op! Deze moeten we eerst nog intern en met de designers bespreken voordat het gebouwd mag worden.

Komt voor bij MijnOverheid.

Ordered list

https://nl-design-system.github.io/utrecht/storybook-react/?path=/docs/react-ordered-list--docs

<OrderedList>
  <OrderedListItem>
    List item 1
  </OrderedListItem>
  <OrderedListItem>
    List item 2
  </OrderedListItem>
  <OrderedListItem>
    List item 3
  </OrderedListItem>
</OrderedList>

Figma
Ordered list in NLDS - Rijksoverheid - Bibliotheek

Taalkeuze menu component

Veel onderzoek naar language navigation component:
https://github.com/orgs/nl-design-system/discussions/245

Form field + Select / Textarea / Text input

• Form field label
• Form field description
• Form field error message

Figma

• Form field in NLDS - Rijksoverheid - Bibliotheek
• Select in NLDS - Rijksoverheid - Bibliotheek
• Textarea in NLDS - Rijksoverheid - Bibliotheek
• Text input in NLDS - Rijksoverheid - Bibliotheek
• Form field label in NLDS - Rijksoverheid - Bibliotheek
• Form field description in NLDS - Rijksoverheid - Bibliotheek
• Form field error message in NLDS - Rijksoverheid - Bibliotheek

Template: campagne

Template in Figma

Message list component

Figma
Message list in Local - Rijkshuisstijl - Bibliotheek ⭕️

⚠️ Let op! Deze moeten we eerst nog intern en met de designers bespreken voordat het gebouwd mag worden.

Komt voor bij MijnOverheid.

DigiDknop component

Gebruik de Login link component van Logius/Lux:
https://nl-design-system.github.io/lux/?path=/docs/web-components-button-login--docs

Figma
Login link in Local - Rijkshuisstijl - Bibliotheek ⭕️ nog niet gestart

⚠️ Let op! Deze moeten we nog voorzien van design tokens.

• wacht tot de @lux-design-system/web-components-react package beschikbaar is op npm
• voeg de @lux-design-system/web-components-react en @lux-design-system/web-components-stencil toe als dependencies
• gebruik de React wrapper voor de LuxDigidKnop (of hoe die ook heet) om de component te renderen in Storybook

Er is nu nog geen template waarin de component zit.

Link

Bestaat al in Storybook, kan misschien nog uitgebreid worden:
https://nl-design-system.github.io/rijkshuisstijl-community/?path=/docs/logius-link--docs

Figma
Link component in NLDS - Rijksoverheid - Bibliotheek

Fix editor errors