@amsterdam/design-system-css 0.14.1 → 0.16.0

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

@@ -17,6 +17,7 @@
   display: grid;
   gap: var(--ams-link-list-gap);
 
+  @include hyphenation;
   @include text-rendering;
   @include reset-ul;
 }
@@ -49,22 +50,20 @@
 .ams-link-list__link--large {
   font-size: var(--ams-link-list-link-large-font-size);
   line-height: var(--ams-link-list-link-large-line-height);
-
-  @include hyphenation;
 }
 
-.ams-link-list__link--contrast-color {
-  color: var(--ams-link-list-link-contrast-color-color);
+.ams-link-list__link--contrast {
+  color: var(--ams-link-list-link-contrast-color);
 
   &:hover {
-    color: var(--ams-link-list-link-contrast-color-hover-color);
+    color: var(--ams-link-list-link-contrast-hover-color);
   }
 }
 
-.ams-link-list__link--inverse-color {
-  color: var(--ams-link-list-link-inverse-color-color);
+.ams-link-list__link--inverse {
+  color: var(--ams-link-list-link-inverse-color);
 
   &:hover {
-    color: var(--ams-link-list-link-inverse-color-hover-color);
+    color: var(--ams-link-list-link-inverse-hover-color);
   }
 }

package/src/components/logo/README.md

@@ -30,7 +30,7 @@ The sub-brands are:
 ## Requirements for all logos
 
 - The logo is always displayed.
-- The logo is left-aligned in the header.
+- The logo is left-aligned in the Page Header.
 - The logo links to the homepage of the website or application.
 - If the application is a form, application, or tool without a homepage, the logo links to the page where the form, application, or tool is referred to.
 

package/src/components/margin/README.md

@@ -6,20 +6,26 @@ Adds white space below a single element.
 
 ## Class names
 
-The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the height of the bottom margin.
+Six options are available for the width or height of the bottom margin:
 
-| Class name   | Example                                                                                      |
-| ------------ | -------------------------------------------------------------------------------------------- |
-| `ams-mb--xs` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-xs);" /> |
-| `ams-mb--sm` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-sm);" /> |
-| `ams-mb--md` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-md);" /> |
-| `ams-mb--lg` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-lg);" /> |
-| `ams-mb--xl` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-margin-xl);" /> |
+- `ams-mb-xs`
+- `ams-mb-s`
+- `ams-mb-m`
+- `ams-mb-l`
+- `ams-mb-xl`
+- `ams-mb-2xl`
+
+Because spacing is responsive, the margins are as well.
+They are also smaller in Compact Mode.
+Consult the [Space](/docs/brand-design-tokens-space--docs) docs for an indication of their sizes.
 
 ## Guidelines
 
 - Use this utility class to vertically separate one element from the next.
-- It can be used on any element and sets the `margin-block-end` CSS property. This declaration is marked with the `!important` flag to ensure it overrides any other margins.
-- Elements’ top and bottom margins are sometimes collapsed into a single margin. Consult [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) for details.
+- It can be used on any element and sets the `margin-block-end` CSS property.
+  This declaration is marked with the `!important` flag to ensure it overrides any other margins.
+- Elements’ top and bottom margins are sometimes collapsed into a single margin.
+  We only offer a utility for the bottom margin to prevent issues arising from this.
+  Consult [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) for details.
 - To add equal margins between elements, either use the [Gap](/docs/utilities-css-gap--docs) utility class on their common parent or wrap them in a [Column](/docs/components-layout-column--docs) component.
   This helps in loops: it prevents having to treat the last element differently.

package/src/components/margin/margin.scss

@@ -3,13 +3,11 @@
  * Copyright Gemeente Amsterdam
  */
 
-@use "sass:map";
-@use "../../common/size" as *;
-
-@each $size in map.keys($ams-sizes) {
-  @if $size != "no" {
-    .ams-mb--#{$size} {
-      margin-block-end: var(--ams-margin-#{$size}) !important;
-    }
+// If you modify this list, you must also update the object in
+// packages/react/src/common/shortSize.ts
+@each $size in ("xs", "s", "m", "l", "xl", "2xl") {
+  .ams-mb-#{$size} {
+    /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+    margin-block-end: var(--ams-space-#{$size}) !important;
   }
 }

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

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 @mixin reset-ol {
@@ -17,6 +18,7 @@
   gap: var(--ams-ordered-list-gap);
 
   @include text-rendering;
+  @include hyphenation;
   @include reset-ol;
 }
 
@@ -34,7 +36,7 @@
   }
 }
 
