From 0a5103e90afa934f19d88a6478e9bc41737787e4 Mon Sep 17 00:00:00 2001 From: JayaShakthi97 Date: Wed, 8 Mar 2023 15:30:58 +0530 Subject: [PATCH 1/2] feat(react): add `Tab` component --- packages/react/.storybook/story-config.ts | 4 ++ .../react/src/components/Tab/Tab.stories.mdx | 49 +++++++++++++++++++ packages/react/src/components/Tab/Tab.tsx | 43 ++++++++++++++++ .../src/components/Tab/__tests__/Tab.test.tsx | 32 ++++++++++++ .../__tests__/__snapshots__/Tab.test.tsx.snap | 18 +++++++ packages/react/src/components/Tab/index.ts | 20 ++++++++ packages/react/src/components/Tab/tab.scss | 21 ++++++++ 7 files changed, 187 insertions(+) create mode 100644 packages/react/src/components/Tab/Tab.stories.mdx create mode 100644 packages/react/src/components/Tab/Tab.tsx create mode 100644 packages/react/src/components/Tab/__tests__/Tab.test.tsx create mode 100644 packages/react/src/components/Tab/__tests__/__snapshots__/Tab.test.tsx.snap create mode 100644 packages/react/src/components/Tab/index.ts create mode 100644 packages/react/src/components/Tab/tab.scss diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 875ec8ee..871dcad0 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -78,6 +78,7 @@ export type Stories = | 'OutlinedInput' | 'SignIn' | 'Stepper' + | 'Tab' | 'TextField' | 'Toolbar' | 'Tooltip' @@ -248,6 +249,9 @@ const StoryConfig: StorybookConfig = { Stepper: { hierarchy: `${StorybookCategories.Surfaces}/Stepper`, }, + Tab: { + hierarchy: `${StorybookCategories.Navigation}/Tab`, + }, TextField: { hierarchy: `${StorybookCategories.Inputs}/Text Field`, }, diff --git a/packages/react/src/components/Tab/Tab.stories.mdx b/packages/react/src/components/Tab/Tab.stories.mdx new file mode 100644 index 00000000..58f23878 --- /dev/null +++ b/packages/react/src/components/Tab/Tab.stories.mdx @@ -0,0 +1,49 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import {withDesign} from '../../../.storybook/utils.ts'; +import Tab from './Tab.tsx'; + +export const meta = { + component: Tab, + title: StoryConfig.Tab.hierarchy, +}; + + + +export const Template = args => ; + +# Tab + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Tab component can be used with Tabs component to implement navigation between different views or sections. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Tab` component in your components as follows. + +; +}`} +/> diff --git a/packages/react/src/components/Tab/Tab.tsx b/packages/react/src/components/Tab/Tab.tsx new file mode 100644 index 00000000..de6090fb --- /dev/null +++ b/packages/react/src/components/Tab/Tab.tsx @@ -0,0 +1,43 @@ +/** + * Copyright (c) 2022, 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 MuiTab, {TabProps as MuiTabProps} from '@mui/material/Tab'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './tab.scss'; + +export type TabProps = MuiTabProps; + +const COMPONENT_NAME: string = 'Tab'; + +const Tab: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: TabProps, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-tab', className); + + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +Tab.displayName = composeComponentDisplayName(COMPONENT_NAME); +Tab.muiName = COMPONENT_NAME; + +export default Tab; diff --git a/packages/react/src/components/Tab/__tests__/Tab.test.tsx b/packages/react/src/components/Tab/__tests__/Tab.test.tsx new file mode 100644 index 00000000..030ac393 --- /dev/null +++ b/packages/react/src/components/Tab/__tests__/Tab.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 Tab from '../Tab'; + +describe('Tab', () => { + 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/Tab/__tests__/__snapshots__/Tab.test.tsx.snap b/packages/react/src/components/Tab/__tests__/__snapshots__/Tab.test.tsx.snap new file mode 100644 index 00000000..c12c387a --- /dev/null +++ b/packages/react/src/components/Tab/__tests__/__snapshots__/Tab.test.tsx.snap @@ -0,0 +1,18 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Tab should match the snapshot 1`] = ` + +
+ +
+ +`; diff --git a/packages/react/src/components/Tab/index.ts b/packages/react/src/components/Tab/index.ts new file mode 100644 index 00000000..add4be5f --- /dev/null +++ b/packages/react/src/components/Tab/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 './Tab'; +export type {TabProps} from './Tab'; diff --git a/packages/react/src/components/Tab/tab.scss b/packages/react/src/components/Tab/tab.scss new file mode 100644 index 00000000..5b038e94 --- /dev/null +++ b/packages/react/src/components/Tab/tab.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-tab { + /** Add Styles */ +} From e6b871a1e3fcc10757c7fee869f972f0805c2847 Mon Sep 17 00:00:00 2001 From: JayaShakthi97 Date: Thu, 9 Mar 2023 10:07:23 +0530 Subject: [PATCH 2/2] chore(react): address pr comments --- packages/react/src/components/Tab/Tab.stories.mdx | 10 ++++++++-- packages/react/src/components/Tab/Tab.tsx | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Tab/Tab.stories.mdx b/packages/react/src/components/Tab/Tab.stories.mdx index 58f23878..f7c751b0 100644 --- a/packages/react/src/components/Tab/Tab.stories.mdx +++ b/packages/react/src/components/Tab/Tab.stories.mdx @@ -1,7 +1,7 @@ import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import Tabs from '@mui/material/Tabs'; import dedent from 'ts-dedent'; import StoryConfig from '../../../.storybook/story-config.ts'; -import {withDesign} from '../../../.storybook/utils.ts'; import Tab from './Tab.tsx'; export const meta = { @@ -11,7 +11,13 @@ export const meta = { -export const Template = args => ; +export const Template = (args) => { + return ( + + + + ) +}; # Tab diff --git a/packages/react/src/components/Tab/Tab.tsx b/packages/react/src/components/Tab/Tab.tsx index de6090fb..33d5cea9 100644 --- a/packages/react/src/components/Tab/Tab.tsx +++ b/packages/react/src/components/Tab/Tab.tsx @@ -1,5 +1,5 @@ /** - * Copyright (c) 2022, WSO2 LLC. (https://www.wso2.com). All Rights Reserved. + * 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