feat(Label): celebration animation

packages/core/src/components/Label/Label.tsx

@@ -2,7 +2,7 @@ import { camelCase } from "lodash-es";
 import cx from "classnames";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
-import React, { forwardRef, useCallback, useMemo, useRef } from "react";
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 import Text from "../Text/Text";
 import Leg from "./Leg";
@@ -28,7 +28,7 @@ export interface LabelProps extends VibeComponentProps {
   isAnimationDisabled?: boolean;
   isLegIncluded?: boolean;
   onClick?: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
-  celebration?: boolean;
+  celebrationAnimation?: boolean;
 }
 
 const Label: VibeComponent<LabelProps> & {
@@ -48,12 +48,13 @@ const Label: VibeComponent<LabelProps> & {
       id,
       "data-testid": dataTestId,
       onClick,
-      celebration
+      celebrationAnimation
     },
     ref
   ) => {
     const labelRef = useRef<HTMLSpanElement>(null);
     const mergedRef = useMergeRef(ref, labelRef);
+    const [isCelebrationAnimation, setIsCelebrationAnimation] = useState(celebrationAnimation);
 
     const overrideClassName = backwardCompatibilityForProperties([className, wrapperClassName]) as string;
     const isClickable = Boolean(onClick);
@@ -65,12 +66,13 @@ const Label: VibeComponent<LabelProps> & {
           getStyle(styles, camelCase("kind" + "-" + kind)),
           getStyle(styles, camelCase("color" + "-" + color)),
           {
-            [styles.withAnimation]: !isAnimationDisabled && !celebration,
+            // When celebrationAnimation is active it wins over the default animation
+            [styles.withAnimation]: !isAnimationDisabled && !isCelebrationAnimation,
             [styles.withLeg]: isLegIncluded
           },
           labelClassName
         ),
-      [kind, color, isAnimationDisabled, isLegIncluded, labelClassName, celebration]
+      [kind, color, isAnimationDisabled, isLegIncluded, labelClassName, isCelebrationAnimation]
     );
 
     const onClickCallback = useCallback(
@@ -94,8 +96,12 @@ const Label: VibeComponent<LabelProps> & {
       labelRef
     );
 
-    return (
-      <LabelCelebrationAnimation active={celebration && kind === "line"}>
+    useEffect(() => {
+      setIsCelebrationAnimation(celebrationAnimation);
+    }, [celebrationAnimation]);
+
+    const label = useMemo(() => {
+      return (
         <span
           {...(isClickable && clickableProps)}
           className={cx({ [styles.clickable]: isClickable }, overrideClassName)}
@@ -107,16 +113,38 @@ const Label: VibeComponent<LabelProps> & {
             type={Text.types.TEXT2}
             className={classNames}
             color={Text.colors.ON_INVERTED}
-            data-celebration-text={celebration}
+            data-celebration-text={isCelebrationAnimation}
           >
             <Text element="span" type={Text.types.TEXT2} color={Text.colors.INHERIT}>
               {text}
             </Text>
             <span className={cx(styles.legWrapper)}>{isLegIncluded ? <Leg /> : null}</span>
           </Text>
         </span>
-      </LabelCelebrationAnimation>
-    );
+      );
+    }, [
+      isClickable,
+      clickableProps,
+      overrideClassName,
+      dataTestId,
+      id,
+      mergedRef,
+      classNames,
+      isCelebrationAnimation,
+      text,
+      isLegIncluded
+    ]);
+
+    // Celebration animation is applied only for line kind
+    if (isCelebrationAnimation && kind === "line") {
+      return (
+        <LabelCelebrationAnimation onAnimationEnd={() => setIsCelebrationAnimation(false)}>
+          {label}
+        </LabelCelebrationAnimation>
+      );
+    }
+
+    return label;
   }
 );
 

packages/core/src/components/Label/LabelCelebrationAnimation.module.scss

@@ -20,7 +20,7 @@
       stroke-dashoffset: var(--container-perimeter);
 
       &.base {
-        stroke: #ffcc00;
+        stroke: var(--color-egg_yolk);
         animation: fade 200ms linear forwards;
         animation-delay: 80ms;
         stroke-dasharray: 0;
@@ -29,13 +29,13 @@
       }
 
       &.first {
-        stroke: #00ca72;
+        stroke: var(--color-done-green);
         animation-delay: 80ms;
         animation-duration: 320ms;
       }
 
       &.second {
-        stroke: #fb275d;
+        stroke: var(--color-stuck-red);
         animation-delay: 200ms;
         animation-duration: 320ms;
       }
@@ -58,9 +58,9 @@
     background-image: linear-gradient(
       to right,
       var(--primary-color) 30%,
-      #fb275d 40%,
-      #00ca72 60%,
-      #ffcc00 85%,
+      var(--color-stuck-red) 40%,
+      var(--color-done-green) 60%,
+      var(--color-egg_yolk) 85%,
       transparent 90%
     );
   }

packages/core/src/components/Label/LabelCelebrationAnimation.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import React, { cloneElement, forwardRef, useCallback, useRef, useState } from "react";
 import cx from "classnames";
 import useResizeObserver from "../../hooks/useResizeObserver";
 import styles from "./LabelCelebrationAnimation.module.scss";
