From e3d200bd118c1f260b415560ad45293e6b1d7ced Mon Sep 17 00:00:00 2001 From: Maxi Ferreira Date: Mon, 22 Aug 2022 09:16:50 -0700 Subject: [PATCH] HSDS-277: Support for Freeform Text Survey (#1079) * feat(components-message-card): added support for text only survey * 3.57.0-0 * feat(components-message-card): refactored text only survey label * feat(components-message-card): fixed unit test --- package-lock.json | 4 +- package.json | 2 +- .../MessageCard/MessageCard.stories.mdx | 20 ++++++++++ .../MessageCard/MessageCard.test.js | 23 +++++++++++ .../survey/MessageCard.Survey.css.js | 16 ++++++++ .../components/survey/MessageCard.Survey.jsx | 38 ++++++++++++++----- src/utilities/pkg.js | 2 +- 7 files changed, 91 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index c2cf4f2d3..6374efa35 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@helpscout/hsds-react", - "version": "3.56.0", + "version": "3.57.0-0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@helpscout/hsds-react", - "version": "3.56.0", + "version": "3.57.0-0", "license": "MIT", "dependencies": { "@datepicker-react/hooks": "^2.7.0", diff --git a/package.json b/package.json index 3035d7973..f791874c6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@helpscout/hsds-react", - "version": "3.56.0", + "version": "3.57.0-0", "private": false, "main": "dist/index.js", "module": "dist/index.es.js", diff --git a/src/components/MessageCard/MessageCard.stories.mdx b/src/components/MessageCard/MessageCard.stories.mdx index 9b50b86b2..f36420cab 100644 --- a/src/components/MessageCard/MessageCard.stories.mdx +++ b/src/components/MessageCard/MessageCard.stories.mdx @@ -315,6 +315,26 @@ This component renders a Message Card Notification with (optional) Title, Subtit +# With Text survey + + + + + ( + console.log(data)} + /> + )} + /> + + + + # With video diff --git a/src/components/MessageCard/MessageCard.test.js b/src/components/MessageCard/MessageCard.test.js index 9b68d78dc..8d712125a 100644 --- a/src/components/MessageCard/MessageCard.test.js +++ b/src/components/MessageCard/MessageCard.test.js @@ -519,6 +519,29 @@ describe('Surveys', () => { expect(screen.queryByLabelText(formLabel)).toBeInTheDocument() }) + test('Renders a feedback form by default if isTextOnlySurvey is set', () => { + const onSubmit = jest.fn() + const formLabel = 'Tell us more...' + + render( + + ) + + expect(screen.queryByLabelText(formLabel)).toBeInTheDocument() + + userEvent.type(screen.getByLabelText(formLabel), 'Great question') + userEvent.click(screen.getByRole('button', { name: 'Send' })) + + expect(onSubmit).toHaveBeenCalledWith({ + feedback: 'Great question', + selected: null, + }) + }) + test('Renders a feedback form delayed after selection if withShowFeedbackFormDelay is set', () => { const formLabel = 'Tell us more...' diff --git a/src/components/MessageCard/components/survey/MessageCard.Survey.css.js b/src/components/MessageCard/components/survey/MessageCard.Survey.css.js index 1315177bf..63953d0ea 100644 --- a/src/components/MessageCard/components/survey/MessageCard.Survey.css.js +++ b/src/components/MessageCard/components/survey/MessageCard.Survey.css.js @@ -18,6 +18,13 @@ export const SurveyUI = styled('div')` margin: 0px -16px -16px -16px; padding: 15px; position: relative; + + ${({ $isTextOnly }) => + $isTextOnly && + css` + padding-top: 0px; + background: transparent; + `}; ` export const SurveyOptionsUI = styled('div')` @@ -181,6 +188,15 @@ export const FeedbackFormUI = styled('form')` overflow: hidden; animation: HeightAnimation 400ms; + ${({ $isTextOnly }) => + $isTextOnly && + css` + // This essentially resets the padding and margin to 0, but leaving space for the focus state + // as mentioned in the comment above. + padding-top: 1px; + margin-top: -1px; + `}; + @keyframes HeightAnimation { 0% { max-height: 0; diff --git a/src/components/MessageCard/components/survey/MessageCard.Survey.jsx b/src/components/MessageCard/components/survey/MessageCard.Survey.jsx index db4d7fe69..4602cc09d 100644 --- a/src/components/MessageCard/components/survey/MessageCard.Survey.jsx +++ b/src/components/MessageCard/components/survey/MessageCard.Survey.jsx @@ -13,6 +13,7 @@ import Input from '../../../Input' import Spinner from '../../../Spinner' import Icon from '../../../Icon' import Truncate from '../../../Truncate' +import VisuallyHidden from '../../../VisuallyHidden' function noop() {} @@ -29,12 +30,14 @@ export const MessageCardSurvey = ({ showSpinner = false, showConfirmationMessage = false, theme, + isTextOnlySurvey = false, withShowFeedbackFormDelay = false, }) => { const [feedback, setFeedback] = React.useState('') const [selected, setSelected] = React.useState(null) const [showFeedbackForm, setShowFeedbackForm] = React.useState(false) - const shouldShowFeedbackForm = showFeedbackForm || forceFeedbackForm + const shouldShowFeedbackForm = + showFeedbackForm || forceFeedbackForm || isTextOnlySurvey const isMounted = useRef(true) useEffect(() => { @@ -87,17 +90,30 @@ export const MessageCardSurvey = ({ withFeedbackForm, } + const formLabel = ( + + {feedbackFormText} + + ) + return ( - - - {children} - + + {children && ( + + {children} + + )} {shouldShowFeedbackForm && ( - - - {feedbackFormText} - + + {isTextOnlySurvey ? ( + {formLabel} + ) : ( + formLabel + )} setFeedback(value)} + placeholder={isTextOnlySurvey ? feedbackFormText : ''} />