@amsterdam/design-system-css 0.1.5 → 0.1.6

package/dist/text/unordered-list/unordered-list.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../src/text/unordered-list/unordered-list.scss","../../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;AASA;AACA;EARE;EACA;EACA;EACA;EACA;EAOA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;AAMA;;AAJA;EARF;IASI;;;AAIF;EACE;EACA;;;AAIJ;AACA;EACE;;AAEA;EACE;EACA","file":"unordered-list.css"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.5",
+  "version": "0.1.6",
   "author": "Community for NL Design System",
   "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -19,11 +19,11 @@
     "clean": "rimraf dist/"
   },
   "devDependencies": {
-    "@amsterdam/design-system-tokens": "0.1.4",
-    "sass": "1.64.0"
+    "@amsterdam/design-system-tokens": "0.1.5",
+    "sass": "1.68.0"
   },
   "dependencies": {
-    "@utrecht/components": "1.0.0-alpha.493"
+    "@utrecht/components": "1.0.0-alpha.536"
   },
-  "gitHead": "50bfbf67c103288ed6ba6713a6537252f0c25246"
+  "gitHead": "58764d2cd6d59d20fd0e3215f32461c6c580df1b"
 }

package/src/blockquote/README.md

@@ -1,6 +1,6 @@
 # Blockquote
 
-De blockquote (in het Nederlands: citaat) is wordt gebruikt om uitspraken te accentueren. Een citaat is anders vormgegeven dan de broodtekst, zodat deze opvalt.
+De blockquote (in het Nederlands: citaat) wordt gebruikt om uitspraken te accentueren. Een citaat is anders vormgegeven dan de broodtekst, zodat deze opvalt.
 
 Let op: dit component voegt automatisch aanhalingstekens aan de tekst toe, dat hoef je niet zelf te doen.
 

package/src/checkbox/README.md

@@ -1 +1,27 @@
 # Checkbox
+
+De checkbox (in het Nederlands: selectievakje) wordt gebruikt om gebruikers een selectie te laten maken. Hij wordt ook gebruikt om gebruikers te laten weten dat ze akkoord gaan met specifieke voorwaarden.
+
+## Richtlijnen
+
+- Selectievakjes worden gebruikt voor 1 of meerdere keuzes die elkaar niet uitsluiten.
+- Elk selectievakje werkt onafhankelijk van andere selectievakjes in een lijst op hetzelfde hiërarchische niveau. Het aanvinken van een extra vakje heeft geen invloed op andere selecties in die lijst.
+- Je kunt een selectievakje wel gebruiken voor een bulkselectie of –deselectie van een hele lijst met selectievakjes, maar dan moet duidelijk zijn dat het bulkselectievakje op een ander hiërarchisch niveau zit dan de lijst die volledig wordt geselecteerd of gedeselecteerd.
+- Een groep selectievakjes kan worden gebruikt om gegevens op een pagina, in een menu of binnen een component te filteren.
+- Een selectievakje kan een antwoord op een gesloten vraag zijn, als er meerdere antwoorden mogelijk zijn.
+- Een lijst van selectievakjes is verticaal gestapeld om leesbaarheid en bruikbaarheid te bevorderen.
+- Een lijst van selectievakjes moet in een `fieldset` zitten, met een `legend` die beschrijft waar de lijst over gaat. Als de selectievakjes bijvoorbeeld worden gebruikt om antwoord op een vraag te krijgen, dan is de `legend` de vraag.
+
+## Checkbox labels
+
+Een label:
+
+- ... begint met een hoofdletter
+- ... heeft geen interpunctie aan het einde als het een enkele zin, woord of fragment is.
+- ... is in de eerste persoon geschreven als het gaat om de vraag of de gebruiker akkoord gaat met de algemene voorwaarden
+
+## Relevante WCAG eisen
+
+- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): het is zowel voor een gebruiker als programmatisch duidelijk wat het doel van een formulierveld is.
+
+<!-- TODO: Checkbox is an interactive element, reference the general interactive elements docs when they're merged -->

package/src/checkbox/checkbox-css.md

@@ -0,0 +1,3 @@
+# CSS Checkbox
+
+Het selectievakje bestaat uit een vakje en een tekstlabel. Het tekstlabel staat rechts van het selectievakje. Om toegankelijkheid te vergroten is het volledige component (vakje en label) klikbaar.

package/src/page-heading/README.md

@@ -13,4 +13,4 @@ Gebruik dit component voor een naam, titel of motto.
 
 Het page heading component is een variant van een heading level 1, met een afwijkende stijl. Let bij gebruik van dit component goed op dat de heading hiërarchie van de pagina logisch blijft.
 
-Voor dit component gelden dezelfde WCAG eisen als voor [het heading component](https://amsterdam.github.io/design-system/?path=/docs/react_heading--docs).
+Voor dit component gelden dezelfde WCAG eisen als voor [het heading component](https://amsterdam.github.io/design-system/?path=/docs/react_text-heading--docs).

package/src/page-menu/page-menu.scss

@@ -44,6 +44,7 @@
   font-weight: var(--amsterdam-page-menu-item-narrow-font-weight);
   gap: var(--amsterdam-page-menu-item-gap);
   line-height: var(--amsterdam-page-menu-item-line-height);
+  outline-offset: var(--amsterdam-focus-outline-offset);
   text-align: center;
   text-decoration: var(--amsterdam-page-menu-item-text-decoration);
   touch-action: manipulation;
@@ -69,6 +70,7 @@
 .amsterdam-page-menu__link:hover,
 .amsterdam-page-menu__button:hover {
   color: var(--amsterdam-page-menu-item-hover-color);
+  text-decoration: var(--amsterdam-page-menu-item-hover-text-decoration);
 }
 
 .amsterdam-page-menu__link svg,

package/src/top-task-link/README.md

@@ -7,7 +7,9 @@ Zet de toptask link in zodat de gebruiker snel de juiste informatie vindt én ee
 
 - Een toptask link moet een titel hebben. Hou deze titel zo kort mogelijk, hij mag maximaal over 2 regels lopen.
 - Een toptask link kan een omschrijving hebben, maar dat is niet verplicht. De omschrijving staat onder de titel en is ook maximaal 2 regels.
+- Plaats op brede schermen 3 of 4 toptask links naast elkaar. Als je meer toptask links hebt, zet ze dan op de volgende rij.
+- Probeer het aantal links op brede schermen te verdelen over rijen van 3 of 4. Als dit niet lukt, laat de laatste 'vakken' dan leeg. Hou een grid indeling aan.
 
 ## Relevante WCAG eisen
 
-Voor de toptask link gelden dezelfde eisen als voor [reguliere links](https://amsterdam.github.io/design-system/?path=/docs/react_link--docs).
+Voor de toptask link gelden dezelfde eisen als voor [reguliere links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).