From 217b665e96eb5df50c13186000eca30942f7477c Mon Sep 17 00:00:00 2001 From: savindi7 Date: Tue, 7 Mar 2023 00:07:37 +0530 Subject: [PATCH 01/12] feat(react): add `AccountOverview` component --- packages/react/.storybook/story-config.ts | 4 + .../AccountOverview.stories.mdx | 160 ++++++++++++++++++ .../AccountOverview/AccountOverview.tsx | 112 ++++++++++++ .../AccountOverview/account-overview.scss | 30 ++++ .../src/components/AccountOverview/index.ts | 20 +++ .../react/src/components/Avatar/Avatar.tsx | 2 +- .../__snapshots__/Avatar.test.tsx.snap | 2 +- .../components/Carousel/Carousel.stories.mdx | 14 +- .../src/components/Carousel/Carousel.tsx | 69 ++++---- .../src/components/Carousel/carousel.scss | 37 ++-- .../react/src/components/Carousel/index.ts | 1 + .../CircularProgressAvatar.tsx | 1 - .../CircularProgressAvatar.test.tsx.snap | 2 +- .../__snapshots__/Header.test.tsx.snap | 2 +- .../src/components/ListItem/ListItem.tsx | 18 +- .../ListItemAvatar.test.tsx.snap | 2 +- 16 files changed, 405 insertions(+), 71 deletions(-) create mode 100644 packages/react/src/components/AccountOverview/AccountOverview.stories.mdx create mode 100644 packages/react/src/components/AccountOverview/AccountOverview.tsx create mode 100644 packages/react/src/components/AccountOverview/account-overview.scss create mode 100644 packages/react/src/components/AccountOverview/index.ts diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 875ec8ee..ac829db2 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -32,6 +32,7 @@ enum StorybookCategories { } export type Stories = + | 'AccountOverview' | 'ActionCard' | 'AppBar' | 'AppShell' @@ -105,6 +106,9 @@ export type StorybookConfig = Record< >; const StoryConfig: StorybookConfig = { + AccountOverview: { + hierarchy: `${StorybookCategories.Patterns}/Account Overview`, + }, ActionCard: { hierarchy: `${StorybookCategories.Surfaces}/Action Card`, }, diff --git a/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx b/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx new file mode 100644 index 00000000..8cc4d172 --- /dev/null +++ b/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx @@ -0,0 +1,160 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import AccountOverview from './AccountOverview.tsx'; +import Button from '../Button'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import {withDesign} from '../../../.storybook/utils.ts'; +import Typography from '../Typography'; + + +export const meta = { + component: AccountOverview, + title: StoryConfig.AccountOverview.hierarchy, +}; + + + +export const Template = args => ; + +# Menu + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) +- [Variants](#variants) + - [Incomplete](#incomplete) + - [Complete](#complete) + +## Overview + +Menu. + + + Welcome Mathew, + subheader: Manage your personal information, account security and privacy settings., + user:{ + image: '/assets/images/avatar-john.svg', + name: 'Matthew', + email: 'matthew@wso2.com' + }, + accountProgress: 60, + accountCompletionStepsTitle: "Complete your Profile. It's at 60%", + accountCompletionSteps: [ + { + title: 'Add your email address', + description: 'You can add your email address to your profile to receive notifications and updates from us.', + illustration: carousel illustration, + action: + }, + { + title: 'Add your phone number', + description: 'You can add your phone number to your profile to receive notifications and updates from us.', + illustration: carousel illustration, + action: + }, + { + title: 'Add your address', + description: 'You can add your address to your profile to receive notifications and updates from us.', + illustration: carousel illustration, + action: + } + ], + }} + > + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Button` component in your components as follows. + +Welcome Mathew} + accountProgress={60} + /> +}`} +/> + +## Variants + +### Incomplete + + + Welcome Mathew, + subheader: Manage your personal information, account security and privacy settings., + user:{ + image: '/assets/images/avatar-john.svg', + name: 'Matthew', + email: 'matthew@wso2.com' + }, + accountProgress: 60, + accountCompletionStepsTitle: "Complete your Profile. It's at 60%", + accountCompletionSteps: [ + { + title: 'Add your email address', + description: 'You can add your email address to your profile to receive notifications and updates from us.', + illustration: carousel illustration, + action: + }, + { + title: 'Add your phone number', + description: 'You can add your phone number to your profile to receive notifications and updates from us.', + illustration: carousel illustration, + action: + }, + { + title: 'Add your address', + description: 'You can add your address to your profile to receive notifications and updates from us.', + illustration: carousel illustration, + action: + } + ], + }} + > + {Template.bind({})} + + + +### Complete + + + Welcome Mathew, + subheader: Manage your personal information, account security and privacy settings., + user:{ + image: '/assets/images/avatar-john.svg', + name: 'Matthew', + email: 'matthew@wso2.com' + }, + accountCompletionStepsTitle: "Complete your Profile. It's at 60%", + accountProgress: 100, + illustration: image + }} + > + {Template.bind({})} + diff --git a/packages/react/src/components/AccountOverview/AccountOverview.tsx b/packages/react/src/components/AccountOverview/AccountOverview.tsx new file mode 100644 index 00000000..bcd68a02 --- /dev/null +++ b/packages/react/src/components/AccountOverview/AccountOverview.tsx @@ -0,0 +1,112 @@ +/** + * 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 clsx from 'clsx'; +import {FC, ReactElement, ReactNode} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import Box from '../Box'; +import Card, {CardProps} from '../Card'; +import CardHeader, {CardHeaderProps} from '../CardHeader'; +import {Carousel, CarouselStep} from '../Carousel'; +import CircularProgressAvatar from '../CircularProgressAvatar'; +import Divider from '../Divider'; +import {UserTemplate} from '../UserDropdownMenu'; +import './account-overview.scss'; + +export interface AccountOverviewProps extends Omit { + /** + * Account completion steps. + */ + accountCompletionSteps?: AccountCompletionSteps[]; + /** + * Account completion steps title. + */ + accountCompletionStepsTitle?: string; + /** + * Account progress. + */ + accountProgress: number; + /** + * Card header props. + */ + cardHeaderProps?: CardHeaderProps; + /** + * Card Subheader. + * @example subheader + */ + subheader?: ReactNode; + /** + * Card Title. + * @example title + */ + title: ReactNode; + /** + * Logged user information. + */ + user: UserTemplate; +} + +export type AccountCompletionSteps = CarouselStep; + +const COMPONENT_NAME: string = 'AccountOverview'; + +const AccountOverview: FC & WithWrapperProps = (props: AccountOverviewProps): ReactElement => { + const { + className, + title, + subheader, + accountCompletionStepsTitle, + accountCompletionSteps, + accountProgress, + user, + cardHeaderProps, + ...rest + } = props; + + const classes: string = clsx('oxygen-account-overview', className); + + return ( + + + } + title={title} + subheader={subheader} + {...cardHeaderProps} + /> + {accountCompletionSteps && ( + + + + + )} + + ); +}; + +AccountOverview.displayName = composeComponentDisplayName(COMPONENT_NAME); +AccountOverview.muiName = COMPONENT_NAME; + +export default AccountOverview; diff --git a/packages/react/src/components/AccountOverview/account-overview.scss b/packages/react/src/components/AccountOverview/account-overview.scss new file mode 100644 index 00000000..e57794a6 --- /dev/null +++ b/packages/react/src/components/AccountOverview/account-overview.scss @@ -0,0 +1,30 @@ +/** + * 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-account-overview { + padding: 0.8rem 1rem; + + .oxygen-card-header { + padding: 1rem 0; + padding-bottom: 1.5rem; + } + + .oxygen-account-completion-steps-box { + padding: 0.5rem; + } +} diff --git a/packages/react/src/components/AccountOverview/index.ts b/packages/react/src/components/AccountOverview/index.ts new file mode 100644 index 00000000..e2c2d393 --- /dev/null +++ b/packages/react/src/components/AccountOverview/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 './AccountOverview'; +export type {AccountOverviewProps} from './AccountOverview'; diff --git a/packages/react/src/components/Avatar/Avatar.tsx b/packages/react/src/components/Avatar/Avatar.tsx index f5d76c06..e841274f 100644 --- a/packages/react/src/components/Avatar/Avatar.tsx +++ b/packages/react/src/components/Avatar/Avatar.tsx @@ -30,7 +30,7 @@ const COMPONENT_NAME: string = 'Avatar'; const Avatar: FC & WithWrapperProps = (props: AvatarProps): ReactElement => { const {className, ...rest} = props; - const classes: string = clsx('oxygen-ui-avatar', className); + const classes: string = clsx('oxygen-avatar', className); return ; }; diff --git a/packages/react/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/packages/react/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap index 1e7c2e7d..43e0fbcd 100644 --- a/packages/react/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap +++ b/packages/react/src/components/Avatar/__tests__/__snapshots__/Avatar.test.tsx.snap @@ -4,7 +4,7 @@ exports[`Avatar should match the snapshot 1`] = `
carousel illustration, - buttonText: "Add first name", - onButtonClick: ()=>{} }, { + action: , title: "What is your last name?", description: "Start theming journey with Oxygen UI", illustration: carousel illustration, - buttonText: "Add last name", - onButtonClick: ()=>{} } ], - title: "Complete your profile. It’s at 60%" + title: Complete your Profile. It’s at 60% }} > {Template.bind({})} @@ -69,11 +68,10 @@ function Demo() { {}}>Add Last Name, title: "What is your first name?", description: "Start theming journey with Oxygen UI", illustration: carousel illustration, - buttonText: "Add first name", - onButtonClick: ()=>{} } ]} /> diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx index cd599fea..2b763eef 100644 --- a/packages/react/src/components/Carousel/Carousel.tsx +++ b/packages/react/src/components/Carousel/Carousel.tsx @@ -18,7 +18,7 @@ import {ChevronLeftIcon, ChevronRightIcon} from '@oxygen-ui/react-icons'; import clsx from 'clsx'; -import {FC, HTMLAttributes, ReactElement, useEffect, useMemo, useState} from 'react'; +import {FC, HTMLAttributes, ReactElement, ReactNode, useEffect, useMemo, useState} from 'react'; import {useIsMobile} from '../../hooks'; import {WithWrapperProps} from '../../models'; import {composeComponentDisplayName} from '../../utils'; @@ -28,34 +28,36 @@ import Card from '../Card'; import CardContent from '../CardContent'; import IconButton from '../IconButton'; import {IconButtonVariants} from '../IconButton/IconButton'; +import ListItem from '../ListItem'; +import ListItemIcon from '../ListItemIcon'; +import ListItemText from '../ListItemText'; import {Stepper} from '../Stepper'; -import Typography from '../Typography'; import './carousel.scss'; -interface CarouselStep { +export interface CarouselStep { /** - * The text to be displayed in the button. + * Action to be performed on the step. + * @example */ - buttonText: string; + action?: ReactNode; /** * The description of the step. + * @example description */ - description: string; + description?: ReactNode; /** * The illustration to be displayed in the step. + * @example icon */ - illustration: ReactElement; - /** - * Callback method to be called when the button is clicked. - */ - onButtonClick: () => void; + illustration?: ReactElement; /** * The title of the step. + * @example title */ - title: string; + title: ReactNode; } -export interface CarouselProps extends HTMLAttributes { +export interface CarouselProps extends Omit, 'title'> { /** * Specifies whether to auto play the carousel. */ @@ -78,8 +80,9 @@ export interface CarouselProps extends HTMLAttributes { steps: CarouselStep[]; /** * The title of the carousel. + * @example title */ - title?: string; + title?: ReactNode; } const COMPONENT_NAME: string = 'Carousel'; @@ -125,36 +128,29 @@ const Carousel: FC & WithWrapperProps = (props: CarouselProps): R }; const generateCarouselSteps = (): ReactElement[] => - steps.map((step: CarouselStep) => ( - - - - {step.illustration} - - - {step.title} - - - {step.description} - - - - - - + steps?.map((step: CarouselStep) => { + const {title: stepTitle, description, illustration, action} = step; + return ( + + + + {illustration && {illustration}} + + + + {action && {action}} - - )); + ); + }); return ( - {title && {title}} + {title} {isMobile ? ( & WithWrapperProps = (props: CarouselProps): R & WithWrapperProps return (
U
From 4973d88a31c62a594c87052bf927a6d40ed14a9f Mon Sep 17 00:00:00 2001 From: savindi7 Date: Tue, 7 Mar 2023 23:52:44 +0530 Subject: [PATCH 02/12] chore(react): story fixes for `AccountOverview` --- .../AccountOverview/AccountOverview.stories.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx b/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx index 8cc4d172..5b1d646e 100644 --- a/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx +++ b/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx @@ -6,7 +6,6 @@ import StoryConfig from '../../../.storybook/story-config.ts'; import {withDesign} from '../../../.storybook/utils.ts'; import Typography from '../Typography'; - export const meta = { component: AccountOverview, title: StoryConfig.AccountOverview.hierarchy, @@ -16,7 +15,7 @@ export const meta = { export const Template = args => ; -# Menu +# AccountOverview - [Overview](#overview) - [Props](#props) @@ -27,7 +26,7 @@ export const Template = args => ; ## Overview -Menu. +This component is used to display the user's account overview. It includes the user's profile picture, name, email, account progress and account completion steps. {Template.bind({})} - + + From b0adeb3490599a6ce412c3f2c0493306e6d7610b Mon Sep 17 00:00:00 2001 From: savindi7 Date: Wed, 8 Mar 2023 14:27:21 +0530 Subject: [PATCH 03/12] chore(react): minor fix in story --- .../src/components/AccountOverview/AccountOverview.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx b/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx index 5b1d646e..ae861b70 100644 --- a/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx +++ b/packages/react/src/components/AccountOverview/AccountOverview.stories.mdx @@ -73,7 +73,7 @@ This component is used to display the user's account overview. It includes the u ## Usage -Import and use the `Button` component in your components as follows. +Import and use the `AccountOverview` component in your components as follows. Date: Wed, 8 Mar 2023 14:31:15 +0530 Subject: [PATCH 04/12] feat(react): add `Select` component --- packages/react/.storybook/story-config.ts | 4 ++ .../src/components/Select/Select.stories.mdx | 69 +++++++++++++++++++ .../react/src/components/Select/Select.tsx | 57 +++++++++++++++ .../Select/__tests__/Select.test.tsx | 32 +++++++++ .../__snapshots__/Select.test.tsx.snap | 60 ++++++++++++++++ packages/react/src/components/Select/index.ts | 20 ++++++ .../react/src/components/Select/select.scss | 21 ++++++ 7 files changed, 263 insertions(+) create mode 100644 packages/react/src/components/Select/Select.stories.mdx create mode 100644 packages/react/src/components/Select/Select.tsx create mode 100644 packages/react/src/components/Select/__tests__/Select.test.tsx create mode 100644 packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap create mode 100644 packages/react/src/components/Select/index.ts create mode 100644 packages/react/src/components/Select/select.scss diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 875ec8ee..58a963dd 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -76,6 +76,7 @@ export type Stories = | 'UserDropdownMenu' | 'Navbar' | 'OutlinedInput' + | 'Select' | 'SignIn' | 'Stepper' | 'TextField' @@ -242,6 +243,9 @@ const StoryConfig: StorybookConfig = { ListItemText: { hierarchy: `${StorybookCategories.DataDisplay}/List Item Text`, }, + Select: { + hierarchy: `${StorybookCategories.Inputs}/Select`, + }, SignIn: { hierarchy: `${StorybookCategories.Patterns}/Sign In`, }, diff --git a/packages/react/src/components/Select/Select.stories.mdx b/packages/react/src/components/Select/Select.stories.mdx new file mode 100644 index 00000000..b1fd5271 --- /dev/null +++ b/packages/react/src/components/Select/Select.stories.mdx @@ -0,0 +1,69 @@ +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 Select from './Select.tsx'; +import MenuItem from '../MenuItem'; + +export const meta = { + component: Select, + title: StoryConfig.Select.hierarchy, +}; + + + +export const Template = args => { + const [{open, anchor, onChange, label}, updateArgs] = useArgs(); + return ( + + ) +}; + +# Select + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +The `Select` component is used to create a select input. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `Select` component in your components as follows. + + + Ten + Twenty + Thirty + + ); +}`} +/> diff --git a/packages/react/src/components/Select/Select.tsx b/packages/react/src/components/Select/Select.tsx new file mode 100644 index 00000000..fada4c25 --- /dev/null +++ b/packages/react/src/components/Select/Select.tsx @@ -0,0 +1,57 @@ +/** + * 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 MuiSelect, {SelectProps as MuiSelectProps} from '@mui/material/Select'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import Box from '../Box'; +import InputLabel, {InputLabelProps as MuiInputLabelProps} from '../InputLabel'; +import './select.scss'; + +export interface SelectProps extends MuiSelectProps { + InputLabelProps?: MuiInputLabelProps; +} + +const COMPONENT_NAME: string = 'Select'; + +const Select: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: SelectProps, ref: MutableRefObject): ReactElement => { + const {className, InputLabelProps, label, id, ...rest} = props; + + const classes: string = clsx('oxygen-select', className); + + return ( + + {label && ( + + {label} + + )} + + + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +Select.displayName = composeComponentDisplayName(COMPONENT_NAME); +Select.muiName = COMPONENT_NAME; +Select.defaultProps = {}; + +export default Select; diff --git a/packages/react/src/components/Select/__tests__/Select.test.tsx b/packages/react/src/components/Select/__tests__/Select.test.tsx new file mode 100644 index 00000000..fba25597 --- /dev/null +++ b/packages/react/src/components/Select/__tests__/Select.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 Select from '../Select'; + +describe('Select', () => { + it('should render successfully', () => { + const {baseElement} = render(); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap b/packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap new file mode 100644 index 00000000..2d97e3cc --- /dev/null +++ b/packages/react/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap @@ -0,0 +1,60 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Select should match the snapshot 1`] = ` + +
+
+
+ + + + +
+
+
+ +`; diff --git a/packages/react/src/components/Select/index.ts b/packages/react/src/components/Select/index.ts new file mode 100644 index 00000000..3f39c83e --- /dev/null +++ b/packages/react/src/components/Select/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 './Select'; +export type {SelectProps} from './Select'; diff --git a/packages/react/src/components/Select/select.scss b/packages/react/src/components/Select/select.scss new file mode 100644 index 00000000..78b09832 --- /dev/null +++ b/packages/react/src/components/Select/select.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-select { + /* Add Styles */ +} From 0a5103e90afa934f19d88a6478e9bc41737787e4 Mon Sep 17 00:00:00 2001 From: JayaShakthi97 Date: Wed, 8 Mar 2023 15:30:58 +0530 Subject: [PATCH 05/12] 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 06/12] 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 From 2d0814946c8ef49e1729af524de2fb19a3ec139c Mon Sep 17 00:00:00 2001 From: JayaShakthi97 Date: Thu, 9 Mar 2023 17:38:05 +0530 Subject: [PATCH 07/12] 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 */ +} From ec27f4f8cbb69d032576bc3df96e1ea22b758348 Mon Sep 17 00:00:00 2001 From: savindi7 Date: Thu, 9 Mar 2023 17:46:26 +0530 Subject: [PATCH 08/12] chore(react): fix styles in navigation buttons --- .../src/components/Carousel/Carousel.tsx | 81 +++++++++---------- .../src/components/Carousel/carousel.scss | 20 +++-- 2 files changed, 47 insertions(+), 54 deletions(-) diff --git a/packages/react/src/components/Carousel/Carousel.tsx b/packages/react/src/components/Carousel/Carousel.tsx index 2b763eef..f3c11de3 100644 --- a/packages/react/src/components/Carousel/Carousel.tsx +++ b/packages/react/src/components/Carousel/Carousel.tsx @@ -147,49 +147,44 @@ const Carousel: FC & WithWrapperProps = (props: CarouselProps): R {title} - {isMobile ? ( - - - - - - - - - ) : ( - - - - - )} + + + + + + + + + + + + diff --git a/packages/react/src/components/Carousel/carousel.scss b/packages/react/src/components/Carousel/carousel.scss index 13d2f239..0ddc5477 100644 --- a/packages/react/src/components/Carousel/carousel.scss +++ b/packages/react/src/components/Carousel/carousel.scss @@ -22,6 +22,7 @@ .oxygen-carousel-top-bar { display: flex; justify-content: space-between; + align-items: center; .oxygen-carousel-title { flex-grow: 1; @@ -55,20 +56,17 @@ } .oxygen-carousel-mobile-buttons { - display: flex; - justify-content: space-between; - z-index: 1; - position: absolute; - width: 100%; - // TODO: Review this. - top: 50%; + display: none; + } - .oxygen-carousel-mobile-button-left { - right: 15px; + &.mobile { + .oxygen-carousel-button-group { + display: none; } - .oxygen-carousel-mobile-button-right { - left: 15px; + .oxygen-carousel-mobile-buttons { + display: flex; + gap: 1rem; } } } From 153ed6168d32a657008ba49148e1e932b6721ac9 Mon Sep 17 00:00:00 2001 From: JayaShakthi97 Date: Fri, 10 Mar 2023 12:05:02 +0530 Subject: [PATCH 09/12] feat(react): add `TabPanel` component --- packages/react/.storybook/story-config.ts | 4 ++ .../components/TabPanel/TabPanel.stories.mdx | 52 +++++++++++++++++ .../src/components/TabPanel/TabPanel.tsx | 57 +++++++++++++++++++ .../react/src/components/TabPanel/index.ts | 20 +++++++ .../src/components/TabPanel/tab-panel.scss | 21 +++++++ 5 files changed, 154 insertions(+) create mode 100644 packages/react/src/components/TabPanel/TabPanel.stories.mdx create mode 100644 packages/react/src/components/TabPanel/TabPanel.tsx create mode 100644 packages/react/src/components/TabPanel/index.ts create mode 100644 packages/react/src/components/TabPanel/tab-panel.scss diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 794da63c..f5722d3c 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' + | 'TabPanel' | 'Tabs' | 'TextField' | 'Toolbar' @@ -253,6 +254,9 @@ const StoryConfig: StorybookConfig = { Tab: { hierarchy: `${StorybookCategories.Navigation}/Tab`, }, + TabPanel: { + hierarchy: `${StorybookCategories.Navigation}/Tab Panel`, + }, Tabs: { hierarchy: `${StorybookCategories.Navigation}/Tabs`, }, diff --git a/packages/react/src/components/TabPanel/TabPanel.stories.mdx b/packages/react/src/components/TabPanel/TabPanel.stories.mdx new file mode 100644 index 00000000..57a98d51 --- /dev/null +++ b/packages/react/src/components/TabPanel/TabPanel.stories.mdx @@ -0,0 +1,52 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import TabPanel from './TabPanel.tsx'; + +export const meta = { + component: TabPanel, + title: StoryConfig.TabPanel.hierarchy, +}; + + + +export const Template = args => ; + +# TabPanel + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +TabPanel component can be used with Tabs component to implement navigation between different views or sections. + + + + {Template.bind({})} + + + +## Props + + + +## Usage + +Import and use the `TabPanel` component in your components as follows. + + + Sample Tab Panel + + ); +}`} +/> diff --git a/packages/react/src/components/TabPanel/TabPanel.tsx b/packages/react/src/components/TabPanel/TabPanel.tsx new file mode 100644 index 00000000..29a004c6 --- /dev/null +++ b/packages/react/src/components/TabPanel/TabPanel.tsx @@ -0,0 +1,57 @@ +/** + * 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 {BoxProps as MuiBoxProps} from '@mui/material'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import Box from '../Box'; +import './tab-panel.scss'; + +export interface TabPanelProps extends MuiBoxProps { + /* + * The value of the `TabPanel`. + */ + index: number; + /* + * The value of the currently selected `TabPanel`. + */ + value: number; +} + +const COMPONENT_NAME: string = 'TabPanel'; + +const TabPanel: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: TabPanelProps, ref: MutableRefObject): ReactElement => { + const {className, children, value, index, ...rest} = props; + + const classes: string = clsx('oxygen-tab-panel', className); + + return ( + + ); + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +TabPanel.displayName = composeComponentDisplayName(COMPONENT_NAME); +TabPanel.muiName = COMPONENT_NAME; + +export default TabPanel; diff --git a/packages/react/src/components/TabPanel/index.ts b/packages/react/src/components/TabPanel/index.ts new file mode 100644 index 00000000..60dfa08e --- /dev/null +++ b/packages/react/src/components/TabPanel/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 './TabPanel'; +export type {TabPanelProps} from './TabPanel'; diff --git a/packages/react/src/components/TabPanel/tab-panel.scss b/packages/react/src/components/TabPanel/tab-panel.scss new file mode 100644 index 00000000..b623909f --- /dev/null +++ b/packages/react/src/components/TabPanel/tab-panel.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-panel { + /** Add Styles */ +} From a8816ce51196861149f7545135af52815b8c4bf6 Mon Sep 17 00:00:00 2001 From: JayaShakthi97 Date: Fri, 10 Mar 2023 12:15:36 +0530 Subject: [PATCH 10/12] chore(react): add unit tests for `TabPanel` component --- .../TabPanel/__test__/TabPanel.test.tsx | 32 +++++++++++++++++++ .../__snapshots__/TabPanel.test.tsx.snap | 16 ++++++++++ 2 files changed, 48 insertions(+) create mode 100644 packages/react/src/components/TabPanel/__test__/TabPanel.test.tsx create mode 100644 packages/react/src/components/TabPanel/__test__/__snapshots__/TabPanel.test.tsx.snap diff --git a/packages/react/src/components/TabPanel/__test__/TabPanel.test.tsx b/packages/react/src/components/TabPanel/__test__/TabPanel.test.tsx new file mode 100644 index 00000000..a6db4e30 --- /dev/null +++ b/packages/react/src/components/TabPanel/__test__/TabPanel.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 TabPanel from '../TabPanel'; + +describe('TabPanel', () => { + 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/TabPanel/__test__/__snapshots__/TabPanel.test.tsx.snap b/packages/react/src/components/TabPanel/__test__/__snapshots__/TabPanel.test.tsx.snap new file mode 100644 index 00000000..d42eef6b --- /dev/null +++ b/packages/react/src/components/TabPanel/__test__/__snapshots__/TabPanel.test.tsx.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TabPanel should match the snapshot 1`] = ` + +
+
+
+
+
+ +`; From 52de18c470e95f639d32394e2bda8233c7ef2833 Mon Sep 17 00:00:00 2001 From: JayaShakthi97 Date: Fri, 10 Mar 2023 14:21:24 +0530 Subject: [PATCH 11/12] chore(react): address pr comments --- packages/react/src/components/TabPanel/TabPanel.stories.mdx | 2 +- packages/react/src/components/TabPanel/TabPanel.tsx | 4 ++-- packages/react/src/components/TabPanel/tab-panel.scss | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/components/TabPanel/TabPanel.stories.mdx b/packages/react/src/components/TabPanel/TabPanel.stories.mdx index 57a98d51..da519357 100644 --- a/packages/react/src/components/TabPanel/TabPanel.stories.mdx +++ b/packages/react/src/components/TabPanel/TabPanel.stories.mdx @@ -20,7 +20,7 @@ export const Template = args => ; ## Overview -TabPanel component can be used with Tabs component to implement navigation between different views or sections. +TabPanel component can be used with Tabs component to implement the content of the tab views. diff --git a/packages/react/src/components/TabPanel/TabPanel.tsx b/packages/react/src/components/TabPanel/TabPanel.tsx index 29a004c6..0849567a 100644 --- a/packages/react/src/components/TabPanel/TabPanel.tsx +++ b/packages/react/src/components/TabPanel/TabPanel.tsx @@ -26,11 +26,11 @@ import './tab-panel.scss'; export interface TabPanelProps extends MuiBoxProps { /* - * The value of the `TabPanel`. + * The index of the corresponding `TabPanel`. */ index: number; /* - * The value of the currently selected `TabPanel`. + * The value of the selected `TabPanel`. */ value: number; } diff --git a/packages/react/src/components/TabPanel/tab-panel.scss b/packages/react/src/components/TabPanel/tab-panel.scss index b623909f..c918ff03 100644 --- a/packages/react/src/components/TabPanel/tab-panel.scss +++ b/packages/react/src/components/TabPanel/tab-panel.scss @@ -17,5 +17,5 @@ */ .oxygen-tab-panel { - /** Add Styles */ + padding: 1rem; } From 67b93ce9f37aacced83c59cc79192911c5586106 Mon Sep 17 00:00:00 2001 From: JayaShakthi97 Date: Fri, 10 Mar 2023 14:30:54 +0530 Subject: [PATCH 12/12] chore(react): rename unit tests folder name for `TabPanel` component --- .../components/TabPanel/{__test__ => __tests__}/TabPanel.test.tsx | 0 .../{__test__ => __tests__}/__snapshots__/TabPanel.test.tsx.snap | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename packages/react/src/components/TabPanel/{__test__ => __tests__}/TabPanel.test.tsx (100%) rename packages/react/src/components/TabPanel/{__test__ => __tests__}/__snapshots__/TabPanel.test.tsx.snap (100%) diff --git a/packages/react/src/components/TabPanel/__test__/TabPanel.test.tsx b/packages/react/src/components/TabPanel/__tests__/TabPanel.test.tsx similarity index 100% rename from packages/react/src/components/TabPanel/__test__/TabPanel.test.tsx rename to packages/react/src/components/TabPanel/__tests__/TabPanel.test.tsx diff --git a/packages/react/src/components/TabPanel/__test__/__snapshots__/TabPanel.test.tsx.snap b/packages/react/src/components/TabPanel/__tests__/__snapshots__/TabPanel.test.tsx.snap similarity index 100% rename from packages/react/src/components/TabPanel/__test__/__snapshots__/TabPanel.test.tsx.snap rename to packages/react/src/components/TabPanel/__tests__/__snapshots__/TabPanel.test.tsx.snap