wso2 · thivi · Feb 22, 2023 · Feb 22, 2023
diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts
@@ -75,7 +75,8 @@ export type Stories =
   | 'Tooltip'
   | 'Typography'
   | 'UserDropdownMenu'
-  | 'Welcome';
+  | 'Welcome'
+  | 'Wizard';
 export type StorybookConfig = Record<
   Stories,
   {
@@ -233,6 +234,9 @@ const StoryConfig: StorybookConfig = {
   Welcome: {
     hierarchy: 'Welcome',
   },
+  Wizard: {
+    hierarchy: `${StorybookCategories.Patterns}/Wizard`,
+  }
 };
 
 export default StoryConfig;
diff --git a/packages/react/src/components/Box/Box.tsx b/packages/react/src/components/Box/Box.tsx
@@ -18,7 +18,7 @@
 
 import MuiBox, {BoxProps as MuiBoxProps} from '@mui/material/Box';
 import clsx from 'clsx';
-import {ElementType, FC, ReactElement} from 'react';
+import {ElementType, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
 import {WithWrapperProps} from '../../models';
 import {composeComponentDisplayName} from '../../utils';
 
@@ -28,13 +28,15 @@ export type BoxProps<C extends ElementType = ElementType> = {
 
 const COMPONENT_NAME: string = 'Box';
 
-const Box: FC<BoxProps> & WithWrapperProps = <C extends ElementType>(props: BoxProps<C>): ReactElement => {
-  const {className, ...rest} = props;
+const Box: ForwardRefExoticComponent<BoxProps> & WithWrapperProps = forwardRef(
+  <C extends ElementType>(props: BoxProps<C>, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
+    const {className, ...rest} = props;
 
-  const classes: string = clsx('oxygen-box', className);
+    const classes: string = clsx('oxygen-box', className);
 
-  return <MuiBox className={classes} {...rest} />;
-};
+    return <MuiBox className={classes} ref={ref} {...rest} />;
+  },
+) as ForwardRefExoticComponent<BoxProps> & WithWrapperProps;
 
 Box.displayName = composeComponentDisplayName(COMPONENT_NAME);
 Box.muiName = COMPONENT_NAME;

diff --git a/packages/react/src/components/Stepper/__tests__/__snapshots__/Stepper.test.tsx.snap b/packages/react/src/components/Stepper/__tests__/__snapshots__/Stepper.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Stepper should match the snapshot 1`] = `
 <body>
   <div>
     <p
-      class="MuiTypography-root MuiTypography-body1 oxygen-typography css-1myvrax-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 oxygen-typography css-1qp7oek-MuiTypography-root"
     >
       Step 1
     </p>

diff --git a/packages/react/src/components/Wizard/Wizard.stories.mdx b/packages/react/src/components/Wizard/Wizard.stories.mdx
@@ -0,0 +1,129 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import Wizard from './Wizard.tsx';
+import dedent from 'ts-dedent';
+import Typography from '../Typography';
+import StoryConfig from '../../../.storybook/story-config.ts';
+
+export const meta = {
+  component: Wizard,
+  title: StoryConfig.Wizard.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Wizard {...args} />;
+
+# ActionCard
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Wizard can be used to break down user flows step by step.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      title: 'Recovery Email',
+      subtitle: 'Add your recovery email to help you recover your password',
+      steps: [
+        <Typography>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor porttitor dolor eget tristique. Nam
+          elementum, quam vel varius porttitor, purus est vestibulum augue, sed suscipit ligula metus at nibh. Donec
+          eleifend suscipit nisi mollis sollicitudin. Vestibulum fermentum odio at maximus lacinia. Phasellus leo ipsum,
+          vestibulum hendrerit enim vitae, ullamcorper tincidunt erat. Sed quam nulla, pharetra non mattis non,
+          fringilla non massa. Donec maximus finibus dui et suscipit. Suspendisse potenti. In imperdiet hendrerit
+          accumsan. Vivamus lacus nunc, mollis ut elementum eget, tempus vitae lectus. Ut molestie ante quis quam
+          aliquam pretium. Vestibulum dignissim, odio vel volutpat porta, enim nisl auctor turpis, vel imperdiet nisl
+          lorem id ligula. Proin varius scelerisque ligula ac consequat.
+        </Typography>,
+        <Typography>
+          Aliquam vel ex tortor. Proin sed ullamcorper massa. Sed eu fringilla risus, a faucibus tortor. Duis euismod
+          enim sit amet nunc condimentum, eget tristique ex ultricies. Suspendisse potenti. Phasellus risus ligula,
+          imperdiet in imperdiet ac, hendrerit eu quam. Aliquam leo risus, vulputate nec auctor viverra, dictum a elit.
+          Curabitur a accumsan lorem. Cras nec metus sed diam vehicula luctus nec sit amet dolor. Donec ac nibh finibus,
+          varius arcu sit amet, dapibus neque. Morbi orci augue, commodo vitae tincidunt vel, tincidunt at justo.
+          Quisque sem mauris, consectetur sit amet lobortis vel, consectetur sit amet massa.
+        </Typography>,
+        <Typography>
+          Praesent varius porta tellus, ac mattis quam blandit at. Vestibulum in nisi at est rhoncus posuere ac vitae
+          ligula. Phasellus molestie purus ac nulla vestibulum gravida. Morbi lacinia vehicula aliquam. Praesent mollis
+          mollis arcu eu finibus. Morbi at nunc quam. Aliquam sed urna quis erat elementum bibendum vitae eu massa.
+        </Typography>,
+        <Typography>
+          Sed placerat molestie tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
+          turpis egestas. Vestibulum at libero bibendum, tempor nunc vel, luctus ipsum. Aenean ut diam ligula. Ut
+          auctor, justo a tincidunt fermentum, nibh dui consectetur massa, eu congue sapien eros ut nisl. Nam nec
+          fringilla sem. Pellentesque facilisis fermentum nibh, in volutpat ipsum porttitor ut. Quisque auctor lorem et
+          dolor suscipit, nec rhoncus justo aliquam. Praesent elit sapien, tempor id mi et, fermentum accumsan justo. Ut
+          a justo tortor. Proin in nisl vel arcu congue tristique. Proin mattis condimentum orci, quis accumsan neque
+          auctor vel.
+        </Typography>,
+      ],
+      onFinishButtonClick: () => alert('You have come to the end of the wizard!'),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Wizard` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Wizard from '@oxygen-ui/react/Wizard';\n
+function Demo() {
+  return (
+    <Wizard
+      title='Recovery Email'
+      subtitle='Add your recovery email to help you recover your password'
+      steps={[
+        <Typography>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor porttitor dolor eget tristique. Nam
+          elementum, quam vel varius porttitor, purus est vestibulum augue, sed suscipit ligula metus at nibh. Donec
+          eleifend suscipit nisi mollis sollicitudin. Vestibulum fermentum odio at maximus lacinia. Phasellus leo ipsum,
+          vestibulum hendrerit enim vitae, ullamcorper tincidunt erat. Sed quam nulla, pharetra non mattis non,
+          fringilla non massa. Donec maximus finibus dui et suscipit. Suspendisse potenti. In imperdiet hendrerit
+          accumsan. Vivamus lacus nunc, mollis ut elementum eget, tempus vitae lectus. Ut molestie ante quis quam
+          aliquam pretium. Vestibulum dignissim, odio vel volutpat porta, enim nisl auctor turpis, vel imperdiet nisl
+          lorem id ligula. Proin varius scelerisque ligula ac consequat.
+        </Typography>,
+        <Typography>
+          Aliquam vel ex tortor. Proin sed ullamcorper massa. Sed eu fringilla risus, a faucibus tortor. Duis euismod
+          enim sit amet nunc condimentum, eget tristique ex ultricies. Suspendisse potenti. Phasellus risus ligula,
+          imperdiet in imperdiet ac, hendrerit eu quam. Aliquam leo risus, vulputate nec auctor viverra, dictum a elit.
+          Curabitur a accumsan lorem. Cras nec metus sed diam vehicula luctus nec sit amet dolor. Donec ac nibh finibus,
+          varius arcu sit amet, dapibus neque. Morbi orci augue, commodo vitae tincidunt vel, tincidunt at justo.
+          Quisque sem mauris, consectetur sit amet lobortis vel, consectetur sit amet massa.
+        </Typography>,
+        <Typography>
+          Praesent varius porta tellus, ac mattis quam blandit at. Vestibulum in nisi at est rhoncus posuere ac vitae
+          ligula. Phasellus molestie purus ac nulla vestibulum gravida. Morbi lacinia vehicula aliquam. Praesent mollis
+          mollis arcu eu finibus. Morbi at nunc quam. Aliquam sed urna quis erat elementum bibendum vitae eu massa.
+        </Typography>,
+        <Typography>
+          Sed placerat molestie tristique. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac
+          turpis egestas. Vestibulum at libero bibendum, tempor nunc vel, luctus ipsum. Aenean ut diam ligula. Ut
+          auctor, justo a tincidunt fermentum, nibh dui consectetur massa, eu congue sapien eros ut nisl. Nam nec
+          fringilla sem. Pellentesque facilisis fermentum nibh, in volutpat ipsum porttitor ut. Quisque auctor lorem et
+          dolor suscipit, nec rhoncus justo aliquam. Praesent elit sapien, tempor id mi et, fermentum accumsan justo. Ut
+          a justo tortor. Proin in nisl vel arcu congue tristique. Proin mattis condimentum orci, quis accumsan neque
+          auctor vel.
+        </Typography>,
+      ]}
+    />
+  );
+}`}
+/>
diff --git a/packages/react/src/components/Wizard/Wizard.tsx b/packages/react/src/components/Wizard/Wizard.tsx
@@ -0,0 +1,202 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you 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 LinearProgress from '@mui/material/LinearProgress';
+import clsx from 'clsx';
+import {FC, HTMLAttributes, ReactElement, useCallback, useMemo, useState} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+import Box from '../Box';
+import Button from '../Button';
+import Card from '../Card';
+import CardActions from '../CardActions';
+import CardContent from '../CardContent';
+import CardHeader from '../CardHeader';
+import {Stepper} from '../Stepper';
+import Typography from '../Typography';
+import './wizard.scss';
+
+export interface WizardProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Allow backward navigation. This will show a button allowing you to navigate backwards.
+   */
+  allowBackwardNavigation?: boolean;
+  /**
+   * Allow cancel. This will show a button allowing you to cancel the wizard.
+   */
+  allowCancel?: boolean;
+  /**
+   * Animate the slide transition.
+   */
+  animateOnSlide?: boolean;
+  /**
+   * Cancel button text.
+   */
+  cancelButtonText?: string;
+  /**
+   * Finish button text.
+   */
+  finishButtonText?: string;
+  /**
+   * Next button text.
+   */
+  nextButtonText?: string;
+  /**
+   * Callback to be called when the cancel button is clicked.
+   */
+  onCancelButtonClick: () => Promise<void>;
+  /**
+   * Callback to be called when the finish button is clicked.
+   */
+  onFinishButtonClick: () => Promise<void>;
+  /**
+   * Callback to be called when the next button is clicked.
+   */
+  onNextButtonClick: () => Promise<void>;
+  /**
+   * Callback to be called when the previous button is clicked.
+   */
+  onPreviousButtonClick: () => Promise<void>;
+  /**
+   * Previous button text.
+   */
+  previousButtonText?: string;
+  /**
+   * Steps to be rendered.
+   */
+  steps: ReactElement[];
+  /**
+   * Subtitle of the wizard.
+   */
+  subtitle: string;
+  /**
+   * Title of the wizard.
+   */
+  title: string;
+}
+
+const COMPONENT_NAME: string = 'Wizard';
+
+const Wizard: FC<WizardProps> & WithWrapperProps = (props: WizardProps): ReactElement => {
+  const {
+    allowBackwardNavigation,
+    allowCancel,
+    animateOnSlide,
+    className,
+    title,
+    subtitle,
+    nextButtonText,
+    previousButtonText,
+    cancelButtonText,
+    onCancelButtonClick,
+    onNextButtonClick,
+    onPreviousButtonClick,
+    onFinishButtonClick,
+    finishButtonText,
+    steps,
+  } = props;
+
+  const [currentStep, setCurrentStep] = useState<number>(0);
+
+  const classes: string = clsx('oxygen-wizard', className);
+
+  const isLastStep: boolean = useMemo(() => currentStep === steps.length - 1, [steps, currentStep]);
+  const isFirstStep: boolean = useMemo(() => currentStep === 0, [currentStep]);
+  const displayCurrentStep: number = useMemo(() => currentStep + 1, [currentStep]);
+
+  const handleNextButtonClick: () => Promise<void> = useCallback(async (): Promise<void> => {
+    if (isLastStep) {
+      if (onFinishButtonClick && onFinishButtonClick instanceof Function) {
+        await onFinishButtonClick();
+      }
+
+      return;
+    }
+
+    if (onNextButtonClick && onNextButtonClick instanceof Function) {
+      await onNextButtonClick();
+    }
+
+    setCurrentStep((step: number) => step + 1);
+  }, [isLastStep]);
+
+  const handlePreviousButtonClick: () => Promise<void> = useCallback(async (): Promise<void> => {
+    if (isFirstStep) {
+      return;
+    }
+
+    if (onPreviousButtonClick && onPreviousButtonClick instanceof Function) {
+      await onPreviousButtonClick();
+    }
+    setCurrentStep((step: number) => step - 1);
+  }, [isFirstStep]);
+
+  return (
+    <Box className={classes}>
+      <Card elevation={1} className="oxygen-wizard-card">
+        <CardHeader title={title} subheader={subtitle} />
+        <CardContent className="oxygen-wizard-card-content">
+          <Stepper animateOnSlide={animateOnSlide} currentStep={currentStep} steps={steps} />
+        </CardContent>
+        <CardActions className="oxygen-wizard-actions">
+          <Box>
+            {allowBackwardNavigation && !isFirstStep && (
+              <Button color="secondary" onClick={handlePreviousButtonClick}>
+                {previousButtonText}
+              </Button>
+            )}
+          </Box>
+          <Box className="oxygen-wizard-right-aligned-buttons">
+            {allowCancel && (
+              <Button variant="contained" color="secondary" onClick={onCancelButtonClick}>
+                {cancelButtonText}
+              </Button>
+            )}
+            <Button variant="contained" color="primary" onClick={handleNextButtonClick}>
+              {isLastStep ? finishButtonText : nextButtonText}
+            </Button>
+          </Box>
+        </CardActions>
+      </Card>
+      <Box className="oxygen-wizard-progress-container">
+        <Typography>{`${displayCurrentStep}/${steps.length}`}</Typography>
+        <Box className="oxygen-wizard-progress-bar-container">
+          <LinearProgress
+            className="oxygen-wizard-progress-bar"
+            variant="determinate"
+            value={(displayCurrentStep / steps.length) * 100}
+            aria-label="Wizard Progress Bar"
+          />
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+Wizard.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Wizard.muiName = COMPONENT_NAME;
+Wizard.defaultProps = {
+  allowBackwardNavigation: true,
+  allowCancel: false,
+  cancelButtonText: 'Cancel',
+  finishButtonText: 'Finish',
+  nextButtonText: 'Next',
+  previousButtonText: 'Previous',
+};
+
+export default Wizard;
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ exports[`Stepper should match the snapshot 1`] = ` @@
     <body>
       <div>
         <p
-          class="MuiTypography-root MuiTypography-body1 oxygen-typography css-1myvrax-MuiTypography-root"
+          class="MuiTypography-root MuiTypography-body1 oxygen-typography css-1qp7oek-MuiTypography-root"
         >
           Step 1
         </p>
@@ Expand Down @@