@@ -8,33 +8,28 @@ const DEFAULT_STROKE_WIDTH = 1;
 
 export interface LabelCelebrationAnimationProps {
   children: React.ReactElement;
-  active: boolean;
+  onAnimationEnd: () => void;
 }
 
-function LabelCelebrationAnimation({ children, active: isActive }: LabelCelebrationAnimationProps) {
+function LabelCelebrationAnimation({ children, onAnimationEnd }: LabelCelebrationAnimationProps) {
   const wrapperRef = useRef<HTMLDivElement>();
   const childRef = useRef<HTMLDivElement>();
 
-  const [active, setActive] = useState<boolean>(isActive);
   const [path, setPath] = useState<string>();
 
-  useEffect(() => {
-    setActive(isActive);
-  }, [isActive]);
-
   const resizeObserverCallback = useCallback(
     ({ borderBoxSize }: { borderBoxSize: { blockSize: number; inlineSize: number } }) => {
       const { blockSize: height, inlineSize: width } = borderBoxSize || {};
 
-      if (wrapperRef.current && active) {
+      if (wrapperRef.current) {
         const d = getPath({ width, height });
         setPath(d);
 
         const perimeter = getPerimeter({ width, height });
         wrapperRef.current.style.setProperty("--container-perimeter", String(perimeter));
       }
     },
-    [active]
+    []
   );
 
   useResizeObserver({
@@ -49,23 +44,13 @@ function LabelCelebrationAnimation({ children, active: isActive }: LabelCelebrat
     })
   );
 
-  if (!active) {
-    return children;
-  }
-
   return (
     <div className={styles.celebration} ref={wrapperRef}>
       <svg className={styles.svg}>
         <path className={cx(styles.stroke, styles.base)} d={path} />
         <path className={cx(styles.stroke, styles.first)} d={path} />
         <path className={cx(styles.stroke, styles.second)} d={path} />
-        <path
-          className={cx(styles.stroke, styles.third)}
-          d={path}
-          onAnimationEnd={() => {
-            setActive(false);
-          }}
-        />
+        <path className={cx(styles.stroke, styles.third)} d={path} onAnimationEnd={onAnimationEnd} />
       </svg>
       <ChildComponentWithRef ref={childRef} />
     </div>
@@ -85,15 +70,17 @@ function getPath({
   borderRadius?: number;
   strokeWidth?: number;
 }) {
+  const offset = strokeWidth / 2;
+
   return `M ${width - strokeWidth / 2}, ${borderRadius} V ${
     height - borderRadius
-  } A ${borderRadius} ${borderRadius} 0 0 1 ${width - borderRadius} ${
-    height - strokeWidth / 2
-  } H ${borderRadius} A ${borderRadius} ${borderRadius} 0 0 1 ${strokeWidth / 2} ${
-    height - borderRadius
-  } V ${borderRadius} A ${borderRadius} ${borderRadius} 0 0 1 ${borderRadius} ${strokeWidth / 2} L ${
-    width - borderRadius
-  }, ${strokeWidth / 2} A ${borderRadius} ${borderRadius} 0 0 1 ${width - strokeWidth / 2} ${borderRadius} Z`;
+  } A ${borderRadius} ${borderRadius} 0 0 1 ${width - borderRadius} ${height - strokeWidth / 2} H ${
+    borderRadius + offset
+  } A ${borderRadius} ${borderRadius} 0 0 1 ${strokeWidth / 2} ${height - borderRadius} V ${
+    borderRadius + offset
+  } A ${borderRadius} ${borderRadius} 0 0 1 ${borderRadius} ${strokeWidth / 2} L ${width - borderRadius}, ${
+    strokeWidth / 2
+  } A ${borderRadius} ${borderRadius} 0 0 1 ${width - strokeWidth / 2} ${borderRadius} Z`;
 }
 
 function getPerimeter({

packages/core/src/components/Label/__stories__/label.mdx

@@ -144,6 +144,14 @@ In case of visual overload, use the secondary label in order to create hirarchy.
   <Story of={LabelStories.SecondaryLabel} />
 </Canvas>
 
+### Celebration
+
+To celebrate new feature, outline label can be highlighted by adding celebrate animation.
+
+<Canvas>
+  <Story of={LabelStories.Celebration} />
+</Canvas>
+
 ## Related components
 
 <RelatedComponents componentsNames={[TOOLTIP, COUNTER, CHIP]} />

packages/core/src/components/Label/__stories__/label.stories.tsx

@@ -3,6 +3,7 @@ import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { NOOP } from "../../../utils/function-utils";
 import { createComponentTemplate, MultipleStoryElementsWrapper } from "vibe-storybook-components";
 import "./label.stories.scss";
+import { useEffect, useState } from "react";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Label,
@@ -130,3 +131,27 @@ export const SecondaryLabel = {
     }
   }
 };
+
+export const Celebration = {
+  render: () => {
+    const [animate, setAnimate] = useState(false);
+
+    useEffect(() => {
+      setTimeout(() => {
+        setAnimate(false);
+      }, 500);
+    }, [animate]);
+
+    return (
+      <>
+        <Label text="Click to celebrate" kind={Label.kinds.LINE} onClick={() => setAnimate(true)} />
+        <Label text="New" kind={Label.kinds.LINE} celebrationAnimation={animate} isAnimationDisabled />
+      </>
+    );
+  },
+  parameters: {
+    chromatic: {
+      pauseAnimationAtEnd: true
+    }
+  }
+};