Merged with main

Amsterdam · Nov 7, 2023 · 7b81e91 · 7b81e91
2 parents 48e3895 + 2fcdf49
commit 7b81e91
Show file tree

Hide file tree

Showing 88 changed files with 2,073 additions and 1,585 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -105,6 +105,12 @@ We use [GitHub flow](https://docs.github.com/en/get-started/quickstart/github-fl
 
 Package versioning and publishing is done through Lerna, by the maintainers of the repository. Contributors do not need to increment versions. Contact the maintainers if you want to release a new version of a package.
 
+## Adding a new component
+
+Scaffold all necessary files for a new component at once through `npm plop`.
+Enter the name of your component when prompted.
+This will create files for the design tokens, CSS and React components, and React Stories.
+
 ## Publishing
 
 You can only publish if you have access to the `@amsterdam` group on NPM. If you want to have rights to publish as well, contact one of the [maintainers](./documentation/maintainers.md). To publish these packages to NPM, follow these steps:

diff --git a/package.json b/package.json
@@ -23,17 +23,17 @@
     "@lerna-lite/publish": "2.6.0",
     "@lerna-lite/run": "2.6.0",
     "@lerna-lite/version": "2.6.0",
-    "@types/node": "20.8.7",
+    "@types/node": "20.8.10",
     "@typescript-eslint/eslint-plugin": "5.62.0",
     "@typescript-eslint/parser": "5.62.0",
-    "eslint": "8.51.0",
+    "eslint": "8.52.0",
     "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-import": "2.28.1",
-    "eslint-plugin-jest": "27.4.2",
+    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-jest": "27.6.0",
     "eslint-plugin-json": "3.1.0",
     "eslint-plugin-mdx": "2.2.0",
     "eslint-plugin-react": "7.33.2",
-    "html-validate": "8.6.0",
+    "html-validate": "8.7.0",
     "husky": "8.0.3",
     "lint-staged": "15.0.2",
     "markdownlint-cli": "0.37.0",

diff --git a/packages/css/package.json b/packages/css/package.json
@@ -20,9 +20,9 @@
   },
   "devDependencies": {
     "@amsterdam/design-system-tokens": "workspace:*",
-    "sass": "1.69.4"
+    "sass": "1.69.5"
   },
   "dependencies": {
-    "@utrecht/components": "1.0.0-alpha.563"
+    "@utrecht/components": "1.0.0-alpha.565"
   }
 }
diff --git a/packages/css/src/accordion/README.md b/packages/css/src/accordion/README.md
@@ -14,7 +14,7 @@ Het accordion component is een klikbare (verticaal gestapelde) lijst van koppen
 Je kunt door een accordion navigeren met je toetsenbord:
 
 | key                  | element                                                                                                                      |
-| -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| :------------------- | :--------------------------------------------------------------------------------------------------------------------------- |
 | Enter of Space       | Open of sluit de accordionsectie die de focus heeft                                                                          |
 | Tab                  | Ga naar het volgende element dat focus kan hebben                                                                            |
 | Shift + Tab          | Ga naar het volgende element dat focus kan hebben                                                                            |

diff --git a/packages/css/src/accordion/accordion.scss b/packages/css/src/accordion/accordion.scss
@@ -30,7 +30,7 @@
   padding-inline: 1rem;
   width: 100%;
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-accordion-button-wide-font-size);
   }
 

diff --git a/packages/css/src/alert/alert.scss b/packages/css/src/alert/alert.scss
@@ -34,7 +34,7 @@
   font-weight: var(--amsterdam-alert-title-font-weight);
   line-height: var(--amsterdam-alert-title-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-alert-title-wide-font-size);
   }
 

diff --git a/packages/css/src/aspect-ratio/README.md b/packages/css/src/aspect-ratio/README.md
@@ -5,12 +5,12 @@ Aspect Ratio (in het Nederlands: beeldverhouding) koppelt de hoogte van een elem
 Om de vormgeving consistent te houden gebruiken we een vaste set verhoudingen (breedte:hoogte):
 
 | _keyword_    | verhouding |