-.ams-ordered-list--inverse-color:not(.ams-ordered-list--no-markers) {
+.ams-ordered-list--inverse:not(.ams-ordered-list--no-markers) {
   color: var(--ams-ordered-list-inverse-color);
 }
 

package/src/components/page/README.md

@@ -0,0 +1,23 @@
+<!-- @license CC0-1.0 -->
+
+# Page
+
+Contains the entire website.
+Sets the background colour and its maximum width, and is horizontally centered.
+
+## Guidelines
+
+- The Page component must be used on all websites for the City of Amsterdam.
+  Applications can use it as well, although a specific layout for them is in development.
+- It is the outermost container. Within it, combine components such as
+  [Grid](https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs),
+  [Page Header](https://designsystem.amsterdam/?path=/docs/components-containers-page-header--docs),
+  [Page Footer](https://designsystem.amsterdam/?path=/docs/components-containers-page-footer--docs),
+  [Spotlight](https://designsystem.amsterdam/?path=/docs/components-containers-spotlight--docs),
+  [Image Slider](https://designsystem.amsterdam/?path=/docs/components-media-image-slider--docs),
+  and [Figure](https://designsystem.amsterdam/?path=/docs/components-media-figure--docs).
+
+## Design
+
+The Page container sets the maximum width for a website of the City of Amsterdam, which is 1600 pixels.
+It horizontally centres both itself and its content and sets a white background.

package/src/components/page/page.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+.ams-page {
+  background-color: var(--ams-page-background-color);
+  margin-inline: auto;
+  max-inline-size: var(--ams-page-max-inline-size);
+  min-block-size: 100vh; /* Fallback for browsers that do not support dvh */
+  min-block-size: 100dvh;
+}

package/src/components/{footer → page-footer}/README.md

@@ -1,15 +1,18 @@
 <!-- @license CC0-1.0 -->
 
-# Footer
+# Page Footer
 
 Provides service information at the bottom of every page.
 
 ## Guidelines
 
-- The Footer usually consists of two sections: a full-width blue area and a [Page Menu](/docs/components-navigation-page-menu--docs) below it.
-- A Footer containing only a Page Menu can be sufficient for applications.
-- The Footer must be used on all websites for the City of Amsterdam.
+- The Page Footer must be used on all websites and applications for the City of Amsterdam.
+- It usually consists of two sections: a full-width blue `PageFooter.Spotlight` and a `PageFooter.Menu` below it.
+- `Footer.Menu` is preceded by a visually hidden `Heading` for accessibility.
+- A Page Footer containing only a `PageFooter.Menu` can be sufficient for applications.
+- The Page Footer must be used on all websites for the City of Amsterdam.
 - It must be the same on every page.
+- Set [the inverse colour](?path=/docs/brand-design-tokens-colour--docs#pairing-foreground-with-background-colours) on all text and links in this area.
 
 The top section offers space for various practical links:
 

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

@@ -0,0 +1,56 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/breakpoint" as *;
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
+
+@mixin reset-ul {
+  list-style: none;
+  margin-block: 0;
+}
+
+.ams-page-footer__spotlight {
+  background-color: var(--ams-page-footer-spotlight-background-color);
+}
+
+.ams-page-footer__menu {
+  column-gap: var(--ams-page-footer-menu-column-gap);
+  display: flex;
+  flex-wrap: wrap;
+  padding-block: var(--ams-page-footer-menu-padding-block);
+  padding-inline: var(--ams-page-footer-menu-padding-inline);
+  row-gap: var(--ams-page-footer-menu-row-gap);
+
+  @include reset-ul;
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    padding-inline: var(--ams-page-footer-menu-medium-padding-inline);
+  }
+
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    padding-inline: var(--ams-page-footer-menu-wide-padding-inline);
+  }
+}
+
+.ams-page-footer__menu-link {
+  color: var(--ams-page-footer-menu-link-color);
+  font-family: var(--ams-page-footer-menu-link-font-family);
+  font-size: var(--ams-page-footer-menu-link-font-size);
+  font-weight: var(--ams-page-footer-menu-link-font-weight);
+  line-height: var(--ams-page-footer-menu-link-line-height);
+  outline-offset: var(--ams-page-footer-menu-link-outline-offset);
+  text-decoration-line: var(--ams-page-footer-menu-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-page-footer-menu-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-page-footer-menu-link-text-underline-offset);
+
+  @include hyphenation;
+  @include text-rendering;
+
+  &:hover {
+    color: var(--ams-page-footer-menu-link-hover-color);
+    text-decoration-line: var(--ams-page-footer-menu-link-hover-text-decoration-line);
+  }
+}

package/src/components/{header → page-header}/README.md

@@ -1,25 +1,26 @@
 <!-- @license CC0-1.0 -->
 
-# Header
+# 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.
 
 ## Guidelines
 
-- The Header must be used on all websites and applications for the City of Amsterdam.
+- The Page Header must be used on all websites and applications 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 Header is important because it conveys our corporate identity and is the first thing people see.
+- The Page Header is important because it conveys our corporate identity and is the first thing people see.
   Using it consistently helps users recognize and trust the website.
-- The Header is the same on every page of the application, although full-screen pages may hide it, e.g. a video or a map.
+- 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.
 - The inline menu can contain a maximum of 5 items.
   The last two will often be ‘Search’ and ‘Menu’.
 - The 'Menu' button opens a collapsible menu, which has room for more links.
 - On narrow windows, links can move from the inline menu to the collapsible one.
 - Labels should be short to help the inline menu fit on a single line whenever possible.
 - 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.
 
 ## References
 
-- A Header is a [landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark_roles) and can be used to group navigation elements.
+- A Page Header is a [landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark_roles) and can be used to group navigation elements.
 - [WCAG 3.2.3](https://wcag.com/designers/3-2-3-consistent-navigation/) Consistent Navigation: Navigation menus that appear on multiple pages are consistent.

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

@@ -0,0 +1,237 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/breakpoint" as *;
+@use "../../common/text-rendering" as *;
+
+.ams-page-header {
+  /*
+  * The logo link section is created twice: once outside the navigation and once hidden inside it.
+  * This keeps all navigation in one nav element and lets the menu wrap around the logo link section.
+  * Display grid is used to let both logo link sections overlap.
+  */
+  display: grid;
+  font-family: var(--ams-page-header-font-family);
+  padding-block: var(--ams-page-header-padding-block);
+  padding-inline: var(--ams-page-header-padding-inline);
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    padding-inline: var(--ams-page-header-medium-padding-inline);
+  }
+
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    padding-inline: var(--ams-page-header-wide-padding-inline);
+  }
+}
+
+.ams-page-header__logo-link {
+  align-items: center;
+  align-self: start; // To align the logo link section to the top of the header when it wraps
+  column-gap: var(--ams-page-header-logo-link-column-gap);
+  display: flex;
+  grid-area: 1 / 1; // To allow this section to overlap with the second logo link section
+  inline-size: fit-content;
+  outline-offset: var(--ams-page-header-logo-link-outline-offset);
+  text-decoration: none;
+}
+
+.ams-page-header__logo-link--hidden {
+  opacity: 0%;
+  user-select: none; // The hidden logo link section should not be selectable
+}
+
+.ams-page-header__logo-container {
+  flex-shrink: 0;
+  inline-size: 0.75rem;
+  overflow: hidden;
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    inline-size: auto;
+  }
+}
+
+.ams-page-header__brand-name {
+  color: var(--ams-page-header-brand-name-color);
+  font-size: var(--ams-page-header-brand-name-font-size);
+  font-weight: var(--ams-page-header-brand-name-font-weight);
+  line-height: 1.35;
+  text-wrap: var(--ams-page-header-brand-name-text-wrap);
+}
+
+.ams-page-header__navigation {
+  column-gap: var(--ams-page-header-navigation-column-gap);
+  display: flex;
+  flex-wrap: wrap;
+  grid-area: 1 / 1; // To allow this section to overlap with the logo link section
+  // This section blocks pointer events initially, so the hidden logo link section can't be activated.
+  // The menu and collapsible menu set it back to auto, to make sure they can be activated.
+  pointer-events: none;
+  row-gap: var(--ams-page-header-navigation-row-gap);
+}
+
+@mixin reset-list {
+  list-style: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+}
+
+.ams-page-header__menu {
+  align-items: center;
+  column-gap: var(--ams-page-header-menu-column-gap);
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  margin-inline-start: auto;
+  pointer-events: auto; // Set pointer events back to auto to allow the menu to be activated
+  row-gap: var(--ams-page-header-menu-row-gap);
+
+  @include reset-list;
+}
+
+// Do not show menu items below the wide breakpoint...
+.ams-page-header__menu-item {
+  @media screen and (not (min-width: $ams-breakpoint-wide)) {
+    display: none;
+  }
+}
+
+// ...unless they're fixed.
+.ams-page-header__menu-item--fixed {
+  display: revert;
+}
+
+@mixin page-header-menu-action {
+  color: var(--ams-page-header-menu-item-color);
+  font-size: var(--ams-page-header-menu-item-font-size);
+  font-weight: var(--ams-page-header-menu-item-font-weight);
+  line-height: var(--ams-page-header-menu-item-line-height);
+  outline-offset: var(--ams-page-header-menu-item-outline-offset);
+  padding-block: var(--ams-page-header-menu-item-padding-block);
+  touch-action: manipulation;
+  white-space: nowrap;
+
+  @include text-rendering;
+
+  &:hover {
+    color: var(--ams-page-header-menu-item-hover-color);
+  }
+}
+
+.ams-page-header__menu-link {
+  display: inline-block;
+  text-decoration-line: var(--ams-page-header-menu-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-page-header-menu-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-page-header-menu-link-text-underline-offset);
+
+  @include page-header-menu-action;
+
+  &:hover {
+    text-decoration-line: var(--ams-page-header-menu-link-hover-text-decoration-line);
+  }
+}
+
+.ams-page-header__mega-menu-button-item--hide-on-wide-window {
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    display: none;
+  }
+}
+
+@mixin reset-button {
+  background: none;
+  border: none;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
+  padding-inline: 0;
+
+  // [1] Remove the margin in older Safari.
+}
+
+.ams-page-header__mega-menu-button {
+  column-gap: var(--ams-page-header-menu-item-column-gap);
+  cursor: var(--ams-page-header-mega-menu-button-cursor);
+  display: grid;
+  font-family: inherit;
+  grid-auto-flow: column;
+
+  @include page-header-menu-action;
+  @include reset-button;
+}
+
+.ams-page-header__mega-menu-button[aria-expanded="true"] {
+  font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight);
+}
+
+.ams-page-header__mega-menu-button-label,
+.ams-page-header__mega-menu-button-hidden-label {
+  grid-area: 1 / 1; // To allow the label and the hidden label to overlap
+}
+
+// This hidden label is used to prevent a layout shift when the mega menu is opened
+// and the button text becomes bold.
+.ams-page-header__mega-menu-button-hidden-label {
+  font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight);
+  pointer-events: none;
+  user-select: none;
+  visibility: hidden;
+}
+
+.ams-page-header__menu-icon {
+  line {
+    stroke: currentColor;
+    stroke-width: 3px;
+    transform-origin: center;
+    transition:
+      translate 0.1s ease-in-out,
+      rotate 0.2s ease-in-out,
+      opacity 0.1s ease-in-out;
+
+    @media (prefers-reduced-motion) {
+      transition: none;
+    }
+  }
+
+  .ams-page-header__menu-icon-top {
+    translate: 0 -7px;
+  }
+
+  .ams-page-header__menu-icon-bottom {
+    translate: 0 7px;
+  }
+}
+
+.ams-page-header__menu-icon--open {
+  .ams-page-header__menu-icon-top {
+    rotate: 45deg;
+    translate: 0;
+  }
+  .ams-page-header__menu-icon-middle {
+    opacity: 0%;
+  }
+  .ams-page-header__menu-icon-bottom {
+    rotate: -45deg;
+    translate: 0;
+  }
+}
+
+.ams-page-header__mega-menu {
+  inline-size: 100%;
+  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.
+  // The grid inline padding is set on the header element.
+  & .ams-grid {
+    padding-inline: 0;
+  }
+}
+
+.ams-page-header__mega-menu--closed.ams-page-header__mega-menu--closed {
+  display: none;
+}
+
+.ams-page-header__grid-cell-narrow-window-only {
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    display: none;
+  }
+}

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

