feat: ToggleSwitch Component Updated for the Mint Design

packages/ui-toolkit/src/components/atoms/ToggleSwitch/ToggleSwitch.tsx

@@ -1,48 +1,61 @@
 import React from 'react';
 
+import '@groww-tech/mint-css/dist/index.css';
+
 import './toggleSwitch.css';
 
 
 const ToggleSwitch = (props: Props) => {
   const {
-    switchCircleColor, activeBackgroundColor, width,
-    inactiveBackgroundColor, onChange, height,
-    isActive, leftText, rightText, dataTestId
+    size,
+    onChange,
+    isDisabled,
+    isActive,
+    leftText,
+    rightText,
+    dataTestId
   } = props;
 
+  const getFontClass = () => {
+    if(size === "XLarge") return "bodyXLarge";
+    if(size === "Large") return "bodyLarge";
+    if(size === "Base") return "bodyBase";
+    if(size === "Small") return "bodySmallHeavy";
+    if(size === "XSmall") return "bodySmall";
+
+  }
   // circleDiameter is the diameter of the circular slider which should be smaller than the size of the parent component so as to provide offset between the slider and it's parent
-  const circleDiameter = height - 4;
+  const circleDiameter = 20;
 
   const switchLabelStyle = {
-    background: isActive ? activeBackgroundColor : inactiveBackgroundColor,
-    width,
-    height,
-    borderRadius: height,
+    borderRadius: '24px',
     top: '0px', // required here, as somewhere in the project(globally) these values are altered
     left: '0px' // required here
   };
-  const switchDivStyle = {
-    width,
-    height
-  };
+
   const inputStyle = {
     margin: '0px' // required here, as somewhere in the project(globally) these values are altered
   };
 
+
+  const switchDivisonStyle = {
+    pointerEvents: isDisabled ? 'none' : 'unset'
+  };
+
   const switchButtonStyle = {
-    background: switchCircleColor,
-    width: `${circleDiameter}px`,
-    height: `${circleDiameter}px`,
-    transform: isActive ? `translateX(${width - circleDiameter - 4}px)` : 'none'
+    transform: isActive ? 'translateX(16px)' : 'none'
   };
 
   return (
     <div className="valign-wrapper">
-      {leftText}
-      <div style={switchDivStyle}
+      <div className={getFontClass()}>
+         {leftText}
+      </div>
+      <div
         className='sw348reactSwitchDivision'
         data-test-id={dataTestId.length ? dataTestId : null}
         onClick={(e) => onChange(e)}
+        style={switchDivisonStyle}
       >
         <input
           style={inputStyle}
@@ -52,31 +65,30 @@ const ToggleSwitch = (props: Props) => {
           id="reactSwitchId"
           type="checkbox"
         />
-        <div
-          style={switchLabelStyle}
-          className="sw348reactSwitchLabel"
+        <div style={switchLabelStyle}
+          className={isDisabled ? 'backgroundTertiary sw348reactSwitchLabel' : isActive ? 'backgroundPositive sw348reactSwitchLabel' : 'backgroundTertiary sw348reactSwitchLabel'}
         >
           <div style={switchButtonStyle}
-            className={'sw348reactSwitchButton borderPrimary'}
+            className={'sw348reactSwitchButton backgroundAlwaysLight'}  //check the 'backgrpundPrimary' property, according to design language
           />
         </div>
       </div>
-      {rightText}
+      <div className={getFontClass()}>
+        {rightText}
+      </div>
     </div>
   );
 
 };
 
 
 const defaultProps: DefaultProps = {
-  width: 52,
-  height: 24,
   leftText: '',
   rightText: '',
-  inactiveBackgroundColor: 'var(--gray700)',
-  switchCircleColor: 'var(--white)',
-  activeBackgroundColor: 'var(--green500)',
-  dataTestId: ''
+  isActive: true,
+  isDisabled: false,
+  dataTestId: '',
+  size: 'Base' 
 };
 
 
@@ -87,14 +99,12 @@ type RequiredProps = {
 
 
 type DefaultProps = {
-  width: number;
-  height: number;
-  switchCircleColor: string;
-  activeBackgroundColor: string;
   leftText: React.ReactNode;
   rightText: React.ReactNode;
-  inactiveBackgroundColor: string;
   dataTestId: string;
+  isActive: boolean;
+  isDisabled: boolean;
+  size: 'XLarge'| 'Large' | 'Base' | 'Small' | 'XSmall';
 }
 
 

packages/ui-toolkit/src/components/atoms/ToggleSwitch/toggleSwitch.css

@@ -18,10 +18,16 @@
   align-items: center;
   justify-content: space-between;
   cursor: pointer;
+  height: 1.5rem;           
+  width: 2.5rem;
   position: relative;
-  transition: background-color 0.3s;
+  transition: background-color 0.3s;  
+}
+.sw348reactSwitchButton{
+  height: 1.25rem;
+  width: 1.25rem;
+  filter: 'drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.15))';
 }
-
 .sw348reactSwitchLabel .sw348reactSwitchButton {
   content: '';
   position: absolute;
@@ -31,3 +37,6 @@
   /*same as width, height*/
   transition: all 0.3s;
 }
+
+
+/* 'backgroundTertiary sw348reactSwitchLabel' */

packages/ui-toolkit/stories/ToggleSwitch.stories.tsx

@@ -12,27 +12,31 @@ export default {
   }
 };
 
+
 const Template: Story<ToggleSwitchProps> = (args) => {
-  const [checked, setChecked] = React.useState(false);
+  const [ isChecked, setIsChecked ] = React.useState(true);
+
+
   const onChange = () => {
-    setChecked(!checked);
-  }
+    setIsChecked(!isChecked);
+  };
+
   return (
     <div className="valign-wrapper">
-      <ToggleSwitch {...args} isActive={checked} onChange={onChange} />
+      <ToggleSwitch {...args}
+        isActive={isChecked}
+        onChange={onChange}
+      />
     </div>
   );
 }
 
 export const Default = Template.bind({});
 Default.args = {
-  width: 52,
-  height: 24,
   leftText: '',
   rightText: '',
-  inactiveBackgroundColor: 'var(--gray700)',
-  switchCircleColor: 'var(--white)',
-  activeBackgroundColor: 'var(--green500)'
+  isActive: false,
+  isDisabled: 'true'
 }
 
 export const WithText = Template.bind({});
@@ -44,13 +48,5 @@ WithText.args = {
 
 export const SwitchCircle = Template.bind({});
 SwitchCircle.args = {
-  ...Default.args,
-  switchCircleColor: 'var(--red500)'
-}
-
-export const Custom = Template.bind({});
-Custom.args = {
-  ...Default.args,
-  inactiveBackgroundColor: 'var(--red500)',
-  activeBackgroundColor: 'var(--purple500)'
+  ...Default.args
 }