Skip to content

Commit dc0854e

Browse files
TomWoodwardTomWoodward
authored
Merge branch 'main' into update-sentry-error-to-no-op
2 parents 759c9f4 + e2c6a1b commit dc0854e

19 files changed

Lines changed: 855 additions & 333 deletions

‎src/components/Banner/Banner.stories.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,6 @@ const BannerContainer = styled.div`
77
position: relative;
88
padding-right: 2.5rem;
99
width: 42rem;
10-
11-
svg {
12-
position: absolute;
13-
top: 1.7rem;
14-
right: 1rem;
15-
cursor: pointer;
16-
}
1710
`;
1811

1912
export const Error = () => (

‎src/components/Checkbox/Checkbox.css‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
/* Checkbox label styles */
2+
.checkbox-label {
3+
font-size: 1.6rem;
4+
display: flex;
5+
align-items: center;
6+
font-weight: var(--checkbox-font-weight, 400);
7+
color: var(--checkbox-color, inherit);
8+
}
9+
10+
.checkbox-label--disabled {
11+
color: var(--checkbox-disabled-color, #e5e5e5);
12+
}
13+
14+
/* Checkbox input/selection styles */
15+
.checkbox-input {
16+
appearance: none;
17+
background-color: var(--checkbox-bg-unchecked, #ffffff);
18+
opacity: var(--checkbox-opacity, 1);
19+
border: var(--checkbox-border-unchecked, 1px solid #6f6f6f);
20+
border-radius: 0.2rem;
21+
transform: translateY(-0.075em);
22+
width: var(--checkbox-size, 1.6rem);
23+
height: var(--checkbox-size, 1.6rem);
24+
margin: 0 1.6rem 0 0;
25+
display: grid;
26+
place-content: center;
27+
}
28+
29+
.checkbox-input::before {
30+
content: "";
31+
border-radius: 0.2rem;
32+
width: var(--checkbox-size, 1.6rem);
33+
height: var(--checkbox-size, 1.6rem);
34+
border: var(--checkbox-border-checked, 1px solid #026AA1);
35+
transform: scale(0);
36+
background-color: var(--checkbox-bg, #026AA1);
37+
background-image: var(--checkbox-checkmark, none);
38+
background-size: 80%;
39+
background-position: center;
40+
background-repeat: no-repeat;
41+
}
42+
43+
.checkbox-input:checked::before {
44+
transform: scale(1);
45+
opacity: var(--checkbox-checked-opacity, 1);
46+
}
47+
48+
.checkbox-input--disabled {
49+
opacity: 0.4;
50+
border: var(--checkbox-disabled-border, 1px solid #d5d5d5);
51+
}
52+
53+
.checkbox-input--disabled:checked::before {
54+
opacity: 0;
55+
}
56+
57+
/* TreeCheckbox specific styles */
58+
.checkbox-label [data-slot="selection"] {
59+
appearance: none;
60+
background-color: var(--checkbox-bg-unchecked, #ffffff);
61+
opacity: var(--checkbox-opacity, 1);
62+
border: var(--checkbox-border-unchecked, 1px solid #6f6f6f);
63+
border-radius: 0.2rem;
64+
transform: translateY(-0.075em);
65+
width: var(--checkbox-size, 1.6rem);
66+
height: var(--checkbox-size, 1.6rem);
67+
margin: 0 1.6rem 0 0;
68+
display: grid;
69+
place-content: center;
70+
}
71+
72+
.checkbox-label [data-slot="selection"]::before {
73+
content: "";
74+
border-radius: 0.2rem;
75+
width: var(--checkbox-size, 1.6rem);
76+
height: var(--checkbox-size, 1.6rem);
77+
border: var(--checkbox-border-checked, 1px solid #026AA1);
78+
transform: scale(0);
79+
background-color: var(--checkbox-bg, #026AA1);
80+
background-image: var(--checkbox-checkmark, none);
81+
background-size: 80%;
82+
background-position: center;
83+
background-repeat: no-repeat;
84+
}
85+
86+
.checkbox-label[data-selected] [data-slot="selection"]::before {
87+
transform: scale(1);
88+
opacity: var(--checkbox-checked-opacity, 1);
89+
}
90+
91+
.checkbox-label[data-indeterminate="true"] [data-slot="selection"]::before {
92+
content: "";
93+
position: relative;
94+
transform: scale(1);
95+
background-color: var(--checkbox-indeterminate-bg, #026AA1);
96+
border: none;
97+
background-image: var(--checkbox-indeterminate-icon, none);
98+
}
99+
100+
.checkbox-label--disabled [data-slot="selection"] {
101+
opacity: 0.4;
102+
border: var(--checkbox-disabled-border, 1px solid #d5d5d5);
103+
}
104+
105+
.checkbox-label--disabled[data-selected] [data-slot="selection"]::before {
106+
opacity: 0;
107+
}

‎src/components/Checkbox/Checkbox.tsx‎

Lines changed: 53 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,10 @@
1+
import type React from "react";
12
import { LabelHTMLAttributes, PropsWithChildren } from "react";
2-
import { checkboxLabelStyles, checkboxInputStyles, CheckboxVariant, CheckboxSize } from "./sharedCheckboxStyles";
3-
import styled from "styled-components";
3+
import { checkboxVariants, CheckboxVariant, CheckboxSize } from "./sharedCheckboxStyles";
44
import { InputHTMLAttributes } from "react";
5-
6-
const StyledLabel = styled.label<{ bold: boolean; variant: CheckboxVariant; isDisabled?: boolean; }>`
7-
${checkboxLabelStyles}
8-
`;
9-
10-
// https://moderncss.dev/pure-css-custom-checkbox-style/
11-
const StyledInput = styled.input<{ variant: CheckboxVariant; checkboxSize: CheckboxSize; isDisabled?: boolean; }>`
12-
${checkboxInputStyles}
13-
`;
5+
import { colors } from "../../theme";
6+
import classNames from "classnames";
7+
import "./Checkbox.css";
148

159
type CheckboxProps = PropsWithChildren<
1610
Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
@@ -20,11 +14,55 @@ type CheckboxProps = PropsWithChildren<
2014
labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
2115
}>;
2216

23-
export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, ...props }: CheckboxProps) => {
17+
export const Checkbox = ({ children, disabled, variant = 'primary', bold = false, size = 1.6, labelProps, className, style, ...props }: CheckboxProps) => {
18+
// Get variant styles for CSS variables
19+
const variantStyles = disabled ? checkboxVariants.disabled : checkboxVariants[variant];
20+
21+
// Merge labelProps className with our label classes
22+
const labelClassName = classNames(
23+
'checkbox-label',
24+
{ 'checkbox-label--disabled': disabled },
25+
labelProps?.className
26+
);
27+
28+
// Merge labelProps style with our CSS variables
29+
const labelStyle = {
30+
'--checkbox-font-weight': bold ? 700 : 400,
31+
'--checkbox-color': variantStyles.color,
32+
'--checkbox-disabled-color': colors.palette.neutralLight,
33+
...labelProps?.style
34+
} as unknown as React.CSSProperties;
35+
36+
// Merge input className
37+
const inputClassName = classNames(
38+
'checkbox-input',
39+
{ 'checkbox-input--disabled': disabled },
40+
className
41+
);
42+
43+
// Merge input style with our CSS variables
44+
const inputStyle = {
45+
'--checkbox-size': `${size}rem`,
46+
'--checkbox-bg-unchecked': colors.palette.white,
47+
'--checkbox-bg': variantStyles.backgroundColor,
48+
'--checkbox-border-unchecked': variantStyles.unCheckedBorder,
49+
'--checkbox-border-checked': variantStyles.checkedBorder,
50+
'--checkbox-checkmark': variantStyles.backgroundImage === 'none' ? 'none' : `url('${variantStyles.backgroundImage}')`,
51+
'--checkbox-opacity': disabled ? '0.4' : '1',
52+
'--checkbox-disabled-border': `1px solid ${colors.palette.pale}`,
53+
...style
54+
} as unknown as React.CSSProperties;
55+
2456
return (
25-
<StyledLabel bold={bold} variant={variant} isDisabled={disabled} {...labelProps}>
26-
<StyledInput {...props} type="checkbox" variant={variant} checkboxSize={size} isDisabled={disabled} disabled={disabled} />
57+
<label {...labelProps} className={labelClassName} style={labelStyle}>
58+
<input
59+
{...props}
60+
type="checkbox"
61+
className={inputClassName}
62+
style={inputStyle}
63+
disabled={disabled}
64+
/>
2765
{children}
28-
</StyledLabel>
66+
</label>
2967
);
3068
};

‎src/components/Checkbox/__snapshots__/Checkbox.spec.tsx.snap‎

Lines changed: 84 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,29 @@
33
exports[`Checkbox allows setting props on label 1`] = `
44
<label
55
aria-label="custom label"
6-
className="sc-bczRLJ XfrOB"
6+
className="checkbox-label"
7+
style={
8+
Object {
9+
"--checkbox-color": "inherit",
10+
"--checkbox-disabled-color": "#e5e5e5",
11+
"--checkbox-font-weight": 700,
12+
}
13+
}
714
>
815
<input
9-
className="sc-gsnTZi dskNep"
16+
className="checkbox-input"
17+
style={
18+
Object {
19+
"--checkbox-bg": "#ffffff",
20+
"--checkbox-bg-unchecked": "#ffffff",
21+
"--checkbox-border-checked": "1px solid #d5d5d5",
22+
"--checkbox-border-unchecked": "1px solid #d5d5d5",
23+
"--checkbox-checkmark": "url('data:image/svg+xml,<svg height=\\"125px\\" width=\\"125px\\" version=\\"1.1\\" id=\\"Capa_1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" viewBox=\\"0 0 17.837 17.837\\" xml:space=\\"preserve\\" fill=\\"%23000000\\"><g id=\\"SVGRepo_bgCarrier\\" stroke-width=\\"0\\"></g><g id=\\"SVGRepo_tracerCarrier\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></g><g id=\\"SVGRepo_iconCarrier\\"><g><path style=\\"fill:%235e5e5e;\\" d=\\"M16.145,2.571c-0.272-0.273-0.718-0.273-0.99,0L6.92,10.804l-4.241-4.27 c-0.272-0.274-0.715-0.274-0.989,0L0.204,8.019c-0.272,0.271-0.272,0.717,0,0.99l6.217,6.258c0.272,0.271,0.715,0.271,0.99,0 L17.63,5.047c0.276-0.273,0.276-0.72,0-0.994L16.145,2.571z\\"></path></g></g></svg>')",
24+
"--checkbox-disabled-border": "1px solid #d5d5d5",
25+
"--checkbox-opacity": "1",
26+
"--checkbox-size": "2rem",
27+
}
28+
}
1029
type="checkbox"
1130
/>
1231
Click Me
@@ -15,11 +34,30 @@ exports[`Checkbox allows setting props on label 1`] = `
1534

1635
exports[`Checkbox handles disabled state 1`] = `
1736
<label
18-
className="sc-bczRLJ jDFcYw"
37+
className="checkbox-label checkbox-label--disabled"
38+
style={
39+
Object {
40+
"--checkbox-color": "inherit",
41+
"--checkbox-disabled-color": "#e5e5e5",
42+
"--checkbox-font-weight": 400,
43+
}
44+
}
1945
>
2046
<input
21-
className="sc-gsnTZi dJvfbo"
47+
className="checkbox-input checkbox-input--disabled"
2248
disabled={true}
49+
style={
50+
Object {
51+
"--checkbox-bg": "#ffffff",
52+
"--checkbox-bg-unchecked": "#ffffff",
53+
"--checkbox-border-checked": "1px solid #d5d5d5",
54+
"--checkbox-border-unchecked": "1px solid #d5d5d5",
55+
"--checkbox-checkmark": "none",
56+
"--checkbox-disabled-border": "1px solid #d5d5d5",
57+
"--checkbox-opacity": "0.4",
58+
"--checkbox-size": "1.6rem",
59+
}
60+
}
2361
type="checkbox"
2462
/>
2563
Click Me
@@ -28,10 +66,29 @@ exports[`Checkbox handles disabled state 1`] = `
2866

2967
exports[`Checkbox handles options 1`] = `
3068
<label
31-
className="sc-bczRLJ XfrOB"
69+
className="checkbox-label"
70+
style={
71+
Object {
72+
"--checkbox-color": "inherit",
73+
"--checkbox-disabled-color": "#e5e5e5",
74+
"--checkbox-font-weight": 700,
75+
}
76+
}
3277
>
3378
<input
34-
className="sc-gsnTZi dskNep"
79+
className="checkbox-input"
80+
style={
81+
Object {
82+
"--checkbox-bg": "#ffffff",
83+
"--checkbox-bg-unchecked": "#ffffff",
84+
"--checkbox-border-checked": "1px solid #d5d5d5",
85+
"--checkbox-border-unchecked": "1px solid #d5d5d5",
86+
"--checkbox-checkmark": "url('data:image/svg+xml,<svg height=\\"125px\\" width=\\"125px\\" version=\\"1.1\\" id=\\"Capa_1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" viewBox=\\"0 0 17.837 17.837\\" xml:space=\\"preserve\\" fill=\\"%23000000\\"><g id=\\"SVGRepo_bgCarrier\\" stroke-width=\\"0\\"></g><g id=\\"SVGRepo_tracerCarrier\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></g><g id=\\"SVGRepo_iconCarrier\\"><g><path style=\\"fill:%235e5e5e;\\" d=\\"M16.145,2.571c-0.272-0.273-0.718-0.273-0.99,0L6.92,10.804l-4.241-4.27 c-0.272-0.274-0.715-0.274-0.989,0L0.204,8.019c-0.272,0.271-0.272,0.717,0,0.99l6.217,6.258c0.272,0.271,0.715,0.271,0.99,0 L17.63,5.047c0.276-0.273,0.276-0.72,0-0.994L16.145,2.571z\\"></path></g></g></svg>')",
87+
"--checkbox-disabled-border": "1px solid #d5d5d5",
88+
"--checkbox-opacity": "1",
89+
"--checkbox-size": "2rem",
90+
}
91+
}
3592
type="checkbox"
3693
/>
3794
Click Me
@@ -40,10 +97,29 @@ exports[`Checkbox handles options 1`] = `
4097

4198
exports[`Checkbox matches snapshot 1`] = `
4299
<label
43-
className="sc-bczRLJ fIuhsq"
100+
className="checkbox-label"
101+
style={
102+
Object {
103+
"--checkbox-color": "inherit",
104+
"--checkbox-disabled-color": "#e5e5e5",
105+
"--checkbox-font-weight": 400,
106+
}
107+
}
44108
>
45109
<input
46-
className="sc-gsnTZi ehAXiz"
110+
className="checkbox-input"
111+
style={
112+
Object {
113+
"--checkbox-bg": "#026AA1",
114+
"--checkbox-bg-unchecked": "#ffffff",
115+
"--checkbox-border-checked": "1px solid #026AA1",
116+
"--checkbox-border-unchecked": "1px solid #6f6f6f",
117+
"--checkbox-checkmark": "url('data:image/svg+xml,<svg height=\\"125px\\" width=\\"125px\\" version=\\"1.1\\" id=\\"Capa_1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\" viewBox=\\"0 0 17.837 17.837\\" xml:space=\\"preserve\\" fill=\\"%23000000\\"><g id=\\"SVGRepo_bgCarrier\\" stroke-width=\\"0\\"></g><g id=\\"SVGRepo_tracerCarrier\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\"></g><g id=\\"SVGRepo_iconCarrier\\"><g><path style=\\"fill:%23fff;\\" d=\\"M16.145,2.571c-0.272-0.273-0.718-0.273-0.99,0L6.92,10.804l-4.241-4.27 c-0.272-0.274-0.715-0.274-0.989,0L0.204,8.019c-0.272,0.271-0.272,0.717,0,0.99l6.217,6.258c0.272,0.271,0.715,0.271,0.99,0 L17.63,5.047c0.276-0.273,0.276-0.72,0-0.994L16.145,2.571z\\"></path></g></g></svg>')",
118+
"--checkbox-disabled-border": "1px solid #d5d5d5",
119+
"--checkbox-opacity": "1",
120+
"--checkbox-size": "1.6rem",
121+
}
122+
}
47123
type="checkbox"
48124
/>
49125
Click Me

0 commit comments

Comments
 (0)