Added placeholder logic

src/__test__/Form.test.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Form, { InputWithPlaceHolder } from '../components/Form';
+import { mount, shallow } from 'enzyme';
+
+describe('Place holder', () => {
+  const colorTest = (inputWindow, color) => {
+    expect(inputWindow.find('input').prop('style')).toHaveProperty(
+      'color',
+      color
+    );
+  };
+
+  it('Placeholder shows on loading and color is grey', () => {
+    const inputWindow = shallow(<InputWithPlaceHolder placeHolder="test" />);
+    expect(inputWindow.find('input').prop('value')).toBe('test');
+    colorTest(inputWindow, 'grey');
+  });
+
+  it('Clicking on the input field hides the placeholder', () => {
+    const inputWindow = shallow(<InputWithPlaceHolder placeHolder="test" />);
+    const inputField = inputWindow.find('input');
+    inputField.simulate('focus');
+    expect(inputWindow.find('input').prop('value')).toBe('');
+  });
+
+  it('Typing in the input area shows the text with color black, \
+  	deleting the text shows placeholder again on blur', () => {
+    const inputWindow = mount(<InputWithPlaceHolder placeHolder="test" />);
+    const inputField = inputWindow.find('input');
+    inputField.simulate('focus');
+    const newValue = 'Entered new value';
+    inputField.simulate('change', { target: { value: newValue } });
+    expect(inputField.prop('value')).toBe(newValue);
+    colorTest(inputWindow, 'black');
+    inputField.simulate('change', { target: { value: '' } });
+    inputField.simulate('blur');
+    expect(inputField.prop('value')).toBe('test');
+    colorTest(inputWindow, 'grey');
+  });
+});

src/components/Form/index.js

@@ -0,0 +1,91 @@
+import React from 'react';
+
+export class InputWithPlaceHolder extends React.Component {
+  state = {
+    value: this.props.placeHolder,
+    fontColor: 'grey'
+  };
+
+  handleFocus = () => {
+    if (this.state.fontColor === 'grey') {
+      this.setState({
+        value: '',
+        fontColor: 'black'
+      });
+    }
+  };
+
+  handleChange = event => {
+    this.setState({
+      value: event.target.value
+    });
+  };
+
+  handleBlur = () => {
+    if (this.state.value.length === 0) {
+      this.setState({
+        value: this.props.placeHolder,
+        fontColor: 'grey'
+      });
+    }
+  };
+
+  render() {
+    if (this.props.type === 'textarea') {
+      return (
+        <textarea
+          type={this.props.type}
+          value={this.state.value}
+          onFocus={this.handleFocus}
+          onChange={this.handleChange}
+          style={{ color: this.state.fontColor }}
+          onBlur={this.handleBlur}
+          className="input"
+        />
+      );
+    }
+
+    return (
+      <input
+        type={this.props.type}
+        value={this.state.value}
+        onFocus={this.handleFocus}
+        onChange={this.handleChange}
+        style={{ color: this.state.fontColor }}
+        onBlur={this.handleBlur}
+        className="input"
+      />
+    );
+  }
+}
+
+export default class Form extends React.Component {
+  render() {
+    return (
+      <form>
+        <label>
+          Name:
+          <InputWithPlaceHolder type="text" placeHolder="Enter your name" />
+        </label>
+        <br />
+        <label>
+          Password:
+          <InputWithPlaceHolder type="password" placeHolder="12345678" />
+        </label>
+        <br />
+        <label>
+          Password:
+          <InputWithPlaceHolder type="password" placeHolder="12345678" />
+        </label>
+        <br />
+        <label>
+          Comments: <br />
+          <InputWithPlaceHolder
+            type="textarea"
+            placeHolder="Enter your comments."
+          />
+        </label>
+      </form>
+    );
+  }
+}