feat: update toggle component design

affects: @medly-components/core
medly · Aug 29, 2023 · dfbe712 · dfbe712
1 parent 9791561
commit dfbe712
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 31 deletions.
diff --git a/packages/core/src/components/Toggle/Toggle.styled.tsx b/packages/core/src/components/Toggle/Toggle.styled.tsx
@@ -7,7 +7,7 @@ import { ToggleProps, ToggleWrapperProps } from './types';
 const getHeight = ({ theme, size }: ToggleProps & WithThemeProp) =>
     size ? theme.toggle.sizes[size] : theme.toggle.sizes[theme?.toggle.defaultSize];
 
-const getWidth = (props: ToggleProps & WithThemeProp) => `calc(${getHeight(props)} * 2)`;
+const getWidth = (props: ToggleProps & WithThemeProp) => `calc(${getHeight(props)} * 1.75)`;
 
 const IconStyle = css`
     color: ${({ theme }) => theme.toggle.iconColor};
@@ -59,15 +59,15 @@ export const OffIcon = styled('div')<ToggleWrapperProps>`
 export const OnIcon = styled('div')<ToggleWrapperProps>`
     ${IconStyle}
     opacity: 0;
-    left: ${props => `calc((-${getHeight(props)}) + 0.3rem) `};
+    transform: translateX(${props => `calc(${getHeight(props)} * 0.75) `});
 `;
 
 export const Circle = styled('div')<ToggleWrapperProps>`
     z-index: 1;
     position: absolute;
-    height: ${props => `calc(${getHeight(props)} - 0.6rem) `};
-    width: ${props => `calc(${getHeight(props)} - 0.6rem) `};
-    margin: 0.3rem;
+    height: ${props => `calc(${getHeight(props)} - 0.8rem) `};
+    width: ${props => `calc(${getHeight(props)} - 0.8rem) `};
+    margin: 0.4rem;
     border-radius: 50%;
     background: ${({ theme }) => theme.colors.white};
     box-shadow: 0.1rem 0.3rem 0.3rem 0.1rem rgba(0, 0, 0, 0.2);
@@ -100,19 +100,19 @@ export const Checkbox = styled('input').attrs({ type: 'checkbox' })<ToggleProps>
         background: ${({ theme }) => theme.toggle.checkedBgColor};
 
         ${Circle} {
-            margin-left: ${props => `calc((${getHeight(props)}) + 0.3rem) `};
+            transform: translateX(${props => `calc(${getHeight(props)} * 0.75) `});
         }
 
         ${OffIcon} {
-            color: ${({ theme }) => theme.toggle.iconColor};
             opacity: 0;
-            right: ${props => `calc((-${getHeight(props)}) + 0.3rem) `};
+            color: ${({ theme }) => theme.toggle.iconColor};
+            transform: translateX(${props => `calc(-${getHeight(props)} * 0.75) `});
         }
 
         ${OnIcon} {
             opacity: 1;
             position: absolute;
-            left: 0;
+            transform: translateX(0);
         }
     }
 `;
diff --git a/packages/core/src/components/Toggle/Toggle.test.tsx b/packages/core/src/components/Toggle/Toggle.test.tsx
@@ -2,7 +2,7 @@ import { LockOpenIcon, LockOutlineIcon } from '@medly-components/icons';
 import { fireEvent, render, screen } from '@test-utils';
 import { Toggle } from './Toggle';
 
