From f17e1626701b507818a53a2f33c143a6404f719e Mon Sep 17 00:00:00 2001 From: Brion Date: Mon, 13 Feb 2023 17:22:25 +0530 Subject: [PATCH] feat(react): add `Drawer` component --- packages/react/.storybook/story-config.ts | 4 + .../src/components/Drawer/Drawer.stories.mdx | 84 +++++++++++++++++++ .../react/src/components/Drawer/Drawer.tsx | 42 ++++++++++ .../Drawer/__tests__/Drawer.test.tsx | 32 +++++++ .../react/src/components/Drawer/drawer.scss | 21 +++++ packages/react/src/components/Drawer/index.ts | 20 +++++ packages/react/src/components/index.ts | 3 + 7 files changed, 206 insertions(+) create mode 100644 packages/react/src/components/Drawer/Drawer.stories.mdx create mode 100644 packages/react/src/components/Drawer/Drawer.tsx create mode 100644 packages/react/src/components/Drawer/__tests__/Drawer.test.tsx create mode 100644 packages/react/src/components/Drawer/drawer.scss create mode 100644 packages/react/src/components/Drawer/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 2e72b119..f7ac034b 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -36,6 +36,7 @@ export type Stories = | 'Button' | 'ColorModeToggle' | 'Colors' + | 'Drawer' | 'Grid' | 'IconButton' | 'Icons' @@ -94,6 +95,9 @@ const StoryConfig: StorybookConfig = { Colors: { hierarchy: `${StorybookCategories.Foundations}/Colors`, }, + Drawer: { + hierarchy: `${StorybookCategories.Navigation}/Drawer`, + }, Grid: { hierarchy: `${StorybookCategories.Layout}/Grid`, }, diff --git a/packages/react/src/components/Drawer/Drawer.stories.mdx b/packages/react/src/components/Drawer/Drawer.stories.mdx new file mode 100644 index 00000000..86f1d4b0 --- /dev/null +++ b/packages/react/src/components/Drawer/Drawer.stories.mdx @@ -0,0 +1,84 @@ +import {Fragment} from 'react'; +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import {useArgs} from '@storybook/client-api'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Drawer from './Drawer.tsx'; +import Button from '../Button/Button.tsx'; +import List from '../List/List.tsx'; +import ListItem from '../ListItem/ListItem.tsx'; +import ListItemText from '../ListItemText/ListItemText.tsx'; + +export const meta = { + component: Drawer, + title: StoryConfig.Drawer.hierarchy, +}; + + + +export const Template = args => { + const [{open, anchor}, updateArgs] = useArgs(); + return ( +
+ {(['left', 'right', 'top', 'bottom']).map((anchor) => ( + + + updateArgs({ open: !open, anchor: anchor })} + {...args} + > + + Drawer Item 01 + Drawer Item 02 + Drawer Item 03 + + + + ))} +
+ ); +}; + +# Drawer + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Navigation drawers provide access to destinations in your app. Side sheets are surfaces containing supplementary content +that are anchored to the left or right edge of the screen. + + + {Template.bind({})} + + +## Props + + + +## Usage + +Import and use the `Drawer` component in your components as follows. + + + {/* List */} + + ); +}`} +/> diff --git a/packages/react/src/components/Drawer/Drawer.tsx b/packages/react/src/components/Drawer/Drawer.tsx new file mode 100644 index 00000000..ab433edc --- /dev/null +++ b/packages/react/src/components/Drawer/Drawer.tsx @@ -0,0 +1,42 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import MuiDrawer, {DrawerProps as MuiDrawerProps} from '@mui/material/Drawer'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './drawer.scss'; + +export type DrawerProps = MuiDrawerProps; + +const COMPONENT_NAME: string = 'Drawer'; + +const Drawer: FC & WithWrapperProps = (props: DrawerProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-drawer', className); + + return ; +}; + +Drawer.displayName = composeComponentDisplayName(COMPONENT_NAME); +Drawer.muiName = COMPONENT_NAME; +Drawer.defaultProps = {}; + +export default Drawer; diff --git a/packages/react/src/components/Drawer/__tests__/Drawer.test.tsx b/packages/react/src/components/Drawer/__tests__/Drawer.test.tsx new file mode 100644 index 00000000..a3ccda6f --- /dev/null +++ b/packages/react/src/components/Drawer/__tests__/Drawer.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 Drawer from '../Drawer'; + +describe('Drawer', () => { + 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/Drawer/drawer.scss b/packages/react/src/components/Drawer/drawer.scss new file mode 100644 index 00000000..6cc758ef --- /dev/null +++ b/packages/react/src/components/Drawer/drawer.scss @@ -0,0 +1,21 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +.oxygen-drawer { + /* Add Styles */ +} diff --git a/packages/react/src/components/Drawer/index.ts b/packages/react/src/components/Drawer/index.ts new file mode 100644 index 00000000..ab2ce346 --- /dev/null +++ b/packages/react/src/components/Drawer/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 './Drawer'; +export type {DrawerProps} from './Drawer'; diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 827733ea..34fd2a86 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -28,6 +28,9 @@ export * from './Button'; export {default as ColorModeToggle} from './ColorModeToggle'; export * from './ColorModeToggle'; +export {default as Drawer} from './Drawer'; +export * from './Drawer'; + export {default as Grid} from './Grid'; export * from './Grid';