Merge branch 'develop' into chore/adjust-color-values

.github/workflows/feature-branch-cleanup.yml

@@ -25,7 +25,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Delete folder
         run: |

.github/workflows/feature-branch-deploy.yml

@@ -33,7 +33,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v2
         name: Install pnpm

.github/workflows/lint-test.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Set up Node.js version
         uses: actions/setup-node@v4
         with:
-          node-version: "18.17.1"
+          node-version: "20"
 
       - uses: pnpm/action-setup@v2
         name: Install pnpm
@@ -54,7 +54,7 @@ jobs:
       - name: Set up Node.js version
         uses: actions/setup-node@v4
         with:
-          node-version: "18.17.1"
+          node-version: "20"
 
       - uses: pnpm/action-setup@v2
         name: Install pnpm
@@ -92,14 +92,14 @@ jobs:
           pnpm run --if-present test
 
       - name: "Retain build artifact: storybook docs"
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: storybook-docs
           path: storybook/storybook-docs/dist/
           retention-days: 1
 
       - name: "Retain build artifact: storybook React"
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: storybook-react
           path: storybook/storybook-react/dist/

.github/workflows/main-deploy.yml

@@ -15,14 +15,14 @@ jobs:
         uses: actions/checkout@v4
 
       - name: "Restore build artifact: Storybook docs"
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v3
         with:
           workflow: "lint-test.yml"
           name: storybook-docs
           path: dist/storybook
 
       - name: "Restore build artifact: Storybook react"
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v3
         with:
           workflow: "lint-test.yml"
           name: storybook-react

.nvmrc

@@ -1,2 +1 @@
-v18.17.1
-
+v20

package.json

@@ -9,7 +9,7 @@
   ],
   "private": true,
   "engines": {
-    "node": "^18.17.1",
+    "node": "^20",
     "npm": "^8",
     "pnpm": "^8"
   },
@@ -19,30 +19,30 @@
     "./storybook/*"
   ],
   "devDependencies": {
-    "@lerna-lite/cli": "3.1.0",
-    "@lerna-lite/publish": "3.1.0",
-    "@lerna-lite/run": "3.1.0",
-    "@lerna-lite/version": "3.1.0",
-    "@types/node": "20.10.5",
-    "@typescript-eslint/eslint-plugin": "6.15.0",
-    "@typescript-eslint/parser": "6.15.0",
+    "@lerna-lite/cli": "3.2.0",
+    "@lerna-lite/publish": "3.2.0",
+    "@lerna-lite/run": "3.2.0",
+    "@lerna-lite/version": "3.2.0",
+    "@types/node": "20.10.7",
+    "@typescript-eslint/eslint-plugin": "6.18.1",
+    "@typescript-eslint/parser": "6.18.1",
     "conventional-changelog-conventionalcommits": "7.0.2",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jest": "27.6.0",
+    "eslint-plugin-jest": "27.6.1",
     "eslint-plugin-json": "3.1.0",
-    "eslint-plugin-mdx": "3.0.0",
+    "eslint-plugin-mdx": "3.1.3",
     "eslint-plugin-react": "7.33.2",
-    "html-validate": "8.7.4",
+    "html-validate": "8.9.0",
     "husky": "8.0.3",
     "lint-staged": "15.2.0",
     "markdownlint-cli": "0.38.0",
     "npm-check-updates": "16.14.12",
     "npm-package-json-lint": "7.1.0",
     "npm-run-all": "4.1.5",
-    "plop": "4.0.0",
-    "postcss": "8.4.32",
+    "plop": "4.0.1",
+    "postcss": "8.4.33",
     "prettier": "3.1.1",
     "rimraf": "5.0.5",
     "stylelint": "15.11.0",

packages/css/package.json

@@ -20,7 +20,7 @@
   },
   "devDependencies": {
     "@amsterdam/design-system-tokens": "workspace:*",
-    "sass": "1.69.5"
+    "sass": "1.69.7"
   },
   "dependencies": {
     "@utrecht/components": "3.0.0"

packages/css/src/components/alert/README.md

@@ -1,18 +1,23 @@
 # Alert
 
-Met een Alert breng je de gebruiker op de hoogte van een belangrijke of tijdgevoelige boodschap. De taak van de gebruiker wordt niet onderbroken.
+Met een Alert breng je de gebruiker op de hoogte van een belangrijke of tijdgevoelige boodschap.
+De taak van de gebruiker wordt niet onderbroken.
 
 ## Specificaties
 
-### Kleurdefinities
+Er zijn vier soorten meldingen:
 
-- Geel: informatie
-- Rood: fout
-- Groen: goed
+- **Waarschuwing** (oranje) als er actie nodig is om schade te voorkomen.
+- **Foutmelding** (rood) om te laten weten dat er een fout is opgetreden.
+- **Bevestiging** (groen) ter geruststelling dat een proces is voltooid.
+- **Kennisgeving** (blauw) om een bericht onder de aandacht te brengen.
 
 ## Richtlijnen
 
-- Standaard heeft het element geen sluiten knop. Optioneel kan deze toegevoegd worden.
-- Optioneel kan een icoon worden weggelaten. Een geel Alert heeft nooit een icoon.
-- Optioneel kan een titel worden weggelaten.
-- Aangeraden wordt om een Alert in ieder geval van een paragraaf text te voorzien en deze eventueel te ondersteunen met een link, opsomming of knop.
+- Plaats bij belangrijke en urgente informatie een oranje Alert direct onder de Header.
+  Voorbeelden: een storing van een systeem of afwijkende openingstijden van een stadsloket.
+- Zorg voor voldoende witruimte rondom de Alert.
+  De witruimte van het grid is een goede maatstaf – zet de Alert in zijn eigen cel.
+- Standaard kan de Alert niet gesloten worden.
+  Deze mogelijkheid kan toegevoegd worden.
+- Optioneel kan de titel worden weggelaten.

packages/css/src/components/alert/alert.scss

@@ -5,8 +5,8 @@
 
 .amsterdam-alert {
   align-items: flex-start;
-  background-color: var(--amsterdam-alert-background-color);
-  border: var(--amsterdam-alert-border);
+  border-style: var(--amsterdam-alert-border-style);
+  border-width: var(--amsterdam-alert-border-width);
   display: flex;
   flex-direction: row;
   gap: var(--amsterdam-alert-gap);
@@ -21,48 +21,18 @@
   flex: auto;
 }
 
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
-}
-
-.amsterdam-alert__title {
-  color: var(--amsterdam-alert-title-color);
-  font-family: var(--amsterdam-alert-title-font-family);
-  font-size: var(--amsterdam-alert-title-spacious-font-size);
-  font-weight: var(--amsterdam-alert-title-font-weight);
-  line-height: var(--amsterdam-alert-title-spacious-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-alert-title-compact-font-size);
-    line-height: var(--amsterdam-alert-title-compact-line-height);
-  }
-
-  @include reset;
-}
-
 .amsterdam-alert--error {
-  background-color: var(--amsterdam-alert-error-background-color);
   border-color: var(--amsterdam-alert-error-border-color);
 }
 
