import { Meta } from '@storybook/addon-docs'; import { Lato } from './assets/fonts/Lato-Regular.ttf'; # Interacciones Las interacciones modelan la relación entre el usuario y la solución digital, permitiendo que esta sea intuitiva y dinámica y facilitando el uso de la misma. ### Navegación La navegación permite el movimiento del usuario a lo largo de la solución, por todas las páginas de la misma para completar las tareas deseadas. Las direcciones de navegación pueden ser: - **Navegación adelante (forward)**. Permite avanzar profundizando en los distintos niveles de jerarquía de la solución, o continuar con los pasos de un flujo de un proceso. La navegación dentro de contenedores (cards, listas…) también se considera adelante. - **Navegación lateral (lateral)**. Permite cambiar entre páginas del mismo nivel de la jerarquía. - **Navegación atrás (return)**. Permite el retorno dentro de la navegación, tanto cronológico como a jerarquías superiores. Existen múltiples elementos, componentes y patrones que facilitan la navegación. Cada solución implementará aquellos más adecuados para la interacción esperada. Algunos de estos objetos de navegación son el panel de navegación, el menú de navegación (tanto superior para web o inferior para apps), las pestañas, botones, links, contenedores… ### Estados de componentes Los estados son la representación visual de la situación de un elemento o componente. la variación de esta representación permite identificar dicha situación y facilita la interacción con el mismo. La representación no debe alterar significativamente el aspecto visual del estado, pero debe ser identificable y permitir de manera unívoca su diferenciación. La esencia de la representación de un estado debe mantenerse constante para todos los componentes, debe ser consistente en toda la solución y se recomienda que lo sea también para todas las soluciones del ecosistema de la Seguridad Social. Los estados definidos para los componentes de **Grafito**, son los definidos habitualmente y son: - **Habilitado (enabled)**: El componente esta disponible para su uso. Se indica como el estado natural y de origen de un componente. - **Deshabilitado (disabled)**: El componente no está disponible para su uso. Se indica habitualmente con un descenso importante de la visibilidad del mismo (mediante una alta opacidad, disminución de color o grosor…), este estado no requiere cumplir la norma de accesibilidad genérica. - **Superpuesto (hover)**: El usuario tiene el cursor sobre un componente activo. Se suele representar con un resaltado, y/o con un cambio en la forma del cursor indicando el modo de interacción (pasando de flecha a mano…). - **Foco (focus)**: El usuario ha marcado el elemento para su uso mediante un dispositivo de entrada (teclado…), no indica la selección del mismo. - **Activo (active)**: El componente ha sido marcado de manera manual o automática para indicar una interacción realizada. Es una representación de una interacción anterior. - **Seleccionado (seleted)**: El componente muestra una elección del usuario dentro del mismo. Este estado debe ser especialmente diferenciado ya que indica una acción de alta importancia y que habitualmente tiene mayores implicaciones. Se recomienda que su representación sea destacada, y que incluya el color principal. - **Error (error)**: Indicativo cuando una acción o proceso no se ejecuta con éxito. Las notificaciones de error indican el componente en que se producido el error, indicando la causa del mismo. Se recomienda una indicación destacada utilizando el color de “peligro” (típicamente rojo). - **Esqueleto (skeleton)**: Identifica la posición y tipo de un componente previo a su carga o simplemente como un indicador de la estructura y disposición de elementos. No es un estado habitual. - Hay estados propios del funcionamiento de cada componente como seleccionado (selected) para aquellos que permiten seleccionar opciones y que se ha descrito arriba, abierto (open) para los que despliegan capas adicionales… ### Acciones del usuario Las acciones de usuario habitualmente aparecen asociadas a distintos componentes o flujos de trabajo. Se recomienda el uso como se indica a continuación para garantizar la consistencia de las soluciones. - **Añadir (Add)**. Añade un objeto a un grupo de objetos (lista, tabla…). Habitualmente es la acción de mayor importancia y por ello la más destacada. Se representa habitualmente con un botón primario con el literal, aunque puede representarse con un icono en forma de +. - **Cancelar (Cancel)**. Cancela una operación y cierra el elemento correspondiente (diálogo, proceso…). Se debe avisar de posibles consecuencias de operación como pérdida de datos. Se suele usar habitualmente con un botón secundario. - **Limpiar (Clear)**. Elimina datos y selecciones de campos de un formulario o contenido de un documento y los devuelve a su estado por defecto. Se suele representar con un icono como el de Cerrar a la derecha del elemento correspondiente. - **Cerrar (Close)**. Cierra una página, ventana o menú, así como informaciones de diálogos o notificaciones. Se usa habitualmente un icono en forma de X en la esquina superior derecha, sin necesitar un botón específico. - **Copiar (Copy)**. Crea una instancia idéntica del objeto seleccionado. Existe un icono específico para su visualización con representación de copia de documentos. - **Borrar (Delete)**. Destruye un objeto. Se recomienda avisar al usuario de las consecuencias de la acción puesto que habitualmente no puede ser deshecho. Existe un icono específico en forma de cubo de basura para operaciones sobre grupos de elementos, aunque se recomienda el uso de un botón con el literal completo cuando la operación es de mayor impacto. - **Editar (Edit)**. Permite cambiar los valores de datos en campos. Habitualmente provoca un cambio de estado. También tiene un icono específico. - **Siguiente (Next)**. Permite avanzar en el siguiente paso de una secuencia. Se representa con un icono o un botón, habitualmente de alta importancia. - **Refrescar (Refresh)**. Recarga la vista de un objeto, lista o grupo de datos, cuando la vista se ha podido desincronizar de la fuente original de información. Se representa con un icono o botón. - **Eliminar (Remove)**. Quita un elemento de una lista o grupo de objetos. Se diferencia de Borrar en que el elemento no se destruye, y que se pueden eliminar múltiples elementos a la vez. - **Recuperar (Reset)**. Devuelve los valores al ultimo estado guardado. Se representa típicamente con un Link. ### Movimiento En principio no se plantea movimiento dentro de las soluciones digitales de la Seguridad Social, mas allá de los efectos propios de cada componente, como los que representan cambios de estados, avance de imágenes en galerías de fotos, reproducción de vídeos…