From 2d0814946c8ef49e1729af524de2fb19a3ec139c Mon Sep 17 00:00:00 2001 From: JayaShakthi97 Date: Thu, 9 Mar 2023 17:38:05 +0530 Subject: [PATCH] feat(react): add `Tabs` component --- packages/react/.storybook/story-config.ts | 4 + .../src/components/Tabs/Tabs.stories.mdx | 86 +++++++++++++++++++ packages/react/src/components/Tabs/Tabs.tsx | 52 +++++++++++ .../components/Tabs/__test__/Tabs.test.tsx | 32 +++++++ .../__test__/__snapshots__/Tabs.test.tsx.snap | 32 +++++++ packages/react/src/components/Tabs/index.ts | 20 +++++ packages/react/src/components/Tabs/tabs.scss | 21 +++++ 7 files changed, 247 insertions(+) create mode 100644 packages/react/src/components/Tabs/Tabs.stories.mdx create mode 100644 packages/react/src/components/Tabs/Tabs.tsx create mode 100644 packages/react/src/components/Tabs/__test__/Tabs.test.tsx create mode 100644 packages/react/src/components/Tabs/__test__/__snapshots__/Tabs.test.tsx.snap create mode 100644 packages/react/src/components/Tabs/index.ts create mode 100644 packages/react/src/components/Tabs/tabs.scss diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 871dcad0..794da63c 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -79,6 +79,7 @@ export type Stories = | 'SignIn' | 'Stepper' | 'Tab' + | 'Tabs' | 'TextField' | 'Toolbar' | 'Tooltip' @@ -252,6 +253,9 @@ const StoryConfig: StorybookConfig = { Tab: { hierarchy: `${StorybookCategories.Navigation}/Tab`, }, + Tabs: { + hierarchy: `${StorybookCategories.Navigation}/Tabs`, + }, TextField: { hierarchy: `${StorybookCategories.Inputs}/Text Field`, }, diff --git a/packages/react/src/components/Tabs/Tabs.stories.mdx b/packages/react/src/components/Tabs/Tabs.stories.mdx new file mode 100644 index 00000000..e704f57a --- /dev/null +++ b/packages/react/src/components/Tabs/Tabs.stories.mdx @@ -0,0 +1,86 @@ +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 Tabs from './Tabs.tsx'; +import Tab from '../Tab'; + +export const meta = { + component: Tabs, + title: StoryConfig.Tabs.hierarchy, +}; + + + +export const Template = args => { + const [{value}, updateArgs] = useArgs(); + const handleChange = (event, newValue) => { + updateArgs({value: newValue}); + }; + return ( + + + + + + + + ); +}; + +# Tabs + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Variants](#variants) + +## Overview + +Tabs component can be used to implement navigation between different views or sections at the same level of hierarchy. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Tabs` component in your components as follows. + + + + + + + + + ); +}`} +/> + +## Variants + +### Scrollable + +Variation that makes the tabs header scrollable based on the viewport width. + + + + {Template.bind({})} + + diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx new file mode 100644 index 00000000..a51fd4a9 --- /dev/null +++ b/packages/react/src/components/Tabs/Tabs.tsx @@ -0,0 +1,52 @@ +/** + * 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 MuiTabs, {TabsProps as MuiTabsProps} from '@mui/material/Tabs'; +import clsx from 'clsx'; +import {ElementType, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import Box from '../Box'; +import Divider from '../Divider'; +import './tabs.scss'; + +export type TabsProps = { + component?: C; +} & Omit, 'component'>; + +const COMPONENT_NAME: string = 'Tabs'; + +const Tabs: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: TabsProps, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-tabs', className); + + return ( + + + + + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +Tabs.displayName = composeComponentDisplayName(COMPONENT_NAME); +Tabs.muiName = COMPONENT_NAME; + +export default Tabs; diff --git a/packages/react/src/components/Tabs/__test__/Tabs.test.tsx b/packages/react/src/components/Tabs/__test__/Tabs.test.tsx new file mode 100644 index 00000000..356d259f --- /dev/null +++ b/packages/react/src/components/Tabs/__test__/Tabs.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 Tabs from '../Tabs'; + +describe('Tabs', () => { + 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/Tabs/__test__/__snapshots__/Tabs.test.tsx.snap b/packages/react/src/components/Tabs/__test__/__snapshots__/Tabs.test.tsx.snap new file mode 100644 index 00000000..b4c8ff9b --- /dev/null +++ b/packages/react/src/components/Tabs/__test__/__snapshots__/Tabs.test.tsx.snap @@ -0,0 +1,32 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Tabs should match the snapshot 1`] = ` + +
+
+
+
+
+ +
+
+
+
+
+ +`; diff --git a/packages/react/src/components/Tabs/index.ts b/packages/react/src/components/Tabs/index.ts new file mode 100644 index 00000000..bc384c1a --- /dev/null +++ b/packages/react/src/components/Tabs/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 './Tabs'; +export type {TabsProps} from './Tabs'; diff --git a/packages/react/src/components/Tabs/tabs.scss b/packages/react/src/components/Tabs/tabs.scss new file mode 100644 index 00000000..5f5a4bbe --- /dev/null +++ b/packages/react/src/components/Tabs/tabs.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-tabs { + /** Add Styles */ +}