@uva-glass/component-library 3.19.4 → 3.21.0
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/assets/ControlsButton.css +1 -0
- package/dist/assets/PeriodSelector.css +1 -1
- package/dist/assets/RadioTabSelector.css +1 -0
- package/dist/components/Buttons/Button.stories.js +1 -1
- package/dist/components/Buttons/LinkButton.stories.js +1 -1
- package/dist/components/Buttons/MenuButton.stories.js +1 -1
- package/dist/components/Checkbox/Checkbox.stories.js +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.d.ts +5 -2
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js +54 -47
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +16 -4
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map +1 -1
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.test.js +17 -19
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.test.js.map +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.js +1 -1
- package/dist/components/Chip/Chip.stories.js +1 -1
- package/dist/components/ControlsButton/ControlsButton.d.ts +18 -0
- package/dist/components/ControlsButton/ControlsButton.js +46 -0
- package/dist/components/ControlsButton/ControlsButton.js.map +1 -0
- package/dist/components/ControlsButton/ControlsButton.stories.d.ts +5 -0
- package/dist/components/ControlsButton/ControlsButton.stories.js +45 -0
- package/dist/components/ControlsButton/ControlsButton.stories.js.map +1 -0
- package/dist/components/ControlsButton/index.d.ts +1 -0
- package/dist/components/ControlsButton/index.js +5 -0
- package/dist/components/Drawer/Drawer.stories.js +1 -1
- package/dist/components/FormInput/FormInput.js +1 -1
- package/dist/components/FormInput/FormInput.stories.js +1 -1
- package/dist/components/IconButton/IconButton.stories.js +1 -1
- package/dist/components/InputField/InputField.stories.js +1 -1
- package/dist/components/ModalDialog/ModalDialog.stories.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.js +1 -1
- package/dist/components/MultiSelectBox/MultiSelectBox.stories.js +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.js +31 -30
- package/dist/components/PeriodSelector/PeriodSelector.js.map +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.stories.js +1 -1
- package/dist/components/RadioGroup/RadioGroup.stories.js +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.d.ts +25 -0
- package/dist/components/RadioTabSelector/RadioTabSelector.js +89 -0
- package/dist/components/RadioTabSelector/RadioTabSelector.js.map +1 -0
- package/dist/components/RadioTabSelector/RadioTabSelector.stories.d.ts +5 -0
- package/dist/components/RadioTabSelector/RadioTabSelector.stories.js +60 -0
- package/dist/components/RadioTabSelector/RadioTabSelector.stories.js.map +1 -0
- package/dist/components/RadioTabSelector/index.d.ts +1 -0
- package/dist/components/RadioTabSelector/index.js +5 -0
- package/dist/components/RadioTabSelector/index.js.map +1 -0
- package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js +1 -1
- package/dist/components/RteEditor/RteEditor.js +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.js +1 -1
- package/dist/components/Sortable/Sortable.stories.js +1 -1
- package/dist/components/TextArea/TextArea.stories.js +1 -1
- package/dist/components/TextArea/TextArea.test.js +1 -1
- package/dist/components/ToggleSwitch/ToggleSwitch.stories.js +1 -1
- package/dist/components/VarIndicator/VarIndicator.stories.js +1 -1
- package/dist/components/index.d.ts +2 -1
- package/dist/components/index.js +46 -44
- package/dist/components/index.js.map +1 -1
- package/dist/{index-BCvy9BiK.js → index-Dwqes6RH.js} +5 -2
- package/dist/{index-BCvy9BiK.js.map → index-Dwqes6RH.js.map} +1 -1
- package/dist/index.js +46 -44
- package/dist/index.js.map +1 -1
- package/dist/storybook__react.d.js +1 -1
- package/package.json +22 -22
- package/dist/assets/CheckboxButton.css +0 -1
- package/dist/components/CheckboxButton/CheckboxButton.d.ts +0 -16
- package/dist/components/CheckboxButton/CheckboxButton.js +0 -51
- package/dist/components/CheckboxButton/CheckboxButton.js.map +0 -1
- package/dist/components/CheckboxButton/CheckboxButton.stories.d.ts +0 -5
- package/dist/components/CheckboxButton/CheckboxButton.stories.js +0 -48
- package/dist/components/CheckboxButton/CheckboxButton.stories.js.map +0 -1
- package/dist/components/CheckboxButton/CheckboxButton.test.d.ts +0 -0
- package/dist/components/CheckboxButton/CheckboxButton.test.js +0 -51
- package/dist/components/CheckboxButton/CheckboxButton.test.js.map +0 -1
- package/dist/components/CheckboxButton/index.d.ts +0 -1
- package/dist/components/CheckboxButton/index.js +0 -5
- /package/dist/components/{CheckboxButton → ControlsButton}/index.js.map +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
._checkbox-button-
|
|
1
|
+
._checkbox-button-bar__container_e14sz_1{display:flex;flex-wrap:wrap}._checkbox-button-bar__container--label-left_e14sz_6{align-items:baseline;flex-direction:row;gap:1rem}._checkbox-button-bar__container--label-top_e14sz_12{align-items:flex-start;flex-direction:column;gap:.5rem}._checkbox-button-bar__row-container_e14sz_18{display:flex;flex-direction:column;gap:.5rem}._checkbox-button-bar__row_e14sz_18{align-items:center;display:flex;flex-wrap:nowrap;gap:.25rem;padding:.25rem;background-color:var(--new-color-uva-white);border-radius:.5rem;border:1px solid var(--new-color-grey-700)}._checkbox-button-bar__row--not-validated_e14sz_35{border-color:var(--new-color-red-600)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._controls-button_105b3_1{align-items:center;background-color:var(--new-color-uva-white);border-radius:.25rem;cursor:pointer;display:inline-flex;font-size:var(--font-size-default);height:2.25rem;justify-content:center;min-width:2.25rem;padding:.5rem;position:relative;-webkit-user-select:none;user-select:none;white-space:nowrap}._controls-button--squared_105b3_17{width:2.25rem}._controls-input_105b3_21{aspect-ratio:unset;cursor:pointer;height:0;opacity:0;position:absolute;width:0}._controls-button_105b3_1:after{content:"";min-height:2.625rem;min-width:2.625rem;position:absolute;width:100%}._controls-input_105b3_21:focus-visible+label{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem}._controls-input_105b3_21:checked+label{background-color:var(--new-color-grey-200);border:1px solid var(--new-color-grey-700);font-weight:var(--semibold)}._controls-input_105b3_21:disabled+label,._controls-input_105b3_21:disabled:hover+label{background-color:var(--new-color-grey-400);color:var(--new-color-grey-700);cursor:not-allowed}._controls-input_105b3_21:hover+label{background-color:var(--new-color-grey-300)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._period-
|
|
1
|
+
._period-selector__container_d1p0j_1{display:flex;flex-wrap:wrap}._period-selector__container--label-left_d1p0j_6{flex-direction:row;gap:1rem;align-items:baseline}._period-selector__container--label-top_d1p0j_12{align-items:flex-start;flex-direction:column;gap:.5rem}._period-selector__selector-container_d1p0j_18{display:flex;flex-direction:column;line-height:1.5}._period-selector__selector-row_d1p0j_24{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._radio-tab-selector-button-bar__container_a4wnc_1{display:flex;flex-wrap:wrap}._radio-tab-selector-button-bar__container--label-left_a4wnc_6{align-items:baseline;flex-direction:row;gap:1rem}._radio-tab-selector-button-bar__container--label-top_a4wnc_12{align-items:flex-start;flex-direction:column;gap:.5rem}._radio-tab-selector-button-bar__row-container_a4wnc_18{display:flex;flex-direction:column;gap:.5rem}._radio-tab-selector-button-bar__row_a4wnc_18{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}._radio-tab-selector-button-bar__row--not-validated_a4wnc_35{border-color:var(--new-color-red-600)}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as t, jsxs as a, Fragment as s } from "react/jsx-runtime";
|
|
2
|
-
import { fn as l } from "../../index-
|
|
2
|
+
import { fn as l } from "../../index-Dwqes6RH.js";
|
|
3
3
|
import { Button as n } from "./Button.js";
|
|
4
4
|
const c = "<Button variant={variant} onClick={onClictFunction}>{children}</Button>", h = {
|
|
5
5
|
title: "Atoms/Buttons/Button",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as t, jsxs as a, Fragment as l } from "react/jsx-runtime";
|
|
2
|
-
import { fn as s } from "../../index-
|
|
2
|
+
import { fn as s } from "../../index-Dwqes6RH.js";
|
|
3
3
|
import { BrowserRouter as c } from "react-router";
|
|
4
4
|
import { LinkButton as n } from "./LinkButton.js";
|
|
5
5
|
const d = `
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as n, jsxs as s, Fragment as l } from "react/jsx-runtime";
|
|
2
|
-
import { fn as c } from "../../index-
|
|
2
|
+
import { fn as c } from "../../index-Dwqes6RH.js";
|
|
3
3
|
import { MenuButton as t } from "./MenuButton.js";
|
|
4
4
|
const d = `
|
|
5
5
|
// Has all LabelHTMLAttributes props available except "className" and "style"
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as g, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import { fn as e } from "../../index-
|
|
2
|
+
import { fn as e } from "../../index-Dwqes6RH.js";
|
|
3
3
|
import { Checkbox as n } from "./Checkbox.js";
|
|
4
4
|
import { FormField as t } from "../FormField/FormField.js";
|
|
5
5
|
import { Label as i } from "../Label/Label.js";
|
|
@@ -10,13 +10,16 @@ export interface CheckboxButtonBarProps {
|
|
|
10
10
|
label?: string;
|
|
11
11
|
/** 'top' | 'left' */
|
|
12
12
|
labelPosition?: 'top' | 'left';
|
|
13
|
+
/** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */
|
|
13
14
|
required?: boolean;
|
|
14
|
-
/**
|
|
15
|
+
/** `true` to color border red to show missing in validation; otherwise, `false`. */
|
|
16
|
+
notValidated?: boolean;
|
|
17
|
+
/** error text to display under the bar */
|
|
15
18
|
notValidatedText?: string;
|
|
16
19
|
/** disables all checkboxes in the bar */
|
|
17
20
|
disableGroup?: boolean;
|
|
18
21
|
onSetValues: (value: string[]) => void;
|
|
19
22
|
}
|
|
20
23
|
/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */
|
|
21
|
-
export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidatedText, disableGroup, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidated, notValidatedText, disableGroup, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
25
|
export {};
|
|
@@ -1,62 +1,69 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import { c as
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
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-bar__container--label-top": "_checkbox-button-bar__container--label-
|
|
11
|
-
"checkbox-button-bar__row-container": "_checkbox-button-bar__row-
|
|
12
|
-
"checkbox-button-bar__row": "_checkbox-button-
|
|
13
|
-
"checkbox-button-
|
|
14
|
-
},
|
|
15
|
-
checkboxes:
|
|
16
|
-
defaultValues:
|
|
17
|
-
label:
|
|
18
|
-
labelPosition:
|
|
19
|
-
required:
|
|
20
|
-
|
|
21
|
-
|
|
1
|
+
import { jsxs as l, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useState as w } from "react";
|
|
3
|
+
import { c as s } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { Label as z } from "../Label/Label.js";
|
|
5
|
+
import { FeedbackBox as v } from "../FeedbackBox/FeedbackBox.js";
|
|
6
|
+
import { ControlsButton as B } from "../ControlsButton/ControlsButton.js";
|
|
7
|
+
import '../../assets/CheckboxButtonBar.css';const t = {
|
|
8
|
+
"checkbox-button-bar__container": "_checkbox-button-bar__container_e14sz_1",
|
|
9
|
+
"checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_e14sz_6",
|
|
10
|
+
"checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_e14sz_12",
|
|
11
|
+
"checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_e14sz_18",
|
|
12
|
+
"checkbox-button-bar__row": "_checkbox-button-bar__row_e14sz_18",
|
|
13
|
+
"checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_e14sz_35"
|
|
14
|
+
}, F = ({
|
|
15
|
+
checkboxes: i,
|
|
16
|
+
defaultValues: n,
|
|
17
|
+
label: a,
|
|
18
|
+
labelPosition: h = "top",
|
|
19
|
+
required: u = !1,
|
|
20
|
+
notValidated: k = !1,
|
|
21
|
+
notValidatedText: c = "",
|
|
22
|
+
disableGroup: x = !1,
|
|
22
23
|
onSetValues: m
|
|
23
24
|
}) => {
|
|
24
|
-
const
|
|
25
|
-
o
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
const [_, d] = w(n ? n.map(String) : []), f = (e) => {
|
|
26
|
+
let o = _;
|
|
27
|
+
o.includes(e) ? o = o.filter((b) => b !== e) : o = [...o, e], d(o), m(o);
|
|
28
|
+
};
|
|
29
|
+
return /* @__PURE__ */ l(
|
|
28
30
|
"div",
|
|
29
31
|
{
|
|
30
|
-
className:
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
className: s(
|
|
33
|
+
t["checkbox-button-bar__container"],
|
|
34
|
+
t[`checkbox-button-bar__container--label-${h}`]
|
|
33
35
|
),
|
|
34
36
|
children: [
|
|
35
|
-
|
|
36
|
-
/* @__PURE__ */
|
|
37
|
-
/* @__PURE__ */
|
|
38
|
-
|
|
37
|
+
a && /* @__PURE__ */ r(z, { htmlFor: "", required: u, children: a }),
|
|
38
|
+
/* @__PURE__ */ l("div", { className: t["checkbox-button-bar__row-container"], children: [
|
|
39
|
+
/* @__PURE__ */ r(
|
|
40
|
+
"div",
|
|
39
41
|
{
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
42
|
+
className: s(t["checkbox-button-bar__row"], {
|
|
43
|
+
[t["checkbox-button-bar__row--not-validated"]]: k || c
|
|
44
|
+
}),
|
|
45
|
+
children: i.map(({ label: e, value: o, disabled: b }) => /* @__PURE__ */ r(
|
|
46
|
+
B,
|
|
47
|
+
{
|
|
48
|
+
type: "checkbox",
|
|
49
|
+
label: e,
|
|
50
|
+
forceSquared: !0,
|
|
51
|
+
value: o,
|
|
52
|
+
checked: _.includes(o),
|
|
53
|
+
disabled: b || x,
|
|
54
|
+
onSetValue: (p) => f(p.target.value)
|
|
55
|
+
},
|
|
56
|
+
`${o}`
|
|
57
|
+
))
|
|
58
|
+
}
|
|
59
|
+
),
|
|
60
|
+
c !== "" && /* @__PURE__ */ r(v, { level: "error", feedback: c })
|
|
54
61
|
] })
|
|
55
62
|
]
|
|
56
63
|
}
|
|
57
64
|
);
|
|
58
65
|
};
|
|
59
66
|
export {
|
|
60
|
-
|
|
67
|
+
F as CheckboxButtonBar
|
|
61
68
|
};
|
|
62
69
|
//# sourceMappingURL=CheckboxButtonBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import {
|
|
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 disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value */\n checkboxes: CheckboxProps[];\n //** array with values */\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 /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\n/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidated = false,\n notValidatedText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const [currentValues, setCurrentValues] = useState<string[]>(defaultValues ? defaultValues.map(String) : []);\n\n const handleChange = (value: string) => {\n let values = currentValues;\n\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 return (\n <div\n className={clsx(\n styles['checkbox-button-bar__container'],\n styles[`checkbox-button-bar__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['checkbox-button-bar__row-container']}>\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, disabled }) => (\n <ControlsButton\n type=\"checkbox\"\n key={`${value}`}\n label={label}\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 {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidated","notValidatedText","disableGroup","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;GAmCaA,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,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAA,CAACC,GAAeC,CAAgB,IAAIC,EAAmBV,IAAgBA,EAAc,IAAI,MAAM,IAAI,EAAE,GAErGW,IAAe,CAACC,MAAkB;AACtC,QAAIC,IAASL;AAET,IAAAK,EAAO,SAASD,CAAK,IACvBC,IAASA,EAAO,OAAO,CAACC,MAAQA,MAAQF,CAAK,IAEpCC,IAAA,CAAC,GAAGA,GAAQD,CAAK,GAE5BH,EAAiBI,CAAM,GACvBN,EAAYM,CAAM;AAAA,EACpB;AAGE,SAAA,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyCf,CAAa,EAAE;AAAA,MACjE;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAiB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAhB,GACf,UACHF,GAAA;AAAA,QAED,gBAAAc,EAAA,OAAA,EAAI,WAAWE,EAAO,oCAAoC,GACzD,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,gBAClD,CAACA,EAAO,yCAAyC,CAAC,GAAGb,KAAgBC;AAAA,cAAA,CACtE;AAAA,cAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAW,GAAO,UAAAQ,QAC/B,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,OAAOpB;AAAAA,kBACP,cAAc;AAAA,kBACd,OAAAW;AAAA,kBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,kBACrC,UAAUQ,KAAYd;AAAA,kBACtB,YAAY,CAACgB,MAAUX,EAAaW,EAAM,OAAO,KAAK;AAAA,gBAAA;AAAA,gBANjD,GAAGV,CAAK;AAAA,cAQhB,CAAA;AAAA,YAAA;AAAA,UACH;AAAA,UACCP,MAAqB,MAAM,gBAAAa,EAACK,KAAY,OAAM,SAAQ,UAAUlB,EAAkB,CAAA;AAAA,QAAA,EACrF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { fn as
|
|
1
|
+
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import { fn as t } from "../../index-Dwqes6RH.js";
|
|
3
3
|
import { CheckboxButtonBar as e } from "./CheckboxButtonBar.js";
|
|
4
4
|
const a = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", i = {
|
|
5
5
|
title: "Molecules/CheckboxButtonBar",
|
|
@@ -41,7 +41,7 @@ const a = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosit
|
|
|
41
41
|
inspectComponent: e,
|
|
42
42
|
codeString: a
|
|
43
43
|
}
|
|
44
|
-
}, r = (o) => /* @__PURE__ */
|
|
44
|
+
}, r = (o) => /* @__PURE__ */ l(e, { ...o }), n = r.bind({});
|
|
45
45
|
n.args = {
|
|
46
46
|
label: "Periode",
|
|
47
47
|
required: !0,
|
|
@@ -57,11 +57,23 @@ n.args = {
|
|
|
57
57
|
{
|
|
58
58
|
label: "1.3",
|
|
59
59
|
value: "3"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
label: "4",
|
|
63
|
+
value: "4"
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
label: "5",
|
|
67
|
+
value: "5"
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
label: "6",
|
|
71
|
+
value: "6"
|
|
60
72
|
}
|
|
61
73
|
],
|
|
62
74
|
defaultValues: ["1", "2"],
|
|
63
75
|
labelPosition: "top",
|
|
64
|
-
onSetValues:
|
|
76
|
+
onSetValues: t()
|
|
65
77
|
};
|
|
66
78
|
export {
|
|
67
79
|
n as CheckboxButtonBarExample,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButtonBar.stories.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonBarProps } from './CheckboxButtonBar';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst codeString =\n '<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/CheckboxButtonBar',\n component: CheckboxButtonBar,\n argTypes: {\n checkboxes: {\n table: {\n disable: true,\n },\n },\n defaultValues: {\n table: {\n disable: true,\n },\n },\n label: {\n control: 'text',\n },\n labelPosition: {\n control: 'radio',\n options: ['top', 'left'],\n },\n required: {\n control: 'boolean',\n },\n notValidatedText: {\n control: 'text',\n },\n disableGroup: {\n control: 'boolean',\n },\n onSetValues: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: CheckboxButtonBar,\n codeString: codeString,\n },\n} as Meta<CheckboxButtonBarProps>;\n\nconst Template: StoryFn<CheckboxButtonBarProps> = (args) => <CheckboxButtonBar {...args} />;\n\nexport const CheckboxButtonBarExample = Template.bind({});\nCheckboxButtonBarExample.args = {\n label: 'Periode',\n required: true,\n checkboxes: [\n {\n label: '1.1',\n value: '1',\n },\n {\n label: '1.2',\n value: '2',\n },\n {\n label: '1.3',\n value: '3',\n },\n ],\n defaultValues: ['1', '2'],\n labelPosition: 'top',\n onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,iJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,MACT,SAAS,CAAC,OAAO,MAAM;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,aAAa;AAAA,MACX,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA4C,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAmB,GAAGE,GAAM,GAE5EE,IAA2BH,EAAS,KAAK,CAAE,CAAA;AACxDG,EAAyB,OAAO;AAAA,EAC9B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,eAAe,CAAC,KAAK,GAAG;AAAA,EACxB,eAAe;AAAA,EACf,aAAaC,EAAG;AAClB;"}
|
|
1
|
+
{"version":3,"file":"CheckboxButtonBar.stories.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonBarProps } from './CheckboxButtonBar';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst codeString =\n '<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/CheckboxButtonBar',\n component: CheckboxButtonBar,\n argTypes: {\n checkboxes: {\n table: {\n disable: true,\n },\n },\n defaultValues: {\n table: {\n disable: true,\n },\n },\n label: {\n control: 'text',\n },\n labelPosition: {\n control: 'radio',\n options: ['top', 'left'],\n },\n required: {\n control: 'boolean',\n },\n notValidatedText: {\n control: 'text',\n },\n disableGroup: {\n control: 'boolean',\n },\n onSetValues: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: CheckboxButtonBar,\n codeString: codeString,\n },\n} as Meta<CheckboxButtonBarProps>;\n\nconst Template: StoryFn<CheckboxButtonBarProps> = (args) => <CheckboxButtonBar {...args} />;\n\nexport const CheckboxButtonBarExample = Template.bind({});\nCheckboxButtonBarExample.args = {\n label: 'Periode',\n required: true,\n checkboxes: [\n {\n label: '1.1',\n value: '1',\n },\n {\n label: '1.2',\n value: '2',\n },\n {\n label: '1.3',\n value: '3',\n },\n {\n label: '4',\n value: '4',\n },\n {\n label: '5',\n value: '5',\n },\n {\n label: '6',\n value: '6',\n },\n ],\n defaultValues: ['1', '2'],\n labelPosition: 'top',\n onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,iJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,MACT,SAAS,CAAC,OAAO,MAAM;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,aAAa;AAAA,MACX,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA4C,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAmB,GAAGE,GAAM,GAE5EE,IAA2BH,EAAS,KAAK,CAAE,CAAA;AACxDG,EAAyB,OAAO;AAAA,EAC9B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EAEX;AAAA,EACA,eAAe,CAAC,KAAK,GAAG;AAAA,EACxB,eAAe;AAAA,EACf,aAAaC,EAAG;AAClB;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as l } from "react/jsx-runtime";
|
|
2
2
|
import "../../index-BqLi4tOb.js";
|
|
3
|
-
import { r as c, s as
|
|
3
|
+
import { r as c, s as t } from "../../react.esm-CsMDid07.js";
|
|
4
4
|
import { CheckboxButtonBar as a } from "./CheckboxButtonBar.js";
|
|
5
|
-
const n = jest.fn(),
|
|
5
|
+
const n = jest.fn(), d = [
|
|
6
6
|
{
|
|
7
7
|
label: "1.1",
|
|
8
8
|
value: "1"
|
|
@@ -23,15 +23,15 @@ describe("CheckboxButton", () => {
|
|
|
23
23
|
a,
|
|
24
24
|
{
|
|
25
25
|
label: "Periode",
|
|
26
|
-
checkboxes:
|
|
26
|
+
checkboxes: d,
|
|
27
27
|
defaultValues: ["1", "2"],
|
|
28
28
|
labelPosition: "top",
|
|
29
29
|
onSetValues: n
|
|
30
30
|
}
|
|
31
31
|
)
|
|
32
|
-
), expect(
|
|
33
|
-
const
|
|
34
|
-
expect(
|
|
32
|
+
), expect(t.getByText("Periode")).toBeInTheDocument();
|
|
33
|
+
const e = t.getAllByRole("checkbox");
|
|
34
|
+
expect(e).toHaveLength(3);
|
|
35
35
|
}), it("should render required", () => {
|
|
36
36
|
c(
|
|
37
37
|
/* @__PURE__ */ l(
|
|
@@ -39,16 +39,16 @@ describe("CheckboxButton", () => {
|
|
|
39
39
|
{
|
|
40
40
|
label: "Periode",
|
|
41
41
|
required: !0,
|
|
42
|
-
checkboxes:
|
|
42
|
+
checkboxes: d,
|
|
43
43
|
defaultValues: ["1", "2"],
|
|
44
44
|
labelPosition: "top",
|
|
45
45
|
onSetValues: n
|
|
46
46
|
}
|
|
47
47
|
)
|
|
48
48
|
);
|
|
49
|
-
const
|
|
50
|
-
expect(
|
|
51
|
-
const o =
|
|
49
|
+
const e = t.getByText("Periode");
|
|
50
|
+
expect(e).toHaveTextContent("Periode"), expect(e).toHaveClass("label--required");
|
|
51
|
+
const o = t.getAllByRole("checkbox");
|
|
52
52
|
expect(o).toHaveLength(3);
|
|
53
53
|
}), it("should render default checked", () => {
|
|
54
54
|
c(
|
|
@@ -56,16 +56,16 @@ describe("CheckboxButton", () => {
|
|
|
56
56
|
a,
|
|
57
57
|
{
|
|
58
58
|
label: "Periode",
|
|
59
|
-
checkboxes:
|
|
59
|
+
checkboxes: d,
|
|
60
60
|
defaultValues: ["1", "2"],
|
|
61
61
|
labelPosition: "top",
|
|
62
62
|
onSetValues: n
|
|
63
63
|
}
|
|
64
64
|
)
|
|
65
65
|
);
|
|
66
|
-
const
|
|
67
|
-
expect(
|
|
68
|
-
const o =
|
|
66
|
+
const e = t.getByText("Periode");
|
|
67
|
+
expect(e).toHaveTextContent("Periode");
|
|
68
|
+
const o = t.getAllByRole("checkbox");
|
|
69
69
|
expect(o).toHaveLength(3), expect(o[0]).toBeChecked(), expect(o[1]).toBeChecked(), expect(o[2]).not.toBeChecked();
|
|
70
70
|
}), it("should render notValidatedText and notValid style", () => {
|
|
71
71
|
c(
|
|
@@ -74,17 +74,15 @@ describe("CheckboxButton", () => {
|
|
|
74
74
|
{
|
|
75
75
|
label: "Periode",
|
|
76
76
|
notValidatedText: "Not Valid",
|
|
77
|
-
checkboxes:
|
|
77
|
+
checkboxes: d,
|
|
78
78
|
defaultValues: ["1", "2"],
|
|
79
79
|
labelPosition: "top",
|
|
80
80
|
onSetValues: n
|
|
81
81
|
}
|
|
82
82
|
)
|
|
83
83
|
);
|
|
84
|
-
const
|
|
85
|
-
expect(
|
|
86
|
-
const o = e.getAllByRole("checkbox");
|
|
87
|
-
expect(o).toHaveLength(3), expect(e.getByText("1.1")).toHaveClass("checkbox-button--not-valid"), expect(e.getByText("1.2")).toHaveClass("checkbox-button--not-valid"), expect(e.getByText("1.3")).toHaveClass("checkbox-button--not-valid");
|
|
84
|
+
const e = t.getByText("Periode");
|
|
85
|
+
expect(e).toHaveTextContent("Periode"), expect(t.getByText("Not Valid")).toBeInTheDocument();
|
|
88
86
|
});
|
|
89
87
|
});
|
|
90
88
|
//# sourceMappingURL=CheckboxButtonBar.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxButtonBar.test.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst onClickSpy = jest.fn();\n\nconst MOCK_CHECKBOXES = [\n {\n label: '1.1',\n value: '1',\n },\n {\n label: '1.2',\n value: '2',\n },\n {\n label: '1.3',\n value: '3',\n },\n];\n\ndescribe('CheckboxButton', () => {\n it('should render', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n expect(screen.getByText('Periode')).toBeInTheDocument();\n const checkbox = screen.getAllByRole('checkbox');\n expect(checkbox).toHaveLength(3);\n });\n\n it('should render required', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n required={true}\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n const label = screen.getByText('Periode');\n expect(label).toHaveTextContent('Periode');\n expect(label).toHaveClass('label--required');\n const checkbox = screen.getAllByRole('checkbox');\n expect(checkbox).toHaveLength(3);\n });\n\n it('should render default checked', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n const label = screen.getByText('Periode');\n expect(label).toHaveTextContent('Periode');\n const checkbox = screen.getAllByRole('checkbox');\n expect(checkbox).toHaveLength(3);\n expect(checkbox[0]).toBeChecked();\n expect(checkbox[1]).toBeChecked();\n expect(checkbox[2]).not.toBeChecked();\n });\n\n it('should render notValidatedText and notValid style', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n notValidatedText=\"Not Valid\"\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n const label = screen.getByText('Periode');\n expect(label).toHaveTextContent('Periode');\n expect(screen.getByText('Not Valid')).toBeInTheDocument();\n
|
|
1
|
+
{"version":3,"file":"CheckboxButtonBar.test.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.test.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-magic-numbers */\nimport '@testing-library/jest-dom';\nimport { render, screen } from '@testing-library/react';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst onClickSpy = jest.fn();\n\nconst MOCK_CHECKBOXES = [\n {\n label: '1.1',\n value: '1',\n },\n {\n label: '1.2',\n value: '2',\n },\n {\n label: '1.3',\n value: '3',\n },\n];\n\ndescribe('CheckboxButton', () => {\n it('should render', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n expect(screen.getByText('Periode')).toBeInTheDocument();\n const checkbox = screen.getAllByRole('checkbox');\n expect(checkbox).toHaveLength(3);\n });\n\n it('should render required', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n required={true}\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n const label = screen.getByText('Periode');\n expect(label).toHaveTextContent('Periode');\n expect(label).toHaveClass('label--required');\n const checkbox = screen.getAllByRole('checkbox');\n expect(checkbox).toHaveLength(3);\n });\n\n it('should render default checked', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n const label = screen.getByText('Periode');\n expect(label).toHaveTextContent('Periode');\n const checkbox = screen.getAllByRole('checkbox');\n expect(checkbox).toHaveLength(3);\n expect(checkbox[0]).toBeChecked();\n expect(checkbox[1]).toBeChecked();\n expect(checkbox[2]).not.toBeChecked();\n });\n\n it('should render notValidatedText and notValid style', () => {\n render(\n <CheckboxButtonBar\n label=\"Periode\"\n notValidatedText=\"Not Valid\"\n checkboxes={MOCK_CHECKBOXES}\n defaultValues={['1', '2']}\n labelPosition=\"top\"\n onSetValues={onClickSpy}\n />\n );\n const label = screen.getByText('Periode');\n expect(label).toHaveTextContent('Periode');\n expect(screen.getByText('Not Valid')).toBeInTheDocument();\n });\n});\n"],"names":["onClickSpy","MOCK_CHECKBOXES","render","jsx","CheckboxButtonBar","screen","checkbox","label"],"mappings":";;;;AAMA,MAAMA,IAAa,KAAK,GAAG,GAErBC,IAAkB;AAAA,EACtB;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX;AAEA,SAAS,kBAAkB,MAAM;AAC/B,KAAG,iBAAiB,MAAM;AACxB,IAAAC;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,YAAYH;AAAA,UACZ,eAAe,CAAC,KAAK,GAAG;AAAA,UACxB,eAAc;AAAA,UACd,aAAaD;AAAA,QAAA;AAAA,MAAA;AAAA,IAEjB,GACA,OAAOK,EAAO,UAAU,SAAS,CAAC,EAAE,kBAAkB;AAChD,UAAAC,IAAWD,EAAO,aAAa,UAAU;AACxC,WAAAC,CAAQ,EAAE,aAAa,CAAC;AAAA,EAAA,CAChC,GAED,GAAG,0BAA0B,MAAM;AACjC,IAAAJ;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAU;AAAA,UACV,YAAYH;AAAA,UACZ,eAAe,CAAC,KAAK,GAAG;AAAA,UACxB,eAAc;AAAA,UACd,aAAaD;AAAA,QAAA;AAAA,MAAA;AAAA,IAEjB;AACM,UAAAO,IAAQF,EAAO,UAAU,SAAS;AACjC,WAAAE,CAAK,EAAE,kBAAkB,SAAS,GAClC,OAAAA,CAAK,EAAE,YAAY,iBAAiB;AACrC,UAAAD,IAAWD,EAAO,aAAa,UAAU;AACxC,WAAAC,CAAQ,EAAE,aAAa,CAAC;AAAA,EAAA,CAChC,GAED,GAAG,iCAAiC,MAAM;AACxC,IAAAJ;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,YAAYH;AAAA,UACZ,eAAe,CAAC,KAAK,GAAG;AAAA,UACxB,eAAc;AAAA,UACd,aAAaD;AAAA,QAAA;AAAA,MAAA;AAAA,IAEjB;AACM,UAAAO,IAAQF,EAAO,UAAU,SAAS;AACjC,WAAAE,CAAK,EAAE,kBAAkB,SAAS;AACnC,UAAAD,IAAWD,EAAO,aAAa,UAAU;AACxC,WAAAC,CAAQ,EAAE,aAAa,CAAC,GAC/B,OAAOA,EAAS,CAAC,CAAC,EAAE,YAAY,GAChC,OAAOA,EAAS,CAAC,CAAC,EAAE,YAAY,GAChC,OAAOA,EAAS,CAAC,CAAC,EAAE,IAAI,YAAY;AAAA,EAAA,CACrC,GAED,GAAG,qDAAqD,MAAM;AAC5D,IAAAJ;AAAA,MACE,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,kBAAiB;AAAA,UACjB,YAAYH;AAAA,UACZ,eAAe,CAAC,KAAK,GAAG;AAAA,UACxB,eAAc;AAAA,UACd,aAAaD;AAAA,QAAA;AAAA,MAAA;AAAA,IAEjB;AACM,UAAAO,IAAQF,EAAO,UAAU,SAAS;AACjC,WAAAE,CAAK,EAAE,kBAAkB,SAAS,GACzC,OAAOF,EAAO,UAAU,WAAW,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACzD;AACH,CAAC;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as _, jsxs as A } from "react/jsx-runtime";
|
|
2
|
-
import { fn as w } from "../../index-
|
|
2
|
+
import { fn as w } from "../../index-Dwqes6RH.js";
|
|
3
3
|
import { s as g, j as V, V as j } from "../../index-DH9Vbk37.js";
|
|
4
4
|
import { useState as D } from "react";
|
|
5
5
|
import { CheckboxTree as O } from "./CheckboxTree.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as l } from "react/jsx-runtime";
|
|
2
|
-
import { fn as t } from "../../index-
|
|
2
|
+
import { fn as t } from "../../index-Dwqes6RH.js";
|
|
3
3
|
import { Chip as e } from "./Chip.js";
|
|
4
4
|
const s = "<Chip label={string} onDelete={onDeleteFunction(label)}/>", b = {
|
|
5
5
|
title: "Atoms/Chip",
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { ChangeEvent } from 'react';
|
|
2
|
+
export interface ControlsButtonProps {
|
|
3
|
+
/** to set type/behaviour of input radio or checkbox */
|
|
4
|
+
type?: 'radio' | 'checkbox';
|
|
5
|
+
label: string;
|
|
6
|
+
value: string;
|
|
7
|
+
/** set if used as radiogroup */
|
|
8
|
+
name?: string;
|
|
9
|
+
/** `true` to set squared button; otherwise, `false`. The default is `false`. */
|
|
10
|
+
forceSquared?: boolean;
|
|
11
|
+
/** to set default status */
|
|
12
|
+
checked?: boolean;
|
|
13
|
+
/** `true` to disable the button; otherwise, `false`. The default is `false`. */
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
/** The callback function that is invoked when the radio button changes value. */
|
|
16
|
+
onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
17
|
+
}
|
|
18
|
+
export declare const ControlsButton: ({ type, label, value, name, forceSquared, checked, disabled, onSetValue, }: ControlsButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { jsxs as m, Fragment as p, jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useId as b } from "react";
|
|
3
|
+
import { c as d } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import '../../assets/ControlsButton.css';const t = {
|
|
5
|
+
"controls-button": "_controls-button_105b3_1",
|
|
6
|
+
"controls-button--squared": "_controls-button--squared_105b3_17",
|
|
7
|
+
"controls-input": "_controls-input_105b3_21"
|
|
8
|
+
}, g = ({
|
|
9
|
+
type: c = "checkbox",
|
|
10
|
+
label: o,
|
|
11
|
+
value: e,
|
|
12
|
+
name: s,
|
|
13
|
+
forceSquared: l = !1,
|
|
14
|
+
checked: u,
|
|
15
|
+
disabled: i,
|
|
16
|
+
onSetValue: a
|
|
17
|
+
}) => {
|
|
18
|
+
const n = b();
|
|
19
|
+
return /* @__PURE__ */ m(p, { children: [
|
|
20
|
+
/* @__PURE__ */ r(
|
|
21
|
+
"input",
|
|
22
|
+
{
|
|
23
|
+
type: c,
|
|
24
|
+
id: `${n}${o.replace(/\s+/g, "_")}`,
|
|
25
|
+
name: s || o.replace(/\s+/g, "_"),
|
|
26
|
+
disabled: i,
|
|
27
|
+
value: e,
|
|
28
|
+
checked: u,
|
|
29
|
+
onChange: (_) => a(_),
|
|
30
|
+
className: t["controls-input"]
|
|
31
|
+
}
|
|
32
|
+
),
|
|
33
|
+
/* @__PURE__ */ r(
|
|
34
|
+
"label",
|
|
35
|
+
{
|
|
36
|
+
htmlFor: `${n}${o}`,
|
|
37
|
+
className: d(t["controls-button"], [l && t["controls-button--squared"]]),
|
|
38
|
+
children: o
|
|
39
|
+
}
|
|
40
|
+
)
|
|
41
|
+
] });
|
|
42
|
+
};
|
|
43
|
+
export {
|
|
44
|
+
g as ControlsButton
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=ControlsButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ControlsButton.js","sources":["../../../src/components/ControlsButton/ControlsButton.tsx"],"sourcesContent":["import { useId } from 'react';\r\nimport clsx from 'clsx';\r\n\r\nimport type { ChangeEvent } from 'react';\r\n\r\nimport styles from './ControlsButton.module.css';\r\n\r\nexport interface ControlsButtonProps {\r\n /** to set type/behaviour of input radio or checkbox */\r\n type?: 'radio' | 'checkbox';\r\n label: string;\r\n value: string;\r\n /** set if used as radiogroup */\r\n name?: string;\r\n /** `true` to set squared button; otherwise, `false`. The default is `false`. */\r\n forceSquared?: boolean;\r\n /** to set default status */\r\n checked?: boolean;\r\n /** `true` to disable the button; otherwise, `false`. The default is `false`. */\r\n disabled?: boolean;\r\n /** The callback function that is invoked when the radio button changes value. */\r\n onSetValue: (event: ChangeEvent<HTMLInputElement>) => void;\r\n}\r\n\r\nexport const ControlsButton = ({\r\n type = 'checkbox',\r\n label,\r\n value,\r\n name,\r\n forceSquared = false,\r\n checked,\r\n disabled,\r\n onSetValue,\r\n}: ControlsButtonProps) => {\r\n const idPrefix = useId();\r\n\r\n return (\r\n <>\r\n <input\r\n type={type}\r\n id={`${idPrefix}${label.replace(/\\s+/g, '_')}`}\r\n name={name ? name : label.replace(/\\s+/g, '_')}\r\n disabled={disabled}\r\n value={value}\r\n checked={checked}\r\n onChange={(event) => onSetValue(event)}\r\n className={styles['controls-input']}\r\n />\r\n <label\r\n htmlFor={`${idPrefix}${label}`}\r\n className={clsx(styles['controls-button'], [forceSquared && styles['controls-button--squared']])}\r\n >\r\n {label}\r\n </label>\r\n </>\r\n );\r\n};\r\n"],"names":["ControlsButton","type","label","value","name","forceSquared","checked","disabled","onSetValue","idPrefix","useId","jsxs","Fragment","jsx","event","styles","clsx"],"mappings":";;;;;;;GAwBaA,IAAiB,CAAC;AAAA,EAC7B,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,EAAM;AAEvB,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAAZ;AAAA,QACA,IAAI,GAAGQ,CAAQ,GAAGP,EAAM,QAAQ,QAAQ,GAAG,CAAC;AAAA,QAC5C,MAAME,KAAcF,EAAM,QAAQ,QAAQ,GAAG;AAAA,QAC7C,UAAAK;AAAA,QACA,OAAAJ;AAAA,QACA,SAAAG;AAAA,QACA,UAAU,CAACQ,MAAUN,EAAWM,CAAK;AAAA,QACrC,WAAWC,EAAO,gBAAgB;AAAA,MAAA;AAAA,IACpC;AAAA,IACA,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,GAAGJ,CAAQ,GAAGP,CAAK;AAAA,QAC5B,WAAWc,EAAKD,EAAO,iBAAiB,GAAG,CAACV,KAAgBU,EAAO,0BAA0B,CAAC,CAAC;AAAA,QAE9F,UAAAb;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react';
|
|
2
|
+
import { ControlsButtonProps } from './ControlsButton';
|
|
3
|
+
declare const _default: Meta<ControlsButtonProps>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const ControlsButtonExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ControlsButtonProps>;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { fn as n } from "../../index-Dwqes6RH.js";
|
|
3
|
+
import { ControlsButton as o } from "./ControlsButton.js";
|
|
4
|
+
const r = "<ControlsButton type={radio or checkbox} label={} value={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", u = {
|
|
5
|
+
title: "Atoms/ControlsButton",
|
|
6
|
+
component: o,
|
|
7
|
+
argTypes: {
|
|
8
|
+
label: {
|
|
9
|
+
control: "text"
|
|
10
|
+
},
|
|
11
|
+
value: {
|
|
12
|
+
control: "string"
|
|
13
|
+
},
|
|
14
|
+
forceSquared: {
|
|
15
|
+
control: "boolean"
|
|
16
|
+
},
|
|
17
|
+
isChecked: {
|
|
18
|
+
control: "boolean"
|
|
19
|
+
},
|
|
20
|
+
disabled: {
|
|
21
|
+
control: "boolean"
|
|
22
|
+
},
|
|
23
|
+
onSetValue: {
|
|
24
|
+
table: {
|
|
25
|
+
disable: !0
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
},
|
|
29
|
+
parameters: {
|
|
30
|
+
inspectComponent: o,
|
|
31
|
+
codeString: r
|
|
32
|
+
}
|
|
33
|
+
}, l = (t) => /* @__PURE__ */ e(o, { ...t }), a = l.bind({});
|
|
34
|
+
a.args = {
|
|
35
|
+
type: "checkbox",
|
|
36
|
+
label: "1.2",
|
|
37
|
+
value: "1.2",
|
|
38
|
+
forceSquared: !0,
|
|
39
|
+
onSetValue: n()
|
|
40
|
+
};
|
|
41
|
+
export {
|
|
42
|
+
a as ControlsButtonExample,
|
|
43
|
+
u as default
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=ControlsButton.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ControlsButton.stories.js","sources":["../../../src/components/ControlsButton/ControlsButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\r\n\r\nimport type { Meta, StoryFn } from '@storybook/react';\r\nimport type { ControlsButtonProps } from './ControlsButton';\r\n\r\nimport { ControlsButton } from './ControlsButton';\r\n\r\nconst codeString =\r\n '<ControlsButton type={radio or checkbox} label={} value={} forceSquared={}isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n title: 'Atoms/ControlsButton',\r\n component: ControlsButton,\r\n argTypes: {\r\n label: {\r\n control: 'text',\r\n },\r\n value: {\r\n control: 'string',\r\n },\r\n forceSquared: {\r\n control: 'boolean',\r\n },\r\n isChecked: {\r\n control: 'boolean',\r\n },\r\n disabled: {\r\n control: 'boolean',\r\n },\r\n onSetValue: {\r\n table: {\r\n disable: true,\r\n },\r\n },\r\n },\r\n parameters: {\r\n inspectComponent: ControlsButton,\r\n codeString: codeString,\r\n },\r\n} as Meta<ControlsButtonProps>;\r\n\r\nconst Template: StoryFn<ControlsButtonProps> = (args) => <ControlsButton {...args} />;\r\n\r\nexport const ControlsButtonExample = Template.bind({});\r\nControlsButtonExample.args = {\r\n type: 'checkbox',\r\n label: '1.2',\r\n value: '1.2',\r\n forceSquared: true,\r\n onSetValue: fn(),\r\n};\r\n"],"names":["codeString","ControlsButton_stories","ControlsButton","Template","args","jsx","ControlsButtonExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,qJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EAEJ;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,GAAM,GAEtEE,IAAwBH,EAAS,KAAK,CAAE,CAAA;AACrDG,EAAsB,OAAO;AAAA,EAC3B,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AAAA,EACP,cAAc;AAAA,EACd,YAAYC,EAAG;AACjB;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './ControlsButton';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { OverlayProvider as p } from "@react-aria/overlays";
|
|
3
|
-
import { fn as m } from "../../index-
|
|
3
|
+
import { fn as m } from "../../index-Dwqes6RH.js";
|
|
4
4
|
import { useState as c } from "react";
|
|
5
5
|
import { Drawer as r } from "./Drawer.js";
|
|
6
6
|
import { Button as o } from "../Buttons/Button.js";
|
|
@@ -6,11 +6,11 @@ import "../Buttons/LinkButton.js";
|
|
|
6
6
|
import "@react-aria/button";
|
|
7
7
|
import "../Checkbox/Checkbox.js";
|
|
8
8
|
import { Label as h } from "../Label/Label.js";
|
|
9
|
+
import { FeedbackBox as k } from "../FeedbackBox/FeedbackBox.js";
|
|
9
10
|
import "@react-aria/dialog";
|
|
10
11
|
import "@react-aria/focus";
|
|
11
12
|
import "@react-aria/overlays";
|
|
12
13
|
import "../OverlayCloseButton/OverlayCloseButton.js";
|
|
13
|
-
import { FeedbackBox as k } from "../FeedbackBox/FeedbackBox.js";
|
|
14
14
|
import "../GridRow/GridRow.js";
|
|
15
15
|
import "../IconButton/IconButton.js";
|
|
16
16
|
import "../Input/Input.js";
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
-
import { fn as i } from "../../index-
|
|
2
|
+
import { fn as i } from "../../index-Dwqes6RH.js";
|
|
3
3
|
import { FormInput as a } from "./FormInput.js";
|
|
4
4
|
import { SelectListbox as o } from "../SelectListbox/SelectListbox.js";
|
|
5
5
|
const m = `
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
-
import { fn as r } from "../../index-
|
|
2
|
+
import { fn as r } from "../../index-Dwqes6RH.js";
|
|
3
3
|
import { IconButton as t } from "./IconButton.js";
|
|
4
4
|
import { Icon as i } from "../Icon/Icon.js";
|
|
5
5
|
const l = `<IconButton variant={variant} aria-label={aria-label} onClick={onClickFunction}>
|