TWE Design System: Code Accordion Component

[joshfishman]

Dependencies

• TWE Design System Components: Accordion Menu #404
• TWE Design System Components: Update Checkbox according to M3 #542

Overview

We need to create Design System accordion Component HTML and SASS / connect Figma design to finished code, and build microsite page so that developers can see and easily change component examples, states, code and location.

Assumptions

• You have read the CONTRIBUTING.md in the Design System repo
  • You have set up your development environment for working with the Internship Design System Repository: https://github.com/hackforla/internship-website-design-system
  • You will continue to follow the instructions in CONTRIBUTING.md file

Action Items

• Review the Microsite page mockup you will be working from (Resource 1.01)
• Name the Branch you create accordion
• Include necessary files in the /docs folder (Resource 1.03) and project config file mkdocs.yml (Resource 1.04)
• Determine what variables are needed for this component and add them to variables.scss (Resource 1.05)
• Code Microsite component page
  • file locations
    • md file goes into the /docs folder (Resource 1.03)
    • SASS file goes into the /docs/components/sass/components folder (Resource 1.06)
  • Create variables in sass sheet as necessary, add color varialbles with name determined by HTML Color Codes (Resource 1.07, 1.08)
  • Create component classes and states within the page
  • Include Files via code snippets to create the code section (see Resource 1.09 for details)
  • Add links to SASS and Markdown files below the code (see examples in Resource 1.10)
• Review template frontend for errors
• Make a PR titled "Accordion Component PR"
• Once PR is merged
  • connect component in Figma to GitHub Files (Resource 1.10)
  • Add links to Resources gathered during the completion of this issue section
    • 2.01 MD file(s) created
    • 2.02 SASS file(s) created
    • 2.03 link to Header Microsite page on live site: If the site is live when this issue is worked on.

Resources

Resources for working on this issue

• 1.01 Design Reference
  • Figma, accordion Microsite page
  • Design Systems Figma
• 1.02 WIKI: Design system microsite JavaScript and sass hacks
• 1.03 MKdocs folder: /docs on repo
• 1.04 MDdocs config file: mkdocs.yml on repo
• 1.05 variables file: /docs/components/sass/abstracts/_variables.scss on repo
• 1.06 SASS file folder: /docs/components/sass/components
• 1.07 Variables SASS Sheet: /docs/components/sass/abstracts/variables.sss
• 1.08 HTML Color Code Names: HTMLColorCodes.com
• 1.09 WIKI: How to Create a Design System Microsite Page using Snippets
• 1.10 e.g.,
  • below the CSS tab, it would say CSS: https://github.com/hackforla/internship-website-design-system/blob/main/docs/components/sass/components/_accordion.scss
  • below the HTML tab it would say HTML: https://github.com/hackforla/internship-website-design-system/blob/main/docs/accordion.md
• 1.11 Connect component in Figma to GitHub Files
• 1.12 Original Design Issue: [Replace with LINK TO DESIGN ISSUE FROM EPIC]
  • Microsite Epic Issue with list of design issues: #Develop Design System Microsite based on Material for MKDocs #455 (comment)

Resources gathered during the completion of this issue

• 2.01 MD file(s) created: [accordion.md] - link the name to the file in the repo
• 2.02 SASS file(s) created: [accordion.scss] - link the name to the file in the repo
• 2.03 link to Header Microsite page on live site: accordion(Replace with - link to the live URL If the site is live when this issue is worked on.

[sanatauqir92]

in-progress on creating component in its own html and sass files

[ExperimentsInHonesty]

Use the material design icon library

[ExperimentsInHonesty]

Add that we are using the material design icon library to the software engineering wiki page with any appropriate links

[ExperimentsInHonesty]

@junganthonyy Please provide update

Instructions

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 (if necessary): "Add any pictures that will help illustrate what you are working on."

You can use this template

1. Progress: 
2. Blockers: 
3. Availability:
4. ETA:
5. Pictures (if necessary): 

[junganthonyy]

hackforla/internship-website-design-system#14

1. Progress: Ready for review
2. Blockers: None
3. Availability: N/A
4. ETA: N/A
5. Pictures (if necessary):