Sequence Map

Sequence Map is a sequence of steps and sub-steps.

Example

Live Editor

function MySequenceMap() { const items = [ { step: 1, label: 'Step 1', disabled: true }, { step: 2, label: 'Step 2', invalid: true, optional: true, subSteps: [ { step: 1, label: 'Sub Step 1' }, { step: 2, label: 'Sub Step 2' }, { step: 3, label: 'Sub Step 3', optional: true } ] }, { step: 3, label: 'Step 3' }, { step: 4, label: 'Step 4', subSteps: [ { step: 1, label: 'Sub Step 1' }, { step: 2, label: 'Sub Step 2' }, { step: 3, label: 'Sub Step 3', optional: true } ] }, { step: 5, label: 'Step 5', optional: true }, { step: 6, label: 'Step 6', optional: true } ]; return ( <SequenceMap items={items} current={3} active={5} optionalText="optional" onSelect={(step) => console.log(step)} /> ); }

function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1', disabled: true },
    {
      step: 2,
      label: 'Step 2',
      invalid: true,
      optional: true,
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 3, label: 'Step 3' },
    {
      step: 4,
      label: 'Step 4',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 5, label: 'Step 5', optional: true },
    { step: 6, label: 'Step 6', optional: true }
  ];
  return (
    <SequenceMap
      items={items}
      current={3}
      active={5}
      optionalText="optional"
      onSelect={(step) => console.log(step)}
    />
  );
}

Result

Loading...

Variants

Active Step

Sequence Map is able to navigate from the first step to active step. The default value is the first step.

Live Editor

function MySequenceMap() { const items = [ { step: 1, label: 'Step 1' }, { step: 2, label: 'Step 2' }, { step: 3, label: 'Step 3', subSteps: [ { step: 1, label: 'Sub Step 1' }, { step: 2, label: 'Sub Step 2' }, { step: 3, label: 'Sub Step 3', optional: true } ] }, { step: 4, label: 'Step 4', optional: true } ]; return <SequenceMap items={items} optionalText="optional" />; }

function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2' },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true }
  ];
  return <SequenceMap items={items} optionalText="optional" />;
}

Result

Loading...

Using active to set active step.

Live Editor

function MySequenceMap() { const items = [ { step: 1, label: 'Step 1' }, { step: 2, label: 'Step 2' }, { step: 3, label: 'Step 3', subSteps: [ { step: 1, label: 'Sub Step 1' }, { step: 2, label: 'Sub Step 2' }, { step: 3, label: 'Sub Step 3', optional: true } ] }, { step: 4, label: 'Step 4', optional: true } ]; return <SequenceMap items={items} active={3} optionalText="optional" />; }

function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2' },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true }
  ];
  return <SequenceMap items={items} active={3} optionalText="optional" />;
}

Result

Loading...

Current Step

You can set the selected step by current prop. The default value for current step is the active step.

Live Editor

function MySequenceMap() { const items = [ { step: 1, label: 'Step 1' }, { step: 2, label: 'Step 2' }, { step: 3, label: 'Step 3', subSteps: [ { step: 1, label: 'Sub Step 1' }, { step: 2, label: 'Sub Step 2' }, { step: 3, label: 'Sub Step 3', optional: true } ] }, { step: 4, label: 'Step 4', optional: true } ]; return <SequenceMap items={items} active={2} optionalText="optional" />; }

function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2' },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true }
  ];
  return <SequenceMap items={items} active={2} optionalText="optional" />;
}

Result

Loading...

Using current to set current step, the current must be less than or equal active

Live Editor

function MySequenceMap() { const items = [ { step: 1, label: 'Step 1' }, { step: 2, label: 'Step 2' }, { step: 3, label: 'Step 3', subSteps: [ { step: 1, label: 'Sub Step 1' }, { step: 2, label: 'Sub Step 2' }, { step: 3, label: 'Sub Step 3', optional: true } ] }, { step: 4, label: 'Step 4', optional: true } ]; return ( <SequenceMap items={items} active={3} current={2} optionalText="optional" /> ); }

function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2' },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true }
  ];
  return (
    <SequenceMap items={items} active={3} current={2} optionalText="optional" />
  );
}

Result

Loading...

Edit Optional Text

Using optionalText to edit optional text or translate to another language.

Live Editor

function MySequenceMap() { const items = [ { step: 1, label: 'Step 1' }, { step: 2, label: 'Step 2', optional: true }, { step: 3, label: 'Step 3', subSteps: [ { step: 1, label: 'Sub Step 1' }, { step: 2, label: 'Sub Step 2' }, { step: 3, label: 'Sub Step 3', optional: true } ] }, { step: 4, label: 'Step 4', optional: true } ]; return <SequenceMap items={items} active={3} optionalText="not compulsory" />; }

function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2', optional: true },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true }
  ];
  return <SequenceMap items={items} active={3} optionalText="not compulsory" />;
}

