Abbreviate - Design System - Githubissues

Capgemini / dcx-react-library

React Library UI/UX agnostic

https://main--6069a6f47f4b9f002171f8e1.chromatic.com

MIT License

113 stars 6 forks source link

Abbreviate - Design System #530

Closed cg-mmirca closed 10 months ago

cg-mmirca commented 1 year ago

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 commented 10 months ago

https://github.com/Capgemini/dcx-react-library/pull/542