-| ------------ | ---------- |
-| `extra-wide` | 16:9       |
-| `wide`       | 5:4        |
-| `square`     | 1:1        |
-| `tall`       | 4:5        |
-| `extra-tall` | 9:16       |
+| :----------- | ---------: |
+| `extra-wide` |       16:9 |
+| `wide`       |        5:4 |
+| `square`     |        1:1 |
+| `tall`       |        4:5 |
+| `extra-tall` |       9:16 |
 
 ## Richtlijnen
 

diff --git a/packages/css/src/blockquote/blockquote.scss b/packages/css/src/blockquote/blockquote.scss
@@ -29,7 +29,7 @@
     content: close-quote;
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-blockquote-wide-font-size);
   }
 

diff --git a/packages/css/src/breadcrumb/breadcrumb.scss b/packages/css/src/breadcrumb/breadcrumb.scss
@@ -18,7 +18,7 @@
   font-weight: var(--amsterdam-breadcrumb-font-weight);
   line-height: var(--amsterdam-breadcrumb-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-breadcrumb-wide-font-size);
   }
 }

diff --git a/packages/css/src/button/button.scss b/packages/css/src/button/button.scss
@@ -13,7 +13,7 @@
 .amsterdam-button {
   font-size: var(--amsterdam-button-narrow-font-size);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-button-wide-font-size);
   }
 

diff --git a/packages/css/src/checkbox/checkbox.scss b/packages/css/src/checkbox/checkbox.scss
@@ -34,7 +34,7 @@
     width: 100%;
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-checkbox-checkmark-wide-size) * var(--amsterdam-checkbox-checkmark-multiplier));
   }
 }
@@ -65,7 +65,7 @@
     }
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-checkbox-wide-font-size);
   }
 

diff --git a/packages/css/src/footer/footer.scss b/packages/css/src/footer/footer.scss
@@ -8,22 +8,8 @@
 .amsterdam-footer__top {
   background-color: var(--amsterdam-footer-top-background-color);
   padding-block: 2.5rem;
-  padding-inline: 2rem; /* TODO: For now I've set a padding here, this should eventually be handled by PageGrid */
-}
-
-@media screen and (width > $amsterdam-breakpoint) {
-  .amsterdam-footer__top {
-    grid-template-columns: repeat(var(--amsterdam-page-grid-column-count-wide), 1fr);
-  }
-}
-
-.amsterdam-footer__column {
-  display: flex;
-  flex-direction: column;
-  gap: 2.5rem;
 }
 
 .amsterdam-footer__bottom {
   padding-block: 0.5rem;
-  padding-inline: 2rem; /* TODO: For now I've set a padding here, this should eventually be handled by PageGrid */
 }
diff --git a/packages/css/src/form-label/form-label.scss b/packages/css/src/form-label/form-label.scss
@@ -16,7 +16,7 @@
   font-weight: var(--amsterdam-form-label-font-weight);
   line-height: var(--amsterdam-form-label-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-form-label-wide-font-size);
   }
 

