[React]: Create Text component in shared UI component library

[georgewrmarshall]

Create a reusable Text component for the shared UI component library. The component should implement the typography and design standards outlined in the Audit and Insight Report FigJam. This task is part of the migration to the new shared UI component library, ensuring consistency with the conventions set by existing components.

Technical Details

• Component should be built using React and TypeScript.
• Follow BEM methodology and ensure compatibility with styled-components.
• Ensure the component adheres to a12y guidelines for text accessibility.
• Props to include: variant, color, size, align, weight, line-height, and custom-class.
• Integrate unit tests using Jest and React Testing Library.
• Review component alignment with the global typography standards from the FigJam report.

Acceptance Criteria

• The Text component should match the design specs in the FigJam report.
• It should support various text types such as headings, paragraphs, captions, etc.
• The component should match the Figma styles:
  • Figma Typography Large Screen
  • Figma Typography Small Screen
• Unit tests must cover at least 80% of the component’s functionality.
• Component should be reviewed and approved by both engineering and design teams.
• Documentation for the component should be added, covering usage, available props, and examples.
• Ensure all aspects meet the Definition of Done.
• The story should include a story for each prop, a default story

References

• Audit and Insight Report FigJam
• Figma Typography Large Screen
• Figma Typography Small Screen
• Definition of Done