<!-- Docs styles -->
import { Story, Canvas, Preview, ArgsTable   } from '@storybook/addon-docs';
import image1 from '../../stories/assets/accordion/1.png';
import image2 from '../../stories/assets/accordion/2.png';
import image3 from '../../stories/assets/accordion/3.png';
import image4 from '../../stories/assets/accordion/4.png';
import image5 from '../../stories/assets/accordion/5.png';
import image6 from '../../stories/assets/accordion/6.png';
import image7 from '../../stories/assets/accordion/7.png';
import image8 from '../../stories/assets/accordion/8.png';
import image9 from '../../stories/assets/accordion/tag.png';


<style>
  {`
    .sbdocs-table tr * {
      text-align: center;
      font-weight: bold;
    }

    img {
      display: block;
      margin: 0 auto;
    }

    table {
      margin: 0 auto !important;
    }
  `}
</style>

<img src={image9} width="150"/>

# Acordeón / Accordion

El componente acordeón es un componente muy utilizado y que ofrece la ventaja de contener información de un tema específico en un pequeño espacio. Este espacio está organizado mediante **encabezados** que podrán expandirse y ocultarse en función del interés del usuario para consumir dicha información.

<img src={image1} width="400"/>

Su uso es muy sencillo, cada panel de acordeón contiene una lista de encabezados apilados verticalmente con un **control** en el título, que al ser pulsado por el usuario, despliega la información oculta para poder ser visualizada, y al volver a ser pulsado, se contrae de nuevo la información, ahorrando espacio y reduciendo el desplazamiento vertical de la página.

<img src={image2} width="400"/>

Se recomienda usar el componente acordeón para organizar información relacionada entre sí, para acortar las páginas y reducir el desplazamiento cuando el contenido no es importante para leerlo en su totalidad y/o cuando el espacio es escaso y el contenido no se puede mostrar todo a la vez, como en un dispositivo móvil o en un panel lateral.

### Variaciones

El componente presenta una variación de interacción relacionada con la posicióin del control de despliegue del acordeón.

| **Control derecho (por defecto)**                            | **Control izquierdo**                                        |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| <br/><img src={image3} width="300"/><br/> | <br/><img src={image4} width="300"/><br/>   |

La manera predeterminada de alinear el icono del control de despliegue será a la **derecha**, al final del encabezado, permitiendo de esta manera que el título del encabezado se encuentre en la parte inicial y pueda alinearse con otros elementos del diseño.

Existe una variación del componente con el control en el lado **izquierdo**, para organizaciones de contenido como un árbol. En cualquier caso, esta alternativa no es la más recomendable puesto que rompe la línea de lectura habitual.

### Contenido

Los acordeones pueden hacer que el procesamiento y descubrimiento de información sea más efectivo. Sin embargo, oculta el contenido de los usuarios y es importante tener en cuenta que un usuario no se da cuenta o no lee todo el contenido incluido.

También hay que tener en cuenta el tipo y la longitud del contenido con el que está trabajando a la hora de elegir un contenedor. En el caso de que la longitud del texto sea muy larga no se recomienda el uso del acordeón, sino una nueva página completa con encabezados normales. En el caso de que la longitud del texto, tampoco se recomienda el uso del acordeón sino otro tipo de componentes como la lista estructurada.

### Anatomía

El acordeón está formado por un **encabezado** que contiene el **título** de la sección del panel y el **control** para desplegar y ocultar la información presente en el panel. El título deberá ser lo más breve posible sin dejar de ser claro y descriptivo, ya que permite al usuario poder decidir que secciones leer. Dependiendo de la estructura de la página este encabezado puede ser un texto del mismo estilo del cuerpo, o utilizar un aspecto de encabezados de bloque, de sección…

Por otro lado, el **cuerpo del contenido** contiene la información relacionada con el título. El contenido se podrá dividir en párrafos e incluir subtítulos si fuera necesario, aunque no se recomienda que sea complejo. El contenido del panel siempre se desplazará de manera vertical, nunca de manera horizontal.

La tipografía del texto del encabezado y del cuerpo por defecto será Lato 16px regular. La altura de la caja con el acordeón plegado será de 40px. Cuando el cuerpo de la caja se despliega, ocupará el contenido necesario para mostrar la información.

<img src={image5} width="400"/>

Respecto a la **alineación** del texto con respecto al sistema de rejillas, tanto el texto del encabezado como del desplegable deben estar alineados con el texto de la página, o en su defecto del contenedor.

### Comportamiento

El componente acordeón contiene dos estados principales: colapsado y extendido. El icono del control indica este estado. Cuando el acordeón se encuentra plegado, el icono apuntará hacia abajo. Sin embargo, cuando el acordeón se encuentra expandido, el icono apuntará hacia arriba.

El comportamiento inicial del acordeón será siempre con todos los paneles plegado, permitiendo al usuario que pueda expandir la información que necesite consumir. El usuario podrá expandir y contraer de manera independiente cada sección, permitiendo si lo desea, abrir y cerrar varias secciones a la vez.

Los usuarios podrán expandir o contraer cada sección haciendo clic con el ratón sobre el icono de chevrón o en cualquier parte del área del encabezado o pulsando la tecla «*intro*» o «*espacio*» mientras esté seleccionado el encabezado de la sección, que podrán ir seleccionado a través de las teclas de tabulación.

| **Acordeón con un único panel desplegado**               | **Acordeón con varios paneles desplegados**      |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| <br/><img src={image6} width="250"/><br/>  | <br/><img src={image7} width="250"/><br/>  |

El componente de acordeón tiene varios estados: enabled, hover, focus, open, disabled, y skeleton.

<img src={image8} />


### Código

```
<accordion></accordion>
```

### Tokens

**Color**

| **Class**                 | **Property** | **Color token** |
| :------------------------ | :----------- | :-------------- |
| `.bx--accordion__title`   | color        | `$text-01`      |
| `.bx--accordion__content` | color        | `$text-01`      |
| `.bx--accordion__arrow`   | fill         | `$icon-01`      |
| `.bx--accordion__item`    | border-top   | `$ui-03`        |

**Color de estados**

| **Class**                        | **Property** | **Color token** |
| :------------------------------- | :----------- | :-------------- |
| `.bx--accordion__heading:hover`  | background   | `$hover-ui`     |
| `.bx--accordion__title:focus`    | border       | `$focus`        |
| `.bx--accordion__title:disabled` | background   | `$disabled-02`  |
| `.bx--accordion__arrow:disabled` | fill         | `$disabled-02`  |
| `.bx--accordion__item--disabled` | border-top   | `$disabled-01`  |

**Tipografía**

| **Class**                 | **Type token**  |
| :------------------------ | :-------------- |
| `.bx--accordion__title`   | `$body-long-01` |
| `.bx--accordion__content` | `$body-long-01` |


**Estructura**

| **Class**                      | **Property**   | **Spacing token** |
| :----------------------------- | :------------- | :---------------- |
| `.bx--accordion__heading`      | height         | -                 |
| `.bx--accordion__item`         | border-top     | -                 |
| `.bx--accordion__arro`         | size           | -                 |
| `.bx--accordion__arrow`        | padding-right  | `$spacing-05`     |
| `.bx--accordion__title`        | margin-left    | `$spacing-05`     |
| `.bx--accordion__content`      | padding-right  | `-`               |
| `.bx--accordion__content`      | padding-top    | `$spacing-0`3     |
| `.bx--accordion__content`      | padding-left   | `$spacing-05`     |
| `.bx--accordion__item--active` | padding-bottom | `$spacing-0`6     |