Icon Gallery Styleguide Page

[drolsen]

Description

This is a quick pass at adding a Icon gallery page. Fixes #327

Unlike the Atoms/Icon page; icon gallery page displays all project icons with no style variations from a single spot, and has a searching feature.

Motivation and Context

Some project's Icons are crazy large, so having a single page that can give you a 30k foot view of all project icons with a searching feature can help with this issue.

How Has This Been Tested?

This was a quick implementation, so please feel free to comment on and or dig into and change:

• Styles
• Search JS
• SgIconSwatch markup
• Or anything else you see fit

Run the following and confirm builds work. Confirm page looks as intended while running dev:

• run npm or yarn build
• run npm or yarn production
• run npm or yarn dev
• run npm or yarn watch

Thanks team!

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• My code follows the code style of this project.
• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.

[bstaruk]

This looks great!

As discussed on our (Petra, Devin and myself) call, I've made the following changes:

1. removed the code snippet shown beneath icons to simplify and condense the page

2. added another breakpoint and refactored how many icons are shown per-row at each one... tried showing as many icons per row as possible for each breakpoint.

For testing, I added ~100 icons and it didn't slow things down at all. I ran all the usual commands and everything worked perfectly.

[pgregorova]

Loving it. Even already sneaked it in AP and it works like a charm! Let's get this baby in!!!!