From 510dbdccb78bf9e1fca82fd69bdfb2235d1faf5d Mon Sep 17 00:00:00 2001
From: Jeff Reiner <theundeadghost@gmail.com>
Date: Thu, 7 Feb 2019 17:54:00 +0100
Subject: [PATCH 1/3] :heavy_plus_sign: adding prettier and format npm command

---
 package-lock.json | 41 +++++++++++------------------------------
 package.json      |  3 ++-
 2 files changed, 13 insertions(+), 31 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9fd93e2..11b5ecf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6888,8 +6888,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6910,14 +6909,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -6932,20 +6929,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -7062,8 +7056,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -7075,7 +7068,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -7090,7 +7082,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -7098,14 +7089,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -7124,7 +7113,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -7205,8 +7193,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -7218,7 +7205,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -7304,8 +7290,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -7341,7 +7326,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -7361,7 +7345,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -7405,14 +7388,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
diff --git a/package.json b/package.json
index 41bfb34..cdb7108 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "build-storybook": "build-storybook",
     "publish": "lerna publish --skip-git --skip-npm",
     "precommit": "npm test",
-    "postinstall": "npm run bootstrap"
+    "postinstall": "npm run bootstrap",
+    "format": "prettier --write \"./**/*.js\""
   },
   "devDependencies": {
     "@babel/cli": "^7.2.3",

From 7e313230bb6f0c84b61ff521c99826f504634ea8 Mon Sep 17 00:00:00 2001
From: Jeff Reiner <theundeadghost@gmail.com>
Date: Thu, 7 Feb 2019 17:54:31 +0100
Subject: [PATCH 2/3] :art: running prettier

---
 .storybook/addons.js                     |   6 +-
 .storybook/config.js                     |  40 +-
 .storybook/webpack.config.js             |  60 +--
 packages/modal/__tests__/modal.test.js   |   6 +-
 packages/modal/src/Modal.js              |  59 ++-
 packages/modal/src/index.stories.js      | 101 ++---
 packages/theme/__tests__/theme.test.js   |   6 +-
 packages/theme/src/AxisTheme.js          |  25 +-
 packages/theme/src/grommet.stories.js    | 473 +++++++++++------------
 packages/theme/src/index.js              |   4 +-
 packages/theme/src/superset.stories.js   |  32 +-
 packages/theme/src/theme.js              | 369 +++++++++---------
 packages/theme/src/typography.stories.js | 183 +++++----
 13 files changed, 682 insertions(+), 682 deletions(-)

diff --git a/.storybook/addons.js b/.storybook/addons.js
index 4b70c11..c56e8a3 100644
--- a/.storybook/addons.js
+++ b/.storybook/addons.js
@@ -1,3 +1,3 @@
-import '@storybook/addon-options/register';
-import '@storybook/addon-storysource/register';
-import '@storybook/addon-viewport/register';
+import "@storybook/addon-options/register";
+import "@storybook/addon-storysource/register";
+import "@storybook/addon-viewport/register";
diff --git a/.storybook/config.js b/.storybook/config.js
index c2e7f50..51674a1 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,31 +1,33 @@
-import React from 'react'
-import {addDecorator, configure} from '@storybook/react'
-import {withOptions} from '@storybook/addon-options';
-import {configureViewport, INITIAL_VIEWPORTS,withViewport} from '@storybook/addon-viewport';
+import React from "react";
+import { addDecorator, configure } from "@storybook/react";
+import { withOptions } from "@storybook/addon-options";
+import {
+  configureViewport,
+  INITIAL_VIEWPORTS,
+  withViewport
+} from "@storybook/addon-viewport";
 
-const req = require.context('../packages', true, /.stories.js$/);
+const req = require.context("../packages", true, /.stories.js$/);
 
 function loadStories() {
-    console.log('Load Stories', req.keys())
-    req.keys().forEach(filename => req(filename));
+  console.log("Load Stories", req.keys());
+  req.keys().forEach(filename => req(filename));
 }
 
 configureViewport({
-    ...INITIAL_VIEWPORTS
-})
-
+  ...INITIAL_VIEWPORTS
+});
 
 addDecorator(
-    withOptions({
-        name: 'Centrifuge Axis',
-        url: 'https://axis.centrifuge.io',
-        sortStoriesByKind: true,
-        hierarchySeparator: /\//,
-        hierarchyRootSeparator: /\|/
-    })
+  withOptions({
+    name: "Centrifuge Axis",
+    url: "https://axis.centrifuge.io",
+    sortStoriesByKind: true,
+    hierarchySeparator: /\//,
+    hierarchyRootSeparator: /\|/
+  })
 );
 
