-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #41 from thivi/main
feat(react): add Wizard component
- Loading branch information
Showing
7 changed files
with
415 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
129 changes: 129 additions & 0 deletions
129
packages/react/src/components/Wizard/Wizard.stories.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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>, | ||
| ]} | ||
| /> | ||
| ); | ||
| }`} | ||
| /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,202 @@ | ||
| /** | ||
| * 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 LinearProgress from '@mui/material/LinearProgress'; | ||
| import clsx from 'clsx'; | ||
| import {FC, HTMLAttributes, ReactElement, useCallback, 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 CardActions from '../CardActions'; | ||
| import CardContent from '../CardContent'; | ||
| import CardHeader from '../CardHeader'; | ||
| import {Stepper} from '../Stepper'; | ||
| import Typography from '../Typography'; | ||
| import './wizard.scss'; | ||
|
|
||
| export interface WizardProps extends HTMLAttributes<HTMLDivElement> { | ||
| /** | ||
| * Allow backward navigation. This will show a button allowing you to navigate backwards. | ||
| */ | ||
| allowBackwardNavigation?: boolean; | ||
| /** | ||
| * Allow cancel. This will show a button allowing you to cancel the wizard. | ||
| */ | ||
| allowCancel?: boolean; | ||
| /** | ||
| * Animate the slide transition. | ||
| */ | ||
| animateOnSlide?: boolean; | ||
| /** | ||
| * Cancel button text. | ||
| */ | ||
| cancelButtonText?: string; | ||
| /** | ||
| * Finish button text. | ||
| */ | ||
| finishButtonText?: string; | ||
| /** | ||
| * Next button text. | ||
| */ | ||
| nextButtonText?: string; | ||
| /** | ||
| * Callback to be called when the cancel button is clicked. | ||
| */ | ||
| onCancelButtonClick: () => Promise<void>; | ||
| /** | ||
| * Callback to be called when the finish button is clicked. | ||
| */ | ||
| onFinishButtonClick: () => Promise<void>; | ||
| /** | ||
| * Callback to be called when the next button is clicked. | ||
| */ | ||
| onNextButtonClick: () => Promise<void>; | ||
| /** | ||
| * Callback to be called when the previous button is clicked. | ||
| */ | ||
| onPreviousButtonClick: () => Promise<void>; | ||
| /** | ||
| * Previous button text. | ||
| */ | ||
| previousButtonText?: string; | ||
| /** | ||
| * Steps to be rendered. | ||
| */ | ||
| steps: ReactElement[]; | ||
| /** | ||
| * Subtitle of the wizard. | ||
| */ | ||
| subtitle: string; | ||
| /** | ||
| * Title of the wizard. | ||
| */ | ||
| title: string; | ||
| } | ||
|
|
||
| const COMPONENT_NAME: string = 'Wizard'; | ||
|
|
||
| const Wizard: FC<WizardProps> & WithWrapperProps = (props: WizardProps): ReactElement => { | ||
| const { | ||
| allowBackwardNavigation, | ||
| allowCancel, | ||
| animateOnSlide, | ||
| className, | ||
| title, | ||
| subtitle, | ||
| nextButtonText, | ||
| previousButtonText, | ||
| cancelButtonText, | ||
| onCancelButtonClick, | ||
| onNextButtonClick, | ||
| onPreviousButtonClick, | ||
| onFinishButtonClick, | ||
| finishButtonText, | ||
| steps, | ||
| } = props; | ||
|
|
||
| const [currentStep, setCurrentStep] = useState<number>(0); | ||
|
|
||
| const classes: string = clsx('oxygen-wizard', className); | ||
|
|
||
| const isLastStep: boolean = useMemo(() => currentStep === steps.length - 1, [steps, currentStep]); | ||
| const isFirstStep: boolean = useMemo(() => currentStep === 0, [currentStep]); | ||
| const displayCurrentStep: number = useMemo(() => currentStep + 1, [currentStep]); | ||
|
|
||
| const handleNextButtonClick: () => Promise<void> = useCallback(async (): Promise<void> => { | ||
| if (isLastStep) { | ||
| if (onFinishButtonClick && onFinishButtonClick instanceof Function) { | ||
| await onFinishButtonClick(); | ||
| } | ||
|
|
||
| return; | ||
| } | ||
|
|
||
| if (onNextButtonClick && onNextButtonClick instanceof Function) { | ||
| await onNextButtonClick(); | ||
| } | ||
|
|
||
| setCurrentStep((step: number) => step + 1); | ||
| }, [isLastStep]); | ||
|
|
||
| const handlePreviousButtonClick: () => Promise<void> = useCallback(async (): Promise<void> => { | ||
| if (isFirstStep) { | ||
| return; | ||
| } | ||
|
|
||
| if (onPreviousButtonClick && onPreviousButtonClick instanceof Function) { | ||
| await onPreviousButtonClick(); | ||
| } | ||
| setCurrentStep((step: number) => step - 1); | ||
| }, [isFirstStep]); | ||
|
|
||
| return ( | ||
| <Box className={classes}> | ||
| <Card elevation={1} className="oxygen-wizard-card"> | ||
| <CardHeader title={title} subheader={subtitle} /> | ||
| <CardContent className="oxygen-wizard-card-content"> | ||
| <Stepper animateOnSlide={animateOnSlide} currentStep={currentStep} steps={steps} /> | ||
| </CardContent> | ||
| <CardActions className="oxygen-wizard-actions"> | ||
| <Box> | ||
| {allowBackwardNavigation && !isFirstStep && ( | ||
| <Button color="secondary" onClick={handlePreviousButtonClick}> | ||
| {previousButtonText} | ||
| </Button> | ||
| )} | ||
| </Box> | ||
| <Box className="oxygen-wizard-right-aligned-buttons"> | ||
| {allowCancel && ( | ||
| <Button variant="contained" color="secondary" onClick={onCancelButtonClick}> | ||
| {cancelButtonText} | ||
| </Button> | ||
| )} | ||
| <Button variant="contained" color="primary" onClick={handleNextButtonClick}> | ||
| {isLastStep ? finishButtonText : nextButtonText} | ||
| </Button> | ||
| </Box> | ||
| </CardActions> | ||
| </Card> | ||
| <Box className="oxygen-wizard-progress-container"> | ||
| <Typography>{`${displayCurrentStep}/${steps.length}`}</Typography> | ||
| <Box className="oxygen-wizard-progress-bar-container"> | ||
| <LinearProgress | ||
| className="oxygen-wizard-progress-bar" | ||
| variant="determinate" | ||
| value={(displayCurrentStep / steps.length) * 100} | ||
| aria-label="Wizard Progress Bar" | ||
| /> | ||
| </Box> | ||
| </Box> | ||
| </Box> | ||
| ); | ||
| }; | ||
|
|
||
| Wizard.displayName = composeComponentDisplayName(COMPONENT_NAME); | ||
| Wizard.muiName = COMPONENT_NAME; | ||
| Wizard.defaultProps = { | ||
| allowBackwardNavigation: true, | ||
| allowCancel: false, | ||
| cancelButtonText: 'Cancel', | ||
| finishButtonText: 'Finish', | ||
| nextButtonText: 'Next', | ||
| previousButtonText: 'Previous', | ||
| }; | ||
|
|
||
| export default Wizard; |
Oops, something went wrong.