Add placeholder support to <InputField />

appearhere · Jun 7, 2017 · af4b19f · af4b19f
1 parent 5a370f1
commit af4b19f
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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>
 ));
diff --git 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
@@ -21,6 +21,7 @@ FunnelInputField.propTypes = {
     meta: PropTypes.string,
     label: PropTypes.string,
     valueReplay: PropTypes.string,
+    placeholder: PropTypes.string,
     description: PropTypes.string,
   }),
   valueReplay: PropTypes.any,