Create Tabs in the style of Material Design

[mklmrgn]

### Dependency #693 (Badges complete)

Overview

Tabs organize content across different screens and views.

Action Items

• Research tab styling for Google's M3
• Create Building Blocks for Tabs
• Create Primary and Secondary Tabs.
• Create variants for different states (Active vs Inactive)
• Create variants for different states (Enabled, Hover, Focused)
• Create variants for different configurations (leading icon, trailing icon, both)
• Communicate changes in issue's comments and with design team
• Get sign-off from Design Lead
• Get sign-off from Product Manager
• Update Figma page: Design System - WIP (resource 1.04)
  • Add all the details that canvas asks for (see resources 1.04.01 for example of what/where you are updating)
• Update Figma page: Microsite Ready for Dev
• Close Issue
• Update epic by checking box TWE Design System: Create Generic Design Components and Mockups #397
• leave a comment on Develop Design System Microsite based on Material for MKDocs #455 with the following text

  Issue #[REPLACE WITH YOUR ISSUE NUMBER] has been released by design
  

Resources/Instructions

• Google Doc

• HfLA Figma File

• Internships Figma File

  • Internship Figma File, Design System, Tabs -We're going to replace this

• Material Design 3 Tabs Overview

• 1.04 Figma File: Internships Figma, Design System - WIP

  • 1.04.01 Example Figma page: Design System - WIP, Profile Card

    Details

    

  • 1.04.02 Internship Figma File, Design System, Tabs -We're going to replace this

• Google Doc: HfLA Design System Guide for Designers (v2)