TWE Design System Components: Headers

[meetminji]

Overview

We need to create responsive Headers for the TWE design system for the future website development & handoff.

Details

This issue had been worked on before we decided to update with M3 and other requirements. You can see the prior work on resource 1.04.01 in the section called NEED TEMPLATE REVISION.

Action Items

• Research current HFLA projects to see use of headers
• Research styling for Google's M3
• Research Google's M3 guidelines to see what similar components they use.
• Create Building Blocks (if applicable)
• Create State Variants (see resource 1.01) and apply this to Navigation Items
• Create Configuration Variants (see resource 1.02)
• 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 (general and dev)
• 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)
  • If there is a link with a strike-through on 1.04.02, please go to the link, and remove that content from the NEED TEMPLATE/REVISION section.
• 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

• 1.01 State Variants (for Navigation Items)

  • Needs further research, as there's no header component (uses top app bars and navigation bars)
  • Use the actual navigation of the M3 site as an example of hover/selected/enabled states https://m3.material.io/

• 1.02 Configuration Variants

  • Needs to be researched (Consider at least mobile and desktop). For example, nav choices collapsing into hamburger menu.

• 1.03 Material Design relevant URLs:

  • https://m3.material.io/components/ - [Design Lead, will find exact URL and replace this link]

• 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, Need Template Revision,ADD NAME OF COMPONENT

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

[bryannalim]

Changed all header loose text to text styles for consistency. Needs to be reviewed then closed.