Skip to content

Commit

Permalink
Merge branch 'main' into feat-phone-number-input
Browse files Browse the repository at this point in the history
  • Loading branch information
savindi7 authored Mar 13, 2023
2 parents ce121b6 + f96d874 commit f826108
Show file tree
Hide file tree
Showing 40 changed files with 1,349 additions and 117 deletions.
20 changes: 20 additions & 0 deletions packages/react/.storybook/story-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ enum StorybookCategories {
}

export type Stories =
| 'AccountOverview'
| 'ActionCard'
| 'AppBar'
| 'AppShell'
Expand Down Expand Up @@ -77,8 +78,12 @@ export type Stories =
| 'Navbar'
| 'OutlinedInput'
| 'PhoneNumberInput'
| 'Select'
| 'SignIn'
| 'Stepper'
| 'Tab'
| 'TabPanel'
| 'Tabs'
| 'TextField'
| 'Toolbar'
| 'Tooltip'
Expand Down Expand Up @@ -106,6 +111,9 @@ export type StorybookConfig = Record<
>;

const StoryConfig: StorybookConfig = {
AccountOverview: {
hierarchy: `${StorybookCategories.Patterns}/Account Overview`,
},
ActionCard: {
hierarchy: `${StorybookCategories.Surfaces}/Action Card`,
},
Expand Down Expand Up @@ -246,12 +254,24 @@ const StoryConfig: StorybookConfig = {
PhoneNumberInput: {
hierarchy: `${StorybookCategories.Inputs}/Phone Number Input`,
},
Select: {
hierarchy: `${StorybookCategories.Inputs}/Select`,
},
SignIn: {
hierarchy: `${StorybookCategories.Patterns}/Sign In`,
},
Stepper: {
hierarchy: `${StorybookCategories.Surfaces}/Stepper`,
},
Tab: {
hierarchy: `${StorybookCategories.Navigation}/Tab`,
},
TabPanel: {
hierarchy: `${StorybookCategories.Navigation}/Tab Panel`,
},
Tabs: {
hierarchy: `${StorybookCategories.Navigation}/Tabs`,
},
TextField: {
hierarchy: `${StorybookCategories.Inputs}/Text Field`,
},
Expand Down
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 packages/react/src/components/AccountOverview/AccountOverview.tsx
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;
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;
}
}
20 changes: 20 additions & 0 deletions packages/react/src/components/AccountOverview/index.ts
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';
2 changes: 1 addition & 1 deletion packages/react/src/components/Avatar/Avatar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const COMPONENT_NAME: string = 'Avatar';
const Avatar: FC<AvatarProps> & WithWrapperProps = (props: AvatarProps): ReactElement => {
const {className, ...rest} = props;

const classes: string = clsx('oxygen-ui-avatar', className);
const classes: string = clsx('oxygen-avatar', className);

return <MuiAvatar className={classes} {...rest} />;
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`Avatar should match the snapshot 1`] = `
<body>
<div>
<div
class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault oxygen-ui-avatar css-woe6xp-MuiAvatar-root"
class="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault oxygen-avatar css-woe6xp-MuiAvatar-root"
>
<svg
aria-hidden="true"
Expand Down
Loading

0 comments on commit f826108

Please sign in to comment.