From 998612f41cb5c3f7c504037b9fabebbe426b4a50 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Mon, 13 Feb 2023 18:12:41 +0530 Subject: [PATCH 1/6] chore(react): fix component name --- .../components/ButtonDropdownMenu/ButtonDropdownMenu.tsx | 9 +++++++-- .../__snapshots__/UserDropdownMenu.test.tsx.snap | 1 - packages/react/src/components/Header/Header.tsx | 2 +- .../Header/__tests__/__snapshots__/Header.test.tsx.snap | 3 +-- 4 files changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.tsx b/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.tsx index 8969023c..66c21180 100644 --- a/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.tsx +++ b/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.tsx @@ -98,7 +98,7 @@ export interface UserTemplate { name?: string; } -const COMPONENT_NAME: string = 'UserDropdownMenu'; +const COMPONENT_NAME: string = 'ButtonDropdownMenu'; /** * Button Dropdown Menu component. @@ -148,7 +148,12 @@ const ButtonDropdownMenu: FC & WithWrapperProps = ( return (
- -
- - -`; diff --git a/packages/react/src/components/Header/Header.stories.mdx b/packages/react/src/components/Header/Header.stories.mdx index 54128386..cce8367a 100644 --- a/packages/react/src/components/Header/Header.stories.mdx +++ b/packages/react/src/components/Header/Header.stories.mdx @@ -19,7 +19,6 @@ export const Template = args =>
; - [Overview](#overview) - [Props](#props) - [Usage](#usage) -- [Variants](#variants) ## Overview @@ -75,3 +74,14 @@ The Header provides content and actions related to the current screen. It's used ## Props + +## Usage + +Import and use the `Header` component in your components as follows. + + diff --git a/packages/react/src/components/Header/Header.tsx b/packages/react/src/components/Header/Header.tsx index e73e4e0d..82d3b52a 100644 --- a/packages/react/src/components/Header/Header.tsx +++ b/packages/react/src/components/Header/Header.tsx @@ -16,7 +16,7 @@ * under the License. */ -import {Box, IconButton, Toolbar, Typography, useMediaQuery} from '@mui/material'; +import {useMediaQuery} from '@mui/material'; import {useColorScheme, useTheme, Theme} from '@mui/material/styles'; import {Mode} from '@mui/system/cssVars/useCurrentColorScheme'; import {ChevronDownIcon, HamburgerIcon, PowerIcon} from '@oxygen-ui/react-icons'; @@ -27,13 +27,14 @@ import {composeComponentDisplayName} from '../../utils'; import './header.scss'; import AppBar, {AppBarProps} from '../AppBar'; import Avatar from '../Avatar'; +import Box from '../Box'; import Button, {ButtonProps} from '../Button'; -import ButtonDropdownMenu, {ModeListInterface} from '../ButtonDropdownMenu'; +import IconButton from '../IconButton'; import Link from '../Link'; +import Toolbar from '../Toolbar'; +import Typography from '../Typography'; +import UserDropdownMenu, {ModeListInterface, UserTemplate} from '../UserDropdownMenu'; -/** - * Interface for the Header component props. - */ export interface HeaderProps extends AppBarProps { /** * Brand information. @@ -61,32 +62,32 @@ export interface HeaderProps extends AppBarProps { user?: UserTemplate; } -/** - * Interface for the brand template. - */ export interface BrandTemplate { + /** + * Logo for the brand template. + */ logo?: { + /** + * Desktop logo for the brand template. + */ desktop?: ReactNode; + /** + * Mobile logo for the brand template. + */ mobile?: ReactNode; }; + /** + * Function on clicking on the brand logo and name. + */ onClick?: () => void; + /** + * Title of the brand, portal name or company. + */ title?: ReactNode; } -/** - * Interface for the logged user template. - */ -export interface UserTemplate { - email?: string; - image?: string; - name?: string; -} - const COMPONENT_NAME: string = 'Header'; -/** - * Header component. - */ const Header: FC & WithWrapperProps = (props: HeaderProps): ReactElement => { const {className, children, isLeftNavigationActive, brand, user, links, modes, onLeftNavigationTrigger, ...rest} = props; @@ -126,16 +127,15 @@ const Header: FC & WithWrapperProps = (props: HeaderProps): ReactEl {brand && ( {isMobile ? brand.logo.mobile ?? brand.logo.desktop : brand.logo.desktop} - + {brand.title} @@ -165,9 +165,9 @@ const Header: FC & WithWrapperProps = (props: HeaderProps): ReactEl - , diff --git a/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap b/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap index 859abb9e..5726c746 100644 --- a/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap +++ b/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap @@ -8,68 +8,66 @@ exports[`Header should match the snapshot 1`] = ` role="banner" >
-
- -
+
+ + + + + +
diff --git a/packages/react/src/components/Header/header.scss b/packages/react/src/components/Header/header.scss index e4e7f3f5..8fcb2aa1 100644 --- a/packages/react/src/components/Header/header.scss +++ b/packages/react/src/components/Header/header.scss @@ -25,6 +25,12 @@ margin-right: 1rem; } + .portal-name { + font-weight: 500; + font-size: 1.25rem; + line-height: 1.6; + } + .logo-box { display: flex; align-items: center; @@ -37,6 +43,7 @@ &.with-link { cursor: pointer; + text-decoration: none; } } diff --git a/packages/react/src/components/Header/index.ts b/packages/react/src/components/Header/index.ts index df1e97bd..64096448 100644 --- a/packages/react/src/components/Header/index.ts +++ b/packages/react/src/components/Header/index.ts @@ -19,4 +19,3 @@ export {default} from './Header'; export type {HeaderProps} from './Header'; export type {BrandTemplate} from './Header'; -export type {UserTemplate} from './Header'; diff --git a/packages/react/src/components/MenuItem/MenuItem.stories.mdx b/packages/react/src/components/MenuItem/MenuItem.stories.mdx index 7a74eb4d..0bb5b649 100644 --- a/packages/react/src/components/MenuItem/MenuItem.stories.mdx +++ b/packages/react/src/components/MenuItem/MenuItem.stories.mdx @@ -2,6 +2,7 @@ import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; import dedent from 'ts-dedent'; import StoryConfig from '../../../.storybook/story-config.ts'; import MenuItem from './MenuItem.tsx'; +import Menu from '../Menu'; export const meta = { component: MenuItem, @@ -10,7 +11,13 @@ export const meta = { -export const Template = args => ; +export const Template = (args) => { + return ( + + + + ) +}; # Menu Item @@ -23,7 +30,7 @@ export const Template = args => ; A Menu Item. - + {Template.bind({})} diff --git a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.stories.mdx b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.stories.mdx new file mode 100644 index 00000000..8a51368c --- /dev/null +++ b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.stories.mdx @@ -0,0 +1,45 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import UserDropdownMenu from './UserDropdownMenu.tsx'; +import MenuItem from '../MenuItem'; + +export const meta = { + component: UserDropdownMenu, + title: StoryConfig.UserDropdownMenu.hierarchy, +}; + + + +export const Template = args => ; + +# User Dropdown Menu + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Use User Dropdown Menu to create a button with a dropdown menu for navigation, actions and to display information. + + + Sample Menu Item}}> + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `UserDropdownMenu` component in your components as follows. + + diff --git a/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.tsx b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx similarity index 80% rename from packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.tsx rename to packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx index 66c21180..1d2cdea9 100644 --- a/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.tsx +++ b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx @@ -29,12 +29,12 @@ import ListItemIcon from '../ListItemIcon'; import ListItemText from '../ListItemText'; import Menu, {MenuProps} from '../Menu'; import MenuItem from '../MenuItem'; -import './button-dropdown-menu.scss'; +import './user-dropdown-menu.scss'; /** * Interface for the Button Dropdown Menu component props. */ -export interface ButtonDropdownMenuProps { +export interface UserDropdownMenuProps extends Omit { /** * List item icon. */ @@ -43,14 +43,6 @@ export interface ButtonDropdownMenuProps { * List item button text. */ actionText?: string; - /** - * Props sent to the Button component; - */ - buttonProps?: Omit; - /** - * Props sent to the Menu component; - */ - menuProps?: Omit; /** * Current mode. */ @@ -75,39 +67,51 @@ export interface ButtonDropdownMenuProps { * Callback function on navigation to logged user's profile. */ onUserProfileNavigation?: () => void; + /** + * Props sent to the menu trigger or Button component; + */ + triggerOptions?: Omit; /** * Logged user information. */ user?: UserTemplate; } -/** - * Interface for the modes list. - */ export interface ModeListInterface { + /** + * Icon of the mode. + */ icon?: string | ReactElement; + /** + * Display name of the mode. + */ name: string; } -/** - * Interface for the logged user template. - */ export interface UserTemplate { + /** + * Email of logged user. + */ email?: string; + /** + * Image link of logged user. + */ image?: string; + /** + * Display name of logged user. + */ name?: string; } -const COMPONENT_NAME: string = 'ButtonDropdownMenu'; +const COMPONENT_NAME: string = 'UserDropdownMenu'; -/** - * Button Dropdown Menu component. - */ -const ButtonDropdownMenu: FC & WithWrapperProps = ( - props: ButtonDropdownMenuProps & WithWrapperProps, +const UserDropdownMenu: FC & WithWrapperProps = ( + props: UserDropdownMenuProps & WithWrapperProps, ) => { const { - buttonProps, + className, + children, + triggerOptions, user, modes, mode, @@ -117,11 +121,15 @@ const ButtonDropdownMenu: FC & WithWrapperProps = ( actionIcon, onModeChange, onActionTrigger, - menuProps, + ...rest } = props; + const classes: string = clsx('oxygen-user-dropdown-menu', className); + const [anchorEl, setAnchorEl] = useState(null); + const openMenu: boolean = Boolean(anchorEl); + const handleModeChange = (selectedMode: string): void => { onModeChange(selectedMode); }; @@ -132,41 +140,43 @@ const ButtonDropdownMenu: FC & WithWrapperProps = ( const handleUserProfileNavigation = (): void => { onCloseMenu(); - onUserProfileNavigation(); + if (onUserProfileNavigation) { + onUserProfileNavigation(); + } }; const handleActionTrigger = (): void => { onCloseMenu(); - onActionTrigger(); + if (onActionTrigger) { + onActionTrigger(); + } }; - const openMenu: boolean = Boolean(anchorEl); - const handleOpenUserMenu = (event: MouseEvent): void => { setAnchorEl(event.currentTarget); }; return ( -
+ <>
+ ); }; -ButtonDropdownMenu.displayName = composeComponentDisplayName(COMPONENT_NAME); -ButtonDropdownMenu.muiName = COMPONENT_NAME; +UserDropdownMenu.displayName = composeComponentDisplayName(COMPONENT_NAME); +UserDropdownMenu.muiName = COMPONENT_NAME; -export default ButtonDropdownMenu; +export default UserDropdownMenu; diff --git a/packages/react/src/components/ButtonDropdownMenu/__tests__/UserDropdownMenu.test.tsx b/packages/react/src/components/UserDropdownMenu/__tests__/UserDropdownMenu.test.tsx similarity index 81% rename from packages/react/src/components/ButtonDropdownMenu/__tests__/UserDropdownMenu.test.tsx rename to packages/react/src/components/UserDropdownMenu/__tests__/UserDropdownMenu.test.tsx index 8e415901..51bd1759 100644 --- a/packages/react/src/components/ButtonDropdownMenu/__tests__/UserDropdownMenu.test.tsx +++ b/packages/react/src/components/UserDropdownMenu/__tests__/UserDropdownMenu.test.tsx @@ -17,16 +17,16 @@ */ import {render} from '@unit-testing'; -import ButtonDropdownMenu from '../ButtonDropdownMenu'; +import UserDropdownMenu from '../UserDropdownMenu'; -describe('ButtonDropdownMenu', () => { +describe('UserDropdownMenu', () => { it('should render successfully', () => { - const {baseElement} = render(); + const {baseElement} = render(); expect(baseElement).toBeTruthy(); }); it('should match the snapshot', () => { - const {baseElement} = render(); + const {baseElement} = render(); expect(baseElement).toMatchSnapshot(); }); }); diff --git a/packages/react/src/components/UserDropdownMenu/__tests__/__snapshots__/UserDropdownMenu.test.tsx.snap b/packages/react/src/components/UserDropdownMenu/__tests__/__snapshots__/UserDropdownMenu.test.tsx.snap new file mode 100644 index 00000000..090ac689 --- /dev/null +++ b/packages/react/src/components/UserDropdownMenu/__tests__/__snapshots__/UserDropdownMenu.test.tsx.snap @@ -0,0 +1,19 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`UserDropdownMenu should match the snapshot 1`] = ` + +
+ +
+ +`; diff --git a/packages/react/src/components/ButtonDropdownMenu/index.ts b/packages/react/src/components/UserDropdownMenu/index.ts similarity index 76% rename from packages/react/src/components/ButtonDropdownMenu/index.ts rename to packages/react/src/components/UserDropdownMenu/index.ts index 6d62dc25..62161f74 100644 --- a/packages/react/src/components/ButtonDropdownMenu/index.ts +++ b/packages/react/src/components/UserDropdownMenu/index.ts @@ -16,6 +16,7 @@ * under the License. */ -export {default} from './ButtonDropdownMenu'; -export {ButtonDropdownMenuProps} from './ButtonDropdownMenu'; -export {ModeListInterface} from './ButtonDropdownMenu'; +export {default} from './UserDropdownMenu'; +export {UserDropdownMenuProps} from './UserDropdownMenu'; +export {ModeListInterface} from './UserDropdownMenu'; +export {UserTemplate} from './UserDropdownMenu'; diff --git a/packages/react/src/components/ButtonDropdownMenu/button-dropdown-menu.scss b/packages/react/src/components/UserDropdownMenu/user-dropdown-menu.scss similarity index 86% rename from packages/react/src/components/ButtonDropdownMenu/button-dropdown-menu.scss rename to packages/react/src/components/UserDropdownMenu/user-dropdown-menu.scss index 62b0da66..1bbf54a9 100644 --- a/packages/react/src/components/ButtonDropdownMenu/button-dropdown-menu.scss +++ b/packages/react/src/components/UserDropdownMenu/user-dropdown-menu.scss @@ -16,12 +16,12 @@ * under the License. */ -.oxygen-button-dropdown-menu { - .dropdown-list-item { - &.clickable { - cursor: pointer; +.oxygen-user-dropdown-menu { + .dropdown-list-item { + &.clickable { + cursor: pointer; + } } - } .dropdown-menu-item { min-height: 50px; From 022deaf0d96268e5227fb852f74d08e9ea7ce8da Mon Sep 17 00:00:00 2001 From: savindi7 Date: Tue, 14 Feb 2023 08:20:02 +0530 Subject: [PATCH 3/6] chore(react): fix lint issues --- .../src/components/UserDropdownMenu/user-dropdown-menu.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/UserDropdownMenu/user-dropdown-menu.scss b/packages/react/src/components/UserDropdownMenu/user-dropdown-menu.scss index 1bbf54a9..d28e687a 100644 --- a/packages/react/src/components/UserDropdownMenu/user-dropdown-menu.scss +++ b/packages/react/src/components/UserDropdownMenu/user-dropdown-menu.scss @@ -23,7 +23,7 @@ } } - .dropdown-menu-item { - min-height: 50px; - } + .dropdown-menu-item { + min-height: 50px; + } } From a78bb8496ced1aee32fee65501376830d0ca5f99 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Tue, 14 Feb 2023 08:37:38 +0530 Subject: [PATCH 4/6] chore(react): fix lint issues --- .../UserDropdownMenu/user-dropdown-menu.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/react/src/components/UserDropdownMenu/user-dropdown-menu.scss b/packages/react/src/components/UserDropdownMenu/user-dropdown-menu.scss index d28e687a..b278d069 100644 --- a/packages/react/src/components/UserDropdownMenu/user-dropdown-menu.scss +++ b/packages/react/src/components/UserDropdownMenu/user-dropdown-menu.scss @@ -17,13 +17,13 @@ */ .oxygen-user-dropdown-menu { - .dropdown-list-item { - &.clickable { - cursor: pointer; - } + .dropdown-list-item { + &.clickable { + cursor: pointer; } + } - .dropdown-menu-item { - min-height: 50px; - } + .dropdown-menu-item { + min-height: 50px; + } } From 8afb14e385519b313ece84de24ffdad2c64e3a00 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Tue, 14 Feb 2023 08:41:19 +0530 Subject: [PATCH 5/6] chore(react): import wrapped Divider --- .../react/src/components/UserDropdownMenu/UserDropdownMenu.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx index 1d2cdea9..b590e522 100644 --- a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx +++ b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx @@ -16,7 +16,7 @@ * under the License. */ -import {Divider, ListItemAvatar, ListSubheader, Radio} from '@mui/material'; +import {ListItemAvatar, ListSubheader, Radio} from '@mui/material'; import {capitalize} from '@mui/material/utils'; import clsx from 'clsx'; import {FC, MouseEvent, ReactElement, ReactNode, useState} from 'react'; @@ -24,6 +24,7 @@ import {WithWrapperProps} from 'src/models'; import {composeComponentDisplayName} from '../../utils'; import Avatar from '../Avatar'; import Button, {ButtonProps} from '../Button'; +import Divider from '../Divider'; import ListItem from '../ListItem'; import ListItemIcon from '../ListItemIcon'; import ListItemText from '../ListItemText'; From 59365a5711b8bf4b43fb857ef2b95c8446611b76 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Tue, 14 Feb 2023 11:16:13 +0530 Subject: [PATCH 6/6] chore(react): rename interfaces --- packages/react/src/components/Header/Header.tsx | 4 ++-- .../react/src/components/MenuItem/MenuItem.stories.mdx | 10 +++++----- .../components/UserDropdownMenu/UserDropdownMenu.tsx | 6 +++--- .../react/src/components/UserDropdownMenu/index.ts | 6 +++--- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react/src/components/Header/Header.tsx b/packages/react/src/components/Header/Header.tsx index 82d3b52a..906db3ad 100644 --- a/packages/react/src/components/Header/Header.tsx +++ b/packages/react/src/components/Header/Header.tsx @@ -33,7 +33,7 @@ import IconButton from '../IconButton'; import Link from '../Link'; import Toolbar from '../Toolbar'; import Typography from '../Typography'; -import UserDropdownMenu, {ModeListInterface, UserTemplate} from '../UserDropdownMenu'; +import UserDropdownMenu, {ModeList, UserTemplate} from '../UserDropdownMenu'; export interface HeaderProps extends AppBarProps { /** @@ -51,7 +51,7 @@ export interface HeaderProps extends AppBarProps { /** * List of modes. */ - modes?: ModeListInterface[]; + modes?: ModeList[]; /** * Function to handle left navigation bar button toggle. */ diff --git a/packages/react/src/components/MenuItem/MenuItem.stories.mdx b/packages/react/src/components/MenuItem/MenuItem.stories.mdx index 0bb5b649..db50fd95 100644 --- a/packages/react/src/components/MenuItem/MenuItem.stories.mdx +++ b/packages/react/src/components/MenuItem/MenuItem.stories.mdx @@ -12,11 +12,11 @@ export const meta = { export const Template = (args) => { - return ( - - - - ) + return ( + + + + ) }; # Menu Item diff --git a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx index b590e522..979cdb45 100644 --- a/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx +++ b/packages/react/src/components/UserDropdownMenu/UserDropdownMenu.tsx @@ -51,7 +51,7 @@ export interface UserDropdownMenuProps extends Omit & WithWrapperProps = ( <> {modesHeading} - {modes?.map((theme: ModeListInterface) => { + {modes?.map((theme: ModeList) => { const {name, icon} = theme; return ( handleModeChange(name)}> diff --git a/packages/react/src/components/UserDropdownMenu/index.ts b/packages/react/src/components/UserDropdownMenu/index.ts index 62161f74..c15e0cce 100644 --- a/packages/react/src/components/UserDropdownMenu/index.ts +++ b/packages/react/src/components/UserDropdownMenu/index.ts @@ -17,6 +17,6 @@ */ export {default} from './UserDropdownMenu'; -export {UserDropdownMenuProps} from './UserDropdownMenu'; -export {ModeListInterface} from './UserDropdownMenu'; -export {UserTemplate} from './UserDropdownMenu'; +export type {UserDropdownMenuProps} from './UserDropdownMenu'; +export type {ModeList} from './UserDropdownMenu'; +export type {UserTemplate} from './UserDropdownMenu';