Documentation: UI Patterns Showcase

[ItsJonQ]

The for this UI Patterns showcase is to provide a collection of various UI designs that can be created with G2.

🥅 Goal

The hope for these patterns is to...

• Make it easier to create real-world UIs (e.g custom controls for Gutenberg blocks)
• Educate users on best G2 UI best practices
• Encourage a standard for G2 UI design aesthetics and interactions
• Provide a base to inspire new UI designs

📑 Pages

In the initial sketch (above), I've roughly drawn 2 pages:

1. An "index" page - A gallery of the UI patterns (maybe categorized?)
2. A "single" page - The view page for a particular pattern

👆 Index

There probably won't be too many patterns to start. Overtime, this will grow. We'll need to think of ways to categorized/group these things later on.

Pagination/search features would be nice as well.

✌️ View (Single)

I think the most important thing would be to showcase the UI. Secondly would be the code.

The UI and code should be available as live and editable (code) / interactive (preview) entities.

Below, there could be the name of the pattern (title) and a description.

The code can be copied with a single button click. Perhaps we could add a "Share" button as well.

Lastly, we could have a collection of related, similar, or suggested UI - presented in the same way the index/gallery items are presented.

🗺 Navigation

Missing from the sketches is some sort of navigation. We could have a global nav bar. Perhaps with built in search.