feat(react): add Wizard component

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;

packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`ActionCard should match the snapshot 1`] = `
         class="MuiCardActions-root MuiCardActions-spacing css-1t6e9jv-MuiCardActions-root"
       >
         <button
-          class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium oxygen-button css-p3g1a0-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
+          class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium oxygen-button css-1k7fo9x-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
           id=":r1:"
           tabindex="0"
           type="button"

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;

packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap

@@ -110,7 +110,7 @@ exports[`SignIn should match the snapshot 1`] = `
             </div>
           </div>
           <button
-            class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-fullWidth MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-fullWidth oxygen-button oxygen-sign-in-cta css-12w1i4j-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-fullWidth MuiButton-root MuiLoadingButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-fullWidth oxygen-button oxygen-sign-in-cta css-5iwnqp-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
             id=":r5:"
             tabindex="0"
             type="submit"

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>

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>,
+      ]}
+    />
+  );
+}`}
+/>