fix(card): Space props (#145)

* fix(card): Space props - Fixed typings * chore: Fix types
pancakeswap · Jan 20, 2021 · 8d7fdfa · 8d7fdfa
1 parent 4f7406e
commit 8d7fdfa
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/src/__tests__/components/card.test.tsx b/src/__tests__/components/card.test.tsx
@@ -12,7 +12,7 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       <div
-        class="sc-bdfBwQ cZfuWT"
+        class="sc-bdfBwQ gppsKf"
       >
         <div
           class="sc-gsTCUz iMfsSF"

diff --git a/src/components/Card/StyledCard.tsx b/src/components/Card/StyledCard.tsx
@@ -1,4 +1,5 @@
 import styled, { DefaultTheme } from "styled-components";
+import { space } from "styled-system";
 import { CardProps } from "./types";
 
 interface StyledCardProps extends CardProps {
@@ -32,6 +33,8 @@ const StyledCard = styled.div<StyledCardProps>`
   color: ${({ theme, isDisabled }) => theme.colors[isDisabled ? "textDisabled" : "text"]};
   overflow: hidden;
   position: relative;
+
+  ${space}
 `;
 
 StyledCard.defaultProps = {

diff --git a/src/components/Card/index.stories.tsx b/src/components/Card/index.stories.tsx
@@ -9,10 +9,6 @@ import Card from "./Card";
 
 const Row = styled.div`
   margin-bottom: 32px;
-
-  & > button + button {
-    margin-left: 16px;
-  }
 `;
 
 export default {

diff --git a/src/components/Card/types.ts b/src/components/Card/types.ts
@@ -1,3 +1,4 @@
+import { HTMLAttributes } from "react";
 import { SpaceProps } from "styled-system";
 import { Colors } from "../../theme/types";
 
@@ -14,7 +15,7 @@ export type CardTheme = {
   boxShadowWarning: string;
 };
 
-export interface CardProps extends SpaceProps {
+export interface CardProps extends SpaceProps, HTMLAttributes<HTMLDivElement> {
   isActive?: boolean;
   isSuccess?: boolean;
   isWarning?: boolean;