@onewelcome/react-lib-components 0.1.0-alpha

package/src/Wizard/Wizard.test.tsx

@@ -0,0 +1,198 @@
+import React, { useState } from 'react';
+import { Wizard, Props } from './Wizard';
+import {
+  getAllByRole,
+  getByText,
+  render,
+  getByTestId,
+  queryByRole,
+  findByText,
+} from '@testing-library/react';
+import { WizardActions } from './WizardActions/WizardActions';
+import { WizardSteps } from './WizardSteps/WizardSteps';
+import userEvent from '@testing-library/user-event';
+
+type initWizardPropsType = Omit<Omit<Props, 'onStepChange'>, 'children'>;
+
+const initWizardParams: initWizardPropsType = {
+  steps: [
+    {
+      label: 'Step 1',
+    },
+    {
+      label: 'Step 2',
+    },
+    {
+      label: 'Step 3',
+      disabled: true,
+    },
+    {
+      label: 'Step 4',
+    },
+  ],
+  initialStepNo: 0,
+  stepScreenReaderLabel: 'Step',
+  mode: 'add',
+};
+
+const initWizardStepsProps = {
+  onStepClick: jest.fn(),
+};
+
+const initWizardActionsProps = {
+  onNext: jest.fn(),
+  onCancel: jest.fn(),
+  onSaveAndClose: jest.fn(),
+  cancelButtonLabel: 'Cancel',
+  previousButtonLabel: 'Previous',
+  nextButtonLabel: 'Next',
+  saveAndCloseButtonLabel: 'Save & close',
+};
+
+const renderWizard = (wizardProps?: initWizardPropsType) => {
+  const customWizardProps = wizardProps ? wizardProps : initWizardParams;
+
+  const Content = () => {
+    const [step, setStep] = useState(customWizardProps.initialStepNo || 0);
+
+    return (
+      <Wizard {...customWizardProps} onStepChange={(stepNo: number) => setStep(stepNo)}>
+        <WizardSteps data-testid="wizard-steps" {...initWizardStepsProps} />
+        <div data-testid="wizard-content">Step {step + 1}</div>
+        <div data-testid="wizard-actions">
+          <WizardActions {...initWizardActionsProps} />
+        </div>
+      </Wizard>
+    );
+  };
+
+  return render(<Content />);
+};
+
+const getWizardContent = (container: HTMLElement) => getByTestId(container, 'wizard-content');
+
+const getStepButtons = (container: HTMLElement) =>
+  getAllByRole(getByTestId(container, 'wizard-steps'), 'button');
+
+const getActionsButtons = (container: HTMLElement) => {
+  const actionsContainer = getByTestId(container, 'wizard-actions');
+  const cancel = queryByRole(actionsContainer, 'button', {
+    name: initWizardActionsProps.cancelButtonLabel,
+  });
+  const next = queryByRole(actionsContainer, 'button', {
+    name: initWizardActionsProps.nextButtonLabel,
+  });
+  const prev = queryByRole(actionsContainer, 'button', {
+    name: initWizardActionsProps.previousButtonLabel,
+  });
+  const save = queryByRole(actionsContainer, 'button', {
+    name: initWizardActionsProps.saveAndCloseButtonLabel,
+  });
+  return { cancel, next, prev, save };
+};
+
+describe('Wizard', () => {
+  it('renders without crashing', () => {
+    const { container } = renderWizard();
+    const { cancel, prev, next, save } = getActionsButtons(container);
+    const stepButtons = getStepButtons(container);
+    const wizardContent = getWizardContent(container);
+
+    expect(stepButtons).toHaveLength(4);
+    expect(getByText(stepButtons[0], '1')).toBeDefined();
+    expect(getByText(stepButtons[1], '2')).toBeDefined();
+    expect(getByText(stepButtons[2], '3')).toBeDefined();
+    expect(getByText(stepButtons[3], '4')).toBeDefined();
+    expect(wizardContent).toHaveTextContent('Step 1');
+    expect(cancel).toBeDefined();
+    expect(next).toBeDefined();
+    expect(prev).toBeNull();
+    expect(save).toBeNull();
+  });
+
+  it('should be able to click over whole wizard via action buttons', async () => {
+    const { container } = renderWizard();
+    const { next } = getActionsButtons(container);
+    const wizardContent = getWizardContent(container);
+    (
+      initWizardActionsProps.onNext as jest.MockedFunction<typeof initWizardActionsProps.onNext>
+    ).mockReturnValue(true);
+
+    await findByText(wizardContent, 'Step 1');
+    next && userEvent.click(next);
+    await findByText(wizardContent, 'Step 2');
+    next && userEvent.click(next);
+    await findByText(wizardContent, 'Step 4');
+    const { save, prev, cancel } = getActionsButtons(container);
+    save && userEvent.click(save);
+    expect(initWizardActionsProps.onSaveAndClose).toBeCalledWith(3);
+    prev && userEvent.click(prev);
+    await findByText(wizardContent, 'Step 2');
+    prev && userEvent.click(prev);
+    await findByText(wizardContent, 'Step 1');
+    cancel && userEvent.click(cancel);
+    expect(initWizardActionsProps.onCancel).toBeCalledTimes(1);
+  });
+
+  it('should not be able to click over whole wizard via steps buttons in add mode', async () => {
+    const { container } = renderWizard();
+    const { next } = getActionsButtons(container);
+    const stepsButtons = getStepButtons(container);
+    const wizardContent = getWizardContent(container);
+    (
+      initWizardActionsProps.onNext as jest.MockedFunction<typeof initWizardActionsProps.onNext>
+    ).mockReturnValue(true);
+    (
+      initWizardStepsProps.onStepClick as jest.MockedFunction<
+        typeof initWizardStepsProps.onStepClick
+      >
+    ).mockReturnValue(true);
+
+    userEvent.click(stepsButtons[1]);
+    userEvent.click(stepsButtons[2]);
+    userEvent.click(stepsButtons[3]);
+    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(0);
+    await findByText(wizardContent, 'Step 1');
+
+    next && userEvent.click(next);
+    next && userEvent.click(next);
+    await findByText(wizardContent, 'Step 4');
+    userEvent.click(stepsButtons[2]);
+    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(0);
+    userEvent.click(stepsButtons[1]);
+    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(1);
+    await findByText(wizardContent, 'Step 2');
+    userEvent.click(stepsButtons[0]);
+    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(2);
+    await findByText(wizardContent, 'Step 1');
+  });
+
+  it('should be able to click over whole wizard via steps buttons in edit mode', async () => {
+    const { container } = renderWizard({ ...initWizardParams, mode: 'edit' });
+    const stepsButtons = getStepButtons(container);
+    const wizardContent = getWizardContent(container);
+    (
+      initWizardStepsProps.onStepClick as jest.MockedFunction<
+        typeof initWizardStepsProps.onStepClick
+      >
+    ).mockReturnValue(true);
+
+    userEvent.click(stepsButtons[1]);
+    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(1);
+    await findByText(wizardContent, 'Step 2');
+    userEvent.click(stepsButtons[2]);
+    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(1);
+    userEvent.click(stepsButtons[3]);
+    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(2);
+    await findByText(wizardContent, 'Step 4');
+
+    userEvent.click(stepsButtons[2]);
+    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(2);
+    userEvent.click(stepsButtons[1]);
+    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(3);
+    await findByText(wizardContent, 'Step 2');
+    userEvent.click(stepsButtons[0]);
+    expect(initWizardStepsProps.onStepClick).toBeCalledTimes(4);
+    await findByText(wizardContent, 'Step 1');
+  });
+});

