From 4a7facb36b91659705cae568be5df5fd581a2d64 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Tue, 14 Feb 2023 09:09:53 +0530 Subject: [PATCH 1/2] feat(react): add `ListItemAvatar`component --- packages/react/.storybook/story-config.ts | 4 ++ .../ListItemAvatar/ListItemAvatar.stories.mdx | 54 +++++++++++++++++++ .../ListItemAvatar/ListItemAvatar.tsx | 42 +++++++++++++++ .../__tests__/ListItemAvatar.test.tsx | 41 ++++++++++++++ .../ListItemAvatar.test.tsx.snap | 17 ++++++ .../src/components/ListItemAvatar/index.ts | 20 +++++++ .../ListItemAvatar/list-item-avatar.scss | 21 ++++++++ 7 files changed, 199 insertions(+) create mode 100644 packages/react/src/components/ListItemAvatar/ListItemAvatar.stories.mdx create mode 100644 packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx create mode 100644 packages/react/src/components/ListItemAvatar/__tests__/ListItemAvatar.test.tsx create mode 100644 packages/react/src/components/ListItemAvatar/__tests__/__snapshots__/ListItemAvatar.test.tsx.snap create mode 100644 packages/react/src/components/ListItemAvatar/index.ts create mode 100644 packages/react/src/components/ListItemAvatar/list-item-avatar.scss diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index c1a1b91f..c711346f 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -48,6 +48,7 @@ export type Stories = | 'Link' | 'List' | 'ListItem' + | 'ListItemAvatar' | 'ListItemButton' | 'ListItemIcon' | 'ListItemText' @@ -145,6 +146,9 @@ const StoryConfig: StorybookConfig = { ListItem: { hierarchy: `${StorybookCategories.DataDisplay}/List Item`, }, + ListItemAvatar: { + hierarchy: `${StorybookCategories.DataDisplay}/List Item Avatar`, + }, ListItemButton: { hierarchy: `${StorybookCategories.DataDisplay}/List Item Button`, }, diff --git a/packages/react/src/components/ListItemAvatar/ListItemAvatar.stories.mdx b/packages/react/src/components/ListItemAvatar/ListItemAvatar.stories.mdx new file mode 100644 index 00000000..d6eed37b --- /dev/null +++ b/packages/react/src/components/ListItemAvatar/ListItemAvatar.stories.mdx @@ -0,0 +1,54 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import {withDesign} from '../../../.storybook/utils.ts'; +import ListItemAvatar from './ListItemAvatar.tsx'; +import Avatar from '../Avatar'; + +export const meta = { + component: ListItemAvatar, + title: StoryConfig.ListItemAvatar.hierarchy, +}; + + + +export const Template = args => ; + +# List Item Avatar + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +`ListItemAvatar` is a wrapper to apply List styles to an Avatar. + + + U}}> + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `ListItemAvatar` component in your components as follows. + + + {/* List Item Avatar Content */} + + ); +}`} +/> diff --git a/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx b/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx new file mode 100644 index 00000000..63867edb --- /dev/null +++ b/packages/react/src/components/ListItemAvatar/ListItemAvatar.tsx @@ -0,0 +1,42 @@ +/** + * 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 MuiListItemAvatar, {ListItemAvatarProps as MuiListItemAvatarProps} from '@mui/material/ListItemAvatar'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './list-item-avatar.scss'; + +export type ListItemAvatarProps = MuiListItemAvatarProps; + +const COMPONENT_NAME: string = 'ListItemAvatar'; + +const ListItemAvatar: FC & WithWrapperProps = (props: ListItemAvatarProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-list-item-avatar', className); + + return ; +}; + +ListItemAvatar.displayName = composeComponentDisplayName(COMPONENT_NAME); +ListItemAvatar.muiName = COMPONENT_NAME; +ListItemAvatar.defaultProps = {}; + +export default ListItemAvatar; diff --git a/packages/react/src/components/ListItemAvatar/__tests__/ListItemAvatar.test.tsx b/packages/react/src/components/ListItemAvatar/__tests__/ListItemAvatar.test.tsx new file mode 100644 index 00000000..6839b3b5 --- /dev/null +++ b/packages/react/src/components/ListItemAvatar/__tests__/ListItemAvatar.test.tsx @@ -0,0 +1,41 @@ +/** + * 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 Avatar from '../../Avatar'; +import ListItemAvatar from '../ListItemAvatar'; + +describe('ListItemAvatar', () => { + it('should render successfully', () => { + const {baseElement} = render( + + U + , + ); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render( + + U + , + ); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/ListItemAvatar/__tests__/__snapshots__/ListItemAvatar.test.tsx.snap b/packages/react/src/components/ListItemAvatar/__tests__/__snapshots__/ListItemAvatar.test.tsx.snap new file mode 100644 index 00000000..c217aa01 --- /dev/null +++ b/packages/react/src/components/ListItemAvatar/__tests__/__snapshots__/ListItemAvatar.test.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ListItemAvatar should match the snapshot 1`] = ` + +
+
+
+ U +
+
+
+ +`; diff --git a/packages/react/src/components/ListItemAvatar/index.ts b/packages/react/src/components/ListItemAvatar/index.ts new file mode 100644 index 00000000..c8793bc9 --- /dev/null +++ b/packages/react/src/components/ListItemAvatar/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 './ListItemAvatar'; +export type {ListItemAvatarProps} from './ListItemAvatar'; diff --git a/packages/react/src/components/ListItemAvatar/list-item-avatar.scss b/packages/react/src/components/ListItemAvatar/list-item-avatar.scss new file mode 100644 index 00000000..4da49d53 --- /dev/null +++ b/packages/react/src/components/ListItemAvatar/list-item-avatar.scss @@ -0,0 +1,21 @@ +/** + * 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-list-item-avatar { + /* Add Styles */ + } From 412c4a4fabb35d3bdbb9f8d8a9473f7ff65067cc Mon Sep 17 00:00:00 2001 From: savindi7 Date: Tue, 14 Feb 2023 11:58:11 +0530 Subject: [PATCH 2/2] chore(react): fix lint issue --- .../src/components/ListItemAvatar/list-item-avatar.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/ListItemAvatar/list-item-avatar.scss b/packages/react/src/components/ListItemAvatar/list-item-avatar.scss index 4da49d53..19f62af1 100644 --- a/packages/react/src/components/ListItemAvatar/list-item-avatar.scss +++ b/packages/react/src/components/ListItemAvatar/list-item-avatar.scss @@ -16,6 +16,6 @@ * under the License. */ - .oxygen-list-item-avatar { - /* Add Styles */ - } +.oxygen-list-item-avatar { + /* Add Styles */ +}