From 1947fd0ba0c0474ee23e39dadbc55659b356eb27 Mon Sep 17 00:00:00 2001 From: hachiojidev Date: Wed, 16 Jun 2021 10:12:46 +0900 Subject: [PATCH] feat(uikit/tokenpairimage): Inverted variant --- .../__tests__/components/tokenimage.test.tsx | 1 - .../src/components/Image/TokenImage.tsx | 1 - .../src/components/Image/TokenPairImage.tsx | 34 ++++++------ .../src/components/Image/Wrapper.tsx | 4 +- .../src/components/Image/index.stories.tsx | 13 ++++- .../src/components/Image/index.ts | 8 +++ .../src/components/Image/styles.tsx | 54 +++++++++++++++++++ .../src/components/Image/types.ts | 22 ++++++-- 8 files changed, 113 insertions(+), 24 deletions(-) create mode 100644 packages/pancake-uikit/src/components/Image/styles.tsx diff --git a/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx b/packages/pancake-uikit/src/__tests__/components/tokenimage.test.tsx index c076fea1d..fd70cc1cb 100644 --- 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; }
`${height}px`}; width: ${({ width }) => `${width}px`}; - z-index: 5; `; const TokenImage: React.FC = ({ diff --git a/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx b/packages/pancake-uikit/src/components/Image/TokenPairImage.tsx index 2c458e7de..7cb0051d6 100644 --- 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 = ({ - 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 ( - - + + - + ); }; diff --git a/packages/pancake-uikit/src/components/Image/Wrapper.tsx b/packages/pancake-uikit/src/components/Image/Wrapper.tsx index fd965a8c0..5e13f72ce 100644 --- 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` +const Wrapper = styled.div` 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 index d7f40a452..d87399e62 100644 --- 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 ( - + ); })} @@ -116,6 +116,17 @@ export const TokenPairImages: React.FC = () => { secondaryTokenAddress={tokens[randomTokenIndex].address[56]} height={64} width={64} + title={token.symbol} + mr="16px" + /> + + ); diff --git a/packages/pancake-uikit/src/components/Image/index.ts b/packages/pancake-uikit/src/components/Image/index.ts index 9e04266aa..9176a8199 100644 --- 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 new file mode 100644 index 000000000..bab4f0c8e --- /dev/null +++ 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)` + 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)` + 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 index 990a0f8d1..af22cb511 100644 --- 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,9 +7,10 @@ export interface ContainerProps { responsive?: boolean; } -export interface ImageProps extends ContainerProps, SpaceProps { - src: string; - alt?: string; +export interface ImageProps extends ImgHTMLAttributes, SpaceProps { + width: number; + height: number; + responsive?: boolean; } export interface TokenImageBaseProps extends Omit { @@ -16,9 +18,21 @@ export interface TokenImageBaseProps extends Omit { 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 {