TWE: Dev: Design System: Create Elevation Shadows
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Idoneità per principianti
- 52/100
- Tipo di issue
- Funzionalità
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Tranquilla
- Stack tecnologico
- html, markdown, sass
- Ambito
- design, documentation, frontend
Direzione di ricerca
Inizia leggendo CONTRIBUTING.md e rivedendo il mockup Elevation Shadows in Figma, quindi esamina /docs, mkdocs.yml e i file esistenti in /docs/components/sass/components. Crea elevation.md e elevation.scss con i token, gli stati del componente, gli snippet e i collegamenti ai file richiesti; verifica il frontend del microsito, crea una PR e collega il componente integrato a Figma.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
Dependencies
#541
Overview
We need to create Design System Elevation Shadows 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
elevation - 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/_elevation.scss
- below the HTML tab it would say HTML: https://github.com/hackforla/internship-website-design-system/blob/main/docs/elevation.md
- 1.11 Connect component in Figma to GitHub Files
- 1.12 Original Design Issue: #541
- 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: [elevation.md] - link the name to the file in the repo
- 2.02 SASS file(s) created: [elevation.scss] - link the name to the file in the repo
- 2.03 link to Header Microsite page on live site: [Elevation Shadows](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 di nuovo libera @promise-mc l’ha presa 28 giorni fa e non c’è nessuna pull request aperta. 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 55/100
hackforla/internship#828 ·
Tutte le issue di hackforla/internship
Issue simili
-
documentation
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
SwiftKickMobile/skai#72 ·
-
[美术] 三张背景图与场景对不上，需要替换Aperta美术
Difficoltà 2/5 1-3 ore Idoneità per principianti 68/100
-
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