Deprecate numeric duration properties in CSS animations

This commit deprecates the use of numeric values for the `duration`, `enterDuration`, `exitDuration`, and `delay` properties in CSS animations. Going forward, these properties will be of type string, with the duration values including their respective units. This change standardizes the way durations are specified in CSS animations, improving readability and maintainability.

Author: Hector Arce De Las Heras

src/components/cssAnimation/animations/transitionMixin.ts

@@ -10,24 +10,51 @@ import { ICssAnimationStyled } from '../types/cssAnimation';
  * @returns {CSSProp} - The animation
  *
  */
+// deprecated - props duration, enterDuration, exitDuration and delay should be of type string (props should come with the units)
 export const transitionMixin = (props: ICssAnimationStyled): CSSProp => css`
   transition:
-    opacity ${props.options?.duration}s,
-    transform ${props.options?.duration}s;
+    opacity
+      ${typeof props.options?.duration === 'number'
+        ? props.options?.duration + 's'
+        : props.options?.duration},
+    transform
+      ${typeof props.options?.duration === 'number'
+        ? props.options?.duration + 's'
+        : props.options?.duration};
   transition-timing-function: ${props.options?.timingFunction};
-  transition-delay: ${props.options?.delay}s;
+  transition-delay: ${typeof props.options?.delay === 'number'
+    ? props.options?.delay + 's'
+    : props.options?.delay};
 `;
+// deprecated - props duration, enterDuration, exitDuration and delay should be of type string (props should come with the units)
 export const transitionMixinEnter = (props: ICssAnimationStyled): CSSProp => css`
   transition:
-    opacity ${props.options?.enterDuration}s,
-    transform ${props.options?.enterDuration}s;
+    opacity
+      ${typeof props.options?.enterDuration === 'number'
+        ? props.options?.enterDuration + 's'
+        : props.options?.enterDuration},
+    transform
+      ${typeof props.options?.enterDuration === 'number'
+        ? props.options?.enterDuration + 's'
+        : props.options?.enterDuration};
   transition-timing-function: ${props.options?.timingFunction};
-  transition-delay: ${props.options?.delay}s;
+  transition-delay: ${typeof props.options?.delay === 'number'
+    ? props.options?.delay + 's'
+    : props.options?.delay};
 `;
+// deprecated - props duration, enterDuration, exitDuration and delay should be of type string (props should come with the units)
 export const transitionMixinExit = (props: ICssAnimationStyled): CSSProp => css`
   transition:
-    opacity ${props.options?.exitDuration}s,
-    transform ${props.options?.exitDuration}s;
+    opacity
+      ${typeof props.options?.exitDuration === 'number'
+        ? props.options?.exitDuration + 's'
+        : props.options?.exitDuration},
+    transform
+      ${typeof props.options?.exitDuration === 'number'
+        ? props.options?.exitDuration + 's'
+        : props.options?.exitDuration};
   transition-timing-function: ${props.options?.timingFunction};
-  transition-delay: ${props.options?.delay}s;
+  transition-delay: ${typeof props.options?.delay === 'number'
+    ? props.options?.delay + 's'
+    : props.options?.delay};
 `;

src/components/cssAnimation/cssAnimation.tsx

@@ -10,6 +10,8 @@ import {
 } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
+import { convertDurationToNumber } from '@/utils/stringUtility/string.utility';
+
 import { CssAnimationContainer } from './cssAnimation.styled';
 import { CssAnimationExecuteOption, ICssAnimation } from './types';
 
@@ -26,19 +28,33 @@ const CssAnimationComponent = (
   const nodeRef = useRef<HTMLDivElement>();
   const [execute, setExecute] = useState(CssAnimationExecuteOption.HIDDEN);
 
+  // deprecated - Remove the condition when `enterDuration` and `duration` are type string
   const enterDuration = () => {
     if (options?.enterDuration) {
+      if (typeof options?.enterDuration === 'string') {
+        return convertDurationToNumber(options?.enterDuration);
+      }
       return options.enterDuration * 1000;
     } else if (options?.duration) {
+      if (typeof options?.duration === 'string') {
+        return convertDurationToNumber(options?.duration);
+      }
       return options.duration * 1000;
     }
     return 0;
   };
 
+  // deprecated - Remove the condition when `exitDuration` and `duration` are type string
   const exitDuration = () => {
     if (options?.exitDuration) {
+      if (typeof options?.exitDuration === 'string') {
+        return convertDurationToNumber(options?.exitDuration);
+      }
       return options.exitDuration * 1000;
     } else if (options?.duration) {
+      if (typeof options?.duration === 'string') {
+        return convertDurationToNumber(options?.duration);
+      }
       return options.duration * 1000;
     }
     return 0;

src/components/cssAnimation/types/cssAnimation.ts

@@ -27,11 +27,23 @@ export enum CssAnimationTimingFunction {
  * Interface for the CssAnimationOptions
  */
 export interface ICssAnimationOptions {
-  duration?: number;
-  enterDuration?: number;
-  exitDuration?: number;
+  /**
+   * @deprecated This property will be of type string (the duration should come with the units)
+   */
+  duration?: number | string;
+  /**
+   * @deprecated This property will be of type string (the duration should come with the units)
+   */
+  enterDuration?: number | string;
+  /**
+   * @deprecated This property will be of type string (the duration should come with the units)
+   */
+  exitDuration?: number | string;
   timingFunction: CssAnimationTimingFunction;
-  delay: number;
+  /**
+   * @deprecated This property will be of type string (the duration should come with the units)
+   */
+  delay: number | string;
   iterationCount: number;
   animationDistanceInPx?: number;
   animationRotationInDeg?: number;