Implement `Survey*` UI components for initial rating survey

Feature Description

While user surveys will be capable of displaying multiple questions of various types, the initial implementation will be limited to a single rating-type question only with two potential completions. This issue is about building the necessary UI components for this initial survey – none of which should be specific to the initial survey as far as the contents are concerned; this should all come via props.

---

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

Acceptance criteria

• A new SurveyQuestionRating component should be created in assets/js/components/surveys/
  • It should require the following props:
    • question [string] – the question text
    • choices [array] available 5 answer objects with properties: answer_ordinal [int] and text [string]
    • answerQuestion [function] should be called with the answer object corresponding to the selected choice
    • dismissSurvey [function] should be called when the close button (X) is clicked
  • The text for labelling the low/high ends of the rating spectrum should come from the 1st and 5th choices respectively (passed via props)
    • Additionally, each individual choice should have its text value provided (visually hidden) on each choice element for accessibility
• A new SurveyCompletion component should be created in assets/js/components/surveys/
  • It should require the following props:
    • title [string] – primary heading on the survey card
    • children [*] secondary text
    • ctaText [string] – text for follow up CTA button
    • ctaURL [string] – URL for follow up CTA button
    • ctaOnClick [function] – onClick handler for follow up CTA button
    • dismissSurvey [function] – should be called when the close button (X) is clicked
• See the design for how this should look
• Common components may be extracted as necessary
• Storybook stories should be added for these two components

Implementation Brief

• Create new file assets/js/components/surveys/SurveyQuestionRating which exports the SurveyQuestionRating functional component with the props defined in the AC.
  • Associate each answer_ordinal to the icon as in the designs in Figma, meaning answer_ordinal 1 will be the unhappy icon and answer_ordinal 5 will be the delighted icon. It’s fine to hardcode the icons for now.
• Create new file assets/js/components/surveys/SurveyCompletion which exports the SurveyCompletion functional component with the props defined in the AC.
• Create new file assets/js/components/surveys/SurveyHeader which exports the SurveyHeader functional component with the following props:
  • title: [string] – text shown next to the Google logo.
  • dismissSurvey: [function] should be called when the close button (X) is clicked.
• SurveyQuestionRating and SurveyCompletion should both use the SurveyHeader component to render the top section of the components, i.e where we have the Google logo, text and close button.
• Components should be styled as per the designs in Figma, without the fixed position. This will be taken care of in #3375.
  • Use the Grid, Row and Cell components for the grid layout.
    • For rendering the icons, use a Row with 5 Cells which do no wrap across breakpoints. Each cell will also contain the “text” associated to the icon. For e.g “Unhappy” for 1 and “Delighted” for 5. The value can be obtained via the text property of each choice and the Button component should be used for rendering the icons.
    • The texts for Icon 1 and Icon 5 only should be visible at all times.
    • For accessibility, each icon should have the text visually hidden via the aria-label prop of the Button component.
    • As per the designs for desktop, the max width of the component is 400px and we should be able to reduce the width to 320px on small screens by reducing the padding between grid cells and the icon dimensions if necessary.
    • Upon hover, each icon should have a darker grey rounded background, similar to what is done for the “Help” icon here: https://google.github.io/site-kit-wp/storybook/develop/?path=/story/global--plugin-header-with-help-menu
• SVGs (for the emojis) should be added in the assets/svg folder and prefixed with survey-. For e.g survey-unhappy.svg.
• Instead of using the SVG from the designs for the close icon, we can use the closeSmall icon from @wordpress/icons. https://wordpress.github.io/gutenberg/?path=/story/icons-icon--library
• All styles for the above components should go in assets/sass/components/survey/_googlesitekit-survey.scss.
• Any class names used in the component should follow the BEM methodology, with the googlesitekit-survey prefix.
• Create SurveyQuestionRating.stories.js and SurveyCompletion.stories.js which will contain the stories for both components.

Test Coverage

• No tests to be added.

Visual Regression Changes

• N/A

QA Brief

Check if the components from the following URLs: * https://google.github.io/site-kit-wp/storybook/pull/3436/?path=/story/components-surveys--survey-question-rating-story * https://google.github.io/site-kit-wp/storybook/pull/3436/?path=/story/components-surveys--survey-completion-story match the designs in Figma.

Changelog entry

• Add React components for rendering user survey UI.

[asvinb]

@aaemnnosttv IB updated. Can you review? One notable thing I added is using the Button component to display the icons and then use the aria-label prop to pass the text property of each choice.

[johnPhillips]

Thanks @aaemnnosttv!

QA ✅