Skip to content

Commit ac5380c

Browse files
defelmnqdefelmnq
authored
Merge branch 'main' into internal-557
2 parents d700601 + 8a24372 commit ac5380c

File tree

6 files changed

+168
-0
lines changed

6 files changed

+168
-0
lines changed

‎site/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"@mui/utils": "5.16.14",
5252
"@mui/x-tree-view": "7.25.0",
5353
"@radix-ui/react-avatar": "1.1.2",
54+
"@radix-ui/react-checkbox": "1.1.4",
5455
"@radix-ui/react-collapsible": "1.1.2",
5556
"@radix-ui/react-dialog": "1.1.4",
5657
"@radix-ui/react-dropdown-menu": "2.1.4",

‎site/pnpm-lock.yaml

+32
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/src/components/Checkbox/Checkbox.stories.tsx

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import React from "react";
3+
import { Checkbox } from "./Checkbox";
4+
5+
const meta: Meta<typeof Checkbox> = {
6+
title: "components/Checkbox",
7+
component: Checkbox,
8+
args: {},
9+
argTypes: {
10+
checked: {
11+
control: "boolean",
12+
description: "The controlled checked state of the checkbox",
13+
},
14+
defaultChecked: {
15+
control: "boolean",
16+
description: "The default checked state when initially rendered",
17+
},
18+
disabled: {
19+
control: "boolean",
20+
description:
21+
"When true, prevents the user from interacting with the checkbox",
22+
},
23+
},
24+
};
25+
26+
export default meta;
27+
type Story = StoryObj<typeof Checkbox>;
28+
29+
export const Unchecked: Story = {};
30+
31+
export const Checked: Story = {
32+
args: {
33+
defaultChecked: true,
34+
checked: true,
35+
},
36+
};
37+
38+
export const Disabled: Story = {
39+
args: {
40+
disabled: true,
41+
},
42+
};
43+
44+
export const DisabledChecked: Story = {
45+
args: {
46+
disabled: true,
47+
defaultChecked: true,
48+
checked: true,
49+
},
50+
};
51+
52+
export const CustomStyling: Story = {
53+
args: {
54+
className: "h-6 w-6 rounded-full",
55+
},
56+
};
57+
58+
export const WithLabel: Story = {
59+
render: () => (
60+
<div className="flex gap-3">
61+
<Checkbox id="terms" />
62+
<div className="grid">
63+
<label
64+
htmlFor="terms"
65+
className="text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:text-content-disabled"
66+
>
67+
Accept terms and conditions
68+
</label>
69+
<p className="text-sm text-content-secondary mt-1">
70+
You agree to our Terms of Service and Privacy Policy.
71+
</p>
72+
</div>
73+
</div>
74+
),
75+
};
76+
77+
export const Indeterminate: Story = {
78+
render: () => {
79+
const [checked, setChecked] = React.useState<boolean | "indeterminate">(
80+
"indeterminate",
81+
);
82+
return (
83+
<Checkbox
84+
checked={checked}
85+
onCheckedChange={(value) => setChecked(value)}
86+
/>
87+
);
88+
},
89+
};

‎site/src/components/Checkbox/Checkbox.tsx

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* Copied from shadc/ui on 04/03/2025
3+
* @see {@link https://ui.shadcn.com/docs/components/checkbox}
4+
*/
5+
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
6+
import { Check, Minus } from "lucide-react";
7+
import * as React from "react";
8+
9+
import { cn } from "utils/cn";
10+
11+
export const Checkbox = React.forwardRef<
12+
React.ElementRef<typeof CheckboxPrimitive.Root>,
13+
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
14+
>(({ className, ...props }, ref) => (
15+
<CheckboxPrimitive.Root
16+
ref={ref}
17+
className={cn(
18+
`peer h-6 w-6 shrink-0 rounded-sm border border-border border-solid
19+
focus-visible:outline-none focus-visible:ring-2
20+
focus-visible:ring-content-link focus-visible:ring-offset-4 focus-visible:ring-offset-surface-primary
21+
disabled:cursor-not-allowed disabled:bg-surface-primary disabled:data-[state=checked]:bg-surface-tertiary
22+
data-[state=unchecked]:bg-surface-primary
23+
data-[state=checked]:bg-surface-invert-primary data-[state=checked]:text-content-invert
24+
hover:border-border-hover hover:data-[state=checked]:bg-surface-invert-secondary`,
25+
className,
26+
)}
27+
{...props}
28+
>
29+
<CheckboxPrimitive.Indicator
30+
className={cn("flex items-center justify-center text-current relative")}
31+
>
32+
<div className="flex">
33+
{(props.checked === true || props.defaultChecked === true) && (
34+
<Check className="w-5 h-5" strokeWidth={2.5} />
35+
)}
36+
{props.checked === "indeterminate" && (
37+
<Minus className="w-5 h-5" strokeWidth={2.5} />
38+
)}
39+
</div>
40+
</CheckboxPrimitive.Indicator>
41+
</CheckboxPrimitive.Root>
42+
));

‎site/src/index.css

+2
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
--border-default: 240 6% 90%;
3232
--border-success: 142 76% 36%;
3333
--border-destructive: 0 84% 60%;
34+
--border-hover: 240, 5%, 34%;
3435
--overlay-default: 240 5% 84% / 80%;
3536
--radius: 0.5rem;
3637
--highlight-purple: 262 83% 58%;
@@ -67,6 +68,7 @@
6768
--border-default: 240 4% 16%;
6869
--border-success: 142 76% 36%;
6970
--border-destructive: 0 91% 71%;
71+
--border-hover: 240, 5%, 34%;
7072
--overlay-default: 240 10% 4% / 80%;
7173
--highlight-purple: 252 95% 85%;
7274
--highlight-green: 141 79% 85%;

‎site/tailwind.config.js

+2
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,8 @@ module.exports = {
5353
border: {
5454
DEFAULT: "hsl(var(--border-default))",
5555
destructive: "hsl(var(--border-destructive))",
56+
success: "hsl(var(--border-success))",
57+
hover: "hsl(var(--border-hover))",
5658
},
5759
overlay: "hsla(var(--overlay-default))",
5860
input: "hsl(var(--input))",

0 commit comments

Comments
 (0)