Skip to content

Commit a1673a8

Browse files
katiegoinesJacob Logankatiegoines
authored
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 <[email protected]> Co-authored-by: katiegoines <[email protected]>
1 parent 5c551ed commit a1673a8

26 files changed

+622
-867
lines changed

‎jest.setup.js

+5-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,6 @@
11
// Setup file to extend jest-dom, referenced in packages.json under "jest"
2-
import '@testing-library/jest-dom/extend-expect';
2+
import '@testing-library/jest-dom/extend-expect';
3+
4+
if (typeof window.URL.createObjectURL === 'undefined') {
5+
window.URL.createObjectURL = jest.fn();
6+
}

‎next.config.mjs

+1-6
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,7 @@ export default async (phase, { defaultConfig }) => {
7070
},
7171
exportPathMap,
7272
trailingSlash: true,
73-
transpilePackages: [
74-
'@algolia/autocomplete-shared',
75-
'@cloudscape-design/components',
76-
'@cloudscape-design/component-toolkit',
77-
'next-image-export-optimizer'
78-
],
73+
transpilePackages: ['@algolia/autocomplete-shared', 'next-image-export-optimizer'],
7974
// eslint-disable-next-line @typescript-eslint/require-await
8075
async headers() {
8176
return [

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,6 @@
5757
"unist-util-visit": "^4.1.0"
5858
},
5959
"devDependencies": {
60-
"@cloudscape-design/jest-preset": "^2.0.0",
6160
"@mdx-js/loader": "^1.6.22",
6261
"@next/mdx": "^10.1.3",
6362
"@stencil/core": "^1.17.0",

‎preset.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
const tsPreset = require('ts-jest/presets/js-with-babel/jest-preset');
2-
const cloudscapePreset = require('@cloudscape-design/jest-preset');
32

4-
module.exports = Object.assign(tsPreset, cloudscapePreset);
3+
module.exports = Object.assign(tsPreset);

‎src/components/ExternalLink/index.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
1-
import React from "react";
2-
import {ExternalLinkGraphic} from "./styles";
3-
import {trackExternalLink} from "../../utils/track";
1+
import React from 'react';
2+
import { ExternalLinkGraphic } from './styles';
3+
import { trackExternalLink } from '../../utils/track';
4+
import { ExternalLinkIcon } from '../Icons';
45

56
type ExternalLinkProps = {
67
graphic?: string;
78
href: string;
89
anchorTitle?: string;
10+
icon?: boolean;
911
};
1012

1113
const ExternalLink: React.FC<ExternalLinkProps> = ({
1214
children,
1315
graphic,
1416
href,
1517
anchorTitle,
18+
icon
1619
}) => {
1720
return (
1821
<a
@@ -31,6 +34,7 @@ const ExternalLink: React.FC<ExternalLinkProps> = ({
3134
src={`/assets/external-link-${graphic}.svg`}
3235
/>
3336
)}
37+
{icon && <ExternalLinkIcon />}
3438
</a>
3539
);
3640
};

‎src/components/Feedback/__tests__/index.test.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ describe('Feedback', () => {
2424

2525
render(component);
2626

27-
const thumbsUp = screen.getByText('Yes');
28-
const thumbsDown = screen.getByText('No');
27+
const thumbsUp = screen.getByLabelText('Yes');
28+
const thumbsDown = screen.getByLabelText('No');
2929

3030
expect(thumbsUp).toBeInTheDocument();
3131
expect(thumbsDown).toBeInTheDocument();
@@ -36,8 +36,8 @@ describe('Feedback', () => {
3636

3737
render(component);
3838

39-
const thumbsUp = screen.getByText('Yes');
40-
const thumbsDown = screen.getByText('No');
39+
const thumbsUp = screen.getByLabelText('Yes');
40+
const thumbsDown = screen.getByLabelText('No');
4141

4242
expect(thumbsUp).toBeInTheDocument();
4343
expect(thumbsDown).toBeInTheDocument();
@@ -52,12 +52,11 @@ describe('Feedback', () => {
5252

5353
it('should call trackFeedbackSubmission request when either button is clicked', async () => {
5454
jest.spyOn(trackModule, 'trackFeedbackSubmission');
55-
5655
const component = <Feedback />;
5756

5857
render(component);
5958

60-
const thumbsDown = screen.getByText('No');
59+
const thumbsDown = screen.getByLabelText('No');
6160

6261
userEvent.click(thumbsDown);
6362

‎src/components/Feedback/index.tsx

+170-88
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,26 @@
1-
import { useCallback, useRef, useState } from 'react';
1+
import { forwardRef, useCallback, useState } from 'react';
22
import {
33
FeedbackContainer,
44
VoteButton,
5+
VoteButtonAfter,
56
VoteButtonsContainer,
6-
Toggle,
7-
FeedbackMobileContainer,
8-
ThankYouContainer
7+
FeedbackText,
8+
FeedbackTextAfter,
9+
ButtonStyles
910
} from './styles';
10-
import { useEffect } from 'react';
1111
import { trackFeedbackSubmission } from '../../utils/track';
12+
import {
13+
ThumbsUpIcon,
14+
ThumbsDownIcon,
15+
ThumbsUpFilledIcon,
16+
ThumbsDownFilledIcon
17+
} from '../Icons';
18+
import ExternalLink from '../ExternalLink';
1219

1320
enum FeedbackState {
1421
START = 'START',
15-
END = 'END',
22+
UP = 'UP',
23+
DOWN = 'DOWN',
1624
HIDDEN = 'HIDDEN'
1725
}
1826

@@ -23,99 +31,173 @@ type Feedback = {
2331
comment?: string;
2432
};
2533

26-
export default function Feedback() {
27-
const [state, setState] = useState<FeedbackState>(FeedbackState.START);
28-
const feedbackQuestion = 'Was this page helpful?';
29-
const feedbackAppreciation = 'Thank you for your feedback!';
34+
// eslint-disable-next-line no-empty-pattern
35+
const Feedback = forwardRef(function Feedback({}, ref) {
36+
const [state, setState] = useState(FeedbackState.START);
37+
38+
// Feedback Component Customizations
39+
const c = {
40+
feedbackQuestion: 'Was this page helpful?',
41+
yesVoteResponse: 'Thanks for your feedback!',
42+
noVoteResponse: 'Thanks for your feedback!',
43+
noVoteCTA: 'Can you provide more details?',
44+
noVoteCTAButton: 'File an issue on GitHub',
45+
ctaIcon: 'external',
46+
iconPosition: 'right',
47+
buttonLink: 'https://github.com/aws-amplify/docs/issues/new/choose'
48+
};
3049

31-
const onYesVote = useCallback(() => {
32-
setState(FeedbackState.END);
50+
let currentState = state;
3351

52+
const onYesVote = useCallback((e) => {
3453
trackFeedbackSubmission(true);
35-
}, []);
54+
const yesButton = e.currentTarget;
55+
const noButton = yesButton.nextSibling;
56+
const feedbackComponent = yesButton.parentElement.parentElement;
57+
const feedbackText = feedbackComponent.getElementsByTagName('p')[0];
58+
const feedbackTextWidth = feedbackText.offsetWidth;
59+
60+
const transitionUpButton = [
61+
{
62+
maxWidth: yesButton.offsetWidth + 'px',
63+
overflow: 'visible'
64+
},
65+
{
66+
maxWidth: '40px',
67+
overflow: 'hidden',
68+
color: 'green',
69+
border: '1px solid green',
70+
transform: `translateX(-${feedbackTextWidth}px)`,
71+
marginLeft: '0px'
72+
}
73+
];
74+
75+
const transitionDownButton = [
76+
{
77+
maxWidth: noButton.offsetWidth + 'px',
78+
overflow: 'visible'
79+
},
80+
{
81+
maxWidth: 0,
82+
overflow: 'hidden',
83+
margin: 0,
84+
padding: 0,
85+
border: 'none'
86+
}
87+
];
88+
89+
const transitionFeedbackText = [
90+
{ transform: 'translateX(-40px)', opacity: 0 }
91+
];
92+
93+
const animationTiming = {
94+
duration: 300,
95+
iterations: 1,
96+
fill: 'forwards'
97+
};
98+
99+
yesButton.animate(transitionUpButton, animationTiming);
100+
noButton.animate(transitionDownButton, animationTiming);
101+
feedbackText.animate(transitionFeedbackText, animationTiming);
36102

37-
const onNoVote = useCallback(() => {
38-
setState(FeedbackState.END);
103+
setTimeout(function() {
104+
currentState = FeedbackState.UP;
105+
setState(currentState);
106+
}, 300);
107+
}, []);
39108

109+
const onNoVote = useCallback((e) => {
40110
trackFeedbackSubmission(false);
111+
const feedbackContent = e.currentTarget.parentNode.parentNode;
112+
113+
feedbackContent.classList.add('fadeOut');
114+
115+
setTimeout(function() {
116+
currentState = FeedbackState.DOWN;
117+
feedbackContent.classList.remove('fadeOut');
118+
feedbackContent.classList.add('fadeIn');
119+
setState(currentState);
120+
}, 300);
41121
}, []);
42122

43123
return (
44124
<FeedbackContainer
45-
style={state === FeedbackState.HIDDEN ? { display: 'none' } : {}}
125+
id="feedback-container"
126+
ref={ref}
127+
aria-hidden={state == FeedbackState.UP ? true : false}
46128
>
47-
{state == FeedbackState.START ? (
48-
<>
49-
<p>{feedbackQuestion}</p>
50-
<VoteButtonsContainer>
51-
<VoteButton onClick={onYesVote}>
52-
<img src="/assets/thumbs-up.svg" alt="Thumbs up" />
53-
Yes
54-
</VoteButton>
55-
<VoteButton onClick={onNoVote}>
56-
<img src="/assets/thumbs-down.svg" alt="Thumbs down" />
57-
No
58-
</VoteButton>
59-
</VoteButtonsContainer>
60-
</>
61-
) : (
62-
<ThankYouContainer>
63-
<p>{feedbackAppreciation}</p>
64-
</ThankYouContainer>
65-
)}
129+
{(() => {
130+
switch (state) {
131+
case 'START':
132+
return (
133+
<div
134+
id="start-state"
135+
aria-label={c.feedbackQuestion}
136+
tabIndex={0}
137+
>
138+
<FeedbackText>{c.feedbackQuestion}</FeedbackText>
139+
<VoteButtonsContainer>
140+
<VoteButton
141+
onClick={onYesVote}
142+
aria-label="Yes"
143+
role="button"
144+
tabIndex={0}
145+
>
146+
<ThumbsUpIcon />
147+
<FeedbackText>Yes</FeedbackText>
148+
</VoteButton>
149+
<VoteButton
150+
onClick={onNoVote}
151+
aria-label="No"
152+
role="button"
153+
tabIndex={0}
154+
>
155+
<ThumbsDownIcon />
156+
<FeedbackText>No</FeedbackText>
157+
</VoteButton>
158+
</VoteButtonsContainer>
159+
</div>
160+
);
161+
case 'UP':
162+
return (
163+
<div className="up">
164+
<VoteButtonsContainer className="up-response">
165+
<VoteButtonAfter className="up-response">
166+
<ThumbsUpFilledIcon />
167+
</VoteButtonAfter>
168+
<FeedbackTextAfter className="up-response">
169+
{c.yesVoteResponse}
170+
</FeedbackTextAfter>
171+
</VoteButtonsContainer>
172+
</div>
173+
);
174+
case 'DOWN':
175+
return (
176+
<div className="down">
177+
<VoteButtonsContainer className="down-response">
178+
<VoteButtonAfter className="down-response">
179+
<ThumbsDownFilledIcon />
180+
</VoteButtonAfter>
181+
<FeedbackTextAfter className="down-response">
182+
{c.noVoteResponse}
183+
</FeedbackTextAfter>
184+
</VoteButtonsContainer>
185+
<FeedbackTextAfter className="cta">
186+
{c.noVoteCTA}
187+
</FeedbackTextAfter>
188+
<ButtonStyles>
189+
<ExternalLink href={c.buttonLink} icon={true}>
190+
{c.noVoteCTAButton}
191+
</ExternalLink>
192+
</ButtonStyles>
193+
</div>
194+
);
195+
default:
196+
return <div></div>;
197+
}
198+
})()}
66199
</FeedbackContainer>
67200
);
68-
}
201+
});
69202

70-
export function FeedbackToggle() {
71-
const [inView, setInView] = useState(false);
72-
const feedbackContainer = useRef(null);
73-
74-
function toggleView() {
75-
if (inView) {
76-
setInView(false);
77-
} else {
78-
setInView(true);
79-
}
80-
}
81-
82-
function handleClickOutside(e) {
83-
if (
84-
feedbackContainer.current &&
85-
feedbackContainer.current.contains(e.target)
86-
) {
87-
// inside click
88-
return;
89-
}
90-
// outside click
91-
setInView(false);
92-
}
93-
94-
useEffect(() => {
95-
if (inView) {
96-
document.addEventListener('mousedown', handleClickOutside);
97-
} else {
98-
document.removeEventListener('mousedown', handleClickOutside);
99-
}
100-
101-
return () => {
102-
document.removeEventListener('mousedown', handleClickOutside);
103-
};
104-
}, [inView]);
105-
106-
return (
107-
<div ref={feedbackContainer}>
108-
<FeedbackMobileContainer style={inView ? {} : { display: 'none' }}>
109-
<Feedback></Feedback>
110-
</FeedbackMobileContainer>
111-
<Toggle
112-
onClick={() => {
113-
toggleView();
114-
}}
115-
>
116-
<img src="/assets/thumbs-up.svg" alt="Thumbs up" />
117-
<img src="/assets/thumbs-down.svg" alt="Thumbs down" />
118-
</Toggle>
119-
</div>
120-
);
121-
}
203+
export default Feedback;

0 commit comments

Comments
 (0)