@@ -2,7 +2,7 @@
 
 # Page Heading
 
-The page heading component is a prominent text at the beginning of a page, immediately after the header.
+The page heading component is a prominent text at the beginning of a page, immediately after the Page Header.
 Use this component for a name, title, or motto.
 
 ## Guidelines

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

@@ -19,12 +19,13 @@
   font-size: var(--ams-page-heading-font-size);
   font-weight: var(--ams-page-heading-font-weight);
   line-height: var(--ams-page-heading-line-height);
+  text-wrap: var(--ams-page-heading-text-wrap);
 
   @include hyphenation;
   @include text-rendering;
   @include reset-h1;
 }
 
-.ams-page-heading--inverse-color {
+.ams-page-heading--inverse {
   color: var(--ams-page-heading-inverse-color);
 }

package/src/components/pagination/pagination.scss

@@ -5,6 +5,16 @@
 
 @use "../../common/text-rendering" as *;
 
+.ams-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--ams-pagination-font-family);
+  font-size: var(--ams-pagination-font-size);
+  font-weight: var(--ams-pagination-font-weight);
+  justify-content: center;
+  line-height: var(--ams-pagination-line-height);
+}
+
 @mixin reset-ol {
   list-style-type: none;
   margin-block: 0;
@@ -12,48 +22,28 @@
 }
 
 .ams-pagination__list {
-  color: var(--ams-pagination-color);
   display: flex;
   flex-wrap: wrap;
-  font-family: var(--ams-pagination-font-family);
-  font-size: var(--ams-pagination-font-size);
-  font-weight: var(--ams-pagination-font-weight);
-  justify-content: center;
-  line-height: var(--ams-pagination-line-height);
 
   @include reset-ol;
 }
 
