-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add match feedback inline (#264)
* First pass at inline feedback widget * Remove feedback URL where it's not needed * Tweak messaging; border-box styles * Update src/css/Feedback.scss Co-authored-by: Rhys Mills <34686302+rhystmills@users.noreply.github.com> * Align textarea with form to prevent a shrinking popover resulting in the cursor leaving the popover boundary --------- Co-authored-by: Rhys Mills <34686302+rhystmills@users.noreply.github.com>
- Loading branch information
1 parent
4dd50cb
commit f72421f
Showing
10 changed files
with
238 additions
and
50 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 |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| .Feedback__container { | ||
| margin-top: $gutter-width; | ||
| width: 100%; | ||
| font-size: $font-size-small; | ||
| a { | ||
| color: $match-gray; | ||
| } | ||
| } | ||
|
|
||
| .Feedback__responses { | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: calc($gutter-width); | ||
| margin-top: calc($gutter-width / 2); | ||
| } | ||
|
|
||
| .Feedback__response { | ||
| display: flex; | ||
| align-items: center; | ||
| width: 100%; | ||
| border: none; | ||
| outline: none; | ||
| padding: $gutter-width; | ||
| gap: calc($gutter-width / 2); | ||
| border-radius: $base-border-radius; | ||
| font-weight: normal; | ||
| font-size: $font-size-base; | ||
| background-color: $match-feedback-background-color; | ||
| cursor: pointer; | ||
| &:hover { | ||
| background-color: darken($match-feedback-background-color, 5%); | ||
| } | ||
| svg { | ||
| color: darken($match-feedback-background-color, 40%); | ||
| } | ||
| } | ||
|
|
||
| .Feedback__feedback-detail { | ||
| width: 100%; | ||
| margin-top: calc($gutter-width / 2); | ||
| padding: calc($gutter-width / 2); | ||
| border-color: $match-gray; | ||
| border-radius: $base-border-radius; | ||
| font-family: inherit; | ||
| resize: vertical; | ||
| min-height: 110px; | ||
| } | ||
|
|
||
| .Feedback__response-send { | ||
| margin-top: calc($gutter-width / 2); | ||
| font-weight: bold; | ||
| background-color: $match-feedback-send-background-color; | ||
| color: white; | ||
| svg { | ||
| color: white; | ||
| } | ||
| &:hover { | ||
| background-color: $composer-primary-hover; | ||
| } | ||
| } | ||
|
|
||
| .Feedback__feedback-sent { | ||
| font-size: $font-size-base; | ||
| min-height: 100px; | ||
| } |
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
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,119 @@ | ||
| import React, { useCallback, useContext, useState } from "react"; | ||
| import { IMatch } from "../interfaces/IMatch"; | ||
| import TelemetryContext from "../contexts/TelemetryContext"; | ||
| import { MoreHoriz, Announcement, MailOutline } from "@mui/icons-material"; | ||
|
|
||
| const responses = [ | ||
| "This doesn't match the style guide.", | ||
| "This has been flagged incorrectly.", | ||
| "This is a valid word." | ||
| ]; | ||
|
|
||
| const FeedbackFormStates = { | ||
| CLOSED: "CLOSED", | ||
| SELECT_RESPONSE: "SELECT_RESPONSE", | ||
| ADD_DETAIL: "ADD_DETAIL", | ||
| FEEDBACK_SENT: "FEEDBACK_SENT" | ||
| } as const; | ||
|
|
||
| export const Feedback = ({ | ||
| match, | ||
| documentUrl | ||
| }: { | ||
| match: IMatch; | ||
| documentUrl: string; | ||
| }) => { | ||
| const [formState, setFormState] = useState<keyof typeof FeedbackFormStates>( | ||
| FeedbackFormStates.CLOSED | ||
| ); | ||
| const [inputValue, setInputValue] = useState<string>(""); | ||
| const { telemetryAdapter } = useContext(TelemetryContext); | ||
| const sendFeedback = useCallback( | ||
| (e: React.MouseEvent<HTMLElement>) => { | ||
| e.preventDefault(); | ||
| telemetryAdapter?.feedbackReceived(match, inputValue, documentUrl); | ||
| setFormState(FeedbackFormStates.FEEDBACK_SENT); | ||
| }, | ||
| [setFormState, match, inputValue, documentUrl] | ||
| ); | ||
|
|
||
| const getFormPanelFromState = useCallback( | ||
| (state: keyof typeof FeedbackFormStates) => { | ||
| switch (state) { | ||
| case FeedbackFormStates.CLOSED: { | ||
| return ( | ||
| <a | ||
| href="#" | ||
| onClick={e => { | ||
| e.preventDefault(); | ||
| setFormState(FeedbackFormStates.SELECT_RESPONSE); | ||
| }} | ||
| > | ||
| Issue with this result? Tell us! | ||
| </a> | ||
| ); | ||
| } | ||
| case FeedbackFormStates.SELECT_RESPONSE: { | ||
| return ( | ||
| <div className="Feedback__responses animation__pop-in"> | ||
| {responses.map(response => ( | ||
| <button | ||
| className="Feedback__response" | ||
| key={response} | ||
| onClick={() => { | ||
| setInputValue(response); | ||
| setFormState(FeedbackFormStates.ADD_DETAIL); | ||
| }} | ||
| > | ||
| <Announcement fontSize="small" /> {response} | ||
| </button> | ||
| ))} | ||
| <button | ||
| className="Feedback__response" | ||
| onClick={() => { | ||
| setFormState(FeedbackFormStates.ADD_DETAIL); | ||
| }} | ||
| > | ||
| <MoreHoriz fontSize="small" /> Other | ||
| </button> | ||
| </div> | ||
| ); | ||
| } | ||
| case FeedbackFormStates.ADD_DETAIL: { | ||
| return ( | ||
| <div className="Feedback__add-detail animation__pop-in"> | ||
| <div> | ||
| <label htmlFor="Feedback__feedback-detail"> | ||
| Add additional information here | ||
| </label> | ||
| <textarea | ||
| id="Feedback__feedback-detail" | ||
| className="Feedback__feedback-detail" | ||
| value={inputValue} | ||
| onChange={e => setInputValue(e.target.value)} | ||
| /> | ||
| </div> | ||
| <div | ||
| className="Feedback__response Feedback__response-send" | ||
| onClick={sendFeedback} | ||
| > | ||
| <MailOutline fontSize="small" /> | ||
| Send feedback | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| case FeedbackFormStates.FEEDBACK_SENT: { | ||
| return <div className="Feedback__feedback-sent">Thanks for your feedback – we really appreciate it.</div> | ||
| } | ||
| } | ||
| }, | ||
| [inputValue, setInputValue, formState, sendFeedback] | ||
| ); | ||
|
|
||
| return ( | ||
| <div className="Feedback__container"> | ||
| {getFormPanelFromState(formState)} | ||
| </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
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
Oops, something went wrong.