From 0b619d4ddf70838e698f41b59dd0b5c7753a89d6 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Fri, 15 Mar 2024 15:32:25 +0100
Subject: [PATCH 01/20] Add DescriptionList component

---
 .../src/components/description-list/README.md |  3 ++
 .../description-list/description-list.scss    | 31 ++++++++++++++
 packages/css/src/components/index.scss        |  1 +
 .../DescriptionList/DescriptionList.test.tsx  | 41 +++++++++++++++++++
 .../src/DescriptionList/DescriptionList.tsx   | 33 +++++++++++++++
 .../DescriptionListDetails.tsx                | 20 +++++++++
 .../DescriptionList/DescriptionListTerm.tsx   | 20 +++++++++
 packages/react/src/DescriptionList/README.md  |  5 +++
 packages/react/src/DescriptionList/index.ts   |  4 ++
 packages/react/src/index.ts                   |  1 +
 .../ams/description-list.tokens.json          | 13 ++++++
 .../DescriptionList/DescriptionList.docs.mdx  | 11 +++++
 .../DescriptionList.stories.tsx               | 34 +++++++++++++++
 13 files changed, 217 insertions(+)
 create mode 100644 packages/css/src/components/description-list/README.md
 create mode 100644 packages/css/src/components/description-list/description-list.scss
 create mode 100644 packages/react/src/DescriptionList/DescriptionList.test.tsx
 create mode 100644 packages/react/src/DescriptionList/DescriptionList.tsx
 create mode 100644 packages/react/src/DescriptionList/DescriptionListDetails.tsx
 create mode 100644 packages/react/src/DescriptionList/DescriptionListTerm.tsx
 create mode 100644 packages/react/src/DescriptionList/README.md
 create mode 100644 packages/react/src/DescriptionList/index.ts
 create mode 100644 proprietary/tokens/src/components/ams/description-list.tokens.json
 create mode 100644 storybook/src/components/DescriptionList/DescriptionList.docs.mdx
 create mode 100644 storybook/src/components/DescriptionList/DescriptionList.stories.tsx

diff --git a/packages/css/src/components/description-list/README.md b/packages/css/src/components/description-list/README.md
new file mode 100644
index 0000000000..9a97117802
--- /dev/null
+++ b/packages/css/src/components/description-list/README.md
@@ -0,0 +1,3 @@
+<!-- @license CC0-1.0 -->
+
+# Description List
diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
new file mode 100644
index 0000000000..958fc716db
--- /dev/null
+++ b/packages/css/src/components/description-list/description-list.scss
@@ -0,0 +1,31 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+  list-style: none;
+  margin-block: 0;
+  margin-inline: 0;
+  padding-inline-start: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.ams-description-list {
+  color: var(--ams-unordered-list-color);
+  font-family: var(--ams-unordered-list-font-family);
+  font-size: var(--ams-unordered-list-font-size);
+  font-weight: var(--ams-unordered-list-font-weight);
+  line-height: var(--ams-unordered-list-line-height);
+  list-style-type: var(--ams-unordered-list-list-style-type);
+}
+
+.ams-description-list__term {
+  @include reset;
+}
+
+.ams-description-list__details {
+  font-weight: 700;
+  @include reset;
+}
diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss
index 348b39865f..2249e4ffba 100644
--- a/packages/css/src/components/index.scss
+++ b/packages/css/src/components/index.scss
@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@import "./description-list/description-list";
 @import "./row/row";
 @import "./radio/radio";
 @import "./tabs/tabs";
