feat: add animated upvotes in feed cards (#3318)

* refactor: updated scaffolding in storybook stories

* feat: added @storybook/test lib for mocking actions;

* feat: init ActionButtons stories;

* chore: ignored .idea folder;

* feat: added ActionButtons.stories.tsx;
feat: updated mocks and added GB provider mock;

* feat: added ActionButtons.stories.tsx;
feat: updated mocks and added GB provider mock;

* feat: added WIP animated arrows;

* feat: added animation for ActionButtons experiment

* feat: added animation for ActionButtons experiment;

* fix: moved animation to right component;
chore: reverted imports from package.json;

* fix: updated ActionButtons moving subcomponent to top

* fix: next seo import

* Revert "fix: next seo import"

This reverts commit 65a3f42.

* fix: revert changes in next.config

* fix: revert changes in next.config

* feat: enabled experiment

* fix: made animation faster;

* fix: revert animation on webapp;

* feat: added media query for reduced-motion users;

* feat: check only for current added upvotes;

* fix: animate only for current clicked upvotes;
feat: added mocks for useConditionalFeature hook in storybook;

* refactor: moved to `withExperiment` hoc mode

* fix: removed default animatedUpvote flag

* refactor: added `shouldEvaluate` option to `withExperiment`;

* refactor: revert to `useConditionalFeature` method;

* fix: revert withExperiment HOC

* feat: added animation for list action buttons;

* fix: revert default animated upvote feature flag;

* Update packages/shared/src/components/cards/ActionsButtons/UpvoteButtonIcon.tsx

Co-authored-by: nensidosari <[email protected]>

* fix: test fails for missing context;

* fix: linter error;

---------

Co-authored-by: nensidosari <[email protected]>

Author: ilasw

.gitignore

@@ -43,3 +43,5 @@ extension.xml
 shared.xml
 webapp.xml
 
+# IDE
+.idea/

packages/shared/src/components/cards/ActionsButtons/ActionButtons.module.css

@@ -0,0 +1,127 @@
+.upvotes {
+
+  .upvote {
+    --upvote-start-x: 0%;
+    --upvote-end-x: 50%;
+
+    --upvote-start-y: 60%;
+    --upvote-end-y: 0;
+
+    --upvote-start-rotate: 0turn;
+    --upvote-end-rotate: 0turn;
+
+    --upvote-start-scale: 1;
+    --upvote-end-scale: 1;
+
+    @apply absolute bottom-0;
+    animation: upvoteToUp 1.2s cubic-bezier(0.54, -0.59, 0.38, 0.73) forwards;
+    left: var(--upvote-start-x);
+    opacity: 0;
+    rotate: var(--upvote-start-rotate);
+    top: var(--upvote-start-y);
+    transform: translate3d(-50%, -50%, 0);
+    will-change: left, top, transform;
+
+    &:nth-child(1) {
+      @apply text-accent-avocado-default;
+      animation-duration: .8s;
+      --upvote-start-x: 20%;
+      --upvote-end-x: 30%;
+      --upvote-start-y: 70%;
+      --upvote-end-y: 0%;
+      --upvote-end-rotate: .015turn;
+    }
+
+    &:nth-child(2) {
+      --upvote-start-x: 70%;
+      --upvote-end-x: 20%;
+      --upvote-start-y: 80%;
+      --upvote-end-y: -30%;
+      --upvote-start-scale: 1.5;
+      --upvote-end-scale: 1.3;
+      --upvote-start-rotate: -.05turn;
+      --upvote-end-rotate: .01turn;
+      @apply text-accent-cabbage-default z-1;
+      animation-delay: .4s;
+      animation-duration: .4s;
+      animation-timing-function: cubic-bezier(0.440, -0.600, 0.460, 0.965);
+    }
+
+    &:nth-child(3) {
+      @apply text-accent-blueCheese-default;
+      animation-delay: .55s;
+      animation-duration: .75s;
+      --upvote-start-x: 75%;
+      --upvote-end-x: 75%;
+      --upvote-start-y: 100%;
+      --upvote-end-y: -60%;
+      --upvote-start-scale: 1.4;
+      --upvote-end-scale: 1.6;
+      z-index: 2;
+    }
+
+    &:nth-child(4) {
+      animation-delay: .55s;
+      animation-duration: .75s;
+      --upvote-start-x: 30%;
+      --upvote-end-x: 40%;
+      --upvote-start-y: 100%;
+      --upvote-end-y: -30%;
+      --upvote-start-rotate: 0;
+      --upvote-end-rotate: .1;
+      --upvote-start-scale: .8;
+      --upvote-end-scale: .8;
+    }
+
+    &:nth-child(5) {
+      @apply text-accent-cheese-default;
+      animation-delay: .45s;
+      animation-duration: .8s;
+
+      --upvote-start-x: 110%;
+      --upvote-end-x: 85%;
+      --upvote-start-y: 100%;
+      --upvote-end-y: -30%;
+      --upvote-start-rotate: 0;
+      --upvote-end-rotate: -.05turn;
+      z-index: 1;
+    }
+  }
+}
+
+@keyframes upvoteToUp {
+  0% {
+    left: var(--upvote-start-x);
+    opacity: 0;
+    rotate: var(--upvote-start-rotate);
+    scale: 0;
+    top: var(--upvote-start-y);
+  }
+
+  15% {
+    opacity: 1;
+  }
+
+  30% {
+    scale: var(--upvote-start-scale);
+  }
+
+  50% {
+    rotate: var(--upvote-start-rotate);
+  }
+
+  95% {
+    rotate: var(--upvote-end-rotate);
+  }
+
+  99% {
+    opacity: 1;
+  }
+
+  100% {
+    top: var(--upvote-end-y);
+    left: var(--upvote-end-x);
+    scale: var(--upvote-end-scale);
+    opacity: 0;
+  }
+}

packages/shared/src/components/cards/ActionButtons.tsx packages/shared/src/components/cards/ActionsButtons/ActionButtons.tsx

@@ -1,23 +1,23 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, useState } from 'react';
 import classNames from 'classnames';
