feat: add radio into components #26

[sun-mota]

Alaska Airlines Pull Request

close #26

adding auro-radio@4.1.1 to auro-formkit

By submitting this Pull Request, I confirm that my contribution is made under the terms of the Apache 2.0 license and I have performed a self-review of my own update.

Summary by Sourcery

Add the auro-radio component to the project, complete with build scripts, documentation, and tests, enhancing the form kit with radio button functionality.

New Features:

• Introduce the auro-radio component, a custom HTML element for creating radio buttons with associated labels, supporting accessibility standards.

Enhancements:

• Add support for the focus-visible library to enhance accessibility by managing focus states.

Build:

• Update build scripts to include tasks for the new auro-radio component, such as building, testing, and generating documentation.

Documentation:

• Add comprehensive documentation for the auro-radio component, including usage examples, API details, and customization options.

Tests:

• Introduce a suite of tests for the auro-radio component to ensure functionality and accessibility compliance.

[sourcery-ai[bot]]

Reviewer's Guide by Sourcery

This PR adds the auro-radio component to the project, including both auro-radio and auro-radio-group elements. The implementation includes full accessibility support, form validation, and styling capabilities. The changes primarily involve adding new component files and updating build configurations to support the new radio component.

Class diagram for auro-radio and auro-radio-group components

classDiagram
    class AuroRadio {
        - Boolean checked
        - Boolean disabled
        - Boolean required
        - Boolean error
        - Number tabIndex
        - String id
        - String label
        - String name
        - String value
        + handleChange(Event event)
        + handleInput(Event event)
        + handleFocus(Event event)
        + handleBlur(Event event)
        + invalid(Boolean error)
        + isRequired(Boolean required)
        + render()
    }
    class AuroRadioGroup {
        - Boolean disabled
        - Boolean horizontal
        - Boolean required
        - String validity
        - String value
        - Object optionSelected
        + handleSelection(Event event)
        + handleRadioBlur()
        + reset()
        + handleItems()
        + handleSlotChange()
        + initializeIndex()
        + handleToggleSelected(Event event)
        + selectItem(Number index)
        + selectNextItem(Number index, String moveDirection)
        + handleKeyDown(Event event)
        + render()
    }
    AuroRadioGroup --> AuroRadio : contains
    note for AuroRadio "Represents a single radio button with properties for state and events."
    note for AuroRadioGroup "Manages a group of AuroRadio elements, handling selection and validation."

File-Level Changes

Change	Details	Files
Added new auro-radio and auro-radio-group components with full implementation	Created auro-radio.js with radio button functionality and accessibility features Created auro-radio-group.js for managing groups of radio buttons Added styling support with SCSS files for both components Implemented form validation and error handling Added keyboard navigation support Included support for horizontal layout option	components/radio/src/auro-radio.js components/radio/src/auro-radio-group.js components/radio/src/style.scss components/radio/src/color.scss components/radio/src/tokens.scss
Added comprehensive test suite for the radio components	Added tests for accessibility compliance Added tests for user interaction handling Added tests for form validation Added tests for keyboard navigation Added tests for state management	components/radio/test/auro-radio.test.js
Updated build configuration to support the new radio component	Added build scripts for radio component Added new dependencies including focus-visible Updated package.json with radio-specific scripts Added documentation build support	package.json
Added comprehensive documentation and examples	Added API documentation with all supported properties and events Created usage examples for different radio configurations Added accessibility documentation Included theme customization documentation	components/radio/docs/api.md components/radio/demo/api.md components/radio/apiExamples/*

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#26	Add radio component to the project	✅

---

Tips and commands

#### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. - **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull request title to generate a title at any time. - **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in the pull request body to generate a PR summary at any time. You can also use this command to specify where the summary should be inserted. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).