Merge branch 'main' of https://github.com/Amsterdam/design-system int…

…o task/simplify-highlight-story
Amsterdam · Oct 27, 2023 · 690a4be · 690a4be
2 parents db56c87 + 9762155
commit 690a4be
Show file tree

Hide file tree

Showing 69 changed files with 1,117 additions and 437 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/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 (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 (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 (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 (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 (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 (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 (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 (width > $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-form-label-wide-font-size);
   }
 

diff --git a/packages/css/src/grid-cell/README.md b/packages/css/src/grid-cell/README.md
@@ -0,0 +1,9 @@
+# Grid cell
+
+Beslaat een aantal kolommen in een [Page Grid](?path=/docs/react_layout-page-grid--docs).
+
+## Gebruik
+
+Gebruik het `GridCell` component om een grid in cellen te verdelen.
+Op de cel kun je aangeven hoeveel kolommen van het grid het element beslaat.
+In elke cel plaats je vervolgens een component of element.
diff --git a/packages/css/src/grid-cell/grid-cell.scss b/packages/css/src/grid-cell/grid-cell.scss
@@ -0,0 +1,46 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-page-grid > .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-page-grid > .amsterdam-grid-cell--span-#{$i} {
+    grid-column-end: span $i;
+  }
+
+  .amsterdam-page-grid > .amsterdam-grid-cell--start-#{$i} {
+    grid-column-start: $i;
+  }
+}
+
+@media screen and (min-width: $amsterdam-breakpoint-medium) {
+  @for $i from 1 through 12 {
+    .amsterdam-page-grid > .amsterdam-grid-cell--span-#{$i}-medium {
+      grid-column-end: span $i;
+    }
+
+    .amsterdam-page-grid > .amsterdam-grid-cell--start-#{$i}-medium {
+      grid-column-start: $i;
+    }
+  }
+}
+
+@media screen and (min-width: $amsterdam-breakpoint-wide) {
+  @for $i from 1 through 12 {
+    .amsterdam-page-grid > .amsterdam-grid-cell--span-#{$i}-wide {
+      grid-column-end: span $i;
+    }
+
+    .amsterdam-page-grid > .amsterdam-grid-cell--start-#{$i}-wide {
+      grid-column-start: $i;
+    }
+  }
+}
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
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 (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 (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 (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 (width > $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-4-wide-font-size);
   }
 }

diff --git a/packages/css/src/icon/icon.scss b/packages/css/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 (width > $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-icon-size-3-icon-size-wide) * var(--amsterdam-icon-size-3-container-multiplier));
   }
 }
@@ -26,15 +26,15 @@
   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 (width > $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-3-icon-size-wide);
     width: var(--amsterdam-icon-size-3-icon-size-wide);
   }
 }
 .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 (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 (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 (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 (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 (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 (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 (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 (width > $amsterdam-breakpoint-typography) {
     height: var(--amsterdam-icon-size-7-icon-size-wide);
     width: var(--amsterdam-icon-size-7-icon-size-wide);
   }

diff --git a/packages/css/src/index.scss b/packages/css/src/index.scss
@@ -4,7 +4,6 @@
  */
 
 /* Append here */
-@import "./highlight/highlight";
 @import "./accordion/accordion";
 @import "./alert/alert";
 @import "./aspect-ratio/aspect-ratio";
@@ -15,15 +14,17 @@
 @import "./checkbox/checkbox";
 @import "./footer/footer";
 @import "./form-label/form-label";
-@import "./grid/grid-cell";
-@import "./grid/page-grid";
+@import "./grid-cell/grid-cell";
 @import "./heading/heading";
+@import "./highlight/highlight";
 @import "./icon/icon";
 @import "./link/link";
 @import "./ordered-list/ordered-list";
+@import "./page-grid/page-grid";
 @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";