@amsterdam/design-system-css 2.0.1 → 2.1.0

package/src/components/heading/heading.scss

@@ -12,11 +12,23 @@
 
 .ams-heading {
   box-sizing: border-box;
+
+  /*
+   * If break-after is supported, use it to avoid a Heading from being the last item on a page when printed.
+   * If it is not supported, it is ignored.
+   */
+  /* stylelint-disable-next-line plugin/use-baseline */
   break-after: avoid;
   break-inside: avoid;
   color: var(--ams-heading-color);
   font-family: var(--ams-heading-font-family);
   font-weight: var(--ams-heading-font-weight);
+
+  /*
+   * 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-heading-text-wrap);
 
   @include hyphenation;

package/src/components/image-slider/image-slider.scss

@@ -33,12 +33,18 @@
   overflow-x: auto;
   overscroll-behavior-x: contain;
 
-  /**
-    Required for the goToSlide function to work properly.
-    Ensures that the offset of the slides is calculated relative to the scroller container.
-  */
+  /*
+   * Required for the goToSlide function to work properly.
+   * Ensures that the offset of the slides is calculated relative to the scroller container.
+   */
   position: relative;
   scroll-snap-type: x mandatory;
+
+  /*
+   * Hide the scrollbar in Firefox.
+   * Firefox has full support for this property.
+   */
+  /* stylelint-disable-next-line plugin/use-baseline */
   scrollbar-width: none;
 
   &::-webkit-scrollbar {

package/src/components/label/label.scss

@@ -12,8 +12,20 @@
   font-size: var(--ams-label-font-size);
   font-weight: var(--ams-label-font-weight);
   line-height: var(--ams-label-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-label-text-wrap);
 
   @include hyphenation;
   @include text-rendering;
 }
+
+.ams-label__heading {
+  font-size: var(--ams-label-font-size);
+  font-weight: var(--ams-label-font-weight);
+  margin-block: 0;
+}

package/src/components/menu/README.md

@@ -4,5 +4,19 @@
 
 A primary navigation leading to key areas of an application or website.
 
-The Menu component works well in the sidebar of applications, usually on a blue background.
-This first iteration is a simple vertical menu with 1 level of navigation.
+## Design
+
+- The menu has a blue background.
+  Links have a white icon and a label.
+- In a narrow window, the menu occupies the full width.
+  The icon and label of the link sit next to each other.
+- In a wide window, the menu has a maximum width of 8rem.
+  It adds whitespace at the top to align with the baseline of Page Header.
+  The icon is larger and positioned above the label.
+
+## Guidelines
+
+- Include this component twice: one in the Page Header and one to the side of the Page.
+  Do not use it anywhere else.
+- Set the `inWideWindow` prop to the latter to ensure only one of them is visible, and to get the correct appearance.
+- Use filled icons for the links.

package/src/components/menu/menu.scss

@@ -14,10 +14,40 @@
 }
 
 .ams-menu {
+  background-color: var(--ams-menu-background-color);
   font-family: var(--ams-menu-font-family);
   font-size: var(--ams-menu-font-size);
   font-weight: var(--ams-menu-font-weight);
   line-height: var(--ams-menu-line-height);
+
+  // Menu must overlap the horizontal padding of Page Header to span the entire window.
+  // We accept that this approach with a negative margin tightly couples the component to that context.
+  margin-inline: calc(var(--ams-grid-padding-inline) * -1);
+  padding-block: var(--ams-menu-padding-block);
+
+  // We subtract the menu link padding to align the items with surrounding content.
+  padding-inline: calc(var(--ams-grid-padding-inline) - var(--ams-menu-link-padding-inline));
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    margin-inline: calc(var(--ams-grid-medium-padding-inline) * -1);
+    padding-inline: var(--ams-grid-medium-padding-inline);
+  }
+
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    display: none;
+    margin-inline: 0; // Override negative margin above.
+    max-inline-size: var(--ams-menu-wide-max-inline-size);
+    padding-block: var(--ams-menu-wide-padding-block);
+    padding-inline: var(--ams-menu-wide-padding-inline);
+  }
+}
+
+.ams-menu--in-wide-window {
+  display: none;
+
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    display: block;
+  }
 }
 
 .ams-menu__list {
@@ -35,7 +65,7 @@
 .ams-menu__link {
   align-items: flex-start;
   color: var(--ams-menu-link-color);
-  display: flex;
+  display: inline-flex; // Inline display prevents an excessive hit area next to the link text.
   gap: var(--ams-menu-link-gap);
   outline-offset: var(--ams-menu-link-outline-offset);
   padding-block: var(--ams-menu-link-padding-block);
@@ -55,16 +85,19 @@
 
   @media screen and (min-width: $ams-breakpoint-wide) {
     align-items: center;
+    display: flex; // The links do stretch in the vertical layout of Menu.
     flex-direction: column;
-    gap: 0;
+    gap: var(--ams-menu-link-wide-gap);
+    text-align: center;
 
     .ams-menu__icon {
-      --ams-icon-font-size: var(--ams-icon-heading-3-font-size);
-      --ams-icon-line-height: var(--ams-icon-heading-3-line-height);
+      --ams-icon-font-size: var(--ams-icon-heading-2-font-size);
+      --ams-icon-line-height: var(--ams-icon-heading-2-line-height);
     }
   }
 }
 
+/** @deprecated The menu has a dark background now, so this is no longer needed. */
 .ams-menu__link--contrast {
   color: var(--ams-menu-link-contrast-color);
 
@@ -73,6 +106,7 @@
   }
 }
 
