Heading - Design System

[cg-mmirca]

Prerequisites

⚠️ This ticket can only be start once the ticket 450 is completed

• Heading element will have the .dcx-heading class name
• Heading element will have .dcx-button--[level] class name for all possible variants

Overview

Possible states:

• Default

Variants:

• level 1
• level 2
• level 3
• level 4
• level 5
• level 6

We need to define tokens for all the combinations between states and variants:

• default-level-1
• default-level-2
• default-level-3
• etc.

Keeping in mind we have the elements:

• Heading (element itself) -> heading

Storybook

Create the pages for:

• Playground
• Default
• AccessibleTheme
• DarkTheme
• MaterialTheme

On each MDX page make examples for:

• Level 1
• Level 2
• Level 3
• Level 4
• Level 5
• Level 6

Token definition

Considerations:

• Take as reference the FormSelect component. Take into consideration FormSelect will be refactored to follow the token names as described bellow in "possible tokens".
• Add the tokens to src/design-system/tokens.json
• Define all styles in src/design-system/heading.css
• Add import to the new CSS file in src/design-system/index.css

Possible tokens:

• color-text-heading-level_1
• color-text-heading-level_2
• font-family-heading-level_1
• font-weight-heading-level_2
• font-size-heading-level_3
• etc.

Follow the naming pattern:

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

F.e. for font-weight-heading-level_2 we have:

• category: font
• property: weight
• element: heading
• variant: level_2
• state: default -> not necessary to show in name

Please follow these steps to create your branch:

git checkout release/0.8
git pull
git checkout -b 'feature/ds-heading'

[daniele-zurico]

ticket #450 completed and merged in release/0.8

[daniele-zurico]

closed by https://github.com/Capgemini/dcx-react-library/pull/521