-
-addDecorator(withViewport())
+addDecorator(withViewport());
 
 configure(loadStories, module);
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index a6a8d90..5abd53a 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -1,39 +1,39 @@
 module.exports = (baseConfig, env, config) => {
-    // Find Babel Loader
-    const babelRules = config.module.rules.filter(rule => {
-        let isBabelLoader = false;
+  // Find Babel Loader
+  const babelRules = config.module.rules.filter(rule => {
+    let isBabelLoader = false;
 
-        if (rule.loader && rule.loader.includes('babel-loader')) {
-            isBabelLoader = true;
-        }
+    if (rule.loader && rule.loader.includes("babel-loader")) {
+      isBabelLoader = true;
+    }
 
-        if (rule.use) {
-            rule.use.forEach(use => {
-                if (typeof use === 'string' && use.includes('babel-loader')) {
-                    isBabelLoader = true;
-                } else if (
-                    typeof use === 'object' &&
-                    use.loader &&
-                    use.loader.includes('babel-loader')
-                ) {
-                    isBabelLoader = true;
-                }
-            });
+    if (rule.use) {
+      rule.use.forEach(use => {
+        if (typeof use === "string" && use.includes("babel-loader")) {
+          isBabelLoader = true;
+        } else if (
+          typeof use === "object" &&
+          use.loader &&
+          use.loader.includes("babel-loader")
+        ) {
+          isBabelLoader = true;
         }
+      });
+    }
 
-        return isBabelLoader;
-    });
+    return isBabelLoader;
+  });
 
-    babelRules.forEach(rule => {
-        rule.include = /../;
-        rule.exclude = /node_modules/;
-    });
+  babelRules.forEach(rule => {
+    rule.include = /../;
+    rule.exclude = /node_modules/;
+  });
 
-    config.module.rules.push({
-        test: /\.stories\.js?$/,
-        loaders: [require.resolve('@storybook/addon-storysource/loader')],
-        enforce: 'pre',
-    });
+  config.module.rules.push({
+    test: /\.stories\.js?$/,
+    loaders: [require.resolve("@storybook/addon-storysource/loader")],
+    enforce: "pre"
+  });
 
-    return config;
+  return config;
 };
diff --git a/packages/modal/__tests__/modal.test.js b/packages/modal/__tests__/modal.test.js
index 2ea088d..84b8197 100644
--- a/packages/modal/__tests__/modal.test.js
+++ b/packages/modal/__tests__/modal.test.js
@@ -1,5 +1,5 @@
-import modal from '../src/modal';
+import modal from "../src/modal";
 
-describe('modal', () => {
-    it('needs tests');
+describe("modal", () => {
+  it("needs tests");
 });
diff --git a/packages/modal/src/Modal.js b/packages/modal/src/Modal.js
index fb22469..c170a8c 100644
--- a/packages/modal/src/Modal.js
+++ b/packages/modal/src/Modal.js
@@ -1,34 +1,31 @@
-import React from 'react';
-import {Box, Button, Heading, Layer} from "grommet";
-import {Close} from "styled-icons/material";
+import React from "react";
+import { Box, Button, Heading, Layer } from "grommet";
+import { Close } from "styled-icons/material";
 
-export const Modal = (props) => {
+export const Modal = props => {
+  return (
+    <Layer
+      position="center"
+      modal
+      onClickOutside={props.onClose}
+      onEsc={props.onClose}
+    >
+      <Box fill="vertical" width={props.size} pad="medium">
+        <Box
+          flex={false}
+          direction="row"
+          justify={props.title ? "between" : "end"}
+        >
+          {props.title && (
+            <Heading level={2} margin="none">
+              {props.title}
+            </Heading>
+          )}
+          {props.onClose && <Button icon={<Close />} onClick={props.onClose} />}
+        </Box>
 
-  return <Layer
-    position="center"
-    modal
-    onClickOutside={props.onClose}
-    onEsc={props.onClose}
-  >
-    <Box fill="vertical"
-         width={props.size}
-         pad="medium">
-      <Box flex={false} direction="row" justify={props.title ? 'between' : 'end'}>
-        {
-          props.title && <Heading level={2} margin="none">
-            {props.title}
-          </Heading>
-        }
-        {
-          props.onClose && <Button icon={<Close/>} onClick={props.onClose}/>
-        }
+        {props.children}
       </Box>
-
-      {props.children}
-    </Box>
-
-  </Layer>
-
-}
-
-
+    </Layer>
+  );
+};
diff --git a/packages/modal/src/index.stories.js b/packages/modal/src/index.stories.js
index 0475be5..ec03a32 100644
--- a/packages/modal/src/index.stories.js
+++ b/packages/modal/src/index.stories.js
@@ -1,47 +1,54 @@
-import React, {Component} from 'react';
-
-import {storiesOf} from '@storybook/react';
-import {Modal} from "./Modal";
-import {AxisTheme} from "@centrifuge/axis-theme";
-import {Box, Button, Paragraph} from "grommet";
-
-
-storiesOf('Axis components | Modal', module)
-    .add('Centered modal', () => {
-
-        class ModalContainer extends Component {
-            state = {opened: false};
-
-            render() {
-                return <AxisTheme>
-                    <Box fill align="center" justify="center">
-                        <Button primary label={"Open Modal"} onClick={() => {
-                            this.setState({opened: true})
-                        }}/>
-                        {
-                            this.state.opened && <Modal i width={'medium'} title={"My First Modal Title"} onClose={() => {
-                                this.setState({opened: false})
-                            }}>
-                                <Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pellentesque,
-                                    arcu vitae maximus pharetra, diam nulla porttitor orci, gravida aliquam neque nulla
-                                    et quam. Integer aliquam finibus purus vel vestibulum. Interdum et malesuada fames
-                                    ac ante ipsum primis in faucibus. Aliquam commodo, sapien ac sodales cursus, metus
-                                    tortor mollis mi, nec posuere elit tortor sed urna. Praesent id urna eget massa
-                                    auctor ornare et sed turpis. Ut sagittis ligula enim, vitae blandit libero tincidunt
-                                    ac. Aenean erat nisl, porttitor at dolor id, laoreet iaculis dolor. Cras tristique
-                                    convallis lectus ac posuere. Mauris eget diam eu velit tristique
-                                    blandit.</Paragraph>
-                            </Modal>
-                        }
-                    </Box>
-                </AxisTheme>
-            }
-        }
-
-        return <ModalContainer/>
-    })
-
-
-
-
-
+import React, { Component } from "react";
+
+import { storiesOf } from "@storybook/react";
+import { Modal } from "./Modal";
+import { AxisTheme } from "@centrifuge/axis-theme";
+import { Box, Button, Paragraph } from "grommet";
+
+storiesOf("Axis components | Modal", module).add("Centered modal", () => {
+  class ModalContainer extends Component {
+    state = { opened: false };
+
+    render() {
+      return (
+        <AxisTheme>
+          <Box fill align="center" justify="center">
+            <Button
+              primary
+              label={"Open Modal"}
+              onClick={() => {
+                this.setState({ opened: true });
+              }}
+            />
+            {this.state.opened && (
+              <Modal
+                i
+                width={"medium"}
+                title={"My First Modal Title"}
+                onClose={() => {
+                  this.setState({ opened: false });
+                }}
+              >
+                <Paragraph>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+                  pellentesque, arcu vitae maximus pharetra, diam nulla
+                  porttitor orci, gravida aliquam neque nulla et quam. Integer
+                  aliquam finibus purus vel vestibulum. Interdum et malesuada
+                  fames ac ante ipsum primis in faucibus. Aliquam commodo,
+                  sapien ac sodales cursus, metus tortor mollis mi, nec posuere
+                  elit tortor sed urna. Praesent id urna eget massa auctor
+                  ornare et sed turpis. Ut sagittis ligula enim, vitae blandit
+                  libero tincidunt ac. Aenean erat nisl, porttitor at dolor id,
+                  laoreet iaculis dolor. Cras tristique convallis lectus ac
+                  posuere. Mauris eget diam eu velit tristique blandit.
+                </Paragraph>
+              </Modal>
+            )}
+          </Box>
+        </AxisTheme>
+      );
+    }
+  }
+
+  return <ModalContainer />;
+});
diff --git a/packages/theme/__tests__/theme.test.js b/packages/theme/__tests__/theme.test.js
index e154484..d68c647 100644
--- a/packages/theme/__tests__/theme.test.js
+++ b/packages/theme/__tests__/theme.test.js
@@ -1,5 +1,5 @@
-import theme from '../src/theme';
+import theme from "../src/theme";
 
-describe('theme', () => {
-    it('needs tests');
+describe("theme", () => {
+  it("needs tests");
 });
diff --git a/packages/theme/src/AxisTheme.js b/packages/theme/src/AxisTheme.js
index ca9c18d..f250272 100644
--- a/packages/theme/src/AxisTheme.js
+++ b/packages/theme/src/AxisTheme.js
@@ -1,8 +1,8 @@
 // Global Styles
-import React from 'react';
-import {createGlobalStyle, ThemeProvider} from "styled-components/macro";
-import {Grommet, ThemeContext} from "grommet";
-import {axisTheme} from "./theme";
+import React from "react";
+import { createGlobalStyle, ThemeProvider } from "styled-components/macro";
+import { Grommet, ThemeContext } from "grommet";
+import { axisTheme } from "./theme";
 
 const GlobalsStyles = createGlobalStyle`
   * {
@@ -12,7 +12,7 @@ const GlobalsStyles = createGlobalStyle`
     }
      
     &::-webkit-scrollbar-thumb {
-      background: ${axisTheme.global.colors['light-6']};
+      background: ${axisTheme.global.colors["light-6"]};
       border-radius: 20px;
     }
     
@@ -26,7 +26,7 @@ const GlobalsStyles = createGlobalStyle`
    body,html {
     margin:0;
     height:100%;
-    color: ${axisTheme.global.colors['light-1']};
+    color: ${axisTheme.global.colors["light-1"]};
     
   }
   a {
@@ -41,19 +41,16 @@ const GlobalsStyles = createGlobalStyle`
   }
 `;
 
-
-export const AxisTheme = (props) => {
+export const AxisTheme = props => {
   return (
     <Grommet full={true} theme={props.theme || axisTheme}>
-      <GlobalsStyles/>
+      <GlobalsStyles />
       <ThemeContext.Consumer>
         {theme => {
           // Make theme available for all styled components
-          return <ThemeProvider theme={theme}>
-            {props.children}
-          </ThemeProvider>
+          return <ThemeProvider theme={theme}>{props.children}</ThemeProvider>;
         }}
       </ThemeContext.Consumer>
     </Grommet>
-  )
-}
+  );
+};
diff --git a/packages/theme/src/grommet.stories.js b/packages/theme/src/grommet.stories.js
index 903ffee..6302562 100644
--- a/packages/theme/src/grommet.stories.js
+++ b/packages/theme/src/grommet.stories.js
@@ -1,250 +1,239 @@
-import React, {Component} from 'react';
-import {storiesOf} from '@storybook/react';
-import {AxisTheme} from "./AxisTheme";
+import React, { Component } from "react";
+import { storiesOf } from "@storybook/react";
+import { AxisTheme } from "./AxisTheme";
 
 import {
-    Accordion,
-    AccordionPanel,
-    Anchor,
-    Box,
-    Button,
-    Calendar,
-    Chart,
-    CheckBox,
-    Clock,
-    DataTable,
-    FormField,
-    Grid,
-    Heading,
-    Menu,
-    Meter,
-    Paragraph,
-    RadioButton,
-    RangeInput,
-    RangeSelector,
-    Select,
-    Stack,
-    Tab,
-    Tabs,
-    Text,
-    TextArea,
-    TextInput,
-    Video
+  Accordion,
+  AccordionPanel,
+  Anchor,
+  Box,
+  Button,
+  Calendar,
+  Chart,
+  CheckBox,
+  Clock,
+  DataTable,
+  FormField,
+  Grid,
+  Heading,
+  Menu,
+  Meter,
+  Paragraph,
+  RadioButton,
+  RangeInput,
+  RangeSelector,
+  Select,
+  Stack,
+  Tab,
+  Tabs,
+  Text,
+  TextArea,
+  TextInput,
+  Video
 } from "grommet";
 
-
 class Components extends Component {
-    state = {
-        baseSize: 24,
-        checkBox: true,
-        radioButton: true,
-        rangeSelector: [1, 2],
-        themeName: "grommet"
-    };
-
-    render() {
-        const {
-            baseSize,
-            checkBox,
-            radioButton,
-            rangeSelector,
-            tabIndex,
-            themeName
-        } = this.state;
-
-        const content = [
-            <Box key="type" align="start">
-                <Heading margin={{top: "none"}}>Heading</Heading>
-                <Paragraph>Paragraph</Paragraph>
-                <Text>Text</Text>
-                <Anchor href="">Anchor</Anchor>
-                <Menu
-                    label="Menu"
-                    items={[{
-                        label: "One", onClick: () => {
-                        }
-                    }, {label: "Two"}]}
-                />
-                <Button label="Button" onClick={() => {
-                }}/>
-            </Box>,
-            <Box key="input" gap="small">
-                <Select
-                    placeholder="Select"
-                    options={["One", "Two"]}
-                    onChange={() => {
-                    }}
-                />
-                <CheckBox
-                    name="check"
-                    checked={checkBox}
-                    label="CheckBox"
-                    onChange={event => this.setState({checkBox: event.target.checked})}
-                />
-                <CheckBox
-                    name="toggle"
-                    toggle
-                    checked={checkBox}
-                    label="CheckBox toggle"
-                    onChange={event => this.setState({checkBox: event.target.checked})}
-                />
-                <RadioButton
-                    name="radio"
-                    checked={radioButton}
-                    label="RadioButton"
-                    onChange={event =>
-                        this.setState({radioButton: event.target.checked})
-                    }
-                />
-                <TextInput placeholder="TextInput"/>
-                <TextArea placeholder="TextArea"/>
-                <RangeInput value={24} onChange={() => {
-                }}/>
-                <Stack>
-                    <Box direction="row" justify="between">
-                        {[0, 1, 2, 3].map(value => (
-                            <Box key={value} pad="small">
-                                <Text style={{fontFamily: "monospace"}}>{value}</Text>
-                            </Box>
-                        ))}
-                    </Box>
-                    <RangeSelector
-                        direction="horizontal"
-                        invert={false}
-                        min={0}
-                        max={3}
-                        size="full"
-                        round="small"
-                        values={rangeSelector}
-                        onChange={values => this.setState({rangeSelector: values})}
-                    />
-                </Stack>
-                <FormField label="FormField">
-                    <TextInput placeholder="TextInput"/>
-                </FormField>
-            </Box>,
-            <Box key="time" gap="medium">
-                <Calendar size="small"/>
-                <Clock type="digital"/>
-                <Clock/>
-            </Box>,
-            <Box key="measure" gap="medium">
-                <Chart
-                    type="bar"
-                    round
-                    size="small"
-                    values={[
-                        {value: [10, 20]},
-                        {value: [20, 30]},
-                        {value: [30, 15]}
-                    ]}
-                />
-                <Meter
-                    type="bar"
-                    round
-                    size="small"
-                    background="light-3"
-                    values={[{value: 30}]}
-                />
-            </Box>,
-
-            <Box key="dataTable" alignSelf="start">
-                <DataTable
-                    columns={[
-                        {property: "name", header: "Name"},
-                        {property: "color", header: "Color"}
-                    ]}
-                    data={[
-                        {name: "Alan", color: "blue"},
-                        {name: "Chris", color: "purple"},
-                        {name: "Eric", color: "orange"}
-                    ]}
-                    sortable
-                />
-            </Box>,
-            <Box key="accordion">
-                <Accordion>
-                    <AccordionPanel label="Accordion Panel 1">
-                        <Box pad="small">
-                            <Text>Accordion panel 1 content</Text>
-                        </Box>
-                    </AccordionPanel>
-                    <AccordionPanel label="Accordion Panel 2">
-                        <Box pad="small">
-                            <Text>Accordion panel 2 content</Text>
-                        </Box>
-                    </AccordionPanel>
-                </Accordion>
-            </Box>,
-            <Box key="tabs">
-                <Tabs
-                    activeIndex={tabIndex}
-                    onActive={index => this.setState({tabIndex: index})}
-                >
-                    <Tab title="Tab 1">
-                        <Box pad="small">
-                            <Text>Tab 1 content</Text>
-                        </Box>
-                    </Tab>
-                    <Tab title="Tab 2">
-                        <Box pad="small">
-                            <Text>Tab 2 content</Text>
-                        </Box>
-                    </Tab>
-                </Tabs>
-            </Box>,
-            <Box key="video" alignSelf="start">
-                <Video>
-                    <source
-                        src="http://techslides.com/demos/sample-videos/small.webm"
-                        type="video/webm"
-                    />
-                    <source
-                        src="http://techslides.com/demos/sample-videos/small.ogv"
-                        type="video/ogg"
-                    />
-                    <source
-                        src="http://techslides.com/demos/sample-videos/small.mp4"
-                        type="video/mp4"
-                    />
-                    <source
-                        src="http://techslides.com/demos/sample-videos/small.3gp"
-                        type="video/3gp"
-                    />
-                </Video>
+  state = {
+    baseSize: 24,
+    checkBox: true,
+    radioButton: true,
+    rangeSelector: [1, 2],
+    themeName: "grommet"
+  };
+
+  render() {
+    const {
+      baseSize,
+      checkBox,
+      radioButton,
+      rangeSelector,
+      tabIndex,
+      themeName
+    } = this.state;
+
+    const content = [
+      <Box key="type" align="start">
+        <Heading margin={{ top: "none" }}>Heading</Heading>
+        <Paragraph>Paragraph</Paragraph>
+        <Text>Text</Text>
+        <Anchor href="">Anchor</Anchor>
+        <Menu
+          label="Menu"
+          items={[
+            {
+              label: "One",
+              onClick: () => {}
+            },
+            { label: "Two" }
+          ]}
+        />
+        <Button label="Button" onClick={() => {}} />
+      </Box>,
+      <Box key="input" gap="small">
+        <Select
+          placeholder="Select"
+          options={["One", "Two"]}
+          onChange={() => {}}
+        />
+        <CheckBox
+          name="check"
+          checked={checkBox}
+          label="CheckBox"
+          onChange={event => this.setState({ checkBox: event.target.checked })}
+        />
+        <CheckBox
+          name="toggle"
+          toggle
+          checked={checkBox}
+          label="CheckBox toggle"
+          onChange={event => this.setState({ checkBox: event.target.checked })}
+        />
+        <RadioButton
+          name="radio"
+          checked={radioButton}
+          label="RadioButton"
+          onChange={event =>
+            this.setState({ radioButton: event.target.checked })
+          }
+        />
+        <TextInput placeholder="TextInput" />
+        <TextArea placeholder="TextArea" />
+        <RangeInput value={24} onChange={() => {}} />
+        <Stack>
+          <Box direction="row" justify="between">
+            {[0, 1, 2, 3].map(value => (
+              <Box key={value} pad="small">
+                <Text style={{ fontFamily: "monospace" }}>{value}</Text>
+              </Box>
+            ))}
+          </Box>
+          <RangeSelector
+            direction="horizontal"
+            invert={false}
+            min={0}
+            max={3}
+            size="full"
+            round="small"
+            values={rangeSelector}
+            onChange={values => this.setState({ rangeSelector: values })}
+          />
+        </Stack>
+        <FormField label="FormField">
+          <TextInput placeholder="TextInput" />
+        </FormField>
+      </Box>,
+      <Box key="time" gap="medium">
+        <Calendar size="small" />
+        <Clock type="digital" />
+        <Clock />
+      </Box>,
+      <Box key="measure" gap="medium">
+        <Chart
+          type="bar"
+          round
+          size="small"
+          values={[
+            { value: [10, 20] },
+            { value: [20, 30] },
+            { value: [30, 15] }
+          ]}
+        />
+        <Meter
+          type="bar"
+          round
+          size="small"
+          background="light-3"
+          values={[{ value: 30 }]}
+        />
+      </Box>,
+
+      <Box key="dataTable" alignSelf="start">
+        <DataTable
+          columns={[
+            { property: "name", header: "Name" },
+            { property: "color", header: "Color" }
+          ]}
+          data={[
+            { name: "Alan", color: "blue" },
+            { name: "Chris", color: "purple" },
+            { name: "Eric", color: "orange" }
+          ]}
+          sortable
+        />
+      </Box>,
+      <Box key="accordion">
+        <Accordion>
+          <AccordionPanel label="Accordion Panel 1">
+            <Box pad="small">
+              <Text>Accordion panel 1 content</Text>
             </Box>
-        ];
-
-        return (
-            <React.Fragment>
-
-                <AxisTheme>
-                    <Box
-                        pad="medium"
-                        overflow="auto"
-                    >
-                        {Grid.available ? (
-                            <Grid columns="small" gap="medium">
-                                {content}
-                            </Grid>
-                        ) : (
-                            <Box direction="row" wrap align="start" gap="large">
-                                {content}
-                            </Box>
-                        )}
-                    </Box>
-                </AxisTheme>
-            </React.Fragment>
-        );
-    }
+          </AccordionPanel>
+          <AccordionPanel label="Accordion Panel 2">
+            <Box pad="small">
+              <Text>Accordion panel 2 content</Text>
+            </Box>
+          </AccordionPanel>
+        </Accordion>
+      </Box>,
+      <Box key="tabs">
+        <Tabs
+          activeIndex={tabIndex}
+          onActive={index => this.setState({ tabIndex: index })}
+        >
+          <Tab title="Tab 1">
+            <Box pad="small">
+              <Text>Tab 1 content</Text>
+            </Box>
+          </Tab>
+          <Tab title="Tab 2">
+            <Box pad="small">
+              <Text>Tab 2 content</Text>
+            </Box>
+          </Tab>
+        </Tabs>
+      </Box>,
+      <Box key="video" alignSelf="start">
+        <Video>
+          <source
+            src="http://techslides.com/demos/sample-videos/small.webm"
+            type="video/webm"
+          />
+          <source
+            src="http://techslides.com/demos/sample-videos/small.ogv"
+            type="video/ogg"
+          />
+          <source
+            src="http://techslides.com/demos/sample-videos/small.mp4"
+            type="video/mp4"
+          />
+          <source
+            src="http://techslides.com/demos/sample-videos/small.3gp"
+            type="video/3gp"
+          />
+        </Video>
+      </Box>
+    ];
+
+    return (
+      <React.Fragment>
+        <AxisTheme>
+          <Box pad="medium" overflow="auto">
+            {Grid.available ? (
+              <Grid columns="small" gap="medium">
+                {content}
+              </Grid>
+            ) : (
+              <Box direction="row" wrap align="start" gap="large">
+                {content}
+              </Box>
+            )}
+          </Box>
+        </AxisTheme>
+      </React.Fragment>
+    );
+  }
 }
 
-
-storiesOf('Axis Theme | Grommet Components', module)
-    .add('Dark mode', () => <Components/>)
-
-
-
-
-
-
+storiesOf("Axis Theme | Grommet Components", module).add("Dark mode", () => (
+  <Components />
+));
diff --git a/packages/theme/src/index.js b/packages/theme/src/index.js
index ac9ea8f..465e25b 100644
--- a/packages/theme/src/index.js
+++ b/packages/theme/src/index.js
@@ -1,2 +1,2 @@
-export {axisTheme} from "./theme";
-export {AxisTheme} from "./AxisTheme";
+export { axisTheme } from "./theme";
+export { AxisTheme } from "./AxisTheme";
diff --git a/packages/theme/src/superset.stories.js b/packages/theme/src/superset.stories.js
index eb06d18..69af9a1 100644
--- a/packages/theme/src/superset.stories.js
+++ b/packages/theme/src/superset.stories.js
@@ -1,17 +1,15 @@
-import React from 'react';
-import {storiesOf} from '@storybook/react';
-import {AxisTheme} from "./AxisTheme";
-import {Button} from "grommet";
-
-
-storiesOf('Axis Theme | Grommet Superset / Button', module)
-    .add('Secondary', () => {
-        return <AxisTheme>
-            <Button secondary label="Secondary Button"/>
-        </AxisTheme>
-    })
-
-
-
-
-
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { AxisTheme } from "./AxisTheme";
+import { Button } from "grommet";
+
+storiesOf("Axis Theme | Grommet Superset / Button", module).add(
+  "Secondary",
+  () => {
+    return (
+      <AxisTheme>
+        <Button secondary label="Secondary Button" />
+      </AxisTheme>
+    );
+  }
+);
diff --git a/packages/theme/src/theme.js b/packages/theme/src/theme.js
index 29c9106..026500d 100644
--- a/packages/theme/src/theme.js
+++ b/packages/theme/src/theme.js
@@ -1,201 +1,197 @@
-import {generate} from "grommet";
-import {deepMerge} from "grommet/utils/object";
-import {createGlobalStyle, ThemeProvider} from "styled-components/macro";
+import { generate } from "grommet";
+import { deepMerge } from "grommet/utils/object";
+import { createGlobalStyle, ThemeProvider } from "styled-components/macro";
 
-const brandColor = '#FF9F00';
-const accentColors = ['#43C17B', '#46C2B9', '#D3DB5E', '#CC48CE'];
+const brandColor = "#FF9F00";
+const accentColors = ["#43C17B", "#46C2B9", "#D3DB5E", "#CC48CE"];
 
 const statusColors = {
-    critical: '#D82242',
-    error: '#D82242',
-    warning: '#B8B043',
-    ok: '#0E8800',
-    unknown: '#0E8800',
-    disabled: '#0E8800',
+  critical: "#D82242",
+  error: "#D82242",
+  warning: "#B8B043",
+  ok: "#0E8800",
+  unknown: "#0E8800",
+  disabled: "#0E8800"
 };
 
 const darkColors = [
-    '#212121',
-    '#303030',
-    '#3C3C3C',
-    '#454545',
-    '#666666',
-    '#777777',
+  "#212121",
+  "#303030",
+  "#3C3C3C",
+  "#454545",
+  "#666666",
+  "#777777"
 ];
 
 const lightColors = [
-    '#F1F3F4',
-    '#DDDDDD',
-    '#C8C8C8',
-    '#B8B8B8',
-    '#A8A8A8',
-    '#979797',
+  "#F1F3F4",
+  "#DDDDDD",
+  "#C8C8C8",
+  "#B8B8B8",
+  "#A8A8A8",
+  "#979797"
 ];
 
 const baseTheme = generate();
 
 const colorArray = (array, prefix) => {
-    let colors = {};
-    array.forEach((color, index) => {
-        colors[`${prefix}-${index + 1}`] = color;
-    });
-    return colors;
+  let colors = {};
+  array.forEach((color, index) => {
+    colors[`${prefix}-${index + 1}`] = color;
+  });
+  return colors;
 };
 
 const colorMap = (map, prefix) => {
-    let colors = {};
-    Object.keys(map).forEach((key) => {
-        colors[`${prefix}-${key}`] = map[key];
-    });
-    return colors;
+  let colors = {};
+  Object.keys(map).forEach(key => {
+    colors[`${prefix}-${key}`] = map[key];
+  });
+  return colors;
 };
 
 export const axisTheme = deepMerge(baseTheme, {
-    global: {
-        colors: {
-            background: darkColors[0],
-            active: brandColor,
-            black: '#000000',
-            border: darkColors[2],
-            control: brandColor,
-            focus: darkColors[2],
-            placeholder: lightColors[2],
-            text: lightColors[0],
-            secondaryText: lightColors[3],
-            white: '#FFFFFF',
-            brand: brandColor,
-            ...colorArray(darkColors, 'dark'),
-            ...colorArray(lightColors, 'light'),
-            ...colorArray(accentColors, 'accent'),
-            ...colorMap(statusColors, 'status'),
-        },
-        elevation: {
-            light: {
-                xsmall: '0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)',
-                small: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
-                medium: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)',
-                large: '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
-                xlarge: '0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)',
-            },
-        },
-        font: {
-            family: "'Roboto', Arial, sans-serif",
-            size: '14px',
-        },
-        focus: {},
-        input: {
-            weight: 500,
-
-        },
-
-        scrollWidth: "8px",
+  global: {
+    colors: {
+      background: darkColors[0],
+      active: brandColor,
+      black: "#000000",
+      border: darkColors[2],
+      control: brandColor,
+      focus: darkColors[2],
+      placeholder: lightColors[2],
+      text: lightColors[0],
+      secondaryText: lightColors[3],
+      white: "#FFFFFF",
+      brand: brandColor,
+      ...colorArray(darkColors, "dark"),
+      ...colorArray(lightColors, "light"),
+      ...colorArray(accentColors, "accent"),
+      ...colorMap(statusColors, "status")
     },
-    anchor: {
-        color: 'brand'
+    elevation: {
+      light: {
+        xsmall: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
+        small: "0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",
+        medium: "0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
+        large: "0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
+        xlarge: "0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)"
+      }
+    },
+    font: {
+      family: "'Roboto', Arial, sans-serif",
+      size: "14px"
+    },
+    focus: {},
+    input: {
+      weight: 500
     },
 
-    heading: {
-        level: {
-            1: {
-
-                large: {size: "50px", height: "56px", maxWidth: "1200px"},
-                medium: {size: "34px", height: "40px", maxWidth: "816px"},
-                small: {size: "26px", height: "32px", maxWidth: "624px"},
-            },
-            2: {
-
-                large: {size: "34px", height: "40px", maxWidth: "816px"},
-                medium: {size: "26px", height: "32px", maxWidth: "624px"},
-                small: {size: "26px", height: "32px", maxWidth: "624px"},
-            },
-            3: {
-                large: {size: "26px", height: "32px", maxWidth: "624px"},
-                medium: {size: "22px", height: "28px", maxWidth: "528px"},
-                small: {size: "22px", height: "28px", maxWidth: "528px"},
-            },
-            4: {
-                large: {size: "18px", height: "24px", maxWidth: "432px"},
-                medium: {size: "18px", height: "24px", maxWidth: "432px"},
-                small: {size: "18px", height: "24px", maxWidth: "432px"},
-            }
-
-        },
-        extend: props => {
-            let dynamicStyles = "";
-            if (props.stretch) {
-                dynamicStyles = `
+    scrollWidth: "8px"
+  },
+  anchor: {
+    color: "brand"
+  },
+
+  heading: {
+    level: {
+      1: {
+        large: { size: "50px", height: "56px", maxWidth: "1200px" },
+        medium: { size: "34px", height: "40px", maxWidth: "816px" },
+        small: { size: "26px", height: "32px", maxWidth: "624px" }
+      },
+      2: {
+        large: { size: "34px", height: "40px", maxWidth: "816px" },
+        medium: { size: "26px", height: "32px", maxWidth: "624px" },
+        small: { size: "26px", height: "32px", maxWidth: "624px" }
+      },
+      3: {
+        large: { size: "26px", height: "32px", maxWidth: "624px" },
+        medium: { size: "22px", height: "28px", maxWidth: "528px" },
+        small: { size: "22px", height: "28px", maxWidth: "528px" }
+      },
+      4: {
+        large: { size: "18px", height: "24px", maxWidth: "432px" },
+        medium: { size: "18px", height: "24px", maxWidth: "432px" },
+        small: { size: "18px", height: "24px", maxWidth: "432px" }
+      }
+    },
+    extend: props => {
+      let dynamicStyles = "";
+      if (props.stretch) {
+        dynamicStyles = `
           max-width: 100%;
         `;
-            }
+      }
 
-            return dynamicStyles
-        }
-    },
-    preloader: {
-        color: lightColors[0],
-        size: {
-            small: "24px",
-            medium: "48px",
-            large: "64px",
-        },
-        thickness: {
-            small: 1,
-            medium: 2,
-            large: 2,
-        }
+      return dynamicStyles;
+    }
+  },
+  preloader: {
+    color: lightColors[0],
+    size: {
+      small: "24px",
+      medium: "48px",
+      large: "64px"
     },
-
-    text: {
-        xlarge: {size: "22px", height: "28px", maxWidth: "528px"},
-        large: {size: "18px", height: "24px", maxWidth: "432px"},
-        medium: {size: "14px", height: "20px", maxWidth: "336px"},
-        xxlarge: {size: "26px", height: "32px", maxWidth: "624px"},
-        small: {size: "14px", height: "20px", maxWidth: "336px"},
-        xsmall: {size: "12px", height: "18px", maxWidth: "288px"},
+    thickness: {
+      small: 1,
+      medium: 2,
+      large: 2
+    }
+  },
+
+  text: {
+    xlarge: { size: "22px", height: "28px", maxWidth: "528px" },
+    large: { size: "18px", height: "24px", maxWidth: "432px" },
+    medium: { size: "14px", height: "20px", maxWidth: "336px" },
+    xxlarge: { size: "26px", height: "32px", maxWidth: "624px" },
+    small: { size: "14px", height: "20px", maxWidth: "336px" },
+    xsmall: { size: "12px", height: "18px", maxWidth: "288px" }
+  },
+  paragraph: {
+    large: { size: "18px", height: "24px", maxWidth: "528px" },
+    medium: { size: "14px", height: "20px", maxWidth: "432px" },
+    small: { size: "12px", height: "18px", maxWidth: "436px" },
+    xlarge: { size: "22px", height: "28px", maxWidth: "624px" }
+  },
+  button: {
+    color: "light-3",
+    border: {
+      radius: "3px"
     },
-    paragraph: {
-        large: {size: "18px", height: "24px", maxWidth: "528px"},
-        medium: {size: "14px", height: "20px", maxWidth: "432px"},
-        small: {size: "12px", height: "18px", maxWidth: "436px"},
-        xlarge: {size: "22px", height: "28px", maxWidth: "624px"},
+    padding: {
+      vertical: "4px",
+      horizontal: "12px"
     },
-    button: {
-        color: "light-3",
-        border: {
-            radius: "3px",
-        },
-        padding: {
-            vertical: "4px",
-            horizontal: "12px"
-        },
-        extend: props => {
-            let dynamicStyles = "";
-            if (props.secondary) {
-                dynamicStyles = ` 
-          color: ${props.theme.global.colors['brand']};
+    extend: props => {
+      let dynamicStyles = "";
+      if (props.secondary) {
+        dynamicStyles = ` 
+          color: ${props.theme.global.colors["brand"]};
           &:hover {
-            background: ${props.theme.global.colors['brand']};
+            background: ${props.theme.global.colors["brand"]};
             color:white;
           }
         `;
-            } else if (props.primary) {
-                dynamicStyles = `
+      } else if (props.primary) {
+        dynamicStyles = `
           color: white;
         `;
-            } else if (props.plain) {
-                dynamicStyles = `
+      } else if (props.plain) {
+        dynamicStyles = `
           padding: 0px;
         `;
-            } else {
-                dynamicStyles = ` 
-          background: ${props.theme.global.colors['dark-4']};
-          border-color: ${props.theme.global.colors['dark-4']};
+      } else {
+        dynamicStyles = ` 
+          background: ${props.theme.global.colors["dark-4"]};
+          border-color: ${props.theme.global.colors["dark-4"]};
           &:hover {
-            border-color: ${props.theme.global.colors['dark-4']};
+            border-color: ${props.theme.global.colors["dark-4"]};
           }
         `;
-            }
-            return `
+      }
+      return `
         font-size: ${props.theme.text.small.size}; 
          svg {
           width:24px;
@@ -208,41 +204,36 @@ export const axisTheme = deepMerge(baseTheme, {
         }  
         ${dynamicStyles}
       `;
-
-        }
-    },
-    textInput: {
-        extend: props => {
-            return `
-      background: ${props.theme.global.colors['dark-4']};
-      `
-        }
-    },
-    textArea: {
-        extend: props => {
-            let dynamicStyles = "";
-            if (props.fullHeight) {
-                dynamicStyles = `
+    }
+  },
+  textInput: {
+    extend: props => {
+      return `
+      background: ${props.theme.global.colors["dark-4"]};
+      `;
+    }
+  },
+  textArea: {
+    extend: props => {
+      let dynamicStyles = "";
+      if (props.fullHeight) {
+        dynamicStyles = `
           height:100%;
           resize: none;
         `;
-            }
+      }
 
-            return `
-        background: ${props.theme.global.colors['dark-4']};
+      return `
+        background: ${props.theme.global.colors["dark-4"]};
         ${dynamicStyles}
-      `
-        }
-    },
-    layer: {
-        background: 'dark-2'
-    },
-    formField: {
-        border: null,
-        help: {color: 'light-4'}
+      `;
     }
-
+  },
+  layer: {
+    background: "dark-2"
+  },
+  formField: {
+    border: null,
+    help: { color: "light-4" }
+  }
 });
-
-
-
diff --git a/packages/theme/src/typography.stories.js b/packages/theme/src/typography.stories.js
index 98fc7bb..f17a806 100644
--- a/packages/theme/src/typography.stories.js
+++ b/packages/theme/src/typography.stories.js
@@ -1,86 +1,105 @@
-import React from 'react';
-import {storiesOf} from '@storybook/react';
-import {AxisTheme} from "./AxisTheme";
-import {Box, Heading, Paragraph} from "grommet";
-
+import React from "react";
+import { storiesOf } from "@storybook/react";
+import { AxisTheme } from "./AxisTheme";
+import { Box, Heading, Paragraph } from "grommet";
 
 const headingSizes = ["xlarge", "large", "medium", "small"];
 const paragraghSizes = ["xxlarge", "xlarge", "large", "medium", "small"];
 
-
-storiesOf('Axis Theme | Typography / Headings', module)
-    .add('Default', () => {
-        return <AxisTheme>
-            <div>
-                <Heading level={1}>Heading 1</Heading>
-                <Heading level={2}>Heading 2</Heading>
-                <Heading level={3}>Heading 3</Heading>
-                <Heading level={4}>Heading 4</Heading>
-                <Heading level={5}>Heading 5</Heading>
-                <Heading level={6}>Heading 6</Heading>
-            </div>
-        </AxisTheme>
-    })
-    .add('Sizes', () => {
-        return <AxisTheme>
-            <Box direction={'columns'} gap={'large'}>
-                {headingSizes.map(item => {
-                    return <div key={item}>
-                        <Heading level={1} size={item}>{item} H1</Heading>
-                        <Heading level={2} size={item}>{item} H2</Heading>
-                        <Heading level={3} size={item}>{item} H3</Heading>
-                        <Heading level={4} size={item}>{item} H4</Heading>
-                        <Heading level={5} size={item}>{item} H5</Heading>
-                        <Heading level={6} size={item}>{item} H6</Heading>
-                    </div>
-                })}
-
-
-            </Box>
-
-        </AxisTheme>
-    })
-
-
-storiesOf('Axis Theme | Typography / Paragraph', module)
-    .add('Default', () => {
-        return <AxisTheme>
-            <div>
-                <Paragraph>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pellentesque, arcu vitae
-                    maximus pharetra, diam nulla porttitor orci, gravida aliquam neque nulla et quam. Integer aliquam
-                    finibus purus vel vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam
-                    commodo, sapien ac sodales cursus, metus tortor mollis mi, nec posuere elit tortor sed urna.
-                    Praesent id urna eget massa auctor ornare et sed turpis. Ut sagittis ligula enim, vitae blandit
-                    libero tincidunt ac. Aenean erat nisl, porttitor at dolor id, laoreet iaculis dolor. Cras tristique
-                    convallis lectus ac posuere. Mauris eget diam eu velit tristique blandit.</Paragraph>
-            </div>
-        </AxisTheme>
-    })
-    .add('Sizes', () => {
-        return <AxisTheme>
-            <Box direction={'columns'} gap={'large'}>
-                {headingSizes.map(item => {
-                    return <div key={item}>
-                        <Paragraph size={item}> <b>{item}:</b> Proin pellentesque, arcu vitae maximus pharetra, diam
-                            nulla porttitor orci, gravida aliquam neque nulla et quam. Integer aliquam finibus purus vel
-                            vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam commodo,
-                            sapien ac sodales cursus, metus tortor mollis mi, nec posuere elit tortor sed urna. Praesent
-                            id urna eget massa auctor ornare et sed turpis. Ut sagittis ligula enim, vitae blandit
-                            libero tincidunt ac. Aenean erat nisl, porttitor at dolor id, laoreet iaculis dolor. Cras
-                            tristique convallis lectus ac posuere. Mauris eget diam eu velit tristique
-                            blandit.</Paragraph>
-
-                    </div>
-                })}
-            </Box>
-
-        </AxisTheme>
-    })
-
-
-
-
-
-
-
-
+storiesOf("Axis Theme | Typography / Headings", module)
+  .add("Default", () => {
+    return (
+      <AxisTheme>
+        <div>
+          <Heading level={1}>Heading 1</Heading>
+          <Heading level={2}>Heading 2</Heading>
+          <Heading level={3}>Heading 3</Heading>
+          <Heading level={4}>Heading 4</Heading>
+          <Heading level={5}>Heading 5</Heading>
+          <Heading level={6}>Heading 6</Heading>
+        </div>
+      </AxisTheme>
+    );
+  })
+  .add("Sizes", () => {
+    return (
+      <AxisTheme>
+        <Box direction={"columns"} gap={"large"}>
+          {headingSizes.map(item => {
+            return (
+              <div key={item}>
+                <Heading level={1} size={item}>
+                  {item} H1
+                </Heading>
+                <Heading level={2} size={item}>
+                  {item} H2
+                </Heading>
+                <Heading level={3} size={item}>
+                  {item} H3
+                </Heading>
+                <Heading level={4} size={item}>
+                  {item} H4
+                </Heading>
+                <Heading level={5} size={item}>
+                  {item} H5
+                </Heading>
+                <Heading level={6} size={item}>
+                  {item} H6
+                </Heading>
+              </div>
+            );
+          })}
+        </Box>
+      </AxisTheme>
+    );
+  });
+
+storiesOf("Axis Theme | Typography / Paragraph", module)
+  .add("Default", () => {
+    return (
+      <AxisTheme>
+        <div>
+          <Paragraph>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
+            pellentesque, arcu vitae maximus pharetra, diam nulla porttitor
+            orci, gravida aliquam neque nulla et quam. Integer aliquam finibus
+            purus vel vestibulum. Interdum et malesuada fames ac ante ipsum
+            primis in faucibus. Aliquam commodo, sapien ac sodales cursus, metus
+            tortor mollis mi, nec posuere elit tortor sed urna. Praesent id urna
+            eget massa auctor ornare et sed turpis. Ut sagittis ligula enim,
+            vitae blandit libero tincidunt ac. Aenean erat nisl, porttitor at
+            dolor id, laoreet iaculis dolor. Cras tristique convallis lectus ac
+            posuere. Mauris eget diam eu velit tristique blandit.
+          </Paragraph>
+        </div>
+      </AxisTheme>
+    );
+  })
+  .add("Sizes", () => {
+    return (
+      <AxisTheme>
+        <Box direction={"columns"} gap={"large"}>
+          {headingSizes.map(item => {
+            return (
+              <div key={item}>
+                <Paragraph size={item}>
+                  {" "}
+                  <b>{item}:</b> Proin pellentesque, arcu vitae maximus
+                  pharetra, diam nulla porttitor orci, gravida aliquam neque
+                  nulla et quam. Integer aliquam finibus purus vel vestibulum.
+                  Interdum et malesuada fames ac ante ipsum primis in faucibus.
+                  Aliquam commodo, sapien ac sodales cursus, metus tortor mollis
+                  mi, nec posuere elit tortor sed urna. Praesent id urna eget
+                  massa auctor ornare et sed turpis. Ut sagittis ligula enim,
+                  vitae blandit libero tincidunt ac. Aenean erat nisl, porttitor
+                  at dolor id, laoreet iaculis dolor. Cras tristique convallis
+                  lectus ac posuere. Mauris eget diam eu velit tristique
+                  blandit.
+                </Paragraph>
+              </div>
+            );
+          })}
+        </Box>
+      </AxisTheme>
+    );
+  });

From d4f1b6613974e80e480394e8b02d1e88fa9c703f Mon Sep 17 00:00:00 2001
From: Jeff Reiner <theundeadghost@gmail.com>
Date: Thu, 7 Feb 2019 17:54:55 +0100
Subject: [PATCH 3/3] :memo: adding Prettier badge

---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index e1ae42a..2e7b0e4 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,5 @@
 # axis
+
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
+
 Single source of truth used to build user interfaces for Centrifuge