From 120ab00937ac1a09ab3954e16f3fc113ed295ace Mon Sep 17 00:00:00 2001 From: savindi7 Date: Wed, 15 Feb 2023 18:13:21 +0530 Subject: [PATCH 1/5] feat(react): add `CircularProgressAvatar` comp --- packages/react/.storybook/story-config.ts | 4 + .../CircularProgressAvatar.stories.mdx | 52 ++++++++++++ .../CircularProgressAvatar.tsx | 81 +++++++++++++++++++ .../__tests__/CircularProgressAvatar.test.tsx | 32 ++++++++ .../CircularProgressAvatar.test.tsx.snap | 79 ++++++++++++++++++ .../circular-progress-avatar.scss | 47 +++++++++++ .../CircularProgressAvatar/index.ts | 20 +++++ 7 files changed, 315 insertions(+) create mode 100644 packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx create mode 100644 packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx create mode 100644 packages/react/src/components/CircularProgressAvatar/__tests__/CircularProgressAvatar.test.tsx create mode 100644 packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap create mode 100644 packages/react/src/components/CircularProgressAvatar/circular-progress-avatar.scss create mode 100644 packages/react/src/components/CircularProgressAvatar/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index ce2a607f..a79b9ac7 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -34,6 +34,7 @@ export type Stories = | 'ActionCard' | 'AppBar' | 'Avatar' + | 'CircularProgressAvatar' | 'UserDropdownMenu' | 'Header' | 'Box' @@ -108,6 +109,9 @@ const StoryConfig: StorybookConfig = { Button: { hierarchy: `${StorybookCategories.Inputs}/Button`, }, + CircularProgressAvatar: { + hierarchy: `${StorybookCategories.DataDisplay}/Circular Progress Avatar`, + }, UserDropdownMenu: { hierarchy: `${StorybookCategories.Navigation}/User Dropdown Menu`, }, diff --git a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx new file mode 100644 index 00000000..b3fac50e --- /dev/null +++ b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx @@ -0,0 +1,52 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import CircularProgressAvatar from './CircularProgressAvatar.tsx'; + +export const meta = { + component: CircularProgressAvatar, + title: StoryConfig.CircularProgressAvatar.hierarchy, +}; + + + +export const Template = args => ; + +# Circular Progress Avatar + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +The Avatar with circular progress and badge. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `CircularProgressAvatar` component in your components as follows. + + diff --git a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx new file mode 100644 index 00000000..dc8f1f2a --- /dev/null +++ b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx @@ -0,0 +1,81 @@ +/** + * 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 {Badge, BadgeProps, CircularProgress, CircularProgressProps} from '@mui/material'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import Avatar, {AvatarProps} from '../Avatar'; +import Box from '../Box'; +import './circular-progress-avatar.scss'; + +export interface CircularProgressAvatarProps extends AvatarProps { + badgeOptions?: Omit; + circularProgressOptions?: Omit; + progress?: number; +} + +const COMPONENT_NAME: string = 'CircularProgressAvatar'; + +const CircularProgressAvatar: FC & WithWrapperProps = ( + props: CircularProgressAvatarProps, +): ReactElement => { + const {className, progress, badgeOptions, circularProgressOptions, ...rest} = props; + + const classes: string = clsx('oxygen-circular-progress-avatar', className); + + return ( + + + + + + + + ); +}; + +CircularProgressAvatar.displayName = composeComponentDisplayName(COMPONENT_NAME); +CircularProgressAvatar.muiName = COMPONENT_NAME; +CircularProgressAvatar.defaultProps = {}; + +export default CircularProgressAvatar; diff --git a/packages/react/src/components/CircularProgressAvatar/__tests__/CircularProgressAvatar.test.tsx b/packages/react/src/components/CircularProgressAvatar/__tests__/CircularProgressAvatar.test.tsx new file mode 100644 index 00000000..bd0ac64c --- /dev/null +++ b/packages/react/src/components/CircularProgressAvatar/__tests__/CircularProgressAvatar.test.tsx @@ -0,0 +1,32 @@ +/** + * 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 {render} from '@unit-testing'; +import CircularProgressAvatar from '../CircularProgressAvatar'; + +describe('CircularProgressAvatar', () => { + it('should render successfully', () => { + const {baseElement} = render(); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render(); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap b/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap new file mode 100644 index 00000000..5eea38f4 --- /dev/null +++ b/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap @@ -0,0 +1,79 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CircularProgressAvatar should match the snapshot 1`] = ` + +
+ +
+ +`; diff --git a/packages/react/src/components/CircularProgressAvatar/circular-progress-avatar.scss b/packages/react/src/components/CircularProgressAvatar/circular-progress-avatar.scss new file mode 100644 index 00000000..96795119 --- /dev/null +++ b/packages/react/src/components/CircularProgressAvatar/circular-progress-avatar.scss @@ -0,0 +1,47 @@ +/** + * 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-circular-progress-avatar { + padding: 1rem; + + .circularProfileProgress { + position: absolute; + top: -6px; + left: -6px; + z-index: 1; + + &.frame { + color: lightgrey; + z-index: 0; + } + } + + .avatar { + width: 80px; + height: 80px; + } + + .badge { + .MuiBadge-badge { + left: 50%; + border-radius: 3px; + padding: 0.5rem 1rem; + top: 70px; + } + } +} diff --git a/packages/react/src/components/CircularProgressAvatar/index.ts b/packages/react/src/components/CircularProgressAvatar/index.ts new file mode 100644 index 00000000..ddd5266f --- /dev/null +++ b/packages/react/src/components/CircularProgressAvatar/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 './CircularProgressAvatar'; +export type {CircularProgressAvatarProps} from './CircularProgressAvatar'; From d98d3f5462c2881c5a28301d1288eac29357b4eb Mon Sep 17 00:00:00 2001 From: savindi7 Date: Wed, 15 Feb 2023 20:50:34 +0530 Subject: [PATCH 2/5] chore(react): improve CircularProgressAvatar --- packages/react/.storybook/story-config.ts | 6 ++-- .../CircularProgressAvatar.stories.mdx | 10 ++++--- .../CircularProgressAvatar.tsx | 29 ++++++++++++------- .../circular-progress-avatar.scss | 9 +++--- 4 files changed, 33 insertions(+), 21 deletions(-) diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index a79b9ac7..7b996ddf 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -34,16 +34,15 @@ export type Stories = | 'ActionCard' | 'AppBar' | 'Avatar' - | 'CircularProgressAvatar' - | 'UserDropdownMenu' - | 'Header' | 'Box' | 'Button' + | 'CircularProgressAvatar' | 'ColorModeToggle' | 'Colors' | 'Divider' | 'Drawer' | 'Grid' + | 'Header' | 'IconButton' | 'Icons' | 'Image' @@ -56,6 +55,7 @@ export type Stories = | 'ListItemText' | 'Menu' | 'MenuItem' + | 'UserDropdownMenu' | 'SignIn' | 'TextField' | 'Toolbar' diff --git a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx index b3fac50e..7c1bae6c 100644 --- a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx +++ b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.stories.mdx @@ -25,11 +25,13 @@ The Avatar with circular progress and badge. {Template.bind({})} diff --git a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx index dc8f1f2a..6498ee19 100644 --- a/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx +++ b/packages/react/src/components/CircularProgressAvatar/CircularProgressAvatar.tsx @@ -25,9 +25,18 @@ import Avatar, {AvatarProps} from '../Avatar'; import Box from '../Box'; import './circular-progress-avatar.scss'; -export interface CircularProgressAvatarProps extends AvatarProps { +export interface CircularProgressAvatarProps extends Omit { + /** + * Props sent to the Avatar component. + */ + avatarOptions?: Omit; + /** + * Props sent to the Badge component. + */ badgeOptions?: Omit; - circularProgressOptions?: Omit; + /** + * Value prop sent to CircularProgress component. + */ progress?: number; } @@ -36,38 +45,38 @@ const COMPONENT_NAME: string = 'CircularProgressAvatar'; const CircularProgressAvatar: FC & WithWrapperProps = ( props: CircularProgressAvatarProps, ): ReactElement => { - const {className, progress, badgeOptions, circularProgressOptions, ...rest} = props; + const {className, progress, badgeOptions, avatarOptions, ...rest} = props; const classes: string = clsx('oxygen-circular-progress-avatar', className); return ( - + diff --git a/packages/react/src/components/CircularProgressAvatar/circular-progress-avatar.scss b/packages/react/src/components/CircularProgressAvatar/circular-progress-avatar.scss index 96795119..0b2d2757 100644 --- a/packages/react/src/components/CircularProgressAvatar/circular-progress-avatar.scss +++ b/packages/react/src/components/CircularProgressAvatar/circular-progress-avatar.scss @@ -19,24 +19,25 @@ .oxygen-circular-progress-avatar { padding: 1rem; - .circularProfileProgress { + .oxygen-circular-progress { position: absolute; top: -6px; left: -6px; z-index: 1; - + transform: scaleY(-1) rotate(90deg) !important; + &.frame { color: lightgrey; z-index: 0; } } - .avatar { + .oxygen-avatar { width: 80px; height: 80px; } - .badge { + .oxygen-badge { .MuiBadge-badge { left: 50%; border-radius: 3px; From 994b26af2e4eb028efc165debbe872c4a748eae4 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Wed, 15 Feb 2023 23:17:41 +0530 Subject: [PATCH 3/5] chore(react): remove whitespaces --- .../CircularProgressAvatar/circular-progress-avatar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/CircularProgressAvatar/circular-progress-avatar.scss b/packages/react/src/components/CircularProgressAvatar/circular-progress-avatar.scss index 0b2d2757..680e452a 100644 --- a/packages/react/src/components/CircularProgressAvatar/circular-progress-avatar.scss +++ b/packages/react/src/components/CircularProgressAvatar/circular-progress-avatar.scss @@ -25,7 +25,7 @@ left: -6px; z-index: 1; transform: scaleY(-1) rotate(90deg) !important; - + &.frame { color: lightgrey; z-index: 0; From 097a95d4542a60ff659dbeb131fc63b8fb4e0203 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Wed, 15 Feb 2023 23:51:59 +0530 Subject: [PATCH 4/5] chore(react): update tests --- .../__snapshots__/CircularProgressAvatar.test.tsx.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap b/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap index 5eea38f4..b1ea055f 100644 --- a/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap +++ b/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap @@ -8,10 +8,10 @@ exports[`CircularProgressAvatar should match the snapshot 1`] = ` role="presentation" >
From 1908b4307f5cc988068eaeb72b0b9e74abb70160 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Thu, 16 Feb 2023 00:02:06 +0530 Subject: [PATCH 5/5] chore(react): update test --- .../__snapshots__/CircularProgressAvatar.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap b/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap index b1ea055f..7560e677 100644 --- a/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap +++ b/packages/react/src/components/CircularProgressAvatar/__tests__/__snapshots__/CircularProgressAvatar.test.tsx.snap @@ -11,7 +11,7 @@ exports[`CircularProgressAvatar should match the snapshot 1`] = ` class="MuiBadge-root oxygen-badge MuiBadge-root css-1c32n2y-MuiBadge-root" >