TWE Design System Components: Badges

[mklmrgn]

Overview

We need to create a badge component for the TWE design system for the future website development & handoff.

Details

Badges show notifications, counts, or status information on navigation items and icons

Action Items

• Research Googles M3 guidelines to see what style, state and/or configuration variants are possible
• meet with design lead to decide which variants will be created for our design system
  • add list to resource 1.01 and 1.02
• Create Configuration Variants (see resource 1.02 and M3 guidelines 1.03)
• Weekly (or more often if needed) communicate changes in issues comments (below) 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
• When this issue is complete, please release Create Tabs in the style of Material Design #623 from the icebox.
• 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

• 1.01 State Variants

  • Not Applicable

• 1.02 Configuration Variants

  • https://m3.material.io/components/snackbar/specs
  • Use Configurations 1-4 with and without icon

• 1.03 Material Design relevant URLs:

  • https://m3.material.io/components/snackbar/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)

[jovyflagg]

Ready for review (Link to the Badge component section on Figma)