feat!: Make terms bold instead of descriptions in Description List

packages/css/src/components/description-list/README.md

@@ -2,15 +2,14 @@
 
 # Description List
 
-A collection of terms and their details.
+A collection of terms and their descriptions.
 
 ## 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.
+On a narrow screen, descriptions appear indented below their term.
+From the medium breakpoint, terms and descriptions appear next to each other.
+The column for the descriptions is twice as wide as the one for the term.
+The term is set in bold text.
 
 ## References
 

packages/css/src/components/description-list/description-list.scss

@@ -16,7 +16,6 @@
   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);
   line-height: var(--ams-description-list-line-height);
 
@@ -33,20 +32,22 @@
 }
 
 .ams-description-list__term {
+  font-weight: var(--ams-description-list-term-font-weight);
+
   @media screen and (min-width: $ams-breakpoint-medium) {
     grid-column-start: 1;
   }
 }
 
-@mixin reset-details {
+@mixin reset-dd {
   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);
 
-  @include reset-details;
+  @include reset-dd;
 
   @media screen and (min-width: $ams-breakpoint-medium) {
     grid-column-start: 2;

packages/react/src/DescriptionList/DescriptionList.test.tsx

@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { DescriptionList } from './DescriptionList'
 import '@testing-library/jest-dom'
 
-describe('Description list', () => {
+describe('Description List', () => {
   it('renders', () => {
     const { container } = render(<DescriptionList />)
 

packages/react/src/DescriptionList/DescriptionListDetails.test.tsx

@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { DescriptionList } from './DescriptionList'
 import '@testing-library/jest-dom'
 
-describe('Description list details', () => {
+describe('Description List Description', () => {
   it('renders', () => {
     render(<DescriptionList.Details>Test</DescriptionList.Details>)
 

packages/react/src/DescriptionList/DescriptionListTerm.test.tsx

@@ -3,7 +3,7 @@ import { createRef } from 'react'
 import { DescriptionList } from './DescriptionList'
 import '@testing-library/jest-dom'
 
-describe('Description list term', () => {
+describe('Description List Term', () => {
   it('renders', () => {
     render(<DescriptionList.Term>Test</DescriptionList.Term>)
 

proprietary/tokens/src/components/ams/description-list.tokens.json

@@ -4,15 +4,17 @@
       "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": "{ams.space.sm}" },
       "inverse-color": { "value": "{ams.color.primary-white}" },
       "line-height": { "value": "{ams.text.level.5.line-height}" },
       "row": {
         "gap": { "value": "{ams.space.sm}" }
       },
+      "term": {
+        "font-weight": { "value": "{ams.text.font-weight.bold}" }
+      },
       "details": {
-        "font-weight": { "value": "{ams.text.font-weight.bold}" },
+        "font-weight": { "value": "{ams.text.font-weight.normal}" },
         "padding-inline-start": { "value": "{ams.space.lg}" }
       }
     }

storybook/src/components/DescriptionList/DescriptionList.docs.mdx

@@ -14,11 +14,23 @@ import README from "../../../../packages/css/src/components/description-list/REA
 
 ## Examples
 
-### Multiple details
+### Multiple descriptions
 
-A term may have multiple details.
+A term may have multiple descriptions.
 
-<Canvas of={DescriptionListStories.MultipleDetails} />
+<Canvas of={DescriptionListStories.MultipleDescriptions} />
+
+### Rich description
+
+A description can include rich content such as inline formatting, links, paragraphs, and even lists.
+
+<Canvas of={DescriptionListStories.RichDescription} />
+
+### Multiple terms
+
+Multiple terms may share one description.
+
+<Canvas of={DescriptionListStories.MultipleTerms} />
 
 ### Inverse colour
 

storybook/src/components/DescriptionList/DescriptionList.stories.tsx

@@ -3,25 +3,27 @@
  * Copyright Gemeente Amsterdam
  */
 
+import { Link, Paragraph, UnorderedList } from '@amsterdam/design-system-react'
 import { DescriptionList } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 import { inverseColorDecorator } from '../shared/decorators'
-import { exampleParagraph } from '../shared/exampleContent'
-
-const paragraph = exampleParagraph()
 
 const meta = {
   title: 'Components/Text/Description List',
   component: DescriptionList,
   decorators: [inverseColorDecorator],
   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>,
+      <DescriptionList.Term key={1}>het hoger onderwijs</DescriptionList.Term>,
+      <DescriptionList.Details key={2}>het hbo en wo</DescriptionList.Details>,
+      <DescriptionList.Term key={3}>het mbo en hoger onderwijs</DescriptionList.Term>,
+      <DescriptionList.Details key={4}>het vervolgonderwijs</DescriptionList.Details>,
+      <DescriptionList.Term key={5}>laagopgeleid</DescriptionList.Term>,
+      <DescriptionList.Details key={6}>praktisch opgeleid</DescriptionList.Details>,
+      <DescriptionList.Term key={7}>hoogopgeleid</DescriptionList.Term>,
+      <DescriptionList.Details key={8}>theoretisch opgeleid</DescriptionList.Details>,
+      <DescriptionList.Term key={9}>opleidingsniveau</DescriptionList.Term>,
+      <DescriptionList.Details key={10}>onderwijsrichting</DescriptionList.Details>,
     ],
     inverseColor: false,
   },
@@ -33,16 +35,48 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
-export const MultipleDetails: Story = {
+export const MultipleDescriptions: Story = {
+  args: {
+    children: [
+      <DescriptionList.Term key={1}>blinde, slechtziende</DescriptionList.Term>,
+      <DescriptionList.Details key={2}>persoon met een visuele beperking</DescriptionList.Details>,
+      <DescriptionList.Details key={3}>persoon met een visuele handicap</DescriptionList.Details>,
+      <DescriptionList.Details key={4}>persoon die blind is</DescriptionList.Details>,
+      <DescriptionList.Details key={5}>persoon die slechtziend is</DescriptionList.Details>,
+    ],
+  },
+}
+
+export const RichDescription: Story = {
+  args: {
+    children: [
+      <DescriptionList.Term key={1}>Amsterdam Light Festival</DescriptionList.Term>,
+      <DescriptionList.Details key={2}>
+        <Paragraph className="ams-mb--sm">
+          Een jaarlijks evenement waarbij kunstenaars van over de hele wereld hun{' '}
+          <strong>creatieve lichtinstallaties</strong> tonen. De kunstwerken zijn verspreid over de stad en zijn zowel
+          vanaf het water als vanaf de kant te bewonderen.
+        </Paragraph>
+        <UnorderedList>
+          <UnorderedList.Item>Kleed je warm aan, want de meeste exposities zijn buiten.</UnorderedList.Item>
+          <UnorderedList.Item>Er zijn begeleide boottochten en wandelroutes beschikbaar.</UnorderedList.Item>
+          <UnorderedList.Item>
+            Voor de volledige lijst met exposities kun je <Link href="#">de festivalbrochure downloaden</Link>.
+          </UnorderedList.Item>
+        </UnorderedList>
+      </DescriptionList.Details>,
+    ],
+  },
+}
+
+export const MultipleTerms: Story = {
   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}>Noord</DescriptionList.Details>,
-      <DescriptionList.Details key={5}>Oost</DescriptionList.Details>,
-      <DescriptionList.Details key={6}>Zuid</DescriptionList.Details>,
-      <DescriptionList.Details key={7}>West</DescriptionList.Details>,
+      <DescriptionList.Term key={1}>mbo-leerling</DescriptionList.Term>,
+      <DescriptionList.Term key={2}>mbo-scholier</DescriptionList.Term>,
+      <DescriptionList.Details key={3} style={{ gridRow: '1 / 2' }}>
+        mbo-student
+      </DescriptionList.Details>,
     ],
   },
 }