TWE Design System Components: Progress Bars (Progress Steppers)

[RobinElayn]

Overview

We need to create Progress Steppers for the TWE design system for the future website development & handoff.

Action Items

• Look for any previous uses in HFLA projects
• As there's no direct M3 component, look for examples of this component in other design systems, products, or old versions of Material Design.
• Apply current general M3 styling and standards to component, if possible
• Create Building Blocks
• Create Style variations (if applicable)
• Create any State Variants (if applicable - see resource 1.01)
• Create Configuration Variants
• 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)
  • 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 https://m3.material.io/foundations/interaction/states/overview

• 1.03 Material Design relevant URLs:

  • https://m1.material.io/components/steppers.html#steppers-usage

• 1.04 Figma File: [Internships Figma, Design System - WIP](https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=2-45&t=UnquUaQhvcuGgsKH-0

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

    Details

    

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

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

[ExperimentsInHonesty]

@mklmrgn

Are these meant to be:
Indicators that the user needs to wait (i.e. something is loading).
A step indicator, where they're told what step they are in a process they are working on.

A: We agree a Loading Indicator and Step indicator are two separate things

• Step indicator or Progress Bar can be seen on the Expunge Assist website https://expungeassist.org/welcome
• Loading Indicator can be seen on this Hack for LA website page https://hackforla.org/dashboard

Please keep this issue about a Progress Bar (step indicator)

Please make a new issue for the Loading Indicator if we don't have one.