Adds component Block.Bordered

Adds component Block.Bordered. A simple component that provides a bordered block with the primary use-case to show text.

Block/Bordered/index.jsx

@@ -0,0 +1,60 @@
+import React, { PropTypes } from 'react'
+import compose from 'ramda/src/compose'
+import classNamesBind from 'classnames/bind'
+import childrenPropType from '../../propTypes/children'
+import defaultStyles from './styles.scss'
+import {
+  overridable,
+  themeable
+} from '@klarna/higher-order-components'
+
+const baseClass = 'block--bordered'
+
+function Bordered (props) {
+  const {
+    children,
+    className,
+    customize,
+    style,
+    styles,
+    ...remainingProps
+  } = props
+  const classNames = classNamesBind.bind({ ...defaultStyles, ...styles })
+
+  const customizations = customize
+    ? {
+      borderRadius: customize.borderRadius
+    } : {}
+
+  return (
+    <div
+      className={classNames(baseClass, className)}
+      style={{
+        ...customizations,
+        ...style
+      }}
+      {...remainingProps}
+    >
+      {children}
+    </div>
+  )
+}
+
+Bordered.displayName = 'Block.Bordered'
+
+Bordered.propTypes = {
+  children: childrenPropType,
+  className: PropTypes.string,
+  id: PropTypes.string,
+  styles: PropTypes.object
+}
+
+export default compose(
+  themeable((customizations, {customize}) => ({
+    customize: {
+      borderRadius: customizations.radius_border,
+      ...customize
+    }
+  })),
+  overridable(defaultStyles)
+)(Bordered)

Block/Bordered/styles.scss

@@ -0,0 +1,14 @@
+@import '../../css/settings';
+@import '../../css/mixins/index';
+
+.block--bordered {
+  background: map-get($colors, white);
+  border: ($grid * .2) solid $border-color;
+  border-radius: $border-radius;
+  box-sizing: border-box;
+  display: block;
+  margin: 0 auto;
+  max-width: ($grid * 128);
+  overflow: auto;
+  padding: ($grid * 1.8) ($grid * 3);
+}

Block/example.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import * as Block from '../Block'
-import { Primary as Paragraph } from '../Paragraph'
+import * as Paragraph from '../Paragraph'
 import { LIVE } from '../Showroom/variationTypes'
 
 export default {
@@ -31,11 +31,23 @@ export default {
 
       'Left-Aligned': <Block.Installments.Main leftAlign>
         <Block.Installments.Content>
-          <Paragraph>
+          <Paragraph.Primary>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at aliquet leo.
-          </Paragraph>
+          </Paragraph.Primary>
         </Block.Installments.Content>
-      </Block.Installments.Main>
+      </Block.Installments.Main>,
+
+      'Bordered': <Block.Bordered>
+        <Paragraph.Secondary>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at aliquet leo.
+        </Paragraph.Secondary>
+      </Block.Bordered>,
+
+      'Custom-bordered': <Block.Bordered style={{borderRadius: 0}}>
+        <Paragraph.Secondary>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at aliquet leo.
+        </Paragraph.Secondary>
+      </Block.Bordered>
     }
   }
 }

Block/index.jsx

@@ -2,3 +2,4 @@ import * as TheInstallments from './Installments'
 export const Installments = TheInstallments
 export { default as Content } from './Content'
 export { default as Plain } from './Plain'
+export { default as Bordered } from './Bordered'

Theme/example.jsx

@@ -14,6 +14,7 @@ import Subtitle from '../Subtitle'
 import * as Paragraph from '../Paragraph'
 import * as Selector from '../Selector'
 import * as List from '../List'
+import * as Block from '../Block'
 import { Back, Hamburger } from '../IconButton'
 import { LIVE } from '../Showroom/variationTypes'
 
@@ -85,6 +86,7 @@ import Field from '@klarna/ui/Field'
 import Link from '@klarna/ui/Link'
 import * as Switch from '@klarna/ui/Switch'
 import * as Title from '@klarna/ui/Title'
+import * as Block from '@klarna/ui/Block'
 import Radio from '@klarna/ui/Radio'
 import Subtitle from '@klarna/ui/Subtitle'
 import * as Paragraph from '@klarna/ui/Paragraph'
@@ -176,6 +178,14 @@ import * as List from '@klarna/ui/List'`,
           </Checklist.Main>
         </div>
 
+        <div style={{padding: '20px 0'}}>
+          <Block.Bordered>
+            <Paragraph.Secondary>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris at aliquet leo.
+            </Paragraph.Secondary>
+          </Block.Bordered>
+        </div>
+
         <div style={{padding: '20px 0'}}>
           <Radio
             onChange={(key) => console.log(key)}