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

[georgewrmarshall]

Description

Create a ButtonSecondary variant for the Button component in React. This component will serve as the secondary 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 ButtonSecondary variant.
  • Default props for this variant:
  • variant: "secondary"
  • Styles specific to the secondary button, such as border, background, and typography, based on 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 secondary button's unique appearance.
  • Include styles for hover, focus, active, and disabled states.
  • The ButtonSecondary styling should clearly differentiate from ButtonPrimary while maintaining harmony with the design system.

• Integration:

  • Ensure compatibility with design tokens for colors, typography, and spacing.
  • Confirm alignment with global design standards and spacing rules.

• 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 ButtonSecondary variant in Storybook, including:
  • Default appearance.
  • Usage with icons.
  • Different sizes and states.
  • Provide usage examples in the component library documentation.

Acceptance Criteria

• The ButtonSecondary variant matches the design specs in the Button Audit and Insight Report Figma Board.
• Component implementation includes:
  • Styling for secondary 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