Merge branch 'make-uncontrolled-the-default' into add-default-name-to…

…-form-components

Installments/example.jsx → BoxSelector/example.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Installments from '../Installments'
+import BoxSelector from '../BoxSelector'
 import { LIVE_WIDE } from '../Showroom/variationTypes'
 
 const options = [
@@ -10,15 +10,15 @@ const options = [
 ]
 
 export default {
-  title: 'Installments',
+  title: 'BoxSelector',
 
   examples: {
-    require: 'import Installments from \'@klarna/ui/Installments\'',
+    require: 'import BoxSelector from \'@klarna/ui/BoxSelector\'',
     type: LIVE_WIDE,
 
     examples: {
       Regular: (
-        <Installments
+        <BoxSelector
           onChange={(key) => console.log('You selected', key)}
           name='installments'
           defaultValue='installments_12'
@@ -27,7 +27,7 @@ export default {
       ),
 
       Controlled: (
-        <Installments
+        <BoxSelector
           onChange={(key) => console.log('You selected', key)}
           value='installments_24'
           focus='installments_6'

Installments/index.jsx → BoxSelector/index.jsx

@@ -11,7 +11,7 @@ import {
   uniqueName
 } from '@klarna/higher-order-components'
 
-const baseClass = 'installments'
+const baseClass = 'box-selector'
 const TRANSITION_DURATION = 500
 
 const classes = {
@@ -50,8 +50,8 @@ const calculateHighlightPosition = (selected) => {
   }
 }
 
-const Installments = React.createClass({
-  displayName: 'Installments',
+const BoxSelector = React.createClass({
+  displayName: 'BoxSelector',
 
   propTypes: {
     options: PropTypes.arrayOf(PropTypes.shape({
@@ -313,4 +313,4 @@ export default compose(
   })),
   overridable(defaultStyles),
   uniqueName
-)(Installments)
+)(BoxSelector)

Installments/styles.scss → BoxSelector/styles.scss

@@ -4,7 +4,7 @@
 $transition-duration: 500ms;
 $highlightTransitionEasing: cubic-bezier(.31,.09,.24,1);
 
-.installments {
+.box-selector {
   border: ($grid * .2) solid $border-color;
   border-radius: 5px;
   box-sizing: border-box;
@@ -24,23 +24,23 @@ $highlightTransitionEasing: cubic-bezier(.31,.09,.24,1);
     table-layout: fixed;
   }
 
-  .installments__input {
+  .box-selector__input {
     display: block;
     height: 0;
     opacity: 0;
     position: absolute;
     width: 0;
   }
 
-  .installments__row {
+  .box-selector__row {
     display: block;
 
     @include respond-to-wide {
       display: table-row;
     }
   }
 
-  .installments__cell {
+  .box-selector__cell {
     -webkit-tap-highlight-color: rgba(0,0,0,0);
     border-top: ($grid * .2) solid $border-color;
     box-sizing: border-box;
@@ -76,7 +76,7 @@ $highlightTransitionEasing: cubic-bezier(.31,.09,.24,1);
     }
   }
 
-  .installments__cell__content {
+  .box-selector__cell__content {
     @include typography(map-get($font-sizes, big-body-mobile), semi-bold);
 
     -webkit-tap-highlight-color: rgba(0,0,0,0);
@@ -93,8 +93,8 @@ $highlightTransitionEasing: cubic-bezier(.31,.09,.24,1);
     }
   }
 
-  .installments__cell.is-hovered,
-  .installments__cell.is-focused {
+  .box-selector__cell.is-hovered,
+  .box-selector__cell.is-focused {
     color: map-get($colors, klarna-blue);
   }
 
@@ -106,7 +106,7 @@ $highlightTransitionEasing: cubic-bezier(.31,.09,.24,1);
     }
   }
 
-  .installments__cell__highlight {
+  .box-selector__cell__highlight {
     border: ($grid * .4) solid map-get($colors, klarna-blue);
     border-radius: 5px;
     box-sizing: border-box;

Radio/example.jsx

@@ -3,7 +3,7 @@ import Radio from '../Radio'
 import * as Checklist from '../Checklist'
 import * as Paragraph from '../Paragraph'
 import { LIVE_WIDE } from '../Showroom/variationTypes'
-import Installments from '../Installments'
+import BoxSelector from '../BoxSelector'
 import Dropdown from '../Dropdown'
 import Subtitle from '../Subtitle'
 
@@ -37,7 +37,7 @@ const optionsWithContent = [
     label: 'Sit',
     description: 'Amet et consequetur',
     content: <div>
-      <Installments
+      <BoxSelector
         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'}]}
         defaultValue='installments_6'

Showroom/examples/components.js

@@ -1,5 +1,6 @@
 export Alert from '../../Alert/example'
 export Block from '../../Block/example'
+export BoxSelector from '../../BoxSelector/example'
 export Button from '../../Button/example'
 export Checklist from '../../Checklist/example'
 export ContextMenu from '../../ContextMenu/example'
@@ -9,7 +10,6 @@ export Field from '../../Field/example'
 export Fieldset from '../../Fieldset/example'
 export Icons from '../../icons/example'
 export Input from '../../Input/example'
-export Installments from '../../Installments/example'
 export Label from '../../Label/example'
 export List from '../../List/example'
 export Loader from '../../Loader/example'

Showroom/examples/compositions/UncontrolledForm.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
+import BoxSelector from '../../../BoxSelector'
 import Fieldset from '../../../Fieldset'
 import Dropdown from '../../../Dropdown'
 import Field from '../../../Field'
 import * as Switch from '../../../Switch'
 import * as Button from '../../../Button'
 import * as Selector from '../../../Selector'
 import * as Menu from '../../../Menu'
-import Installments from '../../../Installments'
 import Radio from '../../../Radio'
 import Subtitle from '../../../Subtitle'
 import * as Paragraph from '../../../Paragraph'
@@ -35,7 +35,7 @@ const optionsWithContent = [
     label: 'Sit',
     description: 'Amet et consequetur',
     content: <div>
-      <Installments
+      <BoxSelector
         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'
@@ -148,7 +148,7 @@ export default {
 
         <Fieldset margins>
           <Subtitle>How many installments do you want to have?</Subtitle>
-          <Installments
+          <BoxSelector
             name='installments'
             options={[
               {

Theme/example.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import Fieldset from '../Fieldset'
 import Theme from '../Theme'
+import BoxSelector from '../BoxSelector'
 import * as Button from '../Button'
 import * as Checklist from '../Checklist'
 import Dropdown from '../Dropdown'
 import Field from '../Field'
 import * as FieldVariant from '../Field'
-import Installments from '../Installments'
 import Link from '../Link'
 import * as Switch from '../Switch'
 import * as Title from '../Title'
@@ -39,7 +39,7 @@ const optionsWithContent = [
     label: 'Sit',
     description: 'Amet et consequetur',
     content: <div>
-      <Installments
+      <BoxSelector
         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'}]}
         defaultValue='installments_6'
@@ -77,12 +77,12 @@ export default {
 
   examples: {
     require: `import Theme from '@klarna/ui/Theme'
+import BoxSelector from '@klarna/ui/BoxSelector'
 import * as Button from '@klarna/ui/Button'
 import * as Checklist from '@klarna/ui/Checklist'
 import Dropdown from '@klarna/ui/Dropdown'
 import * as Field from '@klarna/ui/Field'
 import Field from '@klarna/ui/Field'
-import Installments from '@klarna/ui/Installments'
 import Link from '@klarna/ui/Link'
 import * as Switch from '@klarna/ui/Switch'
 import * as Title from '@klarna/ui/Title'
@@ -191,7 +191,7 @@ import * as List from '@klarna/ui/List'`,
         </Fieldset>
 
         <div style={{paddingBottom: '20px'}}>
-          <Installments
+          <BoxSelector
             onChange={(key) => console.log('You selected', key)}
             defaultValue='installments_24'
             options={[

index.js

@@ -1,6 +1,7 @@
 import * as TheAlert from './Alert'
 export { default as Amount } from './Amount'
 import * as TheBlock from './Block'
+export { default as BoxSelector } from './BoxSelector'
 import * as TheButton from './Button'
 import * as TheChecklist from './Checklist'
 import * as TheContextMenu from './ContextMenu'
@@ -11,7 +12,6 @@ export { default as Fieldset } from './Fieldset'
 import * as TheIconButton from './IconButton'
 import * as TheIcons from './icons'
 export { default as Input } from './Input'
-export { default as Installments } from './Installments'
 export { default as Label } from './Label'
 export { default as Link } from './Link'
 export { default as Loader } from './Loader'