import { Story, Canvas, Preview, ArgsTable } from '@storybook/addon-docs';
import image1 from '../../stories/assets/Docum_SDSS_Componentes/07_Selector_desplegable/01_Selector.png';
import image2 from '../../stories/assets/Docum_SDSS_Componentes/07_Selector_desplegable/02_Selector_Anatomia_ListaOpciones.png';
import image3 from '../../stories/assets/Docum_SDSS_Componentes/07_Selector_desplegable/03_Selector_Variaciones_Normal.png';
import image4 from '../../stories/assets/Docum_SDSS_Componentes/07_Selector_desplegable/04_Selector_Variaciones_EnLinea.png';
import image5 from '../../stories/assets/Docum_SDSS_Componentes/07_Selector_desplegable/05_Selector_Variaciones_Normal.png';
import image6 from '../../stories/assets/Docum_SDSS_Componentes/07_Selector_desplegable/06_Selector_Variaciones_Tamano32px.png';
import image7 from '../../stories/assets/Docum_SDSS_Componentes/07_Selector_desplegable/07_Selector_Variaciones_Normal.png';
import image8 from '../../stories/assets/Docum_SDSS_Componentes/07_Selector_desplegable/08_Selector_Variaciones_Light.png';
import image9 from '../../stories/assets/Docum_SDSS_Componentes/07_Selector_desplegable/09_Selector_Anatomia_Normal.png';
import image10 from '../../stories/assets/Docum_SDSS_Componentes/07_Selector_desplegable/10_Selector_Anatomia_EnLinea.png';
import image11 from '../../stories/assets/Docum_SDSS_Componentes/07_Selector_desplegable/11_Selector_Anatomia_Alturas40px.png';
import image12 from '../../stories/assets/Docum_SDSS_Componentes/07_Selector_desplegable/12_Selector_Anatomia_Alturas32px.png';
import image13 from '../../stories/assets/Docum_SDSS_Componentes/07_Selector_desplegable/13_Selector_Estados.png';
# Selector / Select
Utilizaremos el selector para ofrecer una **lista** de **opciones** al usuario como respuesta a una pregunta, de las cuales solo puede **elegir una**. El selector no muestra en reposo las opciones, por ello funciona bien cuando las opciones presentadas se pueden anticipar incluso antes de abrirlo (por ejemplo con respuestas tipo) o cuando la cantidad de opciones es muy grande.
| **Selector en reposo** | **Selector abierto** |
|-------------------------|------------------------|
| | |
Siempre que sea posible se recomienda usar los **botones de radio** antes que el selector, ya que permite visualizar las opciones más rápidamente además de ofrecer la posibilidad de textos de aclaración para cada opción.
No se recomienda el uso de selector para menús de navegación, ya que obliga a abrirlo para ver las opciones disponibles lo que limita la posibilidad de descubrir contenidos relevantes. En su lugar se recomienda el uso de otros componentes como el índice, la lista de enlaces o el desplegable.
Aunque los componentes selector y desplegable (dropdown) parecen similares tienen funciones muy diferentes. Mientras el selector permite elegir opciones de un conjunto de elementos y enviar los datos, el desplegable se utiliza para filtrar u ordenar contenido de una página.
Asimismo, desde el punto de vista de diseño, la capa abierta del selector toma los estilos que impone el navegador mientras que el desplegable permite la aplicación del diseño del tema seleccionado a la capa.
### **Variaciones**
El selector normal tiene una variación de **tamaño**, teniendo el tamaño por defecto una altura bde 40px y un tamaño pequeño de altura 32px que se usa cuando hay problemas de espacio.
| **Selector normal** (por defecto) | **Selector pequeño** |
|-------------------------|------------------------|
| | |
Por último existe también una variación según el color del fondo, proporcionándose, además de una versión normal con el fondo gris, otra que tiene el fondo blanco.
| **Selector normal** (por defecto) | **Selector claro** |
|-------------------------|------------------------|
| | |
### Contenido
El selector siempre llevará una **etiqueta** que lo encabeza y que describe las opciones que tiene incluidas.
Respecto a los **textos** de las opciones del selector, se recomienda que no seam no sean largos, ni que ocupen varias líneas, puesto que puede dar la sensación de ser diferentes opciones.
El selector incluirá siempre un **texto predefinido** que indique que se ha de desplegar el listado y seleccionar una opción, como «seleccione una opción».
Se recomienda que el **orden** de las opciones presentadas dentro del selector sea por probabilidad de que sea elegida por el usuario (si una opción es la más probable mejor ponerla la primera) y si no se puede aplicar este criterio, se ordenarán de forma alfabética.
Se recomienda también que se produzca una **validación** en tiempo real de la selección, que facilita el mantenimiento de los formularios y la claridad de la entrada de datos.
### Anatomía
El selector tiene, al igual que muchos componentes de entrada de información, una **etiqueta**, **texto de ayuda** y el **cajetín** de selección que con tiene un **texto** que representa la selección y un **icono** que permite desplegar la lista de opciones.
Los textos de todos los tipos de selector, el normal, el selector en línea y el pequeño son los mismos, el estándar usado en los componentes, esto es Lato de 16px.
| |
|-------------------------|
| |
La **altura** de la caja, al contrario, es diferente para ambos tipos, 40px la altura del selector normal y 32px la del pequeño. Asismismo, los paddings del texto seleccionado y los del icono de despliegue varían, siendo 16px los del selector normal y 8px los del pequeño.
| | |
|-------------------------|------------------------|
| | |
Es importante señalar que la **lista de opciones** se desplegará con una capa que no mantiene los estilos del tema, sino los del navegador utilizado. Es por esto que no se define la anatomía de esta capa.
### Comportamiento
El listado de opciones de un selector se activa clicando tanto en el icono de despliegue como en el texto del interior del selector. De esta manera se facilita el uso del mismo y la interacción con el usuario.
El desplazamiento entre las diferentes opciones y la selección se realiza mediante los mecanismos definidos por el navegador, pero típicamente se usa la rueda del ratón o el panel táctil (touchpad). En dispositivos táctiles se emplean los dedos para desplazarse hacia arriba y abajo, y con el teclado se usan las flechas arriba y abajo. La selección se realiza mediante un clic, pulsando en la opción deseada, o con la tecla «intro».
La opción seleccionada se copia en el campo de texto del cajetín sustituyendo a la opción anteriormente seleccionada, o al texto predefinido en el caso de que sea la primera selección.
Los estados de este componente son enabled, hover, focus, open, disabled, error y skeleton.
### Código
```