feat(react): add Stepper component

wso2 · Feb 21, 2023 · cceacf4 · cceacf4
1 parent a84290d
commit cceacf4
Show file tree

Hide file tree

Showing 11 changed files with 352 additions and 3 deletions.
diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts
@@ -69,6 +69,7 @@ export type Stories =
   | 'UserDropdownMenu'
   | 'Navbar'
   | 'SignIn'
+  | 'Stepper'
   | 'TextField'
   | 'Toolbar'
   | 'Tooltip'
@@ -212,6 +213,9 @@ const StoryConfig: StorybookConfig = {
   SignIn: {
     hierarchy: `${StorybookCategories.Patterns}/Sign In`,
   },
+  Stepper: {
+    hierarchy: `${StorybookCategories.Surfaces}/Stepper`,
+  },
   TextField: {
     hierarchy: `${StorybookCategories.Inputs}/Text Field`,
   },

diff --git a/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap b/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`ActionCard should match the snapshot 1`] = `
 <body>
   <div>
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-action-card css-1sjg1d0-MuiPaper-root-MuiCard-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-action-card css-1ui2pkf-MuiPaper-root-MuiCard-root"
     >
       <div
         class="MuiCardContent-root css-46bh2p-MuiCardContent-root"

diff --git a/packages/react/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap b/packages/react/src/components/Card/__tests__/__snapshots__/Card.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Card should match the snapshot 1`] = `
 <body>
   <div>
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-card css-1sjg1d0-MuiPaper-root-MuiCard-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-card css-1ui2pkf-MuiPaper-root-MuiCard-root"
     />
   </div>
 </body>

diff --git a/packages/react/src/components/Stepper/Stepper.stories.mdx b/packages/react/src/components/Stepper/Stepper.stories.mdx
@@ -0,0 +1,128 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import Stepper from './Stepper.tsx';
+import dedent from 'ts-dedent';
+import Typography from '../Typography';
+import StoryConfig from '../../../.storybook/story-config.ts';
+
+export const meta = {
+  component: Stepper,
+  title: StoryConfig.Stepper.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Stepper {...args} />;
+
+# ActionCard
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Stepper can be used to compose wizards and carousels.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      currentStep: 0,
+      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>,
+      ],
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Stepper` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Stepper from '@oxygen-ui/react/Stepper';\n
+function Demo() {
+  return (
+    <Stepper
+      currentStep={0}
+      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/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx
@@ -0,0 +1,103 @@
+/**
+ * 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 clsx from 'clsx';
+import {FC, MutableRefObject, ReactElement, useCallback, useEffect, useRef, useState} from 'react';
+import {WithWrapperProps} from '../../models';
+import {baseTheme} from '../../theme/default-theme';
+import {composeComponentDisplayName} from '../../utils';
+import Box from '../Box';
+import './stepper.scss';
+
+export interface StepperProps {
+  animateOnSlide?: boolean;
+  className?: string;
+  currentStep: number;
+  steps: ReactElement[];
+}
+
+const COMPONENT_NAME: string = 'Stepper';
+
+const Stepper: FC<StepperProps> & WithWrapperProps = (props: StepperProps): ReactElement => {
+  const {animateOnSlide, className, currentStep, steps} = props;
+
+  const [slideLeftPosition, setSlideLeftPosition] = useState<number>(0);
+  const [slideContainerWidth, setSlideContainerWidth] = useState<number>(0);
+
+  const slideContainerRef: MutableRefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
+
+  const classes: string = clsx('oxygen-stepper', className);
+
+  const slideContainer: (position: number) => void = useCallback(
+    (position: number): void => {
+      if (!animateOnSlide) {
+        return;
+      }
+
+      const slideBy: number = position;
+      setSlideLeftPosition(slideBy * -1 * currentStep);
+    },
+    [currentStep, baseTheme, animateOnSlide],
+  );
+
+  useEffect(() => {
+    if (!slideContainerRef?.current || !animateOnSlide) {
+      return () => {};
+    }
+
+    setSlideContainerWidth(slideContainerRef.current.offsetWidth);
+
+    const handleResize = (): void => {
+      const width: number = slideContainerRef.current.offsetWidth;
+      setSlideContainerWidth(width);
+      slideContainer(width);
+    };
+
+    window.addEventListener('resize', handleResize);
+
+    return (): void => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [slideContainerRef.current, slideContainer]);
+
+  useEffect(() => {
+    slideContainer(slideContainerWidth);
+  }, [slideContainerWidth, slideContainer]);
+
+  if (animateOnSlide) {
+    return (
+      <Box className={classes} ref={slideContainerRef}>
+        <Box className="oxygen-stepper-container" sx={{left: `${slideLeftPosition}px`}}>
+          {steps.map((step: ReactElement) => (
+            <Box sx={{width: slideContainerWidth}}>{step}</Box>
+          ))}
+        </Box>
+      </Box>
+    );
+  }
+
+  return steps[currentStep];
+};
+
+Stepper.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Stepper.muiName = COMPONENT_NAME;
+Stepper.defaultProps = {
+  currentStep: 0,
+};
+
+export default Stepper;
diff --git a/packages/react/src/components/Stepper/__tests__/Stepper.test.tsx b/packages/react/src/components/Stepper/__tests__/Stepper.test.tsx
@@ -0,0 +1,41 @@
+/**
+ * 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 {render} from '@unit-testing';
+import {ReactElement} from 'react';
+import Typography from '../../Typography';
+import Stepper from '../Stepper';
+
+const steps: ReactElement[] = [
+  <Typography>Step 1</Typography>,
+  <Typography>Step 2</Typography>,
+  <Typography>Step 3</Typography>,
+  <Typography>Step 4</Typography>,
+];
+
+describe('Stepper', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<Stepper steps={steps} currentStep={0} />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Stepper steps={steps} currentStep={0} />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});
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
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stepper should match the snapshot 1`] = `
+<body>
+  <div>
+    <p
+      class="MuiTypography-root MuiTypography-body1 oxygen-typography css-1myvrax-MuiTypography-root"
+    >
+      Step 1
+    </p>
+  </div>
+</body>
+`;
diff --git a/packages/react/src/components/Stepper/index.ts b/packages/react/src/components/Stepper/index.ts
@@ -0,0 +1,20 @@
+/**
+ * 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.
+ */
+
+export {default as Stepper} from './Stepper';
+export type {StepperProps} from './Stepper';
diff --git a/packages/react/src/components/Stepper/stepper.scss b/packages/react/src/components/Stepper/stepper.scss
@@ -0,0 +1,30 @@
+/**
+ * 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.
+ */
+
+.oxygen-stepper {
+  overflow: hidden;
+
+  .oxygen-stepper-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    width: max-content;
+    position: relative;
+    transition: left 0.5s ease-in-out;
+  }
+}
diff --git a/packages/react/src/models/theme.ts b/packages/react/src/models/theme.ts
@@ -78,6 +78,9 @@ interface CustomTheme {
         width?: string;
       };
     };
+    Stepper?: {
+      properties?: Record<string, string>;
+    };
   };
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ exports[`ActionCard should match the snapshot 1`] = ` @@
     <body>
       <div>
         <div
-          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-action-card css-1sjg1d0-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-action-card css-1ui2pkf-MuiPaper-root-MuiCard-root"
         >
           <div
             class="MuiCardContent-root css-46bh2p-MuiCardContent-root"
@@ Expand Down @@