Skip to content

Commit

Permalink
Merge pull request #60 from JayaShakthi97/feat-tab
Browse files Browse the repository at this point in the history
feat(react): add `Tab` component
  • Loading branch information
JayaShakthi97 authored Mar 9, 2023
2 parents 5b66e7a + e6b871a commit 7276448
Show file tree
Hide file tree
Showing 7 changed files with 193 additions and 0 deletions.
4 changes: 4 additions & 0 deletions packages/react/.storybook/story-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@ export type Stories =
| 'OutlinedInput'
| 'SignIn'
| 'Stepper'
| 'Tab'
| 'TextField'
| 'Toolbar'
| 'Tooltip'
Expand Down Expand Up @@ -248,6 +249,9 @@ const StoryConfig: StorybookConfig = {
Stepper: {
hierarchy: `${StorybookCategories.Surfaces}/Stepper`,
},
Tab: {
hierarchy: `${StorybookCategories.Navigation}/Tab`,
},
TextField: {
hierarchy: `${StorybookCategories.Inputs}/Text Field`,
},
Expand Down
55 changes: 55 additions & 0 deletions packages/react/src/components/Tab/Tab.stories.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
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 Tab from './Tab.tsx';

export const meta = {
component: Tab,
title: StoryConfig.Tab.hierarchy,
};

<Meta title={meta.title} component={meta.component} />

export const Template = (args) => {
return (
<Tabs>
<Tab {...args} />
</Tabs>
)
};

# Tab

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)

## Overview

Tab component can be used with Tabs component to implement navigation between different views or sections.

<Canvas>
<Story name="Overview" args={{label: "Sample Tab"}}>
{Template.bind({})}
</Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

Import and use the `Tab` component in your components as follows.

<Source
language="jsx"
dark
format
code={dedent`
import Tab from '@oxygen-ui/react/Tab';\n
function Demo() {
return <Tab label="Sample Tab" />;
}`}
/>
43 changes: 43 additions & 0 deletions packages/react/src/components/Tab/Tab.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/**
* 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 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<TabProps> & WithWrapperProps = forwardRef(
(props: TabProps, ref: MutableRefObject<HTMLDivElement>): ReactElement => {
const {className, ...rest} = props;

const classes: string = clsx('oxygen-tab', className);

return <MuiTab className={classes} ref={ref} {...rest} />;
},
) as ForwardRefExoticComponent<TabProps> & WithWrapperProps;

Tab.displayName = composeComponentDisplayName(COMPONENT_NAME);
Tab.muiName = COMPONENT_NAME;

export default Tab;
32 changes: 32 additions & 0 deletions packages/react/src/components/Tab/__tests__/Tab.test.tsx
Original file line number Diff line number Diff line change
@@ -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(<Tab />);
expect(baseElement).toBeTruthy();
});

it('should match the snapshot', () => {
const {baseElement} = render(<Tab />);
expect(baseElement).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Tab should match the snapshot 1`] = `
<body>
<div>
<button
class="MuiButtonBase-root MuiTab-root MuiTab-textColorInherit oxygen-tab css-185adt7-MuiButtonBase-root-MuiTab-root"
role="tab"
tabindex="-1"
type="button"
>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
</body>
`;
20 changes: 20 additions & 0 deletions packages/react/src/components/Tab/index.ts
Original file line number Diff line number Diff line change
@@ -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';
21 changes: 21 additions & 0 deletions packages/react/src/components/Tab/tab.scss
Original file line number Diff line number Diff line change
@@ -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 */
}

0 comments on commit 7276448

Please sign in to comment.