Add example of rich content in description

Amsterdam · Oct 21, 2024 · e0bda8b · e0bda8b
1 parent a588ca4
commit e0bda8b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/storybook/src/components/DescriptionList/DescriptionList.docs.mdx b/storybook/src/components/DescriptionList/DescriptionList.docs.mdx
@@ -20,6 +20,12 @@ A term may have multiple descriptions.
 
 <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.

diff --git a/storybook/src/components/DescriptionList/DescriptionList.stories.tsx b/storybook/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -3,6 +3,7 @@
  * 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'
@@ -46,6 +47,28 @@ export const MultipleDescriptions: Story = {
   },
 }
 
+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: [