@amsterdam/design-system-css 2.2.0 → 3.1.0

package/src/components/page-header/README.md

@@ -3,15 +3,15 @@
 # Page Header
 
 Displays the City’s logo at the top of every page, and optionally a navigation menu.
-Includes the name of the application if it is not the general website.
+Includes the name of the website if it is not the general one.
 
 ## Guidelines
 
-- The Page Header must be used on all websites and applications for the City of Amsterdam.
+- The Page Header must be used on all websites for the City of Amsterdam.
 - It includes the logo of the City or the organization, the site title (except for the general website), and a menu with links to commonly used pages.
 - The Page Header is important because it conveys our corporate identity and is the first thing people see.
-  Using it consistently helps users recognise and trust the website.
-- The Page Header is the same on every page of the application, although full-screen pages may hide it, e.g. a video or a map.
+  Using it consistently helps users recognize and trust the website.
+- The Page Header is the same on every page of the website, although full-screen pages may hide it, e.g. a video or a map.
 - The inline menu can contain a maximum of 5 items.
   The last two will often be ‘Search’ and ‘Menu’.
 - An icon can be added to such a menu item if it helps clarify it, e.g. for searching and for logging in and out.
@@ -21,6 +21,8 @@ Includes the name of the application if it is not the general website.
 - An icon can be added to the end of a link to make its destination easier to guess.
 - For websites with a brand name that feature the standard Amsterdam logo, only the emblem is shown on narrow screens.
 - If the collapsible menu contains [Headings](https://designsystem.amsterdam/?path=/docs/components-text-heading--docs), give them level 2 and a size of ‘level-3’.
+- There’s no need to add whitespace to the Grid in the collapsible menu.
+  Its container already does this.
 
 ## References
 

package/src/components/page-header/page-header.scss

@@ -151,6 +151,10 @@
   }
 }
 
