@bufferapp/components - npm Package Compare versions

Comparing version 0.4.2 to 0.4.3

CHANGELOG.md

 # Changelog
 
+## 0.4.3 (March 21, 2017)
+
+- Update `MultipleImages` to have a `rounded` flag to set a border-radius on itself
+
+## 0.4.2 (March 20, 2017)
+
+- Add export of `MultipleImages` component to `index.js`
+
 ## 0.4.1 (March 16, 2017)
@@ -4,0 +12,0 @@

index.js

@@ -11,4 +11,5 @@ // if you need a component export it here
 export ListItem from './ListItem';
+export NavBar from './NavBar';
 export MultipleImages from './MultipleImages';
 export Overlay from './Overlay';
 export Text from './Text';

MultipleImages/index.jsx

 import React, { PropTypes } from 'react';
 import uuid from 'uuid';
+import { classNames } from '../lib/utils';
+import Image from '../Image';
 import styles from './style.css';
-import Image from '../Image';
 
@@ -12,6 +13,11 @@ const getImageWrapperHeight = (arrayOfImageUrls) => {
 
-const MultipleImages = ({ urls,
+const MultipleImages = ({ border,
+  height,
+  urls,
   width,
-  height,
 }) => {
+  const classes = classNames(styles, 'multipleImages', {
+    rounded: border === 'rounded',
+  });
+
   const inlineStyle = {
@@ -23,3 +29,3 @@ height,
   return (
-    <div className={styles.multipleImages} style={inlineStyle}>
+    <div className={classes} style={inlineStyle}>
       {
@@ -53,2 +59,3 @@ urls.map(url =>
 MultipleImages.propTypes = {
+  border: PropTypes.string,
   height: PropTypes.oneOfType([
@@ -55,0 +62,0 @@ PropTypes.string,

MultipleImages/story.jsx

@@ -48,3 +48,3 @@ import React from 'react';
   ))
-  .add('width=30rem,height=30rem', () => (
+  .add('width=30rem, height=30rem', () => (
     <MultipleImages
@@ -60,2 +60,15 @@ width={'30rem'}
     />
+  ))
+  .add('border=rounded', () => (
+    <MultipleImages
+      border={'rounded'}
+      width={'20rem'}
+      height={'20rem'}
+      urls={[
+        'http://lorempixel.com/400/400/cats/',
+        'http://lorempixel.com/400/400/cats/',
+        'http://lorempixel.com/400/400/cats/',
+        'http://lorempixel.com/400/400/cats/',
+      ]}
+    />
   ));

NavBar/index.jsx

 import React, { PropTypes } from 'react';
-import Icon from '../Icon';
+import BufferIcon from '../Icon/Icons/BufferIcon';
 import Text from '../Text';
@@ -8,3 +8,5 @@ import styles from './style.css';
   <div className={styles.navbar}>
-    <Icon type={'buffer'} className={styles['app-icon']} />
+    <span className={styles['app-icon']}>
+      <BufferIcon />
+    </span>
     <Text weight={'bold'}>{title}</Text>
@@ -11,0 +13,0 @@ <Text>{subtitle ? `\u00a0${subtitle}` : ''}</Text>

package.json

 {
   "name": "@bufferapp/components",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "A shared set of UI Components",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

1140971

increased by0.74%

Lines of code

3990

increased by0.68%

No dependency changes