feat(react): add AccountOverview component

packages/react/.storybook/story-config.ts

@@ -32,6 +32,7 @@ enum StorybookCategories {
 }
 
 export type Stories =
+  | 'AccountOverview'
   | 'ActionCard'
   | 'AppBar'
   | 'AppShell'
@@ -105,6 +106,9 @@ export type StorybookConfig = Record<
 >;
 
 const StoryConfig: StorybookConfig = {
+  AccountOverview: {
+    hierarchy: `${StorybookCategories.Patterns}/Account Overview`,
+  },
   ActionCard: {
     hierarchy: `${StorybookCategories.Surfaces}/Action Card`,
   },

packages/react/src/components/AccountOverview/AccountOverview.stories.mdx

@@ -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: '[email protected]'
+      },
+      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: '[email protected]',
+            }}
+            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: '[email protected]'
+      },
+      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: '[email protected]'
+      },
+      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>

packages/react/src/components/AccountOverview/AccountOverview.tsx

@@ -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;

packages/react/src/components/AccountOverview/account-overview.scss

@@ -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;
+  }
+}

packages/react/src/components/AccountOverview/index.ts

@@ -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';

packages/react/src/components/Avatar/Avatar.tsx

@@ -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} />;
 };

packages/react/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap

@@ -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"