[#922] Extract input field to a component

with @anikarni

7 files changed, 129 insertions, 61 deletions

diff --git a/web-ui/src/account_recovery/page.js b/web-ui/src/account_recovery/page.js
index 90a1faa4..d1bcb464 100644
--- a/web-ui/src/account_recovery/page.js
+++ b/web-ui/src/account_recovery/page.js
@@ -17,7 +17,8 @@
 
 import React from 'react'
 import { translate } from 'react-i18next'
-import SubmitButton from 'src/common/submit_button'
+import SubmitButton from 'src/common/submit_button/submit_button'
+import InputField from 'src/common/input_field/input_field'
 
 import './page.scss'
 
@@ -28,10 +29,7 @@ export const Page = ({ t }) => (
       <h1>{t('backup-account.title')}</h1>
       <p>{t('backup-account.paragraph1')}</p>
       <p>{t('backup-account.paragraph2')}</p>
-      <div className="field-group">
-        <input type="text" name="email" className="email" required />
-        <label className="animated-label" htmlFor="email">{t('backup-account.input-label')}</label>
-      </div>
+      <InputField name='email' label={t('backup-account.input-label')} />
       <SubmitButton buttonText={t('backup-account.button')} />
       <div>
         <a href="/">
diff --git a/web-ui/src/account_recovery/page.scss b/web-ui/src/account_recovery/page.scss
index 2ddb366c..c23fe569 100644
--- a/web-ui/src/account_recovery/page.scss
+++ b/web-ui/src/account_recovery/page.scss
@@ -60,50 +60,6 @@ a {
 
 }
 
-.field-group {
-  position:relative;
-  margin: 1.5em 0;
-  width: 100%;
-
-  label {
-    font-size: 0.9em;
-    margin-bottom: 10px;
-    display: inline-block;
-  }
-
-  input {
-    display: block;
-    border: none;
-    border-bottom: solid 1px #4da3b6;
-    width: 100%;
-    height: auto;
-    padding: 0.3em 0px;
-  }
-
-  input:focus {
-    outline:none;
-    border-width: 2px;
-  }
-
-  input:focus ~ .animated-label, input:valid ~ .animated-label {
-    top:-12px;
-    left: 0;
-    font-size:0.7em;
-    color:#4da3b6;
-  }
-
-  .animated-label {
-    color:#999;
-    position:absolute;
-    pointer-events:none;
-    left: 6px;
-    top:10px;
-    transition:0.2s ease all;
-    -moz-transition:0.2s ease all;
-    -webkit-transition:0.2s ease all;
-  }
-}
-
 .container {
   background: $white;
   width: 84%;
@@ -135,7 +91,7 @@ img {
     -webkit-flex-direction: column;
     flex-direction: column;
 
-    .field-group, div {
+    div {
       flex-basis: 70%;
       -webkit-align-self: center;
       align-self: center;
@@ -157,16 +113,11 @@ img {
   form {
     margin-left: 2.5em;
 
-    .field-group, div {
+    div {
       width: 300px;
       -webkit-align-self: flex-start;
       align-self: flex-start;
     }
-
-    .field-group {
-      margin-top: 3em;
-      font-size: 1em;
-    }
   }
 
   img {
diff --git a/web-ui/src/common/input_field/input-field.scss b/web-ui/src/common/input_field/input-field.scss
new file mode 100644
index 00000000..ad5dda13
--- /dev/null
+++ b/web-ui/src/common/input_field/input-field.scss
@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import "~scss/base/colors";
+
+.input-field-group {
+  position:relative;
+  margin: 1.5em 0;
+  width: 100%;
+}
+
+.input-field-label {
+  font-size: 0.9em;
+  margin-bottom: 10px;
+  display: inline-block;
+  color:#999;
+  position:absolute;
+  pointer-events:none;
+  left: 6px;
+  top:10px;
+  transition:0.2s ease all;
+  -moz-transition:0.2s ease all;
+  -webkit-transition:0.2s ease all;
+}
+
+.input-field {
+  display: block;
+  border: none;
+  border-bottom: solid 1px $dark_blue;
+  width: 100%;
+  height: auto;
+  padding: 0.3em 0px;
+
+  &:focus {
+    outline:none;
+    border-width: 2px;
+  }
+}
+
+.input-field:focus ~ .input-field-label, .input-field:valid ~ .input-field-label {
+  top:-12px;
+  left: 0;
+  font-size:0.7em;
+  color: $dark_blue;
+}
+
+@media only screen and (min-width : 500px) {
+  .input-field-group {
+    flex-basis: 70%;
+    -webkit-align-self: center;
+    align-self: center;
+  }
+}
+
+@media only screen and (min-width : 960px) {
+  .input-field-group {
+    width: 300px;
+    -webkit-align-self: flex-start;
+    align-self: flex-start;
+    margin-top: 3em;
+    font-size: 1em;
+  }
+}
diff --git a/web-ui/src/common/input_field/input_field.js b/web-ui/src/common/input_field/input_field.js
new file mode 100644
index 00000000..43899419
--- /dev/null
+++ b/web-ui/src/common/input_field/input_field.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react'
+
+import './input-field.scss'
+
+const InputField = ({ label, name }) => (
+  <div className='input-field-group'>
+    <input type='text' name={name} className='input-field' required />
+    <label className='input-field-label' htmlFor={name}>{label}</label>
+  </div>
+)
+
+export default InputField
diff --git a/web-ui/src/common/submit-button.scss b/web-ui/src/common/submit_button/submit-button.scss
index 86a24e5a..86a24e5a 100644
--- a/web-ui/src/common/submit-button.scss
+++ b/web-ui/src/common/submit_button/submit-button.scss
diff --git a/web-ui/src/common/submit_button.js b/web-ui/src/common/submit_button/submit_button.js
index 89cfc55b..89cfc55b 100644
--- a/web-ui/src/common/submit_button.js
+++ b/web-ui/src/common/submit_button/submit_button.js
diff --git a/web-ui/test/unit/account_recovery/page.spec.js b/web-ui/test/unit/account_recovery/page.spec.js
index 151f09e1..590d1de8 100644
--- a/web-ui/test/unit/account_recovery/page.spec.js
+++ b/web-ui/test/unit/account_recovery/page.spec.js
@@ -4,9 +4,22 @@ import React from 'react'
 import { Page } from 'src/account_recovery/page'
 
 describe('Page', () => {
+  let mockT, page
+
+  beforeEach(() => {
+    mockT = (key) => (key)
+    page = shallow(<Page t={mockT}/>)
+  })
+
   it('renders backup email page title', () => {
-    const mockT = key => key;
-    const page = shallow(<Page t={mockT}/>);
-    expect(page.find('h1').text()).toEqual('backup-account.title');
-  });
-});
+    expect(page.find('h1').text()).toEqual('backup-account.title')
+  })
+
+  it('renders backup account email input field', () => {
+    expect(page.find('InputField').props().name).toEqual('email')
+  })
+
+  it('renders backup account submit button', () => {
+    expect(page.find('SubmitButton').props().buttonText).toEqual('backup-account.button')
+  })
+})