Merge branch 'develop' into feature/DES-648-px-to-rem

packages/css/src/components/badge/badge.scss

@@ -12,16 +12,16 @@
   padding-inline: var(--ams-badge-padding-inline);
 }
 
+.ams-badge--black {
+  background-color: var(--ams-badge-black-background-color);
+  color: var(--ams-badge-black-color);
+}
+
 .ams-badge--blue {
   background-color: var(--ams-badge-blue-background-color);
   color: var(--ams-badge-blue-color);
 }
 
-.ams-badge--dark-blue {
-  background-color: var(--ams-badge-dark-blue-background-color);
-  color: var(--ams-badge-dark-blue-color);
-}
-
 .ams-badge--dark-green {
   background-color: var(--ams-badge-dark-green-background-color);
   color: var(--ams-badge-dark-green-color);
@@ -32,6 +32,26 @@
   color: var(--ams-badge-green-color);
 }
 
+.ams-badge--grey-1 {
+  background-color: var(--ams-badge-grey-1-background-color);
+  color: var(--ams-badge-grey-1-color);
+}
+
+.ams-badge--grey-2 {
+  background-color: var(--ams-badge-grey-2-background-color);
+  color: var(--ams-badge-grey-2-color);
+}
+
+.ams-badge--grey-3 {
+  background-color: var(--ams-badge-grey-3-background-color);
+  color: var(--ams-badge-grey-3-color);
+}
+
+.ams-badge--light-blue {
+  background-color: var(--ams-badge-light-blue-background-color);
+  color: var(--ams-badge-light-blue-color);
+}
+
 .ams-badge--magenta {
   background-color: var(--ams-badge-magenta-background-color);
   color: var(--ams-badge-magenta-color);
@@ -47,6 +67,16 @@
   color: var(--ams-badge-purple-color);
 }
 