Result

Loading...

Expand Sub-steps

As default, the sub-steps are expanded if the step is active.

Live Editor

function MySequenceMap() { const items = [ { step: 1, label: 'Step 1' }, { step: 2, label: 'Step 2' }, { step: 3, label: 'Step 3', subSteps: [ { step: 1, label: 'Sub Step 1' }, { step: 2, label: 'Sub Step 2' }, { step: 3, label: 'Sub Step 3', optional: true } ] }, { step: 4, label: 'Step 4', optional: true, subSteps: [ { step: 1, label: 'Sub Step 1' }, { step: 2, label: 'Sub Step 2', optional: true } ] } ]; return <SequenceMap items={items} active={3} optionalText="optional" />; }

function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2' },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    {
      step: 4,
      label: 'Step 4',
      optional: true,
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2', optional: true }
      ]
    }
  ];
  return <SequenceMap items={items} active={3} optionalText="optional" />;
}

Result

Loading...

Using expand to make the sub-steps are always expanded.

Live Editor

function MySequenceMap() { const items = [ { step: 1, label: 'Step 1' }, { step: 2, label: 'Step 2', optional: true }, { step: 3, label: 'Step 3', subSteps: [ { step: 1, label: 'Sub Step 1' }, { step: 2, label: 'Sub Step 2' }, { step: 3, label: 'Sub Step 3', optional: true } ] }, { step: 4, label: 'Step 4', optional: true, subSteps: [ { step: 1, label: 'Sub Step 1' }, { step: 2, label: 'Sub Step 2', optional: true } ] } ]; return ( <SequenceMap items={items} active={3} optionalText="optional" expand /> ); }

function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2', optional: true },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    {
      step: 4,
      label: 'Step 4',
      optional: true,
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2', optional: true }
      ]
    }
  ];
  return (
    <SequenceMap items={items} active={3} optionalText="optional" expand />
  );
}

Result

Loading...

Hide Step Number

Using hideStepNumber to hide the label of step number.

Live Editor

function MySequenceMap() { const items = [ { step: 1, label: 'Step 1' }, { step: 2, label: 'Step 2', optional: true }, { step: 3, label: 'Step 3', subSteps: [ { step: 1, label: 'Sub Step 1' }, { step: 2, label: 'Sub Step 2' }, { step: 3, label: 'Sub Step 3', optional: true } ] }, { step: 4, label: 'Step 4', optional: true } ]; return ( <SequenceMap items={items} active={3} optionalText="optional" hideStepNumber onSelect={(step) => console.log(step)} /> ); }

function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2', optional: true },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true }
  ];
  return (
    <SequenceMap
      items={items}
      active={3}
      optionalText="optional"
      hideStepNumber
      onSelect={(step) => console.log(step)}
    />
  );
}

Result

Loading...

Step Selection

Using onSelect as a callback function and it returns the selected step.

Live Editor

function MySequenceMap() { const items = [ { step: 1, label: 'Step 1' }, { step: 2, label: 'Step 2', optional: true }, { step: 3, label: 'Step 3', subSteps: [ { step: 1, label: 'Sub Step 1' }, { step: 2, label: 'Sub Step 2' }, { step: 3, label: 'Sub Step 3', optional: true } ] }, { step: 4, label: 'Step 4', optional: true }, { step: 5, label: 'Step 5', optional: true } ]; return ( <SequenceMap items={items} active={4} optionalText="optional" expand onSelect={(step) => alert(`selected step is ${JSON.stringify(step)}`)} /> ); }

function MySequenceMap() {
  const items = [
    { step: 1, label: 'Step 1' },
    { step: 2, label: 'Step 2', optional: true },
    {
      step: 3,
      label: 'Step 3',
      subSteps: [
        { step: 1, label: 'Sub Step 1' },
        { step: 2, label: 'Sub Step 2' },
        { step: 3, label: 'Sub Step 3', optional: true }
      ]
    },
    { step: 4, label: 'Step 4', optional: true },
    { step: 5, label: 'Step 5', optional: true }
  ];

  return (
    <SequenceMap
      items={items}
      active={4}
      optionalText="optional"
      expand
      onSelect={(step) => alert(`selected step is ${JSON.stringify(step)}`)}
    />
  );
}

Result

Loading...

Props

Name	Type	Default
items * The array of steps	Item[]	—
active Sequence Map is able to navigate from the first step to active step, the default is the first step.	number	1
current The number of selected step, the default is the active step.	number	0
expand The sub-steps are always expanded. If false, the sub steps are expanded when the step is reached.	boolean	false
optionalText The text of optional label	string	—
hideStepNumber The label of step numbers are hidden.	boolean	false
onSelect Click action with the selected step data. The steps which are larger than active step are not allowed to click	((step: Item) => void)	—
dataTestId A test id to be used by testing libraries. It will be added as a "data-testid" attribute on every step	string	"sequence-step"
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.