[React]: Create `Button` component in shared UI component library

[georgewrmarshall]

Description

Create a Button unification component that serves as a single interface for all button variants: ButtonPrimary, ButtonSecondary, and ButtonLink. This component will dynamically render the appropriate variant based on the variant prop, simplifying the API and promoting consistent usage across the codebase. The design should align with the specifications in the Button Audit and Insight Report Figma Board.

Technical Details

• Component Implementation:

  • Build a Button component that abstracts and combines the functionality of ButtonPrimary, ButtonSecondary, and ButtonLink.
  • Props to include:
  • variant: "primary" | "secondary" | "link" (determines which variant to render)
  • size?: ButtonSize.Xs | ButtonSize.Sm | ButtonSize.Md | ButtonSize.Lg | ButtonSize.Xl
  • disabled?: boolean
  • href?: string (optional, determines rendering as a <button> or <a> element for link buttons)
  • onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void
  • iconLeft?: ReactNode
  • iconRight?: ReactNode
  • className?: string

• Dynamic Rendering:

  • Render the appropriate variant component (ButtonPrimary, ButtonSecondary, or ButtonLink) based on the variant prop.
  • Pass shared props (e.g., size, disabled, onClick) to the selected variant.

• Styling:

  • Ensure consistency across all variants in terms of spacing, alignment, and typography.
  • Respect unique styling and interaction patterns for each variant (e.g., hover and focus states).

• Integration:

  • Ensure compatibility with design tokens for spacing, colors, and typography.
  • Accessibility:
  • Add aria-disabled for accessibility when disabled is true.
  • Provide focus outlines for keyboard users.

• Testing:

  • Add unit tests using Jest and React Testing Library to ensure:
  • Proper rendering of each variant.
  • Correct props are passed to the appropriate variant.
  • Interaction tests for hover, focus, active, and disabled states.
  • Validate screen reader and keyboard navigation compliance.

• Documentation:

  • Add a comprehensive Storybook entry for the Button component, including:
  • Stories for each variant (primary, secondary, link).
  • Examples for different sizes and states.
  • Usage examples with icons, links, and interactive handlers.
  • Provide usage guidelines in the shared component library documentation.

Acceptance Criteria

• The Button unification component matches the design specs in the Button Audit and Insight Report Figma Board.
• Component implementation includes:
  • Dynamic rendering of ButtonPrimary, ButtonSecondary, or ButtonLink based on the variant prop.
  • Consistent styling and proper alignment with design tokens and accessibility standards.
• Unit tests cover at least 80% of the component’s functionality.
• Component is reviewed and approved by both engineering and design teams.
• Documentation includes examples, prop descriptions, and usage instructions.
• Meets all aspects of the Definition of Done.

References

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