Merge pull request #26 from yaswanth-deriv/yaswanth/FEQ-1439_Add-Togg…

…le-Component

[FEQ]Yaswanth/FEQ-1439/Added Toggle Component

lib/components/ToggleSwitch/ToggleSwitch.scss

@@ -0,0 +1,56 @@
+.deriv-toggle-switch {
+    position: relative;
+    display: inline-flex;
+    width: 4.4rem;
+    height: 2.4rem;
+
+    @include mobile {
+        width: 3.8rem;
+    }
+
+    & > input {
+        width: 0;
+        height: 0;
+    }
+
+    &__slider {
+        position: absolute;
+        inset: 0;
+        cursor: pointer;
+        background-color: var(--light-4-disabled-text, #d6d6d6);
+        transition: 0.4s;
+        border-radius: 1.6rem;
+
+        &:before {
+            position: absolute;
+            content: '';
+            height: 1.8rem;
+            width: 1.8rem;
+            left: 0.3rem;
+            bottom: 0.3rem;
+            background-color: var(--system-dark-1-prominent-text, #fff);
+            transition: 0.4s;
+            border-radius: 50%;
+
+            @include mobile {
+                left: 0.4rem;
+            }
+        }
+    }
+}
+
+.deriv-toggle-switch input:checked + .deriv-toggle-switch__slider {
+    background-color: var(--light-status-success, #4bb4b3);
+}
+
+.deriv-toggle-switch input:checked + .deriv-toggle-switch__slider:before {
+    -webkit-transform: translateX(2rem);
+    -ms-transform: translateX(2rem);
+    transform: translateX(2rem);
+
+    @include mobile {
+        -webkit-transform: translateX(1.2rem);
+        -ms-transform: translateX(1.2rem);
+        transform: translateX(1.2rem);
+    }
+}

lib/components/ToggleSwitch/index.tsx

@@ -0,0 +1,19 @@
+import React, { ChangeEvent, forwardRef } from 'react';
+import clsx from "clsx";
+import './ToggleSwitch.scss';
+
+interface ToggleSwitchProps {
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    value: boolean;
+    wrapperClassName: string;
+    className: string;
+    wrapperStyle: React.CSSProperties;
+    style: React.CSSProperties;
+}
+
+export const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(({ onChange, value, wrapperClassName, className, wrapperStyle, style }, ref) => (
+    <label className={clsx('deriv-toggle-switch',wrapperClassName)} style={wrapperStyle} >
+        <input checked={value} onChange={onChange} ref={ref} type='checkbox' className={clsx(className)} style={style}  />
+        <span className='deriv-toggle-switch__slider' />
+    </label>
+));

lib/main.ts

@@ -3,4 +3,5 @@ export { Button } from "./components/Button";
 export { Text } from "./components/Text";
 export { Tab, Tabs } from "./components/Tabs";
 export { Tooltip } from "./components/Tooltip";
+export {ToggleSwitch} from "./components/ToggleSwitch"
 export { Input } from "./components/Input";

src/stories/ToggleSwitch.stories.ts

@@ -0,0 +1,30 @@
+import { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { ToggleSwitch } from '../../lib/components/ToggleSwitch';
+
+const meta ={
+    title: 'Components/ToggleSwitch',
+    component: ToggleSwitch,
+    args : {
+        onChange: action('ToggleSwitch changed'),
+        value: false,
+      }
+}satisfies Meta<typeof ToggleSwitch>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        onChange: action('ToggleSwitch changed'),
+        value: false,
+    },
+  };
+
+  export const Checked: Story = {
+    args: {
+        ...Default.args,
+        value: true,
+    },
+  };