wso2 · thivi · Feb 22, 2023 · Feb 22, 2023
diff --git a/packages/primitives/src/icons/chevron-left-16.svg b/packages/primitives/src/icons/chevron-left-16.svg
diff --git a/packages/primitives/src/icons/chevron-right-16.svg b/packages/primitives/src/icons/chevron-right-16.svg
diff --git a/packages/react/.storybook/static/assets/images/carousel-illustration.svg b/packages/react/.storybook/static/assets/images/carousel-illustration.svg
diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts
@@ -44,6 +44,7 @@ export type Stories =
   | 'CardActions'
   | 'CardContent'
   | 'CardHeader'
+  | 'Carousel'
   | 'CircularProgressAvatar'
   | 'Chip'
   | 'ColorModeToggle'
@@ -133,6 +134,9 @@ const StoryConfig: StorybookConfig = {
   CardHeader: {
     hierarchy: `${StorybookCategories.Surfaces}/CardHeader`,
   },
+  Carousel: {
+    hierarchy: `${StorybookCategories.Patterns}/Carousel`,
+  },
   CircularProgressAvatar: {
     hierarchy: `${StorybookCategories.DataDisplay}/Circular Progress Avatar`,
   },

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-1ui2pkf-MuiPaper-root-MuiCard-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-action-card css-mzb5us-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-1ui2pkf-MuiPaper-root-MuiCard-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-card css-mzb5us-MuiPaper-root-MuiCard-root"
     />
   </div>
 </body>

diff --git a/packages/react/src/components/CardContent/CardContent.tsx b/packages/react/src/components/CardContent/CardContent.tsx
@@ -18,7 +18,7 @@
 
 import MuiCardContent, {CardContentProps as MuiCardContentProps} from '@mui/material/CardContent';
 import clsx from 'clsx';
-import {FC, ReactElement} from 'react';
+import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react';
 import {WithWrapperProps} from '../../models';
 import {composeComponentDisplayName} from '../../utils';
 import './card-content.scss';
@@ -27,13 +27,15 @@ export type CardContentProps = MuiCardContentProps;
 
 const COMPONENT_NAME: string = 'CardContent';
 
-const CardContent: FC<CardContentProps> & WithWrapperProps = (props: CardContentProps): ReactElement => {
-  const {className, ...rest} = props;
+const CardContent: ForwardRefExoticComponent<CardContentProps> & WithWrapperProps = forwardRef(
+  (props: CardContentProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
+    const {className, ...rest} = props;
 
-  const classes: string = clsx('oxygen-card-content', className);
+    const classes: string = clsx('oxygen-card-content', className);
 
-  return <MuiCardContent className={classes} {...rest} />;
-};
+    return <MuiCardContent ref={ref} className={classes} {...rest} />;
+  },
+) as ForwardRefExoticComponent<CardContentProps> & WithWrapperProps;
 
 CardContent.displayName = composeComponentDisplayName(COMPONENT_NAME);
 CardContent.muiName = COMPONENT_NAME;

diff --git a/packages/react/src/components/Carousel/Carousel.stories.mdx b/packages/react/src/components/Carousel/Carousel.stories.mdx
@@ -0,0 +1,82 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import Carousel from './Carousel.tsx';
+import dedent from 'ts-dedent';
+import Typography from '../Typography';
+import StoryConfig from '../../../.storybook/story-config.ts';
+
+export const meta = {
+  component: Carousel,
+  title: StoryConfig.Carousel.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Carousel {...args} />;
+
+# ActionCard
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Carousel can be used to slide through content.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+        steps: [
+            {
+              title: "What is your first name?",
+              description: "Start theming journey with Oxygen UI",
+              illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+              buttonText: "Add first name",
+              onButtonClick: ()=>{}
+            },
+            {
+              title: "What is your last name?",
+              description: "Start theming journey with Oxygen UI",
+              illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+              buttonText: "Add last name",
+              onButtonClick: ()=>{}
+            }
+      ],
+      title: "Complete your profile. It’s at 60%"
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Carousel` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Carousel from '@oxygen-ui/react/Carousel';\n
+function Demo() {
+  return (
+    <Carousel
+        steps={[
+            {
+              title: "What is your first name?",
+              description: "Start theming journey with Oxygen UI",
+              illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />,
+              buttonText: "Add first name",
+              onButtonClick: ()=>{}
+            }
+        ]}
+    />
+  );
+}`}
+/>
diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx
@@ -0,0 +1,188 @@
+/**
+ * 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 {ChevronLeftIcon, ChevronRightIcon} from '@oxygen-ui/react-icons';
+import clsx from 'clsx';
+import {FC, HTMLAttributes, ReactElement, useEffect, 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 CardContent from '../CardContent';
+import {Stepper} from '../Stepper';
+import Typography from '../Typography';
+import './carousel.scss';
+
+interface CarouselStep {
+  /**
+   * The text to be displayed in the button.
+   */
+  buttonText: string;
+  /**
+   * The description of the step.
+   */
+  description: string;
+  /**
+   * The illustration to be displayed in the step.
+   */
+  illustration: ReactElement;
+  /**
+   * Callback method to be called when the button is clicked.
+   */
+  onButtonClick: () => void;
+  /**
+   * The title of the step.
+   */
+  title: string;
+}
+
+export interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Specifies whether to auto play the carousel.
+   */
+  autoPlay?: boolean;
+  /**
+   * Specifies the interval between slide transitions.
+   */
+  autoPlayInterval?: number;
+  /**
+   * The text to be displayed in the next button.
+   */
+  nextButtonText?: string;
+  /**
+   * The text to be displayed in the previous button.
+   */
+  previousButtonText?: string;
+  /**
+   * The steps to be displayed in the carousel.
+   */
+  steps: CarouselStep[];
+  /**
+   * The title of the carousel.
+   */
+  title?: string;
+}
+
+const COMPONENT_NAME: string = 'Carousel';
+
+const Carousel: FC<CarouselProps> & WithWrapperProps = (props: CarouselProps): ReactElement => {
+  const {autoPlay, autoPlayInterval, className, nextButtonText, previousButtonText, steps, title, ...rest} = props;
+  const [currentStep, setCurrentStep] = useState<number>(1);
+
+  const isLastStep: boolean = useMemo(() => currentStep === steps.length - 1, [steps, currentStep]);
+  const isFirstStep: boolean = useMemo(() => currentStep === 0, [currentStep]);
+
+  const classes: string = clsx('oxygen-carousel', className);
+
+  useEffect(() => {
+    if (!autoPlay) {
+      return () => {};
+    }
+
+    const interval: NodeJS.Timer = setInterval(() => {
+      if (isLastStep) {
+        setCurrentStep(0);
+      } else {
+        setCurrentStep(currentStep + 1);
+      }
+    }, autoPlayInterval);
+
+    return () => clearInterval(interval);
+  }, [autoPlay, autoPlayInterval, currentStep, isLastStep]);
+
+  const handleNextButtonClick = (): void => {
+    if (isLastStep) {
+      return;
+    }
+    setCurrentStep(currentStep + 1);
+  };
+
+  const handlePreviousButtonClick = (): void => {
+    if (isFirstStep) {
+      return;
+    }
+    setCurrentStep(currentStep - 1);
+  };
+
+  const generateCarouselSteps = (): ReactElement[] =>
+    steps.map((step: CarouselStep) => (
+      <Box key={`${JSON.stringify(step)}`}>
+        <Card variant="outlined" className="oxygen-carousel-step-card">
+          <CardContent className="oxygen-carousel-step-card-content">
+            <Box>{step.illustration}</Box>
+            <Box>
+              <Box>
+                <Typography variant="subtitle2">{step.title}</Typography>
+              </Box>
+              <Box>
+                <Typography variant="body2">{step.description}</Typography>
+              </Box>
+            </Box>
+          </CardContent>
+        </Card>
+        <Box className="oxygen-carousel-step-button-bar">
+          <Button variant="outlined" color="primary" onClick={step.onButtonClick}>
+            {step.buttonText}
+          </Button>
+        </Box>
+      </Box>
+    ));
+
+  return (
+    <Box className={classes} {...rest}>
+      <Box className="oxygen-carousel-top-bar">
+        <Box className="oxygen-carousel-title">{title && <Typography variant="body1">{title}</Typography>}</Box>
+        <Box className="oxygen-carousel-button-group">
+          <Button
+            variant="text"
+            color="secondary"
+            disabled={isFirstStep}
+            onClick={handlePreviousButtonClick}
+            startIcon={<ChevronLeftIcon />}
+          >
+            {previousButtonText}
+          </Button>
+          <Button
+            variant="text"
+            color="secondary"
+            disabled={isLastStep}
+            onClick={handleNextButtonClick}
+            endIcon={<ChevronRightIcon />}
+          >
+            {nextButtonText}
+          </Button>
+        </Box>
+      </Box>
+      <Box>
+        <Stepper animateOnSlide steps={generateCarouselSteps()} currentStep={currentStep} />
+      </Box>
+    </Box>
+  );
+};
+
+Carousel.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Carousel.muiName = COMPONENT_NAME;
+Carousel.defaultProps = {
+  autoPlay: false,
+  autoPlayInterval: 5000,
+  nextButtonText: 'Next',
+  previousButtonText: 'Previous',
+};
+
+export default Carousel;
-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-1ui2pkf-MuiPaper-root-MuiCard-root"
+          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root oxygen-action-card css-mzb5us-MuiPaper-root-MuiCard-root"
         >
           <div
             class="MuiCardContent-root css-46bh2p-MuiCardContent-root"
@@ Expand Down @@