Merge branch 'master' into make-uncontrolled-the-default

.gitignore

@@ -2,3 +2,12 @@ node_modules
 npm-debug.log
 .idea/
 yarn-error.log
+*.woff
+*.eot
+*.woff2
+*.ttf
+example-built.js
+example-built.js.map
+index-built.js
+index-built.js.map
+index.html

.npmignore

@@ -3,3 +3,10 @@ karma.conf.js
 webpack.config.js
 webpack.config.test.js
 tests
+*.woff
+*.eot
+*.woff2
+*.ttf
+example-built.js
+example-built.js.map
+browserslist

.sass-lint.yml

@@ -35,6 +35,7 @@ rules:
   no-debug: 1
   no-ids: 2
   no-important: 0
+  no-transition-all: 2
   hex-notation:
     - 2
     -

.travis.yml

@@ -1,10 +1,9 @@
 language: node_js
 node_js:
 - '6'
-before_script:
-- npm install
 script:
 - npm test
+- curl -O https://raw.githubusercontent.com/danvk/travis-weigh-in/master/weigh_in.py && python weigh_in.py index-built.js
 deploy:
   provider: npm
   email: ui-admin.e@klarna.com

Alert/index.jsx

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
 import defaultStyles from './styles.scss'
+import childrenPropType from '../propTypes/children'
 
 const baseClass = 'alert'
 
@@ -26,8 +27,9 @@ export function Error ({ children, className, styles, ...remainingProps }) {
 Error.displayName = 'Alert.Error'
 
 Error.propTypes = {
-  children: PropTypes.node,
+  children: childrenPropType,
   className: PropTypes.string,
+  id: PropTypes.string,
   styles: PropTypes.object
 }
 
@@ -46,8 +48,9 @@ export function Warning ({ children, className, styles, ...remainingProps }) {
 Warning.displayName = 'Alert.Warning'
 
 Warning.propTypes = {
-  children: PropTypes.node,
+  children: childrenPropType,
   className: PropTypes.string,
+  id: PropTypes.string,
   styles: PropTypes.object
 }
 
@@ -66,8 +69,9 @@ export function Title ({ children, className, styles, ...remainingProps }) {
 Title.displayName = 'Alert.Title'
 
 Title.propTypes = {
-  children: PropTypes.node,
+  children: childrenPropType,
   className: PropTypes.string,
+  id: PropTypes.string,
   styles: PropTypes.object
 }
 
@@ -86,7 +90,8 @@ export function Paragraph ({ children, className, styles, ...remainingProps }) {
 Paragraph.displayName = 'Alert.Paragraph'
 
 Paragraph.propTypes = {
-  children: PropTypes.node,
+  children: childrenPropType,
   className: PropTypes.string,
+  id: PropTypes.string,
   styles: PropTypes.object
 }

Amount/index.jsx

@@ -2,6 +2,7 @@ import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
 import defaultStyles from './styles.scss'
 import palette from '../lib/palette'
+import childrenPropType from '../propTypes/children'
 
 const baseClass = 'amount-text'
 
@@ -23,7 +24,8 @@ Amount.defaultProps = {
 
 Amount.propTypes = {
   color: PropTypes.oneOf(palette),
-  children: PropTypes.node,
+  children: childrenPropType,
   className: PropTypes.string,
+  id: PropTypes.string,
   styles: PropTypes.object
 }

Block/Content/index.jsx

@@ -1,15 +1,23 @@
-import React from 'react'
+import React, {PropTypes} from 'react'
 import classNamesBind from 'classnames/bind'
 import defaultStyles from './styles.scss'
+import childrenPropType from '../../propTypes/children'
 
 const baseClass = 'block--content'
 
-export default function Content ({ children, styles, ...props }) {
+export default function Content ({ children, className, styles, ...props }) {
   const classNames = classNamesBind.bind({ ...defaultStyles, ...styles })
 
-  return (<div className={classNames(baseClass)} {...props}>
+  return (<div className={classNames(baseClass, className)} {...props}>
     {children}
   </div>)
 }
 
 Content.displayName = 'Block.Content'
+
+Content.propTypes = {
+  children: childrenPropType,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  styles: PropTypes.object
+}

Block/Installments/index.jsx

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
 import defaultStyles from './styles.scss'
+import childrenPropType from '../../propTypes/children'
 
 const baseClass = 'block--installments'
 
@@ -27,7 +28,8 @@ Main.displayName = 'Block.Installments.Main'
 
 Main.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.node,
+  children: childrenPropType,
+  id: PropTypes.string,
   styles: PropTypes.object
 }
 
@@ -45,7 +47,8 @@ Title.displayName = 'Block.Installments.Title'
 
 Title.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.node,
+  children: childrenPropType,
+  id: PropTypes.string,
   styles: PropTypes.object
 }
 
@@ -63,23 +66,40 @@ Content.displayName = 'Block.Installments.Content'
 
 Content.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.node,
+  children: childrenPropType,
+  id: PropTypes.string,
   styles: PropTypes.object
 }
 
-export function Value ({ className, clarification, children, title, styles, value, ...props }) {
+export function Value ({ className, clarification, children, id, title, styles, value, ...props }) {
   const classNames = classNamesBind.bind({ ...defaultStyles, ...styles })
 
+  const ids = id
+    ? {
+      content: `${id}__content`,
+      clarification: `${id}__clarification`,
+      title: `${id}__title`
+    } : {}
+
   return (
-    <div className={classNames(classes.value, className)} {...props}>
-      <div className={classNames(classes.valueTitle)}>
+    <div
+      className={classNames(classes.value, className)}
+      id={id}
+      {...props}>
+      <div
+        className={classNames(classes.valueTitle)}
+        id={ids.title}>
         {title}
       </div>
 
-      <div className={classNames(classes.valueContent)}>
+      <div
+        className={classNames(classes.valueContent)}
+        id={ids.content}>
         {value}
         {clarification && (
-          <span className={classNames(classes.valueContentClarification)}>
+          <span
+            className={classNames(classes.valueContentClarification)}
+            id={ids.clarification}>
             {clarification}
           </span>
         )}
@@ -93,8 +113,9 @@ Value.displayName = 'Block.Installments.Value'
 Value.propTypes = {
   clarification: PropTypes.string,
   className: PropTypes.string,
-  children: PropTypes.node,
+  children: childrenPropType,
+  id: PropTypes.string,
   title: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  styles: PropTypes.object
+  styles: PropTypes.object,
+  value: PropTypes.string.isRequired
 }

Block/Plain/index.jsx

@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react'
 import classNamesBind from 'classnames/bind'
 import defaultStyles from './styles.scss'
+import childrenPropType from '../../propTypes/children'
 
 const baseClass = 'block'
 
@@ -20,7 +21,8 @@ Plain.displayName = 'Block.Plain'
 
 Plain.propTypes = {
   blue: PropTypes.bool,
-  children: PropTypes.node,
+  children: childrenPropType,
   className: PropTypes.string,
+  id: PropTypes.string,
   styles: PropTypes.object
 }

Block/example.jsx

@@ -12,7 +12,9 @@ export default {
 
     examples: {
       Regular: <Block.Installments.Main>
-        <Block.Installments.Title>Your Installments</Block.Installments.Title>
+        <Block.Installments.Title>
+          Your Installments
+        </Block.Installments.Title>
         <Block.Installments.Content>
           <Block.Installments.Value
             title='Estimated total'