fix(SelectableCard): make label clickable by removing pointer events to none

[matthprost]

Summary

Type

• Bug

Summarise concisely:

What is expected?

Current SelectableCard is hard to test especially when you try to click on the label. This was due to the pointer-events: none; set on checkbox and radio in order to avoid having double state change.

I fixed this issue by no triggering the event 2 times when the click is specifically on the label / input. This way we only generate one change and we don't need to add pointer-events: none;. I also needed to change to add an extra layer of style inside SelectableCard for Checkbox and Radio as we remove pointer events. We don't want the hover effects etc.

I have also reformatted internal testing to test both checkbox and radio on the same series of tests as both should work the same.

Before this was not working, it now works.

    test(`should trigger onChange when click on the label`, async () => {
        const onChange = vi.fn()

        renderWithTheme(
          <SelectableCard
            onChange={onChange}
            type={type}
            value="choice"
            label="test"
            name="test"
          >
            blabla
          </SelectableCard>,
        )

        const label = screen.getByLabelText('test')
        await userEvent.click(label)

        await waitFor(() => {
          expect(onChange).toHaveBeenCalled()
        })
      })

[changeset-bot]

🦋 Changeset detected

Latest commit: a0d530a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@ultraviolet/ui	Patch
@ultraviolet/form	Patch
@ultraviolet/plus	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 89.37%. Comparing base (9f43f59) to head (a0d530a).
Report is 7 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #4870      +/-   ##
==========================================
+ Coverage   89.30%   89.37%   +0.07%     
==========================================
  Files         234      234              
  Lines        8153     8180      +27     
  Branches     3697     3752      +55     
==========================================
+ Hits         7281     7311      +30     
+ Misses        872      869       -3     

Files with missing lines	Coverage Δ
packages/ui/src/components/Checkbox/index.tsx	99.12% <100.00%> (ø)
packages/ui/src/components/Radio/index.tsx	98.00% <100.00%> (ø)
...ackages/ui/src/components/SelectableCard/index.tsx	96.12% <100.00%> (+3.96%)	⬆️
...ts/SelectableCardOptionGroup/components/Option.tsx	100.00% <ø> (ø)

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 356fde9...a0d530a. Read the comment docs.

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.