Enlace

Enlace en Storybook

Uso

Descripción general

El enlace es un componente que sirve de elemento de navegación. Puede aparecer integrado con el texto o por sí solo. Puede adjuntar un enlace a un ícono, imagen o texto.

Cuándo se debe utilizar

Para llevar a los usuarios a otra ubicación, ya sea en la misma página o a una página o sitio diferentes.

Cuándo no se debe utilizar

• Para enviar datos o llevar a cabo acciones. Utilice el componente botón.
• Para construir las rutas de navegación de un sitio. Utilice el componente ruta de navegación exclusivo para eso.

Use un componente enlace si la acción es puramente de navegación, incluso si lleva a los usuarios a otra ubicación donde realizan la tarea.

No utilice un botón terciario para la navegación, ya que esto podría confundir a los usuarios. Los botones de acción terciarios son más apropiados para las acciones dentro del contexto o la página actuales.

Tipos

Existen 2 tipos de enlaces: independientes e integrados.

Los enlaces independientes aparecen solos o directamente después del contenido.

Los enlaces integrados aparecen dentro de un cuerpo de texto, como una oración o un párrafo.

Formato

Anatomía

El componente enlace consta de los siguientes elementos:

1. Rótulo: texto descriptivo que proporciona contexto y explica a dónde lleva el enlace.
2. Ícono (opcional): indicador visual que ayuda a los usuarios a reconocer más fácilmente lo que sucede después de hacer clic.

Enlaces externos

Cuando un enlace lleve al usuario fuera de una aplicación, use el ícono gw-open-in-new.

Utilice el ícono `gw-open-in-new` para los enlaces externos.

No utilice otros íconos para los enlaces externos.

Contenido

Pautas generales de redacción

• En todos los aspectos del diseño de las interfaces de productos de Guidewire, utilice mayúsculas como se usan en las oraciones. No use mayúsculas en todas las palabras.
• Use verbos en tiempo presente y voz activa en la mayoría de las situaciones.
• Use contracciones comunes para darle al texto un tono más natural e informal (pauta correspondiente al inglés).
• Use un lenguaje sencillo. Evite la jerga innecesaria y el lenguaje complejo.
• Las palabras y las oraciones deben ser breves.

Enlaces independientes

El texto del enlace debe ser corto y directo. Utilice frases nominales, frases verbales o frases descriptivas breves que incorporen palabras clave relevantes relacionadas con el destino del enlace.

No utilice oraciones completas para enlaces independientes.

Proporcione texto de enlace específico que ayude a los usuarios a saber qué pueden esperar.

No utilice frases genéricas como “Más información” ni “Haga clic aquí” porque carecen de contexto y pueden ser ambiguas.

Enlaces integrados

El texto del enlace debe incluir suficiente contexto para comunicar el propósito o el destino del enlace sin depender del contexto circundante. Muchos usuarios no leen el contenido lindante. Por esta razón, los términos utilizados en los enlaces deben ser comprensibles si no se tiene en cuenta el contexto y se leen solos. Trate de que las frases del enlace sean cortas pero significativas, que indiquen el contenido enlazado utilizando palabras clave relevantes.

Utilice texto de enlace descriptivo que informe a los usuarios sobre el contenido que encontrarán.

No utilice términos vagos o genéricos como “esto”.

Trate de encontrar un equilibrio. El texto del enlace debe ser conciso pero a la vez descriptivo de tal modo que tenga sentido sin el contexto.

No incluya una frase entera o un bloque de texto en un enlace. Esto puede frustrar a los usuarios de lectores de pantalla que tienen que escuchar el enlace completo.

Coloque enlaces al final de una oración. Esto ayuda a preservar la sintaxis.

Evite poner enlaces en medio de las oraciones porque pueden distraer. Interrumpen el flujo de la lectura rápida del texto y obliga a las personas a detenerse a leer alrededor del enlace. También puede dificultar la lectura a los usuarios con autismo.

Uso de rótulos significativos

Los enlaces deben ser específicos, descriptivos y tener la capacidad de ser independientes. Escriba el texto del enlace de modo que, incluso si los usuarios solo leen el rótulo del enlace y nada del texto circundante, puedan comprender por completo lo que encontrarán en ese enlace.

Utilice un texto de enlace breve pero descriptivo que incluya las palabras clave más relevantes sobre el destino del enlace.

No utilice la URL ni el nombre de dominio como rótulo del enlace. Ambos carecen de un valor descriptivo claro, lo que dificulta a los usuarios predecir a dónde los llevará el enlace.

Concisión

