add Card atom

IntersectMBO · Mar 8, 2024 · 691899b · 691899b
1 parent 245a844
commit 691899b
Show file tree

Hide file tree

Showing 5 changed files with 305 additions and 0 deletions.
diff --git a/govtool/frontend/src/colors.ts b/govtool/frontend/src/colors.ts
@@ -0,0 +1,116 @@
+interface ColorType {
+  c50: string;
+  c100: string;
+  c200: string;
+  c300: string;
+  c400: string;
+  c500: string;
+  c600: string;
+  c700: string;
+  c800: string;
+  c900: string;
+}
+
+export const primaryBlue: ColorType = {
+  c50: '#E6EBF7',
+  c100: '#D6E2FF',
+  c200: '#99ADDE',
+  c300: '#6685CE',
+  c400: '#335CBD',
+  c500: '#0033AD',
+  c600: '#002682',
+  c700: '#001A57',
+  c800: '#000D2B',
+  c900: '#000511',
+};
+
+export const orange: ColorType = {
+  c50: '#FFF0E7',
+  c100: '#FFE0CE',
+  c200: '#FFC19D',
+  c300: '#FFA26C',
+  c400: '#FF833B',
+  c500: '#FF640A',
+  c600: '#BF4B08',
+  c700: '#803205',
+  c800: '#401903',
+  c900: '#1A0A01',
+};
+
+export const cyan: ColorType = {
+  c50: '#E9F5F8',
+  c100: '#D2EAF0',
+  c200: '#A4D4E0',
+  c300: '#77BFD1',
+  c400: '#49A9C1',
+  c500: '#1C94B2',
+  c600: '#156F86',
+  c700: '#0E4A59',
+  c800: '#07252D',
+  c900: '#030F12',
+};
+
+export const fadedPurple: ColorType = {
+  c50: '#F5F5F8',
+  c100: '#EAE9F0',
+  c200: '#D5D3E1',
+  c300: '#C1BED3',
+  c400: '#ACA8C4',
+  c500: '#9792B5',
+  c600: '#716E88',
+  c700: '#4C495B',
+  c800: '#26252D',
+  c900: '#0F0F12',
+};
+
+export const gray: ColorType = {
+  c50: '#F4F4F4',
+  c100: '#E8E9E8',
+  c200: '#D2D3D2',
+  c300: '#A5A6A5',
+  c400: '#8E908E',
+  c500: '#6B6C6B',
+  c600: '#474847',
+  c700: '#242424',
+  c800: '#0E0E0E',
+  c900: '#000000',
+};
+
+export const successGreen: ColorType = {
+  c50: '#F0F9EE',
+  c100: '#E0F2DC',
+  c200: '#C0E4BA',
+  c300: '#A1D797',
+  c400: '#81C975',
+  c500: '#62BC52',
+  c600: '#4A8D3E',
+  c700: '#315E29',
+  c800: '#192F15',
+  c900: '#0A1308',
+};
+
+export const progressYellow: ColorType = {
+  c50: '#FCF6EA',
+  c100: '#F8ECD4',
+  c200: '#F2D9A9',
+  c300: '#EBC67F',
+  c400: '#E5B354',
+  c500: '#DEA029',
+  c600: '#A7781F',
+  c700: '#6F5015',
+  c800: '#38280A',
+  c900: '#161004',
+};
+
+export const errorRed: ColorType = {
+  c50: '#FBEBEB',
+  c100: '#F6D5D5',
+  c200: '#EDACAC',
+  c300: '#E58282',
+  c400: '#DC5959',
+  c500: '#D32F2F',
+  c600: '#9E2323',
+  c700: '#6A1818',
+  c800: '#350C0C',
+  c900: '#150505',
+};
diff --git a/govtool/frontend/src/components/atoms/Card.tsx b/govtool/frontend/src/components/atoms/Card.tsx
@@ -0,0 +1,75 @@
+import { Chip, Paper, SxProps } from "@mui/material";
+import { PropsWithChildren } from "react";
+
+import { Theme } from "@/theme";
+import { errorRed, orange, primaryBlue, successGreen } from "@/colors";
+
+type CardProps = PropsWithChildren & {
+  border?: boolean;
+  elevation?: number;
+  label?: string;
+  sx?: SxProps<Theme>;
+  variant?: "default" | "warning" | "error" | "primary" | "success";
+};
+
+export function Card({
+  variant = "default",
+  border = variant !== "default",
+  children,
+  elevation = 4,
+  label,
+  sx,
+}: CardProps) {
+  const colors = COLORS[variant];
+
+  return (
+    <Paper
+      elevation={elevation}
+      sx={{
+        backgroundColor: (theme) =>
+          colors.backgroundColor ?? `${theme.palette.neutralWhite}4D`,
+        border: border ? 1 : 0,
+        borderColor: colors?.borderColor,
+        padding: 3,
+        position: "relative",
+        ...sx,
+      }}
+    >
+      {label && (
+        <Chip
+          label={label}
+          color={variant}
+          sx={{
+            position: "absolute",
+            top: -15,
+            right: 30,
+          }}
+        />
+      )}
+      {children}
+    </Paper>
+  );
+}
+
+const COLORS = {
+  default: {
+    backgroundColor: undefined,
+    borderColor: primaryBlue.c100,
+  },
+  warning: {
+    backgroundColor: undefined,
+    borderColor: orange.c500,
+  },
+  error: {
+    backgroundColor: `${errorRed.c50}80`,
+    borderColor: errorRed.c100,
+  },
+  primary: {
+    backgroundColor: `${primaryBlue.c100}40`,
+    borderColor: primaryBlue.c500,
+  },
+  success: {
+    backgroundColor: undefined,
+    borderColor: successGreen.c500,
+  },
+} as const;
diff --git a/govtool/frontend/src/components/atoms/index.ts b/govtool/frontend/src/components/atoms/index.ts
@@ -1,6 +1,7 @@
 export * from "./ActionRadio";
 export * from "./Background";
 export * from "./Button";
