added support for icons in tag components (#1853)

push-protocol · Sep 12, 2024 · 360bbfe · 360bbfe
1 parent d8ff672
commit 360bbfe
Showing 1 changed file with 25 additions and 5 deletions.
diff --git a/src/blocks/tag/Tag.tsx b/src/blocks/tag/Tag.tsx
@@ -1,22 +1,39 @@
 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});
  display: flex;
  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>
  );