Notificación integrada

Notificación integrada en Storybook

Uso

Descripción general

Las notificaciones integradas proporcionan información clara e inmediata relacionada con los formularios, los procesos y las acciones de sección realizadas por el usuario. Mantienen informados a los usuarios sobre el estado de sus acciones, los guían hacia la finalización correcta de las tareas o los alertan sobre problemas que necesiten atención.

Para obtener una guía detallada sobre cuándo utilizar las notificaciones integradas, examine el siguiente árbol de decisiones del componente de la interfaz de usuario.

La variante de notificaciones integradas agrupadas muestra varios mensajes relacionados en un solo bloque compacto para reducir el desorden y proporcionar una visión general clara de todos los comentarios relevantes en un solo lugar.

Para obtener una guía detallada sobre cuándo utilizar las notificaciones integradas agrupadas, examine el siguiente árbol de decisiones del componente de la interfaz de usuario.

Cuándo se debe utilizar

• Cuando el mensaje se relacione con el contenido o un objeto de la página actual.
• Para obtener retroalimentación instantánea sobre un proceso, como la confirmación de que el envío de un formulario se realizó correctamente.
• Para ayudar a los usuarios a identificar errores de validación u otros problemas durante el envío de formularios.
• Para notificar a los usuarios información muy importante que requiere una acción.

Tipos

Las notificaciones integradas se basan en la gravedad del mensaje. Incluyen los siguientes tipos:

Tipo	Ícono	Propósito
Información		Brindar a los usuarios información útil que pueda ayudar a completar la tarea o indicar los próximos pasos.
Acción correcta		Informar a los usuarios que una tarea se realizó correctamente.
Advertencia		Informar a los usuarios sobre condiciones que podrían no bloquear el flujo actual del usuario, pero sí causar errores en su tarea en una etapa o paso posterior.
Error		Informar a los usuarios sobre errores, acciones fallidas o problemas críticos que podrían impedir que el usuario continúe con su tarea.

Formato

Anatomía

Las notificaciones integradas constan de los siguientes elementos:

1. Ícono: Proporciona una indicación visual sobre la gravedad del mensaje.
2. Título (opcional): Ofrece un breve resumen del contenido o el propósito de la notificación.
3. Descripción: Describe la naturaleza de la notificación, su significado o la acción requerida.
4. Enlace (opcional): Permite a los usuarios ver más detalles.
5. Botón Cerrar (opcional): Desestima la notificación.

Notificaciones integradas agrupadas

Las notificaciones integradas pueden adaptarse a varios patrones de uso, incluida la agrupación de alertas. En esta sección se detalla la variante agrupada, que permite agrupar mensajes de la misma o de diferentes gravedades para mejorar la claridad y la eficiencia del espacio. Use este método en lugar de apilar notificaciones integradas, lo que puede empujar el contenido crítico fuera de la vista.

Agrupación de alertas de la misma gravedad

Agrupación de alertas de la misma gravedad.

Cuando surgen múltiples mensajes de la misma gravedad en la aplicación, los mensajes se pueden agrupar para que sea más fácil leerlos y actuar en consecuencia.

1. Título: Brinda el número de las alertas y un mensaje de título opcional.
2. Control Ocultar/mostrar: Se expande para ver los mensajes o se contrae para no verlos.
3. Enlace de navegación de posición de alerta: Indica dónde se produjo la alerta y ofrece a los usuarios la posibilidad de navegar hasta el desencadenante.
4. Descripción: Proporciona información contextual sobre el mensaje.

Agrupación de alertas de diferentes niveles de gravedad

Agrupación de alertas de diferentes niveles de gravedad.

Cuando surgen múltiples mensajes de distintos niveles de gravedad en la aplicación, los mensajes se pueden agrupar para que sea más fácil leerlos y actuar en consecuencia.

1. Título: Proporciona el número de alertas en orden de mayor prioridad. Por ejemplo, si hay 3 errores y 3 advertencias, el título debe comunicar la cantidad de errores encontrados y puede incluir un mensaje de título opcional.
2. Botón para conmutar mensajes: Permite al usuario alternar entre grupos de alerta. Cada botón contiene un ícono que indica la categoría de la alerta y la cantidad de mensajes.
3. Enlace de navegación: Indica dónde se produjo la alerta y ofrece a los usuarios la posibilidad de navegar hasta el desencadenante.
4. Descripción: Proporciona información contextual sobre el mensaje.

Tamaño y ubicación

Las notificaciones integradas se colocan cerca del área correspondiente de la interfaz de usuario. Pueden expandirse en ancho para llenar el contenedor o el área de contenido con la que se relacionan.

La altura de los mensajes integrados aumenta con contenido de hasta 2 líneas de texto ajustado.

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.

Título de la notificación integrada

