Add default name to form components

BoxSelector/example.jsx

@@ -29,7 +29,6 @@ export default {
       Controlled: (
         <BoxSelector
           onChange={(key) => console.log('You selected', key)}
-          name='installments2'
           value='installments_24'
           focus='installments_6'
           options={options}

BoxSelector/index.jsx

@@ -7,7 +7,8 @@ import compose from 'ramda/src/compose'
 import {
   overridable,
   themeable,
-  uncontrolled
+  uncontrolled,
+  uniqueName
 } from '@klarna/higher-order-components'
 
 const baseClass = 'box-selector'
@@ -310,5 +311,6 @@ export default compose(
       labelColor: customizations.color_text
     }
   })),
-  overridable(defaultStyles)
+  overridable(defaultStyles),
+  uniqueName
 )(BoxSelector)

Dropdown/example.jsx

@@ -22,52 +22,57 @@ export default {
         Regular: <Dropdown
           label='Lorem ipsum'
           options={options}
-                 />,
+        />,
 
         Controlled: <Dropdown
-          name='dropdown-lorem-ipsum'
           label='Lorem ipsum'
           options={options}
           focus
           value='lorem'
-                    />,
+        />,
+
+        'With name': <Dropdown
+          label='Lorem ipsum'
+          name='dolor-sit-amet'
+          options={options}
+        />,
 
         'With fake focus': <Dropdown
           focus='fake'
           label='Lorem ipsum'
           options={options}
-                           />,
+        />,
 
         Loading: <Dropdown
           label='Wait...'
           loading
           options={options}
-                 />,
+        />,
 
         Disabled: <Dropdown
           disabled
           label='Disabled'
           options={options}
-                  />,
+        />,
 
         'Exclude Mouseflow': <Dropdown
           mouseflowExclude
           label='Disabled'
           value='lorem'
           options={options}
-                             />,
+        />,
 
         'With error': <Dropdown
           label='Something went wrong'
           error
           options={options}
-                      />,
+        />,
 
         'With warning': <Dropdown
           label='Something is incorect'
           warning
           options={options}
-                        />
+        />
       }
     },
 
@@ -80,30 +85,63 @@ import Fieldset from '@klarna/ui/Fieldset'`,
       examples: {
         'Two fields': <Fieldset>
           <Dropdown
-            left size='1/2' name='dropdown-given-name' label='Given name' options={options} />
+            left size='1/2'
+            label='Given name'
+            options={options}
+          />
           <Dropdown
-            right size='1/2' name='dropdown-last-name' label='Middle name' options={options} />
+            right size='1/2'
+            label='Middle name'
+            options={options}
+          />
         </Fieldset>,
 
         Many: <Fieldset>
           <Dropdown
-            top left size='1/2' name='many-given-name' label='Given name' options={options} />
+            top left size='1/2'
+            label='Given name'
+            options={options}
+          />
           <Dropdown
-            center size='1/4' name='many-middle-name' label='Middle name' options={options} />
+            center size='1/4'
+            label='Middle name'
+            options={options}
+          />
           <Dropdown
-            top right size='1/4' name='many-last-name' label='Last name' options={options} />
+            top right size='1/4'
+            label='Last name'
+            options={options}
+          />
           <Dropdown
-            left square size='1/5' name='many-number' label='Number' options={options} />
+            left square size='1/5'
+            label='Number'
+            options={options}
+          />
           <Dropdown
-            right square size='4/5' name='many-street-address' label='Street Address' options={options} />
+            right square size='4/5'
+            label='Street Address'
+            options={options}
+          />
           <Dropdown
-            left square size='1/3' name='many-pokemon' label='Your favorite pokémon' options={options} />
+            left square size='1/3'
+            label='Your favorite pokémon'
+            options={options}
+          />
           <Dropdown
-            right square size='2/3' name='many-android-iphone' label='Android or iPhone: please explain' options={options} />
+            right square size='2/3'
+            label='Android or iPhone: please explain'
+            options={options}
+          />
           <Dropdown
-            left bottom size='2/5' name='many-date-of-birth' label='Date of Birth' options={options} />
+            left bottom size='2/5'
+            label='Date of Birth'
+            options={options}
+          />
           <Dropdown
-            right bottom size='3/5' name='many-mobile-phone-number' label='Mobile phone number' options={options} />
+            right bottom size='3/5'
+            label='Mobile phone number'
+            options={options}
+          />
         </Fieldset>
       }
     }

Dropdown/index.jsx

@@ -11,7 +11,8 @@ import compose from 'ramda/src/compose'
 import {
   overridable,
   themeable,
-  uncontrolled
+  uncontrolled,
+  uniqueName
 } from '@klarna/higher-order-components'
 
 const baseClass = 'dropdown'
@@ -254,5 +255,6 @@ export default compose(
       selectedColor: customizations.color_text
     }
   })),
-  overridable(defaultStyles)
+  overridable(defaultStyles),
+  uniqueName
 )(Dropdown)

Field/PinCode/index.jsx

@@ -6,7 +6,8 @@ import compose from 'ramda/src/compose'
 import {
   overridable,
   themeable,
-  uncontrolled
+  uncontrolled,
+  uniqueName
 } from '@klarna/higher-order-components'
 
 const baseClass = 'field-code'
@@ -106,5 +107,6 @@ export default compose(
       inputColor: customizations.color_text
     }
   })),
-  overridable(defaultStyles)
+  overridable(defaultStyles),
+  uniqueName
 )(PinCode)

Field/example.jsx

@@ -19,14 +19,15 @@ export default {
         Regular: <Field label='Enter your email' />,
 
         Controlled: <Field
-          name='field-controlled'
           label='Enter your email'
           value='[email protected]'
           focus
-                    />,
+        />,
 
         Big: <Field label='Enter your email' big />,
 
+        'With name': <Field name='email' label='Enter your email' />,
+
         'With fake focus': <Field label='Enter your email' focus='fake' />,
 
         Disabled: <Field disabled label='Address' defaultValue='16, Corn street' />,
@@ -35,22 +36,21 @@ export default {
           mouseflowExclude
           label='Address'
           defaultValue='16, Corn street'
-                             />,
+        />,
 
         'With error': <Field label='Invalid email' error defaultValue='invalid@' />,
 
         'With warning': <Field
           label='Are you sure the domain is exanple?'
           warning
           defaultValue='[email protected]'
-                        />,
+        />,
 
         'With customizations': <Field
-          name='with-customizations'
           customize={{ borderColor: '#3500C8', borderColorSelected: '#3500C8', borderRadius: '15px', inputColor: 'green', labelColor: 'red' }}
           label='Favorite color'
           defaultValue='Purple'
-                               />
+        />
       }
     },
 
@@ -67,7 +67,8 @@ import ReactMaskedInput from 'react-maskedinput'`,
             Input={ReactMaskedInput}
             mask='1111 1111 1111 1111'
             placeholder=' '
