Remove all decorators

Button/Primary/index.jsx

@@ -7,8 +7,7 @@ import parseColor from 'parse-color'
 import Price from '../Price'
 import compose from 'ramda/src/compose'
 
-import themeable from '../../decorators/themeable'
-import overridable from '../../decorators/overridable'
+import {overridable, themeable} from '@klarna/higher-order-components'
 
 const baseClass = 'button'
 

Button/Secondary/index.jsx

@@ -5,9 +5,9 @@ import classNamesBind from 'classnames/bind'
 import defaultStyles from '../styles.scss'
 import parseColor from 'parse-color'
 import contains from '../../lib/contains'
+
 import compose from 'ramda/src/compose'
-import themeable from '../../decorators/themeable'
-import overridable from '../../decorators/overridable'
+import {overridable, themeable} from '@klarna/higher-order-components'
 
 const baseClass = 'button'
 

Button/Tertiary/index.jsx

@@ -5,9 +5,9 @@ import classNamesBind from 'classnames/bind'
 import defaultStyles from '../styles.scss'
 import parseColor from 'parse-color'
 import contains from '../../lib/contains'
+
 import compose from 'ramda/src/compose'
-import themeable from '../../decorators/themeable'
-import overridable from '../../decorators/overridable'
+import {overridable, themeable} from '@klarna/higher-order-components'
 
 const baseClass = 'button'
 

Checklist/index.jsx

@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
 import defaultStyles from './styles.scss'
-import themeable from '../decorators/themeable'
-import overridable from '../decorators/overridable'
+
 import compose from 'ramda/src/compose'
+import {overridable, themeable} from '@klarna/higher-order-components'
 
 const baseClass = 'checklist'
 

Field/PinCode/index.jsx

@@ -1,10 +1,13 @@
 import React, {PropTypes, PureComponent} from 'react'
 import classNamesBind from 'classnames/bind'
 import defaultStyles from './styles.scss'
-import overridable from '../../decorators/overridable'
-import uncontrolled from '../../decorators/uncontrolled'
-import themeable from '../../decorators/themeable'
+
 import compose from 'ramda/src/compose'
+import {
+  overridable,
+  themeable,
+  uncontrolled
+} from '@klarna/higher-order-components'
 
 const baseClass = 'field-code'
 

Fieldset/index.jsx

@@ -2,11 +2,12 @@ import React, { PropTypes} from 'react'
 import Field from '../Field'
 import Dropdown from '../Dropdown'
 import Input from '../Input'
-import compose from 'ramda/src/compose'
-import uncontrolled from '../decorators/uncontrolled'
 import classNamesBind from 'classnames/bind'
 import defaultStyles from './styles.scss'
 
