Add support for additional survey question type "open_text"

When the initial user feedback survey was introduced, scope of the MVP was limited to only support questions of the “rating” type, since that was the only one used for the initial survey. This should now be followed up on, with this issue focusing on the “open_text” question type.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• A new SurveyQuestionOpenText JS component should be introduced and integrated into the user feedback survey JS infrastructure, rendering a survey question of type “open_text”.
• The UI should look like the above screenshot and follow the “rating” question type where similar (e.g. font, spacing, G icon etc.).
• The available arguments to consider here from the Site Kit Service /survey/trigger/ API response are as follows:
  • question.question.subtitle should, if present, be displayed right below the text input (see screenshot).
  • question.question.placeholder should, if present, be displayed as a text input placeholder (see screenshot).
  • The text input must be non-empty in order to proceed. The maximum character limit should be 100.
• The data object for answering the question (what needs to be passed to the answerQuestion function prop) should look as follows:
  • A single answer property with the string from the text input.
  • Example: { answer: 'My open text response' }
• The new question type should have an example in Storybook where it can be inspected, similar to the existing “rating” type component.

Implementation Brief

Create new component

Create assets/js/components/surveys/SurveyQuestionOpenText.js

Base on SurveyQuestionRating.js

• wrap everything in a div with class .googlesitekit-survey__open-text
• Use SurveyHeader to match styling
• Use the TextField, Input, HelperText components
• Add the following string props and propTypes: question, subtitle, placeholder
• Add the following function props and propTypes: answerQuestion, dismissSurvey
• HelperText should be passed into TextField’s helperText prop (with the child subtitle)
• In order to limit user input to 100 characters, just disallow extra characters in the TextField’s onChange handler (slicing the text to 100 characters)
• If the TextField is empty, set a disabled prop to true on the submit button
• When submitting, pass the answer to answerQuestion as per AC

In assets/sass/components/surveys/_googlesitekit-surveys.scss

• Add a new rule for .googlesitekit-survey__open-text
• Nest rules for .googlesitekit-survey__body, .mdc-text-field, and .mdc-text-field-helper-line
• Style now to match the design

Add new component to map on `assets/js/components/surveys/CurrentSurvey.js§

• ComponentMap also needs to map open_text to SurveyQuestionOpenText

❗ ❗ See PR here with everything done up until here https://github.com/google/site-kit-wp/pull/3771 ❗ ❗

Create new story

Create assets/js/components/surveys/SurveyQuestionOpenText.stories.js (Based on SurveyQuestionRating.stories.js)

• Create story showing SurveyQuestionOpenText with props and mock handlers to show it working

Test Coverage

• Add new tests within assets/js/components/surveys/CurrentSurvey.test.js for the new question type.

We need to add this question type to the “main” test suite for CurrentSurvey to make sure the question type works as expected when “plugged in” to the rest of the survey components, next button, etc.

Visual Regression Changes

• No changes

QA Brief

• Check that https://google.github.io/site-kit-wp/storybook/develop/?path=/story/components-surveys--survey-question-open-text-story works and behaves as per AC
• Enter the code from https://pastebin.com/x0iiFBWh into your browser console on a Site Kit dashboard page to trigger a survey with a question from #3760, #3761, and this issue (#3762).

Changelog entry

• Add an open text type to user surveys.

[felixarntz]

Approval ❌

Similar to https://github.com/google/site-kit-wp/issues/3761#issuecomment-905583299, the implementation here does not match the ACs, as it is relying on question.subtitle and question.placeholder instead of question.question.subtitle and question.question.placeholder.

The overall question schema is always only including the question_ordinal, question_text, question_type and question fields. Any question type-specific fields are always nested within the last field, i.e. in question.question.

cc @tofumatt @aaemnnosttv

[aaemnnosttv]

Currently outputting an empty helper text div when there is no text.