feat: Add utility icon to IconBadge (#534)

src/components/IconBadge/IconBadge.css

@@ -6,6 +6,7 @@
   border-radius: 5px;
   cursor: pointer;
   background-color: #37333d;
+  min-height: 24px;
 }
 
 .dui-icon-badge .text {
@@ -16,13 +17,12 @@
 .dui-icon-badge .dui-icon-badge__icon {
   width: 13px;
   height: 13px;
-  margin-right: 10px;
   background-position: center;
   background-repeat: no-repeat;
 }
 
-.dui-icon-badge .dui-icon-badge__custom-icon {
-  margin-right: 10px;
+.dui-icon-badge > span:nth-child(2) {
+  margin-left: 10px;
 }
 
 /* Icons */
@@ -112,6 +112,10 @@
   background-image: url(../../images/wearables/HandsIcon.svg);
 }
 
+.dui-icon-badge .utility {
+  background-image: url(../../images/wearables/utility.svg);
+}
+
 .dui-icon-badge .play-once {
   background-image: url(../../images/emotes/play-once.svg);
   width: 19px;

src/components/IconBadge/IconBadge.stories.tsx

@@ -5,8 +5,8 @@ import { IconBadge } from './IconBadge'
 storiesOf('IconBadge', module)
   .add('With Icon', () => (
     <IconBadge
-      icon="BaseMale"
-      text="Male Icon"
+      icon="utility"
+      text="Utility"
       onClick={() => console.log('Clicked!')}
     />
   ))
@@ -15,6 +15,9 @@ storiesOf('IconBadge', module)
       <div>Custom Icon Component</div>
     </IconBadge>
   ))
+  .add('Without text', () => (
+    <IconBadge icon="BaseFemale" onClick={() => console.log('Clicked!')} />
+  ))
   .add('Without Icon', () => (
     <IconBadge text="No Icon" onClick={() => console.log('Clicked!')} />
   ))

src/components/IconBadge/IconBadge.tsx

@@ -13,20 +13,20 @@ export const IconBadge = ({
   const childrenInt = React.useMemo(
     () => (
       <>
-        {children ? (
+        {children && icon ? (
           <span className="dui-icon-badge__custom-icon">{children}</span>
-        ) : (
+        ) : icon ? (
           <span className={classNames(icon && 'dui-icon-badge__icon', icon)} />
-        )}
-        <span className="text">{text}</span>
+        ) : null}
+        {text ? <span className="text">{text}</span> : null}
       </>
     ),
     [children, icon, text]
   )
 
   return (
-    <div className={classNames('dui-icon-badge', className)} onClick={onClick}>
+    <span className={classNames('dui-icon-badge', className)} onClick={onClick}>
       {childrenInt}
-    </div>
+    </span>
   )
 }

src/components/IconBadge/IconBadge.types.ts

@@ -31,7 +31,8 @@ export type Props = {
     | 'props'
     | 'sparkles'
     | 'places'
-  text: string
+    | 'utility'
+  text?: string
   onClick?: () => void
   children?: React.ReactNode
 }