Feature/tag colors (#67)

* build: Updated storybook

* feat(tag): Green and gray theme

* fix: Link export

package.json

@@ -32,11 +32,11 @@
     "@commitlint/config-conventional": "^11.0.0",
     "@pancakeswap-libs/eslint-config-pancake": "0.1.0",
     "@rollup/plugin-typescript": "^6.0.0",
-    "@storybook/addon-a11y": "^6.0.28",
-    "@storybook/addon-actions": "^6.0.28",
-    "@storybook/addon-essentials": "^6.0.28",
-    "@storybook/addon-links": "^6.0.28",
-    "@storybook/react": "^6.0.28",
+    "@storybook/addon-a11y": "^6.1.5",
+    "@storybook/addon-actions": "^6.1.5",
+    "@storybook/addon-essentials": "^6.1.5",
+    "@storybook/addon-links": "^6.1.5",
+    "@storybook/react": "^6.1.5",
     "@types/react": "^16.9.52",
     "@types/react-router-dom": "^5.1.6",
     "@types/styled-components": "^5.1.4",

src/components/Flex/index.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Flex from "./index";
 import Text from "../Text";
-import Link from "../Link";
+import { Link } from "../Link";
 
 export default {
   title: "Flex",

src/components/Tag/StyledTag.tsx

@@ -62,6 +62,7 @@ export const StyledTag = styled.div<ThemedProps>`
   height: 28px;
   line-height: 1.5;
   padding: 0 8px;
+
   svg {
     fill: ${getColor};
   }

src/components/Tag/index.stories.tsx

@@ -52,30 +52,38 @@ export const Default: React.FC = () => {
       <Row>
         <Tag>Core</Tag>
         <Tag variant="pink">Community</Tag>
+        <Tag variant="green">Available</Tag>
+        <Tag variant="gray">Gray</Tag>
       </Row>
       <Row>
-        <Tag startIcon={<CommunityIcon />}>Core</Tag>
-        <Tag startIcon={<CoreIcon />} variant="pink">
+        <Tag outline>Core</Tag>
+        <Tag variant="pink" outline>
           Community
         </Tag>
-        <Tag startIcon={<CoreIcon />} endIcon={<CoreIcon />} variant="pink">
-          Start & End Icon
+        <Tag variant="green" outline>
+          Available
+        </Tag>
+        <Tag variant="gray" outline>
+          Gray
         </Tag>
       </Row>
       <Row>
-        <Tag outline>Core</Tag>
-        <Tag variant="pink" outline>
-          Community
+        <Tag startIcon={<CommunityIcon />}>Start Icon</Tag>
+        <Tag startIcon={<CoreIcon />} variant="pink">
+          End Icon
+        </Tag>
+        <Tag startIcon={<CoreIcon />} endIcon={<CoreIcon />} variant="pink">
+          Start & End Icon
         </Tag>
       </Row>
       <Row>
-        <Tag startIcon={<CommunityIcon />} outline>
-          Core
+        <Tag outline startIcon={<CommunityIcon />}>
+          Start Icon
         </Tag>
-        <Tag startIcon={<CoreIcon />} variant="pink" outline>
-          Community
+        <Tag outline startIcon={<CoreIcon />} variant="pink">
+          End Icon
         </Tag>
-        <Tag startIcon={<CoreIcon />} endIcon={<CoreIcon />} variant="pink" outline>
+        <Tag outline startIcon={<CoreIcon />} endIcon={<CoreIcon />} variant="pink">
           Start & End Icon
         </Tag>
       </Row>

src/components/Tag/theme.ts

@@ -15,12 +15,30 @@ const purpleTheme = {
   borderColorOutline: lightColors.secondary,
 };
 
+const greenTheme = {
+  background: lightColors.success,
+  color: "#FFFFFF",
+  colorOutline: lightColors.success,
+  borderColorOutline: lightColors.success,
+};
+
+const grayTheme = {
+  background: lightColors.textDisabled,
+  color: "#FFFFFF",
+  colorOutline: lightColors.textDisabled,
+  borderColorOutline: lightColors.textDisabled,
+};
+
 export const light: TagTheme = {
   pink: pinkTheme,
   purple: purpleTheme,
+  green: greenTheme,
+  gray: grayTheme,
 };
 
 export const dark: TagTheme = {
   pink: pinkTheme,
   purple: purpleTheme,
+  green: greenTheme,
+  gray: grayTheme,
 };

src/components/Tag/types.ts

@@ -3,6 +3,8 @@ import { ReactNode } from "react";
 export const variants = {
   PINK: "pink",
   PURPLE: "purple",
+  GREEN: "green",
+  GRAY: "gray",
 } as const;
 
 export type Variants = typeof variants[keyof typeof variants];