Merge branch 'master' of github.com:NHSDigital/nhsuk-react-components

Author: Tomdango

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>
+  );
+});

stories/Grid.stories.tsx

@@ -0,0 +1,32 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import centered from '@storybook/addon-centered';
+import { Row, Col, Panel, Container } from '../src';
+
+const stories = storiesOf('Grid', module);
+
+stories
+  .addDecorator(centered)
+  .add('Grid', () => (
+    <Container>
+      <Row>
+        <Col width="full"><Panel>full column</Panel></Col>
+      </Row>
+      <Row>
+        <Col width="one-half"><Panel>one-half column</Panel></Col>
+        <Col width="one-half"><Panel>one-half column</Panel></Col>
+      </Row>
+      <Row>
+        <Col width="one-third"><Panel>one-third column</Panel></Col>
+        <Col width="one-third"><Panel>one-third column</Panel></Col>
+        <Col width="one-third"><Panel>one-third column</Panel></Col>
+      </Row>
+      <Row>
+        <Col width="one-quarter"><Panel>one-quarter column</Panel></Col>
+        <Col width="one-quarter"><Panel>one-quarter column</Panel></Col>
+        <Col width="one-quarter"><Panel>one-quarter column</Panel></Col>
+        <Col width="one-quarter"><Panel>one-quarter column</Panel></Col>
+      </Row>
+    </Container>
+  ));