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

[georgewrmarshall]

Description

Create a ButtonPrimary variant for the Button component in React. This component will serve as the primary button variant, 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 ButtonPrimary variant.
  • Default props for this variant:
  • variant: "primary"
  • Styles specific to the primary button, such as background color, border, typography, and padding, derived from the design tokens.
  • Props to support:
  • size?: ButtonSize.Xs | ButtonSize.Sm | ButtonSize.Md | ButtonSize.Lg | ButtonSize.Xl
  • disabled?: boolean
  • onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
  • iconLeft?: ReactNode
  • iconRight?: ReactNode
  • className?: string

• Styling:

  • Apply TailwindCSS classes or CSS-in-JS to implement the primary button's unique appearance.
  • Include styles for hover, focus, active, and disabled states.

• Integration:

  • Ensure compatibility with design tokens for colors, typography, and spacing.
  • Confirm alignment with the global design standards in the Figma board.

• Testing:

  • Add unit tests using Jest and React Testing Library.
  • Include interaction tests for hover, focus, active, and disabled states.
  • Validate keyboard and screen reader accessibility.

• Documentation:

  • Add stories for the ButtonPrimary variant in Storybook, including:
  • Default appearance.
  • Usage with icons.
  • Different sizes and states.
  • Provide usage examples in the component library documentation.

Acceptance Criteria

• The ButtonPrimary variant matches the design specs in the Button Audit and Insight Report Figma Board.
• Component implementation includes:
  • Styling for primary appearance and all interactive states.
  • Support for 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