Los títulos son opcionales para las notificaciones integradas y solo se deben usar si comunican de forma concisa el mensaje principal de la notificación. Deben ser breves, descriptivos y explicar la información más importante.

Descripción de la notificación integrada

Las descripciones constan de 1 o 2 oraciones cortas. Informan a los usuarios sobre la importancia de la notificación y los pasos necesarios que deben seguir.

Redacción de diferentes tipos de mensajes

Información

Los mensajes de información transmiten información no crítica o actualizaciones a los usuarios sin requerir una acción. Utilícelos para informar sobre algo que pueda ayudarles o afectarles.

Utilice mensajes de información para transmitir información adicional útil al usuario.

No utilice mensajes de información para alertar sobre información crítica que requiera acción.

Acción correcta

Los mensajes de acción correcta informan a los usuarios que una tarea o acción se ha realizado correctamente. Para acciones frecuentes y simples, como cargar un archivo o guardar un documento, el mensaje debe ser corto y práctico. Puede usar un tono de celebración para los logros significativos y los mensajes que sean de tipo menos frecuentes.

Utilice un lenguaje que sea claro, conciso y útil. Para las tareas rutinarias, adopte un tono práctico.

No use un tono de celebración, a menos que la situación lo requiera. Tenga en cuenta el contexto del usuario.

Advertencia

Los mensajes de advertencia alertan a los usuarios sobre posibles problemas que podrían requerir su atención dentro del contexto de su tarea o interacción actual. Si la advertencia aparece antes de una acción, explique qué sucederá si el usuario continúa. Ofrezca una alternativa siempre que sea posible.

Muestre empatía por el usuario. Informe, pero no alarme.

No induzca al pánico con un lenguaje demasiado dramático o alarmista.

Error

Los mensajes de error indican que una tarea falló o que tiene errores que impiden que el usuario avance a la siguiente etapa. Al redactar mensajes de error:

• Explique el problema y lo que produjo el problema con la mayor precisión posible.
• Sugiera cómo resolver el problema y avanzar. Si el problema no se puede resolver en ese momento, diga al usuario qué se puede hacer para ayudarlo, a quién puede recurrir.
• Utilice un lenguaje sencillo, claro y directo. Evite confundir a las personas con detalles técnicos o jerga.
• Intente utilizar mensajes de error que sean relevantes y específicos para el contexto en el que aparecen. Cuanto más genérico sea, menos útil resultará.
• No culpe a los usuarios y acepte si algo es culpa nuestra.

Explique el problema utilizando un lenguaje sencillo y claro. Proporcione una solución para que los usuarios puedan completar el proceso.

No utilice jerga técnica ni lenguaje que no sea familiar para el usuario.

Comportamientos

Desestimación

Las notificaciones integradas aparecen solo una a la vez. Existen hasta que el usuario las desestima, hasta que se resuelve el problema o hasta que usuario sale de la página actual.

El botón de cierre es opcional. Aparece como una pequeña “X” en la esquina superior derecha de la notificación integrada. No incluya un botón de cierre si es fundamental que el usuario lea o interactúe con la notificación.

Interacciones

En esta imagen se ilustra un flujo de validación de formulario típico. Una notificación integrada agrupada primero alerta al usuario sobre varios errores, que luego se detallan mediante mensajes individuales al nivel del campo para una corrección sencilla.

1. Envío del formulario: El usuario envía el formulario (una sección de una página en este ejemplo) mediante la acción de confirmación (“Guardar” en este ejemplo).
2. En este caso, se usan dos tipos de mensajes:

• Notificaciones integradas agrupadas para indicar que se produjo un error en el envío del formulario
• Mensajes de estado del campo para indicar problemas con los valores de entrada del campo.

3. Ayuda para resolver problemas: Cuando el usuario hace clic en un enlace de navegación de posición de alerta, el foco pasa al campo correspondiente y el usuario puede revisar y hacer correcciones.

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 las notificaciones integradas persistan hasta que el usuario las desestime, hasta que se resuelva el problema o hasta que el usuario salga de la página actual.
• No incluya un botón de cierre si es fundamental que el usuario lea o interactúe con la notificación.

Note:

La dependencia @jutro/router y sus dependencias de pares como history y react-router-dom ahora son opcionales para los paquetes de componentes. Sin embargo, el componente InlineNotification requiere que la dependencia se agregue a las dependencias de su aplicación para poder ser utilizado.

Código

<InlineNotification
  message="Message"
  messageProps={{
    success: 'Hello',
  }}
  onClosed={function () {
    console.log('Closed');
  }}
  type="success"
/>

Instrucción de importación

import { InlineNotification } 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.

isBundleOpenByDefault

Tipo

boolean

Descripción

If set to true, the bundled messages card will be open.

isDismissable

Tipo

boolean

