feat(Input): Floating Label Fields

package.json

@@ -20,6 +20,7 @@
     "transpile": "npm-run-all transpile:main transpile:esm transpile:cjs",
     "smart-release": "npm run build && npm run test && git commit -am $npm_package_version && git tag $npm_package_version && git push && git push --tags && npm publish",
     "test": "jest",
+    "test:watch": "npm run test -- --watch",
     "test:coverage": "npm test -- --coverage",
     "test:ci": "jest --coverage && ./node_modules/coveralls/bin/coveralls.js < ./coverage/lcov.info",
     "test:size": "bundlesize",

src/components/Button/Button.js

@@ -35,7 +35,7 @@ Button.propTypes = {
   /**
    * onClick Handler handling button click
    */
-  onClick: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
   /**
    * Value to display in button
    */

src/components/Button/Button.styled.js

@@ -18,7 +18,7 @@ const FitzyButton = styled.button`
   color: white;
   cursor: pointer;
   appearance: none;
-  font-size: 14px;
+  font-size: inherit;
   width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
 
   &:disabled {

src/components/Input/Input.js

@@ -89,8 +89,8 @@ class Input extends PureComponent {
 
     return (
       <FormField role="presentation" className={className}>
-        {this.renderLabel(inputId)}
         {this.renderInput(inputId)}
+        {this.renderLabel(inputId)}
         {this.renderHint()}
         {this.renderWarning()}
       </FormField>

src/components/Input/Input.styled.js

@@ -4,6 +4,12 @@ const FormField = styled.label`
   position: relative;
   display: block;
   margin-bottom: 1.5rem;
+
+  &:focus-within {
+    label {
+      top: -24px;
+    }
+  }
 `;
 
 const FormError = styled.span`
@@ -25,13 +31,19 @@ const FitzyInput = styled.input`
   background-color: #fff;
   transition: border 0.3s ease-in-out;
   margin: 0 0 5px 0;
+
+  ~ label {
+    top: ${({ value }) => (value ? '-24px' : '12px')};
+  }
 `;
 
 const FitzyLabel = styled.label`
   display: inline-block;
-  margin-bottom: 5px;
-  font-weight: bold;
   max-width: 100%;
+  position: absolute;
+  left: 12px;
+  z-index: 1;
+  transition: all 0.3s ease;
 `;
 
 /** @component */

src/components/Input/README.md

@@ -18,7 +18,6 @@ initialState = { value: '' };
 
 <Input
   label="Name"
-  placeholder="Enter your name"
   value={state.value}
   onChange={(_, v) => setState({ value: v })}
   warning={<span>Some Warning</span>}

src/components/Input/__tests__/__snapshots__/InputTest.js.snap

@@ -7,6 +7,10 @@ exports[`Input should match snapshot 1`] = `
   margin-bottom: 1.5rem;
 }
 
+.c0:focus-within label {
+  top: -24px;
+}
+
 .c1 {
   display: block;
   position: relative;
@@ -24,6 +28,10 @@ exports[`Input should match snapshot 1`] = `
   margin: 0 0 5px 0;
 }
 
+.c1 ~ label {
+  top: -24px;
+}
+
 <label
   className="c0"
   role="presentation"