DescriptionList - Design System

[jgonza16]

DescriptionList - Design System

1 - Prerequisites

• 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

Possible tokens:

• color-text-pre_body
• color-background-pre_box
• font-family-pre_body
• spacing-x-desc_list_box
• spacing-y-desc_term_box
• border-color-desc_detail_box
• 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.0.0
git pull
git checkout -b 'feature/description-list-ds'

[jgonza16]

close with #597