From e18f8d6d35c85cdc35ce7963b318aa96e66d2ae0 Mon Sep 17 00:00:00 2001 From: rianrietveld Date: Mon, 27 Nov 2023 14:16:53 +0100 Subject: [PATCH 01/13] docs: add descriptions --- docs/richtlijnen/README.md | 27 ++++++- .../00-alle-richtlijnen/02-descriptions.mdx | 52 +++++++++++++ .../_description-associated-code.mdx | 34 +++++++++ .../_description-associated.md | 14 ++++ .../_description-fieldset-code.mdx | 31 ++++++++ .../_description-fieldset.md | 3 + .../_description-length-code.mdx | 4 + .../_description-length.md | 7 ++ .../_description-multiple-code.mdx | 18 +++++ .../_description-multiple.md | 8 ++ .../_description-placement-code.mdx | 73 +++++++++++++++++++ .../_description-placement.md | 5 ++ .../_description-target-size-code.mdx | 4 + .../_description-target-size.md | 7 ++ src/css/custom.css | 8 +- 15 files changed, 291 insertions(+), 4 deletions(-) create mode 100644 docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx create mode 100644 docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-associated-code.mdx create mode 100644 docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-associated.md create mode 100644 docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-fieldset-code.mdx create mode 100644 docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-fieldset.md create mode 100644 docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-length-code.mdx create mode 100644 docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-length.md create mode 100644 docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-multiple-code.mdx create mode 100644 docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-multiple.md create mode 100644 docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-placement-code.mdx create mode 100644 docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-placement.md create mode 100644 docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size-code.mdx create mode 100644 docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size.md diff --git a/docs/richtlijnen/README.md b/docs/richtlijnen/README.md index e85f31a7123..36883de988e 100644 --- a/docs/richtlijnen/README.md +++ b/docs/richtlijnen/README.md @@ -6,9 +6,9 @@ sidebar_label: Richtlijnen pagination_label: Richtlijnen description: NL Design System richtlijnen keywords: - - wat - - design system - - documentatie +- wat +- design system +- documentatie --- # Richtlijnen @@ -63,3 +63,24 @@ _label-text-visibility.md ``` +### Namen voor partials + +We willen de namen liefst niet meer veranderen, en dus toekomstbestendig maken (vanuit de ‘cool URI's don't change’ gedachte). + +Enkele richtlijnen: + +- gebruik enkelvoud tenzij meervoud noodzakelijk is +- gebruik keywords uit HTML/CSS/SVG voor IDs/slugs/filenames +- gebruik prefixes en hiërarchie in prefixes zodat door sorteren automatisch groepjes ontstaan + +Voorbeelden van namen voor label-gerelateerde partials: + +``` +_label-position.md +_label-text.md +_label-visibility.md +_label-no-activate.md +_label-text-visibility.md +``` + + diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx new file mode 100644 index 00000000000..9aa725fca4e --- /dev/null +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx @@ -0,0 +1,52 @@ +--- +title: Descriptions in een formulier | Richtlijnen | NL Design System +hide_title: true +hide_table_of_contents: false +sidebar_label: Descriptions +pagination_label: Descriptions in een formulier +description: Richtlijnen voor het toepassen van descriptions in een formulier. +keywords: + - labels + - formulier + - design + - code +--- + + +import DescriptionPlacement from './\_description-placement.md'; +import DescriptionPlacementCode from './\_description-placement-code.mdx'; +import DescriptionAssociated from './\_description-associated.md'; +import DescriptionAssociatedCode from './\_description-associated-code.mdx'; +import DescriptionMultiple from './\_description-multiple.md'; +import DescriptionMultipleCode from './\_description-multiple-code.mdx'; +import DescriptionFieldset from './\_description-fieldset.md'; +import DescriptionFieldsetCode from './\_description-fieldset-code.mdx'; +import DescriptionTargetSize from './\_description-target-size.md'; +import DescriptionTargetSizeCode from './\_description-target-size-code.mdx'; +import DescriptionLength from './\_description-length.md'; +import DescriptionLengthCode from './\_description-length-code.mdx'; + +# Descriptions in een formulier + +Bij een formulierveld kun je extra informatie plaatsen, met bijvoorbeeld uitleg over hoe een veld in te vullen, de eisen voor een wachtwoord, foutmeldingen of waarschuwingen. + +We geven deze extra informatie hier de verzamelnaam "descriptions", om aan te sluiten bij de term [“accessible description”](https://www.w3.org/TR/wai-aria-1.2/#dfn-accessible-description), die in toegankelijkheidsstandaarden wordt gebruikt. + + + + + + + + + + + + + + + + + + + diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-associated-code.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-associated-code.mdx new file mode 100644 index 00000000000..492b6399fa5 --- /dev/null +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-associated-code.mdx @@ -0,0 +1,34 @@ + + +import { Canvas } from "@site/src/components/Canvas/Canvas"; +import { Guideline } from "@site/src/components/Guideline"; + + + + + +

+ Kies een wachtwoord van minimaal 8 karakters lang. +

+ + + + + + + +

+ Kies een wachtwoord van minimaal 8 karakters lang. +

+ + + diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-associated.md b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-associated.md new file mode 100644 index 00000000000..5003622b69b --- /dev/null +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-associated.md @@ -0,0 +1,14 @@ +## Koppel een description aan het formulierveld + +Voor screenreadergebruikers is het belangrijk dat de description samen wordt voorgelezen met het formulierveld. Dat kan door deze twee aan elkaar te koppelen via aria-describedby. + +**Let op:** De gebruikte ID’s moeten uniek zijn voor de pagina, anders worden de verkeerde descriptions bij de velden voorgelezen. + +Opzet in de HTML: + +- Geef description een ID: `id="description-wachtwoord"`. +- Verwijs in het formulierveld naar dat ID:`aria-describedby="description-wachtwoord"`. + +Hierdoor wordt naast de labeltekst ook de description voorgelezen, wanneer een screen reader gebruiker het formulierveld focus geeft. + +Lees ook: [MDN over aria-describedby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby). diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-fieldset-code.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-fieldset-code.mdx new file mode 100644 index 00000000000..c917ed91fcc --- /dev/null +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-fieldset-code.mdx @@ -0,0 +1,31 @@ + + +import { Canvas } from "@site/src/components/Canvas/Canvas"; +import { Guideline } from "@site/src/components/Guideline"; + + + +
+ Wilt u inloggen? +

Als u inlogt worden uw gegevens al ingevuld en kunnen we u makkelijker helpen.

+
+ + +
+
+ + +
+
+ + diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-fieldset.md b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-fieldset.md new file mode 100644 index 00000000000..386d7072be2 --- /dev/null +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-fieldset.md @@ -0,0 +1,3 @@ +## Fieldset: Plaats descriptions tussen legend en eerste item + +Radiobuttons en checkboxes worden gegroepeerd in een fieldset. De "vraag" staat in de legend. Plaats de description dan onder de legend vlak boven het eerste label/formulierveld. De description kan aan de fieldset worden gekoppeld. diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-length-code.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-length-code.mdx new file mode 100644 index 00000000000..1c3f9604183 --- /dev/null +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-length-code.mdx @@ -0,0 +1,4 @@ + + +import { Canvas } from "@site/src/components/Canvas/Canvas"; +import { Guideline } from "@site/src/components/Guideline"; diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-length.md b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-length.md new file mode 100644 index 00000000000..3a02fe2a7c9 --- /dev/null +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-length.md @@ -0,0 +1,7 @@ +## Houd de description kort en to-the-point. + +Heb je erg veel tekst nodig om het formulier goed in te vullen, vermeld deze tekst dan boven het formulier of op een introductiepagina voordat een gebruiker het formulier gaat invullen. + +Als informatie als losse tekstblokken tussen de vragen staat, bestaat de kans dan een screenreadergebruiker deze informatie mist. + +Gebruik liever geen tooltips, dan maak je het voor de gebruiker moeilijker om belangrijke informatie te lezen. Het vergt een extra klik (of toetsenbordaanslagen) en wordt niet door alle gebruikers goed begrepen. Als het echt belangrijk is, laat de informatie dan meteen zien. diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-multiple-code.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-multiple-code.mdx new file mode 100644 index 00000000000..c6aa157e628 --- /dev/null +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-multiple-code.mdx @@ -0,0 +1,18 @@ + + +import { Canvas } from "@site/src/components/Canvas/Canvas"; +import { Guideline } from "@site/src/components/Guideline"; + + + + +
Kies een wachtwoord van minimaal 8 karakters lang.
+
Je gekozen wachtwoord is te kort.
+ + + diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-multiple.md b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-multiple.md new file mode 100644 index 00000000000..8c33b5b8e39 --- /dev/null +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-multiple.md @@ -0,0 +1,8 @@ + + +## Meerdere descriptions koppelen + +Je kunt meerdere descriptions koppelen aan een formulierveld. Bijvoorbeeld als er een ook nog een foutmelding is. + +Geef dan `aria-describedby` twee waardes (IDs), mee gescheiden door een spatie. De volgorde van de ID's meegegeven in de `aria-describedby` is de volgorde waarin het voorgelezen wordt. + diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-placement-code.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-placement-code.mdx new file mode 100644 index 00000000000..afe63ada58a --- /dev/null +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-placement-code.mdx @@ -0,0 +1,73 @@ + + +import { Canvas } from "@site/src/components/Canvas/Canvas"; +import { Guideline } from "@site/src/components/Guideline"; + + + + +

+ Kies een wachtwoord van minimaal 8 karakters lang. +

+ + + + + + + +

+ Kies een wachtwoord van minimaal 8 karakters lang. +

+

+ Je gekozen wachtwoord is te kort. +

+ + + + + + + + + + +

+ Kies een wachtwoord van minimaal 8 karakters lang. +

+ + + + + + +

+ Kies een wachtwoord van minimaal 8 karakters lang. +

+ +

+ Je gekozen wachtwoord is te kort. +

+ + + diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-placement.md b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-placement.md new file mode 100644 index 00000000000..23a23c137ca --- /dev/null +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-placement.md @@ -0,0 +1,5 @@ +## Plaats descriptions tussen label en formulierveld + +Plaats alle descriptions op een consistente plek, liefst tussen het label en het formulierveld. Omdat de gebruiker van boven naar beneden leest, komt deze informatie na het label op een logisch moment in de leesvolgorde. + +Ook is dan de kans dat de informatie overlapt met bijvoorbeeld browserpopups kleiner. Lees hiervoor het artikel [Avoid Messages Under Fields](https://adrianroselli.com/2017/01/avoid-messages-under-fields.html) van Adrian Roselli. diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size-code.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size-code.mdx new file mode 100644 index 00000000000..1c3f9604183 --- /dev/null +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size-code.mdx @@ -0,0 +1,4 @@ + + +import { Canvas } from "@site/src/components/Canvas/Canvas"; +import { Guideline } from "@site/src/components/Guideline"; diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size.md b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size.md new file mode 100644 index 00000000000..86082fbd10d --- /dev/null +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size.md @@ -0,0 +1,7 @@ +## Houd het aanklikbare gedeelte groot genoeg + +Bij een goede koppeling tussen het label en het formulierveld, zijn beide elementen aanklikbaar. Dat maakt het aanklikbare gedeelte groot. + +Een description ertussen verkleint de aanklikbare ruimte. Zorg er daarom voor dat het aanklikbare gedeelte van een formulierveld **tenminste** 24 bij 24 pixels is, liefst 44 bij 44 pixels. Zodat gebruikers met dikke vingertoppen op een mobiel of met trillende handen met een muis toch een formulierveld kunnen selecteren. + +Een minimale grootte van het aanklikbare gedeelte is een vereiste volgens WCAG-succescriterium [2.5.8 (Niveau A): Minimale trootte van het aanwijsgebied](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html). diff --git a/src/css/custom.css b/src/css/custom.css index d82e836cd06..35da03e07b1 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -657,6 +657,12 @@ abbr[title] { border: 2px solid #cc0000; } -.docs-doc-page input[type="text"] { +.docs-doc-page .utrecht-html label, +.docs-doc-page .utrecht-html legend { + font-weight: bold; +} + +.docs-doc-page input[type="text"], +.docs-doc-page input[type="password"] { display: block; } From 7cb0ac08f74f8217fc14d71f51804eb17493d7c8 Mon Sep 17 00:00:00 2001 From: rianrietveld Date: Mon, 27 Nov 2023 14:18:00 +0100 Subject: [PATCH 02/13] docs: lint-fix:prettier --- docs/richtlijnen/README.md | 7 ++-- .../00-alle-richtlijnen/02-descriptions.mdx | 26 ++++++------- .../_description-associated-code.mdx | 22 ++--------- .../_description-fieldset-code.mdx | 14 +------ .../_description-multiple.md | 1 - .../_description-placement-code.mdx | 37 +++++-------------- 6 files changed, 33 insertions(+), 74 deletions(-) diff --git a/docs/richtlijnen/README.md b/docs/richtlijnen/README.md index 36883de988e..5cb9e1ac25d 100644 --- a/docs/richtlijnen/README.md +++ b/docs/richtlijnen/README.md @@ -6,9 +6,9 @@ sidebar_label: Richtlijnen pagination_label: Richtlijnen description: NL Design System richtlijnen keywords: -- wat -- design system -- documentatie + - wat + - design system + - documentatie --- # Richtlijnen @@ -63,6 +63,7 @@ _label-text-visibility.md ``` + ### Namen voor partials We willen de namen liefst niet meer veranderen, en dus toekomstbestendig maken (vanuit de ‘cool URI's don't change’ gedachte). diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx index 9aa725fca4e..65edd0843f4 100644 --- a/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx @@ -13,18 +13,19 @@ keywords: --- -import DescriptionPlacement from './\_description-placement.md'; -import DescriptionPlacementCode from './\_description-placement-code.mdx'; -import DescriptionAssociated from './\_description-associated.md'; -import DescriptionAssociatedCode from './\_description-associated-code.mdx'; -import DescriptionMultiple from './\_description-multiple.md'; -import DescriptionMultipleCode from './\_description-multiple-code.mdx'; -import DescriptionFieldset from './\_description-fieldset.md'; -import DescriptionFieldsetCode from './\_description-fieldset-code.mdx'; -import DescriptionTargetSize from './\_description-target-size.md'; -import DescriptionTargetSizeCode from './\_description-target-size-code.mdx'; -import DescriptionLength from './\_description-length.md'; -import DescriptionLengthCode from './\_description-length-code.mdx'; + +import DescriptionPlacement from "./_description-placement.md"; +import DescriptionPlacementCode from "./_description-placement-code.mdx"; +import DescriptionAssociated from "./_description-associated.md"; +import DescriptionAssociatedCode from "./_description-associated-code.mdx"; +import DescriptionMultiple from "./_description-multiple.md"; +import DescriptionMultipleCode from "./_description-multiple-code.mdx"; +import DescriptionFieldset from "./_description-fieldset.md"; +import DescriptionFieldsetCode from "./_description-fieldset-code.mdx"; +import DescriptionTargetSize from "./_description-target-size.md"; +import DescriptionTargetSizeCode from "./_description-target-size-code.mdx"; +import DescriptionLength from "./_description-length.md"; +import DescriptionLengthCode from "./_description-length-code.mdx"; # Descriptions in een formulier @@ -49,4 +50,3 @@ We geven deze extra informatie hier de verzamelnaam "descriptions", om aan te sl - diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-associated-code.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-associated-code.mdx index 492b6399fa5..c074657cb2c 100644 --- a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-associated-code.mdx +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-associated-code.mdx @@ -3,32 +3,18 @@ import { Canvas } from "@site/src/components/Canvas/Canvas"; import { Guideline } from "@site/src/components/Guideline"; - -

