hackforla / hackforla/internship
TWE: Dev: Design System: Create Header Component
- Dominant language
- CSS
- Stars
- 20
- Forks
- 6
- PR merge metrics
- No merged PRs in 30d
Description
### Dependencies
- [ ] #403
- [ ] This issue cannot be completed until design issues microsite guidance. https://github.com/hackforla/internship/issues/101#issuecomment-2057528468. Once they do, add a link to the appropriate Figma page to Resource 1.01 where it says [Figma, Header Microsite page]
### Overview
We need to create Design System Header 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](https://github.com/hackforla/internship-website-design-system/blob/main/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 Header
- [ ] 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, Header Microsite page]
- [Design Systems Figma](https://www.figma.com/file/TTRS2FWXsrymHYpPJL1IdH/Internship-Team-Main-file?type=design&node-id=2%3A45&mode=design&t=jgMN8QdoLnh9F7MT-1)
- 1.02 WIKI: [Design system microsite JavaScript and sass hacks](https://github.com/hackforla/internship/wiki/Design-system-microsite-javascript-and-sass-hacks.md)
- 1.03 MKdocs folder: [/docs](https://github.com/hackforla/internship-website-design-system/tree/main/docs) on repo
- 1.04 MDdocs config file: [mkdocs.yml](https://github.com/hackforla/internship-website-design-system/blob/main/mkdocs.yml) on repo
- 1.05 variables file: [/docs/components/sass/abstracts/_variables.scss](https://github.com/hackforla/internship-website-design-system/tree/main/docs/components/sass/abstracts) on repo
- 1.06 SASS file folder: [/docs/components/sass/components](https://github.com/hackforla/internship-website-design-system/tree/main/docs/components/sass/components)
- 1.07 WIKI: [How to Create a Design System Microsite Page using Snippets](https://github.com/hackforla/internship/wiki/How-to-Create-a-Design-System-Microsite-Page-using-Snippets)
- 1.08 [Connect component in Figma to GitHub Files](https://github.com/hackforla/internship/wiki/Connect-component-in-Figma-to-GitHub-Files)
- 1.09 Original Design Issue: #403
- Microsite Epic Issue with list of design issues: https://github.com/hackforla/internship/issues/455#issuecomment-2057437256
#### Resources gathered during the completion of this issue
- 2.01 MD file(s) created: [Header.md] - link the name to the file in the repo
- 2.02 SASS file(s) created: [Header.scss] - link the name to the file in the repo
- 2.03 link to Header Microsite page on live site: Header - link to the live URL If the site is live when this issue is worked on.
Contributor guide
Assessment
This issue has not been assessed yet.