chore(uikit): Remove Image responsive prop

pancakeswap · Jun 17, 2021 · eead3e2 · eead3e2
1 parent 697572b
commit eead3e2
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 27 deletions.
diff --git a/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx b/packages/pancake-uikit/src/components/Image/BackgroundImage.tsx
@@ -9,7 +9,7 @@ const StyledBackgroundImage = styled(Wrapper)`
   background-size: contain;
 `;
 
-const BackgroundImage: React.FC<ImageProps> = ({ src, responsive, width, height, ...props }) => {
+const BackgroundImage: React.FC<ImageProps> = ({ src, width, height, ...props }) => {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -36,7 +36,7 @@ const BackgroundImage: React.FC<ImageProps> = ({ src, responsive, width, height,
     };
   }, [src]);
 
-  return <StyledBackgroundImage ref={ref} responsive={responsive} width={width} height={height} {...props} />;
+  return <StyledBackgroundImage ref={ref} width={width} height={height} {...props} />;
 };
 
 export default BackgroundImage;
diff --git a/packages/pancake-uikit/src/components/Image/Image.tsx b/packages/pancake-uikit/src/components/Image/Image.tsx
@@ -20,7 +20,7 @@ const Placeholder = styled.div`
   width: 100%;
 `;
 
-const Image: React.FC<ImageProps> = ({ responsive, src, alt, width, height, ...props }) => {
+const Image: React.FC<ImageProps> = ({ src, alt, width, height, ...props }) => {
   const imgRef = useRef<HTMLDivElement>(null);
   const [isLoaded, setIsLoaded] = useState(false);
 
@@ -48,7 +48,7 @@ const Image: React.FC<ImageProps> = ({ responsive, src, alt, width, height, ...p
   }, [src]);
 
   return (
-    <Wrapper ref={imgRef} responsive={responsive} height={height} width={width} {...props}>
+    <Wrapper ref={imgRef} height={height} width={width} {...props}>
       {isLoaded ? <StyledImage src={src} alt={alt} /> : <Placeholder />}
     </Wrapper>
   );

diff --git a/packages/pancake-uikit/src/components/Image/Wrapper.tsx b/packages/pancake-uikit/src/components/Image/Wrapper.tsx
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { space } from "styled-system";
 import { WrapperProps } from "./types";
 
-const StyledWrapper = styled.div<{ $width: number; $height: number; responsive: boolean }>`
+const StyledWrapper = styled.div<{ $width: number; $height: number }>`
   align-self: start;
   max-height: ${({ $height }) => $height}px;
   max-width: ${({ $width }) => $width}px;
@@ -19,8 +19,8 @@ const StyledWrapper = styled.div<{ $width: number; $height: number; responsive:
   ${space}
 `;
 
-const Wrapper = forwardRef<HTMLDivElement, WrapperProps>(({ responsive = true, width, height, ...props }, ref) => {
-  return <StyledWrapper ref={ref} responsive={responsive} $width={width} $height={height} {...props} />;
+const Wrapper = forwardRef<HTMLDivElement, WrapperProps>(({ width, height, ...props }, ref) => {
+  return <StyledWrapper ref={ref} $width={width} $height={height} {...props} />;
 });
 
 export default Wrapper;
diff --git a/packages/pancake-uikit/src/components/Image/index.stories.tsx b/packages/pancake-uikit/src/components/Image/index.stories.tsx
@@ -23,15 +23,6 @@ export const Image: React.FC = () => {
   );
 };
 
-export const ImageResponsive: React.FC = () => {
-  return (
-    <div>
-      <Img src="https://via.placeholder.com/800x400" width={800} height={400} />
-      <div>Image</div>
-    </div>
-  );
-};
-
 export const Background: React.FC = () => {
   return (
     <div>
@@ -41,15 +32,6 @@ export const Background: React.FC = () => {
   );
 };
 
-export const BackgroundResponsive: React.FC = () => {
-  return (
-    <div>
-      <BackgroundImage src="https://via.placeholder.com/800x400" width={800} height={400} responsive mr="16px" />
-      <div>Background Image</div>
-    </div>
-  );
-};
-
 export const LazyImages: React.FC = () => {
   return (
     <Flex flexWrap="wrap">

diff --git a/packages/pancake-uikit/src/components/Image/types.ts b/packages/pancake-uikit/src/components/Image/types.ts
@@ -5,13 +5,11 @@ import { BoxProps } from "../Box";
 export interface WrapperProps extends SpaceProps, HTMLAttributes<HTMLDivElement> {
   width: number;
   height: number;
-  responsive?: boolean;
 }
 
 export interface ImageProps extends ImgHTMLAttributes<HTMLImageElement>, SpaceProps {
   width: number;
   height: number;
-  responsive?: boolean;
   wrapperProps?: WrapperProps;
 }