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

[georgewrmarshall]

Description

Create a ButtonLink variant for the Button component in React. This variant will be styled as a link, adhering to the design specifications outlined in the Button Audit and Insight Report Figma Board. It should integrate seamlessly with the shared UI component library and follow best practices for accessibility and responsiveness.

Technical Details

• Component Implementation:

  • Extend or compose the ButtonBase component to create the ButtonLink variant.
  • Default props for this variant:
  • variant: "link"
  • Styles specific to the link button, such as underlined text and hover/active/focus states.
  • Props to support:
  • href?: string (optional, for cases where it is rendered as an <a> tag)
  • size?: ButtonSize.Xs | ButtonSize.Sm | ButtonSize.Md | ButtonSize.Lg | ButtonSize.Xl
  • disabled?: boolean
  • onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void
  • iconLeft?: ReactNode
  • iconRight?: ReactNode
  • className?: string

• Styling:

  • Apply TailwindCSS classes or CSS-in-JS to implement the button's link-like appearance.
  • Include styles for hover, focus, active, and disabled states.
  • The styling should ensure a clear visual distinction between links and other button variants while maintaining design system harmony.

• Integration:

  • Ensure compatibility with design tokens for typography and spacing.
  • The component should dynamically render as a <button> or <a> element depending on the presence of an href prop.
  • Accessibility features such as aria-disabled and focus outlines must be included.

• Testing:

  • Add unit tests using Jest and React Testing Library.
  • Include tests for correct rendering as <button> or <a>, based on the href prop.
  • Validate hover, focus, and active states, as well as keyboard and screen reader accessibility.

• Documentation:

  • Add stories for the ButtonLink variant in Storybook, including:
  • Default appearance.
  • Examples with and without href props.
  • Different sizes and states.
  • Provide usage examples in the component library documentation.

Acceptance Criteria

• The ButtonLink variant matches the design specs in the Button Audit and Insight Report Figma Board.
• Component implementation includes:
  • Support for both <button> and <a> elements.
  • Styling for link appearance and all interactive states.
  • Compatibility with all required props and their variations.
• 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 integration details.
• Meets all aspects of the Definition of Done.

References

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