Merge branch 'develop' of https://github.com/Amsterdam/design-system …

…into feature/DES-486-MegaMenu

packages/css/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2023-12-22)
+
+### ⚠ BREAKING CHANGES
+
+* Replace `fullWidth` prop on `Grid.Cell` with an `"all"` value on `span` (#963)
+* Rename ‘Highlight’ component to ‘Spotlight’ (#929)
+* Update line heights and text levels (#898)
+
+### Features
+
+* Add Header Component ([#807](https://github.com/Amsterdam/design-system/issues/807)) ([34abcd0](https://github.com/Amsterdam/design-system/commit/34abcd07a849fda94fd46bf995b540e20928c2bf))
+* Add Search Field component ([#892](https://github.com/Amsterdam/design-system/issues/892)) ([dd1a437](https://github.com/Amsterdam/design-system/commit/dd1a437d46c4ac7d43d64f7c1acadecc377e7928))
+* Add Skip link component ([#988](https://github.com/Amsterdam/design-system/issues/988)) ([82323b5](https://github.com/Amsterdam/design-system/commit/82323b594c7fba99819cf6873227ca3dcd084315))
+* Add text input component ([#912](https://github.com/Amsterdam/design-system/issues/912)) ([d4401cc](https://github.com/Amsterdam/design-system/commit/d4401ccf9d41d5c8a48ec32d63cdaabec549d5f2))
+* Introduce ‘Mark’ component ([#933](https://github.com/Amsterdam/design-system/issues/933)) ([d399454](https://github.com/Amsterdam/design-system/commit/d399454ed729a595cab902c83e54d61e3c2aaf71))
+* Introduce ‘Overlap’ component for hero image with search field ([#932](https://github.com/Amsterdam/design-system/issues/932)) ([1b2e87d](https://github.com/Amsterdam/design-system/commit/1b2e87db032d1500e301c2027596a5c908d59c8c))
+* Rename ‘Highlight’ component to ‘Spotlight’ ([#929](https://github.com/Amsterdam/design-system/issues/929)) ([9993d8d](https://github.com/Amsterdam/design-system/commit/9993d8dd4ff17ec5e686295d711cc7688f7ce28c))
+* Replace `fullWidth` prop on `Grid.Cell` with an `"all"` value on `span` ([#963](https://github.com/Amsterdam/design-system/issues/963)) ([b6a8b34](https://github.com/Amsterdam/design-system/commit/b6a8b3450af823f5c033f290783f013e6f20b205))
+* Update line heights and text levels ([#898](https://github.com/Amsterdam/design-system/issues/898)) ([82356bb](https://github.com/Amsterdam/design-system/commit/82356bbf11c389c0f29146ca5f715d5b7459a634))
+
+### Bug Fixes
+
+* Adjust size of breadcrumb separator and allow natural text wrapping ([#913](https://github.com/Amsterdam/design-system/issues/913)) ([caba940](https://github.com/Amsterdam/design-system/commit/caba94024c5aedf9092a5afbbf625d921fd124b5))
+* Improve examples and documentation for cards ([#936](https://github.com/Amsterdam/design-system/issues/936)) ([0f91370](https://github.com/Amsterdam/design-system/commit/0f913702de12cb7b9ca50e8f9da4899c3d934320))
+* Merge grid cell files into grid files and directories ([#815](https://github.com/Amsterdam/design-system/issues/815)) ([f4b4ec5](https://github.com/Amsterdam/design-system/commit/f4b4ec5de92d283ee2ef083075297a64b3dfd1cb))
+* Resolve malformed outline and remove excessive whitespace on dialog ([#937](https://github.com/Amsterdam/design-system/issues/937)) ([1fc264a](https://github.com/Amsterdam/design-system/commit/1fc264ac577edaa92e37d4c7e81427dd75b6dbe7))
+* Use rems for checkbox underline ([#944](https://github.com/Amsterdam/design-system/issues/944)) ([8622326](https://github.com/Amsterdam/design-system/commit/8622326b8686856c44ad03856bac886ee4e5632b))
+
 ## [0.2.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2023-12-01)
 
 ### ⚠ BREAKING CHANGES

packages/css/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "Community for NL Design System",
   "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",

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

@@ -7,8 +7,13 @@ Toont een afbeelding.
 - Vergeet niet om een beschrijving van de afbeelding op te nemen in het `alt`-attribuut.
   Dit zorgt ervoor dat gebruikers van schermlezers deze informatie ook tot zich kunnen nemen.
   Daarnaast kan het helpen bij zoekmachineoptimalisatie.
-- Alleen voor decoratieve afbeeldingen is zo’n beschrijving niet nodig. Gebruik in dit geval `alt=""`.
+  Alleen voor decoratieve afbeeldingen is zo’n beschrijving niet nodig. Gebruik in dit geval `alt=""`.
   Denk aan afbeeldingen die weinig toevoegen aan de nabije tekst of afbeeldingen die louter bijdragen aan het ontwerp of de sfeer van de pagina (bron: [W3C Web Accessibility Initiative](https://www.w3.org/WAI/tutorials/images/decorative/)).
+- Specificeer eventueel meerdere kandidaten voor de afbeelding via het `srcSet`-attribuut.
+  Bijvoorbeeld een kleine, middelgrote en grote variant voor de diverse schermformaten.
+  Zo voorkom je het onnodige downloaden van grote bestanden.
+  Doe dit vooral voor de hoofdafbeelding van een pagina,
+  daar is het verschil tussen de formaten op een smal en breed scherm het grootst.
 - Zorg ervoor dat de afbeelding een beeldverhouding heeft die ondersteund wordt door het [Aspect Ratio](?path=/docs/layout-aspect-ratio--docs) component.
 
 ## Relevante WCAG-eisen

packages/css/src/components/image/image.scss

@@ -8,6 +8,10 @@
   height: auto; /* [1] */
   max-width: 100%; /* [1] */
   vertical-align: middle; /* [2] */
+
+  &--cover {
+    object-fit: cover;
+  }
 }
 
 // [1] Allow for fluid image sizing while maintaining aspect ratio governed by width/height attributes

packages/css/src/components/index.scss

@@ -5,6 +5,8 @@
 
 /* Append here */
 @import "./mega-menu/mega-menu";
+@import "./skip-link/skip-link";
+@import "./overlap/overlap";
 @import "./header/header";
 @import "./mark/mark";
 @import "./text-input/text-input";

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

@@ -0,0 +1,3 @@
+# Overlap
+
+Toont twee of meer componenten over elkaar heen.

packages/css/src/components/overlap/overlap.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-overlap {
+  display: grid;
+
+  > * {
+    grid-area: 1 / -1;
+  }
+}

packages/css/src/components/skip-link/README.md

@@ -0,0 +1,33 @@
+# Skip Link
+
+Gebruik een Skip Link om makkelijk met het toetsenbord naar de belangrijkste inhoud te navigeren.
+Met een Skip Link kun je terugkerende navigatieblokken (zoals het hoofdmenu of het kruimelpad) overslaan.
+
+De Skip Link staat boven de header.
+De link is verborgen totdat deze met de tab-toets geactiveerd wordt.
+Als de link getoond wordt, duwt deze de hele pagina omlaag.
+
+## Richtlijnen
+
+### Zo gebruiken
+
+- Plaats de Skip Link als eerste element in `<body>`, tenzij je een cookie-banner hebt.
+  Plaats de Skip Link dan direct na de cookie-banner.
+- Gebruik de Skip Link om naar de belangrijkste inhoud te navigeren.
+  Op een artikelpagina is dat bijvoorbeeld de titel van het artikel, op een zoekpagina is dat het zoekveld.
+- Voor complexe pagina's met meerdere secties kun je meer dan 1 Skip Link gebruiken.
+  In de meeste gevallen is dit niet nodig.
+
+### Dit vermijden
+
+- Skip Links zijn niet nodig op een simpele pagina waar alleen tekst staat en weinig navigatie.
+  Het doel van een Skip Link is om terugkerende navigatieblokken over te slaan.
+  Als die blokken er niet zijn, is een Skip Link niet nodig.
+- Plaats de Skip Link niet in een `nav` regio, of in de Header.
+
+## Relevante WCAG eisen
+
+- Voor dit component gelden dezelfde WCAG eisen als voor [het link component](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs).
+- [WCAG 2.4.1](https://www.w3.org/TR/WCAG22/#bypass-blocks): gebruik een Skip Link op elke pagina die begint met een terugkerend navigatieblok.
+- [WCAG 3.2.3](https://www.w3.org/TR/WCAG22/#consistent-navigation): een Skip Link staat op elke pagina op dezelfde plek.
+- [WCAG 3.2.4](https://www.w3.org/TR/WCAG22/#consistent-identification): een Skip Link heeft dezelfde labels op alle pagina's. Bijvoorbeeld niet: "Navigatie overslaan" op een gedeelte van de site, en "Naar de inhoud" op andere pagina's.

packages/css/src/components/skip-link/skip-link.scss

@@ -0,0 +1,28 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-skip-link {
+  background-color: var(--amsterdam-skip-link-background-color);
+  color: var(--amsterdam-skip-link-color);
+  display: block;
+  font-family: var(--amsterdam-skip-link-font-family);
+  font-size: var(--amsterdam-skip-link-font-size);
+  font-weight: var(--amsterdam-skip-link-font-weight);
+  line-height: var(--amsterdam-skip-link-line-height);
+  outline-offset: var(--amsterdam-skip-link-outline-offset);
+  padding-block: 0.5rem;
+  padding-inline: 1rem;
+  text-align: center;
+  text-decoration: none;
+
+  &:hover {
+    background-color: var(--amsterdam-skip-link-hover-background-color);
+  }
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-skip-link-compact-font-size);
+    line-height: var(--amsterdam-skip-link-compact-line-height);
+  }
+}

packages/react/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2023-12-22)
+
+### ⚠ BREAKING CHANGES
+
+* Replace `fullWidth` prop on `Grid.Cell` with an `"all"` value on `span` (#963)
+* Rename ‘Highlight’ component to ‘Spotlight’ (#929)
+* Update line heights and text levels (#898)
+
+### Features
+
+* Add Header Component ([#807](https://github.com/Amsterdam/design-system/issues/807)) ([34abcd0](https://github.com/Amsterdam/design-system/commit/34abcd07a849fda94fd46bf995b540e20928c2bf))
+* Add Search Field component ([#892](https://github.com/Amsterdam/design-system/issues/892)) ([dd1a437](https://github.com/Amsterdam/design-system/commit/dd1a437d46c4ac7d43d64f7c1acadecc377e7928))
+* Add Skip link component ([#988](https://github.com/Amsterdam/design-system/issues/988)) ([82323b5](https://github.com/Amsterdam/design-system/commit/82323b594c7fba99819cf6873227ca3dcd084315))
+* Add text input component ([#912](https://github.com/Amsterdam/design-system/issues/912)) ([d4401cc](https://github.com/Amsterdam/design-system/commit/d4401ccf9d41d5c8a48ec32d63cdaabec549d5f2))
+* Allow ‘Grid Cell’ to render a custom HTML element ([#968](https://github.com/Amsterdam/design-system/issues/968)) ([1b9cda7](https://github.com/Amsterdam/design-system/commit/1b9cda7ce57abd45166f48c18c919769bff033fe))
+* Introduce ‘Mark’ component ([#933](https://github.com/Amsterdam/design-system/issues/933)) ([d399454](https://github.com/Amsterdam/design-system/commit/d399454ed729a595cab902c83e54d61e3c2aaf71))
+* Introduce ‘Overlap’ component for hero image with search field ([#932](https://github.com/Amsterdam/design-system/issues/932)) ([1b2e87d](https://github.com/Amsterdam/design-system/commit/1b2e87db032d1500e301c2027596a5c908d59c8c))
+* Rename ‘Highlight’ component to ‘Spotlight’ ([#929](https://github.com/Amsterdam/design-system/issues/929)) ([9993d8d](https://github.com/Amsterdam/design-system/commit/9993d8dd4ff17ec5e686295d711cc7688f7ce28c))
+* Replace `fullWidth` prop on `Grid.Cell` with an `"all"` value on `span` ([#963](https://github.com/Amsterdam/design-system/issues/963)) ([b6a8b34](https://github.com/Amsterdam/design-system/commit/b6a8b3450af823f5c033f290783f013e6f20b205))
+* Update line heights and text levels ([#898](https://github.com/Amsterdam/design-system/issues/898)) ([82356bb](https://github.com/Amsterdam/design-system/commit/82356bbf11c389c0f29146ca5f715d5b7459a634))
+
+### Bug Fixes
+
+* Clean up redundant subcomponent types ([#894](https://github.com/Amsterdam/design-system/issues/894)) ([0c4bbc1](https://github.com/Amsterdam/design-system/commit/0c4bbc1404f66d3d70441812de9949b77060a951))
+* Merge grid cell files into grid files and directories ([#815](https://github.com/Amsterdam/design-system/issues/815)) ([f4b4ec5](https://github.com/Amsterdam/design-system/commit/f4b4ec5de92d283ee2ef083075297a64b3dfd1cb))
+* Remove unused prop type in TextInput ([#990](https://github.com/Amsterdam/design-system/issues/990)) ([f150e16](https://github.com/Amsterdam/design-system/commit/f150e16c1953791ec7c6d6891e2cd5cb43c26ffa))
+
 ## [0.2.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2023-12-01)
 
 ### ⚠ BREAKING CHANGES

packages/react/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.2.0",
+  "version": "0.3.0",
   "author": "Community for NL Design System",
   "description": "React component library bundle for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",

packages/react/src/Image/Image.tsx

@@ -4,12 +4,16 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, ImgHTMLAttributes } from 'react'
+import { type ForwardedRef, forwardRef, type ImgHTMLAttributes } from 'react'
 
-export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {}
+export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  cover?: Boolean
+}
 
-export const Image = forwardRef(({ className, ...restProps }: ImageProps, ref: ForwardedRef<HTMLImageElement>) => (
-  <img {...restProps} ref={ref} className={clsx('amsterdam-image', className)} />
-))
+export const Image = forwardRef(
+  ({ className, cover = false, ...restProps }: ImageProps, ref: ForwardedRef<HTMLImageElement>) => (
+    <img {...restProps} ref={ref} className={clsx('amsterdam-image', cover && 'amsterdam-image--cover', className)} />
+  ),
+)
 
 Image.displayName = 'Image'

packages/react/src/Image/index.ts

@@ -1,2 +1 @@
-export { Image } from './Image'
-export type { ImageProps } from './Image'
+export { Image, type ImageProps } from './Image'

packages/react/src/Overlap/Overlap.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { Overlap } from './Overlap'
+import '@testing-library/jest-dom'
+
+describe('Overlap', () => {
+  it('renders', () => {
+    const { container } = render(<Overlap />)
+    const component = container.querySelector(':only-child')
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<Overlap />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-overlap')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<Overlap className="extra" />)
+    const component = container.querySelector(':only-child')
+    expect(component).toHaveClass('amsterdam-overlap extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLImageElement>()
+    const { container } = render(<Overlap ref={ref} />)
+    const component = container.querySelector(':only-child')
+    expect(ref.current).toBe(component)
+  })
+
+  it('renders children', () => {
+    render(
+      <Overlap>
+        <p>Test Child</p>
+      </Overlap>,
+    )
+    const testChild = screen.getByText('Test Child')
+    expect(testChild).toBeTruthy()
+  })
+})

packages/react/src/Overlap/Overlap.tsx

@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { type ForwardedRef, forwardRef, type HTMLAttributes, type PropsWithChildren } from 'react'
+
+export const Overlap = forwardRef(
+  (
+    { children, className, ...restProps }: PropsWithChildren<HTMLAttributes<HTMLDivElement>>,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => (
+    <div {...restProps} ref={ref} className={clsx('amsterdam-overlap', className)}>
+      {children}
+    </div>
+  ),
+)
+
+Overlap.displayName = 'Overlap'

packages/react/src/Overlap/README.md

@@ -0,0 +1,3 @@
+# React Overlap component
+
+[Overlap documentation](../../../css/src/overlap/README.md)

packages/react/src/Overlap/index.ts

@@ -0,0 +1 @@
+export { Overlap } from './Overlap'

packages/react/src/SkipLink/README.md

@@ -0,0 +1,3 @@
+# React Skip Link component
+
+[Skip Link documentation](../../../css/src/skip-link/README.md)

packages/react/src/SkipLink/SkipLink.test.tsx

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { SkipLink } from './SkipLink'
+import '@testing-library/jest-dom'
+
+describe('Skip Link', () => {
+  it('renders', () => {
+    render(<SkipLink href="/" />)
+
+    const component = screen.getByRole('link')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    render(<SkipLink href="/" />)
+
+    const component = screen.getByRole('link')
+
+    expect(component).toHaveClass('amsterdam-skip-link')
+  })
+
+  it('renders an additional class name', () => {
+    render(<SkipLink href="/" className="extra" />)
+
+    const component = screen.getByRole('link')
+
+    expect(component).toHaveClass('amsterdam-skip-link extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLAnchorElement>()
+
+    render(<SkipLink href="/" ref={ref} />)
+
+    const component = screen.getByRole('link')
+
+    expect(ref.current).toBe(component)
+  })
+})

packages/react/src/SkipLink/SkipLink.tsx

@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { AnchorHTMLAttributes, ForwardedRef, PropsWithChildren } from 'react'
+
+export interface SkipLinkProps extends PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>> {}
+
+export const SkipLink = forwardRef(
+  ({ children, className, ...restProps }: SkipLinkProps, ref: ForwardedRef<HTMLAnchorElement>) => (
+    <a {...restProps} ref={ref} className={clsx('amsterdam-skip-link', 'amsterdam-visually-hidden', className)}>
+      {children}
+    </a>
+  ),
+)
+
+SkipLink.displayName = 'SkipLink'

packages/react/src/SkipLink/index.ts

@@ -0,0 +1,2 @@
+export { SkipLink } from './SkipLink'
+export type { SkipLinkProps } from './SkipLink'

packages/react/src/index.ts

@@ -5,6 +5,8 @@
 
 /* Append here */
 export * from './MegaMenu'
+export * from './SkipLink'
+export * from './Overlap'
 export * from './Header'
 export * from './Mark'
 export * from './TextInput'

plop-templates/react.test.tsx.hbs

@@ -26,9 +26,7 @@ describe('{{sentenceCase name}}', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('extra')
-
-    expect(component).toHaveClass('amsterdam-{{kebabCase name}}')
+    expect(component).toHaveClass('amsterdam-{{kebabCase name}} extra')
   })
 
   it('supports ForwardRef in React', () => {

plop-templates/react.tsx.hbs

@@ -4,7 +4,8 @@
  */
 
 import clsx from 'clsx'
-import { ForwardedRef, forwardRef, HTMLAttributes, PropsWithChildren } from 'react'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 
 export interface {{pascalCase name}}Props extends PropsWithChildren<HTMLAttributes<HTMLElement>> {}