[React]: Create ButtonIcon component

[georgewrmarshall]

Description

Create a new ButtonIcon component in React, based on the design specifications and insights outlined in the ButtonIcon Audit and Insight Report Figma Board. This component should offer flexibility for different use cases while maintaining consistency with the shared design system.

Technical Details

• Component Implementation:

  • Develop the ButtonIcon component.
  • Ensure the component renders an accessible button with an icon (SVG or ReactNode) as its primary visual element.
  • Follow best practices for accessibility, responsiveness, and scalability.

• Styling:

  • Apply styles using TailwindCSS classes or CSS-in-JS to ensure scalability and maintainability.
  • Include hover, focus, active, and disabled states.
  • Align with the global design tokens for colors, padding, and typography.

• Integration:

  • Ensure the component integrates seamlessly with the shared UI library.
  • Confirm alignment with other button components and shared styles.

• Testing:

  • Write comprehensive unit tests using Jest and React Testing Library.
  • Include tests for accessibility (e.g., screen reader focus, keyboard navigation).
  • Test the component in isolation and in common use cases.

• Documentation:

  • Add the ButtonIcon component to Storybook.
  • Showcase examples for different sizes, states, and usage scenarios.
  • Provide clear descriptions for all props and best practices for using the component.

Acceptance Criteria

• A fully functional ButtonIcon component is implemented according to the ButtonIcon Audit and Insight Report Figma Board.
• Styling adheres to design specifications and includes all interaction states.
• Component passes all unit and accessibility tests.
• Documentation is complete and reviewed, with examples in Storybook.
• Reviewed and approved by engineering and design teams.

References

• ButtonIcon Audit and Insight Report Figma Board
• Definition of Done

[georgewrmarshall]

This was completed in #387