Develop Design System Microsite based on Material for MKDocs

[joshfishman]

Dependencies

• TWE Design System: Create Generic Design Components and Mockups #397
• TWE Design System: Design Microsite #446

Overview

We need to develop a microsite to hold the Design System components.
This site should be based on Material for MKDocs and setup to run on the internship repo's Github Pages

Action Items

• Setup MkDocs for Material Design locally
• Set up microsite on the internship design system
• Develop Component microsite pages for the Issues below

Resources/Instructions

• Contributing to the Internship Design System
• Current Live Version
• Getting Started with Material for MkDocs
• Using snippets to include code
• Material for MkDocs Snippets
• Spreadsheet: TWE: Design System Issue Handoff

Issues for the epic

• TWE: Design System - Code Radio Buttons component #457
• TWE Design System: Code Typography  #487
• TWE Design System: Code color component #488
• TWE Design System: Code Accordion Component #484
• TWE: Design System - Code Radio Buttons component #457
• TWE Design System Components: Update Buttons according to M3 #619
• TWE Design System: Code Drop Down component #486

[jnomad21]

https://github.com/hackforla/website/blob/be141ca26874ff91f045b5527a422ff915b59640/_sass/elements/_buttons.scss#L28C3-L28C3

[jnomad21]

https://github.com/hackforla/website/blob/be141ca26874ff91f045b5527a422ff915b59640/_sass/elements/_buttons.scss#L24

[ExperimentsInHonesty]

• This list of design issues for components came from this issue TWE Design System: Create Generic Design Components and Mockups #397
• Use this template to make new development issues Issue Template Dev: Create Design System Microsite Component

Design issue | Development issue

• TWE Design System Components : Drop Down Menus #399 | TWE Design System: Code Drop Down component #486
• TWE Design System Components: Accordion Menu #404 | TWE Design System: Code Accordion Component #484
• TWE Design System Components: Headers #403 | TWE: Dev: Design System: Create Header Component #489
• TWE Design System Components: Buttons  #400 TWE Design System Components: Update Buttons according to M3 #619 |
• TWE Design System Components: Cards #402 |
• TWE Design System Components: Generic Homepage #401 |
• TWE Design System Components: Typography #406 |
• TWE Design System Components: Colors #407 | TWE Design System: Code color component #488
• TWE Design System: Web Typography Standards Research #528 |
• TWE Design System Components: Dialogs (Modals/Pop-ups) #409 |
• TWE Design System Components: Toggles #410 |
• TWE Design System Components: Check Boxes #411 |
• TWE Design System Components: Radio Buttons #412 | TWE Design System: Code Radio Button Component #471
• TWE Design System Components: Tags #413 | Is SDG 9 relevant to TWE #517
• TWE Design System Components: Layout #414 |
• TWE Design System Components: Grid System #415 |
• TWE Design System Components: Input Fields #416 |
• TWE Design System Components: Text Area #417 |
• TWE Design System Components: Notifications #418 |
• TWE Design System Components: Date Pickers #419 |
• TWE Design System Components: Sliders #420 |
• TWE Design System Components: Progress Bars (Progress Steppers) #421 |
• TWE Design System Components: Breadcrumbs #422 |
• TWE Design System Components: Tabs #423 Create Tabs in the style of Material Design #623 |
• TWE Design System Components: Paginations #424 |
• TWE Design System Components: Tooltips #425 |
• TWE Design System Components: Icons #426 |
• TWE Design System Components: Feedback alert #510 |
• TWE Design System Components: Banner #511 |
• TWE Design System Components: Dropdown with checkbox #538 |
• TWE Design System Components: Icon Buttons | TWE Design System Components: Icon Buttons #731

This was created before the microsite workflow was created. The [Replace with SECTION NAME] section in the Figma will need more details. Also, this issue will need a microsite page, or indication of which template to use (if it's similar to other pages).

- [Figma, Design System (WIP), [Replace with SECTION NAME]
- [Figma, ↳ Microsite Ready for Dev](https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?type=design&node-id=2-54&mode=design&t=jEcPrUuwVPDSu2EM-0)

Design Agenda

• Agenda: Design Team Meeting Agenda #391
• Comment: Design Team Meeting Agenda #391 (comment)

[KC-skc]

@joshfishman

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.

[mklmrgn]

• Issue TWE Design System Components: Badges #693 has been released by design

[mklmrgn]

• Issue TWE Design System Components: Paginations #424 has been released by design