Fix propType warning on `ImageRadio` input

[aaemnnosttv]

Bug Description

In #5459 we introduced a new ImageRadio component. As noted in https://github.com/google/site-kit-wp/issues/5459#issuecomment-1201571433 the component's stories are raising a prop type warning in the console due to being checked without an onChange handler and other missing related props.

Related to this, is a minor detail of the ACs for that issue which calls for an instance of the component that can be toggled in Storybook

Steps to reproduce

1. Open Storybook locally (warning will not show on https://google.github.io/site-kit-wp/storybook)
2. Search for "Image Radio"
3. Navigate to the story (?path=/story/global--image-radios)
4. See prop type warning in the console

---

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

Acceptance criteria

• There should be no prop type warnings raised when viewing the stories for the ImageRadio component
• The stories for the ImageRadio component should be modified so that the choices can be interacted with
  • The initial selected state should remain as it is today, but the selected choice should be changeable

Implementation Brief

• Add a onChange handler to the ImageRadio component (instances).
• The onChange should take an inline function that just logs the value / checked from event.target.

Test Coverage

QA Brief

Changelog entry

[eugene-manuilov]

@hussain-t, do you still see warnings for the ImageRadio story? Seems to be good to me: https://google.github.io/site-kit-wp/storybook/develop/?path=/story/global--image-radios

[hussain-t]

@eugene-manuilov, could you check it on your local? I don't think PropTypes warnings are visible on the hosted one.

[eugene-manuilov]

@hussain-t can you give me a link to the page where you see it? I don't see it on my end:

[hussain-t]

@eugene-manuilov, please run the storybook on your local http://localhost:9001/?path=/story/global--image-radios

[eugene-manuilov]

Same, works fine on develop:

[hussain-t]

@eugene-manuilov, that's weird; I rechecked it with the latest on develop, and I get the warnings. Let me ask other engineers if they can reproduce this.

[eugene-manuilov]

That's strange... ok, anyway IB ✔️

[mohitwp]

QA Update ⚠️

@hussain-t I tried to reproduce the console warning, but I'm not getting on change handler console warning on main branch. Is there any way by which I can get this warning ?

Question 2 : When we click on radio buttons in storybook then other radio button is not getting highlight. It's clickable but not getting highlighted like the default one. Is it expected ?

https://user-images.githubusercontent.com/94359491/188343876-2b92a54c-7cec-4926-a21e-56e7f18f01f2.mp4

cc @wpdarren

[hussain-t]

@mohitwp, regarding your question 1, this was the same issue @eugene-manuilov faced. He couldn't see the console warnings. Please refer to the above discussions. Perhaps try running the stories in your local env.

As for question 2, the checked prop is provided only for those two elements in the stories. Highlighting is the gray color when you click, not the green outline, which is checked.

FYI, @makiost worked on this ticket.

[mohitwp]

Thank you @hussain-t

@makiost This warning is visible only on local server. I don't have a local set up with Site Kit because we use InstaWP. I would suggest that this might be a QA:Eng ticket.

Because I took repo clone and tried to run storybook locally, but I'm getting NPM related errors, for which I updated NPM to compatible version but still getting errors and resolving those errors will be time-consuming.

cc @wpdarren

[maciejost]

Went over it on localhost, no warnings or anything, and the component still renders as expected.

https://user-images.githubusercontent.com/30048523/188823275-0deec0d4-ca8b-4a6f-bcc1-3f096234d140.mov

cc @wpdarren @mohitwp

[mohitwp]

Thank you @makiost

QA Update ✅

Verified

• Verified on localhost by @makiost . No warning or errors regarding the onChange-handler is generating.
• Verified ?path=/story/global--image-radios story under storybook.
• Verified user is able to select radio radio buttons.

Local environment-

https://user-images.githubusercontent.com/30048523/188823275-0deec0d4-ca8b-4a6f-bcc1-3f096234d140.mov

Development-

https://user-images.githubusercontent.com/94359491/188845451-5ab67d98-6c18-43f6-869f-39e9843d235a.mp4