From a7df546fa884255701dbed1187430a55f70a1aa8 Mon Sep 17 00:00:00 2001 From: JayaShakthi97 Date: Tue, 5 Nov 2024 14:22:53 +0530 Subject: [PATCH] feat(react): add `StepLabel`, `StepContent`, `Step` and `Stepper` components --- packages/react/.storybook/story-config.ts | 16 +- .../src/components/Step/Step.stories.mdx | 89 ++++++ packages/react/src/components/Step/Step.tsx | 67 +++++ .../components/Step/__tests__/Step.test.tsx | 56 ++++ .../__snapshots__/Step.test.tsx.snap | 63 +++++ packages/react/src/components/Step/index.ts | 20 ++ packages/react/src/components/Step/step.scss | 21 ++ .../StepContent/StepContent.stories.mdx | 53 ++++ .../components/StepContent/StepContent.tsx | 56 ++++ .../__tests__/StepContent.test.tsx | 32 +++ .../__snapshots__/StepContent.test.tsx.snap | 11 + .../react/src/components/StepContent/index.ts | 20 ++ .../components/StepContent/step-content.scss | 21 ++ .../StepLabel/StepLabel.stories.mdx | 57 ++++ .../src/components/StepLabel/StepLabel.tsx | 56 ++++ .../StepLabel/__tests__/StepLabel.test.tsx | 37 +++ .../__snapshots__/StepLabel.test.tsx.snap | 26 ++ .../react/src/components/StepLabel/index.ts | 20 ++ .../src/components/StepLabel/step-label.scss | 21 ++ .../components/Stepper/Stepper.stories.mdx | 265 +++++++++++++----- .../react/src/components/Stepper/Stepper.tsx | 103 ++----- .../Stepper/__tests__/Stepper.test.tsx | 92 +++++- .../__snapshots__/Stepper.test.tsx.snap | 206 +++++++++++++- .../react/src/components/Stepper/stepper.scss | 13 +- 24 files changed, 1238 insertions(+), 183 deletions(-) create mode 100644 packages/react/src/components/Step/Step.stories.mdx create mode 100644 packages/react/src/components/Step/Step.tsx create mode 100644 packages/react/src/components/Step/__tests__/Step.test.tsx create mode 100644 packages/react/src/components/Step/__tests__/__snapshots__/Step.test.tsx.snap create mode 100644 packages/react/src/components/Step/index.ts create mode 100644 packages/react/src/components/Step/step.scss create mode 100644 packages/react/src/components/StepContent/StepContent.stories.mdx create mode 100644 packages/react/src/components/StepContent/StepContent.tsx create mode 100644 packages/react/src/components/StepContent/__tests__/StepContent.test.tsx create mode 100644 packages/react/src/components/StepContent/__tests__/__snapshots__/StepContent.test.tsx.snap create mode 100644 packages/react/src/components/StepContent/index.ts create mode 100644 packages/react/src/components/StepContent/step-content.scss create mode 100644 packages/react/src/components/StepLabel/StepLabel.stories.mdx create mode 100644 packages/react/src/components/StepLabel/StepLabel.tsx create mode 100644 packages/react/src/components/StepLabel/__tests__/StepLabel.test.tsx create mode 100644 packages/react/src/components/StepLabel/__tests__/__snapshots__/StepLabel.test.tsx.snap create mode 100644 packages/react/src/components/StepLabel/index.ts create mode 100644 packages/react/src/components/StepLabel/step-label.scss diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index dd875484..5af36854 100644 --- a/packages/react/.storybook/story-config.ts +++ b/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,6 +108,9 @@ export type Stories = | 'Skeleton' | 'Snackbar' | 'Stack' + | 'Step' + | 'StepContent' + | 'StepLabel' | 'Stepper' | 'Switch' | 'Tab' @@ -370,8 +373,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`, diff --git a/packages/react/src/components/Step/Step.stories.mdx b/packages/react/src/components/Step/Step.stories.mdx new file mode 100644 index 00000000..c20b3e55 --- /dev/null +++ b/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, +}; + + + +export const Template = args => ; + +# Step + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Step component can be used with Stepper component. + + + + Sample Step Description}> + Sample Step Label + + + Sample Step Content + + + + ), + }} + > + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Step` component in your components as follows. + + + Sample Step Description } + > + Sample Step Label + + + Sample Step Content + + + + ); +}`} +/> diff --git a/packages/react/src/components/Step/Step.tsx b/packages/react/src/components/Step/Step.tsx new file mode 100644 index 00000000..39791ca2 --- /dev/null +++ b/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, MuiStepLabelProps 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, '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 = forwardRef( + ({className, ...rest}: StepProps, ref: Ref): ReactElement => { + const classes: string = clsx('oxygen-step-content', className); + + return ; + }, +) as ForwardRefExoticComponent; + +export default Step; diff --git a/packages/react/src/components/Step/__tests__/Step.test.tsx b/packages/react/src/components/Step/__tests__/Step.test.tsx new file mode 100644 index 00000000..254a81e0 --- /dev/null +++ b/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( + + Sample Step Description}> + Sample Step Label + + + Sample Step Content + + + , + ); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render( + + Sample Step Description}> + Sample Step Label + + + Sample Step Content + + + , + ); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/Step/__tests__/__snapshots__/Step.test.tsx.snap b/packages/react/src/components/Step/__tests__/__snapshots__/Step.test.tsx.snap new file mode 100644 index 00000000..e6a8742f --- /dev/null +++ b/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`] = ` + +
+
+ + + + Sample Step Label + + + Sample Step Description + + + +
+
+
+
+

+ Sample Step Content +

+ +
+
+
+
+
+
+ +`; diff --git a/packages/react/src/components/Step/index.ts b/packages/react/src/components/Step/index.ts new file mode 100644 index 00000000..dd831648 --- /dev/null +++ b/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'; diff --git a/packages/react/src/components/Step/step.scss b/packages/react/src/components/Step/step.scss new file mode 100644 index 00000000..b44121a9 --- /dev/null +++ b/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 */ +} diff --git a/packages/react/src/components/StepContent/StepContent.stories.mdx b/packages/react/src/components/StepContent/StepContent.stories.mdx new file mode 100644 index 00000000..8595a51c --- /dev/null +++ b/packages/react/src/components/StepContent/StepContent.stories.mdx @@ -0,0 +1,53 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StepContent from './StepContent.tsx'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Typography from '../Typography/Typography.tsx'; + +export const meta = { + component: StepContent, + title: StoryConfig.StepContent.hierarchy, +}; + + + +export const Template = args => ; + +# StepContent + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +The StepContent component is used to display the content for each step in a stepper. + + + Sample Step Description}}> + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `StepContent` component in your components as follows. + + + Sample Step Content + + ); +}`} +/> diff --git a/packages/react/src/components/StepContent/StepContent.tsx b/packages/react/src/components/StepContent/StepContent.tsx new file mode 100644 index 00000000..0a2b3a74 --- /dev/null +++ b/packages/react/src/components/StepContent/StepContent.tsx @@ -0,0 +1,56 @@ +/** + * Copyright (c) 2024, 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 MuiStepContent from '@mui/material/StepContent'; +import type {StepContentProps as MuiStepContentProps} from '@mui/material/StepContent'; +import clsx from 'clsx'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react'; + +export type StepContentProps = MuiStepContentProps; + +/** + * The StepContent component is used to display the content for each step in a vertical stepper. + * + * 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: + * + * - [StepContent API](https://mui.com/material-ui/api/step-content/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the StepContent component. + * @param ref - The ref to be forwarded to the MuiStepContent component. + * @returns The rendered StepContent component. + */ +const StepContent: ForwardRefExoticComponent = forwardRef( + ({className, ...rest}: StepContentProps, ref: Ref): ReactElement => { + const classes: string = clsx('oxygen-step-content', className); + + return ; + }, +) as ForwardRefExoticComponent; + +export default StepContent; diff --git a/packages/react/src/components/StepContent/__tests__/StepContent.test.tsx b/packages/react/src/components/StepContent/__tests__/StepContent.test.tsx new file mode 100644 index 00000000..090cc6b5 --- /dev/null +++ b/packages/react/src/components/StepContent/__tests__/StepContent.test.tsx @@ -0,0 +1,32 @@ +/** + * 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 StepContent from '../StepContent'; + +describe('StepContent', () => { + it('should render successfully', () => { + const {baseElement} = render(Sample Step Content); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render(Sample Step Content); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/StepContent/__tests__/__snapshots__/StepContent.test.tsx.snap b/packages/react/src/components/StepContent/__tests__/__snapshots__/StepContent.test.tsx.snap new file mode 100644 index 00000000..a82fbf0c --- /dev/null +++ b/packages/react/src/components/StepContent/__tests__/__snapshots__/StepContent.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`StepContent should match the snapshot 1`] = ` + +
+
+
+ +`; diff --git a/packages/react/src/components/StepContent/index.ts b/packages/react/src/components/StepContent/index.ts new file mode 100644 index 00000000..57f8445e --- /dev/null +++ b/packages/react/src/components/StepContent/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 './StepContent'; +export * from './StepContent'; diff --git a/packages/react/src/components/StepContent/step-content.scss b/packages/react/src/components/StepContent/step-content.scss new file mode 100644 index 00000000..b803753a --- /dev/null +++ b/packages/react/src/components/StepContent/step-content.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-content { + /* Add Styles */ +} diff --git a/packages/react/src/components/StepLabel/StepLabel.stories.mdx b/packages/react/src/components/StepLabel/StepLabel.stories.mdx new file mode 100644 index 00000000..fc5c083c --- /dev/null +++ b/packages/react/src/components/StepLabel/StepLabel.stories.mdx @@ -0,0 +1,57 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StepLabel from './StepLabel.tsx'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Typography from '../Typography/Typography.tsx'; + +export const meta = { + component: StepLabel, + title: StoryConfig.StepLabel.hierarchy, +}; + + + +export const Template = args => ; + +# StepLabel + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +The StepLabel component can be used within the Stepper to display a label for each step. + + + Sample Step Description}} + > + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `StepLabel` component in your components as follows. + +Last step}> + Sample Step Label + + ); +}`} +/> diff --git a/packages/react/src/components/StepLabel/StepLabel.tsx b/packages/react/src/components/StepLabel/StepLabel.tsx new file mode 100644 index 00000000..8983273a --- /dev/null +++ b/packages/react/src/components/StepLabel/StepLabel.tsx @@ -0,0 +1,56 @@ +/** + * Copyright (c) 2024, 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 MuiStepLabel from '@mui/material/StepLabel'; +import type {StepLabelProps as MuiStepLabelProps} from '@mui/material/StepLabel'; +import clsx from 'clsx'; +import {forwardRef} from 'react'; +import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react'; + +export type StepLabelProps = MuiStepLabelProps; + +/** + * The StepLabel component is used to display a label for each step in a stepper. + * + * 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: + * + * - [StepLabel API](https://mui.com/material-ui/api/step-label/) + * + * @remarks + * - ✔️ Props of the native component are also available. + * - ❌ `component` prop is not supported. + * - ✅ The `ref` is forwarded to the root element. + * + * @param props - The props for the StepLabel component. + * @param ref - The ref to be forwarded to the MuiStepLabel component. + * @returns The rendered StepLabel component. + */ +const StepLabel: ForwardRefExoticComponent = forwardRef( + ({className, ...rest}: StepLabelProps, ref: Ref): ReactElement => { + const classes: string = clsx('oxygen-step-label', className); + + return ; + }, +) as ForwardRefExoticComponent; + +export default StepLabel; diff --git a/packages/react/src/components/StepLabel/__tests__/StepLabel.test.tsx b/packages/react/src/components/StepLabel/__tests__/StepLabel.test.tsx new file mode 100644 index 00000000..2b89e700 --- /dev/null +++ b/packages/react/src/components/StepLabel/__tests__/StepLabel.test.tsx @@ -0,0 +1,37 @@ +/** + * 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 Typography from '../../Typography'; +import StepLabel from '../StepLabel'; + +describe('StepLabel', () => { + it('should render successfully', () => { + const {baseElement} = render( + Last step}>Sample Step Label, + ); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render( + Last step}>Sample Step Label, + ); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/StepLabel/__tests__/__snapshots__/StepLabel.test.tsx.snap b/packages/react/src/components/StepLabel/__tests__/__snapshots__/StepLabel.test.tsx.snap new file mode 100644 index 00000000..f3a597b9 --- /dev/null +++ b/packages/react/src/components/StepLabel/__tests__/__snapshots__/StepLabel.test.tsx.snap @@ -0,0 +1,26 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`StepLabel should match the snapshot 1`] = ` + +
+ + + + Sample Step Label + + + Last step + + + +
+ +`; diff --git a/packages/react/src/components/StepLabel/index.ts b/packages/react/src/components/StepLabel/index.ts new file mode 100644 index 00000000..7bcc29e8 --- /dev/null +++ b/packages/react/src/components/StepLabel/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 './StepLabel'; +export * from './StepLabel'; diff --git a/packages/react/src/components/StepLabel/step-label.scss b/packages/react/src/components/StepLabel/step-label.scss new file mode 100644 index 00000000..f7e2c8f8 --- /dev/null +++ b/packages/react/src/components/StepLabel/step-label.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-label { + /* Add Styles */ +} diff --git a/packages/react/src/components/Stepper/Stepper.stories.mdx b/packages/react/src/components/Stepper/Stepper.stories.mdx index 078d2219..b767d154 100644 --- a/packages/react/src/components/Stepper/Stepper.stories.mdx +++ b/packages/react/src/components/Stepper/Stepper.stories.mdx @@ -1,8 +1,12 @@ 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 Stepper from './Stepper.tsx'; import StoryConfig from '../../../.storybook/story-config.ts'; +import Button from '../Button/Button.tsx'; +import Step from '../Step/Step.tsx'; +import StepContent from '../StepContent/StepContent.tsx'; +import StepLabel from '../StepLabel/StepLabel.tsx'; +import Typography from '../Typography/Typography.tsx'; export const meta = { component: Stepper, @@ -18,6 +22,7 @@ export const Template = args => ; - [Overview](#overview) - [Props](#props) - [Usage](#usage) +- [Orientations](#orientations) ## Overview @@ -27,40 +32,42 @@ Stepper can be used to compose wizards and carousels. - 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. - , - - 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. - , - - 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. - , - - 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. - , + activeStep: 0, + children: [ + + Step One Description}> + Step One Label + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean eleifend tortor lorem, at mollis mauris euismod in. + + + , + + Step Two Description}> + Step Two Label + + + Step Two Content + + + , + + Step Three Description}> + Step Three Label + + + Step Three Content + + + , ], }} > @@ -81,48 +88,158 @@ Import and use the `Stepper` component in your components as follows. dark format code={dedent` -import Stepper from '@oxygen-ui/react/Stepper';\n +import Stepper from '@oxygen-ui/react/Stepper'; +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 ( - 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. - , - - 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. - , - - 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. - , - - 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. - , - ] - } + activeStep={0} + > + + Step One Description}> + Step One Label + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean eleifend tortor lorem, at mollis mauris euismod in. + + + + + Step Two Description}> + Step Two Label + + + Step Two Content + + + + + Step Three Description}> + Step Three Label + + + Step Three Content + + + /> ); }`} /> + +## Orientations + +### Horizontal Stepper + +Horizontal steppers are ideal when the contents of one step depend on an earlier step. + + + + Step One Description}> + Step One Label + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean eleifend tortor lorem, at mollis mauris euismod in. + + + , + + Step Two Description}> + Step Two Label + + + Step Two Content + + + , + + Step Three Description}> + Step Three Label + + + Step Three Content + + + , + ], + orientation: 'horizontal', + }} + > + {Template.bind({})} + + + +### Vertial Stepper + +Vertical steppers are designed for narrow screen sizes. + + + + Step One Description}> + Step One Label + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean eleifend tortor lorem, at mollis mauris euismod in. + + + , + + Step Two Description}> + Step Two Label + + + Step Two Content + + + , + + Step Three Description}> + Step Three Label + + + Step Three Content + + + , + ], + orientation: 'vertical', + }} + > + {Template.bind({})} + + diff --git a/packages/react/src/components/Stepper/Stepper.tsx b/packages/react/src/components/Stepper/Stepper.tsx index 37af3fd6..d16bd72d 100644 --- a/packages/react/src/components/Stepper/Stepper.tsx +++ b/packages/react/src/components/Stepper/Stepper.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 @@ -17,114 +17,55 @@ */ import type {OverridableComponent} from '@mui/material/OverridableComponent'; +import MuiStepper from '@mui/material/Stepper'; +import type {StepperProps as MuiStepperProps, StepperTypeMap} from '@mui/material/Stepper'; import clsx from 'clsx'; -import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'; +import {forwardRef} from 'react'; import type {ElementType, Ref, ReactElement} from 'react'; -import Box from '../Box'; -import type {BoxProps, BoxTypeMap} from '../Box'; import './stepper.scss'; -export type StepperProps = BoxProps & { +export type StepperProps< + C extends ElementType = ElementType, + D extends ElementType = StepperTypeMap['defaultComponent'], + P = {}, +> = { /** - * Animate the slide transition. + * The component used for the root node. Either a string to use an HTML element or a component. */ - animateOnSlide?: boolean; - /** - * Current step. - */ - currentStep: number; - /** - * Steps to be rendered. - */ - steps: ReactElement[]; -}; + component?: C; +} & Omit, 'component'>; /** - * The Stepper can be used to compose wizards and carousels. + * The Stepper component is used to display a series of steps in a defined sequence. * * Demos: * - * - [Stepper (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-stepper--overview) + * - [Stepper (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-stepper) + * - [Stepper (MUI)](https://mui.com/material-ui/react-stepper/) * * API: * - * - inherits [Box API](https://mui.com/material-ui/api/box/) + * - [Stepper API](https://mui.com/material-ui/api/stepper/) * * @remarks - * - ✨ This is a custom component that is not available in the Material-UI library. - * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available. + * - ✔️ 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 Stepper component. - * @param ref - The ref to be forwarded to the Box component. + * @param ref - The ref to be forwarded to the MuiStepper component. * @returns The rendered Stepper component. */ -const Stepper: OverridableComponent> = forwardRef( +const Stepper: OverridableComponent> = forwardRef( ( - {animateOnSlide, className, currentStep = 0, steps}: StepperProps, + {className, ...rest}: StepperProps, ref: Ref, ): ReactElement => { - const [slideLeftPosition, setSlideLeftPosition] = useState(0); - const [slideContainerWidth, setSlideContainerWidth] = useState(0); - - const slideContainerRef: Ref = useRef(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, 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); - }; - }, [animateOnSlide, slideContainer]); - - useEffect(() => { - slideContainer(slideContainerWidth); - }, [slideContainerWidth, slideContainer]); - - if (animateOnSlide) { - return ( - - - {steps.map((step: ReactElement) => ( - - {step} - - ))} - - - ); - } - - return steps[currentStep]; + return ; }, -) as OverridableComponent>; +) as OverridableComponent>; 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 index dc27ef53..0ad02e5c 100644 --- a/packages/react/src/components/Stepper/__tests__/Stepper.test.tsx +++ b/packages/react/src/components/Stepper/__tests__/Stepper.test.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 @@ -17,25 +17,95 @@ */ import {render} from '@unit-testing'; -import {ReactElement} from 'react'; +import Button from '../../Button'; +import Step from '../../Step'; +import StepContent from '../../StepContent'; +import StepLabel from '../../StepLabel'; import Typography from '../../Typography'; import Stepper from '../Stepper'; -const steps: ReactElement[] = [ - Step 1, - Step 2, - Step 3, - Step 4, -]; - describe('Stepper', () => { it('should render successfully', () => { - const {baseElement} = render(); + const {baseElement} = render( + + + Step One Description}> + Step One Label + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean eleifend tortor lorem, at mollis mauris euismod in. + + + + + Step Two Description}> + Step Two Label + + + Step Two Content + + + + + Step Three Description}> + Step Three Label + + + Step Three Content + + + + , + ); expect(baseElement).toBeTruthy(); }); it('should match the snapshot', () => { - const {baseElement} = render(); + const {baseElement} = render( + + + Step One Description}> + Step One Label + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Aenean eleifend tortor lorem, at mollis mauris euismod in. + + + + + Step Two Description}> + Step Two Label + + + Step Two Content + + + + + Step Three Description}> + Step Three Label + + + Step Three Content + + + + , + ); 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 index cfa70448..d72343f3 100644 --- a/packages/react/src/components/Stepper/__tests__/__snapshots__/Stepper.test.tsx.snap +++ b/packages/react/src/components/Stepper/__tests__/__snapshots__/Stepper.test.tsx.snap @@ -3,11 +3,209 @@ exports[`Stepper should match the snapshot 1`] = `
-

- Step 1 -

+
+ + + + + + + Step One Label + + + Step One Description + + + +
+
+
+
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. +

+

+ Aenean eleifend tortor lorem, at mollis mauris euismod in. +

+ +
+
+
+
+
+
+ +
+
+ + + + + + + Step Two Label + + + Step Two Description + + + +
+
+
+ +
+
+ + + + + + + Step Three Label + + + Step Three Description + + + +
+
+
`; diff --git a/packages/react/src/components/Stepper/stepper.scss b/packages/react/src/components/Stepper/stepper.scss index 4ccc0050..63f926c6 100644 --- a/packages/react/src/components/Stepper/stepper.scss +++ b/packages/react/src/components/Stepper/stepper.scss @@ -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 @@ -17,14 +17,5 @@ */ .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; - } + /* Add Styles */ }