Implement UI design for new googlesitekit-user-input admin screen

[felixarntz]

After #2039, this issue is about actually implementing the UI design for the googlesitekit-user-input admin screen (also see #2038) previously created using CSS (and minor alterations of the new components as necessary).

---

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

Acceptance criteria

• The UI for the googlesitekit-user-input screen should be implemented per the designs, using the React components implemented as part of Implement base JS components for googlesitekit-user-input screen #2039.
  • Screen header
  • Steps 1-5
    • The respective next step should show in lower opacity below, as far as the screen allows for it. In other words, there should be no extra scrolling beyond the current step, the lower-opacity next step should only be displayed as some kind of "teaser". On viewports where the step itself fills more than the viewport size, this next step "teaser" wouldn't be displayed.
  • Final overview/confirmation (after the 5th step)
• The changes should mostly be CSS, plus some minor DOM changes in the HTML generated by the components from Implement base JS components for googlesitekit-user-input screen #2039. It should be possible to rely on the existing components overall though.

Implementation Brief

• Create a new folder named user-input in /assets/sass/components/.
• Within the newly created folder, create a file named: _googlesitekit-user-input.scss.
• Above file should contain all the CSS to style the user input screens as per the designs. Existing styles should be re-used as much as possible.

QA Brief

The components should be styled as per the designs across all breakpoints.

Changelog entry

• Implement UI design for googlesitekit-user-input screen.

[felixarntz]

IB ✅

[cole10up]

QA ❌

Development using Chrome on the left, Figma on the right. Note - many of the items found or in question are Chrome specific.

Browsers Tested:

• Chome
• Firefox
• Edge
• Safari
• iOS
• Android

Question 1:

Items to note:

• '1 out of 5' doesn't match the styling in the Figma design both color and size are wrong using Chrome browser

Question 2:

✅ Pass

Question 3:

Items to note:

• User is able to select 1 answer and ungray the 'Next' button although the instructional copy says 'Choose only two (2) answers' suggesting you must choose 2 and only 2.
• Noticed unchecked items become grayed out in the Figma design when 2 items are checked, this doesn't occur in development using Chrome browser

Question 4:

Items to note:

• User is able to select 1 answer and ungray the 'Next' button although the instructional copy says 'Choose only three (3) answers' suggesting you must choose 3 and only 3.
• Noticed unchecked items become grayed out in the Figma design when 3 items are checked, this doesn't occur in development using Chrome browser

Question 5:

Items to note:

• Instructional copy is grayed out in the Figma design and not in Development using Chrome browser
• Instructional copy stays within the keywords field after user enters a keyword. Should be removed after one item is entered

Preview:

Items to note:

• Back button in development is left aligned, should be on the right next to the submit button
• Long running answers on a smaller window underlap other answers using Chrome browser

Negative tests:

User is able to tab to next questions and fill out items that are grayed out (note below I was able to type in 'test' within the grayed out 'Other:' field

User is able to enter in a value for 'Other:' while also selecting another value then proceeding to the next question. See below, I entered in 'test' into the 'Other:' field then clicked out of the question to the 1st answer and the Next button ungrayed and is able to be clicked to proceed

Global items:

- Noticed the Figma design shows normal case for 'Back' and 'Next' versus development showing 'BACK' and 'NEXT' **using Chrome browser**

• Also noticed missing the congrats message:

[aaemnnosttv]

Assigning back to @asvinb to review/address.

[felixarntz]

Per our previous conversation, @cole10up @asvinb can you open a follow-up issue that points out everything that needs to be modified here? We should address those changes against that new issue then and leave this one untouched so that it's ready for the current release. Since it is not a user-facing feature, there is no reason to block the release based on these changes, especially since they don't block any actual functionality.

Afterwards, we can move this to Approval.

[cole10up]

QA ✅

Retested:

Opened an incognito window and retried the Chrome specific items below:

• '1 out of 5' doesn't match the styling in the Figma design both color and size are wrong Pass ✅
• Unchecked items become grayed out in the Figma design when 2 items are checked, this doesn't occur in development Pass ✅
• Instructional copy is grayed out in the Figma design and not in Development Pass ✅
• Long running answers on a smaller window underlap other answers Pass ✅
• Back button in development is left aligned, should be on the right next to the submit button Pass ✅
• Noticed the Figma design shows normal case for 'Back' and 'Next' versus development showing 'BACK' and 'NEXT' Pass ✅

Created the following issue #2394 to track the remaining items that exist outside of the above that have been proven fixed due to an incognito window. Sending this to Approval per the above direction from @felixarntz