Update the header in storybook docs

appfolio · Dec 7, 2016 · 157da23 · 157da23
1 parent 2ae2215
commit 157da23
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 16 deletions.
diff --git 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
@@ -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>
   ));