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)

[mklmrgn]

@jovyflagg Ready to update/create WIP page (specs, etc) and Microsite

[jovyflagg]

Started working on the design specs and microsite to be finished this week.

[jovyflagg]

Specs and descriptions are ready on WIP Design systems.

[sunannie27]

@jovyflagg @mklmrgn

Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

[mklmrgn]

1. Progress: Component and WIP complete Just needs Microsite
2. Blockers: Unable to contact Jovy to complete the next steps
3. N/A
4. ETA: 1 Hr

[mklmrgn]

Microsite complete, issue is complete