Merge pull request #61 from Ultimaker/input-fields

Refactoring input fields

Author: Alan

src/components/__tests__/__snapshots__/file_upload.test.tsx.snap

@@ -9,6 +9,7 @@ exports[`The FileUpload component should render 1`] = `
     id="testFileUpload"
     name="testFileUpload"
     onChange={[Function]}
+    placeholder="A text placeholder"
     type="file"
   />
   <div
@@ -29,7 +30,11 @@ exports[`The FileUpload component should render 1`] = `
         className="btn btn--primary"
         htmlFor="testFileUpload"
       >
-        Choose file
+        <span
+          className="text"
+        >
+          Choose file
+        </span>
       </label>
     </div>
   </div>

src/components/__tests__/__snapshots__/form.test.tsx.snap

@@ -46,44 +46,65 @@ exports[`The Form component should render with a form item 1`] = `
         labelLayoutWidth="1/1"
         labelWidthBreakpoint="sm"
         onChangeHandler={[MockFunction]}
+        staticField={false}
         type="text"
         value={null}
       >
-        <div
-          className="input-field input-field--text layout"
+        <TextField
+          id="test"
+          labelLayoutWidth="1/1"
+          labelWidthBreakpoint="sm"
+          onChangeHandler={[MockFunction]}
+          staticField={false}
+          type="text"
+          value={null}
         >
-          <InputFieldInput
+          <DefaultInputField
             id="test"
             labelLayoutWidth="1/1"
             labelWidthBreakpoint="sm"
-            onChangeHandler={[Function]}
+            onChangeHandler={[MockFunction]}
+            staticField={false}
             type="text"
             value={null}
           >
-            <div
-              className="layout__item u-fill layout__item--middle"
+            <InputFieldWrapper
+              id="test"
+              labelLayoutWidth="1/1"
+              labelWidthBreakpoint="sm"
+              onChangeHandler={[MockFunction]}
+              staticField={false}
+              touched={false}
             >
               <div
-                className="input-container layout layout--gutter-xs"
+                className="input-field layout"
               >
                 <div
-                  className="layout__item u-fill"
+                  className="layout__item u-fill layout__item--middle"
                 >
-                  <input
-                    className="input"
-                    id="test"
-                    max={null}
-                    min={null}
-                    name="test"
-                    onChange={[Function]}
-                    type="text"
-                    value=""
-                  />
+                  <div
+                    className="input-container layout layout--gutter-xs"
+                  >
+                    <div
+                      className="layout__item u-fill"
+                    >
+                      <input
+                        className="input"
+                        id="test"
+                        max={null}
+                        min={null}
+                        name="test"
+                        onChange={[Function]}
+                        type="text"
+                        value=""
+                      />
+                    </div>
+                  </div>
                 </div>
               </div>
-            </div>
-          </InputFieldInput>
-        </div>
+            </InputFieldWrapper>
+          </DefaultInputField>
+        </TextField>
       </InputField>
     </div>
     <div

src/components/__tests__/__snapshots__/image_upload.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`The ImageFile component should render 1`] = `
+exports[`The image upload component should render 1`] = `
 <div>
   <t
     accept="image/jpeg, image/png"

src/components/__tests__/__snapshots__/input_field.test.tsx.snap

@@ -1,16 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`The InputField component should render 1`] = `
-<div
-  className="input-field input-field--text layout"
->
-  <InputFieldInput
-    id="testInputField"
-    labelLayoutWidth="1/1"
-    labelWidthBreakpoint="sm"
-    onChangeHandler={[Function]}
-    type="text"
-    value="Test input"
-  />
-</div>
+<TextField
+  id="testInputField"
+  labelLayoutWidth="1/1"
+  labelWidthBreakpoint="sm"
+  onChangeHandler={[MockFunction]}
+  staticField={false}
+  type="text"
+  value="Test input"
+/>
 `;

src/components/__tests__/__snapshots__/input_field_input.test.tsx.snap

@@ -14,6 +14,7 @@ exports[`The PopupPrompt component should render a prompt popup 1`] = `
     labelLayoutWidth="1/1"
     labelWidthBreakpoint="sm"
     onChangeHandler={[Function]}
+    staticField={false}
     type="text"
   />
 </Popup>