feat: add more options in toggle theme

affects: @medly-components/core, @medly-components/theme
medly · Sep 26, 2024 · 9d8e783 · 9d8e783
1 parent 3d752e7
commit 9d8e783
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 36 deletions.
diff --git a/packages/core/src/components/Toggle/Toggle.styled.tsx b/packages/core/src/components/Toggle/Toggle.styled.tsx
@@ -49,6 +49,7 @@ export const Switch = styled('div')<ToggleWrapperProps>`
     overflow: hidden;
     display: flex;
     align-items: flex-end;
+    background: ${({ theme }) => theme.toggle.bgColor.default};
 `;
 
 export const OffIcon = styled('div')<ToggleWrapperProps>`
@@ -91,14 +92,21 @@ export const Checkbox = styled('input').attrs({ type: 'checkbox' })<ToggleProps>
 
     &:disabled {
         cursor: not-allowed;
-        & + ${Switch} {
-            background: ${({ theme }) => theme.toggle.disabledBgColor};
+
+        &:not(:checked) + ${Switch} {
+            background: ${({ theme }) => theme.toggle.bgColor.disabledDefault};
+        }
+
+        &:checked + ${Switch} {
+            background: ${({ theme }) => theme.toggle.bgColor.disabledChecked};
         }
     }
 
-    &:checked + ${Switch} {
-        background: ${({ theme }) => theme.toggle.checkedBgColor};
+    &:not(:disabled):checked + ${Switch} {
+        background: ${({ theme }) => theme.toggle.bgColor.checked};
+    }
 
+    &:checked + ${Switch} {
         ${Circle} {
             transform: translateX(${props => `calc(${getHeight(props)} * 0.75) `});
         }

diff --git a/packages/core/src/components/Toggle/Toggle.tsx b/packages/core/src/components/Toggle/Toggle.tsx
@@ -1,11 +1,14 @@
 import { WithStyle } from '@medly-components/utils';
 import { cloneElement, FC, forwardRef, memo, useCallback, useMemo } from 'react';
+import { useTheme } from 'styled-components';
 import FieldWithLabel from '../FieldWithLabel';
+import Text from '../Text';
 import * as Styled from './Toggle.styled';
 import { ToggleProps } from './types';
 
 const Component: FC<ToggleProps> = memo(
     forwardRef((props, ref) => {
+        const theme = useTheme();
         const {
             id,
             size,
@@ -21,6 +24,8 @@ const Component: FC<ToggleProps> = memo(
             iconRight,
             ...restProps
         } = props;
+        // @ts-ignore
+        const color = labelColor || theme.toggle.textColor[restProps.disabled ? 'disabled' : 'default'];
 
         const changeHandler = useCallback(
                 (e: any) => {
@@ -36,10 +41,10 @@ const Component: FC<ToggleProps> = memo(
                 {label && (
                     <FieldWithLabel.Label
                         showPointer={!restProps.disabled}
-                        {...{ required, labelPosition, labelVariant, labelWeight, labelColor }}
+                        {...{ required, labelPosition, labelVariant, labelWeight, labelColor: color }}
                         htmlFor={toggleId}
                     >
-                        {label}
+                        <Text>{label}</Text>
                     </FieldWithLabel.Label>
                 )}
                 <Styled.Wrapper size={size} disabled={restProps.disabled}>

diff --git a/packages/core/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap b/packages/core/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap
@@ -38,7 +38,10 @@ exports[`Toggle component should render correctly with all the default props 1`]
   width: calc(24px * 1.75);
   height: 24px;
   border-radius: 1.5rem;
-  background-color: #dfe4e9;
+  background-color: default:#dfe4e9;
+  checked: #012040;
+  disabled-default: #C7D0D8;
+  disabled-checked: #435465;
 }
 
 .c1:focus-within {
@@ -63,6 +66,7 @@ exports[`Toggle component should render correctly with all the default props 1`]
   -webkit-box-align: flex-end;
   -ms-flex-align: flex-end;
   align-items: flex-end;
+  background: #dfe4e9;
 }
 
 .c6 {
@@ -94,11 +98,15 @@ exports[`Toggle component should render correctly with all the default props 1`]
   cursor: not-allowed;
 }
 
-.c2:disabled + .c3 {
+.c2:disabled:not(:checked) + .c3 {
   background: #C7D0D8;
 }
 
-.c2:checked + .c3 {
+.c2:disabled:checked + .c3 {
+  background: #435465;
+}
+
+.c2:not(:disabled):checked + .c3 {
   background: #012040;
 }
 
@@ -153,7 +161,7 @@ exports[`Toggle component should render correctly with all the default props 1`]
 
 exports[`Toggle component should render correctly with all the props given 1`] = `
 .c1 {
-  color: #13181D;
+  color: #b0bcc8;
   font-size: 1.4rem;
   font-weight: 400;
   -webkit-letter-spacing: 0rem;
@@ -165,6 +173,20 @@ exports[`Toggle component should render correctly with all the props given 1`] =
   cursor: not-allowed;
 }
 
