Code Snippet - Design System - Githubissues

Capgemini / dcx-react-library

React Library UI/UX agnostic

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

MIT License

107 stars 7 forks source link

Code Snippet - Design System #532

Closed cg-mmirca closed 7 months ago

cg-mmirca commented 9 months ago

Prerequisites

Abbreviate element will have the .dcx-code class name

Overview

Possible states:

Default

Variants: No variants

Keeping in mind we have the elements:	Element	Description	Token Name
Text	The text itself, should match regular body styles but have different font family	pre_body
Box	The box containing the text, it's common to have a display inline-block. We could add some small padding and background color	pre_box

Design ideas

Screenshot 2023-09-22 at 09 57 49

Storybook

Create the pages for:

Playground
Default
AccessibleTheme
DarkTheme
MaterialTheme

On each MDX page make examples for:

Default code snippet

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/code-snippet.css
Add import to the new CSS file in src/design-system/index.css

Possible tokens:

color-text-pre_body
font-family-pre_body
font-weight-pre_body
font-size-pre_body
color-background-pre_box
spacing-pre_box
etc.

Follow the naming pattern:

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

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

category: font
property: size
element: pre_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-code-snippet'

jgonza16 commented 7 months ago

Closed with https://github.com/Capgemini/dcx-react-library/pull/543