@amsterdam/design-system-css 0.1.5 → 0.1.7

package/src/button/button.scss

@@ -6,12 +6,18 @@
 @import "../../node_modules/@utrecht/components/button/css";
 @import "../../utils/breakpoint";
 
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
 .amsterdam-button {
   font-size: var(--amsterdam-button-narrow-font-size);
 
   @media screen and (width > $amsterdam-breakpoint) {
     font-size: var(--amsterdam-button-wide-font-size);
   }
+
+  @include reset;
 }
 
 .amsterdam-button--secondary {

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/checkbox/checkbox.scss

@@ -39,6 +39,10 @@
   }
 }
 
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
 .amsterdam-checkbox__label {
   color: var(--amsterdam-checkbox-color);
   cursor: pointer;
@@ -64,6 +68,8 @@
   @media screen and (width > $amsterdam-breakpoint) {
     font-size: var(--amsterdam-checkbox-wide-font-size);
   }
+
+  @include reset;
 }
 
 // Default checked

package/src/form-label/README.md

@@ -1,3 +1,3 @@
-# Form label
+# Form Label
 
 Een label element gebruik je om een formulierelement te beschrijven. Koppel een formulierelement (zoals een `input` of `textarea`) altijd aan een label.

package/src/form-label/form-label.scss

@@ -5,6 +5,10 @@
 
 @import "../../utils/breakpoint";
 
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
 .amsterdam-form-label {
   color: var(--amsterdam-form-label-color);
   font-family: var(--amsterdam-form-label-font-family);
@@ -15,4 +19,6 @@
   @media screen and (width > $amsterdam-breakpoint) {
     font-size: var(--amsterdam-form-label-wide-font-size);
   }
+
+  @include reset;
 }

package/src/heading/heading.scss

@@ -8,6 +8,7 @@
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
+  -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-heading {

package/src/index.scss

@@ -4,16 +4,24 @@
  */
 
 /* Append here */
-@import "./page-menu/page-menu";
 @import "./accordion/accordion";
+@import "./alert/alert";
+@import "./aspect-ratio/aspect-ratio";
+@import "./blockquote/blockquote";
 @import "./breadcrumb/breadcrumb";
 @import "./button/button";
+@import "./checkbox/checkbox";
+@import "./footer/footer";
 @import "./form-label/form-label";
+@import "./grid/grid-cell";
+@import "./grid/page-grid";
 @import "./heading/heading";
 @import "./icon/icon";
 @import "./link/link";
+@import "./ordered-list/ordered-list";
+@import "./page-heading/page-heading";
+@import "./page-menu/page-menu";
 @import "./paragraph/paragraph";
+@import "./top-task-link/top-task-link";
 @import "./unordered-list/unordered-list";
-@import "./ordered-list/ordered-list";
-@import "./grid/grid-cell";
-@import "./grid/page-grid";
+@import "./visually-hidden/visually-hidden";

package/src/link/link.scss

@@ -5,6 +5,10 @@
 
 @import "../../utils/breakpoint";
 
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
 .amsterdam-link {
   color: var(--amsterdam-link-color);
   font-family: var(--amsterdam-link-font-family);
@@ -16,6 +20,8 @@
   &:focus {
     color: var(--amsterdam-link-focus-color);
   }
+
+  @include reset;
 }
 
 .amsterdam-link--standalone {

package/src/ordered-list/README.md

@@ -1,4 +1,4 @@
-# Ordered list
+# Ordered List
 
 Een geordende lijst is een verticale groep gerelateerde inhoud met een volgorde.
 Deze lijst kan 2 niveaus hebben.

package/src/page-heading/README.md

@@ -1,4 +1,4 @@
-# Page heading
+# Page Heading
 
 Het page heading component is een opvallende tekst aan het begin van een pagina, direct na de header.
 Gebruik dit component voor een naam, titel of motto.
@@ -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-heading/page-heading.scss

@@ -8,6 +8,7 @@
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
+  -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-page-heading {

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

@@ -1,4 +1,4 @@
-# Top task link
+# Top Task Link
 
 De toptask link is een navigatie-element dat opvallender is dan een link, om de aandacht te trekken voor de meest belangrijke informatie.
 Zet de toptask link in zodat de gebruiker snel de juiste informatie vindt én een bijbehorende taak makkelijk kan uitvoeren.
@@ -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).

package/src/unordered-list/README.md

@@ -1,4 +1,4 @@
-# Unordered list
+# Unordered List
 
 Een lijst is een verticale groep gerelateerde inhoud.
 Deze lijst kan 2 niveaus hebben.

package/src/visually-hidden/README.md

@@ -1,5 +1,5 @@
-# Visually hidden
+# Visually Hidden
 
-Het visually hidden component kan gebruikt worden om inhoud te verbergen voor ziende gebruikers, maar beschikbaar te houden voor niet-visuele _user agents_, zoals schermlezers.
+Het Visually Hidden component kan gebruikt worden om inhoud te verbergen voor ziende gebruikers, maar beschikbaar te houden voor niet-visuele _user agents_, zoals schermlezers.
 
 Let op: In de overgrote meerderheid van de gevallen moet inhoud die visueel beschikbaar is, ook beschikbaar zijn voor niet-visuele _user agents_, en omgekeerd. Uitgebreide aanwijzingen of instructies die alleen door niet-visuele _user agents_ worden gelezen, doen al snel meer kwaad dan goed.

package/dist/testula/testula.css

@@ -1,9 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-.amsterdam-testula {
-  /* Add styles here */
-}
-
-/*# sourceMappingURL=testula.css.map */

package/dist/testula/testula.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/testula/testula.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAKA;AACE","file":"testula.css"}