@onewelcome/react-lib-components 2.0.0-alpha → 2.0.0-alpha.2

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.test.tsx

@@ -1,90 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React from "react";
-import { BaseWizardSteps, Props } from "./BaseWizardSteps";
-import { getAllByRole, getByText, queryByText, render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-const initParams: Props = {
-  steps: [
-    {
-      label: "Step 1"
-    },
-    {
-      label: "Step 2"
-    },
-    {
-      label: "Step 3",
-      disabled: true
-    },
-    {
-      label: "Step 4"
-    }
-  ],
-  currentStepNo: 1,
-  onClick: jest.fn()
-};
-
-const getStepButtons = (container: HTMLElement) => getAllByRole(container, "button");
-
-describe("BaseWizardSteps", () => {
-  it("renders without crashing", () => {
-    const { container } = render(<BaseWizardSteps {...initParams} />);
-    const buttons = getStepButtons(container);
-    expect(initParams.onClick).toHaveBeenCalledTimes(0);
-
-    expect(buttons).toHaveLength(4);
-    expect(buttons[0]).not.toHaveAttribute("aria-current");
-    expect(buttons[0].querySelector(".checkmark")).toBeDefined();
-    expect(buttons[1]).toHaveAttribute("aria-current", "step");
-    expect(getByText(buttons[1], "2")).toBeDefined();
-    expect(buttons[2]).not.toHaveAttribute("aria-current");
-    expect(getByText(buttons[2], "3")).toBeDefined();
-    expect(buttons[3]).not.toHaveAttribute("aria-current");
-    expect(getByText(buttons[3], "4")).toBeDefined();
-
-    userEvent.click(buttons[0]);
-    expect(initParams.onClick).toHaveBeenCalledTimes(1);
-
-    userEvent.click(buttons[1]);
-    userEvent.click(buttons[2]);
-    userEvent.click(buttons[3]);
-    expect(initParams.onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("should allow to click on future and prev steps but not on current and disabled steps when futureStepsClickable is enabled", () => {
-    const { container } = render(<BaseWizardSteps {...initParams} futureStepsClickable />);
-    const buttons = getStepButtons(container);
-    expect(initParams.onClick).toHaveBeenCalledTimes(0);
-
-    userEvent.click(buttons[3]);
-    expect(initParams.onClick).toHaveBeenCalledTimes(1);
-    userEvent.click(buttons[0]);
-    expect(initParams.onClick).toHaveBeenCalledTimes(2);
-
-    userEvent.click(buttons[1]);
-    userEvent.click(buttons[2]);
-    expect(initParams.onClick).toHaveBeenCalledTimes(2);
-  });
-
-  it("should not render checkmark or number when prev steps is disabled", () => {
-    const { container } = render(<BaseWizardSteps {...initParams} currentStepNo={3} />);
-    const buttons = getStepButtons(container);
-
-    expect(queryByText(buttons[2], "3")).toBeNull();
-  });
-});

package/src/Wizard/BaseWizardSteps/BaseWizardSteps.tsx

@@ -1,93 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { ForwardRefRenderFunction, ComponentPropsWithRef, Fragment } from "react";
-import classes from "./BaseWizardSteps.module.scss";
-import { Icon, Icons } from "../../Icon/Icon";
-
-type StepState = "finished" | "current" | "future";
-
-export interface Step {
-  label: string;
-  disabled?: boolean;
-}
-
-export interface Props extends Omit<ComponentPropsWithRef<"div">, "onClick"> {
-  steps: Step[];
-  currentStepNo: number;
-  onClick?: (stepNo: number) => void;
-  futureStepsClickable?: boolean;
-}
-
-const BaseWizardStepsComponent: ForwardRefRenderFunction<HTMLDivElement, Props> = (
-  { steps, currentStepNo, onClick, futureStepsClickable = false, ...rest }: Props,
-  ref
-) => {
-  const getStepState = (stepNo: number): StepState => {
-    if (currentStepNo === stepNo) {
-      return "current";
-    } else if (stepNo < currentStepNo) {
-      return "finished";
-    }
-    return "future";
-  };
-
-  const getStepContent = (stepState: StepState, index: number, disabled?: boolean) => {
-    const stepNumberString = String(index + 1);
-    if (stepState === "finished") {
-      return disabled ? null : <Icon className={classes["checkmark"]} icon={Icons.Checkmark} />;
-    } else {
-      return <Fragment>{stepNumberString}</Fragment>;
-    }
-  };
-
-  const generatedSteps = steps.map((step, index) => {
-    const stepState = getStepState(index);
-    const disabledStyleClassName = step.disabled ? classes["disabled"] : "";
-    const clickableClassName = futureStepsClickable ? classes["clickable"] : "";
-
-    return (
-      <button
-        key={step.label.toLowerCase().replace(/\s/, "-")}
-        disabled={
-          step.disabled ||
-          (stepState === "future" && !futureStepsClickable) ||
-          stepState === "current"
-        }
-        aria-current={stepState === "current" ? "step" : undefined}
-        onClick={() => onClick && onClick(index)}
-        className={`${classes["wizard-element"]} ${classes[stepState]} ${clickableClassName} ${disabledStyleClassName}`}
-      >
-        <div className={classes["number-wrapper"]}>
-          <span className={classes["number"]}>
-            {getStepContent(stepState, index, step.disabled)}
-          </span>
-        </div>
-        <div className={classes["two-line-text-overflow"]}>
-          <span className={classes["label"]}>{step.label}</span>
-        </div>
-      </button>
-    );
-  });
-
-  return (
-    <div {...rest} ref={ref} className={classes["wizard"]}>
-      {generatedSteps}
-    </div>
-  );
-};
-
-export const BaseWizardSteps = React.forwardRef(BaseWizardStepsComponent);

package/src/Wizard/Wizard.test.tsx

@@ -1,213 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-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,
-  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/WizardActions/WizardActions.test.tsx

@@ -1,183 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-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,
-  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

@@ -1,116 +0,0 @@
-/*
- * Copyright 2022 OneWelcome B.V.
- *
- *    Licensed under the Apache License, Version 2.0 (the "License");
- *    you may not use this file except in compliance with the License.
- *    You may obtain a copy of the License at
- *
- *        http://www.apache.org/licenses/LICENSE-2.0
- *
- *    Unless required by applicable law or agreed to in writing, software
- *    distributed under the License is distributed on an "AS IS" BASIS,
- *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *    See the License for the specific language governing permissions and
- *    limitations under the License.
- */
-
-import React, { Fragment, 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 (
-    <Fragment>
-      <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>
-      )}
-    </Fragment>
-  );
-};