Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add decoration prop to Body component #2678

Merged
merged 1 commit into from
Sep 9, 2024
Merged

Add decoration prop to Body component #2678

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/hip-weeks-happen.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
10 changes: 8 additions & 2 deletions packages/circuit-ui/components/Body/Body.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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} />

Expand Down
10 changes: 10 additions & 0 deletions packages/circuit-ui/components/Body/Body.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,16 @@
font-weight: var(--cui-font-weight-bold);
}

/* Decorations & styles */

.italic {
font-style: italic;
}

.strikethrough {
text-decoration: line-through;
}

/* Colors */

.normal {
Expand Down
9 changes: 9 additions & 0 deletions packages/circuit-ui/components/Body/Body.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
14 changes: 13 additions & 1 deletion packages/circuit-ui/components/Body/Body.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -95,6 +105,7 @@ export const Body = forwardRef<HTMLParagraphElement, BodyProps>(
as,
size: legacySize = 'm',
weight = 'regular',
decoration,
color = 'normal',
variant,
...props
Expand Down Expand Up @@ -144,6 +155,7 @@ export const Body = forwardRef<HTMLParagraphElement, BodyProps>(
classes[size],
classes[weight],
classes[color],
decoration && classes[decoration],
variant && classes[variant],
className,
)}
Expand Down
Loading