From 2f5e4982821fa94b0e02d794ab06b0a0cc516d5a Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Sat, 29 Oct 2022 16:03:36 +0800
Subject: [PATCH] [ui][badge] allow icon addon

---
 apps/storybook/stories/badge.stories.tsx | 27 ++++++++++++++++++++++++
 packages/ui/src/Badge/Badge.tsx          |  6 ++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/apps/storybook/stories/badge.stories.tsx b/apps/storybook/stories/badge.stories.tsx
index 9141d9e9..282ca86f 100644
--- a/apps/storybook/stories/badge.stories.tsx
+++ b/apps/storybook/stories/badge.stories.tsx
@@ -1,4 +1,11 @@
 import React from 'react';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  StarIcon,
+} from '@heroicons/react/20/solid';
 import type { ComponentMeta } from '@storybook/react';
 import type { BadgeVariant } from '@tih/ui';
 import { Badge } from '@tih/ui';
@@ -40,3 +47,23 @@ export function Variants() {
     </div>
   );
 }
+
+export function Icon() {
+  return (
+    <div className="space-x-4">
+      <Badge endAddOn={StarIcon} label="Primary" variant="primary" />
+      <Badge endAddOn={CheckCircleIcon} label="Success" variant="success" />
+      <Badge
+        endAddOn={InformationCircleIcon}
+        label="Information"
+        variant="info"
+      />
+      <Badge
+        endAddOn={ExclamationTriangleIcon}
+        label="Warning"
+        variant="warning"
+      />
+      <Badge endAddOn={ExclamationCircleIcon} label="Danger" variant="danger" />
+    </div>
+  );
+}
diff --git a/packages/ui/src/Badge/Badge.tsx b/packages/ui/src/Badge/Badge.tsx
index 305ee90f..3c5b2cd6 100644
--- a/packages/ui/src/Badge/Badge.tsx
+++ b/packages/ui/src/Badge/Badge.tsx
@@ -8,6 +8,7 @@ export type BadgeVariant =
   | 'warning';
 
 type Props = Readonly<{
+  endAddOn?: React.ComponentType<React.ComponentProps<'svg'>>;
   label: string;
   variant: BadgeVariant;
 }>;
@@ -41,7 +42,7 @@ const classes: Record<
   },
 };
 
-export default function Badge({ label, variant }: Props) {
+export default function Badge({ endAddOn: EndAddOn, label, variant }: Props) {
   const { backgroundClass, textClass } = classes[variant];
 
   return (
@@ -51,7 +52,8 @@ export default function Badge({ label, variant }: Props) {
         backgroundClass,
         textClass,
       )}>
-      {label}
+      <span>{label}</span>
+      {EndAddOn && <EndAddOn aria-hidden="true" className="ml-1 h-4 w-4" />}
     </span>
   );
 }