The Thank with Google setup and settings UI will require a new type of component which is effectively like a group of radio buttons, however with images used instead of the radio buttons. This should be implemented as a generic component, and it should follow the general appearance of the corresponding UI under "Prominence" in this Figma file.

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

Acceptance criteria

• A new reusable React component ImageRadio should be implemented, which should behave like a radio button however display as an image.
  • It should represent a single radio button, similar to the existing Radio component.
  • It should facilitate creating a UI like under "Prominence" in this Figma file, in other words it would need to have props for the image (passing a component e.g. an SVG would give the most flexibility here), the label (e.g. "Low" in the Figma design), and the (optional) description (e.g. "Floating Thank button at the bottom of the page" in the Figma design).
  • Clicking on the image should change the state of the underlying radio button, while the radio button itself should be invisible.
  • Most props from the Radio component should be supported as well, however disabled and readonly explicitly do not have to be supported, as we do not have a design for how they should change in such a situation.
• The component should be accessible as possible, e.g. paying attention to correct focus states, visibility, ARIA labels and roles etc.
• A generic Storybook story for the component should be added, with at least two instances of it next to each other so that changing the radio state in a radio group can be tested there as well.

Implementation Brief

• Create the ImageRadio component in assets/js/components/ImageRadio.js.
  • Add CSS as required to assets/sass/components/global/_googlesitekit-image-radio.scss
• Copy over the code from the current Radio component as a foundation.
• Get rid of the unwanted disabled and readonly props.
• Add the following props:
  • image: Optional. This will be an element with the expectation of an SVG element being passed in.
  • label: The label to display under the image.
  • description: Optional. Description to display under the label or image.
  • aria-label: Optional. ARIA label to apply to the image.
• Update the component to render the image and text.
  • If the image prop is not supplied, render the label in place of the image, as seen under "Type" in the Figma file.
• Hide the input element by making use of the VisuallyHidden component.
• Move relevant props from the input to the image, e.g. the click/keydown handlers, tabIndex etc.
• As discussed in the AC and in Accessibility in the design doc:
  • Make sure the image handles the other various behaviours that radio buttons support e.g. hover state, focus outline, and the pointer cursor.
  • Add an ARIA role of aria-role="radio" to the image.
• Ensure no unneeded code, HTML classes etc. remain in the component.
• Add a Storybook story as described in the AC.

Test Coverage

• Add the story to the VRT suite.

QA Brief

• Locate the component in Storybook ( Global -> Image Radios)
• Ensure that the css has been implemented according to the Figma design
• For extra manual testing, you can change the props given in the story itself

Changelog entry

• Add a new enhanced radio button component that allows for using graphics for choices.