From 691899b8d925fe59a151265c7289093a74ac26b5 Mon Sep 17 00:00:00 2001 From: Joanna Dyczka Date: Fri, 8 Mar 2024 10:40:02 +0100 Subject: [PATCH] add Card atom --- govtool/frontend/src/colors.ts | 116 ++++++++++++++++++ .../frontend/src/components/atoms/Card.tsx | 75 +++++++++++ .../frontend/src/components/atoms/index.ts | 1 + govtool/frontend/src/stories/Card.stories.tsx | 42 +++++++ govtool/frontend/src/theme.ts | 71 +++++++++++ 5 files changed, 305 insertions(+) create mode 100644 govtool/frontend/src/colors.ts create mode 100644 govtool/frontend/src/components/atoms/Card.tsx create mode 100644 govtool/frontend/src/stories/Card.stories.tsx diff --git a/govtool/frontend/src/colors.ts b/govtool/frontend/src/colors.ts new file mode 100644 index 000000000..5b367816b --- /dev/null +++ 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 new file mode 100644 index 000000000..7048a98d6 --- /dev/null +++ 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; + 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 ( + + colors.backgroundColor ?? `${theme.palette.neutralWhite}4D`, + border: border ? 1 : 0, + borderColor: colors?.borderColor, + padding: 3, + position: "relative", + ...sx, + }} + > + {label && ( + + )} + {children} + + ); +} + +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 index 7072b7635..fa24ee1a6 100644 --- 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 new file mode 100644 index 000000000..2836bc1a3 --- /dev/null +++ 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; + +export default meta; +type Story = StoryObj; + +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 index e13fdefc3..593f165a4 100644 --- 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)"; \ No newline at end of file