WIP - Reaction Style Guide

[rymorgan]

Need a style guide for reaction to clarify design guidelines and document components.

[rymorgan]

Suggested structure for the style guide. We may need to move or rename a few of these to line up with the components in the codebase.

Guidelines

• Design Principles

Style

• Typography
• Icons
• Color
• Motion
• Illustration

Get Started/Customization

• Layout Guide
• Homepage
• PDP
• Catalog
• Cart
• Checkout
• Footer

Components

• Forms

• • Buttons
• • Icon Buttons
• • Selects
• • Dropdowns
• • Inputs
• • Radio Buttons
• • Checkmarks
• • Toggle
• • Calendar Picker

• Lists

• • Sidebar Lists
• • Big Left Area Lists
• • Bulk Action and Selection

• Feedback/Alerts

• • Inline alerts
• • Badges (status alerts)
• • Publish Status
• • Toast Alerts
• • Tool Tips
• • Progress Bars/Spinners
• • Hints/Tips

• Popovers

• • Screen Popover

• • Inline Popover

  • Cards

• • Basic
• • Card w/ Switch

• Navigation

• • Shop Navigation
• • Tabs
• • Search
• • Filters

• • Pagination

  • Sidebar

• • Sidebar

• • con Sidebar

  • Tags

• • Search
• • Product Tags
• • Tag Editing Form
• • Image Uploader
• • Sidebar
• • Product
• • Bulk
• • Image Editor

• • Image Library and Manger

  • Structure

• • Layout*
• • Grid
• • Containers
• • Translations

[rymorgan]

Here's a mockup for page structure and navigation structure.

[brent-hoover]

@machikoyasuda @rymorgan Do we want to keep this stuff here or move it over to the Reaction Component Library repo now?

[rymorgan]

@zenweasel @machikoyasuda -- y'all's call. I didn't know about that repo. I lean in favor of consolidation but I defer to whatever you think.

[machikoyasuda]

I vote we move it to the component library.

[machikoyasuda]

Closing this b/c we have a new component library repo