@amsterdam/design-system-css 0.1.6 → 0.1.8

package/src/highlight/highlight.scss

@@ -0,0 +1,36 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-highlight--blue {
+  background-color: var(--amsterdam-highlight-blue-background-color);
+}
+
+.amsterdam-highlight--dark-green {
+  background-color: var(--amsterdam-highlight-dark-green-background-color);
+}
+
+.amsterdam-highlight--green {
+  background-color: var(--amsterdam-highlight-green-background-color);
+}
+
+.amsterdam-highlight--light-blue {
+  background-color: var(--amsterdam-highlight-light-blue-background-color);
+}
+
+.amsterdam-highlight--magenta {
+  background-color: var(--amsterdam-highlight-magenta-background-color);
+}
+
+.amsterdam-highlight--orange {
+  background-color: var(--amsterdam-highlight-orange-background-color);
+}
+
+.amsterdam-highlight--purple {
+  background-color: var(--amsterdam-highlight-purple-background-color);
+}
+
+.amsterdam-highlight--yellow {
+  background-color: var(--amsterdam-highlight-yellow-background-color);
+}

package/src/icon/icon.scss

@@ -17,7 +17,7 @@
 .amsterdam-icon--size-3 {
   height: calc(var(--amsterdam-icon-size-3-icon-size-narrow) * var(--amsterdam-icon-size-3-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-3-icon-size-wide) * var(--amsterdam-icon-size-3-container-multiplier));
   }
 }
@@ -26,7 +26,7 @@
   height: var(--amsterdam-icon-size-3-icon-size-narrow);
   width: var(--amsterdam-icon-size-3-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-3-icon-size-wide);
     width: var(--amsterdam-icon-size-3-icon-size-wide);
   }
@@ -34,7 +34,7 @@
 .amsterdam-icon--size-4 {
   height: calc(var(--amsterdam-icon-size-4-icon-size-narrow) * var(--amsterdam-icon-size-4-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-4-icon-size-wide) * var(--amsterdam-icon-size-4-container-multiplier));
   }
 }
@@ -43,7 +43,7 @@
   height: var(--amsterdam-icon-size-4-icon-size-narrow);
   width: var(--amsterdam-icon-size-4-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-4-icon-size-wide);
     width: var(--amsterdam-icon-size-4-icon-size-wide);
   }
@@ -52,7 +52,7 @@
 .amsterdam-icon--size-5 {
   height: calc(var(--amsterdam-icon-size-5-icon-size-narrow) * var(--amsterdam-icon-size-5-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-5-icon-size-wide) * var(--amsterdam-icon-size-5-container-multiplier));
   }
 }
@@ -61,7 +61,7 @@
   height: var(--amsterdam-icon-size-5-icon-size-narrow);
   width: var(--amsterdam-icon-size-5-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-5-icon-size-wide);
     width: var(--amsterdam-icon-size-5-icon-size-wide);
   }
@@ -70,7 +70,7 @@
 .amsterdam-icon--size-6 {
   height: calc(var(--amsterdam-icon-size-6-icon-size-narrow) * var(--amsterdam-icon-size-6-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-6-icon-size-wide) * var(--amsterdam-icon-size-6-container-multiplier));
   }
 }
@@ -79,7 +79,7 @@
   height: var(--amsterdam-icon-size-6-icon-size-narrow);
   width: var(--amsterdam-icon-size-6-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-6-icon-size-wide);
     width: var(--amsterdam-icon-size-6-icon-size-wide);
   }
@@ -88,7 +88,7 @@
 .amsterdam-icon--size-7 {
   height: calc(var(--amsterdam-icon-size-7-icon-size-narrow) * var(--amsterdam-icon-size-7-container-multiplier));
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-7-icon-size-wide) * var(--amsterdam-icon-size-7-container-multiplier));
   }
 }
@@ -97,7 +97,7 @@
   height: var(--amsterdam-icon-size-7-icon-size-narrow);
   width: var(--amsterdam-icon-size-7-icon-size-narrow);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-7-icon-size-wide);
     width: var(--amsterdam-icon-size-7-icon-size-wide);
   }

package/src/image/README.md

