feat(tags): Outline variant (#41)

src/components/Tag/StyledTag.tsx

@@ -22,11 +22,40 @@ const getTagVariantProp = (prop: keyof TagThemeVariant) => ({ theme, variant = v
   return theme.tag[variant][prop];
 };
 
+const getBackgroundColor = (props: ThemedProps) => {
+  if (props.outline) {
+    return "transparent";
+  }
+
+  return getTagVariantProp("background")(props);
+};
+
+const getColor = (props: ThemedProps) => {
+  const { variant = variants.PURPLE, outline } = props;
+
+  if (outline) {
+    return props.theme.tag[variant].colorOutline;
+  }
+
+  return getTagVariantProp("color")(props);
+};
+
+const getBorder = (props: ThemedProps) => {
+  const { variant = variants.PURPLE, theme, outline } = props;
+
+  if (outline) {
+    return `2px solid ${theme.tag[variant].borderColorOutline}`;
+  }
+
+  return "none";
+};
+
 export const StyledTag = styled.div<ThemedProps>`
   align-items: center;
-  background-color: ${getTagVariantProp("background")};
+  background-color: ${getBackgroundColor};
+  border: ${getBorder};
   border-radius: 16px;
-  color: ${getTagVariantProp("color")};
+  color: ${getColor};
   display: inline-flex;
   font-size: 14px;
   font-weight: 400;

src/components/Tag/index.stories.tsx

@@ -62,6 +62,23 @@ export const Default: React.FC = () => {
           Start & End Icon
         </Tag>
       </Row>
+      <Row>
+        <Tag outline>Core</Tag>
+        <Tag variant="pink" outline>
+          Community
+        </Tag>
+      </Row>
+      <Row>
+        <Tag startIcon={<CommunityIcon />} outline>
+          Core
+        </Tag>
+        <Tag startIcon={<CoreIcon />} variant="pink" outline>
+          Community
+        </Tag>
+        <Tag startIcon={<CoreIcon />} endIcon={<CoreIcon />} variant="pink" outline>
+          Start & End Icon
+        </Tag>
+      </Row>
     </>
   );
 };

src/components/Tag/index.tsx

@@ -12,6 +12,7 @@ const Tag: React.FC<TagProps> = ({ startIcon, endIcon, children, ...props }) =>
 
 Tag.defaultProps = {
   variant: variants.PURPLE,
+  outline: false,
 };
 
 export default Tag;

src/components/Tag/theme.ts

@@ -4,11 +4,15 @@ import { lightColors } from "../../theme/colors";
 const pinkTheme = {
   background: lightColors.failure,
   color: "#FFFFFF",
+  colorOutline: lightColors.failure,
+  borderColorOutline: lightColors.failure,
 };
 
 const purpleTheme = {
   background: lightColors.secondary,
   color: "#FFFFFF",
+  colorOutline: lightColors.secondary,
+  borderColorOutline: lightColors.secondary,
 };
 
 export const light: TagTheme = {

src/components/Tag/types.ts

@@ -10,6 +10,8 @@ export type Variants = typeof variants[keyof typeof variants];
 export type TagThemeVariant = {
   background: string;
   color: string;
+  colorOutline: string;
+  borderColorOutline: string;
 };
 
 export type TagTheme = {
@@ -20,4 +22,5 @@ export interface TagProps {
   variant?: Variants;
   startIcon?: ReactNode;
   endIcon?: ReactNode;
+  outline?: boolean;
 }