Add decoration prop to Body component (#2678)

sumup-oss · Sep 9, 2024 · 0652935 · 0652935
1 parent ae6e0bc
commit 0652935
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 3 deletions.
diff --git a/.changeset/hip-weeks-happen.md b/.changeset/hip-weeks-happen.md
@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Added a new `decoration` prop to the Body component. Choose between the `italic` and `strikethrough` styles.
diff --git a/packages/circuit-ui/components/Body/Body.mdx b/packages/circuit-ui/components/Body/Body.mdx
@@ -24,13 +24,19 @@ The Body component comes in three sizes. Use the default `m` size in most cases.
 
 ### Weights
 
-The Body component comes in two weights. Use the default `regular` weight in most cases.
+The Body component comes in two weights. Use the default `regular` weight in most cases. Use the `as` prop to render bold text with the `strong` HTML element if appropriate.
+
+<Story of={Stories.Weights} />
+
+### Weights
+
+The Body component comes in two styles. Use the `as` prop to render the component as the `em` or `del` HTML elements if appropriate.
 
 <Story of={Stories.Weights} />
 
 ### Colors
 
-The Body component accepts any foreground color. Use the default `normal` color in most cases.
+The Body component accepts any foreground color token name. Use the default `normal` color in most cases.
 
 <Story of={Stories.Colors} />
 

diff --git a/packages/circuit-ui/components/Body/Body.module.css b/packages/circuit-ui/components/Body/Body.module.css
@@ -28,6 +28,16 @@
   font-weight: var(--cui-font-weight-bold);
 }
 
+/* Decorations & styles */
+
+.italic {
+  font-style: italic;
+}
+
+.strikethrough {
+  text-decoration: line-through;
+}
+
 /* Colors */
 
 .normal {

diff --git a/packages/circuit-ui/components/Body/Body.stories.tsx b/packages/circuit-ui/components/Body/Body.stories.tsx
@@ -51,6 +51,15 @@ export const Weights = (args: BodyProps) =>
     </Body>
   ));
 
+const decorations = ['italic', 'strikethrough'] as const;
+
+export const Decorations = (args: BodyProps) =>
+  decorations.map((decoration) => (
+    <Body key={decoration} {...args} decoration={decoration}>
+      {content}
+    </Body>
+  ));
+
 const colors = [
   'normal',
   'subtle',

diff --git a/packages/circuit-ui/components/Body/Body.tsx b/packages/circuit-ui/components/Body/Body.tsx
@@ -41,10 +41,20 @@ export interface BodyProps extends HTMLAttributes<HTMLParagraphElement> {
     | 'two';
   /**
    * Choose from two font weights. Default: `regular`.
+   *
+   * Use the `as` prop to render the component as the `strong` HTML element
+   * if appropriate.
    */
   weight?: 'regular' | 'bold';
   /**
-   * Choose a foreground color. Default: `normal`.
+   * Choose a style or text decoration. Underline is reserved for hyperlinks.
+   *
+   * Use the `as` prop to render the component as the `em` or `del` HTML
+   * elements if appropriate.
+   */
+  decoration?: 'italic' | 'strikethrough';
+  /**
+   * Choose a foreground color token name. Default: `normal`.
    */
   color?:
     | 'normal'
@@ -95,6 +105,7 @@ export const Body = forwardRef<HTMLParagraphElement, BodyProps>(
       as,
       size: legacySize = 'm',
       weight = 'regular',
+      decoration,
       color = 'normal',
       variant,
       ...props
@@ -144,6 +155,7 @@ export const Body = forwardRef<HTMLParagraphElement, BodyProps>(
           classes[size],
           classes[weight],
           classes[color],
+          decoration && classes[decoration],
           variant && classes[variant],
           className,
         )}