@amsterdam/design-system-css 0.1.7 → 0.1.8

package/src/index.scss

@@ -4,24 +4,30 @@
  */
 
 /* Append here */
+@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 "./grid/page-grid";
 @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 "./visually-hidden/visually-hidden";

package/src/link/link.scss

@@ -15,10 +15,8 @@
   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;
@@ -31,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);
   }
 }
@@ -48,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 {
@@ -70,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);
   }
 }
@@ -86,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);
   }
 
@@ -108,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);
   }
 
@@ -121,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/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/page-heading.scss

@@ -20,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
 
-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).

package/src/top-task-link/top-task-link.scss

@@ -26,7 +26,7 @@
   font-weight: var(--amsterdam-top-task-link-label-font-weight);
   line-height: var(--amsterdam-top-task-link-label-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-top-task-link-label-wide-font-size);
   }
 
@@ -47,7 +47,7 @@
   font-weight: var(--amsterdam-top-task-link-description-font-weight);
   line-height: var(--amsterdam-top-task-link-description-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-top-task-link-description-wide-font-size);
   }
 

package/src/unordered-list/unordered-list.scss

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

package/utils/breakpoint.scss

@@ -4,7 +4,18 @@
  */
 
 /*
-  The breakpoint is 854px / 16 = 53.375rems
-  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+ * CSS Custom properties cannot be used inside media queries.
+ * We to resort to Sass variables for our breakpoint values.
+ */
+
+/**
+ * The breakpoint for typography is 854px = 53.375rems.
+ * @deprecated To be replaced with the grid breakpoints.
 */
-$amsterdam-breakpoint: 53.375rem;
+$amsterdam-breakpoint-typography: 53.375rem;
+
+/** The breakpoint at which medium screens start. */
+$amsterdam-breakpoint-medium: 36rem;
+
+/** The breakpoint at which wide screens start. */
+$amsterdam-breakpoint-wide: 68rem;

package/dist/grid/page-grid.css

@@ -1 +0,0 @@
-.amsterdam-page-grid{column-gap:var(--amsterdam-page-grid-column-gap);display:grid;grid-template-columns:repeat(var(--amsterdam-page-grid-column-count-narrow), 1fr);max-width:var(--amsterdam-page-grid-max-width)}@media screen and (width > 53.375rem){.amsterdam-page-grid{grid-template-columns:repeat(var(--amsterdam-page-grid-column-count-wide), 1fr)}}/*# sourceMappingURL=page-grid.css.map */

package/dist/grid/page-grid.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/grid/page-grid.scss"],"names":[],"mappings":"AAOA,qBACE,iDACA,aACA,kFACA,+CAGF,sCACE,qBACE","file":"page-grid.css"}

package/src/grid/README.md

@@ -1,11 +0,0 @@
-# Page grid
-
-Onder alle pagina’s en schermen ligt hetzelfde grid. Het grid is responsive, dus de precieze breedte van een kolom is afhankelijk van de schermbreedte.
-
-De maximale breedte van het grid is 1440 pixels. In een later stadium bieden we een grid van 1920 aan.
-
-Op schermen tot 854 pixels breed bestaat het grid uit 4 kolommen, op bredere schermen worden dat er 12. Het grid staat horizontaal gecentreerd op de pagina.
-
-De witruimte tussen de kolommen is ook flexibel: die groeit lineair van 8 pixels bij een breedte van 320 naar 24 pixels bij een breedte van 1440.
-
-Pagina-elementen worden op het grid geplaatst en beslaan een bepaald aantal kolommen.

package/src/grid/page-grid.scss

@@ -1,19 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-@import "../../utils/breakpoint";
-
-.amsterdam-page-grid {
-  column-gap: var(--amsterdam-page-grid-column-gap);
-  display: grid;
-  grid-template-columns: repeat(var(--amsterdam-page-grid-column-count-narrow), 1fr);
-  max-width: var(--amsterdam-page-grid-max-width);
-}
-
-@media screen and (width > $amsterdam-breakpoint) {
-  .amsterdam-page-grid {
-    grid-template-columns: repeat(var(--amsterdam-page-grid-column-count-wide), 1fr);
-  }
-}