refactor(tag): New tag themes (#71)

pancakeswap · Nov 26, 2020 · 78fc2d7 · 78fc2d7
1 parent 1b34b28
commit 78fc2d7
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 178 deletions.
diff --git a/src/components/Tag/StyledTag.tsx b/src/components/Tag/StyledTag.tsx
@@ -1,69 +1,32 @@
 import styled, { DefaultTheme } from "styled-components";
-import { TagProps, TagThemeVariant, variants } from "./types";
+import getColor from "../../util/getColor";
+import { TagProps } from "./types";
 
 interface ThemedProps extends TagProps {
   theme: DefaultTheme;
 }
 
-const InnerIcon = styled.span`
-  align-items: center;
-  display: inline-flex;
-`;
-
-export const StartIcon = styled(InnerIcon)`
-  margin-right: 0.5em;
-`;
-
-export const EndIcon = styled(InnerIcon)`
-  margin-left: 0.5em;
-`;
-
-const getTagVariantProp = (prop: keyof TagThemeVariant) => ({ theme, variant = variants.PURPLE }: ThemedProps) => {
-  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";
-};
+const getThemeTextColor = ({ outline, variant = "primary", theme }: ThemedProps) =>
+  outline ? getColor(variant, theme) : "#ffffff";
 
 export const StyledTag = styled.div<ThemedProps>`
   align-items: center;
-  background-color: ${getBackgroundColor};
-  border: ${getBorder};
+  background-color: ${({ outline, theme, variant = "primary" }) =>
+    outline ? "transparent" : getColor(variant, theme)};
+  border: 2px solid ${({ variant = "primary", theme }) => getColor(variant, theme)};
   border-radius: 16px;
-  color: ${getColor};
+  color: ${getThemeTextColor};
   display: inline-flex;
   font-size: 14px;
   font-weight: 400;
   height: 28px;
   line-height: 1.5;
   padding: 0 8px;
+  white-space: nowrap;
 
   svg {
-    fill: ${getColor};
+    fill: ${getThemeTextColor};
   }
 `;
+
+export default null;
diff --git a/src/components/Tag/index.stories.tsx b/src/components/Tag/index.stories.tsx
@@ -2,7 +2,9 @@ import React from "react";
 import styled from "styled-components";
 /* eslint-disable import/no-unresolved */
 import { Meta } from "@storybook/react/types-6-0";
+import { CommunityIcon, RemoveIcon } from "../Svg";
 import Tag from "./index";
+import { variants } from "./types";
 
 const Row = styled.div`
   display: flex;
@@ -13,34 +15,6 @@ const Row = styled.div`
   }
 `;
 
-const CommunityIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-    <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
-      <path
-        d="M8 8.5C9.08667 8.5 10.0467 8.76 10.8267 9.1C11.5467 9.42 12 10.14 12 10.92V11.3333C12 11.7 11.7 12 11.3333 12H4.66667C4.3 12 4 11.7 4 11.3333V10.9267C4 10.14 4.45333 9.42 5.17333 9.10667C5.95333 8.76 6.91333 8.5 8 8.5ZM2.66667 8.66667C3.4 8.66667 4 8.06667 4 7.33333C4 6.6 3.4 6 2.66667 6C1.93333 6 1.33333 6.6 1.33333 7.33333C1.33333 8.06667 1.93333 8.66667 2.66667 8.66667ZM3.42 9.4C3.17333 9.36 2.92667 9.33333 2.66667 9.33333C2.00667 9.33333 1.38 9.47333 0.813333 9.72C0.32 9.93333 0 10.4133 0 10.9533V11.3333C0 11.7 0.3 12 0.666667 12H3V10.9267C3 10.3733 3.15333 9.85333 3.42 9.4ZM13.3333 8.66667C14.0667 8.66667 14.6667 8.06667 14.6667 7.33333C14.6667 6.6 14.0667 6 13.3333 6C12.6 6 12 6.6 12 7.33333C12 8.06667 12.6 8.66667 13.3333 8.66667ZM16 10.9533C16 10.4133 15.68 9.93333 15.1867 9.72C14.62 9.47333 13.9933 9.33333 13.3333 9.33333C13.0733 9.33333 12.8267 9.36 12.58 9.4C12.8467 9.85333 13 10.3733 13 10.9267V12H15.3333C15.7 12 16 11.7 16 11.3333V10.9533ZM8 4C9.10667 4 10 4.89333 10 6C10 7.10667 9.10667 8 8 8C6.89333 8 6 7.10667 6 6C6 4.89333 6.89333 4 8 4Z"
-        fill="#323232"
-      />
-    </mask>
-    <g mask="url(#mask0)">
-      <rect width="16" height="16" fill="currentColor" />
-    </g>
-  </svg>
-);
-
-const CoreIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-    <mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
-      <path
-        d="M15.3334 8L13.7067 6.14L13.9334 3.68L11.5267 3.13333L10.2667 1L8.00002 1.97333L5.73335 1L4.47335 3.12667L2.06669 3.66667L2.29335 6.13333L0.666687 8L2.29335 9.86L2.06669 12.3267L4.47335 12.8733L5.73335 15L8.00002 14.02L10.2667 14.9933L11.5267 12.8667L13.9334 12.32L13.7067 9.86L15.3334 8ZM6.25335 10.6733L4.66669 9.07333C4.40669 8.81333 4.40669 8.39333 4.66669 8.13333L4.71335 8.08667C4.97335 7.82667 5.40002 7.82667 5.66002 8.08667L6.73335 9.16667L10.1667 5.72667C10.4267 5.46667 10.8534 5.46667 11.1134 5.72667L11.16 5.77333C11.42 6.03333 11.42 6.45333 11.16 6.71333L7.21335 10.6733C6.94002 10.9333 6.52002 10.9333 6.25335 10.6733Z"
-        fill="#323232"
-      />
-    </mask>
-    <g mask="url(#mask1)">
-      <rect width="16" height="16" fill="currentColor " />
-    </g>
-  </svg>
-);
-
 export default {
   title: "Tag",
   argTypes: {},
@@ -50,42 +24,51 @@ export const Default: React.FC = () => {
   return (
     <>
       <Row>
-        <Tag>Core</Tag>
-        <Tag variant="pink">Community</Tag>
-        <Tag variant="green">Available</Tag>
-        <Tag variant="gray">Gray</Tag>
+        {Object.keys(variants).map((variant) => (
+          <Tag key={variant} variant={variants[variant]}>
+            {variant}
+          </Tag>
+        ))}
       </Row>
       <Row>
-        <Tag outline>Core</Tag>
-        <Tag variant="pink" outline>
-          Community
-        </Tag>
-        <Tag variant="green" outline>
-          Available
-        </Tag>
-        <Tag variant="gray" outline>
-          Gray
-        </Tag>
+        {Object.keys(variants).map((variant) => (
+          <Tag key={variant} variant={variants[variant]} outline>
+            {variant}
+          </Tag>
+        ))}
+      </Row>
+    </>
+  );
+};
+
+export const WithIcon: React.FC = () => {
+  return (
+    <>
+      <Row>
+        {Object.keys(variants).map((variant) => (
+          <Tag key={variant} variant={variants[variant]} startIcon={<CommunityIcon />}>
+            Start Icon
+          </Tag>
+        ))}
       </Row>
       <Row>
-        <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>
+        {Object.keys(variants).map((variant) => (
+          <Tag key={variant} variant={variants[variant]} endIcon={<RemoveIcon width="14px" />}>
+            End Icon
+          </Tag>
+        ))}
       </Row>
       <Row>
-        <Tag outline startIcon={<CommunityIcon />}>
-          Start Icon
-        </Tag>
-        <Tag outline startIcon={<CoreIcon />} variant="pink">
-          End Icon
-        </Tag>
-        <Tag outline startIcon={<CoreIcon />} endIcon={<CoreIcon />} variant="pink">
-          Start & End Icon
-        </Tag>
+        {Object.keys(variants).map((variant) => (
+          <Tag
+            key={variant}
+            variant={variants[variant]}
+            startIcon={<CommunityIcon />}
+            endIcon={<RemoveIcon width="14px" />}
+          >
+            Start & End Icon
+          </Tag>
+        ))}
       </Row>
     </>
   );

diff --git a/src/components/Tag/index.tsx b/src/components/Tag/index.tsx
@@ -1,17 +1,23 @@
 import React from "react";
-import { TagProps, variants } from "./types";
-import { StyledTag, StartIcon, EndIcon } from "./StyledTag";
+import { TagProps } from "./types";
+import { StyledTag } from "./StyledTag";
 
 const Tag: React.FC<TagProps> = ({ startIcon, endIcon, children, ...props }) => (
   <StyledTag {...props}>
-    {startIcon && <StartIcon>{startIcon}</StartIcon>}
+    {React.isValidElement(startIcon) &&
+      React.cloneElement(startIcon, {
+        mr: "0.5rem",
+      })}
     {children}
-    {endIcon && <EndIcon>{endIcon}</EndIcon>}
+    {React.isValidElement(endIcon) &&
+      React.cloneElement(endIcon, {
+        ml: "0.5rem",
+      })}
   </StyledTag>
 );
 
 Tag.defaultProps = {
-  variant: variants.PURPLE,
+  variant: "primary",
   outline: false,
 };
 

diff --git a/src/components/Tag/theme.ts b/src/components/Tag/theme.ts
diff --git a/src/components/Tag/types.ts b/src/components/Tag/types.ts
@@ -1,26 +1,18 @@
 import { ReactNode } from "react";
+import { SpaceProps } from "styled-system";
 
 export const variants = {
-  PINK: "pink",
-  PURPLE: "purple",
-  GREEN: "green",
-  GRAY: "gray",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  TEXTDISABLED: "textDisabled",
+  TEXTSUBTLE: "textSubtle",
+  BINANCE: "binance",
 } as const;
 
 export type Variants = typeof variants[keyof typeof variants];
 
-export type TagThemeVariant = {
-  background: string;
-  color: string;
-  colorOutline: string;
-  borderColorOutline: string;
-};
-
-export type TagTheme = {
-  [key in Variants]: TagThemeVariant;
-};
-
-export interface TagProps {
+export interface TagProps extends SpaceProps {
   variant?: Variants;
   startIcon?: ReactNode;
   endIcon?: ReactNode;

diff --git a/src/theme/colors.ts b/src/theme/colors.ts
@@ -9,8 +9,13 @@ export const baseColors = {
   success: "#31D0AA",
 };
 
+export const brandColors = {
+  binance: "#F0B90B",
+};
+
 export const lightColors: Colors = {
   ...baseColors,
+  ...brandColors,
   background: "#FAF9FA",
   backgroundDisabled: "#E9EAEB",
   contrast: "#191326",
@@ -24,6 +29,7 @@ export const lightColors: Colors = {
 
 export const darkColors: Colors = {
   ...baseColors,
+  ...brandColors,
   background: "#191326",
   backgroundDisabled: "#524B63",
   contrast: "#FFFFFF",

diff --git a/src/theme/dark.ts b/src/theme/dark.ts
@@ -1,7 +1,6 @@
 import { DefaultTheme } from "styled-components";
 import { dark as darkButton } from "../components/Button/theme";
 import { dark as darkCard } from "../components/Card/theme";
-import { dark as darkTag } from "../components/Tag/theme";
 import { dark as darkToggle } from "../components/Toggle/theme";
 import { dark as darkNav } from "../widgets/Nav/theme";
 import base from "./base";
@@ -13,7 +12,6 @@ const darkTheme: DefaultTheme = {
   button: darkButton,
   colors: darkColors,
   card: darkCard,
-  tag: darkTag,
   toggle: darkToggle,
   nav: darkNav,
 };

diff --git a/src/theme/index.ts b/src/theme/index.ts
@@ -1,6 +1,5 @@
 import { ButtonTheme } from "../components/Button/types";
 import { CardTheme } from "../components/Card/types";
-import { TagTheme } from "../components/Tag/types";
 import { ToggleTheme } from "../components/Toggle/types";
 import { NavTheme } from "../widgets/Nav/types";
 import { Colors, Breakpoints, MediaQueries, Spacing, Shadows, Radii, ZIndices } from "./types";
@@ -11,7 +10,6 @@ export interface PancakeTheme {
   colors: Colors;
   button: ButtonTheme;
   card: CardTheme;
-  tag: TagTheme;
   nav: NavTheme;
   toggle: ToggleTheme;
   breakpoints: Breakpoints;

diff --git a/src/theme/light.ts b/src/theme/light.ts
@@ -1,7 +1,6 @@
 import { DefaultTheme } from "styled-components";
 import { light as lightButton } from "../components/Button/theme";
 import { light as lightCard } from "../components/Card/theme";
-import { light as lightTag } from "../components/Tag/theme";
 import { light as lightToggle } from "../components/Toggle/theme";
 import { light as lightNav } from "../widgets/Nav/theme";
 import base from "./base";
@@ -13,7 +12,6 @@ const lightTheme: DefaultTheme = {
   button: lightButton,
   colors: lightColors,
   card: lightCard,
-  tag: lightTag,
   toggle: lightToggle,
   nav: lightNav,
 };

diff --git a/src/theme/types.ts b/src/theme/types.ts
@@ -43,6 +43,9 @@ export type Colors = {
   textDisabled: string;
   textSubtle: string;
   borderColor: string;
+
+  // Brand colors
+  binance: string;
 };
 
 export type ZIndices = {