- Kies een wachtwoord van minimaal 8 karakters lang. -

- +

Kies een wachtwoord van minimaal 8 karakters lang.

+ -

- Kies een wachtwoord van minimaal 8 karakters lang. -

- +

Kies een wachtwoord van minimaal 8 karakters lang.

+ diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-fieldset-code.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-fieldset-code.mdx index c917ed91fcc..946cd87f455 100644 --- a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-fieldset-code.mdx +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-fieldset-code.mdx @@ -9,21 +9,11 @@ import { Guideline } from "@site/src/components/Guideline"; Wilt u inloggen?

Als u inlogt worden uw gegevens al ingevuld en kunnen we u makkelijker helpen.

- +
- +
diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-multiple.md b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-multiple.md index 8c33b5b8e39..deb9ecc4977 100644 --- a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-multiple.md +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-multiple.md @@ -5,4 +5,3 @@ Je kunt meerdere descriptions koppelen aan een formulierveld. Bijvoorbeeld als er een ook nog een foutmelding is. Geef dan `aria-describedby` twee waardes (IDs), mee gescheiden door een spatie. De volgorde van de ID's meegegeven in de `aria-describedby` is de volgorde waarin het voorgelezen wordt. - diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-placement-code.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-placement-code.mdx index afe63ada58a..91e4c377f7b 100644 --- a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-placement-code.mdx +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-placement-code.mdx @@ -3,18 +3,14 @@ import { Canvas } from "@site/src/components/Canvas/Canvas"; import { Guideline } from "@site/src/components/Guideline"; - + -

- Kies een wachtwoord van minimaal 8 karakters lang. -

- +

Kies een wachtwoord van minimaal 8 karakters lang.

+ @@ -37,37 +33,24 @@ import { Guideline } from "@site/src/components/Guideline"; - - -

- Kies een wachtwoord van minimaal 8 karakters lang. -

+ +

Kies een wachtwoord van minimaal 8 karakters lang.

 -

- Kies een wachtwoord van minimaal 8 karakters lang. -

+

Kies een wachtwoord van minimaal 8 karakters lang.

-

- Je gekozen wachtwoord is te kort. -

+