@@ -0,0 +1,18 @@
+# Image
+
+Toont een afbeelding.
+
+## Richtlijnen
+
+- Vergeet niet om een beschrijving van de afbeelding op te nemen in het `alt`-attribuut.
+  Dit zorgt ervoor dat gebruikers van schermlezers deze informatie ook tot zich kunnen nemen.
+  Daarnaast kan het helpen bij zoekmachineoptimalisatie.
+- Alleen voor decoratieve afbeeldingen is zo’n beschrijving niet nodig. Gebruik in dit geval `alt=""`.
+  Denk aan afbeeldingen die weinig toevoegen aan de nabije tekst of afbeeldingen die louter bijdragen aan het ontwerp of de sfeer van de pagina (bron: [W3C Web Accessibility Initiative](https://www.w3.org/WAI/tutorials/images/decorative/)).
+- Zorg ervoor dat de afbeelding een beeldverhouding heeft die ondersteund wordt door het [Aspect Ratio](?path=/docs/layout-aspect-ratio--docs) component.
+
+## Relevante WCAG-eisen
+
+- [WCAG 1.1.1](https://www.w3.org/TR/WCAG22/#non-text-content): niet-tekstuele content heeft een tekstueel alternatief
+- [WCAG 1.4.5](https://www.w3.org/TR/WCAG22/#images-of-text): gebruik tekst in plaats van afbeeldingen van tekst
+- [WCAG 1.4.9](https://www.w3.org/TR/WCAG22/#images-of-text-no-exception): gebruik afbeeldingen van tekst alleen als er geen alternatief is

package/src/image/image.scss

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-image {
+  font-style: italic; /* [3] */
+  height: auto; /* [1] */
+  max-width: 100%; /* [1] */
+  vertical-align: middle; /* [2] */
+}
+
+// [1] Allow for fluid image sizing while maintaining aspect ratio governed by width/height attributes
+// [2] Remove ‘phantom’ whitespace
+// [3] Italicise alt text to visually offset it from surrounding copy
+// Source: https://x.com/csswizardry/status/1717841334462005661

package/src/index.scss

@@ -4,16 +4,30 @@
  */
 
 /* Append here */
-@import "./page-menu/page-menu";
+@import "./image/image";
+@import "./pagination/pagination";
 @import "./accordion/accordion";
+@import "./alert/alert";
+@import "./aspect-ratio/aspect-ratio";
+@import "./blockquote/blockquote";
 @import "./breadcrumb/breadcrumb";
 @import "./button/button";
+@import "./card/card";
+@import "./checkbox/checkbox";
+@import "./footer/footer";
 @import "./form-label/form-label";
+@import "./grid/grid";
+@import "./grid/grid-cell";
 @import "./heading/heading";
+@import "./highlight/highlight";
 @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 "./screen/screen";
+@import "./switch/switch";
+@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,17 +5,21 @@
 
 @import "../../utils/breakpoint";
 
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
 .amsterdam-link {
   color: var(--amsterdam-link-color);
   font-family: var(--amsterdam-link-font-family);
   font-weight: var(--amsterdam-link-font-weight);
   outline-offset: var(--amsterdam-link-outline-offset);
 
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--amsterdam-link-focus-color);
+  &:hover {
+    color: var(--amsterdam-link-hover-color);
   }
+
+  @include reset;
 }
 
 .amsterdam-link--standalone {
@@ -25,14 +29,12 @@
   text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset);
 
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration-thickness: var(--amsterdam-link-standalone-focus-text-decoration-thickness);
-    text-underline-offset: var(--amsterdam-link-standalone-focus-text-underline-offset);
+  &:hover {
+    text-decoration-thickness: var(--amsterdam-link-standalone-hover-text-decoration-thickness);
+    text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-link-standalone-wide-font-size);
   }
 }
@@ -42,13 +44,11 @@
   font-size: var(--amsterdam-link-inline-font-size);
   line-height: var(--amsterdam-link-inline-line-height);
   text-decoration: var(--amsterdam-link-inline-text-decoration);
-  text-decoration-thickness: var(--amsterdam-link-text-decoration-thickness);
+  text-decoration-thickness: var(--amsterdam-link-inline-text-decoration-thickness);
 
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: var(--amsterdam-link-inline-focus-text-decoration);
-    text-underline-offset: var(--amsterdam-link-inline-focus-text-underline-offset);
+  &:hover {
+    text-decoration: var(--amsterdam-link-inline-hover-text-decoration);
+    text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset);
   }
 
   &:visited {
@@ -64,15 +64,13 @@
   line-height: var(--amsterdam-link-in-list-line-height);
   text-decoration: var(--amsterdam-link-in-list-text-decoration);
 
-  &:hover,
-  &:active,
-  &:focus {
-    text-decoration: var(--amsterdam-link-in-list-focus-text-decoration);
-    text-decoration-thickness: var(--amsterdam-link-in-list-focus-text-decoration-thickness);
-    text-underline-offset: var(--amsterdam-link-in-list-focus-text-underline-offset);
+  &:hover {
+    text-decoration: var(--amsterdam-link-in-list-hover-text-decoration);
+    text-decoration-thickness: var(--amsterdam-link-in-list-hover-text-decoration-thickness);
+    text-underline-offset: var(--amsterdam-link-in-list-hover-text-underline-offset);
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-link-in-list-wide-font-size);
   }
 }
@@ -80,17 +78,15 @@
 // Override for icon size
 .amsterdam-link--in-list__chevron {
   span.amsterdam-icon svg {
-    height: 16px;
-    width: 16px;
+    height: 1rem;
+    width: 1rem;
   }
 }
 
 .amsterdam-link--on-background-dark {
   color: var(--amsterdam-link-on-background-dark-color);
 
-  &:hover,
-  &:active,
-  &:focus {
+  &:hover {
     color: var(--amsterdam-link-on-background-dark-hover-color);
   }
 
@@ -102,9 +98,7 @@
 .amsterdam-link--on-background-light {
   color: var(--amsterdam-link-on-background-light-color);
 
-  &:hover,
-  &:active,
-  &:focus {
+  &:hover {
     color: var(--amsterdam-link-on-background-light-hover-color);
   }
 
@@ -115,12 +109,10 @@
 
 .amsterdam-link--inline.amsterdam-link--on-background-dark,
 .amsterdam-link--inline.amsterdam-link--on-background-light {
-  text-decoration: var(--amsterdam-link-inline-focus-text-decoration);
-  text-underline-offset: var(--amsterdam-link-inline-focus-text-underline-offset);
+  text-decoration: var(--amsterdam-link-inline-hover-text-decoration);
+  text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset);
 
-  &:hover,
-  &:active,
-  &:focus {
+  &:hover {
     text-decoration: var(--amsterdam-link-inline-text-decoration);
   }
 }

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/ordered-list/ordered-list.scss

@@ -31,7 +31,7 @@
   line-height: var(--amsterdam-ordered-list-line-height);
   list-style-type: var(--amsterdam-ordered-list-list-style-type);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-ordered-list-wide-font-size);
   }
 

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.

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 {
@@ -19,7 +20,7 @@
   font-weight: var(--amsterdam-page-heading-font-weight);
   line-height: var(--amsterdam-page-heading-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-page-heading-wide-font-size);
   }
 

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

@@ -41,7 +41,7 @@
   flex-direction: row;
   font-family: var(--amsterdam-page-menu-item-font-family);
   font-size: var(--amsterdam-page-menu-item-narrow-font-size);
-  font-weight: var(--amsterdam-page-menu-item-narrow-font-weight);
+  font-weight: var(--amsterdam-page-menu-item-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);
@@ -49,7 +49,7 @@
   text-decoration: var(--amsterdam-page-menu-item-text-decoration);
   touch-action: manipulation;
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-page-menu-item-wide-font-size);
   }
 }

