@amsterdam/design-system-css 0.9.0 → 0.11.0

package/src/components/index.scss

@@ -4,6 +4,8 @@
  */
 
 /* Append here */
+@import "./form-error-list/form-error-list";
+@import "./table-of-contents/table-of-contents";
 @import "./error-message/error-message";
 @import "./file-input/file-input";
 @import "./field/field";
@@ -12,7 +14,7 @@
 @import "./date-input/date-input";
 @import "./document/document";
 @import "./avatar/avatar";
-@import "./form-field-character-counter/form-field-character-counter";
+@import "./character-count/character-count";
 @import "./description-list/description-list";
 @import "./row/row";
 @import "./radio/radio";

package/src/components/link/README.md

@@ -30,7 +30,7 @@ We discourage using styles for visited links because they often make the page le
 The inline link does have a visited style.
 It is not part of navigation elements that are frequently scanned.
 
-## Relevant WCAG Requirements
+## Relevant WCAG requirements
 
 - [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum)
 - [WCAG 2.4.4](https://www.w3.org/TR/WCAG21/#link-purpose-in-context)

package/src/components/margin/README.md

@@ -2,4 +2,24 @@
 
 # Margin
 
-Use these utility classes to add white space below a single element.
+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.
+
+| Class name   | Preview                                                                                      |
+| ------------ | -------------------------------------------------------------------------------------------- |
+| `ams-mb--xs` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-xs);" /> |
+| `ams-mb--sm` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-sm);" /> |
+| `ams-mb--md` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-md);" /> |
+| `ams-mb--lg` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-lg);" /> |
+| `ams-mb--xl` | <div className="ams-docs-token-preview--space" style="inline-size: var(--ams-margin-xl);" /> |
+
+## 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.
+- 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