Je gekozen wachtwoord is te kort.

 - From 08294b734ee49e1dea77cdaca5c637ea2be013a6 Mon Sep 17 00:00:00 2001 From: rianrietveld Date: Mon, 27 Nov 2023 14:28:21 +0100 Subject: [PATCH 03/13] Add footer info --- .../formulieren/00-alle-richtlijnen/02-descriptions.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx index 65edd0843f4..3a3c5ce2922 100644 --- a/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx @@ -50,3 +50,5 @@ We geven deze extra informatie hier de verzamelnaam "descriptions", om aan te sl + + From 774ea48a06b59e49bec4522f170f14b35ef5c54e Mon Sep 17 00:00:00 2001 From: rianrietveld Date: Mon, 27 Nov 2023 14:28:28 +0100 Subject: [PATCH 04/13] typo --- .../formulieren/00-alle-richtlijnen/_description-target-size.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size.md b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size.md index 86082fbd10d..73552aab12d 100644 --- a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size.md +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size.md @@ -4,4 +4,4 @@ Bij een goede koppeling tussen het label en het formulierveld, zijn beide elemen Een description ertussen verkleint de aanklikbare ruimte. Zorg er daarom voor dat het aanklikbare gedeelte van een formulierveld **tenminste** 24 bij 24 pixels is, liefst 44 bij 44 pixels. Zodat gebruikers met dikke vingertoppen op een mobiel of met trillende handen met een muis toch een formulierveld kunnen selecteren. -Een minimale grootte van het aanklikbare gedeelte is een vereiste volgens WCAG-succescriterium [2.5.8 (Niveau A): Minimale trootte van het aanwijsgebied](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html). +Een minimale grootte van het aanklikbare gedeelte is een vereiste volgens WCAG-succescriterium [2.5.8 (Niveau A): Minimale grootte van het aanwijsgebied](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html). From 68848758fd22e5d9b11c0eef563f1638daad8386 Mon Sep 17 00:00:00 2001 From: rianrietveld Date: Mon, 27 Nov 2023 14:32:04 +0100 Subject: [PATCH 05/13] Add FormFooterInfo --- .../formulieren/00-alle-richtlijnen/02-descriptions.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx index 3a3c5ce2922..80e2b3561a8 100644 --- a/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/02-descriptions.mdx @@ -26,6 +26,7 @@ import DescriptionTargetSize from "./_description-target-size.md"; import DescriptionTargetSizeCode from "./_description-target-size-code.mdx"; import DescriptionLength from "./_description-length.md"; import DescriptionLengthCode from "./_description-length-code.mdx"; +import FormFooterInfo from "./_form_footer_info.md"; # Descriptions in een formulier From 7b3f1c4e46dba76b1820ade01dbc6ebf800f495b Mon Sep 17 00:00:00 2001 From: Hidde de Vries Date: Tue, 28 Nov 2023 10:55:17 +0100 Subject: [PATCH 06/13] fix: remove comment --- docs/richtlijnen/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/richtlijnen/README.md b/docs/richtlijnen/README.md index 5cb9e1ac25d..b2e623140f6 100644 --- a/docs/richtlijnen/README.md +++ b/docs/richtlijnen/README.md @@ -62,7 +62,6 @@ _label-no-activate.md _label-text-visibility.md ``` - ### Namen voor partials From 054e6f9d78eec8356bbbce71b16f9425feec5d0a Mon Sep 17 00:00:00 2001 From: Jeffrey Lauwers Date: Tue, 28 Nov 2023 12:12:45 +0100 Subject: [PATCH 07/13] Update _description-target-size.md Visual toegevoegd met begeleidende tekst. --- .../00-alle-richtlijnen/_description-target-size.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size.md b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size.md index 73552aab12d..0bb01a8532f 100644 --- a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size.md +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_description-target-size.md @@ -2,6 +2,10 @@ Bij een goede koppeling tussen het label en het formulierveld, zijn beide elementen aanklikbaar. Dat maakt het aanklikbare gedeelte groot. -Een description ertussen verkleint de aanklikbare ruimte. Zorg er daarom voor dat het aanklikbare gedeelte van een formulierveld **tenminste** 24 bij 24 pixels is, liefst 44 bij 44 pixels. Zodat gebruikers met dikke vingertoppen op een mobiel of met trillende handen met een muis toch een formulierveld kunnen selecteren. +Een description ertussen verkleint de aanklikbare ruimte. Zorg er daarom voor dat het aanklikbare gedeelte van een formulierveld **tenminste** 24 bij 24 pixels is, liever nog groter waar mogelijk. Zodat gebruikers met dikke vingertoppen op een mobiel of met trillende handen met een muis toch een formulierveld kunnen selecteren. Een minimale grootte van het aanklikbare gedeelte is een vereiste volgens WCAG-succescriterium [2.5.8 (Niveau A): Minimale grootte van het aanwijsgebied](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html). + +![Formfield met textbox van 48 pixels hoog, en formfield met radiobuttons van 24 pixels hoog.](https://raw.githubusercontent.com/nl-design-system/documentatie/assets/richtlijnen_formulier_description_size.png) + +Voor het 'Voorbeeld thema' maken we gebruik van een grootte van 24x24 bij checkboxes en radio buttons. En houden we een grootte van 48x48px aan voor componenten zoals buttons en text inputs. Dit sluit mooi aan bij de spacing scale van het voorbeeld thema. From b28c36809a9301b12404c07f5bd244443525575c Mon Sep 17 00:00:00 2001 From: Hidde de Vries Date: Tue, 28 Nov 2023 08:41:14 +0100 Subject: [PATCH 08/13] fix: Make syntax highlighting same for MD code blocks and code in a Canvas (#397) --- docusaurus.config.js | 10 ++ nldsPrism.js | 195 ++++++++++++++++++++++++ src/components/Canvas/Canvas.module.css | 62 -------- src/components/Canvas/PrismStyle.ts | 6 +- src/css/custom.css | 139 +++++++++++++++++ 5 files changed, 347 insertions(+), 65 deletions(-) create mode 100644 nldsPrism.js diff --git a/docusaurus.config.js b/docusaurus.config.js index 2b1e292f811..81391b8442d 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -3,6 +3,7 @@ const navbar = require('./navConfig'); const footer = require('./footerConfig'); +const nldsPrism = require('./nldsPrism'); /** @type {import('@docusaurus/types').Config} */ const config = { @@ -47,6 +48,15 @@ const config = { themeConfig: { navbar, footer, + prism: { + theme: { + plain: { + color: 'var(--nlds-code-block-color)', + backgroundColor: 'var(--nlds-code-block-background-color)', + }, + styles: nldsPrism, + }, + }, docs: { sidebar: { hideable: true, diff --git a/nldsPrism.js b/nldsPrism.js new file mode 100644 index 00000000000..0a51585d617 --- /dev/null +++ b/nldsPrism.js @@ -0,0 +1,195 @@ +module.exports = [ + { + types: ['comment'], + style: { + color: 'var(--nlds-code-block-comment-color)', + fontStyle: 'var(--nlds-code-block-comment-font-style)', + }, + }, + { + types: ['prolog'], + style: { + color: 'var(--nlds-code-block-prolog-color)', + fontStyle: 'var(--nlds-code-block-prolog-font-style)', + }, + }, + { + types: ['cdata'], + style: { + color: 'var(--nlds-code-block-cdata-color)', + fontStyle: 'var(--nlds-code-block-cdata-font-style)', + }, + }, + { + types: ['punctuation'], + style: { + color: 'var(--nlds-code-block-punctuation-color)', + }, + }, + { + types: ['deleted'], + style: { + color: 'var(--nlds-code-block-deleted-color)', + fontStyle: 'var(--nlds-code-block-deleted-font-style)', + }, + }, + { + types: ['symbol'], + style: { + color: 'var(--nlds-code-block-symbol-color)', + }, + }, + { + types: ['property'], + style: { + color: 'var(--nlds-code-block-property-color)', + }, + }, + { + types: ['tag'], + style: { + color: 'var(--nlds-code-block-tag-color)', + }, + }, + { + types: ['operator'], + style: { + color: 'var(--nlds-code-block-operator-color)', + }, + }, + { + types: ['keyword'], + style: { + color: 'var(--nlds-code-block-keyword-color)', + }, + }, + { + types: ['boolean'], + style: { + color: 'var(--nlds-code-block-boolean-color)', + }, + }, + { + types: ['number'], + style: { + color: 'var(--nlds-code-block-number-color)', + }, + }, + { + types: ['constant'], + style: { + color: 'var(--nlds-code-block-constant-color)', + }, + }, + { + types: ['function'], + style: { + color: 'var(--nlds-code-block-function-color)', + }, + }, + { + types: ['builtin'], + style: { + color: 'var(--nlds-code-block-builtin-color)', + }, + }, + { + types: ['char'], + style: { + color: 'var(--nlds-code-block-char-color)', + }, + }, + { + types: ['selector'], + style: { + color: 'var(--nlds-code-block-selector-color)', + fontStyle: 'var(--nlds-code-block-selector-font-style)', + }, + }, + { + types: ['doctype'], + style: { + color: 'var(--nlds-code-block-doctype-color)', + fontStyle: 'var(--nlds-code-block-doctype-font-style)', + }, + }, + { + types: ['attr-name'], + style: { + color: 'var(--nlds-code-block-attr-name-color)', + fontStyle: 'var(--nlds-code-block-attr-name-font-style)', + }, + }, + { + types: ['inserted'], + style: { + color: 'var(--nlds-code-block-inserted-color)', + fontStyle: 'var(--nlds-code-block-inserted-font-style)', + }, + }, + { + types: ['string'], + style: { + color: 'var(--nlds-code-block-string-color)', + }, + }, + { + types: ['url'], + style: { color: 'var(--nlds-code-block-url-color)' }, + }, + { + types: ['entity'], + style: { + color: 'var(--nlds-code-block-entity-color)', + }, + }, + { + types: ['class-name'], + style: { + color: 'var(--nlds-code-block-class-name-color)', + }, + }, + { + types: ['atrule'], + style: { + color: 'var(--nlds-code-block-atrule-color)', + }, + }, + { + types: ['attr-value'], + style: { + color: 'var(--nlds-code-block-attr-value-color)', + }, + }, + { + types: ['regex'], + style: { + color: 'var(--nlds-code-block-regex-color)', + }, + }, + { + types: ['important'], + style: { + color: 'var(--nlds-code-block-important-color)', + fontWeight: 'bold', + }, + }, + { + types: ['variable'], + style: { + color: 'var(--nlds-code-block-variable-color)', + }, + }, + { + types: ['bold'], + style: { + fontWeight: 'bold', + }, + }, + { + types: ['italic'], + style: { + fontStyle: 'italic', + }, + }, +]; diff --git a/src/components/Canvas/Canvas.module.css b/src/components/Canvas/Canvas.module.css index e23d9809cee..a8514c8f1eb 100644 --- a/src/components/Canvas/Canvas.module.css +++ b/src/components/Canvas/Canvas.module.css @@ -17,68 +17,6 @@ padding: 0; } -.nlds-canvas__code-block { - --nlds-code-block-code-color: #c5c8c6; - --nlds-code-block-color: #fff; - --nlds-code-block-font-family: "Fira Code", "Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", monospace; - --nlds-code-block-tab-size: 4; - --nlds-code-block-tab-size: 4; - --nlds-code-block-tab-size: 4; - --nlds-code-block-hyphens: none; - --nlds-code-block-hyphens: none; - --nlds-code-block-hyphens: none; - --nlds-code-block-hyphens: none; - --nlds-code-block-padding-inline-start: 1em; - --nlds-code-block-padding-inline-end: 1em; - --nlds-code-block-padding-block-start: 1em; - --nlds-code-block-padding-block-end: 1em; - --nlds-code-block-margin-inline-start: 0; - --nlds-code-block-margin-inline-end: 0; - --nlds-code-block-margin-inline-start: 0; - --nlds-code-block-margin-inline-end: 0; - --nlds-code-block-background-color: #011627; - --nlds-code-block-selected-background-color: rgba(29, 59, 83, 0.99); - --nlds-code-block-comment-color: rgb(99, 119, 119); - --nlds-code-block-comment-font-style: italic; - --nlds-code-block-prolog-color: rgb(99, 119, 119); - --nlds-code-block-prolog-font-style: italic; - --nlds-code-block-cdata-color: rgb(99, 119, 119); - --nlds-code-block-cdata-font-style: italic; - --nlds-code-block-punctuation-color: rgb(199, 146, 234); - --nlds-code-block-namespace-color: rgb(178, 204, 214); - --nlds-code-block-deleted-color: rgba(239, 83, 80, 0.56); - --nlds-code-block-deleted-font-style: italic; - --nlds-code-block-symbol-color: rgb(128, 203, 196); - --nlds-code-block-property-color: rgb(128, 203, 196); - --nlds-code-block-tag-color: rgb(127, 219, 202); - --nlds-code-block-operator-color: rgb(127, 219, 202); - --nlds-code-block-boolean-color: rgb(255, 88, 116); - --nlds-code-block-number-color: rgb(247, 140, 108); - --nlds-code-block-constant-color: rgb(130, 170, 255); - --nlds-code-block-function-color: rgb(130, 170, 255); - --nlds-code-block-builtin-color: rgb(130, 170, 255); - --nlds-code-block-char-color: rgb(130, 170, 255); - --nlds-code-block-selector-color: rgb(199, 146, 234); - --nlds-code-block-selector-font-style: italic; - --nlds-code-block-doctype-color: rgb(199, 146, 234); - --nlds-code-block-doctype-font-style: italic; - --nlds-code-block-attr-name-color: rgb(173, 219, 103); - --nlds-code-block-attr-name-font-style: italic; - --nlds-code-block-inserted-color: rgb(173, 219, 103); - --nlds-code-block-inserted-font-style: italic; - --nlds-code-block-string-color: rgb(173, 219, 103); - --nlds-code-block-url-color: rgb(173, 219, 103); - --nlds-code-block-entity-color: rgb(173, 219, 103); - --nlds-code-block-css-token-color: rgb(173, 219, 103); - --nlds-code-block-style-token-color: rgb(173, 219, 103); - --nlds-code-block-class-name-color: rgb(255, 203, 139); - --nlds-code-block-atrule-color: rgb(255, 203, 139); - --nlds-code-block-attr-value-color: rgb(255, 203, 139); - --nlds-code-block-regex-color: rgb(214, 222, 235); - --nlds-code-block-important-color: rgb(214, 222, 235); - --nlds-code-block-variable-color: rgb(214, 222, 235); -} - .nlds-canvas__code-block--user-select-none { user-select: none; cursor: not-allowed; diff --git a/src/components/Canvas/PrismStyle.ts b/src/components/Canvas/PrismStyle.ts index b1e8bfe107d..e937dba1ea2 100644 --- a/src/components/Canvas/PrismStyle.ts +++ b/src/components/Canvas/PrismStyle.ts @@ -7,7 +7,7 @@ export const PrismStyle = { whiteSpace: 'pre', wordSpacing: 'normal', wordBreak: 'normal', - lineHeight: 'var(nlds-code-block-line-height, 1.5)', + lineHeight: 'var(--nlds-code-block-line-height, 1.5)', MozTabSize: 'var(--nlds-code-block-tab-size, 4)', OTabSize: 'var(--nlds-code-block-tab-size, 4)', tabSize: 'var(--nlds-code-block-tab-size, 4)', @@ -24,8 +24,8 @@ export const PrismStyle = { wordSpacing: 'normal', wordBreak: 'normal', wordWrap: 'normal', - lineHeight: 'var(nlds-code-block-line-height, 1.5)', - fontSize: 'var(nlds-code-block-font-size, 1em)', + lineHeight: 'var(--nlds-code-block-line-height, 1.5)', + fontSize: 'var(--nlds-code-block-font-size, 1em)', MozTabSize: 'var(--nlds-code-block-tab-size, 4)', OTabSize: 'var(--nlds-code-block-tab-size, 4)', tabSize: 'var(--nlds-code-block-tab-size, 4)', diff --git a/src/css/custom.css b/src/css/custom.css index 35da03e07b1..8920c0fb7c4 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -666,3 +666,142 @@ abbr[title] { .docs-doc-page input[type="password"] { display: block; } + +code[class*="language-"] { + color: var(--nlds-code-block-code-color); + background-color: var(--nlds-code-block-background-color); + font-family: var(--nlds-code-block-font-family, monospace); + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: var(--nlds-code-block-line-height, 1.5); + -moz-tab-size: var(--nlds-code-block-tab-size, 4); + -o-tab-size: var(--nlds-code-block-tab-size, 4); + tab-size: var(--nlds-code-block-tab-size, 4); + -webkit-hyphens: var(--nlds-code-block-hyphens, none); + -moz-hyphens: var(--nlds-code-block-hyphens, none); + ms-hyphens: var(--nlds-code-block-hyphens, none); + hyphens: var(--nlds-code-block-hyphens, none); +} + +pre[class*="language-"] { + color: var(--nlds-code-block-color); + font-family: var(--nlds-code-block-font-family, monospace); + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: var(--nlds-code-block-line-height, 1.5); + font-size: var(--nlds-code-block-font-size, 1em); + -moz-tab-size: var(--nlds-code-block-tab-size, 4); + -o-tab-size: var(--nlds-code-block-tab-size, 4); + tab-size: var(--nlds-code-block-tab-size, 4); + -webkit-hyphens: var(--nlds-code-block-hyphens, none); + -moz-hyphens: var(--nlds-code-block-hyphens, none); + ms-hyphens: var(--nlds-code-block-hyphens, none); + hyphens: var(--nlds-code-block-hyphens, none); + padding-inline-start: var(--nlds-code-block-padding-inline-start, 1em); + padding-inline-end: var(--nlds-code-block-padding-inline-end, 1em); + padding-block-start: var(--nlds-code-block-padding-block-start, 1em); + padding-block-end: var(--nlds-code-block-padding-block-end, 1em); + margin-inline-start: var(--nlds-code-block-margin-inline-start, 0); + margin-inline-end: var(--nlds-code-block-margin-inline-end, 0); + margin-block-start: var(--nlds-code-block-margin-inline-start, 0.5em); + margin-block-end: var(--nlds-code-block-margin-inline-end, 0.5em); + overflow: auto; + background-color: var(--nlds-code-block-background-color); +} + +pre > code { + padding: 0 !important; + /* avoid double spacing */ +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection, +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: var(--nlds-code-block-selected-background-color); +} + +code.language-css .token.string { + color: var(--nlds-code-block-css-token-color); +} + +code .style .token.string { + color: var(--nlds-code-block-style-token-color); +} + +code .namespace { + color: var(--nlds-code-block-namespace-color); +} + +pre { + --nlds-code-block-code-color: #c5c8c6; + --nlds-code-block-color: #fff; + --nlds-code-block-font-family: "Fira Code", "Consolas", "Monaco", "Andale Mono", "Ubuntu Mono", monospace; + --nlds-code-block-tab-size: 4; + --nlds-code-block-tab-size: 4; + --nlds-code-block-tab-size: 4; + --nlds-code-block-hyphens: none; + --nlds-code-block-hyphens: none; + --nlds-code-block-hyphens: none; + --nlds-code-block-hyphens: none; + --nlds-code-block-padding-inline-start: 1em; + --nlds-code-block-padding-inline-end: 1em; + --nlds-code-block-padding-block-start: 1em; + --nlds-code-block-padding-block-end: 1em; + --nlds-code-block-margin-inline-start: 0; + --nlds-code-block-margin-inline-end: 0; + --nlds-code-block-margin-inline-start: 0; + --nlds-code-block-margin-inline-end: 0; + --nlds-code-block-background-color: #011627; + --nlds-code-block-selected-background-color: rgba(29, 59, 83, 0.99); + --nlds-code-block-comment-color: rgb(99, 119, 119); + --nlds-code-block-comment-font-style: italic; + --nlds-code-block-prolog-color: rgb(99, 119, 119); + --nlds-code-block-prolog-font-style: italic; + --nlds-code-block-cdata-color: rgb(99, 119, 119); + --nlds-code-block-cdata-font-style: italic; + --nlds-code-block-punctuation-color: rgb(199, 146, 234); + --nlds-code-block-namespace-color: rgb(178, 204, 214); + --nlds-code-block-deleted-color: rgba(239, 83, 80, 0.56); + --nlds-code-block-deleted-font-style: italic; + --nlds-code-block-symbol-color: rgb(128, 203, 196); + --nlds-code-block-property-color: rgb(128, 203, 196); + --nlds-code-block-tag-color: rgb(127, 219, 202); + --nlds-code-block-operator-color: rgb(127, 219, 202); + --nlds-code-block-boolean-color: rgb(255, 88, 116); + --nlds-code-block-number-color: rgb(247, 140, 108); + --nlds-code-block-constant-color: rgb(130, 170, 255); + --nlds-code-block-function-color: rgb(130, 170, 255); + --nlds-code-block-builtin-color: rgb(130, 170, 255); + --nlds-code-block-char-color: rgb(130, 170, 255); + --nlds-code-block-selector-color: rgb(199, 146, 234); + --nlds-code-block-selector-font-style: italic; + --nlds-code-block-doctype-color: rgb(199, 146, 234); + --nlds-code-block-doctype-font-style: italic; + --nlds-code-block-attr-name-color: rgb(173, 219, 103); + --nlds-code-block-attr-name-font-style: italic; + --nlds-code-block-inserted-color: rgb(173, 219, 103); + --nlds-code-block-inserted-font-style: italic; + --nlds-code-block-string-color: rgb(173, 219, 103); + --nlds-code-block-url-color: rgb(173, 219, 103); + --nlds-code-block-entity-color: rgb(173, 219, 103); + --nlds-code-block-css-token-color: rgb(173, 219, 103); + --nlds-code-block-style-token-color: rgb(173, 219, 103); + --nlds-code-block-class-name-color: rgb(255, 203, 139); + --nlds-code-block-atrule-color: rgb(255, 203, 139); + --nlds-code-block-attr-value-color: rgb(255, 203, 139); + --nlds-code-block-regex-color: rgb(214, 222, 235); + --nlds-code-block-important-color: rgb(214, 222, 235); + --nlds-code-block-variable-color: rgb(214, 222, 235); +} From 42e94a726466e10538d705c5fed9633c03c2e5ee Mon Sep 17 00:00:00 2001 From: Hidde de Vries Date: Tue, 28 Nov 2023 12:13:28 +0100 Subject: [PATCH 09/13] Maak richtlijnen meer zoals Jeffrey's ontwerp (#398) * fix: Align dos and donts better with intended visual design * docs: Make dos and donts uppercase to work better in fixed design * fix: button style on focus --------- Co-authored-by: Yolijn --- .../_label-above-field-code.mdx | 2 +- .../_label-accessible-name-code.mdx | 4 +-- .../_label-always-visible-code.mdx | 4 +-- .../_label-only-text-code.mdx | 4 +-- .../00-alle-richtlijnen/_label-text-code.mdx | 2 +- .../_label-visible-accessible-name-code.mdx | 4 +-- src/components/Guideline.module.css | 5 ++-- src/components/Guideline.tsx | 26 +++++++++++-------- src/css/custom.css | 8 +++--- src/theme/MDXContent/index.tsx | 2 -- 10 files changed, 32 insertions(+), 29 deletions(-) diff --git a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_label-above-field-code.mdx b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_label-above-field-code.mdx index c4e6edab727..4cb2e18b259 100644 --- a/docs/richtlijnen/formulieren/00-alle-richtlijnen/_label-above-field-code.mdx +++ b/docs/richtlijnen/formulieren/00-alle-richtlijnen/_label-above-field-code.mdx @@ -3,7 +3,7 @@ import { Canvas } from "@site/src/components/Canvas/Canvas"; import { Guideline } from "@site/src/components/Guideline"; - + - +