From 360bbfe6fd7529d08d315ef1197939f9cddb4a32 Mon Sep 17 00:00:00 2001
From: Rohit Malhotra <rohit.malhotra1420@gmail.com>
Date: Thu, 12 Sep 2024 16:56:10 +0530
Subject: [PATCH] added support for icons in tag components (#1853)

---
 src/blocks/tag/Tag.tsx | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/blocks/tag/Tag.tsx b/src/blocks/tag/Tag.tsx
index af77617eef..aca31b42af 100644
--- a/src/blocks/tag/Tag.tsx
+++ b/src/blocks/tag/Tag.tsx
@@ -1,15 +1,16 @@
 import { getTextVariantStyles } from 'blocks/Blocks.utils';
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import styled from 'styled-components';
 
 export type TagVariant = 'default' | 'success' | 'danger' | 'warning' | 'info' | 'disabled';
 
 export type TagProps = {
+  icon?: ReactNode;
   label: string;
   variant?: TagVariant;
 };
 
-const StyledTagContainer = styled.div<{ variant: TagVariant }>`
+const StyledTagContainer = styled.div<{ variant: TagVariant; icon: TagProps['icon'] }>`
   align-items: center;
   border-radius: var(--radius-xs);
   background: var(--components-tag-background-${({ variant }) => variant});
@@ -17,6 +18,22 @@ const StyledTagContainer = styled.div<{ variant: TagVariant }>`
   gap: var(--spacing-xxxs);
   padding: var(--spacing-none) var(--spacing-xxxs);
   width: max-content;
+
+  ${({ icon }) =>
+    icon &&
+    `
+      [role='img'] {
+        width: 14px;
+        height: 14px;
+      };
+  `}
+`;
+
+const IconContainer = styled.span<{ variant: TagVariant }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--components-tag-text-${({ variant }) => variant});
 `;
 
 const StyledTagText = styled.span<{ variant: TagVariant }>`
@@ -31,10 +48,13 @@ const StyledTagIcon = styled.div<{ variant: TagVariant }>`
   width: 10px;
 `;
 
-const Tag: FC<TagProps> = ({ label, variant = 'default' }) => {
+const Tag: FC<TagProps> = ({ icon, label, variant = 'default' }) => {
   return (
-    <StyledTagContainer variant={variant}>
-      <StyledTagIcon variant={variant} />
+    <StyledTagContainer
+      variant={variant}
+      icon={!!icon}
+    >
+      {icon ? <IconContainer variant={variant}>{icon}</IconContainer> : <StyledTagIcon variant={variant} />}
       <StyledTagText variant={variant}>{label}</StyledTagText>
     </StyledTagContainer>
   );