import { Meta } from '@storybook/addon-docs';

import image1 from './assets/objetos/01_Componentes_Boton.png';
import image2 from './assets/objetos/02_Componentes_Enlace.png';
import image3 from './assets/objetos/03_Componentes_CampodeTexto.png';
import image4 from './assets/objetos/04_Componentes_CampoNumerico.png';
import image5 from './assets/objetos/05_Componentes_BotonRadio.png';
import image6 from './assets/objetos/06_Componentes_Casilla.png';
import image7 from './assets/objetos/07_Componentes_Selector.png';
import image8 from './assets/objetos/08_Componentes_Etiqueta.png';
import image9 from './assets/objetos/09_Compoenntes_Tooltip.png';
import image10 from './assets/objetos/10_Componentes_Lista.png';
import image11 from './assets/objetos/11_Componentes_ListaEstrcuturada.png';
import image12 from './assets/objetos/12_Componentes_Pestañas.png';
import image13 from './assets/objetos/13_Componentes_Desplegable.png';
import image14 from './assets/objetos/14_Componentes_Tarjeta.png';
import image15 from './assets/objetos/15_Componentes_Paginado.png';
import image16 from './assets/objetos/16_Componentes_acordeon.png';
import image17 from './assets/objetos/17_Componentes_breadcrumb.png';
import image18 from './assets/objetos/18_Componentes_Overflow.png';
import image19 from './assets/objetos/19_Componentes_Interruptor.png';
import image20 from './assets/objetos/20_Componentes_Vista_de_contenido.png';

<Meta title="Objetos de diseño/Objetos" />

<style>{`

  tr {
    background-color: white !important;
  }

  th, td {
    vertical-align: top;
    padding-top: 1rem !important;
  }

`}</style>

# Objetos de diseño

<br/>

## Componentes

Los componentes son los elementos fundacionales del sistema de diseño. Los productos se construyen como combinación de componentes, que permiten crear una consistencia visual y funcional a lo largo de todo el producto.

Cada componente resuelve una necesidad de interfaz específica. Los componentes son objetos estándar en todos los sistemas de diseño, aunque en **Grafito** hemos estructurado, definido y construido estos de la manera más adecuada para las necesidades de la Seguridad Social.

La librería de componentes es dinámica y va incorporando nuevos elementos según las necesidades de los distintos productos de la Seguridad Social.

Los principales componentes de **Grafito** son:

|          **Botón / Button**                       |              **Enlace / Link**                            |                 **Caja de Texto / Text input**     |
| :-----------------------------------------------: | :-------------------------------------------------------: | :------------------------------------------------: |
|          <img src={image1}/>           |            <img src={image2}/>               |     <img src={image3}/>     |
|          **Caja numérica / Number input**         |              **Botón de radio / Radio Button**            |     **Casilla / Checkbox**     |
|          <img src={image4}/>           |             <img src={image5}/>               |     <img src={image6}/>     |
| **Selector desplegable / Select**        |            **Etiqueta / Tag**          |   **Descriptor emergente / Tooltip** |
|          <img src={image7}/>           |           <img src={image8}/>       |            <img src={image9}/> |
|         **Lista / List**                |  **Lista estructurada / Structured list** |        **Pestañas / Tabs**        |
|          <img src={image10}/>           |           <img src={image11}/>       |            <img src={image12}/> |
|    **Desplegable / Dropdown**           |        **Tarjeta / Tile / Card**         |     **Paginado / Pagination**     |
|          <img src={image13}/>           |           <img src={image14} width="250"/>        | <img src={image15}/> |
|          **Acordeón / Accordion**            |              **Migas de pan / Breadcrumb**              |     **Sobrecarga / Overflow menu**    |
|          <img src={image16} width="250"/>           |              <img src={image17}/>             |     <img src={image18} width="200"/>     |
|         **Interruptor / Toogle**        | **Vista de contenido / Content switcher** |               | 
|          <img src={image19}/>           |           <img src={image20}/>            |                    |

La descripción, definición y construcción los componentes es la piedra angular de **Grafito**. Estos componentes son comunes para toda la Seguridad Social, aunque cada solución o producto puede customizarlos a medida según sus necesidades mediante los temas. Por consistencia se recomienda que se mantenga una línea homogénea a lo largo de todos los productos de la Seguridad Social.

Para cada componente se detallará su uso en la documentación asociada, la descripción de su diseño y su codificación propia dentro del tema. Típicamente, la información de cada componente comprende los siguientes apartados:

- **Descripción**. Como comienzo de la definición de cada componente, se describe qué es cada componente y para qué sirve. También se dan indicaciones de cuándo se ha de usar este componente, y cuándo no.
- **Variaciones**. Se detallan distintas versiones del mismo componente, bien por su aplicación en distintas funciones, por distintos tamaños… con su diferenciación visual y de uso.
- **Contenido**. Se definen los textos que se emplean en el componente, identificándolos y detallando su sintaxis. Se incluyen recomendaciones para la forma y redacción de los mismos.
- **Anatomía**. Se representa la estructura del componente desde su morfología. Se muestra visualmente los tamaños y espacios de los elementos del componente para todos sus formatos.
- **Posición**. Se dan recomendaciones sobre la situación del componente dentro de otros componentes o patrones.
- **Comportamiento**. Se definen las interacciones del usuario con el componente, sobre todo la activación del mismo. Se detallan los posibles valores que puede tomar un componente y sus estados.
- **Tokens**. Se listan los elementos y propiedades del componente, indicando los tokens usados para su definición. Se clasifican los tokens según su tipificación en color, tipografías o estructura.



## Patrones

Los patrones son objetos complejos, que combinan varios componentes, y que cubren funciones específicas de negocio y con un modelo de interacción definido. Son objetos reutilizables y que establecen reglas básicas que se aplican a distintas situaciones.

Los patrones son soluciones de mejores prácticas universales, aplicadas a cómo un usuario consigue un objetivo concreto dentro de la Seguridad Social. Un patrón se adapta a varios casos de una misma función estableciendo una forma de hacer común, y una homogeneidad en las soluciones digitales.

Algunos de los patrones que establecemos dentro de **Grafito** son:

- **Estructura de interfaz / UI shell**: Define el marco de interacción, cabecera, pie y paneles laterales de navegación dentro de la solución y en el ecosistema de la Seguridad Social.
- **Panel de contenido / Content panel**: Define la estructura básica de las páginas de contenido, título, secciones, bloques de contenido…
- **Formulario / Form**: Define la estructura básica de las páginas de captura de información mediante formulario, bloques de datos
- **Búsqueda / Search**: Define el modelo de búsquedas, mediante sistemas intuitivos de descubrimiento de contenidos mediante palabras clave, descripciones…
- **Notificaciones / Notifications**: Define la manera de ofrecer información a los usuarios mediante mensajes breves, concisos y efímeros.
- **Dialogos / Dialogs**: Define mecanismos de comunicación directa entre la aplicación y el usuario para para recibir información importante, solicitar una acción del mismo o para alertarle sobre una tarea que está llevando a cabo.

En la definición de los patrones se cubren descripciones muy dispares, desde la funcionalidad, su utilización, elementos dentro del patrón, distribución de componentes, anatomía de los mismos, estados y funcionamiento…