feat(AttentionBox): add prop for enter animation

packages/core/src/components/AttentionBox/AttentionBox.module.scss

@@ -1,3 +1,17 @@
+@keyframes entryAnimation {
+  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;
 
+  &.entryAnimation {
+    animation: entryAnimation 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);

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;
+  entryAnimation?: 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",
+  entryAnimation = 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.entryAnimation]: entryAnimation
+      })}
       role="alert"
       data-testid={dataTestId || getTestId(ComponentDefaultTestId.ATTENTION_BOX, id)}
     >

packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx

@@ -27,7 +27,7 @@ import * as AttentionBoxStories from "./AttentionBox.stories";
 
 ## Overview
 
-Attention box lets users know important information within content areas, as close as possible to the content it’s about.
+Attention box lets users know important information within content areas, as close as possible to the content it’s about. An optional smooth entrance animation can be used to enhance visibility.
 
 <Canvas of={AttentionBoxStories.Overview} />
 
@@ -133,10 +133,16 @@ Provides additional information about an action or section.
 
 ### Attention box inside a dialog/combobox
 
-Provides cotextual and related information.
+Provides contextual and related information.
 
 <Canvas of={AttentionBoxStories.AttentionBoxInsideADialogCombobox} />
 
+### Animation
+
+The Attention box component consist of enter animation prop to increase user attention. Is highly recommended to use a 200ms delay before the attention box entry motion once the page is fully loaded.
+
+<Canvas of={AttentionBoxStories.AttentionBoxAnimation} />
+
 ## Related components
 
 <RelatedComponents componentsNames={[ALERT_BANNER, TOAST, TOOLTIP]} />

packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { useCallback } from "react";
 import AttentionBox from "../AttentionBox";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
@@ -13,6 +13,7 @@ import Flex from "../../Flex/Flex";
 import Favorite from "../../Icon/Icons/components/Favorite";
 import AttentionBoxLink from "../AttentionBoxLink/AttentionBoxLink";
 import "./AttentionBox.stories.scss";
+import Button from "../../Button/Button";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: AttentionBox,
@@ -181,3 +182,38 @@ export const AttentionBoxInsideADialogCombobox = {
 
   name: "Attention box inside a dialog/combobox"
 };
+
+export const AttentionBoxAnimation = {
+  render: () => {
+    const [isOpen, setOpen] = useState(false);
+    const onClick = useCallback(() => {
+      setOpen(true);
+    }, []);
+    return (
+      <>
+        <Flex
+          gap={Flex.gaps.MEDIUM}
+          style={{
+            height: "44px"
+          }}
+        >
+          <Button onClick={onClick} kind={Button.kinds.SECONDARY}>
+            Entry animation
+          </Button>
+          {isOpen && (
+            <AttentionBox
+              compact
+              withIconWithoutHeader
+              entryAnimation
+              icon={Info}
+              text="First, move the content you want to copy into folder. Only main boards and dashboards can be copied."
+              onClose={() => setOpen(false)}
+            />
+          )}
+        </Flex>
+      </>
+    );
+  },
+
+  name: "Attention box inside a dialog/combobox"
+};