Barra de progreso de fase

Barra de progreso de fase en Storybook

Uso

Descripción general

La barra de progreso de fase muestra el progreso del usuario al completar una tarea, dividido en distintas fases.

Cuándo se debe utilizar

• Para mostrar los pasos y subpasos de una tarea específica.
• Cuando necesite utilizar íconos personalizados.

Cuándo no se debe utilizar

Si no está seguro de la cantidad de pasos necesarios para completar la tarea. En su lugar, use una barra de progreso simple.

Formato

Anatomía

La composición en fases consta de los siguientes elementos:

1. Ícono de fase: Indica si una fase se completó, está en curso o está pendiente. Puede usar diferentes íconos con la barra de progreso de fase para personalizar la experiencia.
2. Barra: Conecta las fases visualmente.
3. Rótulo de fase: Proporciona contexto para cada fase (por ejemplo, “Pago”).

Prácticas recomendadas

• Asegúrese de que los pasos se muestren en un orden lógico, de principio a fin (de izquierda a derecha).
• Los usuarios deben poder volver a los pasos anteriores para revisar y actualizar los detalles.
• Asegúrese de que los pasos estén agrupados lógicamente, sean simples y claros para facilitar la comprensión.
• Asegúrese de que todos los pasos estén visibles.
• Mantenga los pasos a un mínimo de 3 y un máximo de 7.

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.

Rótulo de fase

• Los rótulos deben ser cortos e identificar claramente el paso.
• En los rótulos, use mayúsculas como se usan en las oraciones. La primera palabra de una frase y cualquier nombre propio deber ir en mayúscula. Para obtener orientación adicional sobre cómo implementar el uso de mayúsculas y minúsculas en las oraciones, consulte la sección Uso de mayúsculas.
• Cuando se utiliza descripciones emergentes junto con una disposición de pasos, el contenido de la descripción emergente solo debe contener una o dos palabras.

Interacciones

Teclado

Cada paso activo puede recibir el foco con el uso del teclado.

Lector de pantalla

La barra de progreso de fase representa un proceso completo. Contiene una serie de barras de progreso independientes más pequeñas que representan fases en ese proceso. El componente implementa la etiqueta de punto de referencia <nav> de HTML5 y cada frase individual se identifica por su nombre (a través de un valor aria-label) y role='link' de WAI-ARIA.

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.

Código

<PhaseProgressBar
  phases={[
    {
      icon: BusinessCenterIcon,
      id: 'your-business',
      steps: [
        {
          title: 'Completed phase first step',
          visited: true,
        },
        {
          title: 'Completed phase second step',
          visited: true,
        },
      ],
      title: 'Completed Phase',
    },
    {
      icon: InsertDriveIcon,
      id: 'final-details',
      isError: false,
      steps: [
        {
          active: true,
          title: 'Active step',
          visited: true,
        },
        {
          title: 'Next step',
        },
      ],
      title: 'Current phase',
    },
    {
      icon: CreditCardIcon,
      id: 'payment',
      steps: [
        {
          title: 'Next phase step 1',
        },
        {
          title: 'Next phase step 2',
        },
        {
          title: 'Next phase step 3',
        },
      ],
      title: 'Next phase',
    },
  ]}
/>

Instrucción de importación

import { PhaseProgressBar } 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

Propiedades de la barra de progreso de fase

phasesobligatorio

Tipo

PhaseProps[]

Descripción

List of phase objects in the progress indicator. These are the same props listed in the Phase properties table.

className

Tipo

string

Descripción

CSS class name for this component.

Propiedades de fase

stepsobligatorio

Tipo

{ title: intlMessageShape, visited?: bool, active?: bool, disabled?: bool, onClick?: () => void) }[]

titleobligatorio

Tipo

intlMessageShape

Descripción

Title of the step represented by this array element.

active

Tipo

string

Descripción

If set to true, this is the active step.

disabled

Tipo

string

Descripción

If set to true, this step is disabled.

onClick

Tipo

function (React.MouseEvent<HTMLElement>)

Descripción

On click event handler.

visited

Tipo

boolean

Descripción

If set to true, the user has already visited this step.

Descripción

Steps data.

titleobligatorio

Tipo

IntlMessageShape

Descripción

Text part for labeling the phase.

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

id

Tipo

string

Descripción

Unique identifier for the component.

isError

Tipo

boolean

Descripción

Flag determining if phase will be shown as an error.

onClick

Tipo

function (React.MouseEvent<HTMLElement>)

Descripción

On click event handler.

showLabel

Tipo

boolean

Descripción

if set to true, the label will be displayed.

Ganchos

ProgressLabelContext: Contexto sobre los rótulos de progreso de fase.

Claves de traducción

Los mensajes ProgressIndicator se pueden utilizar para mostrar detalles sobre el progreso actual de los usuarios:

Clave	Se usa para
jutro-components.widgets.progressIndicator.status.completed	Cuando el paso se ha completado
jutro-components.widgets.progressIndicator.status.inProgress	Cuando el paso está en curso
jutro-components.widgets.progressIndicator.progressStep.status.visited	Cuando el paso se ha visitado
jutro-components.widgets.progressIndicator.ariaLabel	aria-label formado a partir de una combinación entre progressTitle y progressLabel

Escotillas de escape

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

Comportamientos personalizados

Punto de interrupción de teléfonos

Admite automáticamente los puntos de interrupción de teléfonos. No mostrará rótulos de fase si se detecta un punto de interrupción de teléfono.

Ejemplos

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

Ejemplo de barra de progreso de fase básica

