Create Design System page

[arghmatey]

Fixes #1927

What changes did you make and why did you make them ?

• Created front end of design system page. Not all styling is complete. Design system starts on /design-system page, then when a component is chosen design-system layout is loaded. This is similar to guide-pages from /toolkit page, but the visual layout remains the same.
• Created design-system collection to display on front end.

Action Items

• Complete adding component information from Figma to md files - both for buttons and page cards. This is just copy/paste and will not take long.
• Style page to match Figma file. This includes researching and implementing code block coloring, though this could be turned into a separate issue after MVP is complete.

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

August 7, 2021 Progress

[arghmatey]

From your project repository, check out a new branch and test the changes.

git checkout -b arghmatey-design-system-webpage gh-pages
git pull https://github.com/arghmatey/website.git design-system-webpage

---

August 13, 2021 Progress

[Aveline-art]

@arghmatey Just want to note that if the site is still waiting on some components before it can go live, we can always set published to false and that should hide the site for now.

[arghmatey]

@Aveline-art Good idea! I've set published to false.

[arghmatey]

Converted from draft to ready to review. Margins are off. They are still being finalized by design. Reached out and am waiting for update.

Discussed moving on with what we have and creating new smaller issues for things we are waiting for. Will update with new issue numbers as they are created.

[arghmatey]

Updated with new margins, resolved conflicts, and added a rough mobile view.

[Aveline-art]

Just took a look at it all, and this is all very impressive work! Everything is so reusable and so easy to add to!

One thing to note: we have recently decided to name the files in the _includes directory according to the pages they are used in. The example directory should ideally be further nested in a design-system-page directory. After that, I will say this is ready to merge, unless someone else has other thoughts.

You have outdone yourself again @arghmatey ! I feel so honored to review and witness such great work. Thank you!

[arghmatey]

@Aveline-art Thanks for your review and kind words. :) I've pushed a new commit to reflect our new naming convention.

[Aveline-art]

Everything looks good! Feel free to make new issues for follow up tasks, or continue working on the issue.

From what I can see, issues can be made for:

• solving the sticky-nav issue
• adding the typography section

Also, it might be prudent to document the architecture of these pages in a new wiki, as well as steps to adding new pages/components.