feat(web): checkmark-animation

Author: tractorss

src/lib/form/checkbox.tsx

@@ -1,5 +1,5 @@
 import React, { InputHTMLAttributes } from "react";
-import styled, { css } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 import CheckmarkIcon from "../../assets/svgs/form/checkmark.svg";
 import { borderBox, svg } from "../../styles/common-style";
 
@@ -35,42 +35,76 @@ const HiddenInput = styled.input.attrs({ type: "checkbox" })`
   width: 0;
 `;
 
-const StyledCheckmark = styled(CheckmarkIcon)<
-  CheckboxBaseProps & { $small?: boolean }
->`
-  ${svg}
+const CheckmarkContainer = styled.div<CheckboxBaseProps & { $small?: boolean }>`
   position: absolute;
   top: 0;
   left: 0;
   border-radius: 3px;
   border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
+  overflow: hidden;
   ${({ $small }) =>
     $small
       ? css`
-          padding: 0 3px;
           width: 16px;
           height: 16px;
         `
       : css`
-          padding: 0 4px;
           width: 24px;
           height: 24px;
         `}
 
+  ${({ theme, checked }) =>
+    checked &&
+    css`
+      background: ${theme.klerosUIComponentsPrimaryBlue};
+      border: none;
+      :after {
+        display: block;
+      }
+    `}
+`;
+
+const bouncedIn = keyframes`
+  0%{
+      transform: translateY(100%);
+  }
+  50%{
+    transform: translateY(-5px);
+  }
+  100%{
+    transform: translateY(0);
+  }
+`;
+
+const StyledCheckmark = styled(CheckmarkIcon)<
+  CheckboxBaseProps & { $small?: boolean }
+>`
+  ${svg}
+
+  position: absolute;
+  top: 1px;
+  width: 100%;
+  height: 100%;
+
   ${({ theme, checked }) =>
     checked
       ? css`
-          fill: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
+          fill: ${theme.klerosUIComponentsWhiteBackground};
           background: ${theme.klerosUIComponentsPrimaryBlue};
-          border: none;
-
-          :after {
-            display: block;
-          }
+          animation: ${bouncedIn} 200ms ease-out;
         `
       : css`
           fill: transparent;
         `}
+
+  ${({ $small }) =>
+    $small
+      ? css`
+          padding: 0 3px;
+        `
+      : css`
+          padding: 0 4px;
+        `}
 `;
 
 interface CheckboxProps
@@ -89,7 +123,9 @@ const Checkbox: React.FC<CheckboxProps> = ({
   <Wrapper {...{ small, className }}>
     {label}
     <HiddenInput checked={checked} {...props} />
-    <StyledCheckmark $small={small} checked={checked} />
+    <CheckmarkContainer $small={small} checked={checked}>
+      <StyledCheckmark $small={small} checked={checked} />
+    </CheckmarkContainer>
   </Wrapper>
 );