From 74e6abf261a3cb81a87a35221b9170ae8abbe685 Mon Sep 17 00:00:00 2001
From: Janie Amero <janie.amero@gmail.com>
Date: Thu, 30 Jul 2020 09:42:48 +0100
Subject: [PATCH] Add icon to badge component

---
 packages/core/src/components/Badge/Badge.css | 4 ++++
 packages/core/src/components/Badge/Badge.js  | 5 ++++-
 packages/playground/stories/Badge.story.js   | 5 +++++
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/Badge/Badge.css b/packages/core/src/components/Badge/Badge.css
index 00c162c91..8fe92e4d0 100644
--- 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
index 00ec9d1e7..a779156d5 100644
--- 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
index da4065ace..c1fe0f541 100644
--- 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>
   ));