feat: add contained variant to pds-radio component

[QuintonJason]

feat: add contained variant to pds-radio component

Summary

This PR adds a new "contained" variant to the pds-radio component that replaces the standard radio circle with an icon while maintaining all radio functionality. The implementation includes:

• New props: variant ('default' | 'contained') and icon (string)
• Styling: Complete CSS implementation for contained variant with proper state handling
• Documentation: Updated Storybook stories and MDX documentation with examples
• Testing: Comprehensive unit tests covering new functionality

The contained variant follows the established Pine Design System patterns and maintains full accessibility and functionality.

Jira Ticket: DSS-1473

Review & Testing Checklist for Human

Risk Level: 🟡 Medium - Visual changes with accessibility implications

• Visual Design Verification: Test contained variant appearance across all states (default, checked, disabled, invalid) to ensure it matches design expectations and looks cohesive with the design system
• Functional Testing: Verify radio behavior works correctly when clicking icons - selection, form submission, and radio group functionality should be preserved
• Accessibility Testing: Test keyboard navigation (tab/arrow keys), focus states, and screen reader compatibility with the hidden radio input and visible icon
• Cross-browser Compatibility: Verify the CSS (especially :has() selectors) works consistently across supported browsers
• Integration Testing: Test the contained variant in real form contexts to ensure it works with form libraries and validation

Recommended Test Plan:

1. Open Storybook and interact with all contained variant stories
2. Test keyboard navigation and screen reader behavior
3. Create a test form with radio groups using both variants
4. Verify form submission includes correct values

---

Diagram

%%{ init : { "theme" : "default" }}%%
graph TD
    A["pds-radio.tsx<br/>Component Implementation"]:::major-edit
    B["pds-radio.scss<br/>Styling"]:::major-edit
    C["pds-radio.stories.js<br/>Storybook Stories"]:::major-edit
    D["pds-radio.spec.tsx<br/>Unit Tests"]:::major-edit
    E["pds-radio.mdx<br/>Documentation"]:::major-edit
    F["components.d.ts<br/>Auto-generated Types"]:::minor-edit
    G["readme.md<br/>Auto-generated Docs"]:::minor-edit
    H["pds-icon<br/>Icon Component"]:::context

    A --> H
    A --> B
    B --> C
    C --> D
    A --> F
    A --> G
    E --> C

    subgraph Legend
        L1[Major Edit]:::major-edit
        L2[Minor Edit]:::minor-edit
        L3[Context/No Edit]:::context
    end

    classDef major-edit fill:#90EE90
    classDef minor-edit fill:#87CEEB
    classDef context fill:#FFFFFF

Loading

Notes

• Environment Testing Limitation: E2E tests couldn't run due to Chrome setup issues in the development environment, so manual testing is especially important
• CSS Modern Features: Uses :has() selectors for state styling - verify browser support meets requirements
• Icon Dependency: The contained variant depends on the existing pds-icon component working correctly
• Storybook Verification: All contained variant states have been manually tested in Storybook and appear to work correctly

Session Info:

• Link to Devin run: https://app.devin.ai/sessions/31613d26d5dd48d38f32f9df56b4b7ae
• Requested by: Quinton Jason Jr (@QuintonJason)

[devin-ai-integration]

Original prompt from Quinton:

Hey Devin,

I'd like you to work on adding a "contained" variant to the pds-radio component in the Pine Design System. This task involves enhancing the existing radio component to support an alternative visual style where the radio can be replaced with an icon while maintaining all the standard radio functionality.

Here's what you need to do:

1. Add a variant prop to the pds-radio component in `libs/core/src/components/pds-radio/pds-radio.tsx`. The prop should:
   - Accept values: 'default' (implicit default) and 'contained'
   - Follow the same pattern as other Pine components that use variants

2. Add an optional icon prop that allows specifying which icon to display when using the contained variant:
   - The prop should accept a string value corresponding to an icon name
   - This should only affect visual presentation when variant="contained"

3. Update the component's render method to conditionally display:
   - The standard radio circle when variant is default or not specified
   - A pds-icon component when variant is "contained" and an icon prop is provided
   - Ensure the component continues to function as a radio button regardless of visual representation

4. Extend the component's styling in `libs/core/src/components/pds-radio/pds-radio.scss`:
   - Add styles for the contained variant
   - Ensure the component is visually cohesive with the Pine Design System
   - Maintain appropriate hover, focus and active states

5. Ensure the disabled state works correctly:
   - The disabled state should work with both the default and contained variants
   - Apply appropriate visual styling for disabled state in both variants
   - Maintain proper ARIA attributes and prevent interaction when disabled

6. Update documentation and examples:
   - Update the component documentation in `libs/core/src/components/pds-radio/docs/pds-radio.mdx`
   - Add new examples showcasing the contained variant with and without icons
   - Add examples demonstrating the disabled state with the contained variant
   - Update Storybook stories in `libs/core/src/components/pds-radio/stories/pds-radio.stories.js` to include the new variant

7. Update the unit tests in `libs/core/src/components/pds-radio/test/pds-radio.spec.tsx`:
   - Add tests for the new variant prop
   - Add tests for the icon prop
   - Verify that radio functionality remains intact regardless of visual presentation

When creating your PR, please include the Jira ticket ID DSS-1473 in the PR description.

Open questions to consider during implementation:
- What is the exact visual design for the contained variant?
- Should the icon replacement be a characteristic of the contained variant or a separate option?
- Are there specific icons that should be used for selected/unselected states?

Let me know if you need any clarification or run into any issues during implementation.

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[netlify]

✅ Deploy Preview for pine-design-system ready!

Name	Link
🔨 Latest commit	bebcb16
🔍 Latest deploy log	https://app.netlify.com/projects/pine-design-system/deploys/686d398f518ec700082a9784
😎 Deploy Preview	https://deploy-preview-478--pine-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[QuintonJason]

Close in favor of #562