+export * from "./Card";
 export * from "./Checkbox";
 export * from "./ClickOutside";
 export * from "./CopyButton";

diff --git a/govtool/frontend/src/stories/Card.stories.tsx b/govtool/frontend/src/stories/Card.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Card } from "@atoms";
+
+const meta = {
+  title: "Example/Card",
+  component: Card,
+  args: {
+    variant: "default",
+    children: "Put here whatever you want to display in the card.",
+  },
+  parameters: {
+    layout: "centered",
+    backgrounds: {
+      default: "gradient",
+      values: [
+        {
+          name: "white",
+          value: "#fff",
+        },
+        {
+          name: "gradient",
+          value:
+            "linear-gradient(to bottom right, #0033AD70, #0033AD70 20%, transparent)",
+        },
+      ],
+    },
+  },
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: "Label goes here",
+  },
+};
diff --git a/govtool/frontend/src/theme.ts b/govtool/frontend/src/theme.ts
@@ -1,6 +1,15 @@
 import { createTheme } from "@mui/material/styles";
+import { cyan, errorRed, fadedPurple, orange, primaryBlue, progressYellow, successGreen } from "./colors";
 
 declare module "@mui/material/styles" {
+  interface BreakpointOverrides {
+    xxs: true;
+    xs: true;
+    sm: true;
+    md: true;
+    lg: true;
+    xl: true;
+  }
   interface Palette {
     accentOrange: string;
     accentYellow: string;
@@ -50,6 +59,16 @@ declare module "@mui/material/styles" {
 export type Theme = typeof theme;
 
 export const theme = createTheme({
+  breakpoints: {
+    values: {
+      xxs: 0,
+      xs: 375,
+      sm: 425,
+      md: 768,
+      lg: 1024,
+      xl: 1440,
+    },
+  },
   components: {
     MuiInputBase: {
       styleOverrides: {
@@ -76,6 +95,51 @@ export const theme = createTheme({
         },
       },
     },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          fontSize: "0.875rem",
+          fontWeight: 500,
+          height: 28,
+        },
+        // @ts-ignore missing definitions for filledDefault class
+        filledDefault: {
+          backgroundColor: fadedPurple.c100,
+        },
+        filledPrimary: {
+          backgroundColor: primaryBlue.c100,
+          color: primaryBlue.c500,
+        },
+        filledSecondary: {
+          backgroundColor: orange.c100,
+          color: orange.c600,
+        },
+        // @ts-ignore missing definitions for filledSuccess class
+        filledSuccess: {
+          backgroundColor: successGreen.c200,
+          color: successGreen.c700,
+        },
+        filledError: {
+          backgroundColor: errorRed.c100,
+          color: errorRed.c500,
+        },
+        filledWarning: {
+          backgroundColor: progressYellow.c200,
+          color: orange.c700,
+        },
+        filledInfo: {
+          backgroundColor: cyan.c100,
+          color: cyan.c500,
+        },
+      },
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          borderRadius: 12,
+        },
+      },
+    },
   },
   typography: {
     fontFamily: "Poppins, Arial",
@@ -108,3 +172,10 @@ export const theme = createTheme({
     textGray: "#525252",
   },
 });
+
+
+theme.shadows[1] = "0px 1px 2px 0px rgba(0, 51, 173, 0.08), 0px 1px 6px 1px rgba(0, 51, 173, 0.15)";
+theme.shadows[2] = "0px 1px 2px 0px rgba(0, 51, 173, 0.08), 0px 2px 10px 2px rgba(0, 51, 173, 0.15)";
+theme.shadows[3] = "0px 1px 3px 0px rgba(0, 51, 173, 0.08), 0px 4px 12px 3px rgba(0, 51, 173, 0.15)";
+theme.shadows[4] = "0px 2px 3px 0px rgba(0, 51, 173, 0.08), 0px 6px 14px 4px rgba(0, 51, 173, 0.15)";
+theme.shadows[5] = "0px 4px 4px 0px rgba(0, 51, 173, 0.08), 0px 8px 20px 6px rgba(0, 51, 173, 0.15)";