okp4/ui

import { Meta } from '@storybook/addon-docs'
import atomicDesignImage from 'assets/images/atomic-design.png'

<Meta title="Philosophy" />

# Design system philosophy

## Atom Design methodology

### Principles

The OKP4 Design System follows the [Atomic Design methodology](https://atomicdesign.bradfrost.com/).

> Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner.
> — Brad Frost

<img
  src={atomicDesignImage}
  style={{
    display: 'block',
    marginLeft: 'auto',
    marginRight: 'auto',
    width: '75%'
  }}
/>

The name Atomic Design comes from the idea of separating the components in:

- `atoms`,
- `molecules`,
- `organisms`,
- `templates` and
- `pages`.

In this design system, we'll only consider the first three.

#### Atoms

Atoms are the smallest possible components, such as buttons, titles, inputs or color pallets and fonts for instance.
They can be applied on any context, globally or within other components.

From a React point of view, `Atoms` are _Dumb components_, also called _presentational_ components, because their only
responsibility is to present something and they don't have any managed state.

#### Molecules

Molecules are the composition of one or more components of atoms. Molecules can have their own properties and create
functionalities by using atoms.

#### Organisms

Organisms are the (possibly complex) combination of molecules that work together or, if necessary, with atoms, to form more elaborate interfaces. At this level, the components
begin to have a functional utility while guaranteeing to be independent, portable and reusable.

From a React point of view, `Organisms` are _Smart components_, since they manipulate data, interact with the outside and manage a state.

### Why?

The most important reason is to promote communication between different actors: designers, developers and product owners. Moreover, this methodology help us to build
a consistent, solid and reusable design system.