Abbreviate - Design System

[cg-mmirca]

Prerequisites

• Abbreviate element will have the .dcx-abbreviate class name

Overview

Possible states:

• Default

Variants:
No variants

Keeping in mind we have the elements:

Element	Token Name
Text	body

Storybook

Create the pages for:

• Playground
• Default
• AccessibleTheme
• DarkTheme
• MaterialTheme

On each MDX page make examples for:

• Default abbreviate

Token definition

Considerations:

• Take as reference the Paragraph component
• Add the tokens to src/design-system/tokens.json
• Define all styles in src/design-system/abbreviate.css
• Add import to the new CSS file in src/design-system/index.css

Possible tokens:

• color-text-body
• font-family-body
• font-weight-body
• font-size-body
• etc.

Follow the naming pattern:

[token_category]-[property]-[element]-[variant]-[state]

F.e. for font-size-body we have:

• category: font
• property: size
• element: body
• variant: default -> not necessary to show in name
• state: default -> not necessary to show in name

Please follow these steps to create your branch:

git checkout release/1.0.0
git pull
git checkout -b 'feature/ds-abbreaviate'

[mmirca]

#542