+.ams-badge--red {
+  background-color: var(--ams-badge-red-background-color);
+  color: var(--ams-badge-red-color);
+}
+
+.ams-badge--white {
+  background-color: var(--ams-badge-white-background-color);
+  color: var(--ams-badge-white-color);
+}
+
 .ams-badge--yellow {
   background-color: var(--ams-badge-yellow-background-color);
   color: var(--ams-badge-yellow-color);

packages/css/src/components/field-set/README.md

@@ -0,0 +1,17 @@
+<!-- @license CC0-1.0 -->
+
+# Field Set
+
+A component to group related form inputs.
+
+## Guidelines
+
+- Use Field Set when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single Field Set when asking for an address.
+
+## Relevant WCAG Requirements
+
+- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html): Field Set labels the purpose of a group of inputs.
+
+## References
+
+- [Providing a description for groups of form controls using fieldset and legend elements](https://www.w3.org/WAI/WCAG22/Techniques/html/H71)

packages/css/src/components/field-set/field-set.scss

@@ -0,0 +1,48 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/hyphenation";
+@import "../../common/text-rendering";
+
+@mixin reset {
+  border: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.ams-field-set {
+  break-inside: avoid;
+
+  @include reset;
+}
+
+.ams-field-set--invalid {
+  border-inline-start: var(--ams-field-set-invalid-border-inline-start);
+  padding-inline-start: var(--ams-field-set-invalid-padding-inline-start);
+}
+
+@mixin reset-legend {
+  float: left; // [1]
+  padding-inline: 0;
+  width: 100%; // [1]
+}
+
+// [1] This combination allows the fieldset border to go around the legend, instead of through it.
+
+.ams-field-set__legend {
+  color: var(--ams-field-set-legend-color);
+  font-family: var(--ams-field-set-legend-font-family);
+  font-size: var(--ams-field-set-legend-font-size);
+  font-weight: var(--ams-field-set-legend-font-weight);
+  line-height: var(--ams-field-set-legend-line-height);
+  margin-block-end: var(
+    --ams-field-set-legend-margin-block-end
+  ); /* Because of a bug in Chrome we can’t use display grid or flex for this gap */
+
+  @include hyphenation;
+  @include text-rendering;
+  @include reset-legend;
+}

packages/css/src/components/field/README.md

@@ -6,4 +6,4 @@ Wraps a single input and its related elements. May indicate that the input has a
 
 ## Guidelines
 
-Only use Field to wrap a single input. Use [Fieldset](/docs/components-forms-fieldset--docs) to wrap multiple inputs.
+Only use Field to wrap a single input. Use [Field Set](/docs/components-forms-field-set--docs) to wrap multiple inputs.

packages/css/src/components/file-input/README.md

@@ -0,0 +1,9 @@
+<!-- @license CC0-1.0 -->
+
+# File Input
+
+Allows the user to upload one or more files from their device.
+
+## Visual considerations
+
+The filename label and button are displayed in the language of the browser and can vary between browsers and operating systems.

packages/css/src/components/file-input/file-input.scss

@@ -0,0 +1,68 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/text-rendering";
+
+@mixin reset-button {
+  border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
+  box-sizing: border-box;
+}
+
+.ams-file-input {
+  background-color: var(--ams-file-input-background-color);
+  border: var(--ams-file-input-border);
+  color: var(--ams-file-input-color);
+  cursor: var(--ams-file-input-cursor);
+  font-family: var(--ams-file-input-font-family);
+  font-size: var(--ams-file-input-font-size);
+  font-weight: var(--ams-file-input-font-weight);
+  line-height: var(--ams-file-input-line-height);
+  max-inline-size: calc(100% - var(--ams-file-input-padding-inline) * 2);
+  outline-offset: 0.25rem; // Double the default focus outline offset to compensate for the dashed border
+  padding-block: var(--ams-file-input-padding-block);
+  padding-inline: var(--ams-file-input-padding-inline);
+  touch-action: manipulation;
+
+  @include text-rendering;
+}
+
+.ams-file-input:disabled {
+  color: var(--ams-file-input-disabled-color);
+  cursor: var(--ams-file-input-disabled-cursor);
+}
+
+.ams-file-input::file-selector-button {
+  appearance: none; // Reset default appearance on iOS devices
+  background-color: var(--ams-file-input-file-selector-button-background-color);
+  box-shadow: var(--ams-file-input-file-selector-button-box-shadow);
+  color: var(--ams-file-input-file-selector-button-color);
+  cursor: var(--ams-file-input-file-selector-button-cursor);
+  font-family: inherit;
+  font-size: inherit; // iOS specific fix
+  font-weight: inherit;
+  margin-inline-end: var(--ams-file-input-file-selector-button-margin-inline-end);
+  padding-block: var(--ams-file-input-file-selector-button-padding-block);
+  padding-inline: var(--ams-file-input-file-selector-button-padding-inline);
+
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    border: var(
+      --ams-file-input-file-selector-button-forced-color-mode-border
+    ); // add border because forced colors changes box-shadow to none
+  }
+
+  @include reset-button;
+}
+
+.ams-file-input:disabled::file-selector-button {
+  box-shadow: var(--ams-file-input-file-selector-button-disabled-box-shadow);
+  color: var(--ams-file-input-disabled-color);
+  cursor: var(--ams-file-input-file-selector-button-disabled-cursor);
+}
+
+.ams-file-input:not(:disabled):hover::file-selector-button {
+  box-shadow: var(--ams-file-input-file-selector-button-hover-box-shadow);
+  color: var(--ams-file-input-file-selector-button-hover-color);
+}

packages/css/src/components/index.scss

@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./file-input/file-input";
 @import "./field/field";
 @import "./select/select";
 @import "./time-input/time-input";
@@ -19,7 +20,7 @@
 @import "./column/column";
 @import "./margin/margin";
 @import "./gap/gap";
-@import "./fieldset/fieldset";
+@import "./field-set/field-set";
 @import "./link-list/link-list";
 @import "./badge/badge";
 @import "./table/table";

packages/css/src/components/search-field/search-field.scss

@@ -48,6 +48,7 @@
 
 .ams-search-field__input::placeholder {
   color: var(--ams-search-field-input-placeholder-color);
+  opacity: 100%; // This resets the lower opacity set by Firefox
 }
 
 .ams-search-field__input::-webkit-search-cancel-button {

packages/css/src/components/text-area/text-area.scss

@@ -37,6 +37,7 @@
 
 .ams-text-area::placeholder {
   color: var(--ams-text-area-placeholder-color);
+  opacity: 100%; // This resets the lower opacity set by Firefox
 }
 
 .ams-text-area:disabled {

packages/css/src/components/text-input/text-input.scss

@@ -35,6 +35,7 @@
 
 .ams-text-input::placeholder {
   color: var(--ams-text-input-placeholder-color);
+  opacity: 100%; // This resets the lower opacity set by Firefox
 }
 
 .ams-text-input:disabled {

packages/react/src/Badge/Badge.tsx

@@ -8,13 +8,19 @@ import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes } from 'react'
 
 export const badgeColors = [
+  'black',
   'blue',
-  'dark-blue',
   'dark-green',
   'green',
+  'grey-1',
+  'grey-2',
+  'grey-3',
+  'light-blue',
   'magenta',
   'orange',
   'purple',
+  'red',
+  'white',
   'yellow',
 ] as const
 

packages/react/src/Fieldset/Fieldset.test.tsx → packages/react/src/FieldSet/FieldSet.test.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
-import { Fieldset } from './Fieldset'
+import { FieldSet } from './FieldSet'
 import '@testing-library/jest-dom'
 
-describe('Fieldset', () => {
+describe('FieldSet', () => {
   it('renders', () => {
-    render(<Fieldset legend="Test" />)
+    render(<FieldSet legend="Test" />)
 
     const component = screen.getByRole('group', { name: 'Test' })
 
@@ -14,33 +14,33 @@ describe('Fieldset', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    render(<Fieldset legend="Test" />)
+    render(<FieldSet legend="Test" />)
 
     const component = screen.getByRole('group', { name: 'Test' })
 
-    expect(component).toHaveClass('ams-fieldset')
+    expect(component).toHaveClass('ams-field-set')
   })
 
   it('renders an additional class name', () => {
-    render(<Fieldset legend="Test" className="extra" />)
+    render(<FieldSet legend="Test" className="extra" />)
 
     const component = screen.getByRole('group', { name: 'Test' })
 
-    expect(component).toHaveClass('ams-fieldset extra')
+    expect(component).toHaveClass('ams-field-set extra')
   })
 
   it('renders the correct legend class name', () => {
-    const { container } = render(<Fieldset legend="Test" />)
+    const { container } = render(<FieldSet legend="Test" />)
 
     const component = container.querySelector('legend')
 
-    expect(component).toHaveClass('ams-fieldset__legend')
+    expect(component).toHaveClass('ams-field-set__legend')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLFieldSetElement>()
 
-    render(<Fieldset legend="Test" ref={ref} />)
+    render(<FieldSet legend="Test" ref={ref} />)
 
     const component = screen.getByRole('group', { name: 'Test' })