package/src/Wizard/Wizard.tsx

@@ -0,0 +1,49 @@
+import React, { useContext, useEffect } from 'react';
+import { Step } from './BaseWizardSteps/BaseWizardSteps';
+import { WizardStateContext, WizardStateProvider } from './WizardStateProvider';
+import { setWizardState } from './wizardStateReducer';
+
+export type WizardMode = 'add' | 'edit';
+
+export interface Props {
+  steps: Step[];
+  mode: WizardMode;
+  initialStepNo?: number;
+  onStepChange: (stepNo: number) => void;
+  stepScreenReaderLabel: string;
+  children: React.ReactNode;
+}
+
+const useSetWizardState = (steps: Step[], mode: WizardMode, stepScreenReaderLabel: string) => {
+  const { dispatch } = useContext(WizardStateContext);
+
+  useEffect(() => {
+    dispatch(setWizardState(steps, mode, stepScreenReaderLabel));
+  }, [steps, mode, stepScreenReaderLabel]);
+};
+
+const useStepChanging = (onStepChange: (stepNo: number) => void) => {
+  const {
+    state: { currentStepNo },
+  } = useContext(WizardStateContext);
+
+  useEffect(() => {
+    onStepChange(currentStepNo);
+  }, [currentStepNo]);
+};
+
+const WizardContent = ({ steps, mode, stepScreenReaderLabel, onStepChange, children }: Props) => {
+  useSetWizardState(steps, mode, stepScreenReaderLabel);
+  useStepChanging(onStepChange);
+
+  return <>{children}</>;
+};
+
+export const Wizard = (props: Props) => {
+  const { steps, initialStepNo: currentStepNo = 0, mode, stepScreenReaderLabel } = props;
+  return (
+    <WizardStateProvider initialState={{ steps, currentStepNo, mode, stepScreenReaderLabel }}>
+      <WizardContent {...props} />
+    </WizardStateProvider>
+  );
+};

