Add support for additional survey question type "single_select"

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 “single_select” question type.

---

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

Acceptance criteria

• A new SurveyQuestionSingleSelect JS component should be introduced and integrated into the user feedback survey JS infrastructure, rendering a survey question of type “single_select”.
• 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 fairly similar to those for the “rating” type, as follows:
  • question.question.answer_choice contains the list of choices, with answer_ordinal (int) and text (string), like for the rating question type.
    • In addition, an extra write_in boolean property should be supported within each answer choice. If set to true, the respective answer should offer a free-text input where the user can type something custom. In that case, the text field should be displayed right before the text input. The text input must be non-empty in order to proceed. The maximum character limit should be 100. (This additional free-text input concept is also used in #3761, so this should be coordinated to work similarly, potentially reuse common logic where possible.)
• 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, containing an object with the selected answer_ordinal (similar to the “rating” question type), and in addition answer_text (string with free-text input value, if applicable for the selected answer).
  • Example: { answer: { answer_ordinal: 4, answer_text: 'My custom 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 assets/js/components/surveys/SurveyQuestionSingleSelect.js which exports the SurveyQuestionSingleSelect functional component with the following props (similar to SurveyQuestionRating):
  • question: Required string
  • choices: Required array of objects with the answer_ordinal, text and write_in keys.
  • answerQuestion: Required function to be called when a choice has been selected.
  • dismissSurvey: Required function to dismiss the survey.
• Create 2 state variables within SurveyQuestionSingleSelect:
  • value: which is an empty string by default and which will be used for “storing” the selected user option.
  • writeIn: which is an empty string by default and which will be used for text input, asssuming that we will ever have 1 write in per question.
• SurveyQuestionSingleSelect:
  • should render the question via the SurveyHeader component.
  • The choices should be rendered via the SurveyQuestionSingleSelectChoice component (more on that below).
  • have a Next button powered by the Button component sitting at the bottom right of the survey. It should have a callback which submits the selected option for the question.
    • The callback should in turn call the answerQuestion prop function, passing an object which has the answer key and having a object as value with answer_ordinal as key and the user selected option as value. The user selected ordinal is stored in the value state variable. If there is a write in, i.e free text input, via the writeIn state variable, it should be added as well to the object, at the same level as answer_ordinal and having answer_text as value. For e.g { answer: { answer_ordinal: 4, answer_text: 'My custom response' } }
    • If the value and writeIn variables are empty, the Next button should be disabled.
• Create assets/js/components/surveys/SurveyQuestionSingleSelectChoice.js which exports the SurveyQuestionSingleSelectChoice functional component with the following props:
  • choice: Required object having the answer_ordinal, text and write_in keys.
  • value: proxied from SurveyQuestionSelect
  • setValue: proxied from SurveyQuestionSelect
  • writeIn: proxied from SurveyQuestionSelect
  • setWriteIn: proxied from SurveyQuestionSelect
• SurveyQuestionSingleSelectChoice:
  • It should use the Radio component to display the choice. Radio should have choice.answer_ordinal as value prop, and checked if value equals the answer ordinal. The onClick and name props should be added to the Radio component as well.
  • The onClick callback should add the selected choice to the value variable via the setValue function, overwriting any current value each time.
  • If choice.write_in is true, then render an input text using the Input component to the right of the button. The input text should have a max length of 100 characters. The value of the Input should be from the writeIn.
  • The Input should have the onChange prop and the callback should update the text value for that answer ordinal via the setWriteIn function.
• Create assets/sass/components/surveys/_googlesitekit-survey-single-select.scss which will contain all the styles for the SurveyQuestionSingleSelect component and its child components.
  • The container wrapping the Radio and Input in SurveyQuestionSingleSelectChoice should have display: flex and flex-wrap set to wrap, so that both components are side by side.
  • The input text should have a transparent background as well and same height as the radio button. Font size should be set to 12px
• Update the ComponentMap in assets/js/components/surveys/CurrentSurvey.js to map the SurveyQuestionSingleSelect component to single_select.
• Update assets/js/components/surveys/__fixtures__/index.js to include sample payload for single select survey types.
• Add stories for SurveyQuestionSingleSelect in assets/js/components/surveys/SurveyQuestionSingleSelect.stories.js.

Test Coverage

• Tests to be added for the SurveyQuestionSingleSelect component.
• Add new tests within assets/js/components/surveys/CurrentSurvey.test.js for the new question type.

Visual Regression Changes

• N/A

QA Brief

Check that https://google.github.io/site-kit-wp/storybook/develop/path=/story/components-surveys--survey-question-single-select-story works and behaves as per AC

Changelog entry

• Add a new “single select” option to User Input Surveys.

[asvinb]

Thanks @felixarntz @aaemnnosttv IB updated

[aaemnnosttv]

@felixarntz after discussing this a bit more with @asvinb, we’ve opted to go with separate components without a shared base component. The reason being mostly due to the cost of added complexity outweighing the benefit of making the two into a single component. The survey components are already a bit complex as it is with the structure of questions and answers so I think it’s best to keep each component on the simpler side rather than creating a hybrid that can do both. This also gives us more flexibility with both should we want to make changes later since the components will be independent.

Let me know if you’d still prefer to go with the abstraction, otherwise we can continue with this one as the single component as initially scoped 👍