Skip to content

Commit a4b2c3b

Browse files
MapleSyrupyfrancisli
MapleSyrupy
and
francisli
authored
[#517] Added Benchmark UI Chips (#534)
* Submit for review Commit. * Update Layout.module.css * Remove Bloat * Revert "Update Layout.module.css" This reverts commit 95851f8. * Revert "Submit for review Commit." This reverts commit 4d933af. * Reverting Package-lock.json file * fix lint issues * Benchmark Chips Update * restructuring of Chip components * checked version with new modular changes * Clean out comments, rename story title * Created variants for chips and made some stylistic changes * Add stories for Button with startIcon, tweak icon layout --------- Co-authored-by: Francis Li <mail@francisli.com>
1 parent 0bf9a0d commit a4b2c3b

14 files changed

Lines changed: 359 additions & 48 deletions

File tree

‎src/components/benchmarks/BenchmarkAssignees.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,14 @@ const BenchmarkAssignees = ({
2424
paddingBottom: ".4rem !important",
2525
paddingLeft: ".4rem !important",
2626
paddingRight: ".4rem !important",
27+
width: "75%",
2728
}}
2829
>
29-
Assign staff
30+
Assign
3031
</Button>
3132
)}
3233
{!!assignees.length && (
33-
<Stack direction="row">
34+
<Stack direction="row" sx={{ display: "flex", alignItems: "center" }}>
3435
<Stack>
3536
{assignees.map((u) => (
3637
<Box key={u.user_id} fontWeight="bold" textAlign="left">
@@ -39,7 +40,6 @@ const BenchmarkAssignees = ({
3940
))}
4041
{due_date && <Box>Until {format(new Date(due_date), "MMM d")}</Box>}
4142
{!due_date && !!trial_count && <Box>{trial_count} times</Box>}
42-
{!due_date && !trial_count && <Box>Until unassigned</Box>}
4343
</Stack>
4444
<Box>
4545
<Button variant="tertiary" onClick={() => onAssign()}>

‎src/components/benchmarks/BenchmarkChipController.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import Chip from "../design_system/chip/Chip";
2+
3+
interface BenchmarkChipControllerProps {
4+
data?: number | null;
5+
notifier?: boolean;
6+
}
7+
export default function BenchmarkChipController({
8+
data,
9+
notifier,
10+
}: BenchmarkChipControllerProps) {
11+
if (data && !notifier) {
12+
return <Chip label={data + "%"} variant="primary" />;
13+
} else if (data && notifier) {
14+
return <Chip label={data} variant="primary" />;
15+
} else if (notifier) {
16+
return <Chip label={0} variant="secondary" />;
17+
} else {
18+
return <Chip label={0 + "%"} variant="secondary" />;
19+
}
20+
}

‎src/components/benchmarks/BenchmarkListElement.tsx‎

Lines changed: 73 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
11
import Box from "@mui/material/Box";
22
import Divider from "@mui/material/Divider";
3-
import ContentPasteIcon from "@mui/icons-material/ContentPaste";
43
import { useState, type ReactNode } from "react";
54
import { format } from "date-fns";
65
import Typography from "@mui/material/Typography";
7-
6+
import Chip from "../design_system/chip/Chip";
7+
import LogicChip from "./BenchmarkChipController";
88
import Button from "@/components/design_system/button/Button";
99
import { BenchmarkAssignmentModal } from "./BenchmarkAssignmentModal";
1010
import BenchmarkAssignees from "./BenchmarkAssignees";
1111
import { Benchmark } from "@/types/global";
1212
import Link from "next/link";
1313
import { useRouter } from "next/router";
1414

15+
import ContentPasteOutlinedIcon from "@mui/icons-material/ContentPasteOutlined";
16+
1517
interface BenchmarkProps {
1618
benchmark: Benchmark;
1719
index?: number;
@@ -34,15 +36,49 @@ const Info = ({ description, children }: InfoProps) => {
3436
textAlign: "center",
3537
}}
3638
>
37-
<Typography
38-
sx={{ marginBottom: "0.5em" }}
39-
variant="overline"
40-
display="block"
41-
gutterBottom
42-
>
43-
{description}
44-
</Typography>
39+
{description.includes("Assigned STAFF") ||
40+
description.includes("DATA") ? (
41+
<Typography
42+
sx={{
43+
marginTop: "1em",
44+
color: "gray",
45+
fontWeight: "600",
46+
fontStyle: "semi bold",
47+
fontSize: "12px",
48+
lineHeight: "100%",
49+
letterSpacing: "0%",
50+
}}
51+
variant="overline"
52+
display="block"
53+
gutterBottom
54+
>
55+
{description}
56+
</Typography>
57+
) : (
58+
""
59+
)}
4560
{children}
61+
{description.includes("Assigned STAFF") ||
62+
description.includes("DATA") ? (
63+
""
64+
) : (
65+
<Typography
66+
sx={{
67+
marginTop: "1em",
68+
color: "gray",
69+
fontWeight: "600",
70+
fontStyle: "semi bold",
71+
fontSize: "12px",
72+
lineHeight: "100%",
73+
letterSpacing: "0%",
74+
}}
75+
variant="overline"
76+
display="block"
77+
gutterBottom
78+
>
79+
{description}
80+
</Typography>
81+
)}
4682
</Box>
4783
);
4884
};
@@ -77,27 +113,15 @@ const BenchmarkListElement = ({
77113
padding: "1rem",
78114
}}
79115
>
80-
<Typography
81-
sx={{ color: "var(--primary-40)" }}
82-
variant="overline"
83-
display="block"
84-
gutterBottom
85-
>
86-
#{(index ?? 0) + 1} created on {format(benchmark?.created_at, "P")}
87-
</Typography>
116+
<Chip
117+
variant="calendar"
118+
label={`Created on: ${format(benchmark?.created_at, "MMM, d, yyyy")}`}
119+
/>
120+
88121
<Box sx={{ display: "flex", justifyContent: "space-between" }}>
89122
<Box sx={{ display: "flex" }}>
90-
<ContentPasteIcon
91-
sx={{
92-
color: "var(--grey-10)",
93-
fontSize: 12,
94-
margin: "1.25rem",
95-
marginLeft: "0.5rem",
96-
marginRight: "0.5rem",
97-
}}
98-
/>
99-
100-
<Box sx={{ margin: "1rem", marginLeft: ".5rem" }}>
123+
<Box sx={{ marginTop: "1.5rem" }}>
124+
<Chip label={(index ?? 0) + 1} variant="task" />
101125
{benchmark.description}
102126
</Box>
103127
</Box>
@@ -118,23 +142,21 @@ const BenchmarkListElement = ({
118142
>
119143
<Info description={"BASELINE LEVEL"}>
120144
{" "}
121-
{benchmark?.baseline_level}%{" "}
145+
<LogicChip data={benchmark?.baseline_level} />
146+
</Info>
147+
<Info description={"TARGET LEVEL"}>
148+
{" "}
149+
<LogicChip data={benchmark?.target_level} />
122150
</Info>
123-
<Info description={"TARGET LEVEL"}> {benchmark?.target_level}% </Info>
124151
<Info description={"CURRENT LEVEL"}>
125152
{" "}
126-
{benchmark?.current_level || "N/A"}{" "}
153+
<LogicChip data={benchmark?.current_level} />
127154
</Info>
128155
<Info description={"# OF TRIALS"}>
129156
{" "}
130-
{benchmark?.number_of_trials || "N/A"}
131-
</Info>
132-
<Info description={"STAFF"}>
133-
<BenchmarkAssignees
134-
benchmark={benchmark}
135-
onAssign={() => setIsAssignmentModalOpen(true)}
136-
/>
157+
<LogicChip data={benchmark?.number_of_trials} notifier={true} />
137158
</Info>
159+
138160
<Info description="DATA">
139161
<Box
140162
sx={{
@@ -151,7 +173,12 @@ const BenchmarkListElement = ({
151173
}}
152174
>
153175
<Link href={`/benchmarks/${benchmark.benchmark_id}`}>
154-
<Button variant="tertiary">Collect Data</Button>
176+
<Button
177+
variant="tertiary"
178+
startIcon={<ContentPasteOutlinedIcon fontSize="medium" />}
179+
>
180+
Collect Data
181+
</Button>
155182
</Link>
156183
</Box>
157184
<Box
@@ -170,6 +197,12 @@ const BenchmarkListElement = ({
170197
</Box>
171198
</Box>
172199
</Info>
200+
<Info description={"Assigned STAFF"}>
201+
<BenchmarkAssignees
202+
benchmark={benchmark}
203+
onAssign={() => setIsAssignmentModalOpen(true)}
204+
/>
205+
</Info>
173206
</Box>
174207
</Box>
175208
{isAssignmentModalOpen && (

‎src/components/design_system/button/Button.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.button {
2-
display: inline-block;
2+
display: inline-flex;
33
border-style: solid;
44
border-width: 1px;
55
cursor: pointer;

‎src/components/design_system/button/Button.stories.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import type { Meta, StoryObj } from "@storybook/react";
22

3+
import ContentPasteOutlinedIcon from "@mui/icons-material/ContentPasteOutlined";
4+
35
import Button from "./Button";
46

57
const meta: Meta<typeof Button> = {
@@ -34,6 +36,33 @@ export const Tertiary: Story = {
3436
},
3537
};
3638

39+
export const PrimaryWithIcon: Story = {
40+
args: {
41+
children: "Button",
42+
size: "large",
43+
variant: "primary",
44+
startIcon: <ContentPasteOutlinedIcon fontSize="medium" />,
45+
},
46+
};
47+
48+
export const SecondaryWithIcon: Story = {
49+
args: {
50+
children: "Button",
51+
size: "large",
52+
variant: "secondary",
53+
startIcon: <ContentPasteOutlinedIcon fontSize="medium" />,
54+
},
55+
};
56+
57+
export const TertiaryWithIcon: Story = {
58+
args: {
59+
children: "Button",
60+
size: "large",
61+
variant: "tertiary",
62+
startIcon: <ContentPasteOutlinedIcon fontSize="medium" />,
63+
},
64+
};
65+
3766
export const PrimarySmall: Story = {
3867
args: {
3968
children: "Button",
@@ -57,3 +86,30 @@ export const TertiarySmall: Story = {
5786
variant: "tertiary",
5887
},
5988
};
89+
90+
export const PrimarySmallWithIcon: Story = {
91+
args: {
92+
children: "Button",
93+
size: "small",
94+
variant: "primary",
95+
startIcon: <ContentPasteOutlinedIcon fontSize="medium" />,
96+
},
97+
};
98+
99+
export const SecondarySmallWithIcon: Story = {
100+
args: {
101+
children: "Button",
102+
size: "small",
103+
variant: "secondary",
104+
startIcon: <ContentPasteOutlinedIcon fontSize="medium" />,
105+
},
106+
};
107+
108+
export const TertiarySmallWithIcon: Story = {
109+
args: {
110+
children: "Button",
111+
size: "small",
112+
variant: "tertiary",
113+
startIcon: <ContentPasteOutlinedIcon fontSize="medium" />,
114+
},
115+
};

‎src/components/design_system/button/Button.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { MouseEventHandler, ReactNode } from "react";
22
import { Button as MuiButton } from "@mui/material";
3-
import { SxProps, Theme } from "@mui/material/styles";
3+
import { SxProps, Theme } from "@mui/material";
44
import classNames from "classnames";
55

66
import classes from "./Button.module.css";
@@ -15,6 +15,7 @@ interface ButtonProps {
1515
sx?: SxProps<Theme>;
1616
type?: "button" | "submit" | "reset";
1717
variant?: "primary" | "secondary" | "tertiary";
18+
startIcon?: ReactNode;
1819
}
1920

2021
function Button({
@@ -27,6 +28,7 @@ function Button({
2728
sx = [],
2829
type,
2930
variant = "primary",
31+
startIcon,
3032
}: ButtonProps) {
3133
return (
3234
<MuiButton
@@ -41,6 +43,7 @@ function Button({
4143
onClick={onClick}
4244
sx={sx}
4345
type={type}
46+
startIcon={startIcon}
4447
>
4548
{children}
4649
</MuiButton>

‎src/components/design_system/chip/Chip.module.css‎

Whitespace-only changes.

‎src/components/design_system/chip/Chip.stories.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
2+
import type { Meta, StoryObj } from "@storybook/react";
3+
import Chip from "./Chip";
4+
5+
const meta = {
6+
title: "Components/Design System/Chip",
7+
component: Chip,
8+
} satisfies Meta<typeof Chip>;
9+
10+
export default meta;
11+
type Story = StoryObj<typeof meta>;
12+
13+
export const Primary: Story = {
14+
args: {
15+
label: "Primary Chip",
16+
variant: "primary",
17+
},
18+
};
19+
20+
export const Empty: Story = {
21+
args: {
22+
label: "0%",
23+
variant: "secondary",
24+
},
25+
};
26+
27+
export const Calendar: Story = {
28+
args: {
29+
label: "Oct 21st 2023",
30+
variant: "calendar",
31+
},
32+
};
33+
34+
export const Task_Chip: Story = {
35+
args: {
36+
label: "1",
37+
variant: "task",
38+
},
39+
};

0 commit comments

Comments
 (0)