package/src/Wizard/WizardActions/WizardActions.test.tsx

@@ -0,0 +1,168 @@
+import React, { useReducer } from 'react';
+import { WizardActions, Props } from './WizardActions';
+import { queryByRole, render } from '@testing-library/react';
+import { WizardStateContext, Props as ProviderProps } from '../WizardStateProvider';
+import { WizardStateType, reducer, changeCurrentStepNo } from '../wizardStateReducer';
+import userEvent from '@testing-library/user-event';
+
+const initWizardState: WizardStateType = {
+  steps: [
+    {
+      label: 'Step 1',
+    },
+    {
+      label: 'Step 2',
+    },
+    {
+      label: 'Step 3',
+      disabled: true,
+    },
+    {
+      label: 'Step 4',
+    },
+  ],
+  currentStepNo: 0,
+  stepScreenReaderLabel: 'Step',
+  mode: 'add',
+};
+
+const initParams: Props = {
+  cancelButtonLabel: 'Cancel',
+  previousButtonLabel: 'Previous',
+  nextButtonLabel: 'Next',
+  saveAndCloseButtonLabel: 'Save & Close',
+  onCancel: jest.fn(),
+  onNext: jest.fn(),
+  onPrevious: jest.fn(),
+  onSaveAndClose: jest.fn(),
+};
+
+const renderWizardActions = (initReducerState?: WizardStateType, props?: Props) => {
+  const wizardState = initReducerState ? initReducerState : initWizardState;
+  const actionsProps = props ? props : initParams;
+  const dispatch = jest.fn();
+
+  const Provider = ({ children }: ProviderProps) => {
+    const [state] = useReducer(reducer, wizardState);
+    return (
+      <WizardStateContext.Provider value={{ state, dispatch }}>
+        {children}
+      </WizardStateContext.Provider>
+    );
+  };
+
+  const renderObj = render(
+    <Provider initialState={initWizardState}>
+      <WizardActions {...actionsProps} />
+    </Provider>
+  );
+
+  return {
+    ...renderObj,
+    dispatch,
+  };
+};
+
+const getActionsButtons = (container: HTMLElement) => {
+  const cancel = queryByRole(container, 'button', { name: initParams.cancelButtonLabel });
+  const next = queryByRole(container, 'button', { name: initParams.nextButtonLabel });
+  const prev = queryByRole(container, 'button', { name: initParams.previousButtonLabel });
+  const save = queryByRole(container, 'button', { name: initParams.saveAndCloseButtonLabel });
+  return { cancel, next, prev, save };
+};
+
+describe('WizardActions', () => {
+  it('renders without crashing', () => {
+    const { container, dispatch } = renderWizardActions();
+    const { cancel, prev, next, save } = getActionsButtons(container);
+    (initParams.onNext as jest.MockedFunction<typeof initParams.onNext>).mockReturnValueOnce(true);
+
+    expect(cancel).toBeDefined();
+    cancel && userEvent.click(cancel);
+    expect(next).toBeDefined();
+    next && userEvent.click(next);
+    expect(prev).toBeNull();
+    expect(save).toBeNull();
+
+    expect(initParams.onCancel).toBeCalledTimes(1);
+    expect(initParams.onNext).toHaveBeenCalledWith(0);
+    expect(dispatch).toBeCalledWith(changeCurrentStepNo(1));
+  });
+
+  it('should allow going prev and forward when there are prev step and next step (next step is disabled but next one can be used)', () => {
+    const { container, dispatch } = renderWizardActions({ ...initWizardState, currentStepNo: 1 });
+    const { cancel, prev, next, save } = getActionsButtons(container);
+    (initParams.onNext as jest.MockedFunction<typeof initParams.onNext>).mockReturnValueOnce(true);
+
+    expect(prev).toBeDefined();
+    prev && userEvent.click(prev);
+    expect(initParams.onPrevious).toBeCalled();
+    expect(dispatch).toBeCalledWith(changeCurrentStepNo(0));
+
+    expect(next).toBeDefined();
+    next && userEvent.click(next);
+    expect(initParams.onNext).toHaveBeenCalledWith(1);
+    expect(dispatch).toBeCalledWith(changeCurrentStepNo(3));
+
+    expect(cancel).toBeDefined();
+    expect(save).toBeNull();
+  });
+
+  it('should render save button but not next button when current step is the last step', () => {
+    const { container } = renderWizardActions({ ...initWizardState, currentStepNo: 3 });
+    const { cancel, prev, next, save } = getActionsButtons(container);
+
+    expect(cancel).toBeDefined();
+    expect(prev).toBeDefined();
+    expect(next).toBeNull();
+    expect(save).toBeDefined();
+
+    save && userEvent.click(save);
+    expect(initParams.onSaveAndClose).toHaveBeenCalledWith(3);
+  });
+
+  it('should show save and close when next steps are disabled', () => {
+    const steps = [
+      initWizardState.steps[0],
+      { ...initWizardState.steps[1], disabled: true },
+      { ...initWizardState.steps[2], disabled: true },
+    ];
+    const { container } = renderWizardActions({
+      ...initWizardState,
+      steps: steps,
+      currentStepNo: 0,
+    });
+    const { cancel, prev, next, save } = getActionsButtons(container);
+
+    expect(cancel).toBeDefined();
+    expect(prev).toBeNull();
+    expect(next).toBeNull();
+    expect(save).toBeDefined();
+
+    save && userEvent.click(save);
+    expect(initParams.onSaveAndClose).toHaveBeenCalledWith(0);
+  });
+
+  it('should show save button on middle step when mode is `edit`', () => {
+    const { container } = renderWizardActions({ ...initWizardState, mode: 'edit' });
+    const { cancel, prev, next, save } = getActionsButtons(container);
+
+    expect(cancel).toBeDefined();
+    expect(prev).toBeNull();
+    expect(next).toBeDefined();
+    expect(save).toBeDefined();
+
+    save && userEvent.click(save);
+    expect(initParams.onSaveAndClose).toHaveBeenCalledWith(0);
+  });
+
+  it('should not allow going forward when dev returns false on onNext callback', () => {
+    const { container, dispatch } = renderWizardActions();
+    const { next } = getActionsButtons(container);
+    (initParams.onNext as jest.MockedFunction<typeof initParams.onNext>).mockReturnValueOnce(false);
+
+    next && userEvent.click(next);
+    expect(initParams.onNext).toHaveBeenCalledWith(0);
+    expect(dispatch).not.toBeCalled();
+  });
+});