-import { Post, UserVote } from '../../graphql/posts';
-import InteractionCounter from '../InteractionCounter';
-import { QuaternaryButton } from '../buttons/QuaternaryButton';
+import { Post, UserVote } from '../../../graphql/posts';
+import InteractionCounter from '../../InteractionCounter';
+import { QuaternaryButton } from '../../buttons/QuaternaryButton';
 import {
-  UpvoteIcon,
   DiscussIcon as CommentIcon,
   BookmarkIcon,
   LinkIcon,
-} from '../icons';
+} from '../../icons';
 import {
   Button,
   ButtonColor,
   ButtonProps,
   ButtonSize,
   ButtonVariant,
-} from '../buttons/Button';
-import { SimpleTooltip } from '../tooltips/SimpleTooltip';
-import { useFeedPreviewMode } from '../../hooks';
+} from '../../buttons/Button';
+import { SimpleTooltip } from '../../tooltips/SimpleTooltip';
+import { useFeedPreviewMode } from '../../../hooks';
+import { UpvoteButtonIcon } from './UpvoteButtonIcon';
 
 export interface ActionButtonsProps {
   post: Post;
@@ -40,6 +40,8 @@ export default function ActionButtons({
     size: ButtonSize.Small,
   };
   const isFeedPreview = useFeedPreviewMode();
+  const isUpvoteActive = post?.userState?.vote === UserVote.Up;
+  const [userUpvoted, setUserUpvoted] = useState(false);
 
   if (isFeedPreview) {
     return null;
@@ -84,10 +86,16 @@ export default function ActionButtons({
         <QuaternaryButton
           id={`post-${post.id}-upvote-btn`}
           icon={
-            <UpvoteIcon secondary={post?.userState?.vote === UserVote.Up} />
+            <UpvoteButtonIcon
+              secondary={post?.userState?.vote === UserVote.Up}
+              userClicked={userUpvoted}
+            />
           }
-          pressed={post?.userState?.vote === UserVote.Up}
-          onClick={() => onUpvoteClick?.(post)}
+          pressed={isUpvoteActive}
+          onClick={() => {
+            onUpvoteClick?.(post);
+            setUserUpvoted(true);
+          }}
           {...upvoteCommentProps}
           className="btn-tertiary-avocado !min-w-[4.625rem]"
         >

packages/shared/src/components/cards/ActionsButtons/UpvoteButtonIcon.tsx

@@ -0,0 +1,56 @@
+import React, { ReactElement } from 'react';
+import classNames from 'classnames';
+import { feature } from '../../../lib/featureManagement';
+import { UpvoteIcon } from '../../icons';
+import { IconProps, IconSize } from '../../Icon';
+import { userPrefersReducedMotions } from '../../../styles/media';
+import { useConditionalFeature, useMedia } from '../../../hooks';
+import styles from './ActionButtons.module.css';
+
+type AnimatedButtonIconProps = IconProps & { userClicked?: boolean };
+
+const arrows = Array.from({ length: 5 }, (_, i) => i + 1);
+
+export const UpvoteButtonIcon = React.memo(function UpvoteButtonIconComp(
+  props: AnimatedButtonIconProps,
+): ReactElement {
+  const { secondary: isUpvoteActive, userClicked, ...attrs } = props;
+
+  const haveUserPrefersReducedMotions = useMedia(
+    [userPrefersReducedMotions.replace('@media', '')],
+    [false],
+    false,
+    false,
+  );
+
+  const { value: isAnimatedVersion } = useConditionalFeature({
+    feature: feature.animatedUpvote,
+    shouldEvaluate:
+      !haveUserPrefersReducedMotions && userClicked && isUpvoteActive,
+  });
+
+  return (
+    <span className="pointer-events-none relative">
+      <UpvoteIcon secondary={isUpvoteActive} {...attrs} />
+      {isAnimatedVersion && userClicked && isUpvoteActive && (
+        <span
+          aria-hidden
+          className={classNames(
+            styles.upvotes,
+            'absolute left-1/2 top-0 h-full w-[125%] -translate-x-1/2',
+          )}
+          role="presentation"
+        >
+          {arrows.map((i) => (
+            <UpvoteIcon
+              secondary
+              size={IconSize.XXSmall}
+              className={styles.upvote}
+              key={i}
+            />
+          ))}
+        </span>
+      )}
+    </span>
+  );
+});

packages/shared/src/components/cards/ActionsButtons/index.ts

@@ -0,0 +1,4 @@
+import ActionButtons, { ActionButtonsProps } from './ActionButtons';
+
+export type { ActionButtonsProps };
+export default ActionButtons;

packages/shared/src/components/cards/ArticlePostCard.tsx

@@ -7,7 +7,7 @@ import {
   getPostClassNames,
 } from './Card';
 import PostMetadata from './PostMetadata';
-import ActionButtons from './ActionButtons';
+import ActionButtons from './ActionsButtons/ActionButtons';
 import { PostCardHeader } from './PostCardHeader';
 import { PostCardFooter } from './PostCardFooter';
 import { Container, PostCardProps } from './common';

packages/shared/src/components/cards/CollectionCard/CollectionCard.spec.tsx

@@ -4,6 +4,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { CollectionCard } from './CollectionCard';
 import { sharePost as collectionPost } from '../../../../__tests__/fixture/post';
 import { PostCardProps } from '../common';
+import { AuthContextProvider } from '../../../contexts/AuthContext';
 
 const post = collectionPost;
 const defaultProps: PostCardProps = {
@@ -31,9 +32,16 @@ beforeEach(() => {
 
 const renderComponent = (props: Partial<PostCardProps> = {}): RenderResult => {
   return render(
-    <QueryClientProvider client={new QueryClient()}>
-      <CollectionCard {...defaultProps} {...props} />
-    </QueryClientProvider>,
+    <AuthContextProvider
+      user={null}
+      updateUser={jest.fn()}
+      tokenRefreshed={false}
+      getRedirectUri={jest.fn()}
+    >
+      <QueryClientProvider client={new QueryClient()}>
+        <CollectionCard {...defaultProps} {...props} />
+      </QueryClientProvider>
+    </AuthContextProvider>,
   );
 };
 

packages/shared/src/components/cards/CollectionCard/CollectionCard.tsx

@@ -5,7 +5,7 @@ import FeedItemContainer from '../FeedItemContainer';
 import { CollectionCardHeader } from './CollectionCardHeader';
 import { getPostClassNames, FreeformCardTitle, CardSpace } from '../Card';
 import { WelcomePostCardFooter } from '../WelcomePostCardFooter';
-import ActionButtons from '../ActionButtons';
+import ActionButtons from '../ActionsButtons/ActionButtons';
 import PostMetadata from '../PostMetadata';
 import { usePostImage } from '../../../hooks/post/usePostImage';
 import CardOverlay from '../common/CardOverlay';

packages/shared/src/components/cards/SharePostCard.spec.tsx

@@ -5,6 +5,7 @@ import { SharePostCard } from './SharePostCard';
 import { sharePost } from '../../../__tests__/fixture/post';
 import { PostCardProps } from './common';
 import { PostType } from '../../graphql/posts';
+import { AuthContextProvider } from '../../contexts/AuthContext';
 
 const post = sharePost;
 const defaultProps: PostCardProps = {
@@ -33,9 +34,16 @@ beforeEach(() => {
 
 const renderComponent = (props: Partial<PostCardProps> = {}): RenderResult => {
   return render(
-    <QueryClientProvider client={new QueryClient()}>
-      <SharePostCard {...defaultProps} {...props} />
-    </QueryClientProvider>,
+    <AuthContextProvider
+      user={null}
+      updateUser={jest.fn()}
+      tokenRefreshed={false}
+      getRedirectUri={jest.fn()}
+    >
+      <QueryClientProvider client={new QueryClient()}>
+        <SharePostCard {...defaultProps} {...props} />
+      </QueryClientProvider>
+    </AuthContextProvider>,
   );
 };
 

packages/shared/src/components/cards/SharePostCard.tsx

@@ -5,7 +5,7 @@ import {
   CardTitle,
   getPostClassNames,
 } from './Card';
-import ActionButtons from './ActionButtons';
+import ActionButtons from './ActionsButtons/ActionButtons';
 import { Container, PostCardProps } from './common';
 import FeedItemContainer from './FeedItemContainer';
 import { isVideoPost } from '../../graphql/posts';

packages/shared/src/components/cards/WelcomePostCard.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, ReactElement, Ref, useRef } from 'react';
 import classNames from 'classnames';
 import { FreeformCardTitle, getPostClassNames } from './Card';
-import ActionButtons from './ActionButtons';
+import ActionButtons from './ActionsButtons/ActionButtons';
 import { Container, generateTitleClamp, PostCardProps } from './common';
 import OptionsButton from '../buttons/OptionsButton';
 import { WelcomePostCardFooter } from './WelcomePostCardFooter';