diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index ab72f86d..ae792ec6 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -53,6 +53,7 @@ export type Stories = | 'MenuItem' | 'SignIn' | 'TextField' + | 'Toolbar' | 'Tooltip' | 'Typeset' | 'Typography' @@ -151,6 +152,9 @@ const StoryConfig: StorybookConfig = { TextField: { hierarchy: `${StorybookCategories.Inputs}/Text Field`, }, + Toolbar: { + hierarchy: `${StorybookCategories.Surfaces}/Toolbar`, + }, Tooltip: { hierarchy: `${StorybookCategories.DataDisplay}/Tooltip`, }, diff --git a/packages/react/src/components/Toolbar/Toolbar.stories.mdx b/packages/react/src/components/Toolbar/Toolbar.stories.mdx new file mode 100644 index 00000000..b96b98de --- /dev/null +++ b/packages/react/src/components/Toolbar/Toolbar.stories.mdx @@ -0,0 +1,77 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import {HamburgerIcon} from '@oxygen-ui/react-icons'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Toolbar from './Toolbar.tsx'; +import IconButton from '../IconButton/IconButton.tsx'; +import Typography from '../Typography/Typography.tsx'; + +export const meta = { + component: Toolbar, + title: StoryConfig.Toolbar.hierarchy, +}; + + + +export const Template = args => ; + +# Toolbar + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Toolbar is a flex container, allowing flex item properites to be used. + + + + + + + + Toolbar + + + ) + }}> + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Toolbar` component in your components as follows. + + + {/* Toolbar Items */} + + ); +}`} +/> diff --git a/packages/react/src/components/Toolbar/Toolbar.tsx b/packages/react/src/components/Toolbar/Toolbar.tsx new file mode 100644 index 00000000..df497bce --- /dev/null +++ b/packages/react/src/components/Toolbar/Toolbar.tsx @@ -0,0 +1,41 @@ +/** + * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * + * WSO2 LLC. licenses this file to you under the Apache License, + * Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, + * software distributed under the License is distributed on an + * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY + * KIND, either express or implied. See the License for the + * specific language governing permissions and limitations + * under the License. + */ + +import MuiToolbar, {ToolbarProps as MuiToolbarProps} from '@mui/material/Toolbar'; +import clsx from 'clsx'; +import {FC, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; + +export type ToolbarProps = MuiToolbarProps; + +const COMPONENT_NAME: string = 'Toolbar'; + +const Toolbar: FC & WithWrapperProps = (props: ToolbarProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-toolbar', className); + + return ; +}; + +Toolbar.displayName = composeComponentDisplayName(COMPONENT_NAME); +Toolbar.muiName = COMPONENT_NAME; +Toolbar.defaultProps = {}; + +export default Toolbar; diff --git a/packages/react/src/components/Toolbar/__tests__/Toolbar.test.tsx b/packages/react/src/components/Toolbar/__tests__/Toolbar.test.tsx new file mode 100644 index 00000000..546f2897 --- /dev/null +++ b/packages/react/src/components/Toolbar/__tests__/Toolbar.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 Toolbar from '../Toolbar'; + +describe('Toolbar', () => { + 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/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap new file mode 100644 index 00000000..e4ab37a7 --- /dev/null +++ b/packages/react/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Toolbar should match the snapshot 1`] = ` + +
+
+
+ +`; diff --git a/packages/react/src/components/Toolbar/index.ts b/packages/react/src/components/Toolbar/index.ts new file mode 100644 index 00000000..600abb7c --- /dev/null +++ b/packages/react/src/components/Toolbar/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 './Toolbar'; +export type {ToolbarProps} from './Toolbar'; diff --git a/packages/react/src/components/Toolbar/toolbar.scss b/packages/react/src/components/Toolbar/toolbar.scss new file mode 100644 index 00000000..b33e7d81 --- /dev/null +++ b/packages/react/src/components/Toolbar/toolbar.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-toolbar {} diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 827733ea..477cf165 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -55,5 +55,8 @@ export * from './SignIn'; export {default as TextField} from './TextField'; export * from './TextField'; +export {default as Toolbar} from './Toolbar'; +export * from './Toolbar'; + export {default as Tooltip} from './Tooltip'; export * from './Tooltip'; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index d604dd3a..253daf31 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -21,7 +21,6 @@ export * from './theme'; export { Alert, AlertTitle, - Toolbar, Paper, ToggleButton, ToggleButtonGroup,