Capgemini / dcx-react-library

React Library UI/UX agnostic

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

MIT License

107 stars 7 forks source link

Card - Design System #562

Closed daniele-zurico closed 4 months ago

daniele-zurico commented 8 months ago

Card - Design System

1 - Prerequisites

Host element will have the .dcx-card 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
Box	The box containing the content. This a block element.	card

2.4 - Tokens definition

Considerations:

Add the tokens to src/design-system/tokens.json
Define all styles in src/design-system/card.css
Add import to the new CSS file in src/design-system/index.css

Possible tokens:

spacing-y-card
spacing-x-card
border-color-card
border-radius-card
etc.

Note that this a simple container element. It will just render the children with some space around them.

It should not style the text itself. The text will bring its own styles.

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/card

jgonza16 commented 4 months ago

is duplicate with https://github.com/Capgemini/dcx-react-library/issues/601