Muestra el progreso como una serie de fases que, a su vez, tienen una serie de pasos secundarios que se deben completar.

<PhaseProgressBar
  phases={[
    {
      icon: BusinessCenterIcon,
      id: 'your-business',
      steps: [
        {
          title: 'Completed phase first step',
          visited: true,
        },
        {
          title: 'Completed phase second step',
          visited: true,
        },
      ],
      title: 'Completed Phase',
    },
    {
      icon: InsertDriveIcon,
      id: 'final-details',
      isError: false,
      steps: [
        {
          active: true,
          title: 'Active step',
          visited: true,
        },
        {
          title: 'Next step',
        },
      ],
      title: 'Current phase',
    },
    {
      icon: CreditCardIcon,
      id: 'payment',
      steps: [
        {
          title: 'Next phase step 1',
        },
        {
          title: 'Next phase step 2',
        },
        {
          title: 'Next phase step 3',
        },
      ],
      title: 'Next phase',
    },
  ]}
/>

Ejemplo interactivo

En este ejemplo, se muestra cómo la barra de progreso de fase cambia a medida que un usuario avanza por los pasos en cada una de sus fases.

const [currentStage, setCurrentStage] = useState(0);
const [currentStep, setCurrentStep] = useState(0);
const initialPhases = [
  {
    title: 'First Phase',
    icon: BusinessCenterIcon,
    id: 'your-business',
    steps: [
      {
        title: 'First step',
        visited: true,
        active: true,
      },
      {
        title: 'Second step',
        visited: false,
      },
      {
        title: 'Third step',
        visited: false,
      },
    ],
  },
  {
    title: 'Second phase',
    icon: InsertDriveIcon,
    id: 'final-details',
    isError: false,
    steps: [
      {
        title: 'First step',
        visited: false,
      },
    ],
  },
];
const [phases, setPhases] = useState(initialPhases);
const [disableButton, setDisabledButton] = useState(false);
const [disableBackButton, setDisabledBackButton] = useState(true);
const [labelState, setLabelState] = useState('info');

const moveToNext = () => {
  let nextPhases = phases;
  let stage = currentStage;
  let step = currentStep;

  nextPhases[stage].steps[step].visited = true;
  nextPhases[stage].steps[step].active = false;

  if (stage == 0) {
    step < 2
      ? setCurrentStep(++step)
      : ((stage = 1), (step = 0), setCurrentStage(stage), setCurrentStep(step));
    nextPhases[stage].steps[step].active = true;
    setDisabledBackButton(false);
  } else {
    setDisabledButton(true);
    setLabelState('success');
  }

  setPhases(nextPhases);
};

const moveBack = () => {
  let nextPhases = phases;
  let stage = currentStage;
  let step = currentStep;

  nextPhases[stage].steps[step].visited = false;
  nextPhases[stage].steps[step].active = false;

  if (stage == 1) {
    stage = 0;
    step = 2;
    setCurrentStage(stage);
    setCurrentStep(step);
    nextPhases[stage].steps[step].active = true;
    nextPhases[stage].steps[step].visited = false;
    setLabelState('info');
    setDisabledButton(false);
  } else {
    step > 0
      ? setCurrentStep(--step)
      : ((stage = 1), (step = 0), setCurrentStage(stage), setCurrentStep(step));
    nextPhases[stage].steps[step].active = true;
    if (step == 0) {
      setDisabledBackButton(true);
    }
  }

  setPhases(nextPhases);
};

<JutroWrapper>
  <PhaseProgressBar phases={phases} />
  <br />
  <InfoLabel type={labelState}>Phase: {phases[currentStage].title}</InfoLabel>
  <InfoLabel type={labelState}>
    Step: {phases[currentStage].steps[currentStep].title}
  </InfoLabel>
  <br />
  <br />
  <Button
    label="previous"
    onClick={moveBack}
    disabled={disableBackButton}></Button>
  <Button
    label="next"
    onClick={moveToNext}
    disabled={disableButton}></Button>
</JutroWrapper>;

Ejemplo de error

Puede resaltar cuando haya un error dentro de una fase.

<PhaseProgressBar
  phases={[
    {
      icon: BusinessCenterIcon,
      id: 'your-business',
      steps: [
        {
          title: 'Completed phase first step',
          visited: true,
        },
        {
          title: 'Completed phase second step',
          visited: true,
        },
      ],
      title: 'Completed Phase',
    },
    {
      icon: InsertDriveIcon,
      id: 'final-details',
      isError: true,
      steps: [
        {
          active: true,
          title: 'Active step',
          visited: true,
        },
        {
          title: 'Next step',
        },
      ],
      title: 'Current phase',
    },
  ]}
/>

Ejemplo de OnClick

Puede agregar una función que se ejecute cuando se haga clic en el título de la fase.

function MakeToast (text: string) {
        ToastProvider.toast({
            message: text,
            autoClose: 3000,
          })
    }

<ToastProvider />
<PhaseProgressBar
    phases={[
        {
        icon: BusinessCenterIcon,
        id: 'your-business',
        steps: [
            {
            title: 'Completed phase first step',
            visited: true
            },
            {
            title: 'Completed phase second step',
            visited: true
            }
        ],
        title: 'Completed Phase',
        onClick: () => {MakeToast("Completed clicked")}
        },
        {
        icon: InsertDriveIcon,
        id: 'final-details',
        steps: [
            {
            active: true,
            title: 'Active step',
            visited: true
            },
            {
            title: 'Next step'
            }
        ],
        title: 'Current phase',
        onClick: () => {MakeToast("Current clicked")}
        }
    ]}
    />

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.