package/src/pagination/README.md

@@ -0,0 +1,16 @@
+# Pagination
+
+Pagination (in het Nederlands: paginering) is een navigatie-element om tussen meerdere pagina’s met overzichtslijsten te navigeren. Denk hierbij aan zoekresultaten of een lijst met nieuwsartikelen. Bij lange overzichtslijsten kan het duidelijker of functioneler zijn om de inhoud over meerdere pagina’s te verdelen. Paginering laat zien op welke pagina de gebruiker zich bevindt en de gebruiker kan hiermee naar een andere pagina navigeren.
+
+## Richtlijnen
+
+- Gebruik paginering alleen als een overzichtslijst te lang is om op 1 pagina te tonen.
+- Voeg de paginering toe onder de overzichtslijst.
+- De paginering wordt niet getoond als er maar 1 pagina is.
+- Verwijs de gebruikers door naar de eerste pagina als ze een URL opgeven van een paginanummer dat niet (meer) bestaat.
+- De paginering kan gecombineerd worden met een teller bovenaan de pagina die “Pagina # van ##” aanduidt.
+- Start een pagina met een overzichtslijst bovenaan na het veranderen van pagina.
+
+## Relevante WCAG regels
+
+Pagination is een interactief element, hier gelden [de algemene eisen en richtlijnen voor interactieve elementen](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) voor.

