[React Native]: Create `ButtonHero` component in shared UI component library

[georgewrmarshall]

Description

Create a reusable ButtonHero component for the React Native shared UI component library. The component should implement the ButtonHero design standards as implemented in the React package. This is a branded, high-impact button reserved for the most important actions in Trade, such as swapping tokens, claiming rewards, and other critical, high-value actions. This task is part of the migration to the new shared UI component library, ensuring consistency with the React implementation and existing component conventions.

Technical Details

• Component Implementation:

  • Build using React Native and TypeScript
  • Based on the existing React implementation at packages/design-system-react/src/components/ButtonHero/
  • Uses ButtonBase component as foundation (similar to React version)
  • Locked to light theme with primary colors (bg-primary-default, text-primary-inverse)
  • Implements pressed state handling (React Native equivalent of hover/active states)

• Props to Implement:

  • size: ButtonHeroSize (Sm: 32px, Md: 40px, Lg: 48px) - default Lg
  • isFullWidth: boolean - default false
  • startIconName: IconName - optional
  • endIconName: IconName - optional
  • isDisabled: boolean - default false
  • isLoading: boolean - default false
  • twClassName: string - for custom Tailwind classes
  • style: React Native StyleProp
  • All ButtonBase props

• Integration:

  • Use twrnc for styling via @metamask/design-system-twrnc-preset
  • Implement pressed states using React Native Pressable
  • Apply data-theme="light" equivalent behavior (always use light theme colors)
  • Ensure compatibility with design system tokens (spacing, colors, typography)

• Testing:

  • Integrate unit tests using Jest and React Native Testing Library
  • Add accessibility tests to ensure proper accessibility labels and states
  • Test all size variants, loading states, disabled states, and icon placements

• Documentation:

  • Create README.mdx with detailed usage examples
  • Provide Storybook stories for each variant, size, and state
  • Document the specific use cases (swapping tokens, claiming rewards, etc.)
  • Include warnings about sparing usage for high-impact actions only

Acceptance Criteria

• The ButtonHero component should match the React implementation's behavior and visual design
• Component implementation must cover the following:
  • All size variants (Sm, Md, Lg) with proper dimensions
  • Full-width and fixed-width layouts
  • Start and end icon support
  • Disabled and loading states
  • Pressed state handling (equivalent to hover/active on web)
  • Always uses light theme primary colors regardless of app theme
  • Proper focus and accessibility support
• Unit tests must cover at least 80% of the component's functionality, including interactivity and accessibility
• Component must be reviewed and approved by both engineering and design teams
• Documentation for the component should be added, covering usage, available props, and examples
• Storybook stories must demonstrate all props and states
• Ensure all aspects meet the Definition of Done

References

• React ButtonHero implementation: packages/design-system-react/src/components/ButtonHero/
• Definition of Done
• MetaMask Design System Guides