feedback component v2 (#5778)

* remove cloudscape designs * remove unused import * update menu tests * update feedback icons * remove extra feedback links * change visibility of feedback component on load * updated sizing and color, added close button * add end of content feedback component * remove pill for phase 1 * fix tests * feedback pill changes * fixing animation on feedback component * animation for bottom feedback and logic for hiding * fix tests * changes from alee * put back removed package * remove floating feedback component --------- Co-authored-by: Jacob Logan <lognjc@amazon.com> Co-authored-by: katiegoines <katiegoines@gmail.com>
aws-amplify · Aug 23, 2023 · a1673a8 · a1673a8
1 parent 5c551ed
commit a1673a8
Show file tree

Hide file tree

Showing 26 changed files with 622 additions and 867 deletions.
diff --git a/jest.setup.js b/jest.setup.js
@@ -1,2 +1,6 @@
 // Setup file to extend jest-dom, referenced in packages.json under "jest"
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
+
+if (typeof window.URL.createObjectURL === 'undefined') {
+  window.URL.createObjectURL = jest.fn();
+}
diff --git a/next.config.mjs b/next.config.mjs
@@ -70,12 +70,7 @@ export default async (phase, { defaultConfig }) => {
     },
     exportPathMap,
     trailingSlash: true,
-    transpilePackages: [
-      '@algolia/autocomplete-shared',
-      '@cloudscape-design/components',
-      '@cloudscape-design/component-toolkit',
-      'next-image-export-optimizer'
-    ],
+    transpilePackages: ['@algolia/autocomplete-shared', 'next-image-export-optimizer'],
     // eslint-disable-next-line @typescript-eslint/require-await
     async headers() {
       return [

diff --git a/package.json b/package.json
@@ -57,7 +57,6 @@
     "unist-util-visit": "^4.1.0"
   },
   "devDependencies": {
-    "@cloudscape-design/jest-preset": "^2.0.0",
     "@mdx-js/loader": "^1.6.22",
     "@next/mdx": "^10.1.3",
     "@stencil/core": "^1.17.0",

diff --git a/preset.js b/preset.js
@@ -1,4 +1,3 @@
 const tsPreset = require('ts-jest/presets/js-with-babel/jest-preset');
-const cloudscapePreset = require('@cloudscape-design/jest-preset');
 
-module.exports = Object.assign(tsPreset, cloudscapePreset);
+module.exports = Object.assign(tsPreset);
diff --git a/src/components/ExternalLink/index.tsx b/src/components/ExternalLink/index.tsx
@@ -1,18 +1,21 @@
-import React from "react";
-import {ExternalLinkGraphic} from "./styles";
-import {trackExternalLink} from "../../utils/track";
+import React from 'react';
+import { ExternalLinkGraphic } from './styles';
+import { trackExternalLink } from '../../utils/track';
+import { ExternalLinkIcon } from '../Icons';
 
 type ExternalLinkProps = {
   graphic?: string;
   href: string;
   anchorTitle?: string;
+  icon?: boolean;
 };
 
 const ExternalLink: React.FC<ExternalLinkProps> = ({
   children,
   graphic,
   href,
   anchorTitle,
+  icon
 }) => {
   return (
     <a
@@ -31,6 +34,7 @@ const ExternalLink: React.FC<ExternalLinkProps> = ({
           src={`/assets/external-link-${graphic}.svg`}
         />
       )}
+      {icon && <ExternalLinkIcon />}
     </a>
   );
 };

diff --git a/src/components/Feedback/__tests__/index.test.tsx b/src/components/Feedback/__tests__/index.test.tsx
@@ -24,8 +24,8 @@ describe('Feedback', () => {
 
     render(component);
 
-    const thumbsUp = screen.getByText('Yes');
-    const thumbsDown = screen.getByText('No');
+    const thumbsUp = screen.getByLabelText('Yes');
+    const thumbsDown = screen.getByLabelText('No');
 
     expect(thumbsUp).toBeInTheDocument();
     expect(thumbsDown).toBeInTheDocument();
@@ -36,8 +36,8 @@ describe('Feedback', () => {
 
     render(component);
 
-    const thumbsUp = screen.getByText('Yes');
-    const thumbsDown = screen.getByText('No');
+    const thumbsUp = screen.getByLabelText('Yes');
+    const thumbsDown = screen.getByLabelText('No');
 
     expect(thumbsUp).toBeInTheDocument();
     expect(thumbsDown).toBeInTheDocument();
@@ -52,12 +52,11 @@ describe('Feedback', () => {
 
   it('should call trackFeedbackSubmission request when either button is clicked', async () => {
     jest.spyOn(trackModule, 'trackFeedbackSubmission');
-
     const component = <Feedback />;
 
     render(component);
 
-    const thumbsDown = screen.getByText('No');
+    const thumbsDown = screen.getByLabelText('No');
 
     userEvent.click(thumbsDown);
 

diff --git a/src/components/Feedback/index.tsx b/src/components/Feedback/index.tsx
@@ -1,18 +1,26 @@
-import { useCallback, useRef, useState } from 'react';
+import { forwardRef, useCallback, useState } from 'react';
 import {
   FeedbackContainer,
   VoteButton,
+  VoteButtonAfter,
   VoteButtonsContainer,
-  Toggle,
-  FeedbackMobileContainer,
-  ThankYouContainer
+  FeedbackText,
+  FeedbackTextAfter,
+  ButtonStyles
 } from './styles';
-import { useEffect } from 'react';
 import { trackFeedbackSubmission } from '../../utils/track';
+import {
+  ThumbsUpIcon,
+  ThumbsDownIcon,
+  ThumbsUpFilledIcon,
+  ThumbsDownFilledIcon
+} from '../Icons';
+import ExternalLink from '../ExternalLink';
 
 enum FeedbackState {
   START = 'START',
-  END = 'END',
+  UP = 'UP',
+  DOWN = 'DOWN',
   HIDDEN = 'HIDDEN'
 }
 
@@ -23,99 +31,173 @@ type Feedback = {
   comment?: string;
 };
 
-export default function Feedback() {
-  const [state, setState] = useState<FeedbackState>(FeedbackState.START);
-  const feedbackQuestion = 'Was this page helpful?';
-  const feedbackAppreciation = 'Thank you for your feedback!';
+// eslint-disable-next-line no-empty-pattern
+const Feedback = forwardRef(function Feedback({}, ref) {
+  const [state, setState] = useState(FeedbackState.START);
+
+  // Feedback Component Customizations
+  const c = {
+    feedbackQuestion: 'Was this page helpful?',
+    yesVoteResponse: 'Thanks for your feedback!',
+    noVoteResponse: 'Thanks for your feedback!',
+    noVoteCTA: 'Can you provide more details?',
+    noVoteCTAButton: 'File an issue on GitHub',
+    ctaIcon: 'external',
+    iconPosition: 'right',
+    buttonLink: 'https://github.com/aws-amplify/docs/issues/new/choose'
+  };
 
-  const onYesVote = useCallback(() => {
-    setState(FeedbackState.END);
+  let currentState = state;
 
+  const onYesVote = useCallback((e) => {
     trackFeedbackSubmission(true);
-  }, []);
+    const yesButton = e.currentTarget;
+    const noButton = yesButton.nextSibling;
+    const feedbackComponent = yesButton.parentElement.parentElement;
+    const feedbackText = feedbackComponent.getElementsByTagName('p')[0];
+    const feedbackTextWidth = feedbackText.offsetWidth;
+
+    const transitionUpButton = [
+      {
+        maxWidth: yesButton.offsetWidth + 'px',
+        overflow: 'visible'
+      },
+      {
+        maxWidth: '40px',
+        overflow: 'hidden',
+        color: 'green',
+        border: '1px solid green',
+        transform: `translateX(-${feedbackTextWidth}px)`,
+        marginLeft: '0px'
+      }
+    ];
+
+    const transitionDownButton = [
+      {
+        maxWidth: noButton.offsetWidth + 'px',
+        overflow: 'visible'
+      },
+      {
+        maxWidth: 0,
+        overflow: 'hidden',
+        margin: 0,
+        padding: 0,
+        border: 'none'
+      }
+    ];
+
+    const transitionFeedbackText = [
+      { transform: 'translateX(-40px)', opacity: 0 }
+    ];
+
+    const animationTiming = {
+      duration: 300,
+      iterations: 1,
+      fill: 'forwards'
+    };
+
+    yesButton.animate(transitionUpButton, animationTiming);
+    noButton.animate(transitionDownButton, animationTiming);
+    feedbackText.animate(transitionFeedbackText, animationTiming);
 
-  const onNoVote = useCallback(() => {
-    setState(FeedbackState.END);
+    setTimeout(function() {
+      currentState = FeedbackState.UP;
+      setState(currentState);
+    }, 300);
+  }, []);
 
+  const onNoVote = useCallback((e) => {
     trackFeedbackSubmission(false);
+    const feedbackContent = e.currentTarget.parentNode.parentNode;
+
+    feedbackContent.classList.add('fadeOut');
+
+    setTimeout(function() {
+      currentState = FeedbackState.DOWN;
+      feedbackContent.classList.remove('fadeOut');
+      feedbackContent.classList.add('fadeIn');
+      setState(currentState);
+    }, 300);
   }, []);
 
   return (
     <FeedbackContainer
-      style={state === FeedbackState.HIDDEN ? { display: 'none' } : {}}
+      id="feedback-container"
+      ref={ref}
+      aria-hidden={state == FeedbackState.UP ? true : false}
     >
-      {state == FeedbackState.START ? (
-        <>
-          <p>{feedbackQuestion}</p>
-          <VoteButtonsContainer>
-            <VoteButton onClick={onYesVote}>
-              <img src="/assets/thumbs-up.svg" alt="Thumbs up" />
-              Yes
-            </VoteButton>
-            <VoteButton onClick={onNoVote}>
-              <img src="/assets/thumbs-down.svg" alt="Thumbs down" />
-              No
-            </VoteButton>
-          </VoteButtonsContainer>
-        </>
-      ) : (
-        <ThankYouContainer>
-          <p>{feedbackAppreciation}</p>
-        </ThankYouContainer>
-      )}
+      {(() => {
+        switch (state) {
+          case 'START':
+            return (
+              <div
+                id="start-state"
+                aria-label={c.feedbackQuestion}
+                tabIndex={0}
+              >
+                <FeedbackText>{c.feedbackQuestion}</FeedbackText>
+                <VoteButtonsContainer>
+                  <VoteButton
+                    onClick={onYesVote}
+                    aria-label="Yes"
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <ThumbsUpIcon />
+                    <FeedbackText>Yes</FeedbackText>
+                  </VoteButton>
+                  <VoteButton
+                    onClick={onNoVote}
+                    aria-label="No"
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <ThumbsDownIcon />
+                    <FeedbackText>No</FeedbackText>
+                  </VoteButton>
+                </VoteButtonsContainer>
+              </div>
+            );
+          case 'UP':
+            return (
+              <div className="up">
+                <VoteButtonsContainer className="up-response">
+                  <VoteButtonAfter className="up-response">
+                    <ThumbsUpFilledIcon />
+                  </VoteButtonAfter>
+                  <FeedbackTextAfter className="up-response">
+                    {c.yesVoteResponse}
+                  </FeedbackTextAfter>
+                </VoteButtonsContainer>
+              </div>
+            );
+          case 'DOWN':
+            return (
+              <div className="down">
+                <VoteButtonsContainer className="down-response">
+                  <VoteButtonAfter className="down-response">
+                    <ThumbsDownFilledIcon />
+                  </VoteButtonAfter>
+                  <FeedbackTextAfter className="down-response">
+                    {c.noVoteResponse}
+                  </FeedbackTextAfter>
+                </VoteButtonsContainer>
+                <FeedbackTextAfter className="cta">
+                  {c.noVoteCTA}
+                </FeedbackTextAfter>
+                <ButtonStyles>
+                  <ExternalLink href={c.buttonLink} icon={true}>
+                    {c.noVoteCTAButton}
+                  </ExternalLink>
+                </ButtonStyles>
+              </div>
+            );
+          default:
+            return <div></div>;
+        }
+      })()}
     </FeedbackContainer>
   );
-}
+});
 
-export function FeedbackToggle() {
-  const [inView, setInView] = useState(false);
-  const feedbackContainer = useRef(null);
-
-  function toggleView() {
-    if (inView) {
-      setInView(false);
-    } else {
-      setInView(true);
-    }
-  }
-
-  function handleClickOutside(e) {
-    if (
-      feedbackContainer.current &&
-      feedbackContainer.current.contains(e.target)
-    ) {
-      // inside click
-      return;
-    }
-    // outside click
-    setInView(false);
-  }
-
-  useEffect(() => {
-    if (inView) {
-      document.addEventListener('mousedown', handleClickOutside);
-    } else {
-      document.removeEventListener('mousedown', handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [inView]);
-
-  return (
-    <div ref={feedbackContainer}>
-      <FeedbackMobileContainer style={inView ? {} : { display: 'none' }}>
-        <Feedback></Feedback>
-      </FeedbackMobileContainer>
-      <Toggle
-        onClick={() => {
-          toggleView();
-        }}
-      >
-        <img src="/assets/thumbs-up.svg" alt="Thumbs up" />
-        <img src="/assets/thumbs-down.svg" alt="Thumbs down" />
-      </Toggle>
-    </div>
-  );
-}
+export default Feedback;