Card - Design System

[jgonza16]

Card - Design System

1 - Prerequisites

• Host element will have the .dcx-card class name.
• Host element will have the .dcx-card-vertical or .dcx-card-horizontal class name.
• Host element will have the .dcx-card--selected class name when the selected property is true.
• It will have sub-element with the .dcx-card-header class name.
• It will have sub-element with the .dcx-card-content class name.
• It will have sub-element with the .dcx-card-image class name.
• It will have sub-element with the .dcx-card-actions class name.
• It will have sub-element with the .dcx-card-footer class name.

2 - Overview

2.1 - Possible states

Name	Description
Default	Instance without specific properties defined
Focus	Interact variant instance while receiving focus on main container
Hover	Interact variant instance while receiving focus on main container
Selected	Interact variant instance while receiving focus on main container

2.2 - Variants

Name	Description
Default	Default look & feel
interact	Interactionable look & feel
vertical	Vertical layout look & feel
horizontal	Horizontal layout look & feel

2.3 - Structure

• Card

Element	Description	Token Name
Box	The card container article itself	card_box

• CardHeader

  Element	Description	Token Name
  Box	The container item box	card_header_box
  Text	The header's item text itself	[text-tokens]

• CardContent

  Element	Description	Token Name
  Box	The container item	card_content_box
  Text	The content's item text itself	[text-tokens]

• CardImage

  Element	Description	Token Name
  Box	The imag container img itself	card_image

• CardActions

  Element	Description	Token Name
  Box	The container item	card_actions_box
  Text	The content's item text itself	[text-tokens]

• CardFooter

  Element	Description	Token Name
  Box	The container item	card_footer_box
  Text	The content's item text itself	[text-tokens]

2.4 - Tokens definition

Considerations:

• ❗ Take a close look to the FormSelect component. It is a form element as well, the tokens and styling approach should be similar.
• Add the tokens to src/design-system/tokens.json
• Define all styles in src/design-system/checkbox.css
• Add import to the new CSS file in src/design-system/index.css

Possible tokens:

• spacing-x-card_box
• border-color-card_box-hover
• spacing-y-card_content_box
• spacing-x-card_header_box
• border-width-card_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.1.0
git pull
git checkout -b 'feature/card-design-system'

[daniele-zurico]

closed by #562