Details - Design System

# Details - Design System

## 1 - Prerequisites

- Host element will have the `.dcx-details` class name.
- Host element will have the `.dcx-details--open` class name when the details is expanded.
- It will have sub-element with the `.dcx-details-text` class name.
- It will have sub-element with the `.dcx-details-summary` class name.
- It will have sub-element with the `.dcx-details-summary-text` class name.

## 2 - Overview

### 2.1 - Possible states

| Name | Description |
| ------- | ----------------------------------------- |
| Default | Instance without open prop or falsy value |
| Open | Instance with open prop and true value |

### 2.2 - Variants

- NONE

### 2.3 - Structure

- Details

| Element | Description |  Token Name |
| ------------ | --------------------------------- | ------------ |
| Details | The details container itself | details |
| Details Text | The text details container itself | details_text |
| Summary | The summary container itself | summary |
| Summary Text | The text summary container itself | summary_text |

### 2.4 - Tokens definition

Considerations:

- ❗ Take a close look to the Accordion 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-details
- border-color-details
- spacing-y-summary
- spacing-x-summary
- border-width-details
- 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/details-design-system'
```