Host element will have the .dcx-description-list class name. It will have sub-elements with the .dcx-description-term and .dcx-description-detail class names.
2 - Overview
2.1 - Possible states
Name
Description
Default
Instance without specific properties defined
2.2 - Variants
No variants
2.3 - Structure
DescriptionList
Element
Description
Token Name
Box
The description list itself
desc_list_box
Term
Element
Description
Token Name
Box
The description-list's item box
desc_term_box
Text
The description-list's item text itself
[text-tokens]
Detail
Element
Description
Token Name
Box
The description-list's item
desc_detail_box
Text
The description-list's item text itself
[text-tokens]
2.4 - Tokens definition
Considerations:
Take as reference the Paragraph and CodeSnippet components
Add the tokens to src/design-system/tokens.json
Define all styles in src/design-system/preformatted-text.css
Add import to the new CSS file in src/design-system/index.css
DescriptionList - Design System
1 - Prerequisites
.dcx-description-list
class name. It will have sub-elements with the.dcx-description-term
and.dcx-description-detail
class names.2 - Overview
2.1 - Possible states
2.2 - Variants
No variants
2.3 - Structure
2.4 - Tokens definition
Considerations:
src/design-system/tokens.json
src/design-system/preformatted-text.css
src/design-system/index.css
Possible tokens:
Follow the naming pattern
3 - Storybook
Create the pages for:
On each MDX page make examples for each possible variant
4 - Initial setup
Please follow these steps to create your branch: