Added example of pre-populated date input

Author: Luke Pearson

stories/FormElementBehaviour/DateInput.stories.tsx

@@ -5,7 +5,7 @@ import { DateInput, Form } from '../../src';
 
 const stories = storiesOf('FormElementBehaviour: DateInput', module);
 
-stories.add('Standard', () => ( 
+stories.add('Standard', () => (
   <div style={{ padding: 20 }}>
     <h2>Scenario: onChange and onInput handlers are bound without any other props</h2>
     <h5>Expected Behaviour</h5>
@@ -15,12 +15,12 @@ stories.add('Standard', () => (
     </ul>
     <h5>Component</h5>
     <Form>
-      <DateInput onChange={e => console.log(e.target.value)} hint="Test hint" label="Test label"/>
+      <DateInput onChange={e => console.log(e.target.value)} hint="Test hint" label="Test label" />
     </Form>
   </div>
 ));
 
-stories.add('Standard with Error', () => ( 
+stories.add('Standard with Error', () => (
   <div style={{ padding: 20 }}>
     <h2>Scenario: onChange and onInput handlers are bound without any other props</h2>
     <h5>Expected Behaviour</h5>
@@ -29,16 +29,35 @@ stories.add('Standard with Error', () => (
       <li>The value is passed through</li>
     </ul>
     <h5>Component</h5>
-    <Form error={true}>
-      <DateInput onChange={e => console.log(e.target.value)} error="Test Error" hint="Test hint" label="Test label"/>
+    <Form error>
+      <DateInput onChange={e => console.log(e.target.value)} error="Test Error" hint="Test hint" label="Test label" />
     </Form>
     <h5>Component with specific field errors</h5>
-    <Form error={true}>
+    <Form error>
       <DateInput onChange={e => console.log(e.target.value)} error="Test Error" hint="Test hint" label="Test label">
-        <DateInput.Day error={false}/>
-        <DateInput.Month/>
-        <DateInput.Year/>
+        <DateInput.Day error={false} />
+        <DateInput.Month />
+        <DateInput.Year />
       </DateInput>
     </Form>
   </div>
 ));
+
+stories.add('Pre-populated', () => {
+  const initialValue = { day: '20', month: '09', year: '1996' };
+  return (
+    <div style={{ padding: 20 }}>
+      <h5>Component</h5>
+      <Form>
+        <DateInput
+          hint="Test hint"
+          label="Test label"
+        >
+          <DateInput.Day value={initialValue.day} />
+          <DateInput.Month value={initialValue.month} />
+          <DateInput.Year value={initialValue.year} />
+        </DateInput>
+      </Form>
+    </div>
+  );
+});