package/src/pagination/pagination.scss

@@ -0,0 +1,75 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+@mixin list-reset {
+  list-style-type: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+}
+
+.amsterdam-pagination__list {
+  color: var(--amsterdam-pagination-color);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--amsterdam-pagination-font-family);
+  font-size: var(--amsterdam-pagination-narrow-font-size);
+  font-weight: var(--amsterdam-pagination-font-weight);
+  justify-content: center;
+  line-height: var(--amsterdam-pagination-line-height);
+
+  @include list-reset;
+
+  @media screen and (width > $amsterdam-breakpoint-typography) {
+    font-size: var(--amsterdam-pagination-wide-font-size);
+  }
+}
+
+@mixin button-reset {
+  all: unset;
+  box-sizing: border-box;
+  outline: revert;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-pagination__button {
+  /* The reset is included at the top of the block here, if you set it
+  at the bottom `all: unset` overrides the `gap` property. */
+  @include button-reset;
+
+  cursor: pointer;
+  display: flex;
+  gap: 0.5rem;
+  outline-offset: var(--amsterdam-pagination-button-outline-offset);
+  padding-inline: 0.75rem;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+  touch-action: manipulation;
+
+  &:hover {
+    color: var(--amsterdam-pagination-button-hover-color);
+    text-decoration: underline;
+  }
+
+  &:disabled {
+    display: none;
+  }
+
+  // Override for icon size
+  span.amsterdam-icon svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
+
+.amsterdam-pagination__button--current {
+  cursor: default;
+  font-weight: var(--amsterdam-pagination-button-current-font-weight);
+
+  &:hover {
+    text-decoration: none;
+  }
+}

package/src/paragraph/paragraph.scss

@@ -18,7 +18,7 @@
   font-weight: var(--amsterdam-paragraph-font-weight);
   line-height: var(--amsterdam-paragraph-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-paragraph-wide-font-size);
   }
 
@@ -29,7 +29,7 @@
   font-size: var(--amsterdam-paragraph-small-narrow-font-size);
   line-height: var(--amsterdam-paragraph-small-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-paragraph-small-wide-font-size);
   }
 }
@@ -38,7 +38,7 @@
   font-size: var(--amsterdam-paragraph-large-narrow-font-size);
   line-height: var(--amsterdam-paragraph-large-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-paragraph-large-wide-font-size);
   }
 }

package/src/screen/README.md

@@ -0,0 +1,20 @@
+# Screen
+
+Verzorgt de maximale breedte en de uitlijning van de hele website of applicatie.
+
+## Gebruik
+
+Dit moet het buitenste component van je website of applicatie zijn.
+Daarbinnen combineer je componenten als
+[Grid](?path=/docs/react_layout-grid--docs),
+Header,
+[Footer](?path=/docs/react_containers-footer--docs),
+[Highlight](?path=/docs/react_containers-highlight--docs)
+en Figure.
+
+## Ontwerp
+
+Standaard groeit dit component tot een breedte van 1600 pixels.
+Dit is de maximale breedte voor een website van de gemeente Amsterdam.
+Voor applicaties kun je kiezen voor een grotere maximale breedte van 2112 pixels.
+Het component centreert zowel zichzelf als zijn inhoud horizontaal.

package/src/screen/screen.scss

@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+}
+
+.amsterdam-screen {
+  @include reset;
+
+  margin-inline: auto;
+}
+
+.amsterdam-screen--wide {
+  max-width: var(--amsterdam-screen-wide-max-width);
+}
+
+.amsterdam-screen--x-wide {
+  max-width: var(--amsterdam-screen-x-wide-max-width);
+}

package/src/switch/README.md

