Use Paragraph components in example code

Amsterdam · Jul 22, 2024 · cb0f1c5 · cb0f1c5
1 parent c69d6c7
commit cb0f1c5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/storybook/src/utils/Gap/Gap.stories.tsx b/storybook/src/utils/Gap/Gap.stories.tsx
@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+import { Paragraph } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 import type { HTMLAttributes } from 'react'
 
@@ -16,9 +17,9 @@ const Gap = ({ children, length }: GapProps) => <span className={`ams-gap--${len
 
 const render = ({ length }: GapProps) => (
   <div className={`ams-gap--${length}`}>
-    <p className="ams-paragraph">These paragraphs are separated by a gap.</p>
-    <p className="ams-paragraph">These paragraphs are separated by a gap.</p>
-    <p className="ams-paragraph">These paragraphs are separated by a gap.</p>
+    <Paragraph>These paragraphs are separated by a gap.</Paragraph>
+    <Paragraph>These paragraphs are separated by a gap.</Paragraph>
+    <Paragraph>These paragraphs are separated by a gap.</Paragraph>
   </div>
 )
 

diff --git a/storybook/src/utils/Margin/Margin.stories.tsx b/storybook/src/utils/Margin/Margin.stories.tsx
@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+import { Paragraph } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
 import type { HTMLAttributes } from 'react'
 
@@ -17,7 +18,7 @@ const Margin = ({ children, length }: MarginProps) => <span className={`ams-mb--
 const render = ({ length }: MarginProps) => (
   <div>
     <h1 className={`ams-heading ams-heading--2 ams-mb--${length}`}>This heading has a bottom margin</h1>
-    <p className="ams-paragraph">It introduces white space between the heading and this paragraph below.</p>
+    <Paragraph>It introduces white space between the heading and this paragraph below.</Paragraph>
   </div>
 )