-
Notifications
You must be signed in to change notification settings - Fork 112
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* first skeleton for the feedback component Signed-off-by: Huong Nguyen <huongg1409@gmail> * star component Signed-off-by: Huong Nguyen <huongg1409@gmail> * include feedback button Signed-off-by: Huong Nguyen <huongg1409@gmail> * send data to heap through feedback Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove unused prop and component Signed-off-by: Huong Nguyen <huongg1409@gmail> * add title for feedback button Signed-off-by: Huong Nguyen <huongg1409@gmail> * mood board Signed-off-by: Huong Nguyen <huongg1409@gmail> * update with final design Signed-off-by: Huong Nguyen <huongg1409@gmail> * include messages Signed-off-by: Huong Nguyen <huongg1409@gmail> * move to Feedback wrapper instead Signed-off-by: Huong Nguyen <huongg1409@gmail> * add local storage to track first time Signed-off-by: Huong Nguyen <huongg1409@gmail> * add key for Mood component Signed-off-by: Huong Nguyen <huongg1409@gmail> * draft version of local storage Signed-off-by: Huong Nguyen <huongg1409@gmail> * update styling Signed-off-by: Huong Nguyen <huongg1409@gmail> * break the title into 2 lines Signed-off-by: Huong Nguyen <huongg1409@gmail> * move mood to its own component Signed-off-by: Huong Nguyen <huongg1409@gmail> * include the release note Signed-off-by: Huong Nguyen <huongg1409@gmail> * fix eslint error Signed-off-by: Huong Nguyen <huongg1409@gmail> * Separate feedback to feedback-button and feedback-form to suit the logic Signed-off-by: Huong Nguyen <huongg1409@gmail> * tidy up code Signed-off-by: Huong Nguyen <huongg1409@gmail> * remove unused icon and components Signed-off-by: Huong Nguyen <huongg1409@gmail> * add transition for feedback-form and button Signed-off-by: Huong Nguyen <huongg1409@gmail> * include new message for cancel event Signed-off-by: Huong Nguyen <huongg1409@gmail> * update localStorage name Signed-off-by: Huong Nguyen <huongg1409@gmail> * move feedback to config Signed-off-by: Huong Nguyen <huongg1409@gmail> * update text area colour Signed-off-by: Huong Nguyen <huongg1409@gmail> * update font-size for text area and hover state for button Signed-off-by: Huong Nguyen <huongg1409@gmail> * update font for place holder in text area Signed-off-by: Huong Nguyen <huongg1409@gmail> * update font for place holder in text area in feedback Signed-off-by: Huong Nguyen <huongg1409@gmail> * re-run the test Signed-off-by: Huong Nguyen <huongg1409@gmail> * include classnames for icons Signed-off-by: Huong Nguyen <huongg1409@gmail> * test ci fail with main Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com> * config removed Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com> * config var added Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com> * include localStorage from config Signed-off-by: Huong Nguyen <huongg1409@gmail> --------- Signed-off-by: Huong Nguyen <huongg1409@gmail> Signed-off-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com> Co-authored-by: Huong Nguyen <huongg1409@gmail> Co-authored-by: Jitendra Gundaniya <jitendra_gundaniya@mckinsey.com>
- Loading branch information
3 people
authored
Sep 18, 2024
1 parent
8e622c0
commit 490416d
Showing
15 changed files
with
505 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -172,4 +172,4 @@ | |
| "not op_mini all" | ||
| ], | ||
| "snyk": true | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React from 'react'; | ||
| import classnames from 'classnames'; | ||
|
|
||
| import './feedback-button.scss'; | ||
|
|
||
| export const FeedbackButton = ({ onClick, visible, title }) => { | ||
| return ( | ||
| <button | ||
| className={classnames('feedback-button', { | ||
| 'feedback-button--visible': visible, | ||
| })} | ||
| onClick={onClick} | ||
| > | ||
| {title} | ||
| </button> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| .feedback-button { | ||
| background-color: #007bff; | ||
| border: none; | ||
| color: white; | ||
| cursor: pointer; | ||
| font-size: 16px; | ||
| height: 40px; | ||
| line-height: 40px; | ||
| opacity: 0; | ||
| position: fixed; | ||
| right: -96px; | ||
| text-align: center; | ||
| top: 50%; | ||
| padding: 0 16px; | ||
| transform: translateY(-50%) rotate(90deg); | ||
| } | ||
|
|
||
| .feedback-button--visible { | ||
| opacity: 1; | ||
| transition: opacity 0.5s ease-in; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import classnames from 'classnames'; | ||
| import Button from '../ui/button'; | ||
| import CloseIcon from '../icons/close'; | ||
| import { Mood } from '../mood/mood'; | ||
| import { getHeap } from '../../tracking'; | ||
| import { getDataTestAttribute } from '../../utils/get-data-test-attribute'; | ||
| import { loadLocalStorage, saveLocalStorage } from '../../store/helpers'; | ||
| import { localStorageFeedbackSeen } from '../../config'; | ||
|
|
||
| import './feedback-form.scss'; | ||
|
|
||
| export const FeedbackForm = ({ hideForm, title, usageContext }) => { | ||
| const [formStatus, setFormStatus] = useState('active'); // 'active', 'submitted', 'cancelled' | ||
| const [activeMood, setActiveMood] = useState(null); | ||
| const [feedbackText, setFeedbackText] = useState(''); | ||
|
|
||
| const handleFormAction = (action) => { | ||
| setFormStatus(action); | ||
|
|
||
| const timer = setTimeout(() => { | ||
| updateLocalStorageUsageContext(false); | ||
| hideForm(); | ||
| }, 4000); | ||
|
|
||
| return () => clearTimeout(timer); | ||
| }; | ||
|
|
||
| const updateLocalStorageUsageContext = (value) => { | ||
| const existingData = loadLocalStorage(localStorageFeedbackSeen) || {}; | ||
| existingData[usageContext] = value; | ||
| saveLocalStorage(localStorageFeedbackSeen, existingData); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| if (formStatus === 'submitted' || formStatus === 'cancelled') { | ||
| const timer = setTimeout(() => { | ||
| setFormStatus('active'); | ||
| setActiveMood(null); | ||
| setFeedbackText(''); | ||
| }, 4000); | ||
|
|
||
| return () => clearTimeout(timer); | ||
| } | ||
| }, [formStatus]); | ||
|
|
||
| const handleFormSubmit = (e) => { | ||
| e.preventDefault(); | ||
| handleFormAction('submitted'); | ||
| getHeap().track(getDataTestAttribute(usageContext, 'feedback-form'), { | ||
| rating: activeMood, | ||
| feedback: feedbackText, | ||
| }); | ||
| }; | ||
|
|
||
| const getMessages = () => { | ||
| if (formStatus === 'submitted') { | ||
| return 'Thank you for sharing feedback!'; | ||
| } | ||
| if (formStatus === 'cancelled') { | ||
| return ( | ||
| <> | ||
| You can provide feedback any time by using | ||
| <br /> | ||
| the feedback button in the sliced view. | ||
| </> | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| if (formStatus === 'submitted' || formStatus === 'cancelled') { | ||
| return ( | ||
| <div className="feedback-form--wrapper feedback-form--message"> | ||
| {getMessages()} | ||
| </div> | ||
| ); | ||
| } else { | ||
| return ( | ||
| <div | ||
| className={classnames('feedback-form--wrapper', { | ||
| 'feedback-form--wrapper-no-text-area': activeMood === null, | ||
| })} | ||
| > | ||
| <div | ||
| className="feedback-form--close-icon" | ||
| onClick={() => handleFormAction('cancelled')} | ||
| > | ||
| <CloseIcon /> | ||
| </div> | ||
| <h2 className="feedback-form--title">{title}</h2> | ||
| <div className="feedback-form"> | ||
| <Mood selectedMood={activeMood} onClick={setActiveMood} /> | ||
| {activeMood !== null && ( | ||
| <> | ||
| <textarea | ||
| className="feedback-form--text-area" | ||
| value={feedbackText} | ||
| onChange={(event) => setFeedbackText(event.target.value)} | ||
| placeholder="How can we improve this feature?" | ||
| /> | ||
| <Button type="submit" onClick={handleFormSubmit}> | ||
| Submit feedback | ||
| </Button> | ||
| </> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| @use '../../styles/variables' as colors; | ||
|
|
||
| @keyframes fadeIn { | ||
| from { | ||
| opacity: 0; | ||
| } | ||
|
|
||
| to { | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| .kui-theme--dark { | ||
| --feedback-form-bg: #{colors.$white-0}; | ||
| --feedback-form-content: #{colors.$slate-0}; | ||
| --feedback-form-title: #{colors.$black-900}; | ||
| --feedback-form--text-area--background: #{colors.$slate-200}; | ||
| --feedback-form--text-area-placeholder--color: #{colors.$black-200}; | ||
| } | ||
|
|
||
| .kui-theme--light { | ||
| --feedback-form-bg: #{colors.$black-900}; | ||
| --feedback-form-content: #{colors.$white-0}; | ||
| --feedback-form-title: #{colors.$white-0}; | ||
| --feedback-form--text-area--background: #{colors.$white-0}; | ||
| --feedback-form--text-area-placeholder--color: #{colors.$black-0}; | ||
| } | ||
|
|
||
| .feedback-form--wrapper { | ||
| animation: fadeIn 0.5s ease-in; | ||
| background-color: var(--feedback-form-bg); | ||
| border-radius: 8px 0 0 8px; | ||
| min-width: 312px; | ||
| padding: 24px 24px 36px; | ||
| position: fixed; | ||
| right: 0; | ||
| top: 320px; | ||
|
|
||
| .button__btn { | ||
| margin-top: 12px; | ||
| } | ||
| } | ||
|
|
||
| .feedback-form--wrapper-no-text-area { | ||
| padding-bottom: 68px; | ||
| } | ||
|
|
||
| .feedback-form--text-area::placeholder { | ||
| color: var(--feedback-form--text-area-placeholder--color); | ||
| margin: auto; /* Centers the placeholder text vertically */ | ||
| text-align: center; | ||
| font-family: Inter, sans-serif; | ||
| } | ||
|
|
||
| .feedback-form--text-area { | ||
| align-items: center; | ||
| background-color: transparent; | ||
| border: 1px solid grey; | ||
| color: var(--feedback-form-title); | ||
| display: flex; | ||
| font-size: 14px; | ||
| font-family: Inter, sans-serif; | ||
| height: 104px; | ||
| margin-top: 68px; | ||
| padding: 8px 12px; | ||
| resize: none; | ||
| text-align: left; | ||
| width: 364px; | ||
| } | ||
|
|
||
| .feedback-form--title { | ||
| color: var(--feedback-form-title); | ||
| font-size: 18px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 28px; | ||
| margin-top: 12px; | ||
| text-align: center; | ||
| margin-bottom: 24px; | ||
| } | ||
|
|
||
| .feedback-form--close-icon { | ||
| cursor: pointer; | ||
| height: 24px; | ||
| margin-left: auto; | ||
| width: 24px; | ||
|
|
||
| path { | ||
| fill: var(--feedback-form-title); | ||
| } | ||
| } | ||
|
|
||
| .feedback-form { | ||
| align-items: center; | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
|
|
||
| .button__btn { | ||
| border: 1px solid var(--feedback-form-title); | ||
| color: var(--feedback-form-title); | ||
| margin-top: 36px; | ||
| padding: 8px 12px; | ||
|
|
||
| &:hover { | ||
| background-color: var(--feedback-form-title); | ||
| color: var(--feedback-form-bg); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .feedback-form--message { | ||
| color: var(--feedback-form-title); | ||
| font-size: 14px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: 20px; | ||
| padding: 24px 36px; | ||
| width: auto; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.