Descripción

If set to true, the dismiss button appears with this component.

Valor predeterminado

true

isEmbeddedNotification

Tipo

boolean

Descripción

If set to true, attributes 'aria-hidden' and 'role' will be added.

isTooltipEnabled

Tipo

boolean

Descripción

Enables the tooltip to show a full message.

linkProps

Tipo

Link

Descripción

Link prop used to navigate the user to an internal or external link. See Link component props for reference.

message

Tipo

intlMessageShape | {success: IntlMessageShape, warning: IntlMessageShape, info: IntlMessageShape, args?, error: IntlMessageShape, dismiss: IntlMessageShape}

Descripción

Message or set of messages to be displayed in the case of bundled notifications. For information on the property types accepted, see the IntlMessageShape documentation.

messageProps

Tipo

{success: IntlMessageShape, warning: IntlMessageShape, info: IntlMessageShape, args?, error: IntlMessageShape, dismiss: IntlMessageShape}

Descripción

Set of messages to be used as the associated aria-labels for each kind of message. For information on the property types accepted, see the IntlMessageShape documentation.

onClosed

Tipo

() => void

Descripción

Function called when the notification disappears.

type

Tipo

'success' | 'warning' | 'error' | 'info'

Descripción

Defines the severity of the notification. It is used to set the color and appearance of the notification.

idobsoleto

Tipo

string

Descripción

Unique identifier for the component.

Ganchos

No hay ganchos para InlineNotification.

Claves de traducción

No hay traducciones para InlineNotification.

Para obtener información sobre cómo gestionar las traducciones, consulte nuestra sección sobre internacionalización.

Escotillas de escape

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

Note:

La dependencia @jutro/router y sus dependencias de pares como history y react-router-dom ahora son opcionales para los paquetes de componentes. Sin embargo, el componente InlineNotification requiere que la dependencia se agregue a las dependencias de su aplicación para poder ser utilizado.

Ejemplos

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

Ejemplo de notificación integrada básica

Este es un ejemplo sencillo que muestra un mensaje de notificación integrada que ejecuta una función cuando usted desestima la notificación.

<InlineNotification
  message="Message"
  messageProps={{
    success: 'Hello',
  }}
  onClosed={function () {
    console.log('Closed');
  }}
  isDismissable={false}
  type="success"
/>

Inclusión de un enlace

Al usar la propiedad linkProp, es posible agregar un enlace específico al final del texto de la notificación.

<InlineNotification
  message="Message"
  messageProps={{
    warning: 'Hello',
  }}
  linkProps={{
    children: 'More Details',
    to: '/inline-notification',
  }}
  isDismissable={false}
  type="warning"
/>

Notificación de conjunto

El componente InlineNotification proporciona un mecanismo para mostrar un conjunto con varios mensajes. El tipo de objeto que la propiedad message recibe se utiliza para decidir la opción de visualización: mensaje único o conjunto.

En el módulo de conjunto, el estilo de notificación se decidirá por mensaje según el type de mayor gravedad: error, advertencia, acción correcta e información. El conjunto muestra todos los mensajes recibidos por el componente, y los agrupa por type.

<InlineNotification
  message={{
    error: {
      MyField: [
        {
          fieldId: 'MyField1',
          message: 'This is a required field',
          type: 'error',
        },
      ],
      AnotherField: [
        {
          fieldId: 'MyField2',
          message: 'Value is below minimum allowed',
          type: 'error',
        },
      ],
    },
    info: {
      'Process due date': [
        { message: 'The process due date is on 7 days', type: 'info' },
      ],
    },
    success: {
      'Claim data loaded': [
        {
          message: 'Claim information successfully retrieved',
          type: 'success',
        },
      ],
      'Personal details are correct': [
        {
          message: 'Personal information successfully validated',
          type: 'success',
        },
      ],
    },
    warning: {
      'Address not found': [
        {
          message:
            'Please review the address details and confirm it is correct.',
          type: 'warning',
        },
      ],
      'Validate starting date': [
        {
          message: 'Please confirm that the starting date is correct',
          type: 'warning',
        },
      ],
      'Unable to validate financial details': [
        { message: 'No financial record found', type: 'warning' },
      ],
    },
  }}
  isBundleOpenByDefault={true}
  isDismissable={false}
/>

Registro de cambios

10.9.0

• Se introdujo una nueva característica de opción de participación que desactiva la publicación automática de eventos para el componente InlineNotification. Puede habilitar esta función agregando JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=true al archivo .env en la raíz de su aplicación de Jutro. Cuando esta acción está habilitada, los componentes heredados ya no publican eventos de forma predeterminada. Para obtener más información sobre los eventos y cómo configurar nuevos, consulte la documentación sobre eventos.

10.1.0

• La propiedad id quedó obsoleta.