+.ams-page-header__mega-menu-button-item {
+  display: initial; // Override the `hidden` attribute; the mega menu list item is only shown when CSS loads.
+}
+
 .ams-page-header__mega-menu-button-item--hide-on-wide-window {
   @media screen and (min-width: $ams-breakpoint-wide) {
     display: none;
@@ -232,6 +236,7 @@
 
 .ams-page-header__mega-menu {
   inline-size: 100%;
+  padding-block: var(--ams-page-header-mega-menu-padding-block);
   pointer-events: auto; // Set pointer events back to auto to allow the mega menu to be activated
 
   // Remove inline padding from Grids that are used in the mega menu.
@@ -246,6 +251,8 @@
 }
 
 .ams-page-header__grid-cell-narrow-window-only {
+  display: initial; // Override the `hidden` attribute; this cell duplicates the non-fixed links in the Page Header Menu.
+
   @media screen and (min-width: $ams-breakpoint-wide) {
     display: none;
   }

package/src/components/paragraph/paragraph.scss

@@ -23,14 +23,29 @@
   @include reset-p;
 }
 
+.ams-paragraph--large {
+  font-size: var(--ams-paragraph-large-font-size);
+  line-height: var(--ams-paragraph-large-line-height);
+
+  /*
+   * If text-wrap is not supported, it is ignored.
+   * This means the wrapped text will look less balanced, which is fine.
+   */
+  /* stylelint-disable-next-line plugin/use-baseline */
+  text-wrap: var(--ams-paragraph-large-text-wrap);
+}
+
+.ams-paragraph__b {
+  font-weight: inherit;
+}
+
 .ams-paragraph--small {
   font-size: var(--ams-paragraph-small-font-size);
   line-height: var(--ams-paragraph-small-line-height);
 }
 
-.ams-paragraph--large {
-  font-size: var(--ams-paragraph-large-font-size);
-  line-height: var(--ams-paragraph-large-line-height);
+.ams-paragraph__small {
+  font-size: inherit;
 }
 
 .ams-paragraph--inverse {

package/src/components/progress-list/README.md

@@ -0,0 +1,14 @@
+<!-- @license CC0-1.0 -->
+
+# Progress List
+
+Displays the progress of a sequence of steps, with optional additional details per step.
+
+## Guidelines
+
+- Choose the correct level for the steps’ headings.
+- Assign a status to each step: _completed_ or _current_.
+  Steps without a status are considered _upcoming_.
+- Maintain a correct chronological order.
+  Only one step may be _current_; preceding steps must be _completed_.
+- Progress List must only be used on a white background.

package/src/components/progress-list/progress-list.scss

@@ -0,0 +1,248 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/breakpoint" as *;
+
+@mixin reset-ol {
+  list-style: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+}
+
+@mixin indicator {
+  display: grid;
+  flex: none;
+  place-items: start center;
+}
+
+@mixin marker-shape {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: grid;
+  place-content: center;
+  z-index: 1;
+}
+
+@mixin connector {
+  block-size: 100%;
+  grid-area: 1 / 1;
+}
+
+.ams-progress-list {
+  @include reset-ol;
+}
+
+/* Step */
+
+.ams-progress-list__step {
+  display: flex;
+  gap: var(--ams-progress-list-step-gap);
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    gap: var(--ams-progress-list-step-medium-gap);
+  }
+}
+
+/* Indicator: layout container for marker and connector */
+
+.ams-progress-list__indicator {
+  @include indicator;
+}
+
+/* Marker: layout container for shape */
+
+.ams-progress-list__marker {
+  display: flex;
+  grid-area: 1 / 1; /* Overlaps marker and connector */
+  place-items: center;
+
+  .ams-progress-list--heading-2 & {
+    block-size: var(--ams-progress-list-heading-2-step-marker-block-size);
+  }
+
+  .ams-progress-list--heading-3 & {
+    block-size: var(--ams-progress-list-heading-3-step-marker-block-size);
+  }
+
+  .ams-progress-list--heading-4 & {
+    block-size: var(--ams-progress-list-heading-4-step-marker-block-size);
+  }
+}
+
+/* Shape: visual circle in marker */
+
+.ams-progress-list__marker-shape {
+  @include marker-shape;
+
+  background-color: var(--ams-progress-list-step-marker-shape-background-color);
+  block-size: var(--ams-progress-list-step-marker-shape-block-size);
+  border: var(--ams-progress-list-step-marker-shape-border-width)
+    var(--ams-progress-list-step-marker-shape-border-style) var(--ams-progress-list-step-marker-shape-border-color);
+
+  /* Outline adds space between shape and connector */
+  outline: var(--ams-progress-list-step-marker-shape-outline-width)
+    var(--ams-progress-list-step-marker-shape-outline-style) var(--ams-progress-list-step-marker-shape-outline-color);
+
+  .ams-progress-list__step--completed & {
+    background-color: var(--ams-progress-list-step-completed-marker-shape-background-color);
+    border-color: var(--ams-progress-list-step-completed-marker-shape-border-color);
+  }
+
+  .ams-progress-list__step--current & {
+    background-color: var(--ams-progress-list-step-current-marker-shape-background-color);
+    border-color: var(--ams-progress-list-step-current-marker-shape-border-color);
+  }
+}
+
+/* Connector */
+
+.ams-progress-list__connector {
+  @include connector;
+
+  border-inline: var(--ams-progress-list-step-connector-border-inline-width)
+    var(--ams-progress-list-step-connector-border-inline-style)
+    var(--ams-progress-list-step-connector-border-inline-color);
+
+  .ams-progress-list--heading-2 & {
+    margin-block-start: var(--ams-progress-list-heading-2-step-marker-margin-block-start);
+  }
+
+  .ams-progress-list--heading-3 & {
+    margin-block-start: var(--ams-progress-list-heading-3-step-marker-margin-block-start);
+  }
+
+  .ams-progress-list--heading-4 & {
+    margin-block-start: var(--ams-progress-list-heading-4-step-marker-margin-block-start);
+  }
+
+  .ams-progress-list__step--completed & {
+    border-inline-color: var(--ams-progress-list-step-completed-connector-border-inline-color);
+    border-inline-style: var(--ams-progress-list-step-completed-connector-border-inline-style);
+  }
+
+  .ams-progress-list__step--current.ams-progress-list__step--has-substeps & {
+    border-inline-color: var(--ams-progress-list-step-current-connector-border-inline-color);
+    border-inline-style: solid;
+  }
+
+  /* Hide connector for last step, unless it has substeps. */
+  .ams-progress-list > :last-child:not(.ams-progress-list__step--has-substeps) & {
+    display: none;
+  }
+}
+
+/* Content */
+
+.ams-progress-list__content {
+  flex: auto;
+  min-inline-size: 0; /* Ensure content can shrink to fit container */
+
+  /* Add white space below all but the last step and steps with substeps. */
+  .ams-progress-list__step:not(:last-child, .ams-progress-list__step--has-substeps) & {
+    margin-block-end: var(--ams-progress-list-step-content-margin-block-end);
+  }
+}
+
+/* Heading */
+
+.ams-progress-list__heading {
+  margin-block-end: var(--ams-progress-list-step-heading-margin-block-end);
+}
+
+/* Substeps is its own block in BEM and has the same elements as above */
+
+.ams-progress-list-substeps {
+  @include reset-ol;
+
+  * + & {
+    /* Add white space if there is content preceding substeps */
+    padding-block-start: var(--ams-progress-list-substeps-padding-block-start);
+  }
+}
+
+.ams-progress-list-substeps__step {
+  display: flex;
+}
+
+.ams-progress-list-substeps__indicator {
+  @include indicator;
+
+  margin-inline-end: var(--ams-progress-list-substeps-step-indicator-margin-inline-end);
+  margin-inline-start: calc(
+    -1 * var(--ams-progress-list-step-gap) - var(--ams-progress-list-step-marker-shape-block-size)
+  );
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    margin-inline-end: var(--ams-progress-list-substeps-step-indicator-medium-margin-inline-end);
+    margin-inline-start: calc(
+      -1 * var(--ams-progress-list-step-medium-gap) - var(--ams-progress-list-step-marker-shape-block-size)
+    );
+  }
+}
+
+.ams-progress-list-substeps__marker {
+  block-size: var(--ams-progress-list-substeps-step-marker-block-size);
+  display: grid;
+  grid-area: 1/1;
+  inline-size: var(--ams-progress-list-substeps-step-marker-inline-size);
+  place-items: center;
+}
+
+.ams-progress-list-substeps__marker-shape {
+  @include marker-shape;
+
+  background-color: var(--ams-progress-list-substeps-step-marker-shape-background-color);
+  block-size: var(--ams-progress-list-substeps-step-marker-shape-block-size);
+  border: var(--ams-progress-list-substeps-step-marker-shape-border-width)
+    var(--ams-progress-list-substeps-step-marker-shape-border-style)
+    var(--ams-progress-list-substeps-step-marker-shape-border-color);
+
+  /* Outline is used to create space between shape and connector */
+  outline: var(--ams-progress-list-substeps-step-marker-shape-outline-width)
+    var(--ams-progress-list-substeps-step-marker-shape-outline-style)
+    var(--ams-progress-list-substeps-step-marker-shape-outline-color);
+
+  .ams-progress-list-substeps__step--completed & {
+    background-color: var(--ams-progress-list-substeps-step-completed-marker-shape-background-color);
+    border-color: var(--ams-progress-list-substeps-step-completed-marker-shape-border-color);
+  }
+
+  .ams-progress-list-substeps__step--current & {
+    background-color: var(--ams-progress-list-substeps-step-current-marker-shape-background-color);
+    border-color: var(--ams-progress-list-substeps-step-current-marker-shape-border-color);
+  }
+}
+
+.ams-progress-list-substeps__connector {
+  @include connector;
+
+  /* Cover underlying connector of parent step to prevent it from shining through. Our value for this token is white. */
+  background-color: var(--ams-progress-list-substeps-step-connector-background-color);
+  border: var(--ams-progress-list-substeps-step-connector-border-inline-width)
+    var(--ams-progress-list-substeps-step-connector-border-inline-style)
+    var(--ams-progress-list-substeps-step-connector-border-inline-color);
+  margin-block-start: var(--ams-progress-list-substeps-step-connector-margin-block-start);
+
+  .ams-progress-list-substeps__step--completed & {
+    border-inline-color: var(--ams-progress-list-substeps-step-completed-connector-border-inline-color);
+    border-inline-style: var(--ams-progress-list-substeps-step-completed-connector-border-inline-style);
+  }
+
+  /* Hide connector when it belongs to the last substep of last main step. Our value for this token is white. */
+  .ams-progress-list__step:last-child .ams-progress-list-substeps__step:last-child & {
+    border-inline-color: var(--ams-progress-list-substeps-step-connector-last-child-border-inline-color);
+  }
+}
+
+.ams-progress-list-substeps__content {
+  /* Add white space below all substeps except for the last. Our value for this token is medium space. */
+  margin-block-end: var(--ams-progress-list-substeps-step-content-margin-block-end);
+
+  /* Add white space below the last substep. Our value for this token is large space. */
+  .ams-progress-list-substeps__step:last-child & {
+    margin-block-end: var(--ams-progress-list-substeps-last-child-content-margin-block-end);
+  }
+}

package/src/components/time-input/time-input.scss

@@ -67,11 +67,6 @@
   cursor: var(--ams-time-input-disabled-cursor);
 }
 
-.ams-time-input:disabled::-webkit-calendar-picker-indicator {
-  background-image: var(--ams-time-input-disabled-calendar-picker-indicator-background-image);
-  visibility: visible;
-}
-
 .ams-time-input:not(:disabled):invalid,
 .ams-time-input:not(:disabled)[aria-invalid="true"] {
   border-color: var(--ams-time-input-invalid-border-color);