Capgemini / dcx-react-library

React Library UI/UX agnostic

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

MIT License

107 stars 7 forks source link

Preformatted Text - Design System #536

Closed cg-mmirca closed 7 months ago

cg-mmirca commented 9 months ago

PreformattedText - Design System

1 - Prerequisites

Host element will have the .dcx-pre class name

2 - Overview

2.1 - Possible states

Name	Description
Default	Instance without specific properties defined

2.2 - Variants

No variants

2.3 - Structure

Element	Description	Token Name
Text	The text itself	pre_body
Box	The box that surrounds the text. This a block element.	pre_box

The difference with CodeSnippet element is that this one is an block element. It can have box styles such as padding.

2.4 - Tokens definition

Considerations:

Take as reference the Paragraph and CodeSnippet components
Add the tokens to src/design-system/tokens.json
Define all styles in src/design-system/preformatted-text.css
Add import to the new CSS file in src/design-system/index.css

Possible tokens:

color-text-pre_body
color-background-pre_box
font-family-pre_body
etc.

Note that this element is similar to CodeSnippet Consider using similar token values for size.

Follow the naming pattern

3 - Storybook

Create the pages for:

Playground
Default
AccessibleTheme
DarkTheme
MaterialTheme

On each MDX page make examples for each possible variant

4 - Initial setup

Please follow these steps to create your branch:

git checkout release/1.0.0
git pull
git checkout -b 'feature/preformatted-text'

mmirca commented 7 months ago

Closed by https://github.com/Capgemini/dcx-react-library/pull/575