Code

Props

Props
Data Type
Required

children

(WizardStep)

className

string

commland

boolean

show

boolean

title

string

type

string (Initial, Edit)

confirmationLoading

boolean

confirmationValidation

boolean

confirmationStepTitle

string

confirmationContentTitle

string

confirmationContentDescription

string

confirmationButton

string

confirmationError

boolean

confirmationErrorTitle

boolean

confirmationErrorMessage

boolean

confirmationDismissAction

Function

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 in Comm.land?

This component should overlay all the content inside the application. To keep a better order and avoiding problems with UI Shell, it is recommended inserting this component outside and next to the AppPage component. If it is inserted inside the AppPageContent component, the modal is not going to render correctly.

For a general usage, outside Comm.land and the UI Shell, the Alert component is recommended to be inserted either at the beginning or at the end of the react component where it is going to be used.

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,
  MiniWizard,
  WizardStep,
  Checkbox
} from '@2600hz/sds-react-components';

const Example = ()=>{
  const [showMiniWizard, setShowMiniWizard] = useState(false);

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

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

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

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

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

  return (
    <>
      <MiniWizard
        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>
      </MiniWizard>
      
      <Button set={()=>{setShowMiniWizard(true}}>Show MiniWizard</Button>
    </>
);
}

export default App;

Components Dependency

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

Live Demo

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

Last updated