import { Story, Canvas, Preview, ArgsTable } from '@storybook/addon-docs'; import imageE1 from '../../stories/assets/link/enlace_icono.png'; import imageE2 from '../../stories/assets/link/enlace_anatomia.png'; import imageE3 from '../../stories/assets/link/enlace_estados-1.png'; import imageE4 from '../../stories/assets/link/enlace_aislado.png'; import imageE5 from '../../stories/assets/link/enlace_inline.png'; # Enlace / Link Un enlace es un recurso de navegación que sirve para vincular un texto con un **contenido**. Pueden aparecer en solitario, dentro de un texto o asociado a un contenido. Hay muchos recursos que se pueden vincular mediante enlaces: páginas dentro y fuera del producto, otros productos, secciones dentro de las páginas, documentos adjuntos, emails o números de teléfono… Para lanzar una acción que actua sobre datos, o que produce cambios en la manera en que se visualiza o su estado es preferible utilizar un botón a un enlace. ### Variaciones Los enlaces se pueden presentar aislados (standalone) o en línea, embebidos dentro de un texto (inline). | Enlace aislado

(standalone) | Enlace en línea

(inline) | |:---------------------------------------:|:------------------------------------:| | | | Los **enlaces aislados**, se usan en solitario o a asociados con un contenido a continuación del mismo. No se representan subrayados y no se emplean en frases o párrafos. Por otro lado, los **enlaces** **dentro de texto** se encuentran embebidos en el texto y forman parte del contenido. Es importante que este enlace quede diferenciado del texto en que se sitúa, y que se entienda la posible interacción, de ahí que se representen siempre subrayados. Para aquellos casos de enlaces en que se quiera dar mayor claridad a la manera en que el enlace profundiza en el contenido, se emplean **iconos** que evidencian de manera más rotunda el destino. Los iconos se utilizarán solamente con enlaces aislados, nunca con los enlaces dentro del texto. ### Contenido El elemento principal del enlace es la **etiqueta** de texto. La etiqueta de los enlaces debe ser descriptiva en sí misma del destino al que lleva, sin tener que leer textos secundarios que le acompañen. Nunca usaremos enlaces del tipo: “pincha aquí” o “ver más”, ya que es preferible usar frases más semánticas del tipo: “obtener información del trámite”. Se recomienda que el texto no sea largo, tres palabras o menos es la longitud ideal. Es importante que la etiqueta tenga sentido e identifique claramente el recurso destino. Los textos deben controlar que no dependen de características sensoriales como posición, color, etc. y que la descripción semántica sea clara, corta y concisa. En enlaces de navegación es recomendable utilizar como texto del enlace el mismo que corresponda al título de la página de destino para mejorar el posicionamiento (SEO). En los casos en que existan enlaces con el mismo texto pudiendo parecer redundantes, estos deberán ser acompañados mediante un **atributo** “title” o un texto oculto solo en presentación, que clasifique la diferenciación entre los mismos y permita al usuario distinguirlos antes de invocarlos. ### Anatomía Para los enlaces inline el tamaño y tipografía del **texto** de la etiqueta debe ser la misma que la del texto donde se ubica. Para los enlaces aislados, la tipografía y tamaño puede variar según su posición y la importancia de la interacción, en cualquier caso es una buena práctica mantener siempre el tamaño y tipo del texto. La etiqueta por defecto queda definida como el tipo de texto estándar, esto es Lato 16px regular, aunque puede usarse el enlace grande de 18px, o el pequeño de 14px, para enlaces aislados cuando se quieren destacar estos, o simplemente dar opciones menos relevantes. En el caso de que el enlace tenga un icono asociado, este será concordante con el tamaño de la etiqueta, esto es para la etiqueta por defecto se usará el icono de 16px. El icono debe tener el mismo color que la etiqueta en cualquier caso y estado. ### Comportamiento El enlace se puede **activar** tanto con ratón (mediante click), teclado (mediante “enter” o “espacio”) o lectores de pantalla. Los botones pueden presentarse en distintos **estados**: enabled, hover, focus, active, visited, disabled. Antiguamente los enlaces visitados se representaban con otro color. Hoy en día no se recomienda esta representación puesto que añaden un ruido visual innecesario para la navegación. Solo se usará esta representación si es necesario que el usuario conozca que el recurso ha sido visitado anteriormente. ### Código ```

``` ### Tokens **Colores** | **Clas**e | **Propiedad** | **Token** | | ----------- | ------------- | --------------------- | | `.bx--link` | color | `$link-01` | | `:hover` | text color | `$hover-primary-text` | | `:active` | text color | `$text-01` | | `:focus` | outline | `$focus` | | `:visited` | text color | `$visited-link` | | `:disabled` | text color | `$disabled-02` | **Tipografías** | Clase | Token | | :-------------- | :---------------- | | `.bx--link` | `$body-short-01` | | `.bx--link--sm` | `$helper-text-01` | | `.bx--link--lg` | `$body-short-02` | **Estructura** | Clase | Propiedad | Token | | :---------- | :------------- | :------------ | | `.bx--link` | padding-right | `$spacing-05` | | `.bx--link` | padding-bottom | `$spacing-02` | | `.bx--link` | padding-bottom | `$spacing-03` |