diff --git a/packages/react/src/DescriptionList/DescriptionList.test.tsx b/packages/react/src/DescriptionList/DescriptionList.test.tsx
new file mode 100644
index 0000000000..9bbda4eaa8
--- /dev/null
+++ b/packages/react/src/DescriptionList/DescriptionList.test.tsx
@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { DescriptionList } from './DescriptionList'
+import '@testing-library/jest-dom'
+
+describe('Description list', () => {
+  it('renders', () => {
+    const { container } = render(<DescriptionList />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<DescriptionList />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-description-list')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<DescriptionList className="extra" />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-description-list extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLElement>()
+
+    const { container } = render(<DescriptionList ref={ref} />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})
diff --git a/packages/react/src/DescriptionList/DescriptionList.tsx b/packages/react/src/DescriptionList/DescriptionList.tsx
new file mode 100644
index 0000000000..e3979a1bac
--- /dev/null
+++ b/packages/react/src/DescriptionList/DescriptionList.tsx
@@ -0,0 +1,33 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
+import { DescriptionListDetails } from './DescriptionListDetails'
+import { DescriptionListTerm } from './DescriptionListTerm'
+
+export type DescriptionListProps = PropsWithChildren<HTMLAttributes<HTMLDListElement>>
+
+type DescriptionListComponent = {
+  Term: typeof DescriptionListTerm
+  Details: typeof DescriptionListDetails
+} & ForwardRefExoticComponent<DescriptionListProps & RefAttributes<HTMLDListElement>>
+
+export const DescriptionList = forwardRef(
+  ({ children, className, ...restProps }: DescriptionListProps, ref: ForwardedRef<HTMLDListElement>) => (
+    <dl {...restProps} ref={ref} className={clsx('ams-description-list', className)}>
+      {children}
+    </dl>
+  ),
+) as DescriptionListComponent
+
+DescriptionList.displayName = 'DescriptionList'
+
+DescriptionList.Term = DescriptionListTerm
+DescriptionList.Term.displayName = 'DescriptionList.Term'
+
+DescriptionList.Details = DescriptionListDetails
+DescriptionList.Details.displayName = 'DescriptionList.Details'
diff --git a/packages/react/src/DescriptionList/DescriptionListDetails.tsx b/packages/react/src/DescriptionList/DescriptionListDetails.tsx
new file mode 100644
index 0000000000..79a800891a
--- /dev/null
+++ b/packages/react/src/DescriptionList/DescriptionListDetails.tsx
@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+
+export type DescriptionListDetailsProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
+
+export const DescriptionListDetails = forwardRef(
+  ({ children, className, ...restProps }: DescriptionListDetailsProps, ref: ForwardedRef<HTMLElement>) => (
+    <dd {...restProps} ref={ref} className={clsx('ams-description-list__details', className)}>
+      {children}
+    </dd>
+  ),
+)
+
+DescriptionListDetails.displayName = 'DescriptionList.Details'
diff --git a/packages/react/src/DescriptionList/DescriptionListTerm.tsx b/packages/react/src/DescriptionList/DescriptionListTerm.tsx
new file mode 100644
index 0000000000..0326783e25
--- /dev/null
+++ b/packages/react/src/DescriptionList/DescriptionListTerm.tsx
@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+
+export type DescriptionListTermProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
+
+export const DescriptionListTerm = forwardRef(
+  ({ children, className, ...restProps }: DescriptionListTermProps, ref: ForwardedRef<HTMLElement>) => (
+    <dt {...restProps} ref={ref} className={clsx('ams-description-list__term', className)}>
+      {children}
+    </dt>
+  ),
+)
+
+DescriptionListTerm.displayName = 'DescriptionList.Term'
diff --git a/packages/react/src/DescriptionList/README.md b/packages/react/src/DescriptionList/README.md
new file mode 100644
index 0000000000..f88e8f6f60
--- /dev/null
+++ b/packages/react/src/DescriptionList/README.md
@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# React Description List component
+
+[Description List documentation](../../../css/src/components/description-list/README.md)
diff --git a/packages/react/src/DescriptionList/index.ts b/packages/react/src/DescriptionList/index.ts
new file mode 100644
index 0000000000..fa57776c93
--- /dev/null
+++ b/packages/react/src/DescriptionList/index.ts
@@ -0,0 +1,4 @@
+export { DescriptionList } from './DescriptionList'
+export type { DescriptionListProps } from './DescriptionList'
+export type { DescriptionListTermProps } from './DescriptionListTerm'
+export type { DescriptionListDetailsProps } from './DescriptionListDetails'
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index a4c2b4c65c..42fb1dbb6b 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+export * from './DescriptionList'
 export * from './Row'
 export * from './Radio'
 export * from './Tabs'
diff --git a/proprietary/tokens/src/components/ams/description-list.tokens.json b/proprietary/tokens/src/components/ams/description-list.tokens.json
new file mode 100644
index 0000000000..3839674635
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/description-list.tokens.json
@@ -0,0 +1,13 @@
+{
+  "ams": {
+    "description-list": {
+      "color": { "value": "{ams.color.primary-black}" },
+      "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
+      "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "gap": { "value": "0.75rem" },
+      "inverse-color": { "value": "{ams.color.primary-white}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" }
+    }
+  }
+}
diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
new file mode 100644
index 0000000000..bc2bb3ab0b
--- /dev/null
+++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
@@ -0,0 +1,11 @@
+import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import * as DescriptionListStories from "./DescriptionList.stories.tsx";
+import README from "../../../../packages/css/src/components/description-list/README.md?raw";
+
+<Meta of={DescriptionListStories} />
+
+<Markdown>{README}</Markdown>
+
+<Primary />
+
+<Controls />
diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
new file mode 100644
index 0000000000..e1a2d91aa0
--- /dev/null
+++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -0,0 +1,34 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import { DescriptionList } from '@amsterdam/design-system-react'
+import { Meta, StoryObj } from '@storybook/react'
+import { exampleParagraph } from '../shared/exampleContent'
+
+const paragraph1 = exampleParagraph()
+const paragraph2 = exampleParagraph()
+const paragraph3 = exampleParagraph()
+
+const meta = {
+  title: 'Components/Text/Description List',
+  component: DescriptionList,
+} satisfies Meta<typeof DescriptionList>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: [
+      <DescriptionList.Term key={1}>Eerste term</DescriptionList.Term>,
+      <DescriptionList.Details key={2}>{paragraph1}</DescriptionList.Details>,
+      <DescriptionList.Term key={3}>Tweede term</DescriptionList.Term>,
+      <DescriptionList.Details key={4}>{paragraph2}</DescriptionList.Details>,
+      <DescriptionList.Term key={5}>Derde term</DescriptionList.Term>,
+      <DescriptionList.Details key={6}>{paragraph3}</DescriptionList.Details>,
+    ],
+  },
+}

From dd59abe62ac37386a09481a5ec8470d6c636029b Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Thu, 21 Mar 2024 10:06:47 +0100
Subject: [PATCH 02/20] Not all dd values are paragraphs

---
 .../react/src/DescriptionList/DescriptionList.test.tsx |  2 +-
 .../DescriptionList/DescriptionList.stories.tsx        | 10 ++++------
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/DescriptionList/DescriptionList.test.tsx b/packages/react/src/DescriptionList/DescriptionList.test.tsx
index 9bbda4eaa8..dc4afd4d1a 100644
--- a/packages/react/src/DescriptionList/DescriptionList.test.tsx
+++ b/packages/react/src/DescriptionList/DescriptionList.test.tsx
@@ -30,7 +30,7 @@ describe('Description list', () => {
   })
 
   it('supports ForwardRef in React', () => {
-    const ref = createRef<HTMLElement>()
+    const ref = createRef<HTMLDListElement>()
 
     const { container } = render(<DescriptionList ref={ref} />)
 
diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
index e1a2d91aa0..9b6e535eb9 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
+++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -7,9 +7,7 @@ import { DescriptionList } from '@amsterdam/design-system-react'
 import { Meta, StoryObj } from '@storybook/react'
 import { exampleParagraph } from '../shared/exampleContent'
 
-const paragraph1 = exampleParagraph()
-const paragraph2 = exampleParagraph()
-const paragraph3 = exampleParagraph()
+const paragraph = exampleParagraph()
 
 const meta = {
   title: 'Components/Text/Description List',
@@ -24,11 +22,11 @@ export const Default: Story = {
   args: {
     children: [
       <DescriptionList.Term key={1}>Eerste term</DescriptionList.Term>,
-      <DescriptionList.Details key={2}>{paragraph1}</DescriptionList.Details>,
+      <DescriptionList.Details key={2}>{paragraph}</DescriptionList.Details>,
       <DescriptionList.Term key={3}>Tweede term</DescriptionList.Term>,
-      <DescriptionList.Details key={4}>{paragraph2}</DescriptionList.Details>,
+      <DescriptionList.Details key={4}>Tweede Details</DescriptionList.Details>,
       <DescriptionList.Term key={5}>Derde term</DescriptionList.Term>,
-      <DescriptionList.Details key={6}>{paragraph3}</DescriptionList.Details>,
+      <DescriptionList.Details key={6}>Derde Details</DescriptionList.Details>,
     ],
   },
 }

From 461a38bd6d094ba4865df47f3ce30db10ff812b6 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Thu, 21 Mar 2024 11:48:49 +0100
Subject: [PATCH 03/20] Breakpoints and tokens

---
 .../description-list/description-list.scss    | 50 ++++++++++++++++---
 .../src/DescriptionList/DescriptionList.tsx   | 29 ++++++++---
 .../DescriptionList/DescriptionListRow.tsx    | 20 ++++++++
 .../ams/description-list.tokens.json          | 11 +++-
 .../DescriptionList/DescriptionList.docs.mdx  |  8 ++-
 .../DescriptionList.stories.tsx               | 28 +++++++++--
 6 files changed, 123 insertions(+), 23 deletions(-)
 create mode 100644 packages/react/src/DescriptionList/DescriptionListRow.tsx

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
index 958fc716db..d4b5dea73f 100644
--- a/packages/css/src/components/description-list/description-list.scss
+++ b/packages/css/src/components/description-list/description-list.scss
@@ -3,22 +3,44 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/breakpoint";
+
 @mixin reset {
   box-sizing: border-box;
   list-style: none;
   margin-block: 0;
   margin-inline: 0;
-  padding-inline-start: 0;
   -webkit-text-size-adjust: 100%;
 }
 
 .ams-description-list {
-  color: var(--ams-unordered-list-color);
-  font-family: var(--ams-unordered-list-font-family);
-  font-size: var(--ams-unordered-list-font-size);
-  font-weight: var(--ams-unordered-list-font-weight);
-  line-height: var(--ams-unordered-list-line-height);
-  list-style-type: var(--ams-unordered-list-list-style-type);
+  color: var(--ams-description-list-color);
+  display: grid;
+  font-family: var(--ams-description-list-font-family);
+  font-size: var(--ams-description-list-font-size);
+  font-weight: var(--ams-description-list-font-weight);
+  gap: var(--ams-description-list-gap);
+  grid-template-columns: 1fr;
+  line-height: var(--ams-description-list-line-height);
+  list-style-type: var(--ams-description-list-list-style-type);
+
+  &:not(.ams-description-list--rows) {
+    @media screen and (min-width: $ams-breakpoint-medium) {
+      grid-template-columns: 1fr 2fr;
+    }
+  }
+
+  @include reset;
+}
+
+.ams-description-list__row {
+  display: grid;
+  gap: var(--ams-description-list-row-gap);
+  grid-template-columns: 1fr;
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    grid-template-columns: 1fr 2fr;
+  }
 }
 
 .ams-description-list__term {
@@ -26,6 +48,18 @@
 }
 
 .ams-description-list__details {
-  font-weight: 700;
+  font-weight: var(--ams-description-list-details-font-weight);
+  padding-inline-start: var(--ams-description-list-details-padding-inline-start);
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    padding-inline-start: 0;
+  }
+
+  .ams-description-list--rows & {
+    @media screen and (min-width: $ams-breakpoint-medium) {
+      grid-column-start: 2;
+    }
+  }
+
   @include reset;
 }
diff --git a/packages/react/src/DescriptionList/DescriptionList.tsx b/packages/react/src/DescriptionList/DescriptionList.tsx
index e3979a1bac..55b67b9388 100644
--- a/packages/react/src/DescriptionList/DescriptionList.tsx
+++ b/packages/react/src/DescriptionList/DescriptionList.tsx
@@ -4,9 +4,10 @@
  */
 
 import clsx from 'clsx'
-import { forwardRef } from 'react'
+import { Children, forwardRef, isValidElement } from 'react'
 import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
 import { DescriptionListDetails } from './DescriptionListDetails'
+import { DescriptionListRow } from './DescriptionListRow'
 import { DescriptionListTerm } from './DescriptionListTerm'
 
 export type DescriptionListProps = PropsWithChildren<HTMLAttributes<HTMLDListElement>>
@@ -14,14 +15,27 @@ export type DescriptionListProps = PropsWithChildren<HTMLAttributes<HTMLDListEle
 type DescriptionListComponent = {
   Term: typeof DescriptionListTerm
   Details: typeof DescriptionListDetails
+  Row: typeof DescriptionListRow
 } & ForwardRefExoticComponent<DescriptionListProps & RefAttributes<HTMLDListElement>>
 
 export const DescriptionList = forwardRef(
-  ({ children, className, ...restProps }: DescriptionListProps, ref: ForwardedRef<HTMLDListElement>) => (
-    <dl {...restProps} ref={ref} className={clsx('ams-description-list', className)}>
-      {children}
-    </dl>
-  ),
+  ({ children, className, ...restProps }: DescriptionListProps, ref: ForwardedRef<HTMLDListElement>) => {
+    const hasDescriptionListRow = Children.toArray(children).some(
+      (child) => isValidElement(child) && child.type === DescriptionListRow,
+    )
+
+    console.log('DescriptionList', hasDescriptionListRow)
+
+    return (
+      <dl
+        {...restProps}
+        ref={ref}
+        className={clsx('ams-description-list', hasDescriptionListRow && 'ams-description-list--rows', className)}
+      >
+        {children}
+      </dl>
+    )
+  },
 ) as DescriptionListComponent
 
 DescriptionList.displayName = 'DescriptionList'
@@ -31,3 +45,6 @@ DescriptionList.Term.displayName = 'DescriptionList.Term'
 
 DescriptionList.Details = DescriptionListDetails
 DescriptionList.Details.displayName = 'DescriptionList.Details'
+
+DescriptionList.Row = DescriptionListRow
+DescriptionList.Row.displayName = 'DescriptionList.Row'
diff --git a/packages/react/src/DescriptionList/DescriptionListRow.tsx b/packages/react/src/DescriptionList/DescriptionListRow.tsx
new file mode 100644
index 0000000000..a9f9efaffb
--- /dev/null
+++ b/packages/react/src/DescriptionList/DescriptionListRow.tsx
@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+import clsx from 'clsx'
+import { forwardRef } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
+
+export type DescriptionListRowProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+
+export const DescriptionListRow = forwardRef(
+  ({ children, className, ...restProps }: DescriptionListRowProps, ref: ForwardedRef<HTMLDivElement>) => (
+    <div {...restProps} ref={ref} className={clsx('ams-description-list__row', className)}>
+      {children}
+    </div>
+  ),
+)
+
+DescriptionListRow.displayName = 'DescriptionList.Row'
diff --git a/proprietary/tokens/src/components/ams/description-list.tokens.json b/proprietary/tokens/src/components/ams/description-list.tokens.json
index 3839674635..7191934db3 100644
--- a/proprietary/tokens/src/components/ams/description-list.tokens.json
+++ b/proprietary/tokens/src/components/ams/description-list.tokens.json
@@ -5,9 +5,16 @@
       "font-family": { "value": "{ams.text.font-family}" },
       "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
-      "gap": { "value": "0.75rem" },
+      "gap": { "value": "{ams.space.stack.md}" },
       "inverse-color": { "value": "{ams.color.primary-white}" },
-      "line-height": { "value": "{ams.text.level.5.line-height}" }
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
+      "row": {
+        "gap": { "value": "{ams.space.inside.md}" }
+      },
+      "details": {
+        "font-weight": { "value": "{ams.text.font-weight.bold}" },
+        "padding-inline-start": { "value": "{ams.space.inside.xl}" }
+      }
     }
   }
 }
diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
index bc2bb3ab0b..543e0e5f36 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
+++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
@@ -1,4 +1,4 @@
-import { Controls, Markdown, Meta, Primary } from "@storybook/blocks";
+import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks";
 import * as DescriptionListStories from "./DescriptionList.stories.tsx";
 import README from "../../../../packages/css/src/components/description-list/README.md?raw";
 
@@ -8,4 +8,8 @@ import README from "../../../../packages/css/src/components/description-list/REA
 
 <Primary />
 
-<Controls />
+## Wrap with rows
+
+If you need to use multiple details in a row, you can use a `DescriptionListRow` component.
+
+<Canvas of={DescriptionListStories.WrapRows} />
diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
index 9b6e535eb9..8eae972e97 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
+++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -21,12 +21,30 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   args: {
     children: [
-      <DescriptionList.Term key={1}>Eerste term</DescriptionList.Term>,
+      <DescriptionList.Term key={3}>Gebied</DescriptionList.Term>,
+      <DescriptionList.Details key={4}>Gemeente Amsterdam</DescriptionList.Details>,
+      <DescriptionList.Term key={5}>Stadsdeel</DescriptionList.Term>,
+      <DescriptionList.Details key={6}>West</DescriptionList.Details>,
+      <DescriptionList.Term key={1}>Opmerkingen</DescriptionList.Term>,
       <DescriptionList.Details key={2}>{paragraph}</DescriptionList.Details>,
-      <DescriptionList.Term key={3}>Tweede term</DescriptionList.Term>,
-      <DescriptionList.Details key={4}>Tweede Details</DescriptionList.Details>,
-      <DescriptionList.Term key={5}>Derde term</DescriptionList.Term>,
-      <DescriptionList.Details key={6}>Derde Details</DescriptionList.Details>,
     ],
   },
 }
+
+export const WrapRows: Story = {
+  render: () => (
+    <DescriptionList>
+      <DescriptionList.Row>
+        <DescriptionList.Term>Gebied</DescriptionList.Term>
+        <DescriptionList.Details>Gemeente Amsterdam</DescriptionList.Details>
+      </DescriptionList.Row>
+      <DescriptionList.Row>
+        <DescriptionList.Term>Stadsdelen</DescriptionList.Term>
+        <DescriptionList.Details>Noord</DescriptionList.Details>
+        <DescriptionList.Details>Oost</DescriptionList.Details>
+        <DescriptionList.Details>Zuid</DescriptionList.Details>
+        <DescriptionList.Details>West</DescriptionList.Details>
+      </DescriptionList.Row>
+    </DescriptionList>
+  ),
+}

From 0571d3cc4b7ee094cdb3ea9c661b36d4f5097d8e Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Thu, 21 Mar 2024 11:55:19 +0100
Subject: [PATCH 04/20] Add inverse color style to DescriptionList component

---
 .../description-list/description-list.scss    |  4 +++
 .../src/DescriptionList/DescriptionList.tsx   | 13 ++++++--
 .../DescriptionList/DescriptionList.docs.mdx  |  8 ++++-
 .../DescriptionList.stories.tsx               | 31 +++++++++++++++++++
 4 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
index d4b5dea73f..a9bf8fd4e9 100644
--- a/packages/css/src/components/description-list/description-list.scss
+++ b/packages/css/src/components/description-list/description-list.scss
@@ -33,6 +33,10 @@
   @include reset;
 }
 
