Avatar

Avatar en Storybook

Uso

Descripción general

El avatar es un objeto que aparece en el encabezado global y representa la identidad de un usuario. Proporciona acceso al perfil del usuario y configuraciones genéricas según corresponda. Los avatares refuerzan la conexión entre los usuarios y los productos. También ofrecen a los usuarios un grado de personalización.

Anatomía

Imagen de avatar

Menú desplegable de avatares

Los avatares aparecen como gráficos circulares en la esquina superior derecha de un encabezado y su menú desplegable asociado. Los usuarios pueden cargar la imagen que se mostrará. De forma predeterminada (si no se carga ninguna imagen), el avatar muestra las iniciales del nombre y el apellido del usuario. Los menús desplegables de avatares también proporcionan el nombre y el cargo del usuario como rótulos de texto.

Avatar con imagen cargada (contenida)

Los avatares constan de los siguientes elementos:

1. Imagen predeterminada o cargada: los usuarios pueden cargar una imagen, que aparece como un gráfico circular, como su avatar.
2. Rótulo de nombre: en el menú desplegable del avatar, el nombre del usuario aparece como un rótulo de texto anclado.
3. Cargo: en el menú desplegable del avatar, el rol o cargo del usuario aparece debajo de su nombre.

Prácticas recomendadas

• Use avatares para indicar dónde los usuarios pueden acceder a su perfil y configuraciones genéricas.
• Use avatares de manera consistente en una experiencia o conjunto de productos interrelacionados.
• Use avatares para fortalecer la conexión entre un producto y sus usuarios.
• Use avatares para proporcionar a los usuarios un grado de personalización.

Capacidad de ser responsive/adaptabilidad

• Los avatares de Jutro vienen en una variedad de tamaños para adaptarse a diferentes factores de forma.
• Como la mayoría de los componentes, los avatares pueden ser distribuidos, dimensionados y arreglados por nuestros componentes <Grid> y <Flex> como parte del compromiso de Jutro con el diseño responsive.

(Reemplaza esta imagen con una nueva que también muestra el tamaño de encabezado relativo que se usará con cada uno y también indica qué tamaños se usan en computadoras de escritorio, tablets y teléfonos móviles)

Interacciones

Ratón

• Al pasar el cursor sobre el gráfico circular del avatar, se muestra una descripción emergente con el nombre del usuario.
• Al hacer clic en el gráfico circular del avatar, se muestra un menú desplegable.
• Mover el cursor del ratón sobre los rótulos de texto dentro del menú desplegable las resalta.

Teclado

El encabezado del avatar funciona como un botón. La BARRA ESPACIADORA e INTRO expanden y contraen el contenido del panel dentro de ella.

Lector de pantalla

Se puede establecer un texto alternativo en el campo de nombre de usuario. Sin un valor especificado, el valor predeterminado es “Avatar de usuario”. El atributo WAI-ARIA de aria-haspopup="true" alerta a los usuarios de lectores de pantalla sobre la presencia de contenido dentro del avatar. El atributo aria-expanded alterna entre "true" y "false" para indicar el estado del componente, es decir, si está “expandido” o “contraído”.

Condiciones de error

Cuando no hay ninguna imagen para el avatar, aparecen las iniciales del usuario. Si las iniciales del usuario no se pueden renderizar (por ejemplo, nombres que no usan caracteres latinos), en su lugar aparece un ícono predeterminado.

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.

Dentro de su aplicación, asegúrese de que, si se especifica texto alternativo, sea significativo.

Note:

La dependencia @jutro/auth ahora es opcional para los paquetes @jutro/router y @jutro/components . Sin embargo, el componente Avatar component requiere que se agregue @jutro/auth a las dependencias de la aplicación que se van a utilizar.

Código

import { Avatar } from '@jutro/components';

<Avatar />;

Instrucción de importación

import { Avatar } from '@jutro/components';

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

className

Tipo

string

Descripción

CSS class name for this component.

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'.

Valor predeterminado

PersonIcon

imageSource

Tipo

string

Descripción

Path to an image. If provided, it takes precedence over the user's initials or an icon.

isNotButton

Tipo

boolean

Descripción

If set to true, the component will be rendered as span instead of a button.

messageProps

Tipo

{ userAvatar: intlMessageShape }

Descripción

Message props for an error message or aria-label.

onClick

Tipo

function (React.MouseEvent<HTMLElement>)

Descripción

On click event handler.

showImageBorder

Tipo

boolean

Descripción

If set to true, a border will be displayed around the component.

useAuthInfo

Tipo

boolean

Descripción

If set to true, displays the user's information based on the authentication client instead of the passed props.

username

Tipo

string

Descripción

User's first and last names, used as the component's alt text and to display initials if no image is selected.

Ganchos

No hay ganchos para avatar.

Claves de traducción

Hay una clave de traducción asociada al componente avatar:

Clave	Se usa para
jutro-components.widgets.Avatar.useravatar	Valor aria-label para la imagen del avatar

Escotillas de escape

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

Ejemplos

Consulte la sección Uso para obtener detalles sobre cómo diseñar un avatar correctamente y las diferentes opciones de configuración que ofrecemos.

Ejemplo de avatar básico

Un avatar básico renderiza un botón que contiene una imagen circular. De forma predeterminada, muestra el ícono de persona del paquete de íconos de Jutro.

import { Avatar } from '@jutro/components';

<Avatar />;

Ejemplo de ícono personalizado

La propiedad icon le permite utilizar cualquier ícono de Jutro como predeterminado. Para obtener más información acerca de los íconos de Jutro, consulte la página del componente ícono.

import { Avatar } from '@jutro/components';
import { HelpIcon } from '@jutro/icons';

<Avatar icon={HelpIcon} />;

Ejemplo de imagen

El componente avatar mostrará cualquier imagen arbitraria con la propiedad imageSource. La imagen cambiará de tamaño para que quepa dentro del círculo. En el siguiente ejemplo, la imagen fuente es cuadrada, de 32 x 32 y cambia de tamaño para ajustarse al círculo predeterminado.

import { Avatar } from '@jutro/components';

<Avatar imageSource="/path/to/image" />;

Ejemplo de información de autenticación

Puede configurar el componente avatar para que muestre el contenido del cliente de autenticación mediante la propiedad useAuthInfo.

import { Avatar } from '@jutro/components';

<Avatar useAuthInfo />;

Ejemplo de nombre de usuario

La propiedad username se usará como texto alternativo. Además, si no se establece imageSource, se mostrarán las iniciales del string de nombre de usuario, en lugar de un ícono.

import { Avatar } from '@jutro/components';

<Avatar
  username="John Doe"
  imageSource='/path/to/image'
/>
<Avatar
  username="John Doe"
  icon={HelpIcon}
/>
<Avatar
  username="John Doe"
/>

Registro de cambios

10.9.0

Tipo de propiedad icon extendida

El tipo de la propiedad icon se ha extendido a string | React.ComponentType.

Elementos obsoletos

El paso de un string como valor a la propiedad icon ha quedado obsoleto.