hackforla / hackforla/internship

Design: New Component: Carousel

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

Description

### Overview
We need to create a Carousel Component for the TWE design system for the future website development & handoff. Carousels contains a collection of items that can be scrolled on and off the screen.

### Action Items
- [ ] Research styling for Google's M3
- [ ] Research Googles M3 guidelines to see what style, state and/or configuration variants are needed
- [ ] Meet with Design Team to get sign off on which sizes, states, layouts will be used.
- [ ] Create Building Blocks
- [ ] Create Size variations
- [ ] Create State Variants, **if needed** (see resource 1.01 and M3 guidelines 1.03)
- [ ] Create Layout Variants **if needed** (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
-TBD

- 1.02 Configuration Variants
- TBD

- 1.03 Material Design relevant URLs:
https://m3.material.io/components/carousel/specs

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

- 1.04.02 ~[Internship Figma File, Design System, Need Template Revision,[ADD NAME OF COMPONENT](https://www.figma.com/design/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?node-id=2790-13406&node-type=frame&t=50bfH3NclibVgqCf-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)

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.