Acordeón

Acordeón en Storybook

Note: Hay versiones obsoletas de este componente. Consulte una versión de los documentos anterior a la 10.0.x.

Uso

Descripción general

El acordeón es un componente que permite la visualización progresiva de la información. Los acordeones son útiles cuando necesita incluir grandes cantidades de contenido dentro de un espacio pequeño (por ejemplo, una interfaz móvil o un panel lateral). Consisten en encabezados apilados verticalmente que se expanden para revelar su contenido. Permiten que los usuarios controlen la cantidad de información que ven en la pantalla en un momento dado. Es posible que encuentre acordeones en los flujos de asistentes y en las soluciones móviles, donde el espacio es escaso.

Cuándo se debe utilizar

• Para revelar contenido que los usuarios pueden leer de forma selectiva.
• Cuando no hay mucho espacio vertical y no es necesario mostrar todo el contenido a la vez.
• Para organizar la información relacionada.

Cuándo no se debe utilizar

• Para el contenido que es fundamental para la finalización de la tarea.
• A la hora de crear un menú. En lugar de eso, analice la posibilidad de utilizar el componente menú de desbordamiento.
• Cuando necesite anidar varios acordeones uno dentro del otro. En su lugar, analice la posibilidad de utilizar el componente vista de árbol.

Formato

Anatomía

El acordeón consta de los siguientes elementos:

1. Encabezado: título que brinda a los usuarios una descripción general del contenido de esa sección.
2. Corchete angular: ícono que indica el estado del acordeón (expandido o contraído).
3. Contenido principal: contenido asociado que aparece al expandir el encabezado del acordeón. Puede constar de texto o elementos de interfaz de usuario, como un campo de entrada.
4. Divisor: delimitador visual para distinguir los elementos del acordeón. Debería estar visible de forma predeterminada con la opción de ocultarlo.

Alineación y ubicación

De forma predeterminada, el ícono de corchete angular se coloca en el lado derecho (al final) del encabezado. Esto permite que el título del acordeón se alinee con el resto del contenido de la página. La ubicación de los íconos (izquierda o derecha) debe ser coherente en todas las páginas de una aplicación.

El acordeón debe ajustarse a todo el ancho del contenedor principal. Para cambiar el ancho del acordeón, cambie el ancho del contenedor.

Haga coincidir el ancho del acordeón con el ancho del contenedor principal.

No haga que el ancho del acordeón sea menor que el del contenedor principal.

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.

Encabezado del acordeón

El encabezado del acordeón puede contener lo siguiente:

• Texto (título del encabezado y texto secundario).
• Ícono (cuando el corchete angular está en el lado derecho, puede colocar un ícono antes del título del encabezado. Si el corchete angular está en el lado izquierdo, coloque el ícono al final del encabezado del acordeón).

El encabezado del acordeón puede incluir texto, íconos y otros elementos no interactivos.

No agregue elementos interactivos, como botones, al encabezado del acordeón. Esto infringe los requisitos de accesibilidad.

Cada encabezado de acordeón debe tener un título único que describa de manera clara y sucinta el contenido del cuerpo asociado. Los encabezados aparecen con mayúscula inicial como en las oraciones, excepto cuando se usan nombres propios.

Cuerpo del acordeón

• El contenido de los acordeones nunca debe desplazarse de manera horizontal.
• Puede dividir el contenido de un panel de acordeón en párrafos e incluir subtítulos si fuera necesario.

Límite de palabras y caracteres

No hay un límite máximo de caracteres o palabras en el encabezado o el contenido principal.

Comportamientos

Estados

El componente acordeón tiene 2 estados principales: contraído y expandido.

• Contraído: estado predeterminado cuando el acordeón está contraído y no seleccionado. Los acordeones cerrados aparecen sin resaltado y muestran solo el título del encabezado.
• Expandido: indica que el usuario ha seleccionado el acordeón y lo ha expandido para mostrar contenido. El ícono del corchete angular apunta hacia abajo para indicar que el acordeón se ha expandido.

