Blockquote - 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

Blockquote - Design System #531

Closed cg-mmirca closed 7 months ago

cg-mmirca commented 9 months ago

Prerequisites

Abbreviate element will have the .dcx-blockquote 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	body
Box	The box containing the blockquote, it's common to have a display block with padding	blockquote_box

Storybook

Create the pages for:

Playground
Default
AccessibleTheme
DarkTheme
MaterialTheme

On each MDX page make examples for:

Default blockquote

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/blockquote.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
spacing-x-blockquote_box
spacing-y-blockquote_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: 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-blockquote'

jgonza16 commented 7 months ago

closed with https://github.com/Capgemini/dcx-react-library/pull/571