feat(card): Card states (#25)

src/components/Card/index.stories.tsx

@@ -20,10 +20,19 @@ export default {
 
 export const Default: React.FC = () => {
   return (
-    <>
+    <div style={{ padding: "32px", width: "500px" }}>
       <Row>
         <Card>Card</Card>
       </Row>
-    </>
+      <Row>
+        <Card isActive>Active Card</Card>
+      </Row>
+      <Row>
+        <Card isSuccess>Success Card</Card>
+      </Row>
+      <Row>
+        <Card isWarning>Warning Card</Card>
+      </Row>
+    </div>
   );
 };

src/components/Card/index.tsx

@@ -1,16 +1,44 @@
 import styled, { DefaultTheme } from "styled-components";
 
 interface CardProps {
+  isActive?: boolean;
+  isSuccess?: boolean;
+  isWarning?: boolean;
   theme: DefaultTheme;
 }
 
+/**
+ * Priority: Warning --> Success --> Active
+ */
+const getBoxShadow = ({ isActive, isSuccess, isWarning, theme }: CardProps) => {
+  if (isWarning) {
+    return theme.card.boxShadowWarning;
+  }
+
+  if (isSuccess) {
+    return theme.card.boxShadowSuccess;
+  }
+
+  if (isActive) {
+    return theme.card.boxShadowActive;
+  }
+
+  return theme.card.boxShadow;
+};
+
 const Card = styled.div<CardProps>`
   background-color: ${({ theme }) => theme.card.background};
   border: ${({ theme }) => theme.card.boxShadow};
   border-radius: 32px;
-  box-shadow: ${({ theme }) => theme.shadows.level1};
+  box-shadow: ${getBoxShadow};
   color: ${({ theme }) => theme.colors.text};
   padding: 24px;
 `;
 
+Card.defaultProps = {
+  isActive: false,
+  isSuccess: false,
+  isWarning: false,
+};
+
 export default Card;

src/components/Card/theme.ts

@@ -1,11 +1,18 @@
+import shadows from "../../theme/shadows";
 import { CardTheme } from "./types";
 
 export const light: CardTheme = {
   background: "#FFFFFF",
-  boxShadow: "1px solid rgba(14, 14, 44, 0.05)",
+  boxShadow: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)",
+  boxShadowActive: shadows.active,
+  boxShadowSuccess: shadows.success,
+  boxShadowWarning: shadows.warning,
 };
 
 export const dark: CardTheme = {
   background: "#2B223E",
-  boxShadow: "1px solid rgba(14, 14, 44, 0.05)",
+  boxShadow: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)",
+  boxShadowActive: shadows.active,
+  boxShadowSuccess: shadows.success,
+  boxShadowWarning: shadows.warning,
 };

src/components/Card/types.ts

@@ -1,4 +1,7 @@
 export type CardTheme = {
   background: string;
   boxShadow: string;
+  boxShadowActive: string;
+  boxShadowSuccess: string;
+  boxShadowWarning: string;
 };

src/styled.d.ts

@@ -13,6 +13,13 @@ export type MediaQueries = {
   xl: string;
 };
 
+export type Shadows = {
+  level1: string;
+  active: string;
+  success: string;
+  warning: string;
+};
+
 export type Colors = {
   primary: string;
   primaryBright: string;
@@ -41,8 +48,6 @@ declare module "styled-components" {
       breakpoints: Breakpoints;
       mediaQueries: MediaQueries;
     };
-    shadows: {
-      level1: string;
-    };
+    shadows: Shadows;
   }
 }

src/theme/dark.ts

@@ -1,5 +1,6 @@
 import { DefaultTheme } from "styled-components";
 import mediaQueries, { breakpoints } from "./mediaQueries";
+import shadows from "./shadows";
 import { dark as darkButton } from "../components/Button/theme";
 import { dark as darkCard } from "../components/Card/theme";
 import { dark as darkTag } from "../components/Tag/theme";
@@ -16,6 +17,7 @@ const darkTheme: DefaultTheme = {
   },
   shadows: {
     level1: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)",
+    ...shadows,
   },
   tag: darkTag,
 };

src/theme/light.ts

@@ -1,5 +1,6 @@
 import { DefaultTheme } from "styled-components";
 import mediaQueries, { breakpoints } from "./mediaQueries";
+import shadows from "./shadows";
 import { light as lightButton } from "../components/Button/theme";
 import { light as lightCard } from "../components/Card/theme";
 import { light as lightTag } from "../components/Tag/theme";
@@ -16,6 +17,7 @@ const lightTheme: DefaultTheme = {
   },
   shadows: {
     level1: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)",
+    ...shadows,
   },
   tag: lightTag,
 };

src/theme/shadows.ts

@@ -0,0 +1,7 @@
+const shadows = {
+  active: "0px 0px 0px 1px #0098A1, 0px 0px 4px 8px rgba(31, 199, 212, 0.4)",
+  success: "0px 0px 0px 1px #31D0AA, 0px 0px 0px 4px rgba(49, 208, 170, 0.2)",
+  warning: "0px 0px 0px 1px #ED4B9E, 0px 0px 0px 4px rgba(237, 75, 158, 0.2)",
+};
+
+export default shadows;