Merge remote-tracking branch 'origin/master' into add-default-name-to…

…-form-components
klarna · Nov 22, 2016 · c2b5190 · c2b5190
2 parents 53493ae + d5eca31
commit c2b5190
Show file tree

Hide file tree

Showing 19 changed files with 477 additions and 469 deletions.
diff --git a/Field/PinCode/index.jsx b/Field/PinCode/index.jsx
diff --git a/Field/PinCode/styles.scss b/Field/PinCode/styles.scss
diff --git a/Field/example.jsx b/Field/example.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import Field, { icons } from '../Field'
-import * as FieldVariation from '../Field'
 import Fieldset from '../Fieldset'
 import ReactMaskedInput from 'react-maskedinput'
 import { LIVE, LIVE_WIDE, MANUAL } from '../Showroom/variationTypes'
@@ -28,6 +27,13 @@ export default {
 
         'With name': <Field name='email' label='Enter your email' />,
 
+        'Pin code variation': <Field
+          pinCode
+          label='Enter your email'
+        />,
+
+        'With focus': <Field label='Enter your email' focus />,
+
         'With fake focus': <Field label='Enter your email' focus='fake' />,
 
         Disabled: <Field disabled label='Address' defaultValue='16, Corn street' />,
@@ -181,51 +187,6 @@ import Fieldset from '@klarna/ui/Fieldset'`,
           <Field right bottom size='3/5' label='Mobile phone number' />
         </Fieldset>
       }
-    },
-
-    {
-      title: 'PinCode',
-      require: 'import * as Field from \'@klarna/ui/Field\'',
-      type: LIVE,
-
-      examples: {
-        Regular: (
-          <FieldVariation.PinCode
-            onChange={(value) => console.log(value)}
-            defaultValue='3134'
-            placeholder='Enter the value'
-          />
-        ),
-
-        Controlled: (
-          <FieldVariation.PinCode
-            onChange={(value) => console.log(value)}
-            value='312'
-          />
-        ),
-
-        Error: (
-          <FieldVariation.PinCode
-            error
-            onChange={(value) => console.log(value)}
-            defaultValue='3134'
-            placeholder='Enter the value'
-          />
-        ),
-
-        Customized: (
-          <FieldVariation.PinCode
-            customize={{
-              borderColor: 'red',
-              borderColorSelected: 'purple',
-              borderRadius: '10px',
-              inputColor: 'orange'
-            }}
-            defaultValue='1337'
-            placeholder='Enter the value'
-          />
-        )
-      }
     }
   ]
 }
diff --git a/Field/index.jsx b/Field/index.jsx
@@ -16,8 +16,6 @@ import {
   uniqueName
 } from '@klarna/higher-order-components'
 
-export PinCode from './PinCode'
-
 const baseClass = 'field'
 
 const classes = {
@@ -41,8 +39,10 @@ const Field = React.createClass({
       big: false,
       centered: false,
       loading: false,
+      nonFloatingLabel: false,
       onChange: function () {},
       responsive: true,
+      pinCode: false,
       mouseflowExclude: false,
       ...inlinedIcon.defaultProps,
       ...fieldStates.defaultProps,
@@ -69,6 +69,9 @@ const Field = React.createClass({
     onChange: PropTypes.func,
     onClick: PropTypes.func,
     onFocus: PropTypes.func,
+    nonFloatingLabel: PropTypes.bool,
+    pattern: PropTypes.string,
+    pinCode: PropTypes.bool,
     mouseflowExclude: PropTypes.bool,
     responsive: PropTypes.bool,
     value: PropTypes.string,
@@ -147,12 +150,14 @@ const Field = React.createClass({
       left, // eslint-disable-line no-unused-vars
       loading,
       mouseflowExclude,
+      nonFloatingLabel,
       onBlur,
       onChange,
       onClick,
       onEnter, // eslint-disable-line no-unused-vars
       onFocus,
       onTab, // eslint-disable-line no-unused-vars
+      pinCode,
       responsive,
       right, // eslint-disable-line no-unused-vars
       square,
@@ -168,12 +173,14 @@ const Field = React.createClass({
 
     const cls = classNames(
       (icon ? classes.icon : baseClass), {
-        big,
+        big: big || pinCode,
         'is-autofill': !!this.state.autoFill,
-        'is-centered': centered,
+        'is-centered': centered || pinCode,
         'is-filled': value != null && value !== '',
         'is-loading': loading,
         'non-responsive': !responsive,
+        'non-floating-label': pinCode || nonFloatingLabel,
+        'pin-code': pinCode,
         square
       },
       fieldStates.getClassName(this.props),

diff --git a/Field/styles.scss b/Field/styles.scss
@@ -133,22 +133,30 @@
     line-height: ($grid * 12);
   }
 
-  .big.is-autofill &,
-  .big.is-filled &,
-  .big.is-error &,
-  .big.is-warning & {
+  .big.is-autofill:not(.non-floating-label) &,
+  .big.is-filled:not(.non-floating-label) &,
+  .big.is-error:not(.non-floating-label) &,
+  .big.is-warning:not(.non-floating-label) & {
     margin-top: ($grid * -2.2);
   }
 
-  .is-autofill &,
-  .is-filled &,
-  .is-error &,
-  .is-warning & {
+  .is-autofill:not(.non-floating-label) &,
+  .is-filled:not(.non-floating-label) &,
+  .is-error:not(.non-floating-label) &,
+  .is-warning:not(.non-floating-label) & {
     @include typography(map-get($font-sizes, input-label), regular);
 
     margin-top: ($grid * -2.2);
   }
 
+  .non-floating-label.is-autofill &,
+  .non-floating-label.is-filled &,
+  .non-floating-label.is-focused &,
+  .non-floating-label.is-error &,
+  .non-floating-label.is-warning & {
+    display: none;
+  }
+
   .is-filled & {
     color: map-get($colors, grey-text);
   }
@@ -243,18 +251,18 @@
     height: ($grid * 12);
   }
 
-  .big.is-autofill &,
-  .big.is-filled &,
-  .big.is-error &,
-  .big.is-warning & {
+  .big.is-autofill:not(.non-floating-label) &,
+  .big.is-filled:not(.non-floating-label) &,
+  .big.is-error:not(.non-floating-label) &,
+  .big.is-warning:not(.non-floating-label) & {
     height: ($grid * 9.8);
     top: ($grid * 2.2);
   }
 
-  .is-autofill &,
-  .is-filled &,
-  .is-error &,
-  .is-warning & {
+  .is-autofill:not(.non-floating-label) &,
+  .is-filled:not(.non-floating-label) &,
+  .is-error:not(.non-floating-label) &,
+  .is-warning:not(.non-floating-label) & {
     height: ($grid * 9);
     top: ($grid * 1.6);
   }
@@ -266,6 +274,10 @@
     -webkit-opacity: 1;
   }
 
+  .pin-code & {
+    font-size: ($grid * 5.2);
+  }
+
   .safari &,
   .ios & {
     -webkit-transform: translate3d(0, 0, 0);