Changes proposed in this Pull Request
This PR adds the SelectCard component. It uses the CheckboxControl
from @wordpress/components
, overriding the checkbox ID
to make it accessible with the children’s text. The outer container is clickable, so the user can select a goal either by clicking on the check field or in any other area of the SelectCard
. The SelectCard
doesn’t have a width definition, so it fills the available width and the containers can define the width later.
At first, I tried to use only the CheckboxControl
changing the style in the outer container, but it has limitations on capturing click events. So I moved to the approach of handling the click actions directly in the SelectCard
component, that’s why have to pass an empty function to the checkbox (it doesn’t have an uncontrolled option). In summary, I’m using the CheckboxControl
only to display the checkbox layout, the same as in Figma Design System.
This PR also updates the stepContent
in the goals stepper for testing purposes.
Testing instructions
- Go to the Goals Step url
- Verify if the SelectCard component appears
![unselected](https://user-images.githubusercontent.com/3113712/170355837-978cd5d0-6a01-45ab-81fb-ebed26925c6e.png)
3. Click in any area of the component to see if the selected state changes
![selected](https://user-images.githubusercontent.com/3113712/170355849-5dc95022-c24b-4921-a38f-272c1c522283.png)
Related to #63916
Unfortunately, no screenshots were provided by the developer.