diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index 8a70ad20..13fcd95e 100644 --- a/packages/react/.storybook/story-config.ts +++ b/packages/react/.storybook/story-config.ts @@ -107,6 +107,7 @@ export type Stories = | 'Skeleton' | 'Snackbar' | 'Stepper' + | 'Switch' | 'Tab' | 'TabPanel' | 'Tabs' @@ -361,6 +362,9 @@ const StoryConfig: StorybookConfig = { Stepper: { hierarchy: `${StorybookCategories.Surfaces}/Stepper`, }, + Switch: { + hierarchy: `${StorybookCategories.Surfaces}/Switch`, + }, Tab: { hierarchy: `${StorybookCategories.Navigation}/Tab`, }, diff --git a/packages/react/src/components/Switch/Switch.stories.mdx b/packages/react/src/components/Switch/Switch.stories.mdx new file mode 100644 index 00000000..87ec7c0f --- /dev/null +++ b/packages/react/src/components/Switch/Switch.stories.mdx @@ -0,0 +1,74 @@ +import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs'; +import dedent from 'ts-dedent'; +import StoryConfig from '../../../.storybook/story-config.ts'; +import Switch from './Switch.tsx'; + +export const meta = { + component: Switch, + title: StoryConfig.Switch.hierarchy, +}; + + + +export const Template = args => ; + +# Switch + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Switches toggle the state of a single setting on or off. + +### Combination box + +The textbox's value needs to be chosen from a predefined set of allowed values. + + + + } + } + > + {Template.bind({})} + + + +#### Props + + + +### Multiple values + +This is also known as tags, this allows the user to enter more than one value. + + + +#### Props + + + +## Usage + +Import and use the `Switch` component in your components as follows. + + diff --git a/packages/react/src/components/Switch/Switch.tsx b/packages/react/src/components/Switch/Switch.tsx new file mode 100644 index 00000000..6b4aae39 --- /dev/null +++ b/packages/react/src/components/Switch/Switch.tsx @@ -0,0 +1,47 @@ +/** + * 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 MuiSwitch, {SwitchProps as MuiSwitchProps} from '@mui/material/Switch'; +import clsx from 'clsx'; +import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react'; +import {WithWrapperProps} from '../../models'; +import {composeComponentDisplayName} from '../../utils'; +import './switch.scss'; + +export type SwitchProps = MuiSwitchProps; + +const COMPONENT_NAME: string = 'Switch'; + +/** + * @remarks `any` is used as the generic type for the props because the generic type is not used in the component. + */ +const Switch: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: SwitchProps, ref: MutableRefObject): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-switch', className); + + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; + +Switch.displayName = composeComponentDisplayName(COMPONENT_NAME); +Switch.muiName = COMPONENT_NAME; +Switch.defaultProps = {}; + +export default Switch; diff --git a/packages/react/src/components/Switch/__tests__/Switch.test.tsx b/packages/react/src/components/Switch/__tests__/Switch.test.tsx new file mode 100644 index 00000000..c560a6f0 --- /dev/null +++ b/packages/react/src/components/Switch/__tests__/Switch.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 Switch from '../Switch'; + +describe('Alert', () => { + 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/Switch/index.ts b/packages/react/src/components/Switch/index.ts new file mode 100644 index 00000000..305d4d4c --- /dev/null +++ b/packages/react/src/components/Switch/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 './Switch'; +export type {SwitchProps} from './Switch'; diff --git a/packages/react/src/components/Switch/switch.scss b/packages/react/src/components/Switch/switch.scss new file mode 100644 index 00000000..049a6fb2 --- /dev/null +++ b/packages/react/src/components/Switch/switch.scss @@ -0,0 +1,26 @@ +/** + * 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-switch { + padding-top: 14px !important; + padding-bottom: 14px !important; + + .MuiButtonBase-root { + height: 32px !important; + } +} diff --git a/packages/react/src/components/index.ts b/packages/react/src/components/index.ts index 119dd818..b2dbb46b 100644 --- a/packages/react/src/components/index.ts +++ b/packages/react/src/components/index.ts @@ -202,6 +202,9 @@ export * from './Skeleton'; export {default as Stepper} from './Stepper'; export * from './Stepper'; +export {default as Switch} from './Switch'; +export * from './Switch'; + export {default as Tab} from './Tab'; export * from './Tab';