feat(uikit/tokenpairimage): Inverted variant

pancakeswap · Jun 16, 2021 · 1947fd0 · 1947fd0
1 parent 64677b3
commit 1947fd0
Show file tree

Hide file tree

Showing 8 changed files with 113 additions and 24 deletions.
diff --git a/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx b/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx
@@ -35,7 +35,6 @@ it("renders correctly", () => {
       display: inline-flex;
       height: 48px;
       width: 48px;
-      z-index: 5;
     }
 
     <div

diff --git a/packages/pancake-uikit/src/components/Image/TokenImage.tsx b/packages/pancake-uikit/src/components/Image/TokenImage.tsx
@@ -11,7 +11,6 @@ const StyledTokenImage = styled(BackgroundImage)`
   display: inline-flex;
   height: ${({ height }) => `${height}px`};
   width: ${({ width }) => `${width}px`};
-  z-index: 5;
 `;
 
 const TokenImage: React.FC<TokenImageProps> = ({

diff --git a/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx b/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx
@@ -1,34 +1,38 @@
 import React from "react";
-import styled from "styled-components";
-import Flex from "../Box/Flex";
-import TokenImage from "./TokenImage";
-import { TokenPairImageProps } from "./types";
-
-const StyledSecondaryImage = styled(TokenImage)`
-  bottom: -4px;
-  position: absolute;
-  right: -4px;
-  z-index: 6;
-`;
+import Box from "../Box/Box";
+import { TokenPairImageProps, variants } from "./types";
+import { StyledPrimaryImage, StyledSecondaryImage } from "./styles";
 
 const TokenPairImage: React.FC<TokenPairImageProps> = ({
-  primaryTokenAddress,
   secondaryTokenAddress,
+  primaryTokenAddress,
   width,
   height,
+  variant = variants.DEFAULT,
+  primaryImageProps = {},
+  secondaryImageProps = {},
   ...props
 }) => {
+  const primaryImageSize = Math.floor(width * 0.83); // Arbitrary ratio
   const secondaryImageSize = Math.floor(width / 2);
 
   return (
-    <Flex alignItems="center" position="relative" display="inline-flex" width={width} height={height}>
-      <TokenImage tokenAddress={primaryTokenAddress} width={width} height={height} {...props} />
+    <Box position="relative" display="inline-block" width={width} height={height} {...props}>
+      <StyledPrimaryImage
+        variant={variant}
+        tokenAddress={primaryTokenAddress}
+        width={primaryImageSize}
+        height={primaryImageSize}
+        {...primaryImageProps}
+      />
       <StyledSecondaryImage
+        variant={variant}
         tokenAddress={secondaryTokenAddress}
         width={secondaryImageSize}
         height={secondaryImageSize}
+        {...secondaryImageProps}
       />
-    </Flex>
+    </Box>
   );
 };
 

diff --git a/packages/pancake-uikit/src/components/Image/Wrapper.tsx b/packages/pancake-uikit/src/components/Image/Wrapper.tsx
@@ -1,8 +1,8 @@
 import styled from "styled-components";
 import { space } from "styled-system";
-import { ContainerProps } from "./types";
+import { ImageProps } from "./types";
 
-const Wrapper = styled.div<ContainerProps>`
+const Wrapper = styled.div<ImageProps>`
   position: relative;
   background-position: center center;
   background-repeat: no-repeat;

diff --git a/packages/pancake-uikit/src/components/Image/index.stories.tsx b/packages/pancake-uikit/src/components/Image/index.stories.tsx
@@ -95,7 +95,7 @@ export const TokenImages: React.FC = () => {
       {tokens.map((token) => {
         return (
           <StyledBox key={token.symbol} p="16px">
-            <TokenImage tokenAddress={token.address[56]} height={64} width={64} />
+            <TokenImage tokenAddress={token.address[56]} height={64} width={64} title={token.symbol} />
           </StyledBox>
         );
       })}
@@ -116,6 +116,17 @@ export const TokenPairImages: React.FC = () => {
               secondaryTokenAddress={tokens[randomTokenIndex].address[56]}
               height={64}
               width={64}
+              title={token.symbol}
+              mr="16px"
+            />
+
+            <TokenPairImage
+              variant="inverted"
+              primaryTokenAddress={token.address[56]}
+              secondaryTokenAddress={tokens[randomTokenIndex].address[56]}
+              height={64}
+              width={64}
+              title={token.symbol}
             />
           </StyledBox>
         );

diff --git a/packages/pancake-uikit/src/components/Image/index.ts b/packages/pancake-uikit/src/components/Image/index.ts
@@ -2,3 +2,11 @@ export { default as BackgroundImage } from "./BackgroundImage";
 export { default as Image } from "./Image";
 export { default as TokenImage } from "./TokenImage";
 export { default as TokenPairImage } from "./TokenPairImage";
+export type {
+  ImageProps,
+  TokenImageBaseProps,
+  TokenPairImageProps,
+  TokenImageProps,
+  variants as tokenPairImageVariant,
+  Variant as TokenPairImageVariant,
+} from "./types";
diff --git a/packages/pancake-uikit/src/components/Image/styles.tsx b/packages/pancake-uikit/src/components/Image/styles.tsx
@@ -0,0 +1,54 @@
+import styled from "styled-components";
+import { variant as StyledSystemVariant } from "styled-system";
+import { TokenImageProps, Variant, variants } from "./types";
+import TokenImage from "./TokenImage";
+
+interface StyledImageProps extends TokenImageProps {
+  variant: Variant;
+}
+
+export const StyledPrimaryImage = styled(TokenImage)<StyledImageProps>`
+  position: absolute;
+
+  ${StyledSystemVariant({
+    variants: {
+      [variants.DEFAULT]: {
+        bottom: "auto",
+        left: 0,
+        right: "auto",
+        top: 0,
+        zIndex: 5,
+      },
+      [variants.INVERTED]: {
+        bottom: 0,
+        left: "auto",
+        right: 0,
+        top: "auto",
+        zIndex: 6,
+      },
+    },
+  })}
+`;
+
+export const StyledSecondaryImage = styled(TokenImage)<StyledImageProps>`
+  position: absolute;
+
+  ${StyledSystemVariant({
+    variants: {
+      [variants.DEFAULT]: {
+        bottom: 0,
+        left: "auto",
+        right: 0,
+        top: "auto",
+        zIndex: 6,
+      },
+      [variants.INVERTED]: {
+        bottom: "auto",
+        left: 0,
+        right: "auto",
+        top: 0,
+        zIndex: 5,
+      },
+    },
+  })}
+`;
diff --git a/packages/pancake-uikit/src/components/Image/types.ts b/packages/pancake-uikit/src/components/Image/types.ts
@@ -1,3 +1,4 @@
+import { ImgHTMLAttributes } from "react";
 import { SpaceProps } from "styled-system";
 
 export interface ContainerProps {
@@ -6,19 +7,32 @@ export interface ContainerProps {
   responsive?: boolean;
 }
 
-export interface ImageProps extends ContainerProps, SpaceProps {
-  src: string;
-  alt?: string;
+export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement>, SpaceProps {
+  width: number;
+  height: number;
+  responsive?: boolean;
 }
 
 export interface TokenImageBaseProps extends Omit<ImageProps, "src"> {
   baseUrl?: string;
   imageFormat?: string;
 }
 
-export interface TokenPairImageProps extends TokenImageBaseProps {
+export const variants = {
+  DEFAULT: "default",
+  INVERTED: "inverted",
+} as const;
+
+export type Variant = typeof variants[keyof typeof variants];
+
+export interface TokenPairImageProps extends SpaceProps {
   primaryTokenAddress: string;
   secondaryTokenAddress: string;
+  variant?: Variant;
+  height: number;
+  width: number;
+  primaryImageProps?: TokenImageBaseProps;
+  secondaryImageProps?: TokenImageBaseProps;
 }
 
 export interface TokenImageProps extends TokenImageBaseProps {