+import compose from 'ramda/src/compose'
+import {uncontrolled} from '@klarna/higher-order-components'
+
 function Fieldset ({
   className,
   children,

IconButton/Back/index.jsx

@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
-import themeable from '../../decorators/themeable'
-import overridable from '../../decorators/overridable'
-import compose from 'ramda/src/compose'
 import defaultStyles from '../styles.scss'
 
+import compose from 'ramda/src/compose'
+import {overridable, themeable} from '@klarna/higher-order-components'
+
 const classes = {
   iconButton: 'icon-button',
   fill: 'illustration__fill',

IconButton/Close/index.jsx

@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
-import themeable from '../../decorators/themeable'
-import overridable from '../../decorators/overridable'
-import compose from 'ramda/src/compose'
 import defaultStyles from '../styles.scss'
 
+import compose from 'ramda/src/compose'
+import {overridable, themeable} from '@klarna/higher-order-components'
+
 const classes = {
   iconButton: 'icon-button',
   fill: 'illustration__fill',

IconButton/Hamburger/index.jsx

@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
-import themeable from '../../decorators/themeable'
-import overridable from '../../decorators/overridable'
-import compose from 'ramda/src/compose'
 import defaultStyles from '../styles.scss'
 
+import compose from 'ramda/src/compose'
+import {overridable, themeable} from '@klarna/higher-order-components'
+
 const classes = {
   iconButton: 'icon-button',
   fill: 'illustration__fill',

IconButton/Options/index.jsx

@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
-import themeable from '../../decorators/themeable'
-import overridable from '../../decorators/overridable'
-import compose from 'ramda/src/compose'
 import defaultStyles from '../styles.scss'
 
+import compose from 'ramda/src/compose'
+import {overridable, themeable} from '@klarna/higher-order-components'
+
 const classes = {
   iconButton: 'icon-button',
   fill: 'illustration__fill',

IconButton/Search/index.jsx

@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
-import themeable from '../../decorators/themeable'
-import overridable from '../../decorators/overridable'
-import compose from 'ramda/src/compose'
 import defaultStyles from '../styles.scss'
 
+import compose from 'ramda/src/compose'
+import {overridable, themeable} from '@klarna/higher-order-components'
+
 const classes = {
   iconButton: 'icon-button',
   fill: 'illustration__fill',

Link/index.jsx

@@ -2,9 +2,9 @@ import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
 import defaultStyles from './styles.scss'
 import palette from '../lib/palette'
+
 import compose from 'ramda/src/compose'
-import themeable from '../decorators/themeable'
-import overridable from '../decorators/overridable'
+import {overridable, themeable} from '@klarna/higher-order-components'
 
 const baseClass = 'link'
 

List/Item/index.jsx

@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
 import defaultStyles from '../styles.scss'
-import themeable from '../../decorators/themeable'
-import overridable from '../../decorators/overridable'
+
 import compose from 'ramda/src/compose'
+import {overridable, themeable} from '@klarna/higher-order-components'
 
 const baseClass = 'list__item'
 

Paragraph/Primary/index.jsx

@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
-import themeable from '../../decorators/themeable'
-import overridable from '../../decorators/overridable'
 import defaultStyles from './styles.scss'
 import palette from '../../lib/palette'
+
 import compose from 'ramda/src/compose'
+import {overridable, themeable} from '@klarna/higher-order-components'
 
 const baseClass = 'paragraph--primary'
 

Paragraph/Secondary/index.jsx

@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
-import themeable from '../../decorators/themeable'
-import overridable from '../../decorators/overridable'
 import defaultStyles from './styles.scss'
 import palette from '../../lib/palette'
+
 import compose from 'ramda/src/compose'
+import {overridable, themeable} from '@klarna/higher-order-components'
 
 const baseClass = 'paragraph--secondary'
 

Subtitle/index.jsx

@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
 import defaultStyles from './styles.scss'
-import themeable from '../decorators/themeable'
-import overridable from '../decorators/overridable'
 import palette from '../lib/palette'
+
 import compose from 'ramda/src/compose'
+import {overridable, themeable} from '@klarna/higher-order-components'
 
 const baseClass = 'subtitle'
 

Theme/example.jsx

@@ -17,11 +17,6 @@ import * as List from '../List'
 import { Back, Hamburger } from '../IconButton'
 import { LIVE } from '../Showroom/variationTypes'
 
-import statefulFocus from '../lib/decorators/statefulFocus'
-import statefulValue from '../lib/decorators/statefulValue'
-
-const FocusableThemeableCheckbox = statefulValue(statefulFocus(Switch.Checkbox))
-
 const options = [
   { key: '', label: 'Pick one!', disabled: true, hidden: true },
   { key: 1, label: 'Lorem' },
@@ -48,7 +43,7 @@ const optionsWithContent = [
         name='installments'
         onChange={(key) => console.log('You selected', key)}
         options={[{content: <div>Long one line text in div</div>, key: 'installments_3'}, {content: [<div key='1'>$64.17/mo.</div>, <div key='2'>array of elements</div>], key: 'installments_6'}]}
-        value='installments_6'
+        defaultValue='installments_6'
       />
       <Checklist.Main style={{marginTop: '20px'}}>
         <Checklist.Item>Just one click and you're done</Checklist.Item>
@@ -73,7 +68,7 @@ const optionsWithContent = [
           {key: 'latte', label: 'Latte'}
         ]}
         label='Infusion'
-        value='coffee'
+        defaultValue='coffee'
       />
     </div>
   }
@@ -166,7 +161,7 @@ import * as List from '@klarna/ui/List'`,
         <div style={{padding: '20px 0'}}>
           <Checklist.Main>
             <Checklist.Item>
-              Just one click and you're done
+              Just one click and you’re done
             </Checklist.Item>
             <Checklist.Item>
               Very little hassle
@@ -187,13 +182,13 @@ import * as List from '@klarna/ui/List'`,
         </div>
 
         <Fieldset margins>
-          <Dropdown top label='Given name' options={options} value={1} />
+          <Dropdown top label='Given name' options={options} defaultValue={1} />
           <Dropdown square label='Middle name' options={options} />
           <Dropdown bottom label='Last name' options={options} focus='fake' />
         </Fieldset>
 
         <Fieldset margins>
-          <Field top label='Address' value='16, Corn street' focus='fake' />
+          <Field top label='Address' defaultValue='16, Corn street' focus='fake' />
           <Field square label='Given name' />
           <Field bottom error label='Family name' />
         </Fieldset>
@@ -202,11 +197,12 @@ import * as List from '@klarna/ui/List'`,
           <Installments
             onChange={(key) => console.log('You selected', key)}
             name='installments'
-            value='installments_24'
+            defaultValue='installments_24'
             options={[
-              { key: 'installments_6', value: '$64.17/mo.', connector: 'for', info: ' 6 months' },
-              { key: 'installments_12', value: '$32.09/mo.', connector: 'for', info: ' 12 months' },
-              { key: 'installments_24', value: '$16.05/mo.', connector: 'for', info: ' 24 months' }
+              { key: 'installments_3', content: <div>Long one line text in div</div> },
+              { key: 'installments_6', content: [<div key='1'>$64.17/mo.</div>, <div key='2'>array of elements</div>] },
+              { key: 'installments_12', content: 'Simple text content' },
+              { key: 'installments_24', content: <div><div>Force</div><div>new line</div></div> }
             ]}
           />
         </div>
@@ -216,21 +212,21 @@ import * as List from '@klarna/ui/List'`,
         </div>
 
         <div style={{paddingBottom: '20px'}}>
-          <Switch.Toggle name='fries'>
+          <Switch.Toggle name='fries-5'>
             Would you like fries?
           </Switch.Toggle>
-          <Switch.Toggle value name='fries'>
+          <Switch.Toggle defaultValue name='fries'>
             Would you like fries?
           </Switch.Toggle>
-          <FocusableThemeableCheckbox name='fries-2'>
+          <Switch.Checkbox name='fries-2'>
             Would you like fries?
-          </FocusableThemeableCheckbox>
-          <FocusableThemeableCheckbox value name='fries-3'>
+          </Switch.Checkbox>
+          <Switch.Checkbox defaultValue name='fries-3'>
             Would you like fries?
-          </FocusableThemeableCheckbox>
-          <FocusableThemeableCheckbox value error name='fries-4'>
+          </Switch.Checkbox>
+          <Switch.Checkbox defaultValue error name='fries-4'>
             Should be red
-          </FocusableThemeableCheckbox>
+          </Switch.Checkbox>
         </div>
 
         <div style={{paddingBottom: '20px'}}>

Title/Primary/index.jsx

@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
-import themeable from '../../decorators/themeable'
-import overridable from '../../decorators/overridable'
 import defaultStyles from './styles.scss'
 import palette from '../../lib/palette'
+
 import compose from 'ramda/src/compose'
+import {overridable, themeable} from '@klarna/higher-order-components'
 
 const baseClass = 'title--primary'
 

Title/Secondary/index.jsx

@@ -1,10 +1,10 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
-import themeable from '../../decorators/themeable'
-import overridable from '../../decorators/overridable'
 import defaultStyles from './styles.scss'
 import palette from '../../lib/palette'
+
 import compose from 'ramda/src/compose'
+import {overridable, themeable} from '@klarna/higher-order-components'
 
 const baseClass = 'title--secondary'