package/src/Wizard/WizardActions/WizardActions.tsx

@@ -0,0 +1,100 @@
+import React, { useContext, useMemo } from 'react';
+import { Button } from '../../Button/Button';
+import { Step } from '../BaseWizardSteps/BaseWizardSteps';
+import { WizardMode } from '../Wizard';
+import { WizardStateContext } from '../WizardStateProvider';
+import { changeCurrentStepNo } from '../wizardStateReducer';
+
+export interface Props extends React.HTMLProps<HTMLDivElement> {
+  cancelButtonLabel: string;
+  previousButtonLabel: string;
+  nextButtonLabel: string;
+  saveAndCloseButtonLabel: string;
+  onCancel: () => void;
+  onNext: (currentStepNo: number) => boolean;
+  onPrevious?: () => void;
+  onSaveAndClose: (currentStepNo: number) => void;
+}
+
+const calculateNextStepNo = (steps: Step[], currentStepNo: number) => () =>
+  steps.findIndex((step, stepNo) => stepNo > currentStepNo && !step.disabled);
+
+const calculatePrevStepNo = (steps: Step[], currentStepNo: number) => () => {
+  const reversedCurrentStepNo = steps.length - 1 - currentStepNo;
+  const reversedPrevStepNo = [...steps]
+    .reverse()
+    .findIndex((step, stepNo) => stepNo > reversedCurrentStepNo && !step.disabled);
+  if (reversedPrevStepNo > 0) {
+    return steps.length - 1 - reversedPrevStepNo;
+  }
+  return -1;
+};
+
+const useNextStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =>
+  useMemo(calculateNextStepNo(steps, currentStepNo), [mode, currentStepNo, steps]);
+
+const usePreviousStepNo = (mode: WizardMode, currentStepNo: number, steps: Step[]) =>
+  useMemo(calculatePrevStepNo(steps, currentStepNo), [mode, currentStepNo, steps]);
+
+export const WizardActions = ({
+  onCancel,
+  onNext,
+  onPrevious,
+  onSaveAndClose,
+  cancelButtonLabel,
+  previousButtonLabel,
+  nextButtonLabel,
+  saveAndCloseButtonLabel,
+}: Props) => {
+  const {
+    state: { mode, steps, currentStepNo },
+    dispatch,
+  } = useContext(WizardStateContext);
+  const nextStepNo = useNextStepNo(mode, currentStepNo, steps);
+  const hasNextStep = nextStepNo !== -1;
+  const previousStepNo = usePreviousStepNo(mode, currentStepNo, steps);
+  const hasPreviousStep = previousStepNo !== -1;
+  const isLastStepOrEditMode = !hasNextStep || mode === 'edit';
+
+  const changeStepNo = (direction: 'forward' | 'backward') => {
+    if (direction === 'forward') {
+      hasNextStep && dispatch(changeCurrentStepNo(nextStepNo));
+    } else {
+      hasPreviousStep && dispatch(changeCurrentStepNo(previousStepNo));
+    }
+  };
+
+  const onNextWrapper = () => {
+    onNext(currentStepNo) && changeStepNo('forward');
+  };
+
+  const onPreviousWrapper = () => {
+    onPrevious && onPrevious();
+    changeStepNo('backward');
+  };
+
+  const onSaveAndCloseWrapper = () => {
+    onSaveAndClose(currentStepNo);
+  };
+
+  return (
+    <>
+      <Button variant="text" onClick={onCancel}>
+        {cancelButtonLabel}
+      </Button>
+      {hasPreviousStep && (
+        <Button variant="outline" onClick={onPreviousWrapper}>
+          {previousButtonLabel}
+        </Button>
+      )}
+      {hasNextStep && (
+        <Button variant={mode === 'edit' ? 'outline' : 'fill'} onClick={onNextWrapper}>
+          {nextButtonLabel}
+        </Button>
+      )}
+      {isLastStepOrEditMode && (
+        <Button onClick={onSaveAndCloseWrapper}>{saveAndCloseButtonLabel}</Button>
+      )}
+    </>
+  );
+};