Si bien no hay un número máximo de palabras para los enlaces, cada palabra incluida en ellos debe responder al objetivo de ayudar a los usuarios a encontrar lo que necesitan. Vaya al grano para que los usuarios entiendan rápidamente el enlace a medida que hacen una lectura rápida y procesan la página. Intente anticipar el contenido de los enlaces con las palabras más importantes.

Sea conciso y anticipe el contenido de los enlaces con un lenguaje que aporte información.

No malgaste palabras ni aplace el texto que contiene información hasta el final.

Puntuación de enlaces

Los enlaces independientes no son oraciones completas y no deben llevar puntuación al final.

Si un enlace integrado aparece al final de una oración, no incluya el signo de puntuación en el enlace.

Trate los enlaces independientes como frases cortas.

No agregue puntuación de cierre a los enlaces independientes.

Uso de mayúsculas

Use mayúsculas como se usan en las oraciones, cuando escriba el texto del enlace. Escriba en mayúsculas solo las siguientes palabras:

• La primera letra de la primera palabra de una oración o frase.
• Nombres propios, como los nombres de marcas, productos y servicios.

Para obtener más información sobre cómo implementar el uso de mayúsculas y minúsculas en las oraciones, vea Uso de mayúsculas.

En el texto del enlace, use mayúsculas como se usan en las oraciones.

En el texto del enlace, no use mayúsculas en todas las palabras.

Comportamientos

Estados

El componente enlace tiene estados para habilitado, con cursor encima, activo, en foco, deshabilitado y visitado.

Ilustración	Estado	Descripción
	Habilitado (valor predeterminado)	Comunica al usuario que el elemento está habilitado para la interacción.
	Con cursor encima	Proporciona retroalimentación que indica que el usuario ha colocado un cursor sobre el elemento (solo computadoras de escritorio). Los enlaces se subrayan cuando se posiciona el cursor encima.
	Activo	Proporciona retroalimentación que indica que el usuario está haciendo clic o tocando el elemento.
	En foco	Proporciona retroalimentación que indica que el usuario resaltó el elemento, normalmente mediante un método de entrada como teclado o voz.
	Deshabilitado	Comunica al usuario que el elemento no está actualmente disponible para la interacción.
	Visitado	Indica que el usuario ha hecho clic y visto previamente el contenido vinculado.

Interacciones

Ratón

Los usuarios pueden abrir el enlace haciendo clic en cualquier parte del rótulo o del ícono asociado.

Teclado

Al presionar la tecla Enter en un enlace en foco, se activa el enlace y se desplaza el foco al destino del enlace.

Lector de pantalla

En foco, el rol 'link' es expresado por un lector de pantalla, al igual que su valor textual (por ejemplo, “Enlace, más información”). Cuando se utiliza el enlace deshabilitado, el estado ARIA se establece en aria-disabled='true'. El lector de pantalla expresa el estado como “atenuado/no disponible”. Cuando el enlace se activa, el estado aria-disabled cambia a 'false'.

Accesibilidad

Este componente de Jutro ha sido validado para cumplir con las pautas de accesibilidad de WCAG 2.2 AA en su configuración base predeterminada. Esto incluye garantizar que se cumpla lo siguiente:

• La relación de contraste de los elementos textuales con respecto a su fondo es superior a 4,5:1.
• El contenido no textual que debe transmitir significado (como íconos e indicadores de foco) tiene una relación de contraste de al menos 3:1 con sus colores adyacentes.
• El elemento se puede operar con teclado, así como con mouse.
• Se puede acceder al contenido mediante lectores de pantalla, como JAWS y VoiceOver.

El cumplimiento de los criterios de accesibilidad depende, en última instancia, de cómo se implementa y personaliza este componente. Los cambios realizados por el autor del contenido pueden afectar la accesibilidad. Para obtener más información sobre nuestro modelo de responsabilidad compartida, revise nuestra declaración completa sobre accesibilidad de Jutro.

Siga las instrucciones a continuación cuando utilice este componente en sus aplicaciones:

• Asegúrese de que los cambios de color alcancen el umbral requerido de 4,5:1.
• Evite usar palabras y frases como “Haga clic aquí” o “aquí” como texto del enlace. En cambio, cree texto de enlace significativo que tenga sentido por sí mismo.

Código

Instrucción de importación

import { Link } from '@jutro/router/';

Contrato de componentes

Asegúrese de comprender la superficie de la API de componentes del sistema de diseño, así como sus implicaciones, ventajas y desventajas. Obtenga más información en nuestra introducción a la API de componentes.

Propiedades

children

Tipo

React.ReactNode | IntlMessageShape

Descripción

The children elements to render inside the Link.

