Blockquote - Design System

[cg-mmirca]

Prerequisites

• Abbreviate element will have the .dcx-blockquote class name

Overview

Possible states:

• Default

Variants:
No variants

Keeping in mind we have the elements:

Element	Description	Token Name
Text	The text itself, should match regular body styles	body
Box	The box containing the blockquote, it's common to have a display block with padding	blockquote_box

Storybook

Create the pages for:

• Playground
• Default
• AccessibleTheme
• DarkTheme
• MaterialTheme

On each MDX page make examples for:

• Default blockquote

Token definition

Considerations:

• Take as reference the Paragraph component
• Add the tokens to src/design-system/tokens.json
• Define all styles in src/design-system/blockquote.css
• Add import to the new CSS file in src/design-system/index.css

Possible tokens:

• color-text-body
• font-family-body
• font-weight-body
• font-size-body
• spacing-x-blockquote_box
• spacing-y-blockquote_box
• etc.

Follow the naming pattern:

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

F.e. for font-size-body we have:

• category: font
• property: size
• element: body
• variant: default -> not necessary to show in name
• state: default -> not necessary to show in name

Please follow these steps to create your branch:

git checkout release/1.0.0
git pull
git checkout -b 'feature/ds-blockquote'

[jgonza16]

closed with #571