Phase progress bar
Examples
Check out the Usage section for details about how to design a Phase progress bar properly, and the different configuration options we provide.
Basic Example
Displays progress as a series of phases which in turn have a series of sub steps to complete.
<PhaseProgressBar
phases={[
{
icon: 'gw-business-center',
id: 'your-business',
steps: [
{
title: 'Completed phase first step',
visited: true
},
{
title: 'Completed phase second step',
visited: true
}
],
title: 'Completed Phase'
},
{
icon: 'gw-insert-drive-file',
id: 'final-details',
isError: false,
steps: [
{
active: true,
title: 'Active step',
visited: true
},
{
title: 'Next step'
}
],
title: 'Current phase'
},
{
icon: 'gw-credit-card',
id: 'payment',
steps: [
{
title: 'Next phase step 1'
},
{
title: 'Next phase step 2'
},
{
title: 'Next phase step 3'
}
],
title: 'Next phase'
}
]}
/>
Interactive Example
This example shows how the phase progress bar changes as a user progresses through the steps in each of its phases.
const [currentStage, setCurrentStage] = useState(0);
const [currentStep, setCurrentStep] = useState(0);
const initialPhases = [
{
title: 'First Phase',
icon: 'gw-business-center',
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: 'gw-insert-drive-file',
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>
Error Example
You can highlight when there is an error within a phase.
<PhaseProgressBar
phases={[
{
icon: 'gw-business-center',
id: 'your-business',
steps: [
{
title: 'Completed phase first step',
visited: true
},
{
title: 'Completed phase second step',
visited: true
}
],
title: 'Completed Phase'
},
{
icon: 'gw-insert-drive-file',
id: 'final-details',
isError: true,
steps: [
{
active: true,
title: 'Active step',
visited: true
},
{
title: 'Next step'
}
],
title: 'Current phase'
}
]}
/>
OnClick Example
You can add a function that runs when the phase title is clicked.
function MakeToast (text: string) {
ToastProvider.toast({
message: text,
autoClose: 3000,
})
}
<ToastProvider />
<PhaseProgressBar
phases={[
{
icon: 'gw-business-center',
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: 'gw-insert-drive-file',
id: 'final-details',
steps: [
{
active: true,
title: 'Active step',
visited: true
},
{
title: 'Next step'
}
],
title: 'Current phase',
onClick: () => {MakeToast("Current clicked")}
}
]}
/>
Was this page helpful?