fix: drawer animation (#5593)

Author: lisalupi

.changeset/famous-stars-marry.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`Drawer`: fix animation on small

packages/ui/src/components/Drawer/__tests__/__snapshots__/index.test.tsx.snap

@@ -207,10 +207,10 @@ exports[`drawer > renders with disclosure and onClose 1`] = `
 
 @keyframes animation-1 {
   from {
-    -webkit-transform: translateX(22rem);
-    -moz-transform: translateX(22rem);
-    -ms-transform: translateX(22rem);
-    transform: translateX(22rem);
+    -webkit-transform: translateX(21rem);
+    -moz-transform: translateX(21rem);
+    -ms-transform: translateX(21rem);
+    transform: translateX(21rem);
   }
 
   to {
@@ -223,10 +223,10 @@ exports[`drawer > renders with disclosure and onClose 1`] = `
 
 @keyframes animation-1 {
   from {
-    -webkit-transform: translateX(22rem);
-    -moz-transform: translateX(22rem);
-    -ms-transform: translateX(22rem);
-    transform: translateX(22rem);
+    -webkit-transform: translateX(21rem);
+    -moz-transform: translateX(21rem);
+    -ms-transform: translateX(21rem);
+    transform: translateX(21rem);
   }
 
   to {

packages/ui/src/components/Drawer/index.tsx

@@ -18,6 +18,7 @@ export const SIZES = {
   // 1 rem = 16 px
   small: 22.25,
 }
+
 const slideIn = (translation: number) => keyframes`
   from {
     transform: translateX(${translation}rem);
@@ -28,14 +29,20 @@ const slideIn = (translation: number) => keyframes`
  `
 
 const slideAnimation = (size: 'small' | 'medium' | 'large') => {
-  if (size === 'small') {
-    return css`animation: ${slideIn(22)} linear 150ms;`
-  }
-  if (size === 'medium') {
-    return css`animation: ${slideIn(48)} linear 250ms;`
+  const translations = {
+    large: 70,
+    medium: 48,
+    small: 21,
+  } as const
+
+  const animationDuration = {
+    large: 300,
+    medium: 250,
+    small: 150,
   }
+  const animation = slideIn(translations[size])
 
-  return css`animation: ${slideIn(70)} linear 300ms;`
+  return css`animation: ${animation} linear ${animationDuration[size]}ms;`
 }
 
 const StyledModal = styled(Modal)`