From 157da235b62010f2df7223ec95298361fbe6348f Mon Sep 17 00:00:00 2001
From: Aaron Panchal <aaron.panchal@appfolio.com>
Date: Wed, 7 Dec 2016 08:41:10 -0800
Subject: [PATCH] Update the header in storybook docs

---
 .storybook/config.js | 13 ++++++++-----
 stories/Forms.js     | 15 ++++-----------
 2 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/.storybook/config.js b/.storybook/config.js
index c5af5e573..8096abf16 100644
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -4,11 +4,14 @@ import { Container } from '../src';
 import { configure, setAddon, addDecorator } from '@kadira/storybook';
 
 addDecorator((story, info) => (
-  <Container className="mt-2">
-    <h1>{info.kind}</h1>
-    <h3 className="text-muted">{info.story}</h3>
-    <hr />
-    {story()}
+  <Container fluid className="m-5">
+    <header className="mb-5">
+      <h1 className="display-4 mb-3">{info.kind}</h1>
+      <h2 className="lead">{info.story}</h2>
+    </header>
+    <section style={{ maxWidth: '700px' }}>
+      {story()}
+    </section>
   </Container>
 ));
 
diff --git a/stories/Forms.js b/stories/Forms.js
index 1fabfc017..068d7d82b 100644
--- a/stories/Forms.js
+++ b/stories/Forms.js
@@ -6,24 +6,17 @@ import { FormRow, FormChoice, CurrencyInput } from '../src';
 
 storiesOf('Forms', module)
   .addWithInfo('Inputs', () => (
-    <Container className="mt-3">
-      <h1 className="display-4 mb-3">Inputs</h1>
-      <p className="lead">An <code>Input</code> is the simplest unit for building forms.</p>
-
+    <div>
       <h2 className="my-3">Default (Text) Input</h2>
       <Input placeholder="I'm a placeholder!" />
 
       <h2 className="my-3">Custom Inputs</h2>
       <p><code>&lt;CurrencyInput/&gt;</code></p>
       <CurrencyInput />
-    </Container>
+    </div>
   ))
   .addWithInfo('Form Rows', () => (
-    <Container className="mt-3">
-      <h1 className="display-4 mb-3">Form Rows</h1>
-      <p className="lead">A <code>FormRow</code> combines a label and an input with an interface to provide feedback, hints, and can specify whether or not the field is required.</p>
-
-      <h2 className="my-3">Example</h2>
+    <form>
       <FormRow label="First Name" />
       <FormRow label="Last Name" feedback="can't be blank" color="danger" />
       <FormRow label="Nickname" hint="A fun name to describe yourself!" />
@@ -54,5 +47,5 @@ storiesOf('Forms', module)
         <FormChoice disabled>No</FormChoice>
       </FormRow>
       <FormRow type={CurrencyInput} label="How much would you pay to meet the cast?" />
-    </Container>
+    </form>
   ));