feat(react): add Toolbar component

packages/react/.storybook/story-config.ts

@@ -47,6 +47,7 @@ export type Stories =
   | 'ListItemText'
   | 'SignIn'
   | 'TextField'
+  | 'Toolbar'
   | 'Tooltip'
   | 'Typeset'
   | 'Typography'
@@ -127,6 +128,9 @@ const StoryConfig: StorybookConfig = {
   TextField: {
     hierarchy: `${StorybookCategories.Inputs}/Text Field`,
   },
+  Toolbar: {
+    hierarchy: `${StorybookCategories.Surfaces}/Toolbar`,
+  },
   Tooltip: {
     hierarchy: `${StorybookCategories.DataDisplay}/Tooltip`,
   },

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,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <Toolbar {...args} />;
+
+# Toolbar
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Toolbar is a flex container, allowing flex item properites to be used.
+
+<Canvas>
+  <Story name="Overview" args={{
+    children: (
+      <Toolbar>
+        <IconButton
+          size="large"
+          edge="start"
+          color="inherit"
+          aria-label="open drawer"
+          sx={{ mr: 2 }}
+        >
+          <HamburgerIcon />
+        </IconButton>
+        <Typography
+          variant="h6"
+          noWrap
+          component="div"
+          sx={{ flexGrow: 1, display: { xs: 'none', sm: 'block' } }}
+        >
+          Toolbar
+        </Typography>
+      </Toolbar>
+    )
+  }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Toolbar` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Toolbar from '@oxygen-ui/react/Toolbar';\n
+function Demo() {
+  return (
+    <Toolbar>
+      {/* Toolbar Items */}
+    </Toolbar>
+  );
+}`}
+/>

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<ToolbarProps> & WithWrapperProps = (props: ToolbarProps): ReactElement => {
+  const {className, ...rest} = props;
+
+  const classes: string = clsx('oxygen-toolbar', className);
+
+  return <MuiToolbar className={classes} {...rest} />;
+};
+
+Toolbar.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Toolbar.muiName = COMPONENT_NAME;
+Toolbar.defaultProps = {};
+
+export default Toolbar;

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(<Toolbar />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Toolbar />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

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`] = `
+<body>
+  <div>
+    <div
+      class="MuiToolbar-root MuiToolbar-gutters MuiToolbar-regular oxygen-toolbar css-hyum1k-MuiToolbar-root"
+    />
+  </div>
+</body>
+`;

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';

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 {}

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';

packages/react/src/index.ts

@@ -21,7 +21,6 @@ export * from './theme';
 export {
   Alert,
   AlertTitle,
-  Toolbar,
   Paper,
   ToggleButton,
   ToggleButtonGroup,