Finish dev documentation of Design System

[daniellex0]

Overview

We need to complete the developer-facing documentation of the design system so that developers can easily pickup how and when to utilize reusable components

Action Items

• Wiki files and check if the flow makes sense
  • https://github.com/hackforla/website/wiki/Standardized-Components
  • https://github.com/hackforla/website/wiki/How-to-create-a-page-on-Hack-for-LA-website
  • https://github.com/hackforla/website/wiki/Hack-for-LA's-Site-Architecture#styling-files
• SCSS files - document clearer if needed
  • https://github.com/hackforla/website/blob/gh-pages/_sass/elements/_buttons.scss
  • https://github.com/hackforla/website/blob/gh-pages/_sass/elements/_cards.scss
  • Color variable/components
  • Typography class
• Figure out how to link GitHub SCSS file to the corresponding Figma component
• Create checklist
  • https://docs.google.com/document/d/1jQ9C52jfLPztB3hky01W5za8eGydxP7lnudCR64eXkw/edit?usp=sharing
  • Figure out what is redundant and the priority of what will be standardized in the near future
  • https://github.com/hackforla/website/tree/gh-pages/_sass
• Figma, Style Guide - Start Here, Dev
  • https://www.figma.com/file/0RRPy1Ph7HafI3qOITg0Mr/Hack-for-LA-Website?node-id=3464%3A3

Resources/Instructions

Design System on Figma
Standardized Components wiki
How to create a new page wiki

[daniellex0]

@daniellex0 , @qiqicodes , and @ruqpyL2 are working on this

[qiqicodes]

Progress: restructuring wiki navigation by categorizing. rewriting design component documents.

Blockers: @daniellex0 @ruqpyL2 @qiqicodes are meeting this week. Loop in @akibrhast when the meeting is happening.

ETA: TBD

[qiqicodes]

Progress: trying out UI component libraries, such as storybook, styleguidist, etc... to see which one fits our needs best
Blockers: need to arrange a meeting to discuss the tradeoffs

[qiqicodes]

Progress: Same progress
Blockers: Likely we will meet next week to discuss the tradeoffs

[daniellex0]

Progress: Heard about different way to approach wiki reorganization from Bonnie, but waiting for buy-in from dev team. Still figuring out feasibility of Storybook/Styleguidist vs. dedicated web page for component documentation
Blockers: Busy week for everyone

[daniellex0]

Progress: Moving forward with wiki reorganization and reformat. Still determining whether to have dedicated web page for component documentation
Blockers: Limited time
Next steps: Meeting this week about stylebook, move forward with making updates to wiki

[daniellex0]

Progress: Figured out that can use expandable arrows for wiki sidebar organizations. Met about Storybook, which will be way too difficult to implement without React (let alone with). Dedicated web page for component documentation looking like best option right now.
Blockers: Limited time
Next steps: Move forward with making updates to wiki

[daniellex0]

Progress: Got approval for dedicated web page for component documentation, and got approval (with a few edits) from Bonnie and devs for wiki reorganization.
Next steps: Implement updates to wiki. Design dedicated webpage for documenting components and have it developed.

[Sihemgourou]

Hey @daniellex0, should we start the implementation of the design system in the code base ? we can already start with the validated part right ?

[daniellex0]

Hey @Sihemgourou , some of it is already implemented! For example buttons and page cards, which are the most common reusable components throughout the site, are already standardized. The other big piece left is standardizing headings, and I discussed this with Akib yesterday about how to have developers help with that. But yes, there are some more pieces that need to be implemented 👍

[akibrhast]

@daniellex0 What is the next step that developers can take to help with that?

[Sihemgourou]

I am going to create an issue about that

[github-actions]

@ruqpyL2 Please add update

1. Progress
2. Blockers
3. Availability
4. ETA

Danielle will be leaving the project in July, please let us know how likely we are to finish the project by early July, and if additional ressources are needed or if the issue needs to be broken in multiple issues.

[csseu]

1. Have all go-aheads now to finish wiki 2. My job 3. This weekend 4. This weekend

…

On Wed, Jun 16, 2021, 12:24 PM github-actions[bot] ***@***.***> wrote: @ruqpyL2 <https://github.com/ruqpyL2> Please add update 1. Progress 2. Blockers 3. Avaibility 4. ETA — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1416 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFPUKTQBVR2HB7WSLQXN34TTTD27BANCNFSM43EL6XBA> .

[Sihemgourou]

@ruqpyL2 this issue is about the design system, your answer is about the wiki, do you think the two issues are interdependent ?

[csseu]

Yes, at the start of the project we decided that wiki should clearly point to the design system. Since the wiki is/was a hot mess, that would have been difficult. So organizing the wiki was the first phase of making sure folks could eventually find the design system.

…

On Wed, Jun 16, 2021, 12:55 PM Sihemgourou ***@***.***> wrote: @ruqpyL2 <https://github.com/ruqpyL2> this issue is about the design system, your answer is about the wiki, do you think the two issues are interdependent ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1416 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFPUKTTI4MJYSJCK4DK3HADTTD6TRANCNFSM43EL6XBA> .

[daniellex0]

Progress: Designing component library webpage that developers will be able to reference. Met with interested developers who will be able to help implement this.
Blockers: None
Availability: flexible
ETA: 1 week (design portion of component library webpage)

[daniellex0]

Progress: Met with Kristin about component library webpage and she designed a great mockup for component layout. I will implement the design on the rest of the components and send the page to development. Will coordinate meeting with more interested developers on the team to discuss implementing the component library webpage.
Blockers: None
Availability: flexible
ETA: 3 days (design portion of component library webpage)

[github-actions]

@daniellex0 Please add update

1. Progress
2. Blockers
3. Availability
4. ETA

[daniellex0]

Progress: Met with developers on the team to discuss implementing the component library webpage and get feedback on designs. Am currently implementing edits and finalizing the design to send off to developers by tonight.
Blockers: None
Availability: flexible
ETA: today

[daniellex0]

Progress: Finished designing dedicated webpage for components and met with developers to discuss and get more feedback. Sarah is now in charge of implementing the designs, and once she builds the structure will assign others. Adam is in charge of assigning people to standardize components as she moves along.
Remaining step: I need to finish descriptions in component webpage, and wiki page encouraging to use the component library
Blockers: None
Availability: flexible
ETA: 7/22