Tabs - Design System

# Tabs - Design System

## 1 - Prerequisites

- Host element will have the `.dcx-tabs` class name.
- It will have sub-element with the `.dcx-tabs-list` class name.
- It will have sub-element with the `.dcx-tabs-list-item` class name.
- It will have sub-element with the `.dcx-tabs-list-item--selected` class name when the details is selected.
- It will have sub-element with the `.dcx-tabs-list-item--disabled` class name when the details is disabled.
- It will have sub-element with the `.dcx-tabs-tab` class name.
- It will have sub-element with the `.dcx-tabs-content` class name.

## 2 - Overview

### 2.1 - Possible states

| Name | Description |
| -------- | ------------------------------------------ |
| Default | Instance default state |
| Selected | Instance with selected prop and true value |
| Disabled | Instance with disabled prop and true value |

### 2.2 - Variants

- NONE

### 2.3 - Structure

- Tabs

| Element | Description |  Token Name |
| ------------ | ----------------------------------- | -------------- |
| Tab | The tab container itself | tab |
| TabsList | The tabs list container itself | tabs_list |
| TabsListItem | The tabs list item container itself | tabs_list_item |
| TabsTab | The tabs tab container itself | tabs_tab |
| TabsContent | The tabs content container itself | tabs_content |

### 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-tab
- border-color-tabs_list
- spacing-y-accordion_item_box
- spacing-x-tabs_list_item
- border-width-tabs_content
- 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/tabs-design-system'
```