From 46643beb91fec7ec6c080ee348a8603857618b3c Mon Sep 17 00:00:00 2001 From: savindi7 Date: Tue, 14 Feb 2023 14:42:15 +0530 Subject: [PATCH 1/2] feat(react): add `LeftNavigation` component --- .../LeftNavigation/LeftNavigation.tsx | 76 +++++++++++++++++++ .../__tests__/LeftNavigation.test.tsx | 27 +++++++ .../src/components/LeftNavigation/index.ts | 20 +++++ .../LeftNavigation/left-navigation.scss | 34 +++++++++ .../LeftNavigationItem/LeftNavigationItem.tsx | 62 +++++++++++++++ .../__tests__/LeftNavigationItem.test.tsx | 27 +++++++ .../components/LeftNavigationItem/index.ts | 20 +++++ .../left-navigation-item.scss | 60 +++++++++++++++ 8 files changed, 326 insertions(+) create mode 100644 packages/react/src/components/LeftNavigation/LeftNavigation.tsx create mode 100644 packages/react/src/components/LeftNavigation/__tests__/LeftNavigation.test.tsx create mode 100644 packages/react/src/components/LeftNavigation/index.ts create mode 100644 packages/react/src/components/LeftNavigation/left-navigation.scss create mode 100644 packages/react/src/components/LeftNavigationItem/LeftNavigationItem.tsx create mode 100644 packages/react/src/components/LeftNavigationItem/__tests__/LeftNavigationItem.test.tsx create mode 100644 packages/react/src/components/LeftNavigationItem/index.ts create mode 100644 packages/react/src/components/LeftNavigationItem/left-navigation-item.scss diff --git a/packages/react/src/components/LeftNavigation/LeftNavigation.tsx b/packages/react/src/components/LeftNavigation/LeftNavigation.tsx new file mode 100644 index 00000000..9961329b --- /dev/null +++ b/packages/react/src/components/LeftNavigation/LeftNavigation.tsx @@ -0,0 +1,76 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import clsx from 'clsx'; +import {FC, isValidElement, ReactElement} from 'react'; +import './left-navigation.scss'; +import {MuiWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import Box, {BoxProps} from '../Box'; +import LeftNavigationItem, {LeftNavigationItemProps} from '../LeftNavigationItem'; +import List from '../List'; +import Tooltip from '../Tooltip'; + +export interface LeftNavigationProps extends BoxProps { + listItems?: LeftNavigationItemProps[] | ReactElement; + open?: boolean; +} +const COMPONENT_NAME: string = 'LeftNavigation'; + +const LeftNavigation: FC & MuiWrapperProps = (props: LeftNavigationProps): ReactElement => { + const {className, open, listItems, ...rest} = props; + const classes: string = clsx( + 'oxygen-left-navigation', + { + expanded: open, + }, + className, + ); + + return ( + + {isValidElement(listItems) ? ( + listItems + ) : ( + + {listItems?.map((item: LeftNavigationItemProps) => { + const {label, onClick, selected, icon, ...itemProps} = item; + + return ( + + + + ); + })} + + )} + + ); +}; + +LeftNavigation.displayName = composeComponentDisplayName(COMPONENT_NAME); +LeftNavigation.muiName = COMPONENT_NAME; + +export default LeftNavigation; diff --git a/packages/react/src/components/LeftNavigation/__tests__/LeftNavigation.test.tsx b/packages/react/src/components/LeftNavigation/__tests__/LeftNavigation.test.tsx new file mode 100644 index 00000000..3c58366d --- /dev/null +++ b/packages/react/src/components/LeftNavigation/__tests__/LeftNavigation.test.tsx @@ -0,0 +1,27 @@ +/** + * 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 LeftNavigation from '../LeftNavigation'; + +describe('LeftNavigation', () => { + it('should render successfully', () => { + const {baseElement} = render(); + expect(baseElement).toBeTruthy(); + }); +}); diff --git a/packages/react/src/components/LeftNavigation/index.ts b/packages/react/src/components/LeftNavigation/index.ts new file mode 100644 index 00000000..92efa5a4 --- /dev/null +++ b/packages/react/src/components/LeftNavigation/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 './LeftNavigation'; +export type {LeftNavigationProps} from './LeftNavigation'; diff --git a/packages/react/src/components/LeftNavigation/left-navigation.scss b/packages/react/src/components/LeftNavigation/left-navigation.scss new file mode 100644 index 00000000..06c7543f --- /dev/null +++ b/packages/react/src/components/LeftNavigation/left-navigation.scss @@ -0,0 +1,34 @@ +/** + * 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-left-navigation { + padding: 2em 0; + background-color: #465867; + display: flex; + overflow: hidden; + flex-direction: column; + max-width: 64px; + transition: all 0.5s; + white-space: nowrap; + height: 100vh; + + &.expanded { + width: auto; + max-width: 250px; + } +} diff --git a/packages/react/src/components/LeftNavigationItem/LeftNavigationItem.tsx b/packages/react/src/components/LeftNavigationItem/LeftNavigationItem.tsx new file mode 100644 index 00000000..c0244bc3 --- /dev/null +++ b/packages/react/src/components/LeftNavigationItem/LeftNavigationItem.tsx @@ -0,0 +1,62 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import clsx from 'clsx'; +import {FC, ReactElement, ReactNode} from 'react'; +import {MuiWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import ListItemButton, {ListItemButtonProps} from '../ListItemButton'; +import ListItemIcon from '../ListItemIcon'; +import ListItemText from '../ListItemText'; +import './left-navigation-item.scss'; + +export interface LeftNavigationItemProps extends ListItemButtonProps { + icon?: ReactNode; + iconSelected?: ReactNode; + label?: ReactNode; + onClick?: () => void; + open?: boolean; + selected?: boolean; +} + +const COMPONENT_NAME: string = 'LeftNavigationItem'; + +const LeftNavigationItem: FC & MuiWrapperProps = ( + props: LeftNavigationItemProps, +): ReactElement => { + const {className, icon, iconSelected, label, onClick, selected, open, ...rest} = props; + const classes: string = clsx( + 'oxygen-left-navigation-item', + { + expanded: open, + }, + className, + ); + + return ( + + {selected ? iconSelected ?? icon : icon} + {label} + + ); +}; + +LeftNavigationItem.displayName = composeComponentDisplayName(COMPONENT_NAME); +LeftNavigationItem.muiName = COMPONENT_NAME; + +export default LeftNavigationItem; diff --git a/packages/react/src/components/LeftNavigationItem/__tests__/LeftNavigationItem.test.tsx b/packages/react/src/components/LeftNavigationItem/__tests__/LeftNavigationItem.test.tsx new file mode 100644 index 00000000..274f6fb1 --- /dev/null +++ b/packages/react/src/components/LeftNavigationItem/__tests__/LeftNavigationItem.test.tsx @@ -0,0 +1,27 @@ +/** + * 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 LeftNavigationItem from '../LeftNavigationItem'; + +describe('LeftNavigationItem', () => { + it('should render successfully', () => { + const {baseElement} = render(); + expect(baseElement).toBeTruthy(); + }); +}); diff --git a/packages/react/src/components/LeftNavigationItem/index.ts b/packages/react/src/components/LeftNavigationItem/index.ts new file mode 100644 index 00000000..b40a0989 --- /dev/null +++ b/packages/react/src/components/LeftNavigationItem/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 './LeftNavigationItem'; +export type {LeftNavigationItemProps} from './LeftNavigationItem'; diff --git a/packages/react/src/components/LeftNavigationItem/left-navigation-item.scss b/packages/react/src/components/LeftNavigationItem/left-navigation-item.scss new file mode 100644 index 00000000..02abe763 --- /dev/null +++ b/packages/react/src/components/LeftNavigationItem/left-navigation-item.scss @@ -0,0 +1,60 @@ +/** + * 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-left-navigation-item { + transition: all 0.3s; + margin-left: 8px; + margin-right: 8px; + border-radius: 6px; + justify-content: center; + + .MuiListItemIcon-root { + display: flex; + justify-content: center; + min-width: 20px; + } + + .MuiListItemText-root { + display: none; + color: #fff; + } + + &.expanded { + .MuiListItemText-root { + display: flex; + margin: 0 0.7rem; + } + } + + &.Mui-selected { + background-color: #fff; + + .MuiListItemText-root { + color: #465867; + } + } + + &.Mui-selected:hover { + text-decoration: none; + background-color: #fff; + } +} + +.oxygen-left-nav-item:hover { + text-decoration: none; +} From 051701e5355a2c359e6600a6473ac3e8756f7e7d Mon Sep 17 00:00:00 2001 From: savindi7 Date: Tue, 14 Feb 2023 21:34:12 +0530 Subject: [PATCH 2/2] feat(react): add `LeftNavigationMobile` component --- .../LeftNavigationMobile.tsx | 170 ++++++++++++++++++ .../components/LeftNavigationMobile/index.ts | 20 +++ .../left-navigation-mobile.scss | 73 ++++++++ 3 files changed, 263 insertions(+) create mode 100644 packages/react/src/components/LeftNavigationMobile/LeftNavigationMobile.tsx create mode 100644 packages/react/src/components/LeftNavigationMobile/index.ts create mode 100644 packages/react/src/components/LeftNavigationMobile/left-navigation-mobile.scss diff --git a/packages/react/src/components/LeftNavigationMobile/LeftNavigationMobile.tsx b/packages/react/src/components/LeftNavigationMobile/LeftNavigationMobile.tsx new file mode 100644 index 00000000..419532e7 --- /dev/null +++ b/packages/react/src/components/LeftNavigationMobile/LeftNavigationMobile.tsx @@ -0,0 +1,170 @@ +/** + * 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 SendIcon from '@mui/icons-material/Send'; +import { + Box, + capitalize, + Divider, + Drawer, + DrawerProps, + List, + ListItemButton, + ListItemIcon, + ListItemText, + ListSubheader, + Radio, + Typography, +} from '@mui/material'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import Avatar from '../Avatar'; +import './left-navigation-mobile.scss'; +import MenuItem from '../MenuItem'; +import {ModeList} from '../UserDropdownMenu'; + +export interface LeftNavigationMobileProps extends DrawerProps { + avatarUrl?: string; + mode?: string; + modes?: ModeList[]; + modesHeading?: string; + onModeChange?: (mode: string) => void; + open?: boolean; + openDrawerCallback?: (arg) => void; +} + +const COMPONENT_NAME: string = 'LeftNavResponsive'; + +const LeftNavigationMobile: FC & WithWrapperProps = ( + props: LeftNavigationMobileProps, +): ReactElement => { + const {className, avatarUrl, openDrawerCallback, modes, modesHeading, mode, onModeChange, open, ...rest} = props; + + const handleModeChange = (selectedMode: string): void => { + onModeChange(selectedMode); + }; + + return ( + + + + + Matthew + matthew@wso2.com + + + + + {/* TODO: Replace with component. */} + + Menu + + } + > + + + + + + + + + + + + + + + + + + + + + + + + Apps + + } + > + + + + {' '} + + + + + + + + {/* TODO: Replace with component. */} + + Menu + + } + > + {modes?.length > 0 && ( + <> + + {modesHeading} + {modes?.map((theme: ModeList) => { + const {name, icon} = theme; + return ( + handleModeChange(name)}> + {icon} + + handleModeChange(name)} + value={name} + name="radio-buttons" + inputProps={{'aria-label': `mode-label-${name}`}} + /> + + ); + })} + + )} + + + + ); +}; + +LeftNavigationMobile.displayName = composeComponentDisplayName(COMPONENT_NAME); +LeftNavigationMobile.muiName = COMPONENT_NAME; + +export default LeftNavigationMobile; diff --git a/packages/react/src/components/LeftNavigationMobile/index.ts b/packages/react/src/components/LeftNavigationMobile/index.ts new file mode 100644 index 00000000..b87ecc68 --- /dev/null +++ b/packages/react/src/components/LeftNavigationMobile/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 './LeftNavigationMobile'; +export type {LeftNavigationMobileProps} from './LeftNavigationMobile'; diff --git a/packages/react/src/components/LeftNavigationMobile/left-navigation-mobile.scss b/packages/react/src/components/LeftNavigationMobile/left-navigation-mobile.scss new file mode 100644 index 00000000..403b8282 --- /dev/null +++ b/packages/react/src/components/LeftNavigationMobile/left-navigation-mobile.scss @@ -0,0 +1,73 @@ +//TODO: Remove unnecessary styles. +//TODO: Remove mixins. + +@mixin sideMenuBox { + display: flex; + justify-content: left; + padding: 1em 1.5em; + align-items: center; + + .list-header { + font-size: 1rem; + padding: 0 0; + } + + .list-item, .list-item-button { + @include listItem; + + .list-item-icon { + min-width: 45px ; + color: #a9a9a9; + } + } +} + +.oxygen-ui-drawer { + hr { + width: 80%; + } + .MuiBackdrop-root { + opacity: 0 !important; + } + .MuiPaper-root { + .sideMenu-profile-box{ + @include sideMenuBox; + .sideMenu-profile-text { + font-size: 1rem; + padding: 1em 1em; + } + } + + .sideMenu-settings-box { + @include sideMenuBox; + } + + .sideMenu-apps-box { + @include sideMenuBox; + color: #ff7300; + svg { + color: #ff7300; + } + } + + .sideMenu-theme-box { + @include sideMenuBox; + .radio-items-list{ + cursor: pointer; + .list-item-text { + min-width: 10rem; + flex: none; + } + } + } + + .sideMenu-LogOut-box { + @include sideMenuBox; + } + +} +} + + + +