+.c3 {
+  margin: 0;
+  color: inherit;
+  font-size: 1.4rem;
+  font-weight: 400;
+  -webkit-letter-spacing: 0rem;
+  -moz-letter-spacing: 0rem;
+  -ms-letter-spacing: 0rem;
+  letter-spacing: 0rem;
+  line-height: 2.2rem;
+  text-align: initial;
+  display: inline-block;
+}
+
 .c2 {
   grid-area: label;
   -webkit-align-self: center;
@@ -201,7 +223,7 @@ exports[`Toggle component should render correctly with all the props given 1`] =
   flex-direction: row-reverse;
 }
 
-.c3 {
+.c4 {
   grid-area: field;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
@@ -211,20 +233,23 @@ exports[`Toggle component should render correctly with all the props given 1`] =
   width: calc(28px * 1.75);
   height: 28px;
   border-radius: 1.5rem;
-  background-color: #dfe4e9;
+  background-color: default:#dfe4e9;
+  checked: #012040;
+  disabled-default: #C7D0D8;
+  disabled-checked: #435465;
 }
 
-.c3:focus-within {
+.c4:focus-within {
   box-shadow: 0 0 0 1pt #012040;
 }
 
-.c3 > * {
+.c4 > * {
   width: 100%;
   height: 100%;
   border-radius: 1.5rem;
 }
 
-.c6 {
+.c7 {
   position: relative;
   width: 100%;
   overflow: hidden;
@@ -236,9 +261,10 @@ exports[`Toggle component should render correctly with all the props given 1`] =
   -webkit-box-align: flex-end;
   -ms-flex-align: flex-end;
   align-items: flex-end;
+  background: #dfe4e9;
 }
 
-.c8 {
+.c9 {
   z-index: 1;
   position: absolute;
   height: calc(28px - 0.8rem);
@@ -251,45 +277,49 @@ exports[`Toggle component should render correctly with all the props given 1`] =
   transition: 0.2s;
 }
 
-.c4 {
+.c5 {
   opacity: 0;
   z-index: 2;
   margin: 0;
   position: absolute;
   cursor: pointer;
 }
 
-.c4:focus {
+.c5:focus {
   outline: none;
 }
 
-.c4:disabled {
+.c5:disabled {
   cursor: not-allowed;
 }
 
-.c4:disabled + .c5 {
+.c5:disabled:not(:checked) + .c6 {
   background: #C7D0D8;
 }
 
-.c4:checked + .c5 {
+.c5:disabled:checked + .c6 {
+  background: #435465;
+}
+
+.c5:not(:disabled):checked + .c6 {
   background: #012040;
 }
 
-.c4:checked + .c5 .c7 {
+.c5:checked + .c6 .c8 {
   -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 {
+.c5:checked + .c6 .sc-1oxfop0-2 {
   opacity: 0;
   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 {
+.c5:checked + .c6 .sc-1oxfop0-3 {
   opacity: 1;
   position: absolute;
   -webkit-transform: translateX(0);
@@ -306,24 +336,28 @@ exports[`Toggle component should render correctly with all the props given 1`] =
       class="c1 c2"
       for="gender-toggle"
     >
-      Female
+      <span
+        class="c3"
+      >
+        Female
+      </span>
     </label>
     <div
-      class="sc-12atfcu-0 c3"
+      class="sc-12atfcu-0 c4"
       disabled=""
     >
       <input
-        class="c4"
+        class="c5"
         disabled=""
         id="gender-toggle"
         name="gender"
         type="checkbox"
       />
       <div
-        class="c5 c6"
+        class="c6 c7"
       >
         <div
-          class="c7 c8"
+          class="c8 c9"
         />
       </div>
     </div>

diff --git a/packages/theme/src/core/toggle/index.ts b/packages/theme/src/core/toggle/index.ts
@@ -11,10 +11,17 @@ const toggle: ToggleTheme = {
     },
     defaultSize: 'S',
     outlineColor: colors.professionalNavy,
-    checkedBgColor: colors.professionalNavy,
-    bgColor: colors.grey[200],
-    disabledBgColor: colors.grey[300],
-    iconColor: colors.white
+    iconColor: colors.white,
+    bgColor: {
+        default: colors.grey[200],
+        checked: colors.professionalNavy,
+        disabledDefault: colors.grey[300],
+        disabledChecked: colors.grey[800]
+    },
+    textColor: {
+        default: colors.professionalNavy,
+        disabled: colors.grey[400]
+    }
 };
 
 export default toggle;
diff --git a/packages/theme/src/core/toggle/types.ts b/packages/theme/src/core/toggle/types.ts
@@ -3,9 +3,16 @@ export type ToggleSizes = 'XS' | 'S' | 'M' | 'L' | 'XL';
 export interface ToggleTheme {
     sizes: { [k in ToggleSizes]: string };
     defaultSize: ToggleSizes;
-    checkedBgColor: string;
-    bgColor: string;
     outlineColor: string;
-    disabledBgColor: string;
     iconColor: string;
+    bgColor: {
+        default: string;
+        checked: string;
+        disabledDefault: string;
+        disabledChecked: string;
+    };
+    textColor: {
+        default: string;
+        disabled: string;
+    };
 }