+/** @deprecated The menu has a dark background now, so this is no longer needed. */
 .ams-menu__link--inverse {
   color: var(--ams-menu-link-inverse-color);
 

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

@@ -47,6 +47,10 @@
 
 .ams-page-header__logo-link--hidden {
   opacity: 0%;
+  -webkit-user-select: none;
+
+  /* Safari support is added with the prefixed property. */
+  /* stylelint-disable-next-line plugin/use-baseline */
   user-select: none; // The hidden logo link section should not be selectable
 }
 
@@ -65,6 +69,12 @@
   font-size: var(--ams-page-header-brand-name-font-size);
   font-weight: var(--ams-page-header-brand-name-font-weight);
   line-height: var(--ams-page-header-brand-name-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-page-header-brand-name-text-wrap);
 }
 
@@ -181,6 +191,10 @@
 .ams-page-header__mega-menu-button-hidden-label {
   font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight);
   pointer-events: none;
+  -webkit-user-select: none;
+
+  /* Safari support is added with the prefixed property. */
+  /* stylelint-disable-next-line plugin/use-baseline */
   user-select: none;
   visibility: hidden;
 }

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

@@ -13,6 +13,7 @@
 /* @deprecated We no longer use this size of headings. Use `.ams-heading.ams-heading--1` instead. */
 .ams-page-heading {
   box-sizing: border-box;
+  /* stylelint-disable-next-line plugin/use-baseline */
   break-after: avoid;
   break-inside: avoid;
   color: var(--ams-page-heading-color);
@@ -20,6 +21,7 @@
   font-size: var(--ams-page-heading-font-size);
   font-weight: var(--ams-page-heading-font-weight);
   line-height: var(--ams-page-heading-line-height);
+  /* stylelint-disable-next-line plugin/use-baseline */
   text-wrap: var(--ams-page-heading-text-wrap);
 
   @include hyphenation;

package/src/components/tabs/tabs.scss

@@ -77,6 +77,10 @@
 .ams-tabs__button-label-hidden {
   font-weight: var(--ams-tabs-button-selected-font-weight);
   pointer-events: none;
+  -webkit-user-select: none;
+
+  /* Safari support is added with the prefixed property. */
+  /* stylelint-disable-next-line plugin/use-baseline */
   user-select: none;
   visibility: hidden;
 }

package/src/components/text-area/text-area.scss

@@ -65,15 +65,22 @@
   box-shadow: var(--ams-text-area-invalid-hover-box-shadow);
 }
 
+/*
+ * Resizing is not fully supported in Safari on iOS.
+ * This is acceptable, it is not crucial functionality.
+ */
 .ams-text-area--resize-none {
+  /* stylelint-disable-next-line plugin/use-baseline */
   resize: none;
 }
 
 .ams-text-area--resize-horizontal {
+  /* stylelint-disable-next-line plugin/use-baseline */
   resize: inline;
 }
 
 .ams-text-area--resize-vertical {
+  /* stylelint-disable-next-line plugin/use-baseline */
   resize: block;
 }
 

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

@@ -54,12 +54,12 @@
 // This changes the default calendar icon on Chromium browsers only
 .ams-time-input::-webkit-calendar-picker-indicator {
   appearance: none;
-  background-image: var(--ams-time-input-calender-picker-indicator-background-image);
-  cursor: var(--ams-time-input-calender-picker-indicator-cursor);
+  background-image: var(--ams-time-input-calendar-picker-indicator-background-image);
+  cursor: var(--ams-time-input-calendar-picker-indicator-cursor);
 }
 
 .ams-time-input:hover::-webkit-calendar-picker-indicator {
-  background-image: var(--ams-time-input-hover-calender-picker-indicator-background-image);
+  background-image: var(--ams-time-input-hover-calendar-picker-indicator-background-image);
 }
 
 .ams-time-input:disabled {
@@ -68,7 +68,7 @@
 }
 
 .ams-time-input:disabled::-webkit-calendar-picker-indicator {
-  background-image: var(--ams-time-input-disabled-calender-picker-indicator-background-image);
+  background-image: var(--ams-time-input-disabled-calendar-picker-indicator-background-image);
   visibility: visible;
 }
 

package/src/components/visually-hidden/visually-hidden.scss

@@ -6,11 +6,14 @@
 // Source: https://css-tricks.com/inclusively-hidden/
 .ams-visually-hidden:not(:active, :focus) {
   block-size: 1px;
-  clip: rect(0 0 0 0);
   clip-path: inset(50%);
   inline-size: 1px;
   overflow: hidden;
   position: absolute;
+  -webkit-user-select: none;
+
+  /* Safari support is added with the prefixed property. */
+  /* stylelint-disable-next-line plugin/use-baseline */
   user-select: none;
   white-space: nowrap;
 }