From af4b19fa43ea4f8129ea0e5353d0c0fca9bc29fb Mon Sep 17 00:00:00 2001
From: Richard Palmer <richard.palmer@appearhere.co.uk>
Date: Wed, 7 Jun 2017 11:44:24 +0100
Subject: [PATCH] Add placeholder support to `<InputField />`

---
 components/Form/FormComponents.css              | 12 ++++++++++++
 components/Form/FormComponents.js               |  6 ++++++
 components/Form/FormComponents.story.js         |  4 ++++
 components/Form/InputField/InputField.js        | 12 +++++++++++-
 components/FunnelInputField/FunnelInputField.js |  1 +
 5 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/components/Form/FormComponents.css b/components/Form/FormComponents.css
index 444daa4f8..df7b487a9 100644
--- a/components/Form/FormComponents.css
+++ b/components/Form/FormComponents.css
@@ -54,6 +54,16 @@
   width: auto;
 }
 
+
+.placeholder {
+  display: block;
+  composes: fontRegular from '../../globals/typography.css';
+  color: var(--color-greyLight);
+  text-align: center;
+  display: inline-block;
+  width: auto;
+}
+
 .error {
   color: var(--color-danger);
 }
@@ -63,6 +73,7 @@
 * + .headline,
 * + .label,
 * + .value,
+* + .placeholder,
 * + .inputWrapper {
   margin-top: var(--size-sm-ii);
 }
@@ -74,6 +85,7 @@
 .headline + .meta,
 .headline + .description,
 .headline + .value,
+.headline + .placeholder,
 .headline + .inputWrapper {
   margin-top: var(--size-sm-i);
 }
diff --git a/components/Form/FormComponents.js b/components/Form/FormComponents.js
index 4ed9c831c..50b2485e9 100644
--- a/components/Form/FormComponents.js
+++ b/components/Form/FormComponents.js
@@ -53,6 +53,12 @@ export const Value = ({ className, children }) => (
   </span>
 );
 
+export const Placeholder = ({ className, children }) => (
+  <span className={ cx(css.placeholder, className) }>
+    { children }
+  </span>
+);
+
 export const InputWrapper = ({ className, children }) => (
   <div className={ cx(css.inputWrapper, className) }>
     { children }
diff --git a/components/Form/FormComponents.story.js b/components/Form/FormComponents.story.js
index dd17ef184..44e1d652b 100644
--- a/components/Form/FormComponents.story.js
+++ b/components/Form/FormComponents.story.js
@@ -7,6 +7,7 @@ import {
   Description,
   Label,
   Value,
+  Placeholder,
 } from './FormComponents';
 
 const stories = storiesOf('FormComponents', module);
@@ -35,4 +36,7 @@ stories.add('Field', () => (
 ))
 .add('Value', () => (
   <Value>900sq ft - 1500 sq ft</Value>
+))
+.add('Placeholder', () => (
+  <Placeholder>Any size</Placeholder>
 ));
\ No newline at end of file
diff --git a/components/Form/InputField/InputField.js b/components/Form/InputField/InputField.js
index c7570f815..300779feb 100644
--- a/components/Form/InputField/InputField.js
+++ b/components/Form/InputField/InputField.js
@@ -5,6 +5,7 @@ import {
   Meta,
   Label,
   Value,
+  Placeholder,
   Description,
   InputWrapper,
 } from '../FormComponents';
@@ -29,6 +30,7 @@ export default class InputField extends Component {
     children: PropTypes.element,
     error: PropTypes.node,
     valueReplay: PropTypes.node,
+    placeholder: PropTypes.node,
     required: PropTypes.bool,
     optionalLabel: PropTypes.string,
   };
@@ -49,6 +51,7 @@ export default class InputField extends Component {
       classNames,
       error,
       valueReplay,
+      placeholder,
       required,
       optionalLabel,
       ...rest,
@@ -75,7 +78,14 @@ export default class InputField extends Component {
         >
           { label }
         </Label>
-        { valueReplay && (
+        { !valueReplay && placeholder ? (
+          <Placeholder
+            { ...sharedProps }
+            className={ classNames.valueReplay }
+          >
+            { placeholder }
+          </Placeholder>
+        ) : (
           <Value
             { ...sharedProps }
             className={ classNames.valueReplay }
diff --git a/components/FunnelInputField/FunnelInputField.js b/components/FunnelInputField/FunnelInputField.js
index 5e4da5f6c..48117899a 100644
--- a/components/FunnelInputField/FunnelInputField.js
+++ b/components/FunnelInputField/FunnelInputField.js
@@ -21,6 +21,7 @@ FunnelInputField.propTypes = {
     meta: PropTypes.string,
     label: PropTypes.string,
     valueReplay: PropTypes.string,
+    placeholder: PropTypes.string,
     description: PropTypes.string,
   }),
   valueReplay: PropTypes.any,