From a6fd4c4c099823bff39c2009ae8b7fd2ee128bf8 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Wed, 9 Nov 2022 12:48:26 +0800
Subject: [PATCH] [ui][badge] add startAddOn

---
 apps/storybook/stories/badge.stories.tsx | 26 +++++++++++++++++++++++-
 packages/ui/src/Badge/Badge.tsx          |  9 +++++++-
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/apps/storybook/stories/badge.stories.tsx b/apps/storybook/stories/badge.stories.tsx
index 282ca86f..d5c4ee46 100644
--- a/apps/storybook/stories/badge.stories.tsx
+++ b/apps/storybook/stories/badge.stories.tsx
@@ -48,7 +48,31 @@ export function Variants() {
   );
 }
 
-export function Icon() {
+export function StartIcon() {
+  return (
+    <div className="space-x-4">
+      <Badge label="Primary" startAddOn={StarIcon} variant="primary" />
+      <Badge label="Success" startAddOn={CheckCircleIcon} variant="success" />
+      <Badge
+        label="Information"
+        startAddOn={InformationCircleIcon}
+        variant="info"
+      />
+      <Badge
+        label="Warning"
+        startAddOn={ExclamationTriangleIcon}
+        variant="warning"
+      />
+      <Badge
+        label="Danger"
+        startAddOn={ExclamationCircleIcon}
+        variant="danger"
+      />
+    </div>
+  );
+}
+
+export function EndIcon() {
   return (
     <div className="space-x-4">
       <Badge endAddOn={StarIcon} label="Primary" variant="primary" />
diff --git a/packages/ui/src/Badge/Badge.tsx b/packages/ui/src/Badge/Badge.tsx
index 3c5b2cd6..4b9eaee9 100644
--- a/packages/ui/src/Badge/Badge.tsx
+++ b/packages/ui/src/Badge/Badge.tsx
@@ -10,6 +10,7 @@ export type BadgeVariant =
 type Props = Readonly<{
   endAddOn?: React.ComponentType<React.ComponentProps<'svg'>>;
   label: string;
+  startAddOn?: React.ComponentType<React.ComponentProps<'svg'>>;
   variant: BadgeVariant;
 }>;
 
@@ -42,7 +43,12 @@ const classes: Record<
   },
 };
 
-export default function Badge({ endAddOn: EndAddOn, label, variant }: Props) {
+export default function Badge({
+  endAddOn: EndAddOn,
+  label,
+  startAddOn: StartAddOn,
+  variant,
+}: Props) {
   const { backgroundClass, textClass } = classes[variant];
 
   return (
@@ -52,6 +58,7 @@ export default function Badge({ endAddOn: EndAddOn, label, variant }: Props) {
         backgroundClass,
         textClass,
       )}>
+      {StartAddOn && <StartAddOn aria-hidden="true" className="mr-1 h-4 w-4" />}
       <span>{label}</span>
       {EndAddOn && <EndAddOn aria-hidden="true" className="ml-1 h-4 w-4" />}
     </span>