(opportunistic) Fix Avatar and BannerNotification; Add prop descriptions

Author: vforge

source/components/Avatar/index.js

@@ -2,16 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import AvatarImage from './AvatarImage';
 import Badge from './Badge';
+import { getAvatarImage } from './utils';
 
 import './styles.scss';
 
-const getAvatarImage = (href, alt, src) => {
-    const avatarImage = <AvatarImage alt={alt} src={src} />;
-    return href ? <a href={href}>{avatarImage}</a> : avatarImage;
-};
-
 const Avatar = ({
     alt,
     badge,

source/components/Avatar/utils.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import AvatarImage from './AvatarImage';
+
+// eslint-disable-next-line
+export function getAvatarImage(href, alt, src) {
+    const avatarImage = <AvatarImage alt={alt} src={src} />;
+    return href ? <a href={href}>{avatarImage}</a> : avatarImage;
+}

source/components/AvatarStack/README.md

@@ -1,14 +1,14 @@
 Defaults:
 ```js
-<AvatarStack 
+<AvatarStack
     avatars={[{ src: 'https://static.wikia.nocookie.net/438f6e23-1a0f-4351-a34d-6f8fa734a246', alt: 'Image', link: 'some://valid.url', badge: 'admin' }, { src: 'https://static.wikia.nocookie.net/438f6e23-1a0f-4351-a34d-6f8fa734a246', alt: 'Image', link: 'some://valid.url', badge: 'staff' }, { src: 'https://static.wikia.nocookie.net/fcdbab4c-8838-487e-89fd-5f0782974edf', alt: 'Image', link: 'some://valid.url', badge: 'vstf' }]}
 />
 ```
 
 With maxStackSize
 
 ```js
-<AvatarStack 
+<AvatarStack
     avatars={[{ src: 'https://static.wikia.nocookie.net/438f6e23-1a0f-4351-a34d-6f8fa734a246', alt: 'Image', link: 'some://valid.url', badge: 'admin' }, { src: 'https://static.wikia.nocookie.net/438f6e23-1a0f-4351-a34d-6f8fa734a246', alt: 'Image', link: 'some://valid.url', badge: 'staff' }, { src: 'https://static.wikia.nocookie.net/fcdbab4c-8838-487e-89fd-5f0782974edf', alt: 'Image', link: 'some://valid.url', badge: 'vstf' }]}
     maxStackSize={2}
 />
@@ -17,17 +17,17 @@ With maxStackSize
 With hidden overflow
 
 ```js
-<AvatarStack 
+<AvatarStack
     avatars={[{ src: 'https://static.wikia.nocookie.net/438f6e23-1a0f-4351-a34d-6f8fa734a246', alt: 'Image', link: 'some://valid.url', badge: 'admin' }, { src: 'https://static.wikia.nocookie.net/438f6e23-1a0f-4351-a34d-6f8fa734a246', alt: 'Image', link: 'some://valid.url', badge: 'staff' }, { src: 'https://static.wikia.nocookie.net/fcdbab4c-8838-487e-89fd-5f0782974edf', alt: 'Image', link: 'some://valid.url', badge: 'vstf' }]}
     maxStackSize={2}
-    hideOverflow={true}
+    hideOverflow
 />
 ```
 
 With overridden counter
 
 ```js
-<AvatarStack 
+<AvatarStack
     avatars={[{ src: 'https://static.wikia.nocookie.net/438f6e23-1a0f-4351-a34d-6f8fa734a246', alt: 'Image', link: 'some://valid.url', badge: 'admin' }, { src: 'https://static.wikia.nocookie.net/438f6e23-1a0f-4351-a34d-6f8fa734a246', alt: 'Image', link: 'some://valid.url', badge: 'staff' }, { src: 'https://static.wikia.nocookie.net/fcdbab4c-8838-487e-89fd-5f0782974edf', alt: 'Image', link: 'some://valid.url', badge: 'vstf' }]}
     maxStackSize={2}
     overrideCount={6}

source/components/AvatarStack/index.js

@@ -32,10 +32,15 @@ const AvatarStack = ({ avatars, overrideCount, maxStackSize, hideOverflow, class
 };
 
 AvatarStack.propTypes = {
+    /* An array of `Avatar` props */
     avatars: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+    /* Additional class name */
     className: PropTypes.string,
+    /* Flag to hide overflow */
     hideOverflow: PropTypes.bool,
+    /* Max stack size */
     maxStackSize: PropTypes.number,
+    /* If specified, it will be used instead of `avatars.length` */
     overrideCount: PropTypes.number,
 };
 

source/components/BannerNotification/README.md

@@ -10,7 +10,7 @@ But it can be rendered with close buttton:
 
 Or with extra HTML:
 ```js
-<BannerNotification type={'alert'}onClose={() => alert('Click')}>
+<BannerNotification type={'alert'} onClose={() => alert('Click')}>
     This is a text <a href="http://example.com">with a link</a>
 </BannerNotification>
 ```

source/components/BannerNotification/index.js

@@ -2,38 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import IconCloseTiny from '../../icons/IconCloseTiny';
-import IconAlertSmall from '../../icons/IconAlertSmall';
-import IconCheckmarkSmall from '../../icons/IconCheckmarkSmall';
-import IconErrorSmall from '../../icons/IconErrorSmall';
-import IconFlagSmall from '../../icons/IconFlagSmall';
 
-import './styles.scss';
-
-function getIcon(type) {
-    switch (type) {
-        case ('alert'):
-            return <IconErrorSmall className="wds-banner-notification__icon-mark" />;
-        case ('warning'):
-            return <IconAlertSmall className="wds-banner-notification__icon-mark" />;
-        case ('success'):
-            return <IconCheckmarkSmall className="wds-banner-notification__icon-mark" />;
-        default:
-            return <IconFlagSmall className="wds-banner-notification__icon-mark" />;
-    }
-}
+import { getClassName, getIcon } from './utils';
 
-function getClassName(type) {
-    switch (type) {
-        case ('alert'):
-            return 'wds-alert';
-        case ('warning'):
-            return 'wds-warning';
-        case ('success'):
-            return 'wds-success';
-        default:
-            return 'wds-message';
-    }
-}
+import './styles.scss';
 
 /**
  * This is a single component used in `BannerNotifications` component.
@@ -48,6 +20,7 @@ const BannerNotification = ({
     </div>
 );
 
+
 BannerNotification.propTypes = {
     /** Children to display */
     children: PropTypes.node,

source/components/BannerNotification/utils.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import IconAlertSmall from '../../icons/IconAlertSmall';
+import IconCheckmarkSmall from '../../icons/IconCheckmarkSmall';
+import IconErrorSmall from '../../icons/IconErrorSmall';
+import IconFlagSmall from '../../icons/IconFlagSmall';
+
+export function getIcon(type) {
+    switch (type) {
+        case ('alert'):
+            return <IconErrorSmall className="wds-banner-notification__icon-mark" />;
+        case ('warning'):
+            return <IconAlertSmall className="wds-banner-notification__icon-mark" />;
+        case ('success'):
+            return <IconCheckmarkSmall className="wds-banner-notification__icon-mark" />;
+        default:
+            return <IconFlagSmall className="wds-banner-notification__icon-mark" />;
+    }
+}
+
+export function getClassName(type) {
+    switch (type) {
+        case ('alert'):
+            return 'wds-alert';
+        case ('warning'):
+            return 'wds-warning';
+        case ('success'):
+            return 'wds-success';
+        default:
+            return 'wds-message';
+    }
+}