Create the design system pages

[Aveline-art]

Overview

Jumping off of discussion that started in #1850, this will be the issue to discuss the specifics of the Design System webpages that will exist on our website.

Last comment on the Design System webpages from #1850 .

Action items

• Decide on goals of the pages
• Decide on design of the architecture
• Create prototype of the design system
• Open a discuss on prototype if needed
• Finalize design system pages - this will need to be a new issue (which has as its dependency, the design system team making new mockups for development). See comment below

Resources/Instructions

#577
#1416
#1850
Figma

[Aveline-art]

MVP for prototype:

• Have all the information on the page
• Implement it in a way that is sustainable (meaning that it is easy to maintain and add more components in the future)
• Prototype will only be buttons and page cards
  • Sidenav should work such that clicking on the links will direct the user to the right pages/sections of the page

[abuna1985]

Notes from Design System Team Meeting - July 14, 2020

1. Figma Design for Design System Website content is all there. @daniellex0 needs to add space (margin).

2. Current Structure of the Figma design

Buttons
  Sizes (small, medium, Large, X-Large)
  colors (primary, dark)

Page Cards
  sizes (small, medium, Large, X-Large)
  colors (primary, dark)

Other Cards

Input fields

Tags

Accordion

Modal

Dropdown

Side Nav

3. @abuna1985 did some research on design system templates and found:

   • A Brad Frost design template in Jekyll repo and the example Jekyll site for reference.
   • A forked design template in Jekyll repo and the another example Jekyll site for reference

4. @daniellex0 MVP/Prototype goals

   • Used as a reference for developers
   • Have all the info easily available
   • Implement the site it so it is sustainable meaning:
     • It is easy to maintain
     • Can easily add more elements in the future.

5. Other Questions?

   • Sidebar navigation - will it be static or are we going to have Jekyll build it?
   • Instead of saying and typing design system a bunch of times, maybe we should come up with a name (like Hack for LA Angel)?

6. @arghmatey volunteered to take on issue Create the design system pages #1927 and build Button and Card page.

7. @Aveline-art designated @abuna1985 to oversee Standardizing the HFLA Design System #1850.

[arghmatey]

Progress: Front end basics complete for page. Backend architecture is in progress.
Blockers: Became unexpectedly busy this week.
Availability: Freeing up 7/31 and the week of 8/2
ETA: For completion - unsure. For good progress - early next week.

Edit: This comment was meant to be left on 7/30, but internet was constantly being dropped that day and did not post.

[Aveline-art]

@arghmatey You probably already know this, but I want to give you a heads up: the copy button is already a component on the website, and we are planning to make a issue to componentize it. You can feel free to put a placeholder for your template!

On that note, Bonnie also mentioned that, for MVP, there is no need to worry too much about content or styles as long as the overall object placement of the template fits.

[github-actions]

@arghmatey

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at a Tuesday or Sunday meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 3, 2021 at 7:53 AM.}

---

Note: This comment was created as part of a GitHub Action during its trial phase. If you find this GitHub Action to be disruptive/unhelpful, or if you believe there might be a bug, please leave a comment on this issue. All feedback will be used to further improve it. Thank you for your time.

[arghmatey]

Created draft pull request #2070 to keep track of progress.

1. Progress: Created front end and back end. Continuing research on best practices. Styling and adding the rest of component information to files still needs to be completed.
2. Blockers: Time! Busier than I expected, but I believe the hardest parts are done.
3. Availability: Monday evening, Tuesday afternoon
4. ETA: TBD - I would like to mention during Tuesday developers meeting and collect feedback.
5. Pictures: See draft pull request.

[github-actions]

@arghmatey

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at a Tuesday or Sunday meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 10, 2021 at 12:10 AM.}

---

Note: This comment was created as part of a GitHub Action during its trial phase. If you find this GitHub Action to be disruptive/unhelpful, or if you believe there might be a bug, please leave a comment on this issue. All feedback will be used to further improve it. Thank you for your time.

[arghmatey]

Progress: Huge progress has been made since last update.
Blockers: Margins in Figma file will be changed. Image page cards have no standard component created.
Availability: Will hop back on when margins are fixed.
ETA: Dependent on blockers. Since this is only the prototype, I believe we can move on without the image page cards.
Pictures: See attached PR draft.

[github-actions]

@arghmatey

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 17, 2021 at 12:02 AM PST.}

[github-actions]

@arghmatey

Please add update using this template (even if you have a pull request)

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either: 1) ask for help at your next meeting, 2) put a "Status: Help Wanted" label on your issue and pull request, or 3) put up a request for assistance on the #hfla-site channel.

_{You are receiving this comment because your last comment was before Tuesday, August 24, 2021 at 12:03 AM PST.}

[arghmatey]

Progress: PR is submitted and waiting on reviews!
Blockers: N/A
Availability: Sunday AM
ETA: N/A
Pictures: See PR

[ExperimentsInHonesty]

@arghmatey what is the url for the design system?

[arghmatey]

@ExperimentsInHonesty https://www.hackforla.org/design-system

[ExperimentsInHonesty]

We are marking this issue closed

The current layout of the design system pages does not conform to the design system.

• Finalize design system pages - this will need to be a new issue (which has as its dependency, the design system team making new mockups for development).