<!-- Docs styles -->
import { Story, Canvas, Preview, ArgsTable   } from '@storybook/addon-docs';
import image1 from '../../stories/assets/list/01_Lista_Variaciones_ListaNoOrdenada.png';
import image2 from '../../stories/assets/list/02_Lista_Variaciones_ListaOrdenada.png';
import image3 from '../../stories/assets/list/03_Lista_Variaciones_ListaAnidada.png';
import image4 from '../../stories/assets/list/04_Lista_Anatomia.png';
import image5 from '../../stories/assets/list/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={image5} width="150"/>

# Lista / List


Las listas son un conjunto de elementos con contenido relacionado entre sí. Las listas permiten al usuario reconocer más rápidamente el contenido gracias a la estructuración, y encontrar los conceptos que son relevantes para su necesidad.

Las listas se suelen organizar de manera vertical y se organizan mediante marcadores como un punto o línea y así no destacar el orden de los elementos, o con numeraciones o indicadores de orden si se quiere indicar secuencias o prioridades en los elementos.

También se pueden anidar listas para indicar jerarquías entre los elementos. En estos casos cada sublista se crea sobre la estructura de un elemento de la lista.

No se recomienda usar listas para estructurar contenidos largos. En este caso es preferible utilizar encabezados y párrafos antes que listas.

Generalmente las listas presentan informaciones simples, en caso de estructuras de información más complejas se recomienda la utilización de listas estructuradas o tablas de datos.

### Variaciones

Las listas pueden presentar dos variaciones, listas ordenadas y listas no ordenadas.

| **Listas no ordenadas**  | **Listas ordenadas**   |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| <br/> <img src={image1} width="200"/>    <br/>                        | <br/><img src={image2} width="200"/>   <br/>                          |

Las **listas no ordenadas** se usan cuando el orden de los elementos que componen la lista no sea relevante. Se emplea con elementos del mismo estatus o valor.

Las **listas ordenadas** se usan cuando el orden de los elementos sea relevante, implican un orden o una secuencia. Se usan para dar instrucciones o establecer los pasos de una actividad.

Las **listas anidadas** se usan para mostrar jerarquías entre elementos. En realidad, las listas anidadas son combinaciones de listas a distintos niveles y permiten mezclar listas ordenadas y no ordenadas indistintamente.

<img src={image3} width="600"/>


Existen más variantes según el **contenido** de los elementos de las listas, como las listas de enlaces, listas de índice de contenidos, listas de documentos, etc…

### Contenido

Al representar las listas elementos de información simples, se recomienda que no sea muy largo el texto de cada uno de los elementos. Asimismo, se recomienda que la estructura gramatical de los distintos elementos sea la misma, por ejemplo, no se debe mezclar elementos en voz activa y voz pasiva, o frases declarativas e imperativas, frases y sustantivas…

Los elementos de una lista deben estar ordenados de manera lógica tanto en el caso de listas ordenadas, como en el de listas no ordenadas. Criterios de orden pueden ser la frecuencia de uso de los elementos, la importancia de los mismos, o incluso el orden alfabético de estos.

Se recomienda crear estructuras jerárquicas siempre que sea posible, agrupando conceptos, para facilitar la compresión de la lista y sus elementos.

### Anatomía

La anatomía de los elementos de una lista es la del propio elemento, típicamente textos. El espaciado entre los elementos se mantiene según el espaciado estándar de 8px.

<img src={image4} width="600"/>


### Código

```
<dropdown></dropdown>
```


### Tokens

**Color**

| Element            | Property         | Color token                  |
| :----------------- | :--------------- | :--------------------------- |
| Label              | text color       | `$text-02`                   |
| Field text         | text color       | `$text-01`                   |
| Field text: prompt | text color       | `$text-05`                   |
| Helper text        | text color       | `$text-05`                   |
| Field              | background-color | `$field-01`                  |
|                    | border-bottom    | `$ui-04`                     |
| Field: light       | background-color | `$field-02`                  |
| Chevron            | svg              | `$icon-01`                   |
| Menu option        | text color       | `$text-02`                   |
|                    | background-color | `$field-01`                  |
|                    | border-top       | `$ui-03`                     |
| Menu option: light | background-color | `$field-02`                  |
| Menu               | box-shadow       | `0 2px 6px 0 rgba(0,0,0,.2)` |
| Checkbox           | background-color | `$icon-01`                   |
|                    | check            | `$inverse-01`                |
|                    | border           | `$icon-01`                   |

<br/>

| State          | Element            | Property         | Color token          |
| :------------- | :----------------- | :--------------- | :------------------- |
| Focus          | Field              | border           | `$focus`             |
| Hover          | Field              | background-color | `$hover-ui`          |
|                | Menu option        | background-color | `$hover-ui`          |
|                | Menu option        | text color       | `$text-01`           |
|                | Field: light       | background-color | `$hover-light-ui`    |
|                | Menu option: light | background-color | `$hover-light-ui`    |
| Invalid        | Error icon         | svg              | `$support-01`        |
|                | Field              | border           | `$support-01`        |
|                | Error message      | text-color       | `$text-error`        |
| Warning        | Warning message    | text-color       | `$text-01`           |
|                | Warning icon       | svg              | `$support-03`        |
| Active         | Menu option        | background-color | `$selected-ui`       |
|                | Menu option: light | background-color | `$selected-light-ui` |
| Selected       | Menu option        | background-color | `$selected-ui`       |
|                | Menu option        | checkmark        | `$icon-01`           |
| Multi-selected | Tag                | background-color | `$inverse-02`        |
|                | Tag                | text color       | `$inverse-02`        |
| Disabled       | Field              | background-color | `$disabled-01`       |
|                | Field              | text color       | `$disabled-02`       |
|                | Label              | text color       | `$disabled-02`       |
|                | Chevron            | svg              | `$disabled-02`       |

**Tipografía**

| Class            | Type style        |
| :--------------- | :---------------- |
| Label            | `$label-01`       |
| Field text       | `$body-short-01`  |
| Menu option text | `$body-short-01`  |
| Error message    | `$label-01`       |
| Helper text      | `$helper-text-01` |

**Estructura**

| Element     | Property                    | Spacing tokens |
| :---------- | :-------------------------- | :------------- |
| Label       | margin-bottom               | `$spacing-03`  |
| Field       | padding-left                | `$spacing-05`  |
|             | padding-right               | `$spacing-09`  |
|             | border-bottom               | –              |
| Chevron     | padding-right, padding-left | `$spacing-05`  |
| Helper text | margin-top                  | `$spacing-02`  |
| State icon  | padding-right, padding-left | `$spacing-05`  |