import { Meta } from '@storybook/addon-docs';
import Atoms from './assets/atoms.png';
import Molecules from './assets/molecules.png';
import Organisms from './assets/organisms.png';
import Templates from './assets/templates.png';
import Pages from './assets/pages.png';

<Meta title="Introduction" />

<style>{`
  img { float: right; }
  h1, h2, h3, h4 { clear: both; }
`}</style>

# Introduction

## System organization

Our codebases are organized by _domain_, not grouped by other characteristics. For example, we would group all cart-related code together, and all order-related code in a separate directory.

## System definition

Although components are _organized_ by domain, they use principles of [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) to ensure consistency.

### Atoms

<img src={Atoms} alt="Atoms" />

Atoms are standalone elements on a page.

- Buttons
- Text
- Icons
- Images
- Wavy Dividers

### Molecules

<img src={Molecules} alt="Molecules" />

Molecules are groups of atoms.

- Product Cards
- Icon + text group
- Image + text group
- Individual carousel cards
- Customer testimonial containers

### Organisms

<img src={Organisms} alt="Organisms" />

Organisms are groups of molecules.

- Entire carousels _(featured products, medical advisory board members, etc.)_
- Interactive Ingredient Selector

### Templates/modules

<img src={Templates} alt="Templates" />

A template is a self-contained section of a page. Here at Proper, we refer to these as "modules".

- reusable sections with consistent layouts/structure

### Pages

<img src={Pages} alt="Pages" />

A page is the end result, built from a series of modules.