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 Components : Drop Down Menus #399 | TWE Design System: Code Drop Down component #486
• TWE Design System Components: Buttons  #400 | TWE Design System Components: Update Buttons according to M3 #619 | TWE: Dev: Design System: Create Button #736
• TWE Design System Components: Generic Homepage #401
• TWE Design System Components: Cards #402
• TWE Design System Components: Headers #403
• TWE Design System Components: Accordion Menu #404 | TWE Design System: Code Accordion Component #484
• TWE Design System Components: Typography #406 | TWE Design System: Code Typography  #487
• TWE Design System Components: Colors #407 | TWE: Dev: Design System: Create Colors #746
• TWE Design System Components: Footers #408
• TWE Design System Components: Dialogs (Modals/Pop-ups) #409
• TWE Design System Components: Toggles #410
• TWE Design System Components: Check Boxes #411 | TWE: Code Checkbox #741
• TWE Design System Components: Radio Buttons #412 | TWE: Design System - Code Radio Buttons component #457
• TWE Design System Components: Tags #413
• TWE Design System Components: Layout #414 | TWE: Dev: Design System: Create Layout #749
• TWE Design System Components: Grid System #415 | TWE: Dev: Design System: Create Grid System #750
• TWE Design System Components: Input Fields #416 | TWE: Dev: Design System: Create Input Fields #751
• TWE Design System Components: Text Area #417 Replaced by TWE Design System Components: Update Input field according to M3 #540
• 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 Replaced by Create Tabs in the style of Material Design #623
• TWE Design System Components: Paginations #424 | TWE: Dev: Design System: Create Pagination #753
• TWE Design System Components: Tooltips #425
• TWE Design System Components: Icons #426
• TWE Design System Components: Snackbar #464
• TWE Design System Components: Feedback alert #510
• TWE Design System Components: Banner #511
• TWE Design System: Web Typography Standards Research #528
• TWE Design System Components: Dropdown with checkbox #538 Replaced by TWE Design System Components: Update Dropdown according to M3 #543
• Create Input Chips in the style of Material Design  #622
• TWE Design System Components: Update Buttons according to M3 #619 (an issue to update the work done on TWE Design System Components: Buttons  #400)
• TWE Design System Components: Text Button #625 Replaced by TWE Design System Components: Update Buttons according to M3 #619
• TWE Design System Components: logo variations #626
• TWE Design System Components: Badges #693
• TWE Design System Components: Icon Buttons #731 | TWE: Dev: Design System: Create Icon Buttons #752

[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

[sunannie27]

@jnomad21
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.