TWE Design System Components: Paginations

[RobinElayn]

Overview

We need to create Pagination 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 styling for Google's M3
• Create Building Blocks
• Research Googles M3 guidelines to see what style, state and/or configuration variants are needed
• Create Style 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
• 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

  • Default, Hover, Pressed, Disabled

• 1.02 Configuration Variants (N/A)

• 1.03 Material Design relevant URLs:

  • https://mui.com/material-ui/react-pagination/?srsltid=AfmBOoqIAc8UpVZFqrmV7CezCdmdnTuHvSlxTzoaMNZ8OgyPlRfdNpQE)
  • Look at building blocks under M3 Figma File (Date Picker uses similar ones)

• 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]

See this for some guidance from React on how they are using Material for Pagination. Currently pagination is not included in https://m3.material.io/components/

[ExperimentsInHonesty]

Example from TDM Calc https://tdm-dev.azurewebsites.net/projects

with the drop down open

[jenregis91]

I've started research on this issue.

[jenregis91]

I've created components for the pages

[jenregis91]

Working on microsite

[jenregis91]

Making changes on color

[KC-skc]

Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

[jenregis91]

1. Progress: I began working on the microsite but I had to go back and update the colors/opacity
2. Blockers: I misunderstood that the colors/opacity settings should follow the Material guidelines.
3. Availability: I can work on it for 3 hours this week
4. ETA: Once I get the sign-off, I expect to be done with this issue by next week.

[jenregis91]

Revised colors/opacity on buttons and added "Paginations" section to microsite

[jenregis91]

1. Progress: I created the Design System - WIP and I am finalizing the Microsite.
2. Availability: I can work on it for 6 hours this week
3. ETA: Once I get the sign-off, I can move to the next step.
   

[jenregis91]

Will be updating the paginations microsite page to include the full paginations component only and revising the tabs.

[jenregis91]

Updated the microsite with the changes that were discussed.

[sunannie27]

@mklmrgn What is the status of design review of this?

[mklmrgn]

@sunannie27 Marking as done