diff --git a/packages/css/src/grid/README.grid-cell.md b/packages/css/src/grid/README.grid-cell.md
@@ -0,0 +1,14 @@
+# Grid cell
+
+Beslaat een aantal kolommen in een [Grid](?path=/docs/react_layout-grid--docs).
+
+## Gebruik
+
+Verdeel hiermee een grid in cellen.
+Geef aan hoeveel kolommen van het grid de cel beslaat.
+Dat aantal kan variëren voor smalle, middelbrede of brede schermen.
+In elke cel plaats je vervolgens de gewenste inhoud.
+
+## Ontwerp
+
+De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.
diff --git a/packages/css/src/grid/README.grid.md b/packages/css/src/grid/README.grid.md
@@ -0,0 +1,17 @@
+# Grid
+
+Levert een tweedimensionaal raster waarop alle elementen van een pagina uitgelijnd worden.
+
+## Gebruik
+
+Elke pagina moet het grid gebruiken als basis voor de layout, dus direct binnen [Screen](?path=/docs/layout-screen--docs).
+
+Een [Footer](?path=/docs/react_containers-footer--docs) en een [Highlight](?path=/docs/react_containers-highlight--docs) zijn iets breder dan het grid.
+Daarom wordt in HTML vóór deze componenten een instantie van Grid afgesloten en erbinnen een nieuwe geopend.
+
+Meerdere instanties van dit component zijn dus mogelijk op een pagina.
+Visueel moeten ze wel allemaal op elkaar aansluiten.
+
+## Ontwerp
+
+De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.
diff --git a/packages/css/src/grid/README.md b/packages/css/src/grid/README.md
diff --git a/packages/css/src/grid/grid-cell.scss b/packages/css/src/grid/grid-cell.scss
@@ -5,14 +5,42 @@
 
 @import "../../utils/breakpoint";
 
-@media screen and (width > $amsterdam-breakpoint) {
+.amsterdam-grid-cell--full-width {
+  grid-column: 1 / -1;
+}
+
+// The order of the following declaration blocks ensures the intended specificity.
+
+@for $i from 1 through 12 {
+  .amsterdam-grid-cell--span-#{$i} {
+    grid-column-end: span $i;
+  }
+
+  .amsterdam-grid-cell--start-#{$i} {
+    grid-column-start: $i;
+  }
+}
+
+@media screen and (min-width: $amsterdam-breakpoint-medium) {
   @for $i from 1 through 12 {
-    .amsterdam-grid-column-start-#{$i} {
+    .amsterdam-grid-cell--span-#{$i}-medium {
+      grid-column-end: span $i;
+    }
+
+    .amsterdam-grid-cell--start-#{$i}-medium {
       grid-column-start: $i;
     }
+  }
+}
 
-    .amsterdam-grid-column-span-#{$i} {
+@media screen and (min-width: $amsterdam-breakpoint-wide) {
+  @for $i from 1 through 12 {
+    .amsterdam-grid-cell--span-#{$i}-wide {
       grid-column-end: span $i;
     }
+
+    .amsterdam-grid-cell--start-#{$i}-wide {
+      grid-column-start: $i;
+    }
   }
 }
diff --git a/packages/css/src/grid/grid.scss b/packages/css/src/grid/grid.scss
@@ -0,0 +1,22 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-grid {
+  display: grid;
+  gap: var(--amsterdam-grid-gap);
+  grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
+  margin-inline: auto;
+  padding-inline: var(--amsterdam-grid-padding-inline);
+
+  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+    grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
+  }
+
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+    grid-template-columns: repeat(var(--amsterdam-grid-wide-column-count), 1fr);
+  }
+}
diff --git a/packages/css/src/grid/page-grid.scss b/packages/css/src/grid/page-grid.scss
diff --git a/packages/css/src/heading/heading.scss b/packages/css/src/heading/heading.scss
@@ -25,7 +25,7 @@
   font-size: var(--amsterdam-heading-1-narrow-font-size);
   line-height: var(--amsterdam-heading-1-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-1-wide-font-size);
   }
 }
@@ -34,7 +34,7 @@
   font-size: var(--amsterdam-heading-2-narrow-font-size);
   line-height: var(--amsterdam-heading-2-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-2-wide-font-size);
   }
 }
@@ -43,7 +43,7 @@
   font-size: var(--amsterdam-heading-3-narrow-font-size);
   line-height: var(--amsterdam-heading-3-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-3-wide-font-size);
   }
 }
@@ -52,7 +52,7 @@
   font-size: var(--amsterdam-heading-4-narrow-font-size);
   line-height: var(--amsterdam-heading-4-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-4-wide-font-size);
   }
 }