@uva-glass/component-library 3.28.0 → 3.28.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/CheckboxButtonBar.css +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js +73 -56
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
- package/dist/components/Icon/icons/index.js +1 -1
- package/dist/components/Icon/icons/index.js.map +1 -1
- package/dist/setupTests.js +6 -2
- package/dist/setupTests.js.map +1 -1
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
._checkbox-button-
|
|
1
|
+
._checkbox-button-bar__container_15680_1{display:grid;gap:.5rem;grid-template-columns:1fr;grid-template-rows:auto auto auto;width:fit-content}._checkbox-button-bar__container--label-left_15680_9{grid-template-columns:auto 1fr;grid-template-rows:auto auto}._checkbox-button-bar__label_15680_14{align-self:center;grid-column:1;grid-row:1}._checkbox-button-bar__bar_15680_20{grid-column:1;grid-row:2}._checkbox-button-bar__bar--label-left_15680_25{grid-column:2;grid-row:1}._checkbox-button-bar__footer_15680_30{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential);grid-column:1;grid-row:3}._checkbox-button-bar__footer--label-left_15680_37{grid-column:2;grid-row:2}._checkbox-button-bar__row_15680_42{align-items:center;background-color:var(--new-color-uva-white);border:1px solid var(--new-color-grey-700);border-radius:.5rem;display:flex;flex-wrap:nowrap;gap:.25rem;padding:.25rem;width:fit-content}._checkbox-button-bar__row--not-validated_15680_54{border-color:var(--new-color-red-600)}
|
|
@@ -1,71 +1,88 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useState as
|
|
3
|
-
import { c as
|
|
1
|
+
import { jsxs as i, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { useState as C } from "react";
|
|
3
|
+
import { c as r } from "../../clsx-OuTLNxxd.js";
|
|
4
4
|
import { Label as g } from "../Label/Label.js";
|
|
5
5
|
import { FeedbackBox as S } from "../FeedbackBox/FeedbackBox.js";
|
|
6
6
|
import { ControlsButton as j } from "../ControlsButton/ControlsButton.js";
|
|
7
|
-
import '../../assets/CheckboxButtonBar.css';const
|
|
8
|
-
"checkbox-button-bar__container": "_checkbox-button-
|
|
9
|
-
"checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-
|
|
10
|
-
"checkbox-button-
|
|
11
|
-
"checkbox-button-
|
|
12
|
-
"checkbox-button-
|
|
13
|
-
"checkbox-button-
|
|
14
|
-
"checkbox-button-bar__footer": "_checkbox-button-
|
|
7
|
+
import '../../assets/CheckboxButtonBar.css';const e = {
|
|
8
|
+
"checkbox-button-bar__container": "_checkbox-button-bar__container_15680_1",
|
|
9
|
+
"checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_15680_9",
|
|
10
|
+
"checkbox-button-bar__label": "_checkbox-button-bar__label_15680_14",
|
|
11
|
+
"checkbox-button-bar__bar": "_checkbox-button-bar__bar_15680_20",
|
|
12
|
+
"checkbox-button-bar__bar--label-left": "_checkbox-button-bar__bar--label-left_15680_25",
|
|
13
|
+
"checkbox-button-bar__footer": "_checkbox-button-bar__footer_15680_30",
|
|
14
|
+
"checkbox-button-bar__footer--label-left": "_checkbox-button-bar__footer--label-left_15680_37",
|
|
15
|
+
"checkbox-button-bar__row": "_checkbox-button-bar__row_15680_42",
|
|
16
|
+
"checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_15680_54"
|
|
15
17
|
}, B = ({
|
|
16
|
-
checkboxes:
|
|
17
|
-
defaultValues:
|
|
18
|
-
label:
|
|
19
|
-
labelPosition:
|
|
18
|
+
checkboxes: u,
|
|
19
|
+
defaultValues: c,
|
|
20
|
+
label: h,
|
|
21
|
+
labelPosition: _ = "top",
|
|
20
22
|
required: m = !1,
|
|
21
23
|
notValidated: d = !1,
|
|
22
|
-
notValidatedText:
|
|
23
|
-
actAsRadioButtonBar:
|
|
24
|
-
footerText:
|
|
24
|
+
notValidatedText: a = "",
|
|
25
|
+
actAsRadioButtonBar: l = !1,
|
|
26
|
+
footerText: k = "",
|
|
25
27
|
disableGroup: p = !1,
|
|
26
|
-
onSetValues:
|
|
28
|
+
onSetValues: x
|
|
27
29
|
}) => {
|
|
28
|
-
const [
|
|
29
|
-
|
|
30
|
-
), v = (
|
|
31
|
-
let
|
|
32
|
-
|
|
30
|
+
const [s, f] = C(
|
|
31
|
+
c && !l ? c.map(String) : c && l ? c.slice(0, 1) : []
|
|
32
|
+
), v = (o) => {
|
|
33
|
+
let b = s;
|
|
34
|
+
l ? (f([o]), x([o])) : (b.includes(o) ? b = b.filter((n) => n !== o) : b = [...b, o], f(b), x(b));
|
|
33
35
|
};
|
|
34
|
-
return /* @__PURE__ */
|
|
36
|
+
return /* @__PURE__ */ i(
|
|
35
37
|
"div",
|
|
36
38
|
{
|
|
37
|
-
className:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
),
|
|
39
|
+
className: r(e["checkbox-button-bar__container"], [
|
|
40
|
+
_ === "left" && e["checkbox-button-bar__container--label-left"]
|
|
41
|
+
]),
|
|
41
42
|
children: [
|
|
42
|
-
|
|
43
|
-
/* @__PURE__ */
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
{
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
43
|
+
/* @__PURE__ */ t("div", { className: e["checkbox-button-bar__label"], children: h && /* @__PURE__ */ t(g, { htmlFor: "", required: m, children: h }) }),
|
|
44
|
+
/* @__PURE__ */ t(
|
|
45
|
+
"div",
|
|
46
|
+
{
|
|
47
|
+
className: r(e["checkbox-button-bar__bar"], [
|
|
48
|
+
_ === "left" && e["checkbox-button-bar__bar--label-left"]
|
|
49
|
+
]),
|
|
50
|
+
children: /* @__PURE__ */ t(
|
|
51
|
+
"div",
|
|
52
|
+
{
|
|
53
|
+
className: r(e["checkbox-button-bar__row"], {
|
|
54
|
+
[e["checkbox-button-bar__row--not-validated"]]: d || a
|
|
55
|
+
}),
|
|
56
|
+
children: u.map(({ label: o, value: b, prefix: n, disabled: w }) => /* @__PURE__ */ t(
|
|
57
|
+
j,
|
|
58
|
+
{
|
|
59
|
+
type: "checkbox",
|
|
60
|
+
label: o,
|
|
61
|
+
prefix: n,
|
|
62
|
+
forceSquared: !0,
|
|
63
|
+
value: b,
|
|
64
|
+
checked: s.includes(b),
|
|
65
|
+
disabled: w || p,
|
|
66
|
+
onSetValue: (N) => v(N.target.value)
|
|
67
|
+
},
|
|
68
|
+
`${b}`
|
|
69
|
+
))
|
|
70
|
+
}
|
|
71
|
+
)
|
|
72
|
+
}
|
|
73
|
+
),
|
|
74
|
+
/* @__PURE__ */ i(
|
|
75
|
+
"div",
|
|
76
|
+
{
|
|
77
|
+
className: r(e["checkbox-button-bar__footer"], [
|
|
78
|
+
_ === "left" && e["checkbox-button-bar__footer--label-left"]
|
|
79
|
+
]),
|
|
80
|
+
children: [
|
|
81
|
+
k && /* @__PURE__ */ t("div", { className: e["checkbox-button-bar__footer"], children: k }),
|
|
82
|
+
a !== "" && /* @__PURE__ */ t(S, { level: "error", feedback: a })
|
|
83
|
+
]
|
|
84
|
+
}
|
|
85
|
+
)
|
|
69
86
|
]
|
|
70
87
|
}
|
|
71
88
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n label: string;\n value: string;\n prefix?: string;\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value, prefix and disabled*/\n checkboxes: CheckboxProps[];\n //** array with value(s) */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to color border red to show missing in validation; otherwise, `false`. */\n notValidated?: boolean;\n /** error text to display under the bar */\n notValidatedText?: string;\n /** returns an array with only one value */\n actAsRadioButtonBar?: boolean;\n /** optional footer text */\n footerText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidated = false,\n notValidatedText = '',\n actAsRadioButtonBar = false,\n footerText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const [currentValues, setCurrentValues] = useState<string[]>(\n defaultValues && !actAsRadioButtonBar\n ? defaultValues.map(String)\n : defaultValues && actAsRadioButtonBar\n ? defaultValues.slice(0, 1)\n : []\n );\n\n const handleChange = (value: string) => {\n let values = currentValues;\n\n if (actAsRadioButtonBar) {\n setCurrentValues([value]);\n onSetValues([value]);\n } else {\n if (values.includes(value)) {\n values = values.filter((val) => val !== value);\n } else {\n values = [...values, value];\n }\n setCurrentValues(values);\n onSetValues(values);\n }\n };\n\n return (\n <div\n className={clsx(
|
|
1
|
+
{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { Label } from 'components/Label';\nimport { FeedbackBox } from 'components/FeedbackBox';\nimport { ControlsButton } from 'components/ControlsButton';\n\ntype CheckboxProps = {\n label: string;\n value: string;\n prefix?: string;\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value, prefix and disabled*/\n checkboxes: CheckboxProps[];\n //** array with value(s) */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\n /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */\n required?: boolean;\n /** `true` to color border red to show missing in validation; otherwise, `false`. */\n notValidated?: boolean;\n /** error text to display under the bar */\n notValidatedText?: string;\n /** returns an array with only one value */\n actAsRadioButtonBar?: boolean;\n /** optional footer text */\n footerText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidated = false,\n notValidatedText = '',\n actAsRadioButtonBar = false,\n footerText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const [currentValues, setCurrentValues] = useState<string[]>(\n defaultValues && !actAsRadioButtonBar\n ? defaultValues.map(String)\n : defaultValues && actAsRadioButtonBar\n ? defaultValues.slice(0, 1)\n : []\n );\n\n const handleChange = (value: string) => {\n let values = currentValues;\n\n if (actAsRadioButtonBar) {\n setCurrentValues([value]);\n onSetValues([value]);\n } else {\n if (values.includes(value)) {\n values = values.filter((val) => val !== value);\n } else {\n values = [...values, value];\n }\n setCurrentValues(values);\n onSetValues(values);\n }\n };\n\n return (\n <div\n className={clsx(styles['checkbox-button-bar__container'], [\n labelPosition === 'left' && styles['checkbox-button-bar__container--label-left'],\n ])}\n >\n <div className={styles['checkbox-button-bar__label']}>\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n </div>\n <div\n className={clsx(styles['checkbox-button-bar__bar'], [\n labelPosition === 'left' && styles['checkbox-button-bar__bar--label-left'],\n ])}\n >\n <div\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-validated']]: notValidated || notValidatedText,\n })}\n >\n {checkboxes.map(({ label, value, prefix, disabled }) => (\n <ControlsButton\n key={`${value}`}\n type=\"checkbox\"\n label={label}\n prefix={prefix}\n forceSquared={true}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n ))}\n </div>\n </div>\n <div\n className={clsx(styles['checkbox-button-bar__footer'], [\n labelPosition === 'left' && styles['checkbox-button-bar__footer--label-left'],\n ])}\n >\n {footerText && <div className={styles['checkbox-button-bar__footer']}>{footerText}</div>}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","actAsRadioButtonBar","footerText","disableGroup","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","prefix","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;;GAuCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,cAAAC,IAAe;AAAA,EACf,kBAAAC,IAAmB;AAAA,EACnB,qBAAAC,IAAsB;AAAA,EACtB,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAA,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCZ,KAAiB,CAACM,IACdN,EAAc,IAAI,MAAM,IACxBA,KAAiBM,IACfN,EAAc,MAAM,GAAG,CAAC,IACxB,CAAA;AAAA,EACR,GAEMa,IAAe,CAACC,MAAkB;AACtC,QAAIC,IAASL;AAEb,IAAIJ,KACeK,EAAA,CAACG,CAAK,CAAC,GACZL,EAAA,CAACK,CAAK,CAAC,MAEfC,EAAO,SAASD,CAAK,IACvBC,IAASA,EAAO,OAAO,CAACC,MAAQA,MAAQF,CAAK,IAEpCC,IAAA,CAAC,GAAGA,GAAQD,CAAK,GAE5BH,EAAiBI,CAAM,GACvBN,EAAYM,CAAM;AAAA,EAEtB;AAGE,SAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,gCAAgC,GAAG;AAAA,QACxDjB,MAAkB,UAAUiB,EAAO,4CAA4C;AAAA,MAAA,CAChF;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWD,EAAO,4BAA4B,GAChD,UAAAlB,KACE,gBAAAmB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAlB,GACf,UAAAF,EACH,CAAA,GAEJ;AAAA,QACA,gBAAAmB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,cAClDjB,MAAkB,UAAUiB,EAAO,sCAAsC;AAAA,YAAA,CAC1E;AAAA,YAED,UAAA,gBAAAC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,kBAClD,CAACA,EAAO,yCAAyC,CAAC,GAAGf,KAAgBC;AAAA,gBAAA,CACtE;AAAA,gBAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAa,GAAO,QAAAQ,GAAQ,UAAAC,EAAA,MACvC,gBAAAH;AAAA,kBAACI;AAAA,kBAAA;AAAA,oBAEC,MAAK;AAAA,oBACL,OAAOvB;AAAAA,oBACP,QAAAqB;AAAA,oBACA,cAAc;AAAA,oBACd,OAAAR;AAAA,oBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,oBACrC,UAAUS,KAAYf;AAAA,oBACtB,YAAY,CAACiB,MAAUZ,EAAaY,EAAM,OAAO,KAAK;AAAA,kBAAA;AAAA,kBARjD,GAAGX,CAAK;AAAA,gBAUhB,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QACF;AAAA,QACA,gBAAAG;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWC,EAAKC,EAAO,6BAA6B,GAAG;AAAA,cACrDjB,MAAkB,UAAUiB,EAAO,yCAAyC;AAAA,YAAA,CAC7E;AAAA,YAEA,UAAA;AAAA,cAAAZ,uBAAe,OAAI,EAAA,WAAWY,EAAO,6BAA6B,GAAI,UAAWZ,GAAA;AAAA,cACjFF,MAAqB,MAAM,gBAAAe,EAACM,KAAY,OAAM,SAAQ,UAAUrB,EAAkB,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACrF;AAAA,IAAA;AAAA,EACF;AAEJ;"}
|
|
@@ -315,7 +315,7 @@ const n = ({
|
|
|
315
315
|
title: l,
|
|
316
316
|
titleId: C,
|
|
317
317
|
...t
|
|
318
|
-
}) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": C, ...t }, l ? /* @__PURE__ */ e.createElement("title", { id: C }, l) : null, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "
|
|
318
|
+
}) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": C, ...t }, l ? /* @__PURE__ */ e.createElement("title", { id: C }, l) : null, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M18 1.93945L22.0607 6.00011L12.0607 16.0001H8V11.9395L18 1.93945ZM9.5 12.5608V14.5001H11.4393L19.9393 6.00011L18 4.06077L9.5 12.5608ZM3 3.00011H12V4.50011H4.5V19.5001H19.5V12.0001H21V21.0001H3V3.00011Z", fill: "currentColor" })), S1 = ({
|
|
319
319
|
title: l,
|
|
320
320
|
titleId: C,
|
|
321
321
|
...t
|