hackforla / hackforla/internship

TWE Design System Components: Progress Bars (Progress Steppers)

Offen
#421 5 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
complexity: medium draft feature: design system Participant Type: TWE Team Member role: UI/UX design size: 0.50pt
Vorherrschende Sprache
CSS
Sterne
20
Forks
6
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### 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 https://github.com/hackforla/internship/issues/397
- [ ] leave a comment on https://github.com/hackforla/internship/issues/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

![image](https://github.com/user-attachments/assets/b18b3781-1306-4a55-af3d-4e8331bc26a0)

- 1.04.02 ~[Internship Figma File, Design System, Pagination](https://www.figma.com/design/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=2790-13408&t=LIwAbNbbuuqGDm0N-0)~ -We're going to replace this
- Google Doc: [HfLA Design System Guide for Designers (v2)](https://docs.google.com/document/d/14BZYFEa5s5FESeASNorEDLH6zEW0LTYcpD1NVyE66iM/edit#heading=h.pq5p3t1w1lw2)

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Start by reviewing the linked Material Design stepper resources, previous HFLA uses, and the example Profile Card on the Figma Design System - WIP page. Create and document the Progress Stepper building blocks and applicable style, state, and configuration variants in Figma; done requires the requested page updates and design and product sign-offs.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
figma
Bereich
design
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.