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.