feat(AttentionBox): add prop for enter animation

mondaycom · Oct 28, 2024 · 1a4303d · 1a4303d
1 parent b19996b
commit 1a4303d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/packages/core/src/components/AttentionBox/AttentionBox.module.scss b/packages/core/src/components/AttentionBox/AttentionBox.module.scss
@@ -1,3 +1,17 @@
+@keyframes enterAnimation {
+  0% {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
 .attentionBox {
   position: relative;
   padding: 12px var(--spacing-medium);
@@ -6,6 +20,10 @@
   max-width: 100%;
   height: fit-content;
 
+  &.animateOnEnter {
+    animation: enterAnimation 200ms cubic-bezier(0.00, 0.00, 0.40, 1.00) forwards;
+  }
+
   // Overriding on primary icon color should be with bigger specificity than the original color
   & .closeIconWrapper .closeIcon {
     color: var(--primary-text-color);

diff --git a/packages/core/src/components/AttentionBox/AttentionBox.tsx b/packages/core/src/components/AttentionBox/AttentionBox.tsx
@@ -36,6 +36,7 @@ export interface AttentionBoxProps extends VibeComponentProps {
   onClose?: (event: React.MouseEvent) => void;
   compact?: boolean;
   closeButtonAriaLabel?: string;
+  animateOnEnter?: boolean;
 }
 
 const AttentionBox: React.FC<AttentionBoxProps> & {
@@ -59,7 +60,8 @@ const AttentionBox: React.FC<AttentionBoxProps> & {
   compact = false,
   id,
   "data-testid": dataTestId,
-  closeButtonAriaLabel = "Close"
+  closeButtonAriaLabel = "Close",
+  animateOnEnter = false
 }) => {
   const overrideClassName = backwardCompatibilityForProperties([className, componentClassName]);
 
@@ -71,7 +73,9 @@ const AttentionBox: React.FC<AttentionBoxProps> & {
 
   return (
     <aside
-      className={cx(styles.attentionBox, getStyle(styles, camelCase(`type-${type}`)), overrideClassName)}
+      className={cx(styles.attentionBox, getStyle(styles, camelCase(`type-${type}`)), overrideClassName, {
+        [styles.animateOnEnter]: animateOnEnter
+      })}
       role="alert"
       data-testid={dataTestId || getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)}
     >