fix(elements): add borderColor prop in Tag component

MTES-MCT · Oct 3, 2023 · 79c5654 · 79c5654
1 parent ec178aa
commit 79c5654
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/src/elements/Tag/index.tsx b/src/elements/Tag/index.tsx
@@ -12,13 +12,15 @@ export type TagProps = HTMLAttributes<HTMLSpanElement> & {
   Icon?: FunctionComponent<IconProps> | undefined
   accent?: Accent | undefined
   backgroundColor?: string | undefined
+  borderColor?: string | undefined
   bullet?: TagBullet | undefined
   bulletColor?: string | undefined
   isLight?: boolean | undefined
 }
 export function Tag({
   accent,
   backgroundColor,
+  borderColor,
   bullet,
   bulletColor,
   children,
@@ -73,12 +75,13 @@ export function Tag({
       return <TertiaryTag {...commonProps} />
 
     default:
-      return <Box $backgroundColor={backgroundColor} $color={color} {...commonProps} />
+      return <Box $backgroundColor={backgroundColor} $borderColor={borderColor} $color={color} {...commonProps} />
   }
 }
 
 const Box = styled.span<{
   $backgroundColor?: string | undefined
+  $borderColor?: string | undefined
   $color?: string | undefined
   $isLight: boolean
 }>`
@@ -91,6 +94,7 @@ const Box = styled.span<{
 
     return p.$isLight ? p.theme.color.white : 'transparent'
   }};
+  border: ${p => (p.$borderColor ? `1px solid ${p.$borderColor}` : 'none')};
   border-radius: 11px;
   color: ${p => (p.$color ? p.$color : p.theme.color.gunMetal)};
   display: inline-flex;

diff --git a/stories/elements/Tag.stories.tsx b/stories/elements/Tag.stories.tsx
@@ -64,6 +64,9 @@ export function _Tag(props: TagProps) {
       <Tag bullet={TagBullet.DISK} bulletColor={THEME.color.mediumSeaGreen} {...normalizedProps}>
         A tag with a green bullet
       </Tag>
+      <Tag borderColor={THEME.color.slateGray} {...normalizedProps}>
+        A tag with a border
+      </Tag>
       <Tag
         backgroundColor={THEME.color.maximumRed15}
         color={THEME.color.charcoal}