@@ -0,0 +1,20 @@
+# Switch
+
+Een switch (in het Nederlands: schakelaar) is een besturingselement om snel tussen twee verschillende staten te schakelen. Een schakelaar is van toepassing op een pagina of het hele systeem. Bijvoorbeeld een aan/uit-schakelaar.
+
+## Richtlijnen
+
+- Schakel alleen tussen twee verschillende statussen. Het is een binaire actie.
+- Gebruik labels met een schakelaar zodat de actie duidelijk is.
+- De actie vindt direct plaats zodra de gebruiker de schakelaar gebruikt.
+
+## 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.
+
+Switch is een interactief element, hier gelden [de algemene eisen en richtlijnen voor interactieve elementen](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) voor.
+
+## Referenties
+
+- [Switch Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)
+- [Role switch](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/switch_role)

package/src/switch/switch.scss

@@ -0,0 +1,59 @@
+@mixin reset {
+  box-sizing: border-box;
+}
+
+.amsterdam-switch__input {
+  appearance: none;
+  margin-block: 0;
+  margin-inline: 0;
+  opacity: 0%; /* to hide native input field in older iOS */
+}
+
+.amsterdam-switch__label {
+  background-color: var(--amsterdam-switch-background-color);
+  border-radius: calc(var(--amsterdam-switch-thumb-width) * 2);
+  cursor: pointer;
+  display: inline-block;
+  padding-block: 1px;
+  padding-inline: 1px;
+  transition: background-color 0.2s ease-in-out;
+  width: var(--amsterdam-switch-width);
+
+  @include reset;
+}
+
+.amsterdam-switch__label::before {
+  background-color: var(--amsterdam-switch-thumb-background-color);
+  border-radius: 50%;
+  content: "";
+  display: block;
+  height: var(--amsterdam-switch-thumb-height);
+  transition-duration: 0.1s;
+  transition-property: box-shadow, transform;
+  transition-timing-function: ease-in-out;
+  width: var(--amsterdam-switch-thumb-width);
+}
+
+.amsterdam-switch__input:checked + .amsterdam-switch__label {
+  background-color: var(--amsterdam-switch-checked-background-color);
+}
+
+.amsterdam-switch__input:disabled + .amsterdam-switch__label {
+  background-color: var(--amsterdam-switch-disabled-background-color);
+  cursor: not-allowed;
+}
+
+.amsterdam-switch__input:focus-visible + .amsterdam-switch__label {
+  outline-color: -webkit-focus-ring-color;
+  outline-offset: var(--amsterdam-switch-outline-offset);
+  outline-style: auto;
+}
+
+.amsterdam-switch__input:checked + .amsterdam-switch__label::before {
+  // The 2px is to account for the 1px padding-inline on the label
+  transform: translate(calc(var(--amsterdam-switch-width) - var(--amsterdam-switch-thumb-width) - 2px));
+}
+
+.amsterdam-switch:hover .amsterdam-switch__input:enabled + .amsterdam-switch__label::before {
+  box-shadow: 0 0 0 2px var(--amsterdam-switch-thumb-hover-color);
+}

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

@@ -1,15 +1,20 @@
-# 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.
+Via dit opvallende navigatie-element vindt de Amsterdammer snel de weg naar veel voorkomende taken.
 
 ## Richtlijnen
 
-- 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.
+- Een Top Task Link heeft zowel een titel als een beschrijving.
+- De titel beschrijft de essentie van de pagina waarnaar wordt verwezen.
+  Deze trekt de aandacht bij het scannen van de pagina.
+- De beschrijving geeft meer context.
+  Dit helpt de Amsterdammer bevestigen dat die zijn doel op de vervolgpagina inderdaad kan bereiken.
+- Houd beide teksten bondig. Een titel bestaat uit een paar woorden, de beschrijving uit 1 of 2 korte zinnen. De beschrijving eindigt dan ook op een punt of ander geschikt leesteken.
+- Plaats voor brede vensters 3 of 4 Top Task Links naast elkaar op het [Grid](?path=/docs/react_layout-grid--docs).
+  Als je meer Top Task Links hebt, zet ze dan op de volgende rij.
+  Probeer het aantal links op brede vensters te verdelen over rijen van 3 of 4 links. Als dit niet lukt, laat de laatste cellen van het grid dan leeg.
+- Heb je een groep verwijzingen waarvoor een beschrijving niet nodig of logisch is, gebruik dan een [Link List](?path=/docs/react_navigation-link--docs).
 
 ## Relevante WCAG eisen
 
-Voor de toptask link gelden dezelfde eisen als voor [reguliere links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).
+Voor de Top Task Link gelden dezelfde eisen als voor [reguliere links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).