package/src/Wizard/WizardStateProvider.tsx

@@ -0,0 +1,26 @@
+import React, { createContext, Dispatch, useReducer } from 'react';
+import { WizardActions, WizardStateType, reducer } from './wizardStateReducer';
+
+const WizardStateContext = createContext<{
+  state: WizardStateType;
+  dispatch: Dispatch<WizardActions>;
+}>({
+  state: {} as WizardStateType,
+  dispatch: () => null,
+});
+
+export interface Props {
+  initialState: WizardStateType;
+  children?: React.ReactNode;
+}
+
+const WizardStateProvider = ({ children, initialState }: Props) => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  return (
+    <WizardStateContext.Provider value={{ state, dispatch }}>
+      {children}
+    </WizardStateContext.Provider>
+  );
+};
+
+export { WizardStateProvider, WizardStateContext };

package/src/Wizard/WizardSteps/WizardSteps.test.tsx

@@ -0,0 +1,110 @@
+import React, { useReducer } from 'react';
+import { WizardSteps, Props } from './WizardSteps';
+import { getAllByRole, getByText, render } from '@testing-library/react';
+import { WizardStateContext, Props as ProviderProps } from '../WizardStateProvider';
+import { WizardStateType, reducer, changeCurrentStepNo } from '../wizardStateReducer';
+import userEvent from '@testing-library/user-event';
+
+const initWizardState: WizardStateType = {
+  steps: [
+    {
+      label: 'Step 1',
+    },
+    {
+      label: 'Step 2',
+    },
+    {
+      label: 'Step 3',
+      disabled: true,
+    },
+    {
+      label: 'Step 4',
+    },
+  ],
+  currentStepNo: 1,
+  stepScreenReaderLabel: 'Step',
+  mode: 'add',
+};
+
+const initParams: Props = {
+  onStepClick: jest.fn(),
+};
+
+const renderWizardSteps = (initReducerState?: WizardStateType) => {
+  const wizardState = initReducerState ? initReducerState : initWizardState;
+  const dispatch = jest.fn();
+
+  const Provider = ({ children }: ProviderProps) => {
+    const [state] = useReducer(reducer, wizardState);
+    return (
+      <WizardStateContext.Provider value={{ state, dispatch }}>
+        {children}
+      </WizardStateContext.Provider>
+    );
+  };
+
+  const renderObj = render(
+    <Provider initialState={initWizardState}>
+      <WizardSteps {...initParams} />
+    </Provider>
+  );
+
+  return {
+    ...renderObj,
+    dispatch,
+  };
+};
+
+const getStepButtons = (container: HTMLElement) => getAllByRole(container, 'button');
+
+describe('WizardSteps', () => {
+  it('renders without crashing', () => {
+    const { container, dispatch } = renderWizardSteps();
+    const buttons = getStepButtons(container);
+    (
+      initParams.onStepClick as jest.MockedFunction<typeof initParams.onStepClick>
+    ).mockReturnValueOnce(true);
+
+    expect(buttons).toHaveLength(4);
+    userEvent.click(buttons[0]);
+    expect(initParams.onStepClick).toHaveBeenCalledWith(initWizardState.currentStepNo, 0);
+    expect(dispatch).toBeCalledWith(changeCurrentStepNo(0));
+    expect(buttons[0].querySelector('.checkmark')).toBeDefined();
+    expect(getByText(buttons[1], '2')).toBeDefined();
+    expect(getByText(buttons[2], '3')).toBeDefined();
+    expect(getByText(buttons[3], '4')).toBeDefined();
+
+    userEvent.click(buttons[1]);
+    userEvent.click(buttons[2]);
+    userEvent.click(buttons[3]);
+    expect(initParams.onStepClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should allow to click on future and prev steps but not on current and disabled steps when mode is set to `edit`', () => {
+    const { container, dispatch } = renderWizardSteps({ ...initWizardState, mode: 'edit' });
+    const buttons = getStepButtons(container);
+    (
+      initParams.onStepClick as jest.MockedFunction<typeof initParams.onStepClick>
+    ).mockReturnValueOnce(true);
+
+    userEvent.click(buttons[3]);
+    expect(initParams.onStepClick).toHaveBeenCalledWith(initWizardState.currentStepNo, 3);
+    expect(dispatch).toBeCalledWith(changeCurrentStepNo(3));
+
+    userEvent.click(buttons[1]);
+    userEvent.click(buttons[2]);
+    expect(initParams.onStepClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should do not change step when `onStepClick` callback returns false', () => {
+    const { container, dispatch } = renderWizardSteps({ ...initWizardState, mode: 'edit' });
+    const buttons = getStepButtons(container);
+    (
+      initParams.onStepClick as jest.MockedFunction<typeof initParams.onStepClick>
+    ).mockReturnValueOnce(false);
+
+    userEvent.click(buttons[3]);
+    expect(initParams.onStepClick).toHaveBeenCalledWith(initWizardState.currentStepNo, 3);
+    expect(dispatch).not.toBeCalled();
+  });
+});

package/src/Wizard/WizardSteps/WizardSteps.tsx

@@ -0,0 +1,30 @@
+import React, { useContext } from 'react';
+import { WizardStateContext } from '../WizardStateProvider';
+import { BaseWizardSteps } from '../BaseWizardSteps/BaseWizardSteps';
+import { changeCurrentStepNo } from '../wizardStateReducer';
+
+export interface Props extends Omit<React.HTMLProps<HTMLDivElement>, 'onClick'> {
+  onStepClick: (currentStepNo: number, selectedStepNo: number) => boolean;
+}
+
+export const WizardSteps = ({ onStepClick, ...restProps }: Props) => {
+  const {
+    state: { currentStepNo, mode, stepScreenReaderLabel, steps },
+    dispatch,
+  } = useContext(WizardStateContext);
+
+  const onClick = (selectedStepNo: number) => {
+    onStepClick(currentStepNo, selectedStepNo) && dispatch(changeCurrentStepNo(selectedStepNo));
+  };
+
+  return (
+    <BaseWizardSteps
+      {...restProps}
+      onClick={onClick}
+      steps={steps}
+      currentStepNo={currentStepNo}
+      stepScreenReaderLabel={stepScreenReaderLabel}
+      futureStepsClickable={mode === 'edit'}
+    />
+  );
+};