@jouwomgeving/ui-avatar - npm Package Compare versions

Comparing version 0.0.1-alpha.c2964d11 to 0.0.1-alpha.cbd2d357

package.json

 {
   "name": "@jouwomgeving/ui-avatar",
-  "version": "0.0.1-alpha.c2964d11",
+  "version": "0.0.1-alpha.cbd2d357",
   "description": "",
@@ -17,4 +17,8 @@ "main": "dist/bundle.js",
     "react": "^15.2.0",
-    "react-dom": "^15.2.0"
+    "react-dom": "^15.2.0",
+    "@jouwomgeving/ui-icon": "^0.0.1-alpha.cbd2d357",
+    "@jouwomgeving/ui-popover": "^0.0.1-alpha.cbd2d357",
+    "@jouwomgeving/ui-list": "^0.0.1-alpha.cbd2d357",
+    "@jouwomgeving/ui-typography": "^0.0.1-alpha.cbd2d357"
   }
 }

src/Avatar/index.js

 import React, { PropTypes } from 'react';
 import classnames from 'classnames/bind';
-
-import { FontAwesome } from 'ui-icon';
-
+import { FontAwesome } from '@jouwomgeving/ui-icon';
 import styles from './../styles.css';
@@ -24,3 +22,5 @@
         /> :
-        <FontAwesome.FaUser size={faSizeMap[props.size]} />
+        <FontAwesome.FaUser
+          size={faSizeMap[props.size]}
+        />
       }
@@ -27,0 +27,0 @@ </div>

src/Avatar/stories/Avatar.stories.js

 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
+import Avatar from 'ui-avatar/index';
+import 'ui-icon/dist/bundle.css';
 
-import Avatar from 'ui-avatar';
-
 const settings = {
@@ -7,0 +7,0 @@ source: true,

src/Group/index.js

@@ -1,21 +0,55 @@
-import React, { PropTypes, Children } from 'react';
-import mapProps from 'recompose/mapProps';
+import React, { PropTypes, Children, cloneElement } from 'react';
+import withProps from 'recompose/withProps';
+import classNames from 'classnames/bind';
 
+import { PopOverContainer } from '@jouwomgeving/ui-popover/index';
+import { Text } from '@jouwomgeving/ui-typography/index';
+import List from '@jouwomgeving/ui-list/index';
+
 import styles from './../styles.css';
 
-const enhance = mapProps(({ children, showMax }) => {
+const cx = classNames.bind(styles);
+
+const enhance = withProps(({ children, showMax }) => {
   const childrenArray = Children.toArray(children);
   return {
-    show: childrenArray.slice(0, showMax - 1),
-    hide: childrenArray.slice(showMax - 1),
+    show: childrenArray.slice(0, showMax),
+    hide: childrenArray.slice(showMax),
   };
 });
 
-const Group = enhance(({ show, hide }) => (
-  <div className={styles.Group}>
+const Group = enhance(({ show, hide, overlap }) => (
+  <div className={cx('Group', { overlap })}>
     {show}
     {hide.length > 0 &&
-      <div>
-        {hide}
-      </div>
+      <PopOverContainer
+        content={(
+          <List.Container>
+            {hide.map(avatar => (
+              <List.Row spacing="thin">
+                <List.Cell
+                  vertical="center"
+                  size="2rem"
+                >
+                  {cloneElement(avatar, { size: 'small' })}
+                </List.Cell>
+                <List.Cell vertical="center">
+                  <Text>
+                    {avatar.props.name}
+                  </Text>
+                </List.Cell>
+              </List.Row>
+            ))}
+          </List.Container>
+        )}
+      >
+        <div className={cx('ShowMore', show[show.length - 1].props.size)}>
+          <Text
+            size="small"
+            color="link"
+          >
+            +{hide.length}
+          </Text>
+        </div>
+      </PopOverContainer>
     }
@@ -28,2 +62,3 @@ </div>
   showMax: PropTypes.number,
+  overlap: PropTypes.bool,
 };
@@ -33,2 +68,3 @@
   showMax: 3,
+  overlap: true,
 };
@@ -35,0 +71,0 @@

src/Group/stories/Group.stories.js

 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
+import Faker from 'faker';
+import times from 'lodash/times';
 
-import Avatar from 'ui-avatar';
+import Avatar from 'ui-avatar/index';
 
@@ -13,15 +15,11 @@ const settings = {
 
-const avatars = [
-  'https://placekitten.com/g/55/55',
-  'https://placekitten.com/g/56/56',
-  'https://placekitten.com/g/57/57',
-];
+function generate() {
+  return {
+    name: Faker.name.findName(),
+    src: Faker.image.avatar(),
+  };
+}
 
-const avatarsShowMax = avatars.concat([
-  'https://placekitten.com/g/55/55',
-  'https://placekitten.com/g/56/56',
-  'https://placekitten.com/g/57/57',
-  'https://placekitten.com/g/58/58',
-  'https://placekitten.com/g/59/59',
-]);
+const avatars = times(3, generate);
+const avatarsShowMax = times(8, generate);
 
@@ -36,3 +34,3 @@ storiesOf('<Avatar.Group />', module)
             size="small"
-            src={avatar}
+            {...avatar}
           />
@@ -43,3 +41,3 @@ ))}
   )
-  .addWithInfo('showMax', '',
+  .addWithInfo('Show 3 max', '',
     () => (
@@ -51,3 +49,3 @@ <Avatar.Group showMax={3}>
             size="small"
-            src={avatar}
+            {...avatar}
           />
@@ -57,2 +55,18 @@ ))}
     ), settings
+  )
+  .addWithInfo('Don\'t overlap', '',
+    () => (
+      <Avatar.Group
+        showMax={3}
+        overlap={false}
+      >
+        {avatarsShowMax.map((avatar, index) => (
+          <Avatar.default
+            key={index}
+            size="small"
+            {...avatar}
+          />
+        ))}
+      </Avatar.Group>
+    ), settings
   );

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 2 instances in 1 package

Improved metrics

Total package byte prevSize

99376

increased by780.99%

Lines of code

901

increased by219.5%

Worsened metrics

Dependency count

8

increased by100%

Number of medium supply chain risk alerts

4

increased byInfinity%

No dependency changes