DS-5 - Switch updates

wri · Oct 23, 2024 · e71ece1 · e71ece1
1 parent 5c65117
commit e71ece1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/components/Switch/index.tsx b/src/components/Switch/index.tsx
@@ -69,14 +69,16 @@ const Switch = ({
       ) : null}
       <SwitchContent>
         {!isDisabled ? <SwitchIconHover className='switch-icon-hover' /> : null}
-        {isLocalChecked && !isDisabled ? (
-          <SwitchIconContainer>
+        <SwitchIconContainer
+          className={isLocalChecked && !isDisabled ? 'move-me' : ''}
+        >
+          {isLocalChecked && !isDisabled ? (
             <SwitchIcon
               onClick={handleOnIconClick}
               color={getThemedColor(theme.colors, 'primary', 700)}
             />
-          </SwitchIconContainer>
-        ) : null}
+          ) : null}
+        </SwitchIconContainer>
         <ChakraSwitch
           id={id}
           aria-label={label || rest['aria-label']}

diff --git a/src/components/Switch/styled.ts b/src/components/Switch/styled.ts
@@ -75,6 +75,16 @@ export const SwitchIconContainer = styled.div`
   justify-content: center;
   align-items: center;
   cursor: pointer;
+
+  transform: translateX(-18px);
+  transition-property: transform;
+  transition-duration: 200ms;
+
+  &.move-me {
+    transform: translateX(0px);
+    transition-property: transform;
+    transition-duration: 100ms;
+  }
 `
 
 export const SwitchIcon = styled(CheckIcon)`