Fix survey issues (#1066)

* Fix some issues with message survey components

* 3.54.1-0

* fix focus state visibility

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpscout/hsds-react",
-  "version": "3.54.0",
+  "version": "3.54.1-0",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

src/components/MessageCard/MessageCard.stories.mdx

@@ -7,6 +7,8 @@ import {
   MultipleChoiceSurvey,
   ThumbsSurvey,
 } from './MessageCard.Survey.variants'
+import { ThemeProvider } from 'styled-components'
+import { makeBrandColors } from '../../styles/utilities/color'
 
 <Meta
   title="Components/Conversation/Message/MessageCard"
@@ -201,6 +203,7 @@ This component renders a Message Card Notification with (optional) Title, Subtit
             withFeedbackForm
             feedbackFormText="Tell us more..."
             onSubmit={data => console.log(data)}
+            withShowFeedbackFormDelay
           >
             <ThumbsSurvey />
           </MessageCard.Survey>
@@ -219,13 +222,17 @@ This component renders a Message Card Notification with (optional) Title, Subtit
         title="How did you feel about your checkout experience?"
         body="Your feedback is valuable to us. Let us know how we did so we can continue to improve our services."
         action={() => (
-          <MessageCard.Survey
-            withFeedbackForm
-            feedbackFormText="Tell us more..."
-            onSubmit={data => console.log(data)}
-          >
-            <FacesSurvey />
-          </MessageCard.Survey>
+          <ThemeProvider theme={{ brandColor: makeBrandColors('#8c3c4a') }}>
+            <MessageCard.Survey
+              withFeedbackForm
+              feedbackFormText="Tell us more..."
+              submitButtonText="Send with some long button text"
+              onSubmit={data => console.log(data)}
+              withShowFeedbackFormDelay
+            >
+              <FacesSurvey />
+            </MessageCard.Survey>
+          </ThemeProvider>
         )}
       />
     </MessageCardStoryWrapperUI>

src/components/MessageCard/MessageCard.test.js

@@ -4,6 +4,8 @@ import MessageCard from './MessageCard'
 import { ThumbsSurvey } from './MessageCard.Survey.variants'
 import { MessageCardButton as Button } from './MessageCard.Button'
 import userEvent from '@testing-library/user-event'
+import { makeBrandColors } from '../../styles/utilities/color'
+import { ThemeProvider } from 'styled-components'
 
 describe('className', () => {
   test('Has default className', () => {
@@ -499,6 +501,8 @@ describe('Message Button', () => {
 })
 
 describe('Surveys', () => {
+  jest.useFakeTimers()
+
   test('Renders a feedback form after selection if withFeedbackForm is set', () => {
     const formLabel = 'Tell us more...'
 
@@ -515,6 +519,30 @@ describe('Surveys', () => {
     expect(screen.queryByLabelText(formLabel)).toBeInTheDocument()
   })
 
+  test('Renders a feedback form delayed after selection if withShowFeedbackFormDelay is set', () => {
+    const formLabel = 'Tell us more...'
+
+    render(
+      <MessageCard.Survey
+        withFeedbackForm
+        withShowFeedbackFormDelay
+        feedbackFormText={formLabel}
+      >
+        <ThumbsSurvey />
+      </MessageCard.Survey>
+    )
+
+    expect(screen.queryByLabelText(formLabel)).not.toBeInTheDocument()
+    userEvent.click(screen.getByRole('button', { name: 'thumbs-up' }))
+    expect(screen.queryByLabelText(formLabel)).not.toBeInTheDocument()
+
+    act(() => {
+      jest.runAllTimers()
+    })
+
+    expect(screen.queryByLabelText(formLabel)).toBeInTheDocument()
+  })
+
   test('Calls the onSubmit callback when submitting the feedback form', () => {
     const formLabel = 'Tell us more...'
     const onSubmit = jest.fn()

src/components/MessageCard/components/survey/MessageCard.Survey.MultipleChoice.jsx

@@ -5,7 +5,6 @@ import {
   MultipleChoiceRadioUI,
 } from './MessageCard.Survey.css'
 import { useSurveyContext } from '../../utils/MessageCard.Survey.context'
-import Radio from '../../../Radio'
 
 export const MessageCardSurveyMultipleChoice = ({ choices }) => {
   const { onSelection } = useSurveyContext()

src/components/MessageCard/components/survey/MessageCard.Survey.css.js

@@ -5,6 +5,8 @@ import Button from '../../../Button'
 import RateAction from '../../../RateAction'
 import ChoiceGroup from '../../../ChoiceGroup'
 import Radio from '../../../Radio'
+import { setFontSize } from '../../../../styles/utilities/font'
+import { FONT_FAMILY } from '../../../../styles/configs/constants'
 
 const defaultTransition = css`
   transition: all 0.2s ease-in-out;
@@ -142,7 +144,21 @@ export const RateActionUI = styled(RateAction)`
 `
 
 export const FeedbackFormUI = styled('form')`
-  margin-top: 16px;
+  // adding padding and negative margin to compensate, because of focus state of children
+  // without this, the outline (box shadow) is cut off on the sides/bottom
+  padding: 4px;
+  margin: 16px -4px -4px;
+  overflow: hidden;
+  animation: HeightAnimation 400ms;
+
+  @keyframes HeightAnimation {
+    0% {
+      max-height: 0;
+    }
+    100% {
+      max-height: 400px;
+    }
+  }
 `
 
 export const FeedbackLabelUI = styled('label')`
@@ -155,6 +171,11 @@ export const SubmitFeedbackFormButtonUI = styled(Button)`
   &.is-size-xxl {
     --buttonMinWidth: 100%;
     margin-top: 15px;
+    width: 100%;
+
+    ${setFontSize(14)};
+    font-family: ${FONT_FAMILY};
+    line-height: normal !important;
   }
 `
 

src/components/MessageCard/components/survey/MessageCard.Survey.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import {
   ConfirmationMessageUI,
@@ -12,9 +12,12 @@ import { SurveyContext } from '../../utils/MessageCard.Survey.context'
 import Input from '../../../Input'
 import Spinner from '../../../Spinner'
 import Icon from '../../../Icon'
+import Truncate from '../../../Truncate'
 
 function noop() {}
 
+const SHOW_FEEDBACK_FORM_DELAY = 600
+
 export const MessageCardSurvey = ({
   children,
   withFeedbackForm = false,
@@ -25,17 +28,32 @@ export const MessageCardSurvey = ({
   onSubmit = noop,
   showSpinner = false,
   showConfirmationMessage = false,
+  theme,
+  withShowFeedbackFormDelay = false,
 }) => {
   const [feedback, setFeedback] = React.useState('')
   const [selected, setSelected] = React.useState(null)
   const [showFeedbackForm, setShowFeedbackForm] = React.useState(false)
   const shouldShowFeedbackForm = showFeedbackForm || forceFeedbackForm
+  const isMounted = useRef(true)
+
+  useEffect(() => {
+    return () => {
+      isMounted.current = false
+    }
+  }, [])
 
   function handleSelection(id) {
     setSelected(id)
 
     if (withFeedbackForm) {
-      setShowFeedbackForm(true)
+      if (withShowFeedbackFormDelay) {
+        setTimeout(() => {
+          isMounted.current && setShowFeedbackForm(true)
+        }, SHOW_FEEDBACK_FORM_DELAY)
+      } else {
+        setShowFeedbackForm(true)
+      }
       return
     }
 
@@ -89,8 +107,13 @@ export const MessageCardSurvey = ({
             value={feedback}
             onChange={value => setFeedback(value)}
           />
-          <SubmitFeedbackFormButtonUI submit size="xxl" theme="blue">
-            {submitButtonText}
+          <SubmitFeedbackFormButtonUI
+            data-cy="beacon-message-cta-survey-submit"
+            submit
+            size="xxl"
+            theme={theme || 'blue'}
+          >
+            <Truncate>{submitButtonText}</Truncate>
           </SubmitFeedbackFormButtonUI>
         </FeedbackFormUI>
       )}

src/utilities/pkg.js

@@ -1,3 +1,3 @@
 export default {
-  version: '3.54.0',
+  version: '3.54.1-0',
 }