Add icon to badge component

appearhere · Jul 31, 2020 · 74e6abf · 74e6abf
1 parent a994e3b
commit 74e6abf
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/packages/core/src/components/Badge/Badge.css b/packages/core/src/components/Badge/Badge.css
@@ -39,3 +39,7 @@
   color: var(--color-black);
   border-color: currentColor;
 }
+
+.icon {
+  padding-right: var(--size-micro);
+}
diff --git a/packages/core/src/components/Badge/Badge.js b/packages/core/src/components/Badge/Badge.js
@@ -1,6 +1,7 @@
 // @flow
 import React from 'react';
 import classNames from 'classnames/bind';
+import Icon from '../Icon/Icon';
 
 import css from './Badge.css';
 
@@ -11,10 +12,12 @@ type Props = {
   children: any,
   context: 'primary' | 'special',
   hollow?: boolean,
+  icon?: string,
 }
 
-const Badge = ({ className, children, context, hollow, ...rest }: Props) => (
+const Badge = ({ className, children, context, hollow, icon, ...rest }: Props) => (
   <span {...rest} className={cx(css.root, css[context], hollow ? css.hollow : null, className)}>
+    {icon && <Icon className={css.icon} name={icon}/>}
     {children}
   </span>
 );

diff --git a/packages/playground/stories/Badge.story.js b/packages/playground/stories/Badge.story.js
@@ -16,4 +16,9 @@ storiesOf('Badge', module)
     <Badge context="special" hollow>
       Collection
     </Badge>
+  ))
+  .add('With icon', () => (
+    <Badge icon="price-tag">
+      50% Discount
+    </Badge>
   ));