TWE: Dev: Design System: Create Badges
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 55/100
- Tipo di issue
- Funzionalità
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Tranquilla
- Stack tecnologico
- css, html, markdown, sass
- Ambito
- design, documentation, frontend
Direzione di ricerca
Esamina prima il mockup di Badges Microsite, il Material Design Kit e CONTRIBUTING.md. Poi ispeziona mkdocs.yml, docs/badges.md, docs/components/sass/components/_badges.scss e il file variables.scss esistente per seguire le convenzioni del progetto. Il lavoro è considerato completato quando gli stati documentati del componente e gli esempi di codice corrispondono al design, sono inclusi i link e i token richiesti e il frontend del template è stato verificato prima di aprire una PR.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
Dependencies
#693
Overview
We need to create Design System Badges 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)
- Review the Material Design Kit and identify the relevant component, variants, and states (Resource 1.13)
- Review Code Standards before starting implementation
- Name the Branch you create
badges - Determine if any JavaScript needs to be included to style this component (see Resource 1.02 for examples of included JavaScript). If you do need to use JS, don't forget to update the wiki page
- Include necessary files in the
/docsfolder (Resource 1.03) and project config filemkdocs.yml(Resource 1.04) - Determine what tokens are needed for this component
- Reuse existing tokens where possible
- Add new tokens only if necessary
- 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 tokens as necessary, reusing existing tokens where possible; add new color tokens only if required and name them using HTML Color Code conventions (Resources 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)
- file locations
- Review template frontend for errors
- Make a 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 issuesection- 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
- 1.02 WIKI: Design system microsite JavaScript
- 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 Naming conventions:
- below the CSS tab, it would say CSS: https://github.com/hackforla/internship-website-design-system/blob/main/docs/components/sass/components/_badges.scss
- below the HTML tab it would say HTML: https://github.com/hackforla/internship-website-design-system/blob/main/docs/badges.md
- 1.11 Connect component in Figma to GitHub Files
- 1.12 Original Design Issue: #693
- 1.13 Material Design Kit (Figma)
- Microsite Epic Issue with list of design issues: #824
Resources gathered during the completion of this issue
- 2.01 MD file(s) created: [badges.md] - link the name to the file in the repo
- 2.02 SASS file(s) created: [badges.scss] - link the name to the file in the repo
- 2.03 link to Header Microsite page on live site: [Badges](Replace with - link to the live URL If the site is live when this issue is worked on.
- Lingua principale
- CSS
- Stelle
- 20
- Fork
- 6
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Preparare l'ambiente
- Nessun Dockerfile né file Docker Compose
- Ha un modello di pull request
- Leggi la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di hackforla/internship
-
documentation help wanted question
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 90/100
hackforla/internship#835 ·
-
TWE: Research: Skills Issue: Onboard and Assess: Promise McEntireForse già presa @promise-mc l’ha presa 28 giorni fa. Apertafeature: onboarding feature: skills assessment good first issue Participant Type: TWE Team Member role: new team member role: UI/UX research size: 0.50pt
hackforla/internship#833 · 28 commenti · 1 assegnatario ·
-
TWE Design System: Create Microsite Documentation Standards and Contributor GuidelinesForse di nuovo libera @revforyou l’ha presa 120 giorni fa e non c’è nessuna pull request aperta. Apertacomplexity: small feature: design system role: engineering size: 1pt
hackforla/internship#831 · 1 assegnatario ·
-
TWE: Dev: Design System: Update Toggle with TokensForse di nuovo libera @zvidmarb l’ha presa 141 giorni fa e non c’è nessuna pull request aperta. Apertacomplexity: small feature: design system Participant Type: TWE Team Member role: engineering size: 1pt
hackforla/internship#830 · 1 assegnatario ·
-
complexity: medium feature: design system Participant Type: TWE Team Member role: engineering size: 2pt
Difficoltà 4/5 3-5 giorni Idoneità per principianti 52/100
hackforla/internship#829 ·
Tutte le issue di hackforla/internship
Issue simili
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
I maintainer di solito rispondono entro 1 giorno
-
Request: BizumApertanew icon permissions in review
Difficoltà 2/5 1-3 ore Idoneità per principianti 72/100
simple-icons/simple-icons#15080 ·
I maintainer di solito rispondono entro 1 giorno
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 66/100
IBM/carbon-components-ember#1049 ·
I maintainer di solito rispondono entro 1 giorno
-
Bug Status: Needs Review Toolkit
Difficoltà 2/5 1-3 ore Idoneità per principianti 82/100
I maintainer di solito rispondono entro 1 giorno
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 74/100
yegor256/ppt-slides#105 ·
I maintainer di solito rispondono entro 1 giorno