Progress - Design System

[jgonza16]

Progress - Design System

1 - Prerequisites

• Host element will have the .dcx-progress 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
ProgressBox	Container native Input	spacing-x-formcontrol
Progress	Native progress itself	formcontrol

2.4 - Tokens definition

Considerations:

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

Possible tokens:

• spacing-x-formcontrol
• color-background-progress_box
• color-background-formcontrol
• etc.

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.1.0
git pull
git checkout -b 'feature/progress-design-system'