Merge pull request #301 from JayaShakthi97/feat-stepper

feat(react): add `StepLabel`, `StepContent`, `Step` and `Stepper` components

packages/react/.storybook/story-config.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2022-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -108,11 +108,15 @@ export type Stories =
   | 'Skeleton'
   | 'Snackbar'
   | 'Stack'
+  | 'Step'
+  | 'StepContent'
+  | 'StepLabel'
   | 'Stepper'
   | 'Switch'
   | 'Tab'
   | 'TabPanel'
   | 'Tabs'
+  | 'TransitionStepper'
   | 'TextField'
   | 'Toolbar'
   | 'Tooltip'
@@ -370,8 +374,17 @@ const StoryConfig: StorybookConfig = {
   Stack: {
     hierarchy: `${StorybookCategories.Layout}/Stack`,
   },
+  Step: {
+    hierarchy: `${StorybookCategories.Navigation}/Step`,
+  },
+  StepContent: {
+    hierarchy: `${StorybookCategories.Navigation}/Step Content`,
+  },
+  StepLabel: {
+    hierarchy: `${StorybookCategories.Navigation}/Step Label`,
+  },
   Stepper: {
-    hierarchy: `${StorybookCategories.Surfaces}/Stepper`,
+    hierarchy: `${StorybookCategories.Navigation}/Stepper`,
   },
   Switch: {
     hierarchy:  `${StorybookCategories.Inputs}/Switch`,
@@ -385,6 +398,9 @@ const StoryConfig: StorybookConfig = {
   Tabs: {
     hierarchy: `${StorybookCategories.Navigation}/Tabs`,
   },
+  TransitionStepper: {
+    hierarchy: `${StorybookCategories.Navigation}/Transition Stepper`,
+  },
   TextField: {
     hierarchy: `${StorybookCategories.Inputs}/Text Field`,
   },

packages/react/src/components/Carousel/Carousel.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ * Copyright (c) 2023-2024, WSO2 LLC. (https://www.wso2.com).
  *
  * WSO2 LLC. licenses this file to you under the Apache License,
  * Version 2.0 (the "License"); you may not use this file except
@@ -31,7 +31,7 @@ import IconButton, {IconButtonVariants} from '../IconButton';
 import ListItem from '../ListItem';
 import ListItemIcon from '../ListItemIcon';
 import ListItemText from '../ListItemText';
-import Stepper from '../Stepper';
+import TransitionStepper from '../TransitionStepper';
 import './carousel.scss';
 
 export type CarouselStep = {
@@ -223,7 +223,7 @@ const Carousel: OverridableComponent<BoxTypeMap<CarouselProps>> = forwardRef(
           </Box>
         </Box>
         <Box>
-          <Stepper animateOnSlide steps={generateCarouselSteps()} currentStep={currentStep} />
+          <TransitionStepper animateOnSlide steps={generateCarouselSteps()} currentStep={currentStep} />
         </Box>
       </Box>
     );

packages/react/src/components/Step/Step.stories.mdx

@@ -0,0 +1,89 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import Step from './Step.tsx';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Button from '../Button/Button.tsx';
+import StepContent from '../StepContent/StepContent.tsx';
+import StepLabel from '../StepLabel/StepLabel.tsx';
+import Typography from '../Typography/Typography.tsx';
+
+export const meta = {
+  component: Step,
+  title: StoryConfig.Step.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Step {...args} />;
+
+# Step
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Step component can be used with Stepper component.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      children: (
+        <>
+          <StepLabel optional={<Typography variant="caption">Sample Step Description</Typography>}>
+            Sample Step Label
+          </StepLabel>
+          <StepContent>
+            <Typography>Sample Step Content</Typography>
+            <Button sx={{mr: 1, mt: 1}} variant="contained">
+              Next
+            </Button>
+          </StepContent>
+        </>
+      ),
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Step` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Step from '@oxygen-ui/react/Step';
+import StepLabel from '@oxygen-ui/react/StepLabel';
+import StepContent from '@oxygen-ui/react/StepContent';
+import Button from '@oxygen-ui/react/Button';
+import Typography from '@oxygen-ui/react/Typography';\n
+function Demo() {
+  return (
+    <Step>
+      <StepLabel
+        optional={ <Typography variant="caption">Sample Step Description</Typography> }
+      >
+        Sample Step Label
+      </StepLabel>
+      <StepContent>
+        <Typography>Sample Step Content</Typography>
+        <Button
+          sx={{ mt: 1, mr: 1 }}
+        >
+          Next
+        </Button>
+      </StepContent>
+    </Step>
+  );
+}`}
+/>

packages/react/src/components/Step/Step.tsx

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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 MuiStep from '@mui/material/Step';
+import type {StepTypeMap, StepProps as MuiStepProps} from '@mui/material/Step';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement, ForwardRefExoticComponent} from 'react';
+import './step.scss';
+
+export type StepProps<
+  C extends ElementType = ElementType,
+  D extends ElementType = StepTypeMap['defaultComponent'],
+  P = {},
+> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiStepProps<D, P>, 'component'>;
+
+/**
+ * The Step component is used to create a step in a sequence of steps.
+ *
+ * Demos:
+ *
+ * - [Stepper (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-stepper)
+ * - [Stepper (MUI)](https://mui.com/material-ui/react-stepper/)
+ *
+ * API:
+ *
+ * - [Tab API](https://mui.com/material-ui/api/step/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Step component.
+ * @param ref - The ref to be forwarded to the MuiStep component.
+ * @returns The rendered Step component.
+ */
+const Step: ForwardRefExoticComponent<StepProps> = forwardRef(
+  ({className, ...rest}: StepProps, ref: Ref<HTMLDivElement>): ReactElement => {
+    const classes: string = clsx('oxygen-step-content', className);
+
+    return <MuiStep ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<StepProps>;
+
+export default Step;

packages/react/src/components/Step/__tests__/Step.test.tsx

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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 {render} from '@unit-testing';
+import Button from '../../Button/Button';
+import StepContent from '../../StepContent/StepContent';
+import StepLabel from '../../StepLabel/StepLabel';
+import Typography from '../../Typography';
+import Step from '../Step';
+
+describe('Step', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(
+      <Step>
+        <StepLabel optional={<Typography variant="caption">Sample Step Description</Typography>}>
+          Sample Step Label
+        </StepLabel>
+        <StepContent>
+          <Typography>Sample Step Content</Typography>
+          <Button sx={{mr: 1, mt: 1}}>Next</Button>
+        </StepContent>
+      </Step>,
+    );
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(
+      <Step>
+        <StepLabel optional={<Typography variant="caption">Sample Step Description</Typography>}>
+          Sample Step Label
+        </StepLabel>
+        <StepContent>
+          <Typography>Sample Step Content</Typography>
+          <Button sx={{mr: 1, mt: 1}}>Next</Button>
+        </StepContent>
+      </Step>,
+    );
+    expect(baseElement).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Step should match the snapshot 1`] = `
+<body>
+  <div>
+    <div
+      class="MuiStep-root oxygen-step-content css-8wcvy5-MuiStep-root"
+    >
+      <span
+        class="MuiStepLabel-root oxygen-step-label css-ascpo7-MuiStepLabel-root"
+      >
+        <span
+          class="MuiStepLabel-labelContainer css-1c0m6we-MuiStepLabel-labelContainer"
+        >
+          <span
+            class="MuiStepLabel-label Mui-active css-s5iety-MuiStepLabel-label"
+          >
+            Sample Step Label
+          </span>
+          <span
+            class="MuiTypography-root MuiTypography-caption oxygen-typography css-1f4niku-MuiTypography-root"
+          >
+            Sample Step Description
+          </span>
+        </span>
+      </span>
+      <div
+        class="MuiStepContent-root oxygen-step-content css-kdy6ax-MuiStepContent-root"
+      >
+        <div
+          class="MuiCollapse-root MuiCollapse-vertical MuiStepContent-transition MuiCollapse-entered css-1rw7nzj-MuiCollapse-root-MuiStepContent-transition"
+          style="min-height: 0px;"
+        >
+          <div
+            class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
+          >
+            <div
+              class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
+            >
+              <p
+                class="MuiTypography-root MuiTypography-body1 oxygen-typography css-1qp7oek-MuiTypography-root"
+              >
+                Sample Step Content
+              </p>
+              <button
+                class="MuiButtonBase-root MuiButton-root MuiLoadingButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-disableElevation MuiButton-root MuiLoadingButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeMedium MuiButton-textSizeMedium MuiButton-disableElevation oxygen-button css-htuxbw-MuiButtonBase-root-MuiButton-root-MuiLoadingButton-root"
+                id=":r1:"
+                tabindex="0"
+                type="button"
+              >
+                Next
+                <span
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;

packages/react/src/components/Step/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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.
+ */
+
+export {default} from './Step';
+export * from './Step';

packages/react/src/components/Step/step.scss

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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.
+ */
+
+.oxygen-step {
+  /* Add Styles */
+}