feat(react): Add Switch component

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`,
   },

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,
+};
+
+<Meta title="Inputs/Switch" component={Switch} />
+
+export const Template = args => <Switch {...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.
+
+<Canvas>
+  <Story
+    name="Combination box"
+    args={
+        {
+            options: [
+                { label: 'The Shawshank Redemption', year: 1994 },
+                { label: 'The Godfather', year: 1972 },
+                { label: 'The Godfather: Part II', year: 1974 },
+                { label: 'The Dark Knight', year: 2008 },
+                { label: '12 Angry Men', year: 1957 },
+                { label: "Schindler's List", year: 1993 },
+                { label: 'Pulp Fiction', year: 1994 }
+            ],
+            renderInput: params  => <TextField {...params} label="Movie" />
+        }
+    }
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+#### Props
+
+<ArgsTable story="Combination box" />
+
+### Multiple values
+
+This is also known as tags, this allows the user to enter more than one value.
+
+
+
+#### Props
+
+<ArgsTable story="Multiple values" />
+
+## Usage
+
+Import and use the `Switch` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`import Switch from '@oxygen-ui/react/Switch';\n`}
+/>

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<SwitchProps> & WithWrapperProps = forwardRef(
+  (props: SwitchProps, ref: MutableRefObject<HTMLButtonElement>): ReactElement => {
+    const {className, ...rest} = props;
+
+    const classes: string = clsx('oxygen-switch', className);
+
+    return <MuiSwitch className={classes} {...rest} ref={ref} />;
+  },
+) as ForwardRefExoticComponent<SwitchProps> & WithWrapperProps;
+
+Switch.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Switch.muiName = COMPONENT_NAME;
+Switch.defaultProps = {};
+
+export default Switch;

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(<Switch />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Switch />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

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';

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;
+  }
+}

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';