Barre de progression de phase

Barre de progression de phase dans Storybook

Utilisation

Présentation

La barre de progression des phases affiche la progression de l’utilisateur dans la réalisation d’une tâche, divisée en phases distinctes.

Quand l'utiliser

• Pour afficher les étapes et sous-étapes d’une tâche spécifique.
• Lorsque vous avez besoin d’utiliser des icônes personnalisées.

Quand ne pas l'utiliser

Si vous n’êtes pas sûr du nombre d’étapes nécessaires pour effectuer la tâche. Utilisez plutôt une barre de progression simple.

Formatage

Structure

La disposition des phases comprend les éléments suivants :

1. Icône de phase : indique si une phase est terminée, en cours ou en attente. Vous pouvez utiliser différentes icônes avec la barre de progression des phases pour personnaliser l’expérience.
2. Barre : relie visuellement les phases entre elles.
3. Libellé de phase : fournit le contexte de chaque phase (par exemple, « Paiement »).

Meilleures pratiques

• Assurez-vous que les étapes apparaissent dans un ordre logique, du début à la fin (de gauche à droite).
• Les utilisateurs doivent pouvoir revenir aux étapes précédentes afin de les passer de nouveau en revue et de mettre à jour les détails.
• Veillez à ce que les étapes soient regroupées de manière logique, simples et claires pour faciliter la compréhension.
• Assurez-vous que toutes les étapes sont visibles.
• Limitez le nombre d'étapes à un minimum de 3 et à un maximum de 7.

Contenu

Directives générales relatives à la rédaction

• Mettez une majuscule en début de phrase pour tous les aspects relatifs à la conception des interfaces de produit Guidewire. Ne mettez pas la 1re lettre du 1er mot du titre en majuscule.
• Utilisez des verbes au présent et la forme active dans la plupart des cas.
• Utilisez des contractions courantes pour donner à votre texte un ton plus naturel et informel.
• Utilisez un langage simple. Évitez tout jargon inutile et les formulations complexes.
• Utilisez des termes et des phrases concis.

Étiquette de phase

• Veillez à ce que les libellés restent courts et qu'ils identifient clairement l'étape.
• Mettez une majuscule initiale aux étiquettes. Mettez une majuscule au premier mot d’une phrase et aux noms propres. Pour obtenir des instructions supplémentaires sur l'utilisation des majuscules en début de phrase, reportez-vous à Usage des majuscules.
• Lorsque vous utilisez des infobulles en lien avec une mise en page d’étapes, leur contenu ne doit se composer que d’un mot ou deux.

Interactions

Clavier

Chaque étape active est accessible à partir du clavier.

Lecteur d'écran

La barre de progression des phases représente l’ensemble d’un processus. Elle contient une série de barres de progression indépendantes plus petites qui représentent les phases de ce processus. Le composant implémente la balise de repérage <nav> HTML5 et chaque phase individuelle est identifiée par son nom (via une valeur aria-label) et par le paramètre WAI-ARIA role='link'.

Accessibilité

Ce composant a été validé pour répondre aux directives d’accessibilité WCAG 2.2 AA dans sa configuration de base par défaut. Il s’agit notamment de s’assurer que :

• Le rapport de contraste des éléments textuels par rapport à leur arrière-plan est supérieur à 4.5:1.
• Le contenu non textuel qui doit transmettre le sens (comme les icônes et les indicateurs de focus) a un rapport de contraste d’au moins 3:1 avec ses couleurs adjacentes.
• Cet élément peut être utilisé à l’aide d’un clavier et d’une souris.
• Le contenu est accessible à l’aide de lecteurs d’écran, tels que JAWS et VoiceOver.

La conformité de l’accessibilité dépend en définitive de la façon dont ce composant est implémenté et personnalisé. Les modifications apportées par l’auteur du contenu peuvent affecter l’accessibilité. Pour en savoir plus sur notre modèle de responsabilité partagée, consultez notre Déclaration d’accessibilité Jutro complète.

Code

<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',
    },
  ]}
/>

Instruction d'importation

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

Cahier des charges du composant

Assurez-vous de comprendre la surface de l'API des composants du système de conception, ainsi que les implications et les compromis. Pour en savoir plus, reportez-vous à notre introduction à l'API des composants.

Propriétés

Propriétés de la barre de progression des phases

phasesobligatoire

Type

PhaseProps[]

Description

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

className

Type

string

Description

CSS class name for this component.

Propriétés de phase

stepsobligatoire

Type

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

titleobligatoire

Type

intlMessageShape

Description

Text part for labeling the phase.

active

Type

string

Description

If set to true, this is the active step.

disabled

Type

string

Description

If set to true, this step is disabled.

onClick

Type

function (React.MouseEvent<HTMLElement>)

Description

On click event handler.

visited

Type

boolean

Description

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

Description

Steps data.

titleobligatoire

Type

IntlMessageShape

Description

Text part for labeling the phase.

className

Type

string

Description

CSS class name for this component.

icon

Type

string | Icon

Description

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

Type

string

Description

Unique identifier for the component.

isError

Type

boolean

Description

Flag determining if phase will be shown as an error.

onClick

Type

function (React.MouseEvent<HTMLElement>)

Description

On click event handler.

showLabel

Type

boolean

Description

if set to true, the label will be displayed.

Crochets

ProgressLabelContext - Contexte sur les étiquettes de progression des phases.

Clés de traduction

Les messages ProgressIndicator peuvent être utilisés pour afficher des détails sur la progression actuelle des utilisateurs :

Clé	Utilisée pour
jutro-components.widgets.progressIndicator.status.completed	L'étape est terminée
jutro-components.widgets.progressIndicator.status.inProgress	L'étape est en cours
jutro-components.widgets.progressIndicator.progressStep.status.visited	L'étape a été consultée
jutro-components.widgets.progressIndicator.ariaLabel	aria-label formé à partir de la combinaison de progressTitle et progressLabel

Portes de sortie

Pour en savoir plus, reportez-vous à notre documentation sur les portes de sortie.

Comportements personnalisés

Point d'arrêt téléphonique

Prise en charge automatique des points d'arrêt téléphoniques. N'afficheront pas les étiquettes de phase si un point d'arrêt téléphonique est détecté.

Exemples

Consultez la section Utilisation pour découvrir comment concevoir correctement une barre de progression simple et connaître les différentes options de configuration que nous proposons.

Exemple de barre de progression des phases de base

Affiche la progression sous forme d'une série de phases, qui à leur tour comportent une série de sous-étapes à effectuer.

<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',
    },
  ]}
/>

Exemple interactif

Cet exemple montre comment la barre de progression des phases change au fur et à mesure qu'un utilisateur progresse dans les étapes de chacune de ses phases.

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>;

Exemple d'erreur

Vous pouvez mettre en évidence les situations pour lesquelles une erreur survient au cours d'une phase.

<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',
    },
  ]}
/>

Exemple OnClick

Vous pouvez ajouter une fonction qui s’exécute lorsque l’utilisateur clique sur le titre de la phase.

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")}
        }
    ]}
    />

Journal des modifications

10.9.0

Type de propriété icon étendu

Le type de la propriété icon a été étendu à string | React.ComponentType.

Obsolescences

Le transfert de string en tant que valeur à la propriété icon est désormais obsolète.