-@mixin reset-button {
-  all: unset;
-  outline: revert;
-}
-
-.ams-pagination__button {
-  /* The reset is included at the top of the block here, if you set it
-  at the bottom `all: unset` overrides the `gap` property. */
-  @include reset-button;
-
-  box-sizing: border-box;
-  cursor: pointer;
-  display: flex;
-  gap: var(--ams-pagination-button-gap);
-  outline-offset: var(--ams-pagination-button-outline-offset);
-  padding-inline: var(--ams-pagination-button-padding-inline);
-  text-decoration-line: var(--ams-pagination-button-text-decoration-line);
-  text-decoration-thickness: var(--ams-pagination-button-text-decoration-thickness);
-  text-underline-offset: var(--ams-pagination-button-text-underline-offset);
+.ams-pagination__link {
+  color: var(--ams-pagination-link-color);
+  display: inline-flex;
+  gap: var(--ams-pagination-link-gap);
+  outline-offset: var(--ams-pagination-link-outline-offset);
+  padding-inline: var(--ams-pagination-link-padding-inline);
+  text-decoration-line: var(--ams-pagination-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-pagination-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-pagination-link-text-underline-offset);
   touch-action: manipulation;
 
   @include text-rendering;
 
-  &:disabled {
-    display: none;
-  }
-
   &:hover {
-    color: var(--ams-pagination-button-hover-color);
-    text-decoration-line: var(--ams-pagination-button-hover-text-decoration-line);
+    color: var(--ams-pagination-link-hover-color);
+    text-decoration-line: var(--ams-pagination-link-hover-text-decoration-line);
   }
 
   // Override for icon size
@@ -63,9 +53,8 @@
   }
 }
 
-.ams-pagination__button--current {
-  cursor: default;
-  font-weight: var(--ams-pagination-button-current-font-weight);
+.ams-pagination__link[aria-current="page"] {
+  font-weight: var(--ams-pagination-link-current-font-weight);
 
   &:hover {
     text-decoration: none;

package/src/components/paragraph/paragraph.scss

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 @mixin reset-p {
@@ -18,6 +19,7 @@
   line-height: var(--ams-paragraph-line-height);
 
   @include text-rendering;
+  @include hyphenation;
   @include reset-p;
 }
 
@@ -31,6 +33,6 @@
   line-height: var(--ams-paragraph-large-line-height);
 }
 
-.ams-paragraph--inverse-color {
+.ams-paragraph--inverse {
   color: var(--ams-paragraph-inverse-color);
 }