-describe('Checkbox component', () => {
+describe('Toggle component', () => {
     it('should render correctly with all the default props', () => {
         const { container } = render(<Toggle name="gender" />);
         expect(container).toMatchSnapshot();

diff --git a/packages/core/src/components/Toggle/Toggle.tsx b/packages/core/src/components/Toggle/Toggle.tsx
@@ -44,7 +44,7 @@ const Component: FC<ToggleProps> = memo(
                 )}
                 <Styled.Wrapper size={size} disabled={restProps.disabled}>
                     {/* @ts-ignore */}
-                    <Styled.Checkbox ref={ref} id={label} size={size} required={required} onChange={changeHandler} {...restProps} />
+                    <Styled.Checkbox ref={ref} id={toggleId} size={size} required={required} onChange={changeHandler} {...restProps} />
                     <Styled.Switch>
                         {iconLeft && <Styled.OnIcon size={size}>{cloneElement(iconLeft, { size })}</Styled.OnIcon>}
                         <Styled.Circle size={size} />

diff --git a/packages/core/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap b/packages/core/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Checkbox component should render correctly with all the default props 1`] = `
+exports[`Toggle component should render correctly with all the default props 1`] = `
 .c0 {
   margin: 0.8rem 0.8rem 0.8rem 0;
   display: inline-grid;
@@ -35,7 +35,7 @@ exports[`Checkbox component should render correctly with all the default props 1
   flex-wrap: wrap;
   margin-left: 0px;
   position: relative;
-  width: calc(24px * 2);
+  width: calc(24px * 1.75);
   height: 24px;
   border-radius: 1.5rem;
   background-color: #dfe4e9;
@@ -68,9 +68,9 @@ exports[`Checkbox component should render correctly with all the default props 1
 .c6 {
   z-index: 1;
   position: absolute;
-  height: calc(24px - 0.6rem);
-  width: calc(24px - 0.6rem);
-  margin: 0.3rem;
+  height: calc(24px - 0.8rem);
+  width: calc(24px - 0.8rem);
+  margin: 0.4rem;
   border-radius: 50%;
   background: #ffffff;
   box-shadow: 0.1rem 0.3rem 0.3rem 0.1rem rgba(0,0,0,0.2);
@@ -103,19 +103,25 @@ exports[`Checkbox component should render correctly with all the default props 1
 }
 
 .c2:checked + .c3 .c5 {
-  margin-left: calc((24px) + 0.3rem);
+  -webkit-transform: translateX(calc(24px * 0.75) );
+  -ms-transform: translateX(calc(24px * 0.75) );
+  transform: translateX(calc(24px * 0.75) );
 }
 
 .c2:checked + .c3 .sc-1oxfop0-2 {
-  color: #ffffff;
   opacity: 0;
-  right: calc((-24px) + 0.3rem);
+  color: #ffffff;
+  -webkit-transform: translateX(calc(-24px * 0.75) );
+  -ms-transform: translateX(calc(-24px * 0.75) );
+  transform: translateX(calc(-24px * 0.75) );
 }
 
 .c2:checked + .c3 .sc-1oxfop0-3 {
   opacity: 1;
   position: absolute;
-  left: 0;
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0);
 }
 
 <div>
@@ -129,7 +135,7 @@ exports[`Checkbox component should render correctly with all the default props 1
     >
       <input
         class="c2"
-        id=""
+        id="medly-toggle-checkbox"
         name="gender"
         type="checkbox"
       />
@@ -145,7 +151,7 @@ exports[`Checkbox component should render correctly with all the default props 1
 </div>
 `;
 
-exports[`Checkbox component should render correctly with all the props given 1`] = `
+exports[`Toggle component should render correctly with all the props given 1`] = `
 .c1 {
   color: #13181D;
   font-size: 1.4rem;
@@ -202,7 +208,7 @@ exports[`Checkbox component should render correctly with all the props given 1`]
   flex-wrap: wrap;
   margin-left: 0px;
   position: relative;
-  width: calc(28px * 2);
+  width: calc(28px * 1.75);
   height: 28px;
   border-radius: 1.5rem;
   background-color: #dfe4e9;
@@ -235,9 +241,9 @@ exports[`Checkbox component should render correctly with all the props given 1`]
 .c8 {
   z-index: 1;
   position: absolute;
-  height: calc(28px - 0.6rem);
-  width: calc(28px - 0.6rem);
-  margin: 0.3rem;
+  height: calc(28px - 0.8rem);
+  width: calc(28px - 0.8rem);
+  margin: 0.4rem;
   border-radius: 50%;
   background: #ffffff;
   box-shadow: 0.1rem 0.3rem 0.3rem 0.1rem rgba(0,0,0,0.2);
@@ -270,19 +276,25 @@ exports[`Checkbox component should render correctly with all the props given 1`]
 }
 
 .c4:checked + .c5 .c7 {
-  margin-left: calc((28px) + 0.3rem);
+  -webkit-transform: translateX(calc(28px * 0.75) );
+  -ms-transform: translateX(calc(28px * 0.75) );
+  transform: translateX(calc(28px * 0.75) );
 }
 
 .c4:checked + .c5 .sc-1oxfop0-2 {
-  color: #ffffff;
   opacity: 0;
-  right: calc((-28px) + 0.3rem);
+  color: #ffffff;
+  -webkit-transform: translateX(calc(-28px * 0.75) );
+  -ms-transform: translateX(calc(-28px * 0.75) );
+  transform: translateX(calc(-28px * 0.75) );
 }
 
 .c4:checked + .c5 .sc-1oxfop0-3 {
   opacity: 1;
   position: absolute;
-  left: 0;
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0);
 }
 
 <div>
@@ -303,7 +315,7 @@ exports[`Checkbox component should render correctly with all the props given 1`]
       <input
         class="c4"
         disabled=""
-        id="Female"
+        id="gender-toggle"
         name="gender"
         type="checkbox"
       />