fix(elements): add backgroundColor prop and fix icon size in Tag comp…

…onent
MTES-MCT · Oct 3, 2023 · ec178aa · ec178aa
1 parent 576c5a1
commit ec178aa
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 10 deletions.
diff --git a/src/elements/Tag/index.tsx b/src/elements/Tag/index.tsx
@@ -11,12 +11,14 @@ import type { IconProps } from '../../types'
 export type TagProps = HTMLAttributes<HTMLSpanElement> & {
   Icon?: FunctionComponent<IconProps> | undefined
   accent?: Accent | undefined
+  backgroundColor?: string | undefined
   bullet?: TagBullet | undefined
   bulletColor?: string | undefined
   isLight?: boolean | undefined
 }
 export function Tag({
   accent,
+  backgroundColor,
   bullet,
   bulletColor,
   children,
@@ -41,8 +43,9 @@ export function Tag({
 
     return (
       <>
-        {Icon && <Icon size={1} />}
-        {bullet === TagBullet.DISK && <Disk $color={controlledBulletColor} />}
+        {/* Refactor when bullet will be a real icon */}
+        {Icon && !bullet && <Icon size={16} />}
+        {bullet === TagBullet.DISK && !Icon && <Disk $color={controlledBulletColor} />}
 
         {children}
       </>
@@ -70,16 +73,24 @@ export function Tag({
       return <TertiaryTag {...commonProps} />
 
     default:
-      return <Box $color={color} {...commonProps} />
+      return <Box $backgroundColor={backgroundColor} $color={color} {...commonProps} />
   }
 }
 
 const Box = styled.span<{
+  $backgroundColor?: string | undefined
   $color?: string | undefined
   $isLight: boolean
 }>`
-  align-items: center;
-  background-color: ${p => (p.$isLight ? p.theme.color.white : 'transparent')};
+  align-items: end;
+  align-self: flex-start;
+  background-color: ${p => {
+    if (p.$backgroundColor) {
+      return p.$backgroundColor
+    }
+
+    return p.$isLight ? p.theme.color.white : 'transparent'
+  }};
   border-radius: 11px;
   color: ${p => (p.$color ? p.$color : p.theme.color.gunMetal)};
   display: inline-flex;
@@ -111,7 +122,7 @@ export const PrimaryTag = styled(Box)<{
 export const SecondaryTag = styled(Box)<{
   $isLight: boolean
 }>`
-  background-color: ${p => (p.$isLight ? '#f6d012' : '#f6d012')};
+  background-color: ${p => (p.$isLight ? p.theme.color.goldenPoppy : p.theme.color.goldenPoppy)};
   color: ${p => p.theme.color.gunMetal};
 `
 

diff --git a/stories/elements/Tag.stories.tsx b/stories/elements/Tag.stories.tsx
@@ -1,6 +1,8 @@
+import styled from 'styled-components'
+
 import { generateStoryDecorator } from '../../.storybook/components/StoryDecorator'
 import { getEnumValuesWithUndefined, getUndefinedPropsFromUndefinedStringProps } from '../../.storybook/utils'
-import { Accent, Tag, TagBullet } from '../../src'
+import { Accent, Icon, THEME, Tag, TagBullet } from '../../src'
 
 import type { TagProps } from '../../src'
 import type { Meta } from '@storybook/react'
@@ -25,6 +27,12 @@ const meta: Meta<TagProps> = {
     },
     bulletColor: {
       control: 'color'
+    },
+    color: {
+      control: 'color'
+    },
+    backgroundColor: {
+      control: 'color'
     }
   },
 
@@ -43,8 +51,33 @@ export function _Tag(props: TagProps) {
   const normalizedProps = getUndefinedPropsFromUndefinedStringProps(props)
 
   return (
-    <>
-      <Tag {...normalizedProps} />
-    </>
+    <TagsContainer>
+      <Tag accent={Accent.PRIMARY} {...normalizedProps}>
+        A primary tag
+      </Tag>
+      <Tag accent={Accent.SECONDARY} {...normalizedProps}>
+        A secondary tag
+      </Tag>
+      <Tag accent={Accent.TERTIARY} {...normalizedProps}>
+        A tertiary tag
+      </Tag>
+      <Tag bullet={TagBullet.DISK} bulletColor={THEME.color.mediumSeaGreen} {...normalizedProps}>
+        A tag with a green bullet
+      </Tag>
+      <Tag
+        backgroundColor={THEME.color.maximumRed15}
+        color={THEME.color.charcoal}
+        Icon={Icon.Link}
+        {...normalizedProps}
+      >
+        A tag with custom colors and icon
+      </Tag>
+    </TagsContainer>
   )
 }
+
+const TagsContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`