@@ -6,7 +6,9 @@
 @import "../../common/size";
 
 @each $size in map-keys($ams-sizes) {
-  .ams-mb--#{$size} {
-    margin-block-end: var(--ams-margin-#{$size}) !important;
+  @if $size != "no" {
+    .ams-mb--#{$size} {
+      margin-block-end: var(--ams-margin-#{$size}) !important;
+    }
   }
 }

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

@@ -11,7 +11,7 @@ Use this component for a name, title, or motto.
 - Only use this component once per page, typically only on the homepage.
 - Avoid using it if you need to display long pieces of text; the text should be short and precise.
 
-## Relevant WCAG Requirements
+## Relevant WCAG requirements
 
 The page heading component is a variant of a heading level 1 with a distinct style.
 When using this component, ensure that the heading hierarchy of the page remains logical.

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

@@ -13,8 +13,8 @@ A small set of links for use in the Header and Footer.
 - The ‘Menu’ button opens the Mega Menu.
 - On narrow screens, menu items other than ‘Search’ and ‘Menu’ move from the Page Menu to the Mega Menu.
 
-## Relevant WCAG Requirements
+## Relevant WCAG requirements
 
 - [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html)
 
-PageMenu is an interactive element, and the [general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.
+PageMenu is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply.

package/src/components/pagination/README.md

@@ -13,10 +13,10 @@ Pagination indicates the current page and allows users to navigate to other page
 - Place pagination below the overview list.
 - Pagination should not be displayed if there is only one page.
 - Redirect users to the first page if they enter a URL with a page number that doesn’t exist.
-- Pagination can be combined with a counter at the top of the page indicating “Page # of ##.”
+- Pagination can be combined with a count at the top of the page indicating “Page # of ##.”
 - Start a page with an overview list at the top after changing the page.
 - Make sure that the visible and accessible labels for the ‘previous’ and ‘next’ buttons convey the same meaning at all times – e.g. don’t update one and forget the other.
 
-## Relevant WCAG Rules
+## Relevant WCAG rules
 
-Pagination is an interactive element, and the [general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.
+Pagination is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply.

package/src/components/pagination/pagination.scss

@@ -37,7 +37,7 @@
 
   cursor: pointer;
   display: flex;
-  gap: 0.5rem;
+  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);

package/src/components/paragraph/README.md

@@ -11,7 +11,7 @@ Represents a paragraph of running text, form instructions, and other standalone
 - Consider whether a paragraph with more than 7 sentences or 140 words would be clearer if you divide the text into two paragraphs.
   Texts with not overly long paragraphs are easier to understand, and grouping makes information quicker to locate.
 
-## Relevant WCAG Rules
+## Relevant WCAG rules
 
 - [WCAG 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): Blocks that look like a paragraph are also recognized by a computer as a paragraph.
 - [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): The contrast of black text on a white background is high enough.

package/src/components/radio/radio.scss

@@ -41,7 +41,7 @@
   font-family: var(--ams-radio-font-family);
   font-size: var(--ams-radio-font-size);
   font-weight: var(--ams-radio-font-weight);
-  gap: 0.5rem;
+  gap: var(--ams-radio-gap);
   line-height: var(--ams-radio-line-height);
   outline-offset: var(--ams-radio-outline-offset);
 

package/src/components/row/README.md

@@ -1,3 +1,5 @@
 <!-- @license CC0-1.0 -->
 
 # Row
+
+Stacks its children horizontally with gaps between them and offers alignment options.

package/src/components/row/row.scss

@@ -8,10 +8,53 @@
 .ams-row {
   display: flex;
   flex-direction: row;
+  gap: var(--ams-row-gap-md);
 }
 
 @each $size, $label in $ams-sizes {
-  .ams-row--#{$label} {
-    gap: var(--ams-row-gap-#{$size});
+  @if $size != "md" {
+    .ams-row--gap-#{$label} {
+      gap: var(--ams-row-gap-#{$size});
+    }
   }
 }
+
+.ams-row--wrap {
+  flex-wrap: wrap;
+}
+
+.ams-row--align-around {
+  justify-content: space-around;
+}
+
+.ams-row--align-between {
+  justify-content: space-between;
+}
+
+.ams-row--align-center {
+  justify-content: center;
+}
+
+.ams-row--align-end {
+  justify-content: flex-end;
+}
+
+.ams-row--align-evenly {
+  justify-content: space-evenly;
+}
+
+.ams-row--align-vertical-baseline {
+  align-items: baseline;
+}
+
+.ams-row--align-vertical-center {
+  align-items: center;
+}
+
+.ams-row--align-vertical-end {
+  align-items: flex-end;
+}
+
+.ams-row--align-vertical-start {
+  align-items: flex-start;
+}

package/src/components/search-field/README.md

@@ -32,4 +32,4 @@ These features can be disruptive for a user searching for part of a word, and `a
 - [WCAG 1.3.5](https://www.w3.org/TR/WCAG22/#identify-input-purpose): It is clear both to the user and programmatically what the purpose of a form field is.
 - [WCAG 2.4.6](https://www.w3.org/TR/WCAG22/#headings-and-labels): There is a label describing the purpose of the input.
 
-Search Field is an interactive element; therefore, [the general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.
+Search Field is an interactive element; therefore, [the general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply.

package/src/components/spotlight/README.md

@@ -8,7 +8,7 @@ Emphasizes a section on a page through a distinctive background colour.
 
 Refer to [this overview on Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) to determine whether you can use black or white text on the background colour of your choice.
 
-## Relevant WCAG Requirements
+## Relevant WCAG requirements
 
 - [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
 

package/src/components/switch/README.md

@@ -12,11 +12,11 @@ A switch applies to a page or the entire system, such as an on/off switch.
 - Use labels with a switch to make the action clear.
 - The action takes place immediately when the user operates the switch.
 
-## Relevant WCAG Requirements
+## Relevant WCAG requirements
 
 - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): it is both clear for a user and programmatically what the purpose of a form field is.
 
-The Switch is an interactive element; general requirements and guidelines for interactive elements apply [here](/docs/docs-design-guidelines-interactive-elements--docs).
+Switch is an interactive element; general requirements and guidelines for interactivity apply [here](/docs/docs-developer-guide-interactivity--docs).
 
 ## References
 

package/src/components/table-of-contents/README.md

@@ -0,0 +1,6 @@
+<!-- @license CC0-1.0 -->
+
+# Table of Contents
+
+A list of links corresponding to the content sections on the page.
+It helps users to easily navigate to different sections on the same page.

package/src/components/table-of-contents/table-of-contents.scss

@@ -0,0 +1,50 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/text-rendering";
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  padding-inline: 0;
+}
+
+.ams-table-of-contents {
+  display: flex;
+  flex-direction: column;
+  font-family: var(--ams-table-of-contents-font-family);
+  font-size: var(--ams-table-of-contents-font-size);
+  font-weight: var(--ams-table-of-contents-font-weight);
+  gap: var(--ams-table-of-contents-gap);
+  line-height: var(--ams-table-of-contents-line-height);
+}
+
+.ams-table-of-contents__list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ams-table-of-contents-list-gap);
+  list-style: none;
+
+  @include text-rendering;
+  @include reset;
+
+  .ams-table-of-contents__list {
+    padding-block-start: var(--ams-table-of-contents-list-list-padding-block-start);
+    padding-inline-start: var(--ams-table-of-contents-list-list-padding-inline-start);
+  }
+}
+
+.ams-table-of-contents__link {
+  color: var(--ams-table-of-contents-link-color);
+  outline-offset: var(--ams-table-of-contents-link-outline-offset);
+  text-decoration-line: var(--ams-table-of-contents-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-table-of-contents-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-table-of-contents-link-text-underline-offset);
+
+  &:hover {
+    color: var(--ams-table-of-contents-link-hover-color);
+    text-decoration-line: var(--ams-table-of-contents-link-hover-text-decoration-line);
+  }
+}

package/src/components/tabs/README.md

@@ -4,7 +4,7 @@
 
 Tabs are used to bundle related content in a compact overview within a page. Each tab has a short name, and these names indicate the relationship between the information displayed in each tab.
 
-## How to Use
+## How to use
 
 - The content of each tab is viewable independently, not in the context of one another.
 - The content within each tab should have a similar structure.

package/src/components/tabs/tabs.scss

@@ -10,6 +10,11 @@
   border: 0;
 }
 
+.ams-tabs {
+  display: grid;
+  gap: var(--ams-tabs-gap);
+}
+
 .ams-tabs__list {
   background-color: var(--ams-tabs-list-background-color);
   border-block-end: var(--ams-tabs-list-border-block-end);

package/src/components/text-input/README.md

@@ -9,8 +9,8 @@ A form field in which a user can enter text.
 - Use a Text Input when users need to enter a single line of text, such as their name or phone number.
 - Do not use a Text Input when users could provide more than 1 sentence of text.
 - The width of the Text Input should be appropriate for the information to be entered.
-- A Text Input must have a label, and in most cases, this label should be visible.
+- A Text Input must have a Label, and in most cases, this label should be visible.
 - Use `spellcheck="false"` for fields that may contain sensitive information, such as passwords and personal data.
   Some browser extensions for spell-checking send this information to external servers.
 - Apply automatic assistance where possible.
-  For example, in logged-in systems, pre-filling input can prevent errors and save time.
+  For example, in logged-in systems, pre-filling known values can prevent errors and save time.

package/src/components/top-task-link/top-task-link.scss

@@ -10,7 +10,7 @@
   break-inside: avoid;
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--ams-top-task-link-gap);
   outline-offset: var(--ams-top-task-link-outline-offset);
   text-decoration: none;
 }

package/src/components/visually-hidden/README.md

@@ -4,5 +4,11 @@
 
 Hides content from sighted users but keeps it accessible to non-visual user agents, such as screen readers.
 
-Note: in most cases, visually available content should be accessible to non-visual user agents and vice versa.
-Elaborate instructions or guidance read only by non-visual user agents can do more harm than good.
+## Class name
+
+`ams-visually-hidden`
+
+## Guidelines
+
+- In most cases, visually available content should be accessible to non-visual user agents and vice versa.
+  Elaborate instructions or guidance read only by non-visual user agents can do more harm than good.

package/dist/form-field-character-counter/form-field-character-counter.css

@@ -1 +0,0 @@
-.ams-form-field-character-counter{color:var(--ams-form-field-character-counter-color);font-family:var(--ams-form-field-character-counter-font-family);font-size:var(--ams-form-field-character-counter-font-size);font-weight:var(--ams-form-field-character-counter-font-weight);line-height:var(--ams-form-field-character-counter-line-height);text-rendering:optimizeLegibility;-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}.ams-form-field-character-counter--error{color:var(--ams-form-field-character-counter-error-color)}/*# sourceMappingURL=form-field-character-counter.css.map */

package/dist/form-field-character-counter/form-field-character-counter.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/form-field-character-counter/form-field-character-counter.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAOA,kCACE,oDACA,gEACA,4DACA,gEACA,gECFA,kCACA,2BACA,8BACA,sBDIF,yCACE","file":"form-field-character-counter.css"}

package/src/components/form-field-character-counter/form-field-character-counter.scss

@@ -1,20 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-@import "../../common/text-rendering";
-
-.ams-form-field-character-counter {
-  color: var(--ams-form-field-character-counter-color);
-  font-family: var(--ams-form-field-character-counter-font-family);
-  font-size: var(--ams-form-field-character-counter-font-size);
-  font-weight: var(--ams-form-field-character-counter-font-weight);
-  line-height: var(--ams-form-field-character-counter-line-height);
-
-  @include text-rendering;
-}
-
-.ams-form-field-character-counter--error {
-  color: var(--ams-form-field-character-counter-error-color);
-}