Rename Description List ‘details’ to ’description’

Amsterdam · Oct 25, 2024 · 3dcf2fd · 3dcf2fd
1 parent 88dee33
commit 3dcf2fd
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 48 deletions.
diff --git a/packages/css/src/components/description-list/description-list.scss b/packages/css/src/components/description-list/description-list.scss
@@ -54,15 +54,15 @@
   }
 }
 
-@mixin reset-details {
+@mixin reset-description {
   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);
+.ams-description-list__description {
+  font-weight: var(--ams-description-list-description-font-weight);
+  padding-inline-start: var(--ams-description-list-description-padding-inline-start);
 
-  @include reset-details;
+  @include reset-description;
 
   @media screen and (min-width: $ams-breakpoint-medium) {
     grid-column-start: 2;

diff --git a/packages/react/src/DescriptionList/DescriptionList.tsx b/packages/react/src/DescriptionList/DescriptionList.tsx
@@ -6,7 +6,7 @@
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
-import { DescriptionListDetails } from './DescriptionListDetails'
+import { DescriptionListDescription } from './DescriptionListDescription'
 import { DescriptionListTerm } from './DescriptionListTerm'
 
 export const descriptionListTermsWidths = ['sm', 'md', 'lg'] as const
@@ -43,5 +43,5 @@ DescriptionListRoot.displayName = 'DescriptionList'
 
 export const DescriptionList = Object.assign(DescriptionListRoot, {
   Term: DescriptionListTerm,
-  Details: DescriptionListDetails,
+  Description: DescriptionListDescription,
 })
diff --git a/...ptionList/DescriptionListDetails.test.tsx → ...nList/DescriptionListDescription.test.tsx b/...ptionList/DescriptionListDetails.test.tsx → ...nList/DescriptionListDescription.test.tsx
@@ -5,7 +5,7 @@ import '@testing-library/jest-dom'
 
 describe('Description List Description', () => {
   it('renders', () => {
-    render(<DescriptionList.Details>Test</DescriptionList.Details>)
+    render(<DescriptionList.Description>Test</DescriptionList.Description>)
 
     const component = screen.getByRole('definition')
 
@@ -14,25 +14,25 @@ describe('Description List Description', () => {
   })
 
   it('renders a design system BEM class name', () => {
-    render(<DescriptionList.Details>Test</DescriptionList.Details>)
+    render(<DescriptionList.Description>Test</DescriptionList.Description>)
 
     const component = screen.getByRole('definition')
 
-    expect(component).toHaveClass('ams-description-list__details')
+    expect(component).toHaveClass('ams-description-list__description')
   })
 
   it('renders an additional class name', () => {
-    render(<DescriptionList.Details className="extra">Test</DescriptionList.Details>)
+    render(<DescriptionList.Description className="extra">Test</DescriptionList.Description>)
 
     const component = screen.getByRole('definition')
 
-    expect(component).toHaveClass('ams-description-list__details extra')
+    expect(component).toHaveClass('ams-description-list__description extra')
   })
 
   it('supports ForwardRef in React', () => {
     const ref = createRef<HTMLElement>()
 
-    render(<DescriptionList.Details ref={ref}>Test</DescriptionList.Details>)
+    render(<DescriptionList.Description ref={ref}>Test</DescriptionList.Description>)
 
     const component = screen.getByRole('definition')
 

diff --git a/packages/react/src/DescriptionList/DescriptionListDescription.tsx b/packages/react/src/DescriptionList/DescriptionListDescription.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 DescriptionListDescriptionProps = PropsWithChildren<HTMLAttributes<HTMLElement>>
+
+export const DescriptionListDescription = forwardRef(
+  ({ children, className, ...restProps }: DescriptionListDescriptionProps, ref: ForwardedRef<HTMLElement>) => (
+    <dd {...restProps} ref={ref} className={clsx('ams-description-list__description', className)}>
+      {children}
+    </dd>
+  ),
+)
+
+DescriptionListDescription.displayName = 'DescriptionList.Description'
diff --git a/packages/react/src/DescriptionList/DescriptionListDetails.tsx b/packages/react/src/DescriptionList/DescriptionListDetails.tsx
diff --git a/packages/react/src/DescriptionList/index.ts b/packages/react/src/DescriptionList/index.ts
@@ -1,4 +1,4 @@
 export { DescriptionList } from './DescriptionList'
 export type { DescriptionListProps } from './DescriptionList'
 export type { DescriptionListTermProps } from './DescriptionListTerm'
-export type { DescriptionListDetailsProps } from './DescriptionListDetails'
+export type { DescriptionListDescriptionProps } from './DescriptionListDescription'
diff --git a/proprietary/tokens/src/components/ams/description-list.tokens.json b/proprietary/tokens/src/components/ams/description-list.tokens.json
@@ -11,7 +11,7 @@
       "term": {
         "font-weight": { "value": "{ams.text.font-weight.bold}" }
       },
-      "details": {
+      "description": {
         "font-weight": { "value": "{ams.text.font-weight.normal}" },
         "padding-inline-start": { "value": "{ams.space.lg}" }
       }

diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -15,15 +15,15 @@ const meta = {
   args: {
     children: [
       <DescriptionList.Term key={1}>Het hoger onderwijs</DescriptionList.Term>,
-      <DescriptionList.Details key={2}>Het hbo en wo</DescriptionList.Details>,
+      <DescriptionList.Description key={2}>Het hbo en wo</DescriptionList.Description>,
       <DescriptionList.Term key={3}>Het mbo en hoger onderwijs</DescriptionList.Term>,
-      <DescriptionList.Details key={4}>Het vervolgonderwijs</DescriptionList.Details>,
+      <DescriptionList.Description key={4}>Het vervolgonderwijs</DescriptionList.Description>,
       <DescriptionList.Term key={5}>Laagopgeleid</DescriptionList.Term>,
-      <DescriptionList.Details key={6}>Praktisch opgeleid</DescriptionList.Details>,
+      <DescriptionList.Description key={6}>Praktisch opgeleid</DescriptionList.Description>,
       <DescriptionList.Term key={7}>Hoogopgeleid</DescriptionList.Term>,
-      <DescriptionList.Details key={8}>Theoretisch opgeleid</DescriptionList.Details>,
+      <DescriptionList.Description key={8}>Theoretisch opgeleid</DescriptionList.Description>,
       <DescriptionList.Term key={9}>Opleidingsniveau</DescriptionList.Term>,
-      <DescriptionList.Details key={10}>Onderwijsrichting</DescriptionList.Details>,
+      <DescriptionList.Description key={10}>Onderwijsrichting</DescriptionList.Description>,
     ],
     inverseColor: false,
   },
@@ -48,10 +48,10 @@ 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>,
+      <DescriptionList.Description key={2}>Persoon met een visuele beperking</DescriptionList.Description>,
+      <DescriptionList.Description key={3}>Persoon met een visuele handicap</DescriptionList.Description>,
+      <DescriptionList.Description key={4}>Persoon die blind is</DescriptionList.Description>,
+      <DescriptionList.Description key={5}>Persoon die slechtziend is</DescriptionList.Description>,
     ],
   },
 }
@@ -60,7 +60,7 @@ export const RichDescription: Story = {
   render: (args) => (
     <DescriptionList {...args}>
       <DescriptionList.Term key={1}>Amsterdam Light Festival</DescriptionList.Term>
-      <DescriptionList.Details key={2}>
+      <DescriptionList.Description key={2}>
         <Paragraph className="ams-mb--sm" inverseColor={args.inverseColor}>
           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
@@ -77,7 +77,7 @@ export const RichDescription: Story = {
             .
           </UnorderedList.Item>
         </UnorderedList>
-      </DescriptionList.Details>
+      </DescriptionList.Description>
     </DescriptionList>
   ),
 }
@@ -87,9 +87,9 @@ export const MultipleTerms: Story = {
     children: [
       <DescriptionList.Term key={1}>mbo-leerling</DescriptionList.Term>,
       <DescriptionList.Term key={2}>mbo-scholier</DescriptionList.Term>,
-      <DescriptionList.Details key={3} style={{ gridRow: '1 / 2' }}>
+      <DescriptionList.Description key={3} style={{ gridRow: '1 / 2' }}>
         mbo-student
-      </DescriptionList.Details>,
+      </DescriptionList.Description>,
     ],
   },
 }