diff --git a/packages/primitives/src/icons/chevron-down-16.svg b/packages/primitives/src/icons/chevron-down-16.svg index 6d9acef1..ff703c96 100644 --- a/packages/primitives/src/icons/chevron-down-16.svg +++ b/packages/primitives/src/icons/chevron-down-16.svg @@ -1,3 +1,21 @@ + + - + diff --git a/packages/primitives/src/icons/console-16.svg b/packages/primitives/src/icons/console-16.svg deleted file mode 100644 index f066b956..00000000 --- a/packages/primitives/src/icons/console-16.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/packages/primitives/src/icons/console-alt-16.svg b/packages/primitives/src/icons/console-alt-16.svg index fbe732e2..ea7932c8 100644 --- a/packages/primitives/src/icons/console-alt-16.svg +++ b/packages/primitives/src/icons/console-alt-16.svg @@ -1,3 +1,21 @@ + + + - + diff --git a/packages/primitives/src/icons/cresent-bright-16.svg b/packages/primitives/src/icons/cresent-bright-16.svg index b90ed086..d3c52bc4 100644 --- a/packages/primitives/src/icons/cresent-bright-16.svg +++ b/packages/primitives/src/icons/cresent-bright-16.svg @@ -1,15 +1,21 @@ - - - - - - - - - - - - - - - \ No newline at end of file + + + + + diff --git a/packages/primitives/src/icons/eclipse-16.svg b/packages/primitives/src/icons/eclipse-16.svg index 36e9cb62..0fa94801 100644 --- a/packages/primitives/src/icons/eclipse-16.svg +++ b/packages/primitives/src/icons/eclipse-16.svg @@ -1,15 +1,28 @@ - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + diff --git a/packages/primitives/src/icons/hamburger-16.svg b/packages/primitives/src/icons/hamburger-16.svg index 458b0a73..715578ca 100644 --- a/packages/primitives/src/icons/hamburger-16.svg +++ b/packages/primitives/src/icons/hamburger-16.svg @@ -1,4 +1,22 @@ + + - + \ No newline at end of file diff --git a/packages/primitives/src/icons/home-filled-16.svg b/packages/primitives/src/icons/home-filled-16.svg index 7f38de47..829b0bad 100644 --- a/packages/primitives/src/icons/home-filled-16.svg +++ b/packages/primitives/src/icons/home-filled-16.svg @@ -1,16 +1,34 @@ + + - - - - - - + + + + + + - - - + + + - + \ No newline at end of file diff --git a/packages/primitives/src/icons/home-outlined-16.svg b/packages/primitives/src/icons/home-outlined-16.svg index e73fe983..57094fee 100644 --- a/packages/primitives/src/icons/home-outlined-16.svg +++ b/packages/primitives/src/icons/home-outlined-16.svg @@ -1,16 +1,34 @@ + + - - - - - - + + + + + + - - - + + + - + \ No newline at end of file diff --git a/packages/primitives/src/icons/laguages-16.svg b/packages/primitives/src/icons/laguages-16.svg deleted file mode 100644 index b083ab7e..00000000 --- a/packages/primitives/src/icons/laguages-16.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/packages/primitives/src/icons/languages-16.svg b/packages/primitives/src/icons/languages-16.svg new file mode 100644 index 00000000..12c02103 --- /dev/null +++ b/packages/primitives/src/icons/languages-16.svg @@ -0,0 +1,21 @@ + + + + + diff --git a/packages/primitives/src/icons/lock-16.svg b/packages/primitives/src/icons/lock-16.svg index ebc42ee6..3b695a35 100644 --- a/packages/primitives/src/icons/lock-16.svg +++ b/packages/primitives/src/icons/lock-16.svg @@ -1,4 +1,22 @@ + + - + \ No newline at end of file diff --git a/packages/primitives/src/icons/logs-16.svg b/packages/primitives/src/icons/logs-16.svg new file mode 100644 index 00000000..10dd74de --- /dev/null +++ b/packages/primitives/src/icons/logs-16.svg @@ -0,0 +1,24 @@ + + + + + + + + diff --git a/packages/primitives/src/icons/power-16.svg b/packages/primitives/src/icons/power-16.svg index 0c330db9..571a88fd 100644 --- a/packages/primitives/src/icons/power-16.svg +++ b/packages/primitives/src/icons/power-16.svg @@ -1,11 +1,29 @@ + + - + - - - + + + - + \ No newline at end of file diff --git a/packages/primitives/src/icons/preferences-16.svg b/packages/primitives/src/icons/preferences-16.svg index 2da764ef..6348cec5 100644 --- a/packages/primitives/src/icons/preferences-16.svg +++ b/packages/primitives/src/icons/preferences-16.svg @@ -1,11 +1,29 @@ + + - + - - - + + + - + \ No newline at end of file diff --git a/packages/primitives/src/icons/sun-16.svg b/packages/primitives/src/icons/sun-16.svg index add90a75..96b146ef 100644 --- a/packages/primitives/src/icons/sun-16.svg +++ b/packages/primitives/src/icons/sun-16.svg @@ -1,15 +1,21 @@ - - - - - - - - - - - - - - - \ No newline at end of file + + + + + diff --git a/packages/primitives/src/icons/sun-contrast-16.svg b/packages/primitives/src/icons/sun-contrast-16.svg index 55f2c10e..2ff73578 100644 --- a/packages/primitives/src/icons/sun-contrast-16.svg +++ b/packages/primitives/src/icons/sun-contrast-16.svg @@ -1,15 +1,29 @@ - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + diff --git a/packages/react/.storybook/preview.tsx b/packages/react/.storybook/preview.tsx index bcdee1f3..474d2b2c 100644 --- a/packages/react/.storybook/preview.tsx +++ b/packages/react/.storybook/preview.tsx @@ -58,7 +58,7 @@ addParameters({ light: themes.light, normal: themes.normal, }, - layout: 'centered', + layout: 'fullscreen', controls: { expanded: true, sort: 'requiredFirst', diff --git a/packages/react/.storybook/static/assets/images/avatar-john.svg b/packages/react/.storybook/static/assets/images/avatar-john.svg new file mode 100644 index 00000000..368f34d8 --- /dev/null +++ b/packages/react/.storybook/static/assets/images/avatar-john.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 2e72b119..ab72f86d 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -32,6 +32,9 @@ enum StorybookCategories { export type Stories = | 'AppBar' + | 'Avatar' + | 'ButtonDropdownMenu' + | 'Header' | 'Box' | 'Button' | 'ColorModeToggle' @@ -39,12 +42,15 @@ export type Stories = | 'Grid' | 'IconButton' | 'Icons' + | 'Image' | 'Link' | 'List' | 'ListItem' | 'ListItemButton' | 'ListItemIcon' | 'ListItemText' + | 'Menu' + | 'MenuItem' | 'SignIn' | 'TextField' | 'Tooltip' @@ -71,7 +77,7 @@ export type StorybookConfig = Record< >; const StoryConfig: StorybookConfig = { - AppBar: { + Header: { story: { Overview: { design: { @@ -80,14 +86,23 @@ const StoryConfig: StorybookConfig = { }, }, }, - hierarchy: `${StorybookCategories.Surfaces}/AppBar`, + hierarchy: `${StorybookCategories.Navigation}/Header`, }, + AppBar: { + hierarchy: `${StorybookCategories.Surfaces}/App Bar`, + }, + Avatar: { + hierarchy: `${StorybookCategories.DataDisplay}/Avatar`, + }, Box: { hierarchy: `${StorybookCategories.Layout}/Box`, }, Button: { hierarchy: `${StorybookCategories.Inputs}/Button`, }, + ButtonDropdownMenu: { + hierarchy: `${StorybookCategories.Navigation}/Button Dropdown Menu`, + }, ColorModeToggle: { hierarchy: `${StorybookCategories.Theme}/Color Mode Toggle`, }, @@ -97,6 +112,9 @@ const StoryConfig: StorybookConfig = { Grid: { hierarchy: `${StorybookCategories.Layout}/Grid`, }, + Image: { + hierarchy: `${StorybookCategories.DataDisplay}/Image`, + }, IconButton: { hierarchy: `${StorybookCategories.Inputs}/Icon Button`, }, @@ -106,6 +124,12 @@ const StoryConfig: StorybookConfig = { Link: { hierarchy: `${StorybookCategories.Navigation}/Link`, }, + Menu: { + hierarchy: `${StorybookCategories.Navigation}/Menu`, + }, + MenuItem: { + hierarchy: `${StorybookCategories.Navigation}/Menu Item`, + }, List: { hierarchy: `${StorybookCategories.DataDisplay}/List`, }, diff --git a/packages/react/src/components/AppBar/AppBar.stories.mdx b/packages/react/src/components/AppBar/AppBar.stories.mdx index 52c5a945..22dffca3 100644 --- a/packages/react/src/components/AppBar/AppBar.stories.mdx +++ b/packages/react/src/components/AppBar/AppBar.stories.mdx @@ -17,8 +17,6 @@ export const Template = args => ; - [Overview](#overview) - [Props](#props) -- [Usage](#usage) -- [Variants](#variants) ## Overview @@ -27,7 +25,6 @@ The top App bar provides content and actions related to the current screen. It's {Template.bind({})} diff --git a/packages/react/src/components/AppBar/AppBar.tsx b/packages/react/src/components/AppBar/AppBar.tsx index d188c77f..19a475cd 100644 --- a/packages/react/src/components/AppBar/AppBar.tsx +++ b/packages/react/src/components/AppBar/AppBar.tsx @@ -22,7 +22,7 @@ import {FC, ReactElement} from 'react'; import {WithWrapperProps} from '../../models'; import {composeComponentDisplayName} from '../../utils'; -export interface AppBarProps extends MuiAppBarProps {} +export type AppBarProps = MuiAppBarProps; const COMPONENT_NAME: string = 'AppBar'; diff --git a/packages/react/src/components/AppBar/app-bar.scss b/packages/react/src/components/AppBar/app-bar.scss index 291bb06e..e69de29b 100644 --- a/packages/react/src/components/AppBar/app-bar.scss +++ b/packages/react/src/components/AppBar/app-bar.scss @@ -1,4 +0,0 @@ -.oxygen-button { - font-size: 1rem; - padding: 8px 16px; -} diff --git a/packages/react/src/components/Avatar/Avatar.stories.mdx b/packages/react/src/components/Avatar/Avatar.stories.mdx new file mode 100644 index 00000000..94430e84 --- /dev/null +++ b/packages/react/src/components/Avatar/Avatar.stories.mdx @@ -0,0 +1,38 @@ +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 Avatar from './Avatar.tsx'; + +export const meta = { + component: Avatar, + title: StoryConfig.Avatar.hierarchy, +}; + + + +export const Template = args => ; + +# Avatar + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Variants](#variants) + +## Overview + +The Avatar can be used to mainly display profile pictures of users and can be used in the App Nav, tables etc. + + + + {Template.bind({})} + + + +## Props + + diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx new file mode 100644 index 00000000..1da2aa86 --- /dev/null +++ b/packages/react/src/components/Avatar/Avatar.tsx @@ -0,0 +1,40 @@ +/** + * 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 MuiAvatar, {AvatarProps as MuiAvatarProps} from '@mui/material/Avatar'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type AvatarProps = MuiAvatarProps; + +const COMPONENT_NAME: string = 'Avatar'; + +const Avatar: FC & WithWrapperProps = (props: AvatarProps): ReactElement => { + const {className, ...rest} = props; + const classes: string = clsx('oxygen-ui-avatar', className); + + return ; +}; + +Avatar.displayName = composeComponentDisplayName(COMPONENT_NAME); +Avatar.muiName = COMPONENT_NAME; +Avatar.defaultProps = {}; + +export default Avatar; diff --git a/packages/react/src/components/Avatar/avatar.scss b/packages/react/src/components/Avatar/avatar.scss new file mode 100644 index 00000000..e69de29b diff --git a/packages/react/src/components/Avatar/index.ts b/packages/react/src/components/Avatar/index.ts new file mode 100644 index 00000000..e08a61e7 --- /dev/null +++ b/packages/react/src/components/Avatar/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 './Avatar'; +export type {AvatarProps} from './Avatar'; diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx index 0c3f1594..161ebfc3 100644 --- a/packages/react/src/components/Button/Button.tsx +++ b/packages/react/src/components/Button/Button.tsx @@ -22,7 +22,7 @@ import {FC, ReactElement} from 'react'; import {WithWrapperProps} from '../../models'; import {composeComponentDisplayName} from '../../utils'; -export interface ButtonProps extends MuiButtonProps {} +export type ButtonProps = MuiButtonProps; const COMPONENT_NAME: string = 'Button'; @@ -36,9 +36,5 @@ const Button: FC & WithWrapperProps = (props: ButtonProps): ReactEl Button.displayName = composeComponentDisplayName(COMPONENT_NAME); Button.muiName = COMPONENT_NAME; -Button.defaultProps = { - disableElevation: true, - disableRipple: true, -}; export default Button; diff --git a/packages/react/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/react/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap index cc8535a1..ad152cba 100644 --- a/packages/react/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/react/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap @@ -4,11 +4,15 @@ exports[`Button should match the snapshot 1`] = `
`; diff --git a/packages/react/src/components/Button/button.scss b/packages/react/src/components/Button/button.scss index 291bb06e..e69de29b 100644 --- a/packages/react/src/components/Button/button.scss +++ b/packages/react/src/components/Button/button.scss @@ -1,4 +0,0 @@ -.oxygen-button { - font-size: 1rem; - padding: 8px 16px; -} diff --git a/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.stories.mdx b/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.stories.mdx new file mode 100644 index 00000000..c36e6d44 --- /dev/null +++ b/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.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 ButtonDropdownMenu from './ButtonDropdownMenu.tsx'; +import MenuItem from '../MenuItem'; + +export const meta = { + component: ButtonDropdownMenu, + title: StoryConfig.ButtonDropdownMenu.hierarchy, +}; + + + +export const Template = args => ; + +# Button Dropdown Menu + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Use Button 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 `ButtonDropdownMenu` component in your components as follows. + + diff --git a/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.tsx b/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.tsx new file mode 100644 index 00000000..8969023c --- /dev/null +++ b/packages/react/src/components/ButtonDropdownMenu/ButtonDropdownMenu.tsx @@ -0,0 +1,214 @@ +/** + * 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 {Divider, ListItemAvatar, ListSubheader, Radio} from '@mui/material'; +import {capitalize} from '@mui/material/utils'; +import clsx from 'clsx'; +import {FC, MouseEvent, ReactElement, ReactNode, useState} from 'react'; +import {WithWrapperProps} from 'src/models'; +import {composeComponentDisplayName} from '../../utils'; +import Avatar from '../Avatar'; +import Button, {ButtonProps} from '../Button'; +import ListItem from '../ListItem'; +import ListItemIcon from '../ListItemIcon'; +import ListItemText from '../ListItemText'; +import Menu, {MenuProps} from '../Menu'; +import MenuItem from '../MenuItem'; +import './button-dropdown-menu.scss'; + +/** + * Interface for the Button Dropdown Menu component props. + */ +export interface ButtonDropdownMenuProps { + /** + * List item icon. + */ + actionIcon?: ReactNode; + /** + * List item button text. + */ + actionText?: string; + /** + * Props sent to the Button component; + */ + buttonProps?: Omit; + /** + * Props sent to the Menu component; + */ + menuProps?: Omit; + /** + * Current mode. + */ + mode?: string; + /** + * Array list of modes + */ + modes?: ModeListInterface[]; + /** + * Heading of the modes list. + */ + modesHeading?: string; + /** + * Callback function on list item action trigger. + */ + onActionTrigger?: () => void; + /** + * Callback function on mode change. + */ + onModeChange?: (mode: string) => void; + /** + * Callback function on navigation to logged user's profile. + */ + onUserProfileNavigation?: () => void; + /** + * Logged user information. + */ + user?: UserTemplate; +} + +/** + * Interface for the modes list. + */ +export interface ModeListInterface { + icon?: string | ReactElement; + name: string; +} + +/** + * Interface for the logged user template. + */ +export interface UserTemplate { + email?: string; + image?: string; + name?: string; +} + +const COMPONENT_NAME: string = 'UserDropdownMenu'; + +/** + * Button Dropdown Menu component. + */ +const ButtonDropdownMenu: FC & WithWrapperProps = ( + props: ButtonDropdownMenuProps & WithWrapperProps, +) => { + const { + buttonProps, + user, + modes, + mode, + onUserProfileNavigation, + modesHeading, + actionText, + actionIcon, + onModeChange, + onActionTrigger, + menuProps, + } = props; + + const [anchorEl, setAnchorEl] = useState(null); + + const handleModeChange = (selectedMode: string): void => { + onModeChange(selectedMode); + }; + + const onCloseMenu = (): void => { + setAnchorEl(null); + }; + + const handleUserProfileNavigation = (): void => { + onCloseMenu(); + onUserProfileNavigation(); + }; + + const handleActionTrigger = (): void => { + onCloseMenu(); + onActionTrigger(); + }; + + const openMenu: boolean = Boolean(anchorEl); + + const handleOpenUserMenu = (event: MouseEvent): void => { + setAnchorEl(event.currentTarget); + }; + + return ( +
+
+ ); +}; + +ButtonDropdownMenu.displayName = composeComponentDisplayName(COMPONENT_NAME); +ButtonDropdownMenu.muiName = COMPONENT_NAME; + +export default ButtonDropdownMenu; diff --git a/packages/react/src/components/ButtonDropdownMenu/__tests__/UserDropdownMenu.test.tsx b/packages/react/src/components/ButtonDropdownMenu/__tests__/UserDropdownMenu.test.tsx new file mode 100644 index 00000000..8e415901 --- /dev/null +++ b/packages/react/src/components/ButtonDropdownMenu/__tests__/UserDropdownMenu.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 ButtonDropdownMenu from '../ButtonDropdownMenu'; + +describe('ButtonDropdownMenu', () => { + 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/ButtonDropdownMenu/__tests__/__snapshots__/UserDropdownMenu.test.tsx.snap b/packages/react/src/components/ButtonDropdownMenu/__tests__/__snapshots__/UserDropdownMenu.test.tsx.snap new file mode 100644 index 00000000..a340c494 --- /dev/null +++ b/packages/react/src/components/ButtonDropdownMenu/__tests__/__snapshots__/UserDropdownMenu.test.tsx.snap @@ -0,0 +1,22 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ButtonDropdownMenu should match the snapshot 1`] = ` + +
+
+ +
+
+ +`; diff --git a/packages/react/src/components/ButtonDropdownMenu/button-dropdown-menu.scss b/packages/react/src/components/ButtonDropdownMenu/button-dropdown-menu.scss new file mode 100644 index 00000000..1fd64ce8 --- /dev/null +++ b/packages/react/src/components/ButtonDropdownMenu/button-dropdown-menu.scss @@ -0,0 +1,29 @@ +/** + * 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-button-dropdown-menu { + .dropdown-list-item { + &.clickable { + cursor: pointer; + } + } + + .dropdown-menu-item { + min-height: 50px; + } +} diff --git a/packages/react/src/components/ButtonDropdownMenu/index.ts b/packages/react/src/components/ButtonDropdownMenu/index.ts new file mode 100644 index 00000000..6d62dc25 --- /dev/null +++ b/packages/react/src/components/ButtonDropdownMenu/index.ts @@ -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. + */ + +export {default} from './ButtonDropdownMenu'; +export {ButtonDropdownMenuProps} from './ButtonDropdownMenu'; +export {ModeListInterface} from './ButtonDropdownMenu'; diff --git a/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx b/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx index ee586504..5e3aa567 100644 --- a/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx +++ b/packages/react/src/components/ColorModeToggle/ColorModeToggle.tsx @@ -23,7 +23,7 @@ import {FC, PropsWithChildren, ReactElement, SVGProps} from 'react'; import {WithWrapperProps} from '../../models'; import {composeComponentDisplayName} from '../../utils'; -export interface ColorModeToggleProps extends IconButtonProps {} +export type ColorModeToggleProps = IconButtonProps; const COMPONENT_NAME: string = 'ColorModeToggle'; diff --git a/packages/react/src/components/Grid/Grid.tsx b/packages/react/src/components/Grid/Grid.tsx index f6f2a7a8..e45e317c 100644 --- a/packages/react/src/components/Grid/Grid.tsx +++ b/packages/react/src/components/Grid/Grid.tsx @@ -22,7 +22,7 @@ import {FC, ReactElement} from 'react'; import {WithWrapperProps} from '../../models'; import {composeComponentDisplayName} from '../../utils'; -export interface GridProps extends MuiGridProps {} +export type GridProps = MuiGridProps; const COMPONENT_NAME: string = 'Grid'; diff --git a/packages/react/src/components/Header/Header.stories.mdx b/packages/react/src/components/Header/Header.stories.mdx new file mode 100644 index 00000000..54128386 --- /dev/null +++ b/packages/react/src/components/Header/Header.stories.mdx @@ -0,0 +1,77 @@ +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 Header from './Header.tsx'; +import {LanguagesIcon, LogsIcon, SunIcon, CresentBrightIcon} from '@oxygen-ui/react-icons'; + +export const meta = { + component: Header, + title: StoryConfig.Header.hierarchy, +}; + + + +export const Template = args =>
; + +# Header + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Variants](#variants) + +## Overview + +The Header provides content and actions related to the current screen. It's used for branding, screen titles, navigation, and actions. + + + , + mobile: logo, + }, + onClick: () => null, + title: 'OxygenUI', + }, + user: { + image: '/assets/images/avatar-john.svg', + name: 'Matthew', + email: 'matthew@wso2.com', + }, + modes: [ + { + name: 'light', + icon: + }, + { + name: 'dark', + icon: + } + ], + links: [ + { + children: 'Console', + startIcon: , + href: '/' + }, + { + children: 'Language', + startIcon: , + href: '/' + }, + ], + }} + > + {Template.bind({})} + + + +## Props + + diff --git a/packages/react/src/components/Header/Header.tsx b/packages/react/src/components/Header/Header.tsx new file mode 100644 index 00000000..abd1999e --- /dev/null +++ b/packages/react/src/components/Header/Header.tsx @@ -0,0 +1,197 @@ +/** + * 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 {Box, IconButton, Toolbar, Typography, 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'; +import clsx from 'clsx'; +import {FC, ReactElement, ReactNode} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './header.scss'; +import AppBar, {AppBarProps} from '../AppBar'; +import Avatar from '../Avatar'; +import Button, {ButtonProps} from '../Button'; +import ButtonDropdownMenu, {ModeListInterface} from '../ButtonDropdownMenu'; +import Link from '../Link'; + +/** + * Interface for the Header component props. + */ +export interface HeaderProps extends AppBarProps { + /** + * Brand information. + */ + brand?: BrandTemplate; + /** + * Is the left navigation bar activated. + */ + isLeftNavigationActive?: boolean; + /** + * Links available on the header. + */ + links?: Omit[]; + /** + * List of modes. + */ + modes?: ModeListInterface[]; + /** + * Function to handle left navigation bar button toggle. + */ + onLeftNavigationTrigger?: () => void; + /** + * Logged user information. + */ + user?: UserTemplate; +} + +/** + * Interface for the brand template. + */ +export interface BrandTemplate { + logo?: { + desktop?: ReactNode; + mobile?: ReactNode; + }; + onClick?: () => void; + 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; + + const theme: Theme = useTheme(); + const {mode, setMode} = useColorScheme(); + const isMobile: boolean = useMediaQuery(theme.breakpoints.down(theme.breakpoints.values.sm)); + + const classes: string = clsx( + 'oxygen-header', + { + mobile: isMobile, + }, + className, + ); + + const onModeChange = (selectedMode: Mode): void => { + setMode(selectedMode); + }; + + return ( + + + {isLeftNavigationActive && ( + + + + )} + {brand && ( + + {isMobile ? brand.logo.mobile ?? brand.logo.desktop : brand.logo.desktop} + + {brand.title} + + + )} + + <> + {children} + {links?.length > 0 && ( + + {links?.map((link: ButtonProps) => { + const {children: linkChildren, href, startIcon, ...linkProps} = link; + return ( + + ); + })} + + )} + + + + , + startIcon: ( + + {user?.name?.split('')[0]} + + ), + }} + modesHeading="Theme" + modes={modes} + onActionTrigger={(): void => null} + actionText="Log Out" + actionIcon={} + mode={mode} + onModeChange={onModeChange} + /> + + + + ); +}; + +Header.displayName = composeComponentDisplayName(COMPONENT_NAME); +Header.muiName = COMPONENT_NAME; + +export default Header; diff --git a/packages/react/src/components/Header/__tests__/Header.test.tsx b/packages/react/src/components/Header/__tests__/Header.test.tsx new file mode 100644 index 00000000..22aa7969 --- /dev/null +++ b/packages/react/src/components/Header/__tests__/Header.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 Header from '../Header'; + +describe('Header', () => { + 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/Header/__tests__/__snapshots__/Header.test.tsx.snap b/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap new file mode 100644 index 00000000..f0fac1db --- /dev/null +++ b/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap @@ -0,0 +1,79 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Header should match the snapshot 1`] = ` + +
+ +
+ +`; diff --git a/packages/react/src/components/Header/header.scss b/packages/react/src/components/Header/header.scss new file mode 100644 index 00000000..e4e7f3f5 --- /dev/null +++ b/packages/react/src/components/Header/header.scss @@ -0,0 +1,74 @@ +/** + * 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-header { + border-left: none; + border-right: none; + border-top: none; + + .menu-icon-button { + margin-right: 1rem; + } + + .logo-box { + display: flex; + align-items: center; + + .logo { + height: 40px; + display: flex; + margin-right: 0.5rem; + } + + &.with-link { + cursor: pointer; + } + } + + .nav-links-section { + flex: 1; + } + + .nav-links { + display: flex; + justify-content: end; + margin-right: 1rem; + + .link { + margin-right: 1rem; + } + } + + .dropdown-menu { + .image { + width: 2.2rem; + height: 2.2rem; + } + } + + &.mobile { + .menu-icon-button { + margin-right: 0.5rem; + } + + .nav-links, + .dropdown-menu { + display: none; + } + } +} diff --git a/packages/react/src/components/Header/index.ts b/packages/react/src/components/Header/index.ts new file mode 100644 index 00000000..df1e97bd --- /dev/null +++ b/packages/react/src/components/Header/index.ts @@ -0,0 +1,22 @@ +/** + * 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 './Header'; +export type {HeaderProps} from './Header'; +export type {BrandTemplate} from './Header'; +export type {UserTemplate} from './Header'; diff --git a/packages/react/src/components/Image/Image.stories.mdx b/packages/react/src/components/Image/Image.stories.mdx new file mode 100644 index 00000000..fd5e66ae --- /dev/null +++ b/packages/react/src/components/Image/Image.stories.mdx @@ -0,0 +1,49 @@ +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 Image from './Image.tsx'; + +export const meta = { + component: Image, + title: StoryConfig.Image.hierarchy, +}; + + + +export const Template = args => ; + +# Image + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Image. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Image` component in your components as follows. + + diff --git a/packages/react/src/components/Image/Image.tsx b/packages/react/src/components/Image/Image.tsx new file mode 100644 index 00000000..5b880918 --- /dev/null +++ b/packages/react/src/components/Image/Image.tsx @@ -0,0 +1,49 @@ +/** + * Copyright (c) 2022, 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 {Box, BoxProps} from '@mui/material'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export interface ImageProps extends BoxProps { + /** + * Alternative text for the image. + */ + alt: string; + /** + * Source of the image. + */ + src: string; +} + +const COMPONENT_NAME: string = 'Image'; + +const Image: FC & WithWrapperProps = (props: BoxProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-image', className); + + return ; +}; + +Image.displayName = composeComponentDisplayName(COMPONENT_NAME); +Image.muiName = COMPONENT_NAME; + +export default Image; diff --git a/packages/react/src/components/Image/image.scss b/packages/react/src/components/Image/image.scss new file mode 100644 index 00000000..5d5c8441 --- /dev/null +++ b/packages/react/src/components/Image/image.scss @@ -0,0 +1,19 @@ +/** + * 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-image {} diff --git a/packages/react/src/components/Image/index.ts b/packages/react/src/components/Image/index.ts new file mode 100644 index 00000000..b69f9b2a --- /dev/null +++ b/packages/react/src/components/Image/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 './Image'; +export type {ImageProps} from './Image'; diff --git a/packages/react/src/components/Link/Link.tsx b/packages/react/src/components/Link/Link.tsx index 2b0a7962..7be869cc 100644 --- a/packages/react/src/components/Link/Link.tsx +++ b/packages/react/src/components/Link/Link.tsx @@ -22,7 +22,7 @@ import {FC, ReactElement} from 'react'; import {WithWrapperProps} from '../../models'; import {composeComponentDisplayName} from '../../utils'; -export interface LinkProps extends MuiLinkProps {} +export type LinkProps = MuiLinkProps; const COMPONENT_NAME: string = 'Link'; diff --git a/packages/react/src/components/ListItemText/__tests__/__snapshots__/ListItemText.test.tsx.snap b/packages/react/src/components/ListItemText/__tests__/__snapshots__/ListItemText.test.tsx.snap index 6da2f6b2..a64e28ff 100644 --- a/packages/react/src/components/ListItemText/__tests__/__snapshots__/ListItemText.test.tsx.snap +++ b/packages/react/src/components/ListItemText/__tests__/__snapshots__/ListItemText.test.tsx.snap @@ -7,7 +7,7 @@ exports[`ListItemText should match the snapshot 1`] = ` class="MuiListItemText-root oxygen-list-item-text css-tlelie-MuiListItemText-root" > List Item Text diff --git a/packages/react/src/components/Menu/Menu.stories.mdx b/packages/react/src/components/Menu/Menu.stories.mdx new file mode 100644 index 00000000..d50b9d0f --- /dev/null +++ b/packages/react/src/components/Menu/Menu.stories.mdx @@ -0,0 +1,57 @@ +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 Menu from './Menu.tsx'; +import MenuItem from '../MenuItem'; + +export const meta = { + component: Menu, + title: StoryConfig.Menu.hierarchy, +}; + + + +export const Template = args => ; + +# Menu + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Menu. + + + Menu Item 1 Menu Item 2 }} + > + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Menu` component in your components as follows. + + + Menu Item 1 Menu Item 2 + + ); +}`} +/> diff --git a/packages/react/src/components/Menu/Menu.tsx b/packages/react/src/components/Menu/Menu.tsx new file mode 100644 index 00000000..ccb1f419 --- /dev/null +++ b/packages/react/src/components/Menu/Menu.tsx @@ -0,0 +1,40 @@ +/** + * 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 MuiMenu, {MenuProps as MuiMenuProps} from '@mui/material/Menu'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type MenuProps = MuiMenuProps; + +const COMPONENT_NAME: string = 'Menu'; + +const Menu: FC & WithWrapperProps = (props: MenuProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-menu', className); + + return ; +}; + +Menu.displayName = composeComponentDisplayName(COMPONENT_NAME); +Menu.muiName = COMPONENT_NAME; + +export default Menu; diff --git a/packages/react/src/components/Menu/index.ts b/packages/react/src/components/Menu/index.ts new file mode 100644 index 00000000..62930c15 --- /dev/null +++ b/packages/react/src/components/Menu/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 './Menu'; +export type {MenuProps} from './Menu'; diff --git a/packages/react/src/components/Menu/menu.scss b/packages/react/src/components/Menu/menu.scss new file mode 100644 index 00000000..fe3fb57b --- /dev/null +++ b/packages/react/src/components/Menu/menu.scss @@ -0,0 +1,19 @@ +/** + * 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-menu {} diff --git a/packages/react/src/components/MenuItem/MenuItem.stories.mdx b/packages/react/src/components/MenuItem/MenuItem.stories.mdx new file mode 100644 index 00000000..7a74eb4d --- /dev/null +++ b/packages/react/src/components/MenuItem/MenuItem.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 MenuItem from './MenuItem.tsx'; + +export const meta = { + component: MenuItem, + title: StoryConfig.MenuItem.hierarchy, +}; + + + +export const Template = args => ; + +# Menu Item + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +A Menu Item. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `MenuItem` component in your components as follows. + + + Sample Menu Item + + ); +}`} +/> diff --git a/packages/react/src/components/MenuItem/MenuItem.tsx b/packages/react/src/components/MenuItem/MenuItem.tsx new file mode 100644 index 00000000..fa8cfefd --- /dev/null +++ b/packages/react/src/components/MenuItem/MenuItem.tsx @@ -0,0 +1,40 @@ +/** + * 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 MuiMenuItem, {MenuItemProps as MuiMenuItemProps} from '@mui/material/MenuItem'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type MenuItemProps = MuiMenuItemProps; + +const COMPONENT_NAME: string = 'MenuItem'; + +const MenuItem: FC & WithWrapperProps = (props: MenuItemProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-menu-item', className); + + return ; +}; + +MenuItem.displayName = composeComponentDisplayName(COMPONENT_NAME); +MenuItem.muiName = COMPONENT_NAME; + +export default MenuItem; diff --git a/packages/react/src/components/MenuItem/__tests__/MenuItem.test.tsx b/packages/react/src/components/MenuItem/__tests__/MenuItem.test.tsx new file mode 100644 index 00000000..e032998b --- /dev/null +++ b/packages/react/src/components/MenuItem/__tests__/MenuItem.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 MenuItem from '../MenuItem'; + +describe('MenuItem', () => { + 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/MenuItem/__tests__/__snapshots__/MenuItem.test.tsx.snap b/packages/react/src/components/MenuItem/__tests__/__snapshots__/MenuItem.test.tsx.snap new file mode 100644 index 00000000..ad70a979 --- /dev/null +++ b/packages/react/src/components/MenuItem/__tests__/__snapshots__/MenuItem.test.tsx.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MenuItem should match the snapshot 1`] = ` + +
+ +
+ +`; diff --git a/packages/react/src/components/MenuItem/index.tsx b/packages/react/src/components/MenuItem/index.tsx new file mode 100644 index 00000000..f6cf76db --- /dev/null +++ b/packages/react/src/components/MenuItem/index.tsx @@ -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 './MenuItem'; +export type {MenuItemProps} from './MenuItem'; diff --git a/packages/react/src/components/MenuItem/menu-item.scss b/packages/react/src/components/MenuItem/menu-item.scss new file mode 100644 index 00000000..716bb55c --- /dev/null +++ b/packages/react/src/components/MenuItem/menu-item.scss @@ -0,0 +1,19 @@ +/** + * 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-menu-item {} \ No newline at end of file diff --git a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap index 10b09c2d..e6c73652 100644 --- a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap +++ b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap @@ -26,7 +26,7 @@ exports[`SignIn should match the snapshot 1`] = ` class="oxygen-text-field" >