diff --git a/.changeset/hip-weeks-happen.md b/.changeset/hip-weeks-happen.md new file mode 100644 index 0000000000..8012666611 --- /dev/null +++ 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 index d16219d2aa..2cfdf1e896 100644 --- 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. + + + +### 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. ### 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. diff --git a/packages/circuit-ui/components/Body/Body.module.css b/packages/circuit-ui/components/Body/Body.module.css index c6a2f30a30..3b78208a1e 100644 --- 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 index f090c924b9..14f28f3a8d 100644 --- 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) => )); +const decorations = ['italic', 'strikethrough'] as const; + +export const Decorations = (args: BodyProps) => + decorations.map((decoration) => ( + + {content} + + )); + const colors = [ 'normal', 'subtle', diff --git a/packages/circuit-ui/components/Body/Body.tsx b/packages/circuit-ui/components/Body/Body.tsx index 02f9af185f..67a89b47f2 100644 --- 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 { | '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( as, size: legacySize = 'm', weight = 'regular', + decoration, color = 'normal', variant, ...props @@ -144,6 +155,7 @@ export const Body = forwardRef( classes[size], classes[weight], classes[color], + decoration && classes[decoration], variant && classes[variant], className, )}