hackforla / hackforla/internship

Design: New Component: Lists

Open
#758 0 comments 0 reactions 0 assignees View on GitHub
complexity: large feature: design system Participant Type: TWE Team Member Ready for product role: UI/UX design size: 3pt
Dominant language
CSS
Stars
20
Forks
6
PR merge metrics
No merged PRs in 30d

Description

### Overview
We need to create Lists for the TWE design system for the future website development & handoff. Lists are continuous, vertical indexes of text and images.

#### 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 styling for Google's M3
- [ ] Create Building Blocks (if applicable)
- [ ] Research Googles M3 guidelines to see what size, state and/or configuration variants are needed
- [ ] Meet with Design Team to decide which sizes and configurations will be used.
- [ ] Create Size variations
- [ ] Create State Variants (see resource 1.01 and M3 guidelines 1.03)
- [ ] 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 (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 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
- This component uses different overlays for the states (see Material 3 Figma Kit).
-
- 1.02 Configuration and Size Variants
- Sizes: 1 line, 2 line, 3 line
- Configurations: See M3 guidelines for variety of configurations

- 1.03 Material Design relevant URLs:
https://m3.material.io/components/lists/specs
- 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)

- Google Doc: [HfLA Design System Guide for Designers (v2)](https://docs.google.com/document/d/14BZYFEa5s5FESeASNorEDLH6zEW0LTYcpD1NVyE66iM/edit#heading=h.pq5p3t1w1lw2)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.