feat(avatars): add hide plus button prop to component

8base · Jan 25, 2021 · ac1a5b6 · ac1a5b6
1 parent ace2104
commit ac1a5b6
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/components/Avatars/Avatars.js b/src/components/Avatars/Avatars.js
@@ -19,6 +19,7 @@ type AvatarsProps = {
   onAvatarsClick?: Function,
   onCounterClick?: Function,
   onPlusClick?: Function,
+  withPlusButton?: boolean,
 };
 
 const tooltipClassName = css`
@@ -38,6 +39,7 @@ const Avatars = ({
   onAvatarsClick,
   onCounterClick,
   onPlusClick,
+  withPlusButton,
   ...rest
 }: AvatarsProps) => {
   return (
@@ -61,9 +63,12 @@ const Avatars = ({
       <If condition={ users.length > 4 }>
         <AvatarsCounterTag onClick={ onCounterClick } size={ size }>+ { users.length - 4 }</AvatarsCounterTag>
       </If>
-      <AvatarsHandleTag onClick={ onPlusClick } size={ size }>
-        <Icon name="Plus" size="xs" color="PRIMARY" />
-      </AvatarsHandleTag>
+
+      <If condition={ !!withPlusButton } >
+        <AvatarsHandleTag onClick={ onPlusClick } size={ size }>
+          <Icon name="Plus" size="xs" color="PRIMARY" />
+        </AvatarsHandleTag>
+      </If>
     </AvatarsTag>
   );
 };

diff --git a/src/components/Avatars/Avatars.stories.js b/src/components/Avatars/Avatars.stories.js
@@ -20,8 +20,8 @@ export default {
 
 export const common = () => (
   <Column gap="lg">
-    <Avatars size="md" users={ USERS } />
-    <Avatars users={ USERS } />
+    <Avatars size="md" users={ USERS } withPlusButton />
+    <Avatars users={ USERS } withPlusButton />
   </Column>
 );