Merge branch 'develop' into feat/DES-1069-remove-gap-from-card

Amsterdam · Dec 16, 2024 · 9360496 · 9360496
2 parents fd57e53 + 0192404
commit 9360496
Show file tree

Hide file tree

Showing 69 changed files with 919 additions and 318 deletions.
diff --git a/.github/workflows/feature-branch-deploy.yml b/.github/workflows/feature-branch-deploy.yml
@@ -52,7 +52,7 @@ jobs:
           touch ./storybook/dist/${{ github.sha }}.txt
 
       - name: Pushing to pages branch
-        uses: JamesIves/github-pages-deploy-action@62fec3add6773ec5dbbf18d2ee4260911aa35cf4 # v4.6.9
+        uses: JamesIves/github-pages-deploy-action@15de0f09300eea763baee31dff6c6184995c5f6a # v4.7.2
         with:
           branch: gh-pages
           folder: storybook/dist

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -66,7 +66,7 @@ jobs:
         if: ${{ steps.release.outputs.releases_created == 'true' }}
 
       - name: Deploy to GitHub Pages
-        uses: JamesIves/github-pages-deploy-action@62fec3add6773ec5dbbf18d2ee4260911aa35cf4 # v4.6.9
+        uses: JamesIves/github-pages-deploy-action@15de0f09300eea763baee31dff6c6184995c5f6a # v4.7.2
         with:
           branch: gh-pages
           folder: dist/storybook

diff --git a/package.json b/package.json
@@ -50,7 +50,7 @@
     "prettier": "3.4.2",
     "rimraf": "6.0.1",
     "stylelint": "16.11.0",
-    "stylelint-config-standard-scss": "13.1.0",
+    "stylelint-config-standard-scss": "14.0.0",
     "stylelint-order": "6.0.4",
     "stylelint-use-logical": "2.1.2",
     "typescript": "5.7.2",

diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 .ams-accordion {
   display: flex;

diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-blockquote {
   margin-block: 0;

diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-ol {
   margin-block: 0;

diff --git a/packages/css/src/components/breakout/breakout.scss b/packages/css/src/components/breakout/breakout.scss
@@ -3,9 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
-@import "../grid/grid";
-@import "../grid/mixins";
+@use "../../common/breakpoint" as *;
+@use "../grid/grid" as *;
+@use "../grid/mixins" as *;
 
 $ams-breakout-row-span-max: 4;
 

diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-button {
   border: 0;

diff --git a/packages/css/src/components/character-count/character-count.scss b/packages/css/src/components/character-count/character-count.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 .ams-character-count {
   color: var(--ams-character-count-color);

diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
@@ -3,9 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/input-label-focus";
-@import "../../common/hide-input";
-@import "../../common/text-rendering";
+@use "../../common/input-label-focus" as *;
+@use "../../common/hide-input" as *;
+@use "../../common/text-rendering" as *;
 
 .ams-checkbox__input {
   @include hide-input;

diff --git a/packages/css/src/components/column/column.scss b/packages/css/src/components/column/column.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/size";
+@use "../../common/size" as *;
 
 .ams-column {
   display: flex;

diff --git a/packages/css/src/components/date-input/date-input.scss b/packages/css/src/components/date-input/date-input.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-input {
   -webkit-appearance: none; // Reset appearance for Safari < 15.4

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
@@ -3,13 +3,17 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
-@import "../../common/text-rendering";
+@use "../../common/breakpoint" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-dl {
   margin-block: 0;
 }
 
+@mixin reset-dd {
+  margin-inline: 0;
+}
+
 .ams-description-list {
   box-sizing: border-box;
   color: var(--ams-description-list-color);
@@ -25,19 +29,23 @@
 }
 
 @media screen and (min-width: $ams-breakpoint-medium) {
-  .ams-description-list {
+  .ams-description-list,
+  .ams-description-list__section {
     grid-template-columns: auto 1fr;
   }
 
-  .ams-description-list--terms-width-sm {
+  .ams-description-list--terms-width-sm,
+  .ams-description-list--terms-width-sm .ams-description-list__section {
     grid-template-columns: 1fr 4fr;
   }
 
-  .ams-description-list--terms-width-md {
+  .ams-description-list--terms-width-md,
+  .ams-description-list--terms-width-md .ams-description-list__section {
     grid-template-columns: 1fr 2fr;
   }
 
-  .ams-description-list--terms-width-lg {
+  .ams-description-list--terms-width-lg,
+  .ams-description-list--terms-width-lg .ams-description-list__section {
     grid-template-columns: 1fr 1fr;
   }
 }
@@ -54,8 +62,22 @@
   }
 }
 
-@mixin reset-dd {
-  margin-inline: 0;
+.ams-description-list__section {
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    column-gap: var(--ams-description-list-column-gap);
+    display: grid;
+    grid-column: span 2;
+
+    > :only-of-type {
+      grid-row: 1 / 9;
+    }
+  }
+}
+
+// Aligns terms and descriptions in a section to the grid of the list.
+// The extra class selector increases specificity to match earlier declarations.
+.ams-description-list .ams-description-list__section {
+  grid-template-columns: subgrid;
 }
 
 .ams-description-list__description {

diff --git a/packages/css/src/components/error-message/error-message.scss b/packages/css/src/components/error-message/error-message.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-p {
   margin-block: 0;

diff --git a/packages/css/src/components/field-set/field-set.scss b/packages/css/src/components/field-set/field-set.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-fieldset {
   border: 0;

diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/text-rendering";
+@use "../../common/text-rendering" as *;
 
 @mixin reset-button {
   border: 0;

diff --git a/packages/css/src/components/file-list/README.md b/packages/css/src/components/file-list/README.md
@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# File List
+
+An overview of files, showing their name, type, size, and a preview.
diff --git a/packages/css/src/components/file-list/file-list.scss b/packages/css/src/components/file-list/file-list.scss
@@ -0,0 +1,55 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/text-rendering" as *;
+
+@mixin reset-ul {
+  list-style: none;
+  margin-block: 0;
+  padding-inline: 0;
+}
+
+.ams-file-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ams-file-list-gap);
+  padding-block: var(--ams-file-list-padding-block);
+
+  @include text-rendering;
+  @include reset-ul;
+}
+
+.ams-file-list__item {
+  display: flex;
+  flex-direction: row;
+  font-family: var(--ams-file-list-file-font-family);
+  font-size: var(--ams-file-list-file-font-size);
+  font-weight: var(--ams-file-list-file-font-weight);
+  gap: var(--ams-file-list-file-gap);
+  line-height: var(--ams-file-list-file-line-height);
+}
+
+.ams-file-list__item-preview {
+  display: grid;
+  flex: 0 0 var(--ams-file-list-file-preview-width);
+  place-items: center;
+
+  img {
+    inline-size: 100%;
+    min-block-size: auto;
+  }
+}
+
+.ams-file-list__item-info {
+  flex: 1;
+  gap: var(--ams-file-list-file-gap);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ams-file-input__item-details {
+  color: var(--ams-file-list-file-details-color);
+}
diff --git a/packages/css/src/components/gap/gap.scss b/packages/css/src/components/gap/gap.scss
@@ -3,13 +3,14 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/size";
+@use "sass:map";
+@use "../../common/size" as *;
 
 [class|="ams-gap-"] {
   display: grid !important;
 }
 
-@each $size in map-keys($ams-sizes) {
+@each $size in map.keys($ams-sizes) {
   @if $size != "no" {
     .ams-gap--#{$size} {
       grid-gap: var(--ams-gap-#{$size}) !important;

diff --git a/packages/css/src/components/grid/_mixins.scss b/packages/css/src/components/grid/_mixins.scss
@@ -1,3 +1,5 @@
+@use "../../common/breakpoint" as *;
+
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam

diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
-@import "mixins";
+@use "../../common/breakpoint" as *;
+@use "mixins" as *;
 
 $ams-grid-column-count: 12;
 

diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
@@ -3,7 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
 
 .ams-header {
   align-items: center;

diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss
@@ -3,8 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
-@import "../../common/hyphenation";
-@import "../../common/text-rendering";
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
 
 @mixin reset-hx {
   margin-block: 0;

diff --git a/packages/css/src/components/image-slider/image-slider.scss b/packages/css/src/components/image-slider/image-slider.scss
@@ -2,7 +2,7 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
-@import "../../common/breakpoint";
+@use "../../common/breakpoint" as *;
 
 .ams-image-slider {
   display: grid;