-                />,
+          />,
+
           code: `<Field
   label='Credit card number'
   Input={ReactMaskedInput}
@@ -164,20 +165,20 @@ import Fieldset from '@klarna/ui/Fieldset'`,
 
       examples: {
         'Two fields': <Fieldset margins>
-          <Field left size='1/2' name='two-given-name' label='Given name' />
-          <Field right size='1/2' name='two-middle-name' label='Middle name' />
+          <Field left size='1/2' label='Given name' />
+          <Field right size='1/2' label='Middle name' />
         </Fieldset>,
 
         Many: <Fieldset margins>
-          <Field top left size='1/2' name='many-given-name' label='Given name' />
-          <Field center size='1/4' name='many-middle-name' label='Middle name' />
-          <Field top right size='1/4' name='many-last-name' label='Last name' />
-          <Field left square size='1/5' name='many-number' label='Number' />
-          <Field right square size='4/5' name='many-street-address' label='Street Address' />
-          <Field left square size='1/3' name='many-pokemon' label='Your favorite pokémon' />
-          <Field right square size='2/3' name='many-android-iphone' label='Android or iPhone: please explain' />
-          <Field left bottom size='2/5' name='many-date-of-birth' label='Date of Birth' />
-          <Field right bottom size='3/5' name='many-mobile-phone-number' label='Mobile phone number' />
+          <Field top left size='1/2' label='Given name' />
+          <Field center size='1/4' label='Middle name' />
+          <Field top right size='1/4' label='Last name' />
+          <Field left square size='1/5' label='Number' />
+          <Field right square size='4/5' label='Street Address' />
+          <Field left square size='1/3' label='Your favorite pokémon' />
+          <Field right square size='2/3' label='Android or iPhone: please explain' />
+          <Field left bottom size='2/5' label='Date of Birth' />
+          <Field right bottom size='3/5' label='Mobile phone number' />
         </Fieldset>
       }
     },

Field/index.jsx

@@ -12,7 +12,8 @@ import compose from 'ramda/src/compose'
 import {
   overridable,
   themeable,
-  uncontrolled
+  uncontrolled,
+  uniqueName
 } from '@klarna/higher-order-components'
 
 export PinCode from './PinCode'
@@ -282,5 +283,6 @@ export default compose(
       inputColor: customizations.color_text
     }
   })),
-  overridable(defaultStyles)
+  overridable(defaultStyles),
+  uniqueName
 )(Field)