-.amsterdam-alert--success {
-  background-color: var(--amsterdam-alert-success-background-color);
-  border-color: var(--amsterdam-alert-success-border-color);
-}
-
-/* todo: move to action button component */
-.amsterdam-alert__close {
-  background-color: var(--amsterdam-alert-close-background-color);
-  border: 0;
-  cursor: pointer;
-  padding-block: 0;
-  padding-inline: 0;
+.amsterdam-alert--info {
+  border-color: var(--amsterdam-alert-info-border-color);
 }
 
-.amsterdam-alert__close svg {
-  fill: var(--amsterdam-alert-close-fill);
+.amsterdam-alert--success {
+  border-color: var(--amsterdam-alert-success-border-color);
 }
 
-.amsterdam-alert__close:hover svg {
-  fill: var(--amsterdam-alert-close-hover-fill);
+.amsterdam-alert--warning {
+  border-color: var(--amsterdam-alert-warning-border-color);
 }

packages/css/src/components/dialog/dialog.scss

@@ -74,19 +74,3 @@
     justify-content: end;
   }
 }
-
-.amsterdam-dialog__close {
-  background-color: var(--amsterdam-dialog-close-background-color);
-  border: 0;
-  cursor: pointer;
-  padding-block: 0;
-  padding-inline: 0;
-}
-
-.amsterdam-dialog__close svg {
-  fill: var(--amsterdam-dialog-close-fill);
-}
-
-.amsterdam-dialog__close:hover svg {
-  fill: var(--amsterdam-dialog-close-hover-fill);
-}

packages/css/src/components/icon-button/README.md

@@ -0,0 +1,14 @@
+# Icon Button
+
+Een Icon Button is een vierkante knop met alleen een icoon erin.
+
+## Richtlijnen
+
+- Gebruik deze knop alleen als het icoon volledig duidelijk en begrijpelijk is.
+  Veel iconen worden door verschillende gebruikers verschillend geïnterpreteerd.
+  Gebruik alleen overbekende iconen, zoals een sluitkruisje of een _play_-icoon.
+- Geef een labeltekst op die voor gebruikers van schermlezers beschrijft wat de knop doet.
+
+## Relevante WCAG eisen
+
+Voor de Icon Button gelden [dezelfde eisen en richtlijnen als voor een reguliere button](https://amsterdam.github.io/design-system/?path=/docs/react_buttons-button--docs).

packages/css/src/components/icon-button/icon-button.scss

@@ -0,0 +1,60 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@mixin reset {
+  border: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.amsterdam-icon-button {
+  background-color: transparent;
+  color: var(--amsterdam-icon-button-color);
+  cursor: pointer;
+  outline-offset: var(--amsterdam-icon-button-outline-offset);
+  touch-action: manipulation;
+
+  &:hover {
+    background-color: var(--amsterdam-icon-button-hover-background-color);
+    color: var(--amsterdam-icon-button-hover-color);
+  }
+
+  &:disabled {
+    background-color: transparent;
+    color: var(--amsterdam-icon-button-disabled-color);
+    cursor: not-allowed;
+  }
+
+  @include reset;
+}
+
+.amsterdam-icon-button--on-background-light {
+  color: var(--amsterdam-icon-button-on-background-light-color);
+
+  &:hover {
+    background-color: var(--amsterdam-icon-button-on-background-light-hover-background-color);
+    color: var(--amsterdam-icon-button-on-background-light-hover-color);
+  }
+
+  &:disabled {
+    background-color: transparent;
+    color: var(--amsterdam-icon-button-on-background-light-disabled-color);
+  }
+}
+
+.amsterdam-icon-button--on-background-dark {
+  background-color: var(--amsterdam-icon-button-on-background-dark-background-color);
+  color: var(--amsterdam-icon-button-on-background-dark-color);
+
+  &:hover {
+    background-color: var(--amsterdam-icon-button-on-background-dark-hover-background-color);
+    color: var(--amsterdam-icon-button-on-background-dark-hover-color);
+  }
+
+  &:disabled {
+    background-color: var(--amsterdam-icon-button-on-background-dark-disabled-background-color);
+    color: var(--amsterdam-icon-button-on-background-dark-disabled-color);
+  }
+}

packages/css/src/components/icon/icon.scss

@@ -12,6 +12,11 @@
   fill: currentColor;
 }
 
+.amsterdam-icon--square {
+  aspect-ratio: 1 / 1;
+  justify-content: center;
+}
+
 .amsterdam-icon--size-3 {
   height: calc(var(--amsterdam-icon-spacious-size-3-font-size) * var(--amsterdam-icon-spacious-size-3-line-height));
 }

packages/css/src/components/index.scss

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./icon-button/icon-button";
 @import "./skip-link/skip-link";
 @import "./overlap/overlap";
 @import "./header/header";

packages/css/src/components/search-field/search-field.scss

@@ -67,14 +67,6 @@
   padding-inline: 0.5rem;
   touch-action: manipulation;
 
-  span {
-    display: flex;
-    justify-content: center;
-
-    // use icon tokens to set width equal to height
-    width: calc(var(--amsterdam-icon-spacious-size-6-font-size) * var(--amsterdam-icon-spacious-size-6-line-height));
-  }
-
   &:hover {
     background-color: var(--amsterdam-search-field-button-hover-background-color);
   }

packages/css/src/components/skip-link/README.md

@@ -15,6 +15,7 @@ Als de link getoond wordt, duwt deze de hele pagina omlaag.
   Plaats de Skip Link dan direct na de cookie-banner.
 - Gebruik de Skip Link om naar de belangrijkste inhoud te navigeren.
   Op een artikelpagina is dat bijvoorbeeld de titel van het artikel, op een zoekpagina is dat het zoekveld.
+- Zet bijvoorbeeld `id="main"` op de container van dat element en zet dan `href="#main"` op de Skip Link.
 - Voor complexe pagina's met meerdere secties kun je meer dan 1 Skip Link gebruiken.
   In de meeste gevallen is dit niet nodig.
 

packages/css/src/components/top-task-link/README.md

@@ -1,14 +1,14 @@
 # Top Task Link
 
-Via dit opvallende navigatie-element vindt de Amsterdammer snel de weg naar veel voorkomende taken.
+Via dit opvallende navigatie-element vindt de gebruiker snel de weg naar veel voorkomende taken.
 
 ## Richtlijnen
 
 - 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.
+  Dit helpt de gebruiker 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.