Además de los estados contraído y expandido, los acordeones también tienen estados interactivos como habilitado, deshabilitado, con cursor encima, en foco y activo.

	Estado	Descripción
	Habilitado	Estado predeterminado.
	Deshabilitado	Indica que el acordeón no es interactivo, pero podría serlo en algún momento. El estado deshabilitado no está destinado a ser accesible, por eso, no debe estar en foco.
	Con cursor encima	Indica un cambio de estilo cuando el usuario pasa sobre el encabezado del acordeón con el ratón.
	En foco	Indica que el usuario ha seleccionado (pero no expandido) el acordeón. Los bordes del componente se resaltan con el color de nuestra marca.
	Activo	Indica que el usuario está haciendo clic o tocando el elemento.

Interacciones

Ratón

Cuando un usuario hace clic para abrir un nuevo elemento del acordeón, los elementos que ya están abiertos permanecen así. Cada interacción requiere un clic del usuario para evitar la desorientación en la interfaz de usuario. Los usuarios pueden contraer y expandir el acordeón haciendo clic en el corchete angular o en cualquier parte de la región del encabezado.

Teclado

El encabezado del acordeón funciona como un botón. Intro y la barra espaciadora expanden y contraen cada panel de acordeón. Navegue por los elementos del acordeón que pueden recibir el foco usando Tab y Shift + Tab.

Lector de pantalla

Cuando está contraído, el contenido del panel de acordeón queda oculto. El estado WAI-ARIA aria-expanded="false" advierte a los usuarios que el panel no está visible. Cuando se expande, el atributo ARIA cambia a “true” para indicar que el contenido es visible.

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 la guía a continuación y consulte también las Prácticas de creación de acordeones de WAI-ARIA cuando utilice este componente en sus aplicaciones:

• Cada encabezado del acordeón debe tener un título único que describa el contenido del panel de acordeón. Esto ayuda a los usuarios no videntes, en particular, ya que pueden navegar por cada encabezado y comprender el contenido, sin tener que expandir cada panel.
• Asegúrese de que no haya trampas de teclado al agregar contenido al panel de acordeón. Los usuarios deberían poder moverse a cada elemento que puede recibir el foco dentro de cada panel y luego pasar al siguiente encabezado de tarjeta de acordeón.

Note: Hay versiones obsoletas de este componente. Consulte una versión de los documentos anterior a la 10.0.x.

Código

<Accordion>
  <AccordionCard title="Card 1">Test card</AccordionCard>
  <AccordionCard title="Card 2">Test card 2</AccordionCard>
  <AccordionCard
    disabled
    title="Card 3">
    Test card 3
  </AccordionCard>
</Accordion>

Instrucción de importación

import { Accordion, AccordionCard } 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

Acordeón

childrenobligatorio

Tipo

AccordionCard | AccordionCard[]

Descripción

Accepts one or many AccordionCards that will be rendered in context of this Accordion container.

chevronPosition

Tipo

'left' | 'right'

Descripción

Sets the position of the chevron icon for all the AccordionCards in the container.

Valor predeterminado

'right'

className

Tipo

string

Descripción

CSS class name for this component.

hideDivider

Tipo

boolean

Descripción

If set to true, the dividers between AccordionCards in the container will be hidden.

AccordionCard

titleobligatorio

Tipo

IntlMessageShape

Descripción

Message rendered as the title for the AccordionCard. If the dangerouslySetHeader property is provided, it becomes optional and won't be rendered by default.

className

Tipo

string

Descripción

CSS class name for this component.

dangerouslySetHeader

Tipo

ReactNode

Descripción

Custom header component to be displayed in the AccordionCard instead of title. It takes precedence over title prop when both are defined.

disabled

Tipo

boolean

Descripción

If set to true, the entire AccordionCard component will be disabled and proper styles will be applied.

initialExpanded

Tipo

boolean

Descripción

If set to true, the AccordionCard will be expanded on initial load.

Paso de propiedades HTML alAccordionCard componente

En su estructura interna, AccordionCard renderiza un botón de elemento HTML nativo. Si hay alguna propiedad HTML del botón HTML estándar que aún no forma parte del componente AccordionCard, puede transmitirla al componente. Se asignará al componente interno del botón HTML.

<AccordionCard
  title="Card title"
  id="accordion-card-1"
/>

El resultado de pasar esta propiedad id es que formará parte del botón HTML que se crea en el DOM HTML.

Ganchos

useAccordionCardState proporciona propiedades del contexto de AccordionCard que puede usar para crear encabezados personalizados de AccordionCard. El gancho devuelve un valor, que es un objeto que contiene:

disabledobligatorio

Tipo

