TWE: Dev: Design System: Create Toggle Component

[Brayheart]

Dependency

• TWE Design System Components: Toggles #410

Overview

We need to create Design System Toggles 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 Toggles
• Determine if any JS or CSS hacks need to be included to style this component (see Resource 1.02 for examples of prior hacks). If you need to use a hack, don't forget to update the examples.
• 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 component classes and states within the page
  • Include Files via code snippets to create the code section (see Resource 1.07 for details)
• Review template frontend for errors
• Create feature to reinitialize Javascript on tab load
• I- [ ] Make a PR
• Once PR is merged
  • connect component in Figma to GitHub Files (Resource 1.08)
  • 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, Toggles 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 WIKI: How to Create a Design System Microsite Page using Snippets
• 1.08 Connect component in Figma to GitHub Files
• 1.09 Original Design Issue: TWE Design System Components: Toggles #410
  • 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: Toggles.md
• 2.02 SASS file(s) created: Toggles.scss
• 2.03 link to Header Microsite page on live site: Toggles

[ExperimentsInHonesty]

@mklmrgn Please review and clean up. When you think it's ready for a designer to pick it up, please add a ready for prioritization label

[junganthonyy]

PR: hackforla/internship-website-design-system#9

[ExperimentsInHonesty]

@joshfishman It looks like the PR is merged can this issue get closed

[junganthonyy]

Merged and updated 2.01/02/03 with links.