-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into feat-phone-number-input
- Loading branch information
Showing
40 changed files
with
1,349 additions
and
117 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
160 changes: 160 additions & 0 deletions
160
packages/react/src/components/AccountOverview/AccountOverview.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,160 @@ | ||
import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; | ||
import AccountOverview from './AccountOverview.tsx'; | ||
import Button from '../Button'; | ||
import dedent from 'ts-dedent'; | ||
import StoryConfig from '../../../.storybook/story-config.ts'; | ||
import {withDesign} from '../../../.storybook/utils.ts'; | ||
import Typography from '../Typography'; | ||
|
||
export const meta = { | ||
component: AccountOverview, | ||
title: StoryConfig.AccountOverview.hierarchy, | ||
}; | ||
|
||
<Meta title={meta.title} component={meta.component} /> | ||
|
||
export const Template = args => <AccountOverview {...args} />; | ||
|
||
# AccountOverview | ||
|
||
- [Overview](#overview) | ||
- [Props](#props) | ||
- [Usage](#usage) | ||
- [Variants](#variants) | ||
- [Incomplete](#incomplete) | ||
- [Complete](#complete) | ||
|
||
## Overview | ||
|
||
This component is used to display the user's account overview. It includes the user's profile picture, name, email, account progress and account completion steps. | ||
|
||
<Canvas> | ||
<Story | ||
name="Overview" | ||
args={{ | ||
title: <Typography variant="h5">Welcome Mathew</Typography>, | ||
subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>, | ||
user:{ | ||
image: '/assets/images/avatar-john.svg', | ||
name: 'Matthew', | ||
email: 'matthew@wso2.com' | ||
}, | ||
accountProgress: 60, | ||
accountCompletionStepsTitle: "Complete your Profile. It's at 60%", | ||
accountCompletionSteps: [ | ||
{ | ||
title: 'Add your email address', | ||
description: 'You can add your email address to your profile to receive notifications and updates from us.', | ||
illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />, | ||
action: <Button variant="outlined">Add Email</Button> | ||
}, | ||
{ | ||
title: 'Add your phone number', | ||
description: 'You can add your phone number to your profile to receive notifications and updates from us.', | ||
illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />, | ||
action: <Button variant="outlined">Add Phone</Button> | ||
}, | ||
{ | ||
title: 'Add your address', | ||
description: 'You can add your address to your profile to receive notifications and updates from us.', | ||
illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />, | ||
action: <Button variant="outlined">Add Address</Button> | ||
} | ||
], | ||
}} | ||
> | ||
{Template.bind({})} | ||
</Story> | ||
</Canvas> | ||
|
||
## Props | ||
|
||
<ArgsTable story="Overview" /> | ||
|
||
## Usage | ||
|
||
Import and use the `AccountOverview` component in your components as follows. | ||
|
||
<Source | ||
language="jsx" | ||
dark | ||
format | ||
code={dedent` | ||
import AccountOverview from '@oxygen-ui/react/AccountOverview';\n | ||
function Demo() { | ||
return <AccountOverview | ||
user={{ | ||
image: '/assets/images/avatar-john.svg', | ||
name: 'Matthew', | ||
email: 'matthew@wso2.com', | ||
}} | ||
title={<Typography variant="h5">Welcome Mathew</Typography>} | ||
accountProgress={60} | ||
/> | ||
}`} | ||
/> | ||
|
||
## Variants | ||
|
||
### Incomplete | ||
|
||
<Canvas> | ||
<Story | ||
name="Incomplete" | ||
args={{ | ||
title: <Typography variant="h5">Welcome Mathew</Typography>, | ||
subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>, | ||
user:{ | ||
image: '/assets/images/avatar-john.svg', | ||
name: 'Matthew', | ||
email: 'matthew@wso2.com' | ||
}, | ||
accountProgress: 60, | ||
accountCompletionStepsTitle: "Complete your Profile. It's at 60%", | ||
accountCompletionSteps: [ | ||
{ | ||
title: 'Add your email address', | ||
description: 'You can add your email address to your profile to receive notifications and updates from us.', | ||
illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />, | ||
action: <Button variant="outlined">Add Email</Button> | ||
}, | ||
{ | ||
title: 'Add your phone number', | ||
description: 'You can add your phone number to your profile to receive notifications and updates from us.', | ||
illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />, | ||
action: <Button variant="outlined">Add Phone</Button> | ||
}, | ||
{ | ||
title: 'Add your address', | ||
description: 'You can add your address to your profile to receive notifications and updates from us.', | ||
illustration: <img src="/assets/images/carousel-illustration.svg" alt="carousel illustration" />, | ||
action: <Button variant="outlined">Add Address</Button> | ||
} | ||
], | ||
}} | ||
> | ||
{Template.bind({})} | ||
</Story> | ||
</Canvas> | ||
|
||
### Complete | ||
|
||
<Canvas> | ||
<Story | ||
name="Complete" | ||
args={{ | ||
title: <Typography variant="h5">Welcome Mathew</Typography>, | ||
subheader: <Typography variant="body2">Manage your personal information, account security and privacy settings.</Typography>, | ||
user:{ | ||
image: '/assets/images/avatar-john.svg', | ||
name: 'Matthew', | ||
email: 'matthew@wso2.com' | ||
}, | ||
accountCompletionStepsTitle: "Complete your Profile. It's at 60%", | ||
accountProgress: 100, | ||
illustration: <img src="/assets/images/action-card-image.svg" alt="image" /> | ||
}} | ||
> | ||
{Template.bind({})} | ||
</Story> | ||
</Canvas> |
112 changes: 112 additions & 0 deletions
112
packages/react/src/components/AccountOverview/AccountOverview.tsx
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,112 @@ | ||
/** | ||
* 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, ReactElement, ReactNode} from 'react'; | ||
import {WithWrapperProps} from '../../models'; | ||
import {composeComponentDisplayName} from '../../utils'; | ||
import Box from '../Box'; | ||
import Card, {CardProps} from '../Card'; | ||
import CardHeader, {CardHeaderProps} from '../CardHeader'; | ||
import {Carousel, CarouselStep} from '../Carousel'; | ||
import CircularProgressAvatar from '../CircularProgressAvatar'; | ||
import Divider from '../Divider'; | ||
import {UserTemplate} from '../UserDropdownMenu'; | ||
import './account-overview.scss'; | ||
|
||
export interface AccountOverviewProps extends Omit<CardProps, 'title'> { | ||
/** | ||
* Account completion steps. | ||
*/ | ||
accountCompletionSteps?: AccountCompletionSteps[]; | ||
/** | ||
* Account completion steps title. | ||
*/ | ||
accountCompletionStepsTitle?: string; | ||
/** | ||
* Account progress. | ||
*/ | ||
accountProgress: number; | ||
/** | ||
* Card header props. | ||
*/ | ||
cardHeaderProps?: CardHeaderProps; | ||
/** | ||
* Card Subheader. | ||
* @example <span>subheader</span> | ||
*/ | ||
subheader?: ReactNode; | ||
/** | ||
* Card Title. | ||
* @example <span>title</span> | ||
*/ | ||
title: ReactNode; | ||
/** | ||
* Logged user information. | ||
*/ | ||
user: UserTemplate; | ||
} | ||
|
||
export type AccountCompletionSteps = CarouselStep; | ||
|
||
const COMPONENT_NAME: string = 'AccountOverview'; | ||
|
||
const AccountOverview: FC<AccountOverviewProps> & WithWrapperProps = (props: AccountOverviewProps): ReactElement => { | ||
const { | ||
className, | ||
title, | ||
subheader, | ||
accountCompletionStepsTitle, | ||
accountCompletionSteps, | ||
accountProgress, | ||
user, | ||
cardHeaderProps, | ||
...rest | ||
} = props; | ||
|
||
const classes: string = clsx('oxygen-account-overview', className); | ||
|
||
return ( | ||
<Card className={classes} elevation={0} variant="outlined" {...rest}> | ||
<CardHeader | ||
avatar={ | ||
<CircularProgressAvatar | ||
color={accountProgress < 100 ? 'warning' : 'success'} | ||
progress={accountProgress} | ||
avatarOptions={{alt: "User's avatar", src: user?.image}} | ||
badgeOptions={{badgeContent: `${accountProgress}%`, color: accountProgress < 100 ? 'warning' : 'success'}} | ||
/> | ||
} | ||
title={title} | ||
subheader={subheader} | ||
{...cardHeaderProps} | ||
/> | ||
{accountCompletionSteps && ( | ||
<Box className="oxygen-account-completion-steps-box"> | ||
<Divider /> | ||
<Carousel title={accountCompletionStepsTitle} steps={accountCompletionSteps} /> | ||
</Box> | ||
)} | ||
</Card> | ||
); | ||
}; | ||
|
||
AccountOverview.displayName = composeComponentDisplayName(COMPONENT_NAME); | ||
AccountOverview.muiName = COMPONENT_NAME; | ||
|
||
export default AccountOverview; |
30 changes: 30 additions & 0 deletions
30
packages/react/src/components/AccountOverview/account-overview.scss
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,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-account-overview { | ||
padding: 0.8rem 1rem; | ||
|
||
.oxygen-card-header { | ||
padding: 1rem 0; | ||
padding-bottom: 1.5rem; | ||
} | ||
|
||
.oxygen-account-completion-steps-box { | ||
padding: 0.5rem; | ||
} | ||
} |
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,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} from './AccountOverview'; | ||
export type {AccountOverviewProps} from './AccountOverview'; |
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
Oops, something went wrong.