Code

Props

Props	Data Type	Required
children	(WizardStep)	✅
className	string	❌
commland	boolean	❌
title	string	❌
type	string (Initial, Edit)	❌
confirmationValidation	boolean	❌
confirmationStepTitle	string	❌
confirmationContentTitle	string	❌
confirmationContentDescription	string	❌
confirmationButton	string	❌
nextButton	string	❌
previousButton	string	❌
cancelButton	string	❌
onCancel	Function Event	❌
onConfirm	Function Event	❌

commland prop is used to adjust the Alert component to the Commland UI-Shell automatically.

Where to Insert This Component?

This component should overlay all the content inside an application. Knowing that it can be inserted wherever the developer wants, it should not be affected by the rest of content structure.

To keep a better order, we recommend inserting this component either at the beginning or at the end of a component component.

At inserting it inside a Commland app, it should be placed outside/next to the AppPage component. If it is inserted inside the AppPageContent component, the modal is not going to render correctly.

Type

By default, the type prop is set on 'Initial', forcing the Wizard to start on the first step to follow a specific order. In the case

onCancel and onConfirm

These actions are going to be executed only at clicking the cancel and confirmation buttons respectively. A difference between the Mini Wizard and the Modal component, is that by default the Mini Wizard is locked and it cannoty be exited in other ways but clicking the cancel button.

Children

To generate the structure required for the component, the developer is able to insert the following components as children elements:

WizardStep

Props	Data Type	Required
children	WizardStepActions (Opcional) WizardStepContent, WizardStepReview	✅
className	string	❌
stepTitle	string	❌
validation	boolean (This should be connected to a state on the developers side)	❌

WizardStepActions

Props	Data Type	Required
children	Any	✅
type	string (Actions)	✅
className	string	❌

WizardStepContent

Props	Data Type	Required
children	Any	✅
type	string (Content)	✅
className	string	❌

WizardStepReview

Props	Data Type	Required
children	Any	✅
type	string (Review)	✅
className	string	❌

Example

import React, { useState } from 'react';
import {
  Text,
  Button,
  Wizard,
  WizardStep,
  Checkbox
} from '@2600hz/sds-react-components';

const Example = ()=>{
  const [validations, setValidations] = useState({
    stepOne: true,
    stepTwo: true
  });

  const [confirmationValidation, setConfirmationValidation] = useState(true);

  const cancel = () => {
    console.log('cancel');
  };

  const confirm = () => {
    setConfirmationValidation(false);

    setTimeout(() => {
      console.log('Api test');
      setConfirmationValidation(true);
    }, 2000);
  };

  return (
    <Wizard
      title="Example"
      commland
      type="Edit"
      confirmationValidation={confirmationValidation}
      confirmationContentDescription="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque temporibus, hic ullam, ipsum corporis quas praesentium libero culpa eum accusamus, eos facere quasi ducimus voluptatibus aperiam necessitatibus reiciendis error totam."
      onCancel={cancel}
      onConfirm={confirm}
    >
      <WizardStep stepTitle="Step One" validation={validations.stepOne}>
        <WizardStepActions type="Actions" className="Actions">
          <Button icon="download">Download</Button>
          <Button icon="mail">Send Email</Button>
        </WizardStepActions>
        <WizardStepContent type="Content">
          <Text.p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
            aliquam asperiores quis, fugiat dicta suscipit iusto voluptas
            ullam necessitatibus ducimus enim incidunt eos repellendus? Sunt
            nostrum vitae deleniti voluptatibus minima.
          </Text.p>
          <br />
          <Checkbox
            id="stepOne"
            checked={validations.stepOne}
            label="Validation"
            onChange={(e: any) => {
              setValidations((prevState) => ({
                ...prevState,
                stepOne: e.checked
              }));
            }}
          />
        </WizardStepContent>
        <WizardStepReview type="Review">
          <Text.p>Something...</Text.p>
          <Button>Example</Button>
        </WizardStepReview>
      </WizardStep>

      <WizardStep stepTitle="Step Two">
        <WizardStepContent type="Content">
          <Text.p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
            aliquam asperiores quis, fugiat dicta suscipit iusto voluptas
            ullam necessitatibus ducimus enim incidunt eos repellendus? Sunt
            nostrum vitae deleniti voluptatibus minima.
          </Text.p>
        </WizardStepContent>
        <WizardStepReview type="Review">
          <Text.p>Something...</Text.p>
        </WizardStepReview>
      </WizardStep>

      <WizardStep stepTitle="Step Three" validation={validations.stepTwo}>
        <WizardStepContent type="Content">
          <Text.p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
            aliquam asperiores quis, fugiat dicta suscipit iusto voluptas
            ullam necessitatibus ducimus enim incidunt eos repellendus? Sunt
            nostrum vitae deleniti voluptatibus minima.
          </Text.p>
          <br />
          <Checkbox
            id="stepTwo"
            checked={validations.stepTwo}
            label="Validation"
            onChange={(e: any) => {
              setValidations((prevState) => ({
                ...prevState,
                stepTwo: e.checked
              }));
            }}
          />
        </WizardStepContent>
        <WizardStepReview type="Review">
          <Text.p>Something...</Text.p>
        </WizardStepReview>
      </WizardStep>
      <WizardStep stepTitle="Step Four">
        <WizardStepContent type="Content">
          <Text.p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi
            aliquam asperiores quis, fugiat dicta suscipit iusto voluptas
            ullam necessitatibus ducimus enim incidunt eos repellendus? Sunt
            nostrum vitae deleniti voluptatibus minima.
          </Text.p>
        </WizardStepContent>
        <WizardStepReview type="Review">
          <Text.p>Something...</Text.p>
        </WizardStepReview>
      </WizardStep>
    </Wizard>
);
}

export default App;

Components Dependency

For this component elaboration there were used the following internal components:

• Tooltip

• Telicon

• Button

• Text

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.​

React

General Components / Wizard - Wizard ⋅ Storybooksipster-react-component-storybook.netlify.app