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.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",

src/components/MessageCard/MessageCard.stories.mdx

@@ -315,6 +315,26 @@ This component renders a Message Card Notification with (optional) Title, Subtit
   </Story>
 </Canvas>
 
+# With Text survey
+
+<Canvas>
+  <Story name="With Text survey">
+    <MessageCardStoryWrapperUI>
+      <MessageCard
+        title="Which pizza do you like the most?"
+        body="Your feedback is valuable to us. Let us know how we did so we can continue to improve our services."
+        action={() => (
+          <MessageCard.Survey
+            isTextOnlySurvey
+            feedbackFormText="Tell us more..."
+            onSubmit={data => console.log(data)}
+          />
+        )}
+      />
+    </MessageCardStoryWrapperUI>
+  </Story>
+</Canvas>
+
 # With video
 
 <Canvas>

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(
+      <MessageCard.Survey
+        isTextOnlySurvey
+        feedbackFormText={formLabel}
+        onSubmit={onSubmit}
+      />
+    )
+
+    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...'
 

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;

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 = (
+    <FeedbackLabelUI htmlFor="survey-comment">
+      {feedbackFormText}
+    </FeedbackLabelUI>
+  )
+
   return (
-    <SurveyUI data-cy="beacon-message-cta-survey">
-      <SurveyContext.Provider value={contextValue}>
-        {children}
-      </SurveyContext.Provider>
+    <SurveyUI
+      data-cy="beacon-message-cta-survey"
+      $isTextOnly={isTextOnlySurvey}
+    >
+      {children && (
+        <SurveyContext.Provider value={contextValue}>
+          {children}
+        </SurveyContext.Provider>
+      )}
 
       {shouldShowFeedbackForm && (
-        <FeedbackFormUI onSubmit={handleSubmit}>
-          <FeedbackLabelUI htmlFor="survey-comment">
-            {feedbackFormText}
-          </FeedbackLabelUI>
+        <FeedbackFormUI onSubmit={handleSubmit} $isTextOnly={isTextOnlySurvey}>
+          {isTextOnlySurvey ? (
+            <VisuallyHidden>{formLabel}</VisuallyHidden>
+          ) : (
+            formLabel
+          )}
           <Input
             id="survey-comment"
             name="survey-comment"
@@ -106,6 +122,7 @@ export const MessageCardSurvey = ({
             multiline={3}
             value={feedback}
             onChange={value => setFeedback(value)}
+            placeholder={isTextOnlySurvey ? feedbackFormText : ''}
           />
           <SubmitFeedbackFormButtonUI
             data-cy="beacon-message-cta-survey-submit"
@@ -128,12 +145,13 @@ export const MessageCardSurvey = ({
 }
 
 MessageCardSurvey.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   withFeedbackForm: PropTypes.bool,
   forceFeedbackForm: PropTypes.bool,
   feedbackFormText: PropTypes.string,
   confirmationText: PropTypes.string,
   onSubmit: PropTypes.func,
   showSpinner: PropTypes.bool,
   showConfirmationMessage: PropTypes.bool,
+  isTextOnlySurvey: PropTypes.bool,
 }

src/utilities/pkg.js

@@ -1,3 +1,3 @@
 export default {
-  version: '3.56.0',
+  version: '3.57.0-0',
 }