Breadcrumb - Design System

# Breadcrumb - Design System

## 1 - Prerequisites

- Host element will have the `.dcx-breadcrumb` class name.
- It will have sub-element with the `.dcx-breadcrumb-item` class name.
- It will have sub-element with the `.dcx-breadcrumb-item--selected` class name when the item is selected.

## 2 - Overview

### 2.1 - Possible states

| Name | Description |
| -------- | --------------------------------------------- |
| Default | Instance without selected prop or falsy value |
| Selected | Instance with selected prop and true value |

### 2.2 - Variants

- NONE

### 2.3 - Structure

- Breadcrumb

| Element | Description |  Token Name |
| ------- | ---------------------------------- | ----------- |
| Box | The breadcrumb ol container itself | breadcrumb |

- BreadcrumbItem
| Element | Description |  Token Name |
| --------------- | --------------------------- | ------------- |
| Box | The container li item box | breadcrumb_item |

### 2.4 - Tokens definition

Considerations:

- ❗ Take a close look to the Card 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/card.css`
- Add import to the new CSS file in `src/design-system/index.css`

Possible tokens:

- spacing-x-breadcrumb
- border-color-breadcrumb
- spacing-y-breadcrumb_item
- spacing-x-breadcrumb
- border-width-breadcrumb
- etc.

Follow the [naming pattern](https://github.com/Capgemini/dcx-react-library/wiki/Contributing#11---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:

```bash
git checkout release/1.1.0
git pull
git checkout -b 'feature/breadcrumb-design-system'
```