className

Tipo

string

Descripción

CSS class name for this component.

disabled

Tipo

string

Descripción

If set to true, the link is rendered in a disabled state.

history

Tipo

historyPropTypes

Descripción

Specific router history to use for navigation. It is imported from the history npm package. You can learn more here.

href

Tipo

IntlMessageShape

Descripción

The destination path when the link is clicked. Use this for paths external to the application.

icon

Tipo

string | Icon

Descripción

An Icon component to render on the component. The value must be an Icon component or the icon's name. For example, CheckIcon or 'gw-check'.

iconPosition

Tipo

'left' | 'right'

Descripción

Indicates where the icon is placed relative to the text.

Valor predeterminado

'left'

inline

Tipo

boolean

Descripción

If set to true, the link is displayed inline and not as a block element.

onClick

Tipo

function (React.MouseEvent<HTMLElement>)

Descripción

On click event handler.

onKeyPress

Tipo

() => void

Descripción

Callback when the link is focused and keyboard key pressed.

rel

Tipo

string

Descripción

The relationship attribute of the linked URL. Used only for external paths.

target

Tipo

string: _blank | _self | _parent | _top | framename

Descripción

Where to display the linked URL. Used only for external paths.

to

Tipo

IntlMessageShape | { pathname?: IntlMessageShape; hash?: IntlMessageShape }

hash

Tipo

IntlMessageShape

Descripción

Hash to put in the URL.

pathname

Tipo

IntlMessageShape

Descripción

Link path.

Descripción

The destination path when the link is clicked. Use this for paths internal to the application.

activeClassNameobsoleto

Tipo

string

Descripción

CSS class name for the element when it is active.

exactobsoleto

Tipo

boolean

Descripción

When set to true, the activeClassName is only applied if the location is matched exactly.

idobsoleto

Tipo

string

Descripción

Unique identifier for the component.

textClassNameobsoleto

Tipo

string

Descripción

CSS class name for the link text.

Ganchos

No hay ganchos para Link.

Claves de traducción

No hay claves de traducción Link asociadas al componente.

Escotillas de escape

Para obtener más información, consulte nuestra documentación sobre escotillas de escape.

Están disponibles las siguientes opciones:

• Tokens de diseño
• Propiedad className
• Paso de atributos HTML nativos
• Referencia con controladores imperativos
• Propiedad de evento nativa

Ejemplos

Consulte la sección Uso para obtener más información sobre cómo y cuándo utilizar el componente Link.

Enlace básico

En este ejemplo, se muestra la diferencia entre la propiedad to y la propiedad href. Se utiliza to para especificar una URL de destino dentro de la aplicación y href para navegar a las URL internas y externas. Si agrega la propiedad disabled, no se puede hacer clic en los enlaces.

Con la propiedad icon, puede establecer un ícono personalizado para el enlace.

import React from 'react';
import { Link } from '@jutro/router/';

export const BasicLink = () => {

  return (
    <div>
        This is an <Link to="/link#examples" icon="gw-bathtub">internal link</Link>.
        This is an <Link target="_blank" href="https://docs.guidewire.com/">external link</Link>.
        This is a <Link disabled>disabled link</Link>.
    </div>
  );
};

Administración de eventos de enlace

El componente Link puede gestionar eventos utilizando la propiedad onClick cuando el usuario hace clic en el enlace o usando onKeyPress cuando el usuario presiona una tecla cuando el foco está en el enlace.

import React, { useState } from 'react';
import { Link } from '@jutro/router/';

export const EventsLink = () => {
  const [linkText, setLinkText] = useState("Click me!");
  const handleClick = () => {
    setLinkText("Clicked");
  }; 
  const handlePress = () => {
    setLinkText("Pressed");
  };      
  return (
    <Link
        onClick={handleClick}
        onKeyPress={handlePress}
    >
        {linkText}
    </Link>
  );
};

Enlaces a elementos secundarios

Puede colocar cualquier elemento dentro de un enlace para que se muestre, como en este ejemplo, donde un enlace contiene un elemento strong. Sin embargo, agregar ciertos elementos, como un campo de entrada o un enlace dentro de un enlace, puede afectar la accesibilidad.

import React from 'react';
import { Link } from '@jutro/router/';

export const ChildrenLink = () => {
      
  return (
    <div>
        <Link>
            <strong>This is a child element.</strong>
        </Link>
    </div>
  );
};

Registro de cambios

10.1.0

• Se agregó compatibilidad para tokens de diseño.

• Las siguientes propiedades han quedado obsoletas:

  • id
  • activeClassName
  • textClassName
  • exact