refactor: update tag component to have optional icon if needed. (#218)

konstructio · Jul 27, 2023 · 421d7ff · 421d7ff
1 parent d3466f4
commit 421d7ff
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 7 deletions.
diff --git a/assets/auto-renew.svg b/assets/auto-renew.svg
diff --git a/assets/check-circle.svg b/assets/check-circle.svg
diff --git a/assets/trash.svg b/assets/trash.svg
diff --git a/assets/warning.svg b/assets/warning.svg
diff --git a/components/tag/index.tsx b/components/tag/index.tsx
@@ -1,6 +1,12 @@
 import React, { FunctionComponent } from 'react';
 
-import { TagContainer } from './tag.styled';
+import Typography from '../typography';
+import checkImageSrc from '../../assets/check-circle.svg';
+import autoRenewImageSrc from '../../assets/auto-renew.svg';
+import trashImageSrc from '../../assets/trash.svg';
+import warningImageSrc from '../../assets/warning.svg';
+
+import { TagContainer, IconImage } from './tag.styled';
 
 export const TAG_COLOR_OPTIONS = [
   'neon-green',
@@ -14,16 +20,25 @@ export const TAG_COLOR_OPTIONS = [
   'green',
 ] as const;
 
+export const TAG_ICON_OPTONS = {
+  'check': checkImageSrc,
+  'auto-renew': autoRenewImageSrc,
+  'trash': trashImageSrc,
+  'warning': warningImageSrc,
+};
+
 export type TagColor = (typeof TAG_COLOR_OPTIONS)[number];
 
 export interface TagProps {
   text: string;
   bgColor?: TagColor;
+  icon?: keyof typeof TAG_ICON_OPTONS;
 }
 
-const Tag: FunctionComponent<TagProps> = ({ text, ...rest }) => (
-  <TagContainer {...rest} variant="body3">
-    {text}
+const Tag: FunctionComponent<TagProps> = ({ text, icon, ...rest }) => (
+  <TagContainer {...rest}>
+    {icon && <IconImage src={TAG_ICON_OPTONS[icon]} alt={icon} width={16} height={16} />}
+    <Typography variant="body3">{text}</Typography>
   </TagContainer>
 );
 

diff --git a/components/tag/tag.stories.tsx b/components/tag/tag.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Story } from '@storybook/react';
 
-import Tag, { TAG_COLOR_OPTIONS, TagProps } from '.';
+import Tag, { TAG_COLOR_OPTIONS, TagProps, TAG_ICON_OPTONS } from '.';
 
 export default {
   title: 'Components/Tag',
@@ -11,6 +11,10 @@ export default {
       control: 'select',
       options: TAG_COLOR_OPTIONS,
     },
+    icon: {
+      control: 'radio',
+      options: Object.keys(TAG_ICON_OPTONS),
+    },
   },
 };
 

diff --git a/components/tag/tag.styled.ts b/components/tag/tag.styled.ts
@@ -1,10 +1,11 @@
 import styled, { css } from 'styled-components';
+import Image from 'next/image';
 
-import Typography, { ITypographyProps } from '../typography';
+import Row from '../row/';
 
 import { TagColor } from '.';
 
-export const TagContainer = styled(Typography)<{ bgColor?: TagColor } & ITypographyProps>`
+export const TagContainer = styled(Row)<{ bgColor?: TagColor }>`
   border-radius: 4px;
   padding: 4px;
   text-transform: capitalize;
@@ -60,3 +61,7 @@ export const TagContainer = styled(Typography)<{ bgColor?: TagColor } & ITypogra
           color: #71717a;
         `}
 `;
+
+export const IconImage = styled(Image)`
+  margin-right: 4px;
+`;