@amsterdam/design-system-css 2.0.1 → 2.2.0

package/src/components/menu/README.md

@@ -4,5 +4,21 @@
 
 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
+
+- This component must not be used on public websites or applications.
+  They should offer navigation using the Page Header only.
+- 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/README.md

@@ -2,22 +2,10 @@
 
 # Page
 
-Contains the entire website.
-Sets the background colour and its maximum width, and is horizontally centered.
+Contains the entire website or application.
 
-## 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 1440 pixels.
-It horizontally centres both itself and its content and sets a white background.
+The Page component wraps the [Page Header](https://designsystem.amsterdam/?path=/docs/components-containers-page-header--docs),
+[Page Footer](https://designsystem.amsterdam/?path=/docs/components-containers-page-footer--docs), and the main content in between.
+As a root layout component, it must be used for all websites and applications for the City of Amsterdam.
+It is centered horizontally and sets a maximum width of 90 rems (usually 1.440 pixels).
+With a Menu, that becomes 120 rems (1.920 pixels).

package/src/components/page/page.scss

@@ -10,3 +10,36 @@
   min-block-size: 100vh; /* Fallback for browsers that do not support dvh */
   min-block-size: 100dvh;
 }
+
+.ams-page--with-menu {
+  display: grid;
+  grid-auto-rows: min-content auto 1fr auto;
+  grid-template-areas:
+    "skip-link skip-link"
+    "menu header"
+    "menu body"
+    "menu footer";
+  grid-template-columns: auto 1fr;
+  max-inline-size: var(--ams-page-with-menu-max-inline-size);
+
+  > .ams-page__area--skip-link {
+    grid-area: skip-link;
+    margin-inline-end: var(--ams-page-with-menu-area-skip-link-margin-inline-end);
+  }
+
+  > .ams-page__area--menu {
+    grid-area: menu;
+  }
+
+  > .ams-page__area--header {
+    grid-area: header;
+  }
+
+  > .ams-page__area--body {
+    grid-area: body;
+  }
+
+  > .ams-page__area--footer {
+    grid-area: footer;
+  }
+}

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

@@ -10,10 +10,11 @@ Includes the name of the application if it is not the general website.
 - 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 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.
+  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.
 - 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.
 - 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.

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);
 }
 
@@ -128,7 +138,8 @@
 }
 
 .ams-page-header__menu-link {
-  display: inline-block;
+  display: inline-flex;
+  gap: var(--ams-page-header-menu-link-gap);
   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);
@@ -181,45 +192,41 @@
 .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;
 }
 
-.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;
+.ams-page-header__menu-icon-top,
+.ams-page-header__menu-icon-middle,
+.ams-page-header__menu-icon-bottom {
+  transform-origin: center;
+  transition:
+    opacity 0.1s ease-in-out,
+    rotate 0.2s ease-in-out,
+    translate 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;
+  @media (prefers-reduced-motion) {
+    transition: none;
   }
 }
 
 .ams-page-header__menu-icon--open {
   .ams-page-header__menu-icon-top {
     rotate: 45deg;
-    translate: 0;
+    translate: -4px 4px;
   }
+
   .ams-page-header__menu-icon-middle {
     opacity: 0%;
   }
+
   .ams-page-header__menu-icon-bottom {
     rotate: -45deg;
-    translate: 0;
+    translate: -4px -4px;
   }
 }
 

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;
 }