boolean

Descripción

Whether the AccordionCard is currently disabled.

expandedobligatorio

Tipo

boolean

Descripción

Whether the AccordionCard is currently expanded.

titleobligatorio

Tipo

string

Descripción

Value of the AccordionCard's text property.

const CustomHeader = () => {
  const { expanded, disabled, title } = useAccordionCardState();

  return (...);
};

Claves de traducción

No hay traducciones para Accordion.

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.

Información heredada

¿Está usando el acordeón heredado?

• Para ver los documentos de los componentes antiguos, consulte una versión de la documentación anterior a la 10.0.

• Estos componentes heredados también están disponibles en Storybook:

  • Acordeón

Note: Hay versiones obsoletas de este componente. Consulte una versión de los documentos anterior a la 10.0.x.

Ejemplos

Acordeón simple

<Accordion>
  <AccordionCard title="Card 1">Test card</AccordionCard>
  <AccordionCard
    title="Card 2"
    initialExpanded>
    Card initially open
  </AccordionCard>
  <AccordionCard
    disabled
    title="Card 3">
    Test card 3
  </AccordionCard>
</Accordion>

Los componentes Accordion y AccordionCard están disponibles en el paquete @jutro/components. Solo AccordionCard se puede colocar dentro de Accordion. AccordionCard siempre tiene que tener establecida una propiedad dangerouslyRenderHeader o title, pero no se recomienda el uso de la primera.

Personalización de la apariencia del acordeón

<Accordion
  chevronPosition="left"
  hideDivider>
  <AccordionCard title="Card 1">Test card</AccordionCard>
  <AccordionCard title="Card 2">Test card 2</AccordionCard>
  <AccordionCard
    disabled
    title="Card 3">
    Test card 3
  </AccordionCard>
</Accordion>

El uso de la propiedad hideDivider le permite ocultar todos los separadores. La inserción de corchetes angulares se limita a las opciones right y left. Ambos se establecen en el nivel del Accordion.

Tarjetas de acordeón con encabezados personalizados

.customHeaderContainer {
  display: flex;
  align-items: center;
}

.customHeaderIcon {
  margin-right: 8px;
}

import {
  Accordion,
  AccordionCard,
  useAccordionCardState,
} from '@jutro/components';

const CustomHeader1 = () => {
  const { expanded, title } = useAccordionCardState();

  return (
    <div className={styles.customHeaderContainer}>
      {expanded ? `Expanded ${title}` : `Collapsed ${title}`}
    </div>
  );
};

const CustomHeader2 = () => {
  const { expanded } = useAccordionCardState();

  return (
    <div className={styles.customHeaderContainer}>
      {expanded ? (
        <Icon
          icon="gw-add"
          className={styles.customHeaderIcon}
        />
      ) : (
        <Icon
          icon="gw-alarm"
          className={styles.customHeaderIcon}
        />
      )}
      Custom rendered card header
    </div>
  );
};

<Accordion>
  <AccordionCard title="Card 1">Test card</AccordionCard>
  <AccordionCard
    title="custom card header"
    dangerouslySetHeader={<CustomHeader1 />}>
    I'm basic but custom
  </AccordionCard>
  <AccordionCard
    dangerouslySetHeader={<CustomHeader2 />}
    initialExpanded
    onFocus={() =>
      console.log(
        "I'm a custom attribute of a button added to be triggered on accordion card button focus"
      )
    }>
    I'm so custom
  </AccordionCard>
</Accordion>;

dangerouslySetHeader permite una mayor flexibilidad en cuanto al contenido del encabezado, pero le recomendamos no utilizar esta propiedad en exceso.

Registro de cambios

10.0.0

Se introdujo el nuevo componente @jutro/components/Accordion que sustituye al anterior.

Los componentes anteriores relacionados con acordeón quedaron obsoletos y se trasladaron al paquete @jutro/legacy. Para ver su documentación, consulte la versión de la documentación anterior a la 10.0.

Ubicaciones del componente original:

• AccordionCard: @jutro/components/Accordion
• AccordionCard: @jutro/components/AccordionCard

Ubicaciones del componente nuevo:

• Accordion: @jutro/legacy/components/Accordion
• AccordionCard: @jutro/legacy/components/AccordionCard

Los codemods están disponibles para cambiar automáticamente el nombre de las importaciones existentes.