+.ams-description-list--inverse-color {
+  color: var(--ams-description-list-inverse-color);
+}
+
 .ams-description-list__row {
   display: grid;
   gap: var(--ams-description-list-row-gap);
diff --git a/packages/react/src/DescriptionList/DescriptionList.tsx b/packages/react/src/DescriptionList/DescriptionList.tsx
index 55b67b9388..a1de9f2251 100644
--- a/packages/react/src/DescriptionList/DescriptionList.tsx
+++ b/packages/react/src/DescriptionList/DescriptionList.tsx
@@ -10,7 +10,9 @@ import { DescriptionListDetails } from './DescriptionListDetails'
 import { DescriptionListRow } from './DescriptionListRow'
 import { DescriptionListTerm } from './DescriptionListTerm'
 
-export type DescriptionListProps = PropsWithChildren<HTMLAttributes<HTMLDListElement>>
+export type DescriptionListProps = PropsWithChildren<HTMLAttributes<HTMLDListElement>> & {
+  inverseColor?: boolean
+}
 
 type DescriptionListComponent = {
   Term: typeof DescriptionListTerm
@@ -19,7 +21,7 @@ type DescriptionListComponent = {
 } & ForwardRefExoticComponent<DescriptionListProps & RefAttributes<HTMLDListElement>>
 
 export const DescriptionList = forwardRef(
-  ({ children, className, ...restProps }: DescriptionListProps, ref: ForwardedRef<HTMLDListElement>) => {
+  ({ children, className, inverseColor, ...restProps }: DescriptionListProps, ref: ForwardedRef<HTMLDListElement>) => {
     const hasDescriptionListRow = Children.toArray(children).some(
       (child) => isValidElement(child) && child.type === DescriptionListRow,
     )
@@ -30,7 +32,12 @@ export const DescriptionList = forwardRef(
       <dl
         {...restProps}
         ref={ref}
-        className={clsx('ams-description-list', hasDescriptionListRow && 'ams-description-list--rows', className)}
+        className={clsx(
+          'ams-description-list',
+          hasDescriptionListRow && 'ams-description-list--rows',
+          inverseColor && 'ams-description-list--inverse-color',
+          className,
+        )}
       >
         {children}
       </dl>
diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
index 543e0e5f36..b137611de7 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
+++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Markdown, Meta, Primary } from "@storybook/blocks";
+import { Canvas, Controls, Markdown, Meta, Primary } from "@storybook/blocks";
 import * as DescriptionListStories from "./DescriptionList.stories.tsx";
 import README from "../../../../packages/css/src/components/description-list/README.md?raw";
 
@@ -8,8 +8,14 @@ import README from "../../../../packages/css/src/components/description-list/REA
 
 <Primary />
 
+<Controls />
+
 ## Wrap with rows
 
 If you need to use multiple details in a row, you can use a `DescriptionListRow` component.
 
 <Canvas of={DescriptionListStories.WrapRows} />
+
+## Inverted Color
+
+<Canvas of={DescriptionListStories.InvertedColor} />
diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
index 8eae972e97..4a904a556c 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
+++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -12,6 +12,9 @@ const paragraph = exampleParagraph()
 const meta = {
   title: 'Components/Text/Description List',
   component: DescriptionList,
+  args: {
+    inverseColor: false,
+  },
 } satisfies Meta<typeof DescriptionList>
 
 export default meta
@@ -19,6 +22,13 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
+  decorators: [
+    (Story, context) => (
+      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
+        <Story />
+      </div>
+    ),
+  ],
   args: {
     children: [
       <DescriptionList.Term key={3}>Gebied</DescriptionList.Term>,
@@ -48,3 +58,24 @@ export const WrapRows: Story = {
     </DescriptionList>
   ),
 }
+
+export const InvertedColor: Story = {
+  args: {
+    inverseColor: true,
+    children: [
+      <DescriptionList.Term key={3}>Gebied</DescriptionList.Term>,
+      <DescriptionList.Details key={4}>Gemeente Amsterdam</DescriptionList.Details>,
+      <DescriptionList.Term key={5}>Stadsdeel</DescriptionList.Term>,
+      <DescriptionList.Details key={6}>West</DescriptionList.Details>,
+      <DescriptionList.Term key={1}>Opmerkingen</DescriptionList.Term>,
+      <DescriptionList.Details key={2}>{paragraph}</DescriptionList.Details>,
+    ],
+  },
+  decorators: [
+    (Story, context) => (
+      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
+        <Story />
+      </div>
+    ),
+  ],
+}

From 3d85231dcf9fcc9ecba120884408f325e97e9c98 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Thu, 21 Mar 2024 11:57:04 +0100
Subject: [PATCH 05/20] Add hyphenation to terms and details

---
 .../css/src/components/description-list/description-list.scss  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
index a9bf8fd4e9..a8917bb1e9 100644
--- a/packages/css/src/components/description-list/description-list.scss
+++ b/packages/css/src/components/description-list/description-list.scss
@@ -4,6 +4,7 @@
  */
 
 @import "../../common/breakpoint";
+@import "../../common/hyphenation";
 
 @mixin reset {
   box-sizing: border-box;
@@ -48,6 +49,7 @@
 }
 
 .ams-description-list__term {
+  @include hyphenation;
   @include reset;
 }
 
@@ -65,5 +67,6 @@
     }
   }
 
+  @include hyphenation;
   @include reset;
 }

From 9444997c1ec18002e3184116cab834f884c27f0d Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Thu, 21 Mar 2024 14:39:18 +0100
Subject: [PATCH 06/20] Some documentation

---
 .../css/src/components/description-list/README.md    | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/css/src/components/description-list/README.md b/packages/css/src/components/description-list/README.md
index 9a97117802..96fcef0412 100644
--- a/packages/css/src/components/description-list/README.md
+++ b/packages/css/src/components/description-list/README.md
@@ -1,3 +1,15 @@
 <!-- @license CC0-1.0 -->
 
 # Description List
+
+A description list is a list of terms and their details.
+
+## Relevant WCAG requirements
+
+- [WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H40.html): Using description lists
+
+## References
+
+- [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl): Description List
+- [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt): Description Title
+- [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd): Description Details

From 42034d6ee3d3991d7c911234b0abcfa1c61d585a Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Fri, 22 Mar 2024 11:50:24 +0100
Subject: [PATCH 07/20] Remove console.log statement in DescriptionList
 component

---
 packages/react/src/DescriptionList/DescriptionList.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react/src/DescriptionList/DescriptionList.tsx b/packages/react/src/DescriptionList/DescriptionList.tsx
index a1de9f2251..92478cf935 100644
--- a/packages/react/src/DescriptionList/DescriptionList.tsx
+++ b/packages/react/src/DescriptionList/DescriptionList.tsx
@@ -26,8 +26,6 @@ export const DescriptionList = forwardRef(
       (child) => isValidElement(child) && child.type === DescriptionListRow,
     )
 
-    console.log('DescriptionList', hasDescriptionListRow)
-
     return (
       <dl
         {...restProps}

From a7d4c05f816ae10d6060c9532243a18ca6cb99c0 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Tue, 26 Mar 2024 12:11:45 +0100
Subject: [PATCH 08/20] Update
 packages/css/src/components/description-list/README.md

Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com>
---
 packages/css/src/components/description-list/README.md | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/css/src/components/description-list/README.md b/packages/css/src/components/description-list/README.md
index 96fcef0412..c6c75fe0fe 100644
--- a/packages/css/src/components/description-list/README.md
+++ b/packages/css/src/components/description-list/README.md
@@ -4,12 +4,7 @@
 
 A description list is a list of terms and their details.
 
-## Relevant WCAG requirements
-
-- [WCAG 2.0](https://www.w3.org/TR/WCAG20-TECHS/H40.html): Using description lists
-
 ## References
 
-- [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl): Description List
-- [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt): Description Title
-- [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd): Description Details
+- [MDN: `<dl>`: The Description List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)
+- [WCAG: Using description lists](https://www.w3.org/WAI/WCAG22/Techniques/html/H40)

From 81b0839fe005a02f2c1c7fbf862aa32d895a36f8 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Tue, 26 Mar 2024 13:56:38 +0100
Subject: [PATCH 09/20] Remove unused imports and mixins

---
 .../description-list/description-list.scss    |  4 --
 .../src/DescriptionList/DescriptionList.tsx   | 31 +++++--------
 .../DescriptionList.stories.tsx               | 46 ++++++++-----------
 3 files changed, 29 insertions(+), 52 deletions(-)

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
index a8917bb1e9..a77324caa6 100644
--- a/packages/css/src/components/description-list/description-list.scss
+++ b/packages/css/src/components/description-list/description-list.scss
@@ -4,7 +4,6 @@
  */
 
 @import "../../common/breakpoint";
-@import "../../common/hyphenation";
 
 @mixin reset {
   box-sizing: border-box;
@@ -23,7 +22,6 @@
   gap: var(--ams-description-list-gap);
   grid-template-columns: 1fr;
   line-height: var(--ams-description-list-line-height);
-  list-style-type: var(--ams-description-list-list-style-type);
 
   &:not(.ams-description-list--rows) {
     @media screen and (min-width: $ams-breakpoint-medium) {
@@ -49,7 +47,6 @@
 }
 
 .ams-description-list__term {
-  @include hyphenation;
   @include reset;
 }
 
@@ -67,6 +64,5 @@
     }
   }
 
-  @include hyphenation;
   @include reset;
 }
diff --git a/packages/react/src/DescriptionList/DescriptionList.tsx b/packages/react/src/DescriptionList/DescriptionList.tsx
index 92478cf935..08a9b72097 100644
--- a/packages/react/src/DescriptionList/DescriptionList.tsx
+++ b/packages/react/src/DescriptionList/DescriptionList.tsx
@@ -5,22 +5,16 @@
 
 import clsx from 'clsx'
 import { Children, forwardRef, isValidElement } from 'react'
-import type { ForwardedRef, ForwardRefExoticComponent, HTMLAttributes, PropsWithChildren, RefAttributes } from 'react'
+import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 import { DescriptionListDetails } from './DescriptionListDetails'
 import { DescriptionListRow } from './DescriptionListRow'
 import { DescriptionListTerm } from './DescriptionListTerm'
 
-export type DescriptionListProps = PropsWithChildren<HTMLAttributes<HTMLDListElement>> & {
+export type DescriptionListProps = {
   inverseColor?: boolean
-}
+} & PropsWithChildren<HTMLAttributes<HTMLDListElement>>
 
-type DescriptionListComponent = {
-  Term: typeof DescriptionListTerm
-  Details: typeof DescriptionListDetails
-  Row: typeof DescriptionListRow
-} & ForwardRefExoticComponent<DescriptionListProps & RefAttributes<HTMLDListElement>>
-
-export const DescriptionList = forwardRef(
+const DescriptionListRoot = forwardRef(
   ({ children, className, inverseColor, ...restProps }: DescriptionListProps, ref: ForwardedRef<HTMLDListElement>) => {
     const hasDescriptionListRow = Children.toArray(children).some(
       (child) => isValidElement(child) && child.type === DescriptionListRow,
@@ -41,15 +35,12 @@ export const DescriptionList = forwardRef(
       </dl>
     )
   },
-) as DescriptionListComponent
-
-DescriptionList.displayName = 'DescriptionList'
-
-DescriptionList.Term = DescriptionListTerm
-DescriptionList.Term.displayName = 'DescriptionList.Term'
+)
 
-DescriptionList.Details = DescriptionListDetails
-DescriptionList.Details.displayName = 'DescriptionList.Details'
+DescriptionListRoot.displayName = 'DescriptionList'
 
-DescriptionList.Row = DescriptionListRow
-DescriptionList.Row.displayName = 'DescriptionList.Row'
+export const DescriptionList = Object.assign(DescriptionListRoot, {
+  Term: DescriptionListTerm,
+  Details: DescriptionListDetails,
+  Row: DescriptionListRow,
+})
diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
index 4a904a556c..4f80f09e7f 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
+++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -13,6 +13,14 @@ const meta = {
   title: 'Components/Text/Description List',
   component: DescriptionList,
   args: {
+    children: [
+      <DescriptionList.Term key={1}>Gebied</DescriptionList.Term>,
+      <DescriptionList.Details key={2}>Gemeente Amsterdam</DescriptionList.Details>,
+      <DescriptionList.Term key={3}>Stadsdeel</DescriptionList.Term>,
+      <DescriptionList.Details key={4}>West</DescriptionList.Details>,
+      <DescriptionList.Term key={5}>Opmerkingen</DescriptionList.Term>,
+      <DescriptionList.Details key={6}>{paragraph}</DescriptionList.Details>,
+    ],
     inverseColor: false,
   },
 } satisfies Meta<typeof DescriptionList>
@@ -24,56 +32,38 @@ type Story = StoryObj<typeof meta>
 export const Default: Story = {
   decorators: [
     (Story, context) => (
-      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
+      <div className={context.args['inverseColor'] ? 'ams-docs-dark-background' : undefined}>
         <Story />
       </div>
     ),
   ],
-  args: {
-    children: [
-      <DescriptionList.Term key={3}>Gebied</DescriptionList.Term>,
-      <DescriptionList.Details key={4}>Gemeente Amsterdam</DescriptionList.Details>,
-      <DescriptionList.Term key={5}>Stadsdeel</DescriptionList.Term>,
-      <DescriptionList.Details key={6}>West</DescriptionList.Details>,
-      <DescriptionList.Term key={1}>Opmerkingen</DescriptionList.Term>,
-      <DescriptionList.Details key={2}>{paragraph}</DescriptionList.Details>,
-    ],
-  },
 }
 
 export const WrapRows: Story = {
-  render: () => (
-    <DescriptionList>
-      <DescriptionList.Row>
+  args: {
+    children: [
+      <DescriptionList.Row key={1}>
         <DescriptionList.Term>Gebied</DescriptionList.Term>
         <DescriptionList.Details>Gemeente Amsterdam</DescriptionList.Details>
-      </DescriptionList.Row>
-      <DescriptionList.Row>
+      </DescriptionList.Row>,
+      <DescriptionList.Row key={2}>
         <DescriptionList.Term>Stadsdelen</DescriptionList.Term>
         <DescriptionList.Details>Noord</DescriptionList.Details>
         <DescriptionList.Details>Oost</DescriptionList.Details>
         <DescriptionList.Details>Zuid</DescriptionList.Details>
         <DescriptionList.Details>West</DescriptionList.Details>
-      </DescriptionList.Row>
-    </DescriptionList>
-  ),
+      </DescriptionList.Row>,
+    ],
+  },
 }
 
 export const InvertedColor: Story = {
   args: {
     inverseColor: true,
-    children: [
-      <DescriptionList.Term key={3}>Gebied</DescriptionList.Term>,
-      <DescriptionList.Details key={4}>Gemeente Amsterdam</DescriptionList.Details>,
-      <DescriptionList.Term key={5}>Stadsdeel</DescriptionList.Term>,
-      <DescriptionList.Details key={6}>West</DescriptionList.Details>,
-      <DescriptionList.Term key={1}>Opmerkingen</DescriptionList.Term>,
-      <DescriptionList.Details key={2}>{paragraph}</DescriptionList.Details>,
-    ],
   },
   decorators: [
     (Story, context) => (
-      <div className={context.args.inverseColor ? 'ams-docs-dark-background' : undefined}>
+      <div className={context.args['inverseColor'] ? 'ams-docs-dark-background' : undefined}>
         <Story />
       </div>
     ),

From 95c784c186b554cd966e5eee176a411ba3a49f50 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Wed, 27 Mar 2024 11:27:13 +0100
Subject: [PATCH 10/20] Removed Row and added tests for children

---
 .../description-list/description-list.scss    | 22 ++--------
 .../DescriptionList/DescriptionList.test.tsx  |  8 ++++
 .../src/DescriptionList/DescriptionList.tsx   | 15 +------
 .../DescriptionListDetails.test.tsx           | 41 +++++++++++++++++++
 .../DescriptionList/DescriptionListRow.tsx    | 20 ---------
 .../DescriptionListTerm.test.tsx              | 41 +++++++++++++++++++
 .../DescriptionList/DescriptionList.docs.mdx  |  6 +--
 .../DescriptionList.stories.tsx               | 20 ++++-----
 8 files changed, 107 insertions(+), 66 deletions(-)
 create mode 100644 packages/react/src/DescriptionList/DescriptionListDetails.test.tsx
 delete mode 100644 packages/react/src/DescriptionList/DescriptionListRow.tsx
 create mode 100644 packages/react/src/DescriptionList/DescriptionListTerm.test.tsx

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
index a77324caa6..96af31d5c1 100644
--- a/packages/css/src/components/description-list/description-list.scss
+++ b/packages/css/src/components/description-list/description-list.scss
@@ -23,10 +23,8 @@
   grid-template-columns: 1fr;
   line-height: var(--ams-description-list-line-height);
 
-  &:not(.ams-description-list--rows) {
-    @media screen and (min-width: $ams-breakpoint-medium) {
-      grid-template-columns: 1fr 2fr;
-    }
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    grid-template-columns: 1fr 2fr;
   }
 
   @include reset;
@@ -36,16 +34,6 @@
   color: var(--ams-description-list-inverse-color);
 }
 
-.ams-description-list__row {
-  display: grid;
-  gap: var(--ams-description-list-row-gap);
-  grid-template-columns: 1fr;
-
-  @media screen and (min-width: $ams-breakpoint-medium) {
-    grid-template-columns: 1fr 2fr;
-  }
-}
-
 .ams-description-list__term {
   @include reset;
 }
@@ -58,10 +46,8 @@
     padding-inline-start: 0;
   }
 
-  .ams-description-list--rows & {
-    @media screen and (min-width: $ams-breakpoint-medium) {
-      grid-column-start: 2;
-    }
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    grid-column-start: 2;
   }
 
   @include reset;
diff --git a/packages/react/src/DescriptionList/DescriptionList.test.tsx b/packages/react/src/DescriptionList/DescriptionList.test.tsx
index dc4afd4d1a..d5ea286553 100644
--- a/packages/react/src/DescriptionList/DescriptionList.test.tsx
+++ b/packages/react/src/DescriptionList/DescriptionList.test.tsx
@@ -38,4 +38,12 @@ describe('Description list', () => {
 
     expect(ref.current).toBe(component)
   })
+
+  it('renders the right inverse color class', () => {
+    const { container } = render(<DescriptionList inverseColor />)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-description-list--inverse-color')
+  })
 })
diff --git a/packages/react/src/DescriptionList/DescriptionList.tsx b/packages/react/src/DescriptionList/DescriptionList.tsx
index 08a9b72097..d0d4c444e3 100644
--- a/packages/react/src/DescriptionList/DescriptionList.tsx
+++ b/packages/react/src/DescriptionList/DescriptionList.tsx
@@ -4,10 +4,9 @@
  */
 
 import clsx from 'clsx'
-import { Children, forwardRef, isValidElement } from 'react'
+import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
 import { DescriptionListDetails } from './DescriptionListDetails'
-import { DescriptionListRow } from './DescriptionListRow'
 import { DescriptionListTerm } from './DescriptionListTerm'
 
 export type DescriptionListProps = {
@@ -16,20 +15,11 @@ export type DescriptionListProps = {
 
 const DescriptionListRoot = forwardRef(
   ({ children, className, inverseColor, ...restProps }: DescriptionListProps, ref: ForwardedRef<HTMLDListElement>) => {
-    const hasDescriptionListRow = Children.toArray(children).some(
-      (child) => isValidElement(child) && child.type === DescriptionListRow,
-    )
-
     return (
       <dl
         {...restProps}
         ref={ref}
-        className={clsx(
-          'ams-description-list',
-          hasDescriptionListRow && 'ams-description-list--rows',
-          inverseColor && 'ams-description-list--inverse-color',
-          className,
-        )}
+        className={clsx('ams-description-list', inverseColor && 'ams-description-list--inverse-color', className)}
       >
         {children}
       </dl>
@@ -42,5 +32,4 @@ DescriptionListRoot.displayName = 'DescriptionList'
 export const DescriptionList = Object.assign(DescriptionListRoot, {
   Term: DescriptionListTerm,
   Details: DescriptionListDetails,
-  Row: DescriptionListRow,
 })
diff --git a/packages/react/src/DescriptionList/DescriptionListDetails.test.tsx b/packages/react/src/DescriptionList/DescriptionListDetails.test.tsx
new file mode 100644
index 0000000000..4a8d6d5e38
--- /dev/null
+++ b/packages/react/src/DescriptionList/DescriptionListDetails.test.tsx
@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { DescriptionList } from './DescriptionList'
+import '@testing-library/jest-dom'
+
+describe('Description list details', () => {
+  it('renders', () => {
+    const { container } = render(<DescriptionList.Details>Test</DescriptionList.Details>)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<DescriptionList.Details>Test</DescriptionList.Details>)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-description-list__details')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<DescriptionList.Details className="extra">Test</DescriptionList.Details>)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-description-list__details extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLElement>()
+
+    const { container } = render(<DescriptionList.Details ref={ref}>Test</DescriptionList.Details>)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})
diff --git a/packages/react/src/DescriptionList/DescriptionListRow.tsx b/packages/react/src/DescriptionList/DescriptionListRow.tsx
deleted file mode 100644
index a9f9efaffb..0000000000
--- a/packages/react/src/DescriptionList/DescriptionListRow.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-import clsx from 'clsx'
-import { forwardRef } from 'react'
-import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
-
-export type DescriptionListRowProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
-
-export const DescriptionListRow = forwardRef(
-  ({ children, className, ...restProps }: DescriptionListRowProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <div {...restProps} ref={ref} className={clsx('ams-description-list__row', className)}>
-      {children}
-    </div>
-  ),
-)
-
-DescriptionListRow.displayName = 'DescriptionList.Row'
diff --git a/packages/react/src/DescriptionList/DescriptionListTerm.test.tsx b/packages/react/src/DescriptionList/DescriptionListTerm.test.tsx
new file mode 100644
index 0000000000..84e0c5e453
--- /dev/null
+++ b/packages/react/src/DescriptionList/DescriptionListTerm.test.tsx
@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react'
+import { createRef } from 'react'
+import { DescriptionList } from './DescriptionList'
+import '@testing-library/jest-dom'
+
+describe('Description list term', () => {
+  it('renders', () => {
+    const { container } = render(<DescriptionList.Term>Test</DescriptionList.Term>)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toBeInTheDocument()
+    expect(component).toBeVisible()
+  })
+
+  it('renders a design system BEM class name', () => {
+    const { container } = render(<DescriptionList.Term>Test</DescriptionList.Term>)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-description-list__term')
+  })
+
+  it('renders an additional class name', () => {
+    const { container } = render(<DescriptionList.Term className="extra">Test</DescriptionList.Term>)
+
+    const component = container.querySelector(':only-child')
+
+    expect(component).toHaveClass('ams-description-list__term extra')
+  })
+
+  it('supports ForwardRef in React', () => {
+    const ref = createRef<HTMLElement>()
+
+    const { container } = render(<DescriptionList.Term ref={ref}>Test</DescriptionList.Term>)
+
+    const component = container.querySelector(':only-child')
+
+    expect(ref.current).toBe(component)
+  })
+})
diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
index b137611de7..628b6eea45 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
+++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
@@ -10,11 +10,11 @@ import README from "../../../../packages/css/src/components/description-list/REA
 
 <Controls />
 
-## Wrap with rows
+## Mutiple details in a row
 
-If you need to use multiple details in a row, you can use a `DescriptionListRow` component.
+If needed, you can display multiple details in a row.
 
-<Canvas of={DescriptionListStories.WrapRows} />
+<Canvas of={DescriptionListStories.MultipleDetails} />
 
 ## Inverted Color
 
diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
index 4f80f09e7f..78a91858e0 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
+++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -39,20 +39,16 @@ export const Default: Story = {
   ],
 }
 
-export const WrapRows: Story = {
+export const MultipleDetails: Story = {
   args: {
     children: [
-      <DescriptionList.Row key={1}>
-        <DescriptionList.Term>Gebied</DescriptionList.Term>
-        <DescriptionList.Details>Gemeente Amsterdam</DescriptionList.Details>
-      </DescriptionList.Row>,
-      <DescriptionList.Row key={2}>
-        <DescriptionList.Term>Stadsdelen</DescriptionList.Term>
-        <DescriptionList.Details>Noord</DescriptionList.Details>
-        <DescriptionList.Details>Oost</DescriptionList.Details>
-        <DescriptionList.Details>Zuid</DescriptionList.Details>
-        <DescriptionList.Details>West</DescriptionList.Details>
-      </DescriptionList.Row>,
+      <DescriptionList.Term key={1}>Gebied</DescriptionList.Term>,
+      <DescriptionList.Details key={2}>Gemeente Amsterdam</DescriptionList.Details>,
+      <DescriptionList.Term key={3}>Stadsdeel</DescriptionList.Term>,
+      <DescriptionList.Details key={4}>Noord</DescriptionList.Details>,
+      <DescriptionList.Details key={5}>Oost</DescriptionList.Details>,
+      <DescriptionList.Details key={6}>Zuid</DescriptionList.Details>,
+      <DescriptionList.Details key={7}>West</DescriptionList.Details>,
     ],
   },
 }

From c83e40bd86e4f1903193a35169d311ce2b3aab77 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Wed, 27 Mar 2024 11:34:30 +0100
Subject: [PATCH 11/20] Update description-list.scss with text-rendering import

---
 .../src/components/description-list/description-list.scss    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
index 96af31d5c1..2dfc565f7b 100644
--- a/packages/css/src/components/description-list/description-list.scss
+++ b/packages/css/src/components/description-list/description-list.scss
@@ -4,13 +4,12 @@
  */
 
 @import "../../common/breakpoint";
+@import "../../common/text-rendering";
 
 @mixin reset {
   box-sizing: border-box;
-  list-style: none;
   margin-block: 0;
   margin-inline: 0;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-description-list {
@@ -36,6 +35,7 @@
 
 .ams-description-list__term {
   @include reset;
+  @include text-rendering;
 }
 
 .ams-description-list__details {
@@ -51,4 +51,5 @@
   }
 
   @include reset;
+  @include text-rendering;
 }

From 83c689a24394ad521cef378878ce70b1797c4770 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Wed, 27 Mar 2024 11:38:34 +0100
Subject: [PATCH 12/20] Update
 proprietary/tokens/src/components/ams/description-list.tokens.json

Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
---
 .../tokens/src/components/ams/description-list.tokens.json      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/proprietary/tokens/src/components/ams/description-list.tokens.json b/proprietary/tokens/src/components/ams/description-list.tokens.json
index 7191934db3..9248ca9d8a 100644
--- a/proprietary/tokens/src/components/ams/description-list.tokens.json
+++ b/proprietary/tokens/src/components/ams/description-list.tokens.json
@@ -9,7 +9,7 @@
       "inverse-color": { "value": "{ams.color.primary-white}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "row": {
-        "gap": { "value": "{ams.space.inside.md}" }
+        "gap": { "value": "{ams.space.stack.md}" }
       },
       "details": {
         "font-weight": { "value": "{ams.text.font-weight.bold}" },

From 0255fe91206d12c453c95179c4f271f287ad9e57 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 27 Mar 2024 12:36:07 +0100
Subject: [PATCH 13/20] Update docs

---
 packages/css/src/components/description-list/README.md   | 2 +-
 .../components/DescriptionList/DescriptionList.docs.mdx  | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/css/src/components/description-list/README.md b/packages/css/src/components/description-list/README.md
index c6c75fe0fe..b8c8523512 100644
--- a/packages/css/src/components/description-list/README.md
+++ b/packages/css/src/components/description-list/README.md
@@ -2,7 +2,7 @@
 
 # Description List
 
-A description list is a list of terms and their details.
+A collection of terms and their details.
 
 ## References
 
diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
index 628b6eea45..1326476a3f 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
+++ b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
@@ -10,12 +10,15 @@ import README from "../../../../packages/css/src/components/description-list/REA
 
 <Controls />
 
-## Mutiple details in a row
+## Multiple details
 
-If needed, you can display multiple details in a row.
+A term may have multiple details.
 
 <Canvas of={DescriptionListStories.MultipleDetails} />
 
-## Inverted Color
+### Inverse colour
+
+Set the `inverseColor` prop if the Description List sits on a dark background.
+This ensures the colour of the text provides enough contrast.
 
 <Canvas of={DescriptionListStories.InvertedColor} />

From 929d98141181f747a4a2f209087ae4c66cc90b8f Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Tue, 2 Apr 2024 09:53:57 +0200
Subject: [PATCH 14/20] Remove render from DescriptionList

Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com>
---
 .../src/DescriptionList/DescriptionList.tsx   | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/DescriptionList/DescriptionList.tsx b/packages/react/src/DescriptionList/DescriptionList.tsx
index d0d4c444e3..c94f3f9191 100644
--- a/packages/react/src/DescriptionList/DescriptionList.tsx
+++ b/packages/react/src/DescriptionList/DescriptionList.tsx
@@ -14,17 +14,15 @@ export type DescriptionListProps = {
 } & PropsWithChildren<HTMLAttributes<HTMLDListElement>>
 
 const DescriptionListRoot = forwardRef(
-  ({ children, className, inverseColor, ...restProps }: DescriptionListProps, ref: ForwardedRef<HTMLDListElement>) => {
-    return (
-      <dl
-        {...restProps}
-        ref={ref}
-        className={clsx('ams-description-list', inverseColor && 'ams-description-list--inverse-color', className)}
-      >
-        {children}
-      </dl>
-    )
-  },
+  ({ children, className, inverseColor, ...restProps }: DescriptionListProps, ref: ForwardedRef<HTMLDListElement>) => (
+    <dl
+      {...restProps}
+      ref={ref}
+      className={clsx('ams-description-list', inverseColor && 'ams-description-list--inverse-color', className)}
+    >
+      {children}
+    </dl>
+  ),
 )
 
 DescriptionListRoot.displayName = 'DescriptionList'

From a8e7bc5917bd4130205e9f9b726bfd17fdf232eb Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Tue, 2 Apr 2024 09:59:04 +0200
Subject: [PATCH 15/20] Refactor description list styles and update test cases

---
 .../description-list/description-list.scss      | 10 ++++------
 .../DescriptionListDetails.test.tsx             | 14 +++++++-------
 .../DescriptionListTerm.test.tsx                | 14 +++++++-------
 .../DescriptionList/DescriptionList.stories.tsx | 17 ++++++++---------
 4 files changed, 26 insertions(+), 29 deletions(-)

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
index 2dfc565f7b..3589923700 100644
--- a/packages/css/src/components/description-list/description-list.scss
+++ b/packages/css/src/components/description-list/description-list.scss
@@ -19,7 +19,6 @@
   font-size: var(--ams-description-list-font-size);
   font-weight: var(--ams-description-list-font-weight);
   gap: var(--ams-description-list-gap);
-  grid-template-columns: 1fr;
   line-height: var(--ams-description-list-line-height);
 
   @media screen and (min-width: $ams-breakpoint-medium) {
@@ -27,6 +26,7 @@
   }
 
   @include reset;
+  @include text-rendering;
 }
 
 .ams-description-list--inverse-color {
@@ -34,8 +34,9 @@
 }
 
 .ams-description-list__term {
-  @include reset;
-  @include text-rendering;
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    grid-column-start: 1;
+  }
 }
 
 .ams-description-list__details {
@@ -49,7 +50,4 @@
   @media screen and (min-width: $ams-breakpoint-medium) {
     grid-column-start: 2;
   }
-
-  @include reset;
-  @include text-rendering;
 }
diff --git a/packages/react/src/DescriptionList/DescriptionListDetails.test.tsx b/packages/react/src/DescriptionList/DescriptionListDetails.test.tsx
index 4a8d6d5e38..5b5c8762a0 100644
--- a/packages/react/src/DescriptionList/DescriptionListDetails.test.tsx
+++ b/packages/react/src/DescriptionList/DescriptionListDetails.test.tsx
@@ -1,30 +1,30 @@
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
 import { DescriptionList } from './DescriptionList'
 import '@testing-library/jest-dom'
 
 describe('Description list details', () => {
   it('renders', () => {
-    const { container } = render(<DescriptionList.Details>Test</DescriptionList.Details>)
+    render(<DescriptionList.Details>Test</DescriptionList.Details>)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('definition')
 
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<DescriptionList.Details>Test</DescriptionList.Details>)
+    render(<DescriptionList.Details>Test</DescriptionList.Details>)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('definition')
 
     expect(component).toHaveClass('ams-description-list__details')
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<DescriptionList.Details className="extra">Test</DescriptionList.Details>)
+    render(<DescriptionList.Details className="extra">Test</DescriptionList.Details>)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('definition')
 
     expect(component).toHaveClass('ams-description-list__details extra')
   })
diff --git a/packages/react/src/DescriptionList/DescriptionListTerm.test.tsx b/packages/react/src/DescriptionList/DescriptionListTerm.test.tsx
index 84e0c5e453..f1e758cee3 100644
--- a/packages/react/src/DescriptionList/DescriptionListTerm.test.tsx
+++ b/packages/react/src/DescriptionList/DescriptionListTerm.test.tsx
@@ -1,30 +1,30 @@
-import { render } from '@testing-library/react'
+import { render, screen } from '@testing-library/react'
 import { createRef } from 'react'
 import { DescriptionList } from './DescriptionList'
 import '@testing-library/jest-dom'
 
 describe('Description list term', () => {
   it('renders', () => {
-    const { container } = render(<DescriptionList.Term>Test</DescriptionList.Term>)
+    render(<DescriptionList.Term>Test</DescriptionList.Term>)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('term')
 
     expect(component).toBeInTheDocument()
     expect(component).toBeVisible()
   })
 
   it('renders a design system BEM class name', () => {
-    const { container } = render(<DescriptionList.Term>Test</DescriptionList.Term>)
+    render(<DescriptionList.Term>Test</DescriptionList.Term>)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('term')
 
     expect(component).toHaveClass('ams-description-list__term')
   })
 
   it('renders an additional class name', () => {
-    const { container } = render(<DescriptionList.Term className="extra">Test</DescriptionList.Term>)
+    render(<DescriptionList.Term className="extra">Test</DescriptionList.Term>)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('term')
 
     expect(component).toHaveClass('ams-description-list__term extra')
   })
diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
index 78a91858e0..cf6ea3a676 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
+++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -12,6 +12,13 @@ const paragraph = exampleParagraph()
 const meta = {
   title: 'Components/Text/Description List',
   component: DescriptionList,
+  decorators: [
+    (Story, context) => (
+      <div className={context.args['inverseColor'] ? 'ams-docs-dark-background' : undefined}>
+        <Story />
+      </div>
+    ),
+  ],
   args: {
     children: [
       <DescriptionList.Term key={1}>Gebied</DescriptionList.Term>,
@@ -29,15 +36,7 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
-export const Default: Story = {
-  decorators: [
-    (Story, context) => (
-      <div className={context.args['inverseColor'] ? 'ams-docs-dark-background' : undefined}>
-        <Story />
-      </div>
-    ),
-  ],
-}
+export const Default: Story = {}
 
 export const MultipleDetails: Story = {
   args: {

From 08b114dfdeb47969b408c7eaf81ef307045d26d9 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Tue, 2 Apr 2024 14:14:10 +0200
Subject: [PATCH 16/20] Update
 packages/css/src/components/description-list/README.md

Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
---
 packages/css/src/components/description-list/README.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/css/src/components/description-list/README.md b/packages/css/src/components/description-list/README.md
index b8c8523512..04853b4d66 100644
--- a/packages/css/src/components/description-list/README.md
+++ b/packages/css/src/components/description-list/README.md
@@ -4,6 +4,14 @@
 
 A collection of terms and their details.
 
+## Design
+
+On a narrow screen, details appear indented below their term.
+From the medium breakpoint, terms and details appear next to each other.
+The column for the details is twice as wide as the one for the term.
+
+Details are set in bold text.
+
 ## References
 
 - [MDN: `<dl>`: The Description List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)

From eb83c80069838402e0a54bd1b10e658518bfc0d1 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Tue, 2 Apr 2024 14:20:45 +0200
Subject: [PATCH 17/20] Refactor description list component styles and story

---
 .../src/components/description-list/description-list.scss  | 5 +----
 .../components/DescriptionList/DescriptionList.stories.tsx | 7 -------
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
index 3589923700..1d047273f3 100644
--- a/packages/css/src/components/description-list/description-list.scss
+++ b/packages/css/src/components/description-list/description-list.scss
@@ -43,11 +43,8 @@
   font-weight: var(--ams-description-list-details-font-weight);
   padding-inline-start: var(--ams-description-list-details-padding-inline-start);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
-    padding-inline-start: 0;
-  }
-
   @media screen and (min-width: $ams-breakpoint-medium) {
     grid-column-start: 2;
+    padding-inline-start: 0;
   }
 }
diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
index cf6ea3a676..31af9ae4dd 100644
--- a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
+++ b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -56,11 +56,4 @@ export const InvertedColor: Story = {
   args: {
     inverseColor: true,
   },
-  decorators: [
-    (Story, context) => (
-      <div className={context.args['inverseColor'] ? 'ams-docs-dark-background' : undefined}>
-        <Story />
-      </div>
-    ),
-  ],
 }

From c7855cc13c183387c7d3b68d72dc73b394b2e83a Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Wed, 3 Apr 2024 09:27:49 +0200
Subject: [PATCH 18/20] Use roles DescriptionList child component tests

---
 .../react/src/DescriptionList/DescriptionListDetails.test.tsx | 4 ++--
 .../react/src/DescriptionList/DescriptionListTerm.test.tsx    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/DescriptionList/DescriptionListDetails.test.tsx b/packages/react/src/DescriptionList/DescriptionListDetails.test.tsx
index 5b5c8762a0..3237521eee 100644
--- a/packages/react/src/DescriptionList/DescriptionListDetails.test.tsx
+++ b/packages/react/src/DescriptionList/DescriptionListDetails.test.tsx
@@ -32,9 +32,9 @@ describe('Description list details', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLElement>()
 
-    const { container } = render(<DescriptionList.Details ref={ref}>Test</DescriptionList.Details>)
+    render(<DescriptionList.Details ref={ref}>Test</DescriptionList.Details>)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('definition')
 
     expect(ref.current).toBe(component)
   })
diff --git a/packages/react/src/DescriptionList/DescriptionListTerm.test.tsx b/packages/react/src/DescriptionList/DescriptionListTerm.test.tsx
index f1e758cee3..fff06b9099 100644
--- a/packages/react/src/DescriptionList/DescriptionListTerm.test.tsx
+++ b/packages/react/src/DescriptionList/DescriptionListTerm.test.tsx
@@ -32,9 +32,9 @@ describe('Description list term', () => {
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLElement>()
 
-    const { container } = render(<DescriptionList.Term ref={ref}>Test</DescriptionList.Term>)
+    render(<DescriptionList.Term ref={ref}>Test</DescriptionList.Term>)
 
-    const component = container.querySelector(':only-child')
+    const component = screen.getByRole('term')
 
     expect(ref.current).toBe(component)
   })

From 6d205dcbacf52fcce1c4c6e8a42414ee16e47f64 Mon Sep 17 00:00:00 2001
From: Niels Roozemond <n.roozemond@amsterdam.nl>
Date: Wed, 3 Apr 2024 11:10:28 +0200
Subject: [PATCH 19/20] Add reset-details mixin to description-list.scss

---
 .../src/components/description-list/description-list.scss    | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
index 1d047273f3..3d750f9668 100644
--- a/packages/css/src/components/description-list/description-list.scss
+++ b/packages/css/src/components/description-list/description-list.scss
@@ -9,6 +9,9 @@
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
+}
+
+@mixin reset-details {
   margin-inline: 0;
 }
 
@@ -47,4 +50,6 @@
     grid-column-start: 2;
     padding-inline-start: 0;
   }
+
+  @include reset-details;
 }

From ff9032f56ea61224ceada2c99da5a8c5cbeb0213 Mon Sep 17 00:00:00 2001
From: Aram Limpens <a.limpens@amsterdam.nl>
Date: Wed, 3 Apr 2024 13:48:53 +0200
Subject: [PATCH 20/20] Move reset to class using it

---
 .../src/components/description-list/description-list.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
index 3d750f9668..9f73928c20 100644
--- a/packages/css/src/components/description-list/description-list.scss
+++ b/packages/css/src/components/description-list/description-list.scss
@@ -11,10 +11,6 @@
   margin-block: 0;
 }
 
-@mixin reset-details {
-  margin-inline: 0;
-}
-
 .ams-description-list {
   color: var(--ams-description-list-color);
   display: grid;
@@ -42,6 +38,10 @@
   }
 }
 
+@mixin reset-details {
+  margin-inline: 0;
+}
+
 .ams-description-list__details {
   font-weight: var(--ams-description-list-details-font-weight);
   padding-inline-start: var(--ams-description-list-details-padding-inline-start);