TWE: Dev: Design System: Create Tags

[joshfishman]

Dependency

• TWE Design System Components: Tags #413 - The issue is closed, but it's not completed. It does not have enough information for the developers (microsite, design system, etc.)
• Create Input Chips in the style of Material Design  #622

Overview

We need to create Design System Tabs 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 Tabs
• 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
• 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, Tabs 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: Tags #413
  • 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: [Tabs.md] - link the name to the file in the repo
• 2.02 SASS file(s) created: [Tabs.scss] - link the name to the file in the repo
• 2.03 link to Header Microsite page on live site: Tabs(Replace with - link to the live URL If the site is live when this issue is worked on.

[joshfishman]

This looks good but what are the colors? Can we use more neutral coloring