@uva-glass/component-library 3.53.2 → 3.53.3

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.
Files changed (7) hide show
  1. package/dist/assets/CheckboxButtonBar.css +1 -1
  2. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.d.ts +3 -1
  3. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js +64 -60
  4. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
  5. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +1 -0
  6. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map +1 -1
  7. package/package.json +1 -1
package/dist/assets/CheckboxButtonBar.css CHANGED
@@ -1 +1 @@
1
- ._checkbox-button-bar__container_1bsrf_1{display:flex;flex-wrap:wrap}._checkbox-button-bar__container--label-left_1bsrf_6{align-items:baseline;flex-direction:row;gap:1rem}._checkbox-button-bar__container--label-top_1bsrf_12{align-items:flex-start;flex-direction:column;gap:.5rem}._checkbox-button-bar__row-container_1bsrf_18{display:flex;flex-direction:column;gap:.5rem}._checkbox-button-bar__row-container--segmented_1bsrf_24{flex-direction:row}._checkbox-button-bar__row_1bsrf_18{align-items:center;background-color:var(--color-uva-white);border:1px solid var(--color-grey-700);border-radius:.5rem;display:flex;flex-wrap:nowrap;gap:.25rem;padding:.25rem}._checkbox-button-bar__row--not-valid_1bsrf_39{border-color:var(--color-red-600)}._checkbox-button-bar__footer_1bsrf_43{color:var(--color-grey-700);font-size:var(--font-size-text-non-essential)}
1
+ ._checkbox-button-bar__container_1jark_1{display:flex;flex-wrap:wrap}._checkbox-button-bar__container--label-left_1jark_6{align-items:baseline;flex-direction:row;gap:1rem}._checkbox-button-bar__container--label-top_1jark_12{align-items:flex-start;flex-direction:column;gap:.5rem}._checkbox-button-bar__row-container_1jark_18{display:flex;flex-direction:column;gap:.5rem}._checkbox-button-bar__row-container--segmented_1jark_24{flex-direction:row}._checkbox-button-bar__row_1jark_18{align-items:center;background-color:var(--color-uva-white);border:1px solid var(--color-grey-700);border-radius:.5rem;display:flex;flex-wrap:nowrap;gap:.25rem;padding:.25rem}._checkbox-button-bar__row--not-valid_1jark_39{border-color:var(--color-red-600)}._checkbox-button-bar__sub-text_1jark_43{color:var(--color-grey-700);font-size:var(--font-size-text-non-essential)}
package/dist/components/CheckboxButtonBar/CheckboxButtonBar.d.ts CHANGED
@@ -12,6 +12,8 @@ export interface CheckboxButtonBarProps {
12
12
  checkboxes: CheckboxProps[];
13
13
  defaultValues?: string[];
14
14
  label?: string;
15
+ /** optional sub-label text (only displayed when label is positioned 'top') */
16
+ subLabel?: string;
15
17
  /** 'top' | 'left' */
16
18
  labelPosition?: 'top' | 'left';
17
19
  /** `true` to show an asterisk to indicate an item is required; otherwise, `false`. */
@@ -32,5 +34,5 @@ export interface CheckboxButtonBarProps {
32
34
  forceSquared?: boolean;
33
35
  onSetValues: (value: string[]) => void;
34
36
  }
35
- export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValid, notValidatedText, actAsRadioButtonBar, footerText, disableGroup, segmented, forceSquared, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
37
+ export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, subLabel, labelPosition, required, notValid, notValidatedText, actAsRadioButtonBar, footerText, disableGroup, segmented, forceSquared, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
36
38
  export {};
package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js CHANGED
@@ -1,73 +1,77 @@
1
- import { jsxs as F, jsx as r } from "react/jsx-runtime";
2
- import { useState as S } from "react";
1
+ import { jsxs as y, jsx as r } from "react/jsx-runtime";
2
+ import { useState as $ } from "react";
3
3
  import { c as a } from "../../clsx-OuTLNxxd.js";
4
- import { Label as L } from "../Label/Label.js";
5
- import { FeedbackBox as $ } from "../FeedbackBox/FeedbackBox.js";
6
- import { ControlsButton as C } from "../ControlsButton/ControlsButton.js";
4
+ import { Label as z } from "../Label/Label.js";
5
+ import { FeedbackBox as D } from "../FeedbackBox/FeedbackBox.js";
6
+ import { ControlsButton as F } from "../ControlsButton/ControlsButton.js";
7
7
  import '../../assets/CheckboxButtonBar.css';const e = {
8
- "checkbox-button-bar__container": "_checkbox-button-bar__container_1bsrf_1",
9
- "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_1bsrf_6",
10
- "checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_1bsrf_12",
11
- "checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_1bsrf_18",
12
- "checkbox-button-bar__row-container--segmented": "_checkbox-button-bar__row-container--segmented_1bsrf_24",
13
- "checkbox-button-bar__row": "_checkbox-button-bar__row_1bsrf_18",
14
- "checkbox-button-bar__row--not-valid": "_checkbox-button-bar__row--not-valid_1bsrf_39",
15
- "checkbox-button-bar__footer": "_checkbox-button-bar__footer_1bsrf_43"
16
- }, K = ({
17
- checkboxes: x,
8
+ "checkbox-button-bar__container": "_checkbox-button-bar__container_1jark_1",
9
+ "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_1jark_6",
10
+ "checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_1jark_12",
11
+ "checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_1jark_18",
12
+ "checkbox-button-bar__row-container--segmented": "_checkbox-button-bar__row-container--segmented_1jark_24",
13
+ "checkbox-button-bar__row": "_checkbox-button-bar__row_1jark_18",
14
+ "checkbox-button-bar__row--not-valid": "_checkbox-button-bar__row--not-valid_1jark_39",
15
+ "checkbox-button-bar__sub-text": "_checkbox-button-bar__sub-text_1jark_43"
16
+ }, O = ({
17
+ checkboxes: u,
18
18
  defaultValues: n,
19
- label: f,
20
- labelPosition: y = "top",
21
- required: j = !1,
22
- notValid: m = !1,
19
+ label: h,
20
+ subLabel: l = "",
21
+ labelPosition: d = "top",
22
+ required: S = !1,
23
+ notValid: p = !1,
23
24
  notValidatedText: _ = "",
24
- actAsRadioButtonBar: c = !1,
25
- footerText: u = "",
26
- disableGroup: d = !1,
27
- segmented: p = !1,
28
- forceSquared: w = !1,
25
+ actAsRadioButtonBar: t = !1,
26
+ footerText: w = "",
27
+ disableGroup: f = !1,
28
+ segmented: j = !1,
29
+ forceSquared: v = !1,
29
30
  onSetValues: g
30
31
  }) => {
31
- const [l, v] = S(
32
- n && !c ? n.map(String) : n && c ? n.slice(0, 1) : []
33
- ), N = (b) => {
34
- let o = l;
35
- c ? (v([b]), g([b])) : (o.includes(b) ? o = o.filter((t) => t !== b) : o = [...o, b], v(o), g(o));
32
+ const [i, N] = $(
33
+ n && !t ? n.map(String) : n && t ? n.slice(0, 1) : []
34
+ ), C = (c) => {
35
+ let o = i;
36
+ t ? (N([c]), g([c])) : (o.includes(c) ? o = o.filter((b) => b !== c) : o = [...o, c], N(o), g(o));
36
37
  };
37
- return /* @__PURE__ */ F(
38
+ return /* @__PURE__ */ y(
38
39
  "div",
39
40
  {
40
41
  className: a(
41
42
  e["checkbox-button-bar__container"],
42
- e[`checkbox-button-bar__container--label-${y}`]
43
+ e[`checkbox-button-bar__container--label-${d}`]
43
44
  ),
44
45
  children: [
45
- f && /* @__PURE__ */ r(L, { htmlFor: "", required: j, children: f }),
46
+ (h || l) && /* @__PURE__ */ y("div", { children: [
47
+ h && /* @__PURE__ */ r(z, { htmlFor: "", required: S, children: h }),
48
+ l && d === "top" && /* @__PURE__ */ r("div", { className: e["checkbox-button-bar__sub-text"], children: l })
49
+ ] }),
46
50
  /* @__PURE__ */ r(
47
51
  "div",
48
52
  {
49
53
  className: a(e["checkbox-button-bar__row-container"], {
50
- [e["checkbox-button-bar__row-container--segmented"]]: p
54
+ [e["checkbox-button-bar__row-container--segmented"]]: j
51
55
  }),
52
- children: p ? x.map(({ label: b, value: o, prefix: t, tooltip: s, tooltipPosition: h, disabled: i }) => /* @__PURE__ */ r(
56
+ children: j ? u.map(({ label: c, value: o, prefix: b, tooltip: k, tooltipPosition: s, disabled: x }) => /* @__PURE__ */ r(
53
57
  "div",
54
58
  {
55
59
  className: a(e["checkbox-button-bar__row"], {
56
- [e["checkbox-button-bar__row--not-valid"]]: m || _
60
+ [e["checkbox-button-bar__row--not-valid"]]: p || _
57
61
  }),
58
62
  children: /* @__PURE__ */ r(
59
- C,
63
+ F,
60
64
  {
61
- type: c ? "radio" : "checkbox",
62
- label: b,
63
- prefix: t,
64
- tooltip: s,
65
- tooltipPosition: h,
66
- forceSquared: w,
65
+ type: t ? "radio" : "checkbox",
66
+ label: c,
67
+ prefix: b,
68
+ tooltip: k,
69
+ tooltipPosition: s,
70
+ forceSquared: v,
67
71
  value: o,
68
- checked: l.includes(o),
69
- disabled: i || d,
70
- onSetValue: (k) => N(k.target.value)
72
+ checked: i.includes(o),
73
+ disabled: x || f,
74
+ onSetValue: (m) => C(m.target.value)
71
75
  }
72
76
  )
73
77
  },
@@ -76,21 +80,21 @@ import '../../assets/CheckboxButtonBar.css';const e = {
76
80
  "div",
77
81
  {
78
82
  className: a(e["checkbox-button-bar__row"], {
79
- [e["checkbox-button-bar__row--not-valid"]]: m || _
83
+ [e["checkbox-button-bar__row--not-valid"]]: p || _
80
84
  }),
81
- children: x.map(({ label: b, value: o, prefix: t, tooltip: s, tooltipPosition: h, disabled: i }) => /* @__PURE__ */ r(
82
- C,
85
+ children: u.map(({ label: c, value: o, prefix: b, tooltip: k, tooltipPosition: s, disabled: x }) => /* @__PURE__ */ r(
86
+ F,
83
87
  {
84
- type: c ? "radio" : "checkbox",
85
- label: b,
86
- prefix: t,
87
- tooltip: s,
88
- tooltipPosition: h,
89
- forceSquared: w,
88
+ type: t ? "radio" : "checkbox",
89
+ label: c,
90
+ prefix: b,
91
+ tooltip: k,
92
+ tooltipPosition: s,
93
+ forceSquared: v,
90
94
  value: o,
91
- checked: l.includes(o),
92
- disabled: i || d,
93
- onSetValue: (k) => N(k.target.value)
95
+ checked: i.includes(o),
96
+ disabled: x || f,
97
+ onSetValue: (m) => C(m.target.value)
94
98
  },
95
99
  o
96
100
  ))
@@ -98,13 +102,13 @@ import '../../assets/CheckboxButtonBar.css';const e = {
98
102
  )
99
103
  }
100
104
  ),
101
- u && /* @__PURE__ */ r("div", { className: e["checkbox-button-bar__footer"], children: u }),
102
- _ !== "" && /* @__PURE__ */ r($, { level: "error", feedback: _ })
105
+ w && /* @__PURE__ */ r("div", { className: e["checkbox-button-bar__sub-text"], children: w }),
106
+ _ !== "" && /* @__PURE__ */ r(D, { level: "error", feedback: _ })
103
107
  ]
104
108
  }
105
109
  );
106
110
  };
107
111
  export {
108
- K as CheckboxButtonBar
112
+ O as CheckboxButtonBar
109
113
  };
110
114
  //# sourceMappingURL=CheckboxButtonBar.js.map
package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map CHANGED
@@ -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 type { ReactNode } from 'react';\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 | ReactNode;\n value: string;\n prefix?: string;\n tooltip?: ReactNode;\n tooltipPosition?: 'left' | 'center' | 'right';\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 not valid; otherwise, `false`. */\n notValid?: 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 /** `true` to sepearte each button in their own bordered container */\n segmented?: boolean;\n /** `true` sets forceSquared on all buttons */\n forceSquared?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValid = false,\n notValidatedText = '',\n actAsRadioButtonBar = false,\n footerText = '',\n disableGroup = false,\n segmented = false,\n forceSquared = 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(\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\n <div\n className={clsx(styles['checkbox-button-bar__row-container'], {\n [styles['checkbox-button-bar__row-container--segmented']]: segmented,\n })}\n >\n {segmented ? (\n checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n <div\n key={value}\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-valid']]: notValid || notValidatedText,\n })}\n >\n <ControlsButton\n type={actAsRadioButtonBar ? 'radio' : 'checkbox'}\n label={label}\n prefix={prefix}\n tooltip={tooltip}\n tooltipPosition={tooltipPosition}\n forceSquared={forceSquared}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n </div>\n ))\n ) : (\n <div\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-valid']]: notValid || notValidatedText,\n })}\n >\n {checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n <ControlsButton\n key={value}\n type={actAsRadioButtonBar ? 'radio' : 'checkbox'}\n label={label}\n prefix={prefix}\n tooltip={tooltip}\n tooltipPosition={tooltipPosition}\n forceSquared={forceSquared}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n ))}\n </div>\n )}\n </div>\n\n {footerText && <div className={styles['checkbox-button-bar__footer']}>{footerText}</div>}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValid","notValidatedText","actAsRadioButtonBar","footerText","disableGroup","segmented","forceSquared","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","prefix","tooltip","tooltipPosition","disabled","ControlsButton","event","FeedbackBox"],"mappings":"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"}
1
+ {"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\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 | ReactNode;\n value: string;\n prefix?: string;\n tooltip?: ReactNode;\n tooltipPosition?: 'left' | 'center' | 'right';\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 /** optional sub-label text (only displayed when label is positioned 'top') */\n subLabel?: 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 not valid; otherwise, `false`. */\n notValid?: 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 /** `true` to sepearte each button in their own bordered container */\n segmented?: boolean;\n /** `true` sets forceSquared on all buttons */\n forceSquared?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n subLabel = '',\n labelPosition = 'top',\n required = false,\n notValid = false,\n notValidatedText = '',\n actAsRadioButtonBar = false,\n footerText = '',\n disableGroup = false,\n segmented = false,\n forceSquared = 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(\n styles['checkbox-button-bar__container'],\n styles[`checkbox-button-bar__container--label-${labelPosition}`]\n )}\n >\n {(label || subLabel) && (\n <div>\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n\n {subLabel && labelPosition === 'top' && (\n <div className={styles['checkbox-button-bar__sub-text']}>{subLabel}</div>\n )}\n </div>\n )}\n\n <div\n className={clsx(styles['checkbox-button-bar__row-container'], {\n [styles['checkbox-button-bar__row-container--segmented']]: segmented,\n })}\n >\n {segmented ? (\n checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n <div\n key={value}\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-valid']]: notValid || notValidatedText,\n })}\n >\n <ControlsButton\n type={actAsRadioButtonBar ? 'radio' : 'checkbox'}\n label={label}\n prefix={prefix}\n tooltip={tooltip}\n tooltipPosition={tooltipPosition}\n forceSquared={forceSquared}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n </div>\n ))\n ) : (\n <div\n className={clsx(styles['checkbox-button-bar__row'], {\n [styles['checkbox-button-bar__row--not-valid']]: notValid || notValidatedText,\n })}\n >\n {checkboxes.map(({ label, value, prefix, tooltip, tooltipPosition, disabled }) => (\n <ControlsButton\n key={value}\n type={actAsRadioButtonBar ? 'radio' : 'checkbox'}\n label={label}\n prefix={prefix}\n tooltip={tooltip}\n tooltipPosition={tooltipPosition}\n forceSquared={forceSquared}\n value={value}\n checked={currentValues.includes(value)}\n disabled={disabled || disableGroup}\n onSetValue={(event) => handleChange(event.target.value)}\n />\n ))}\n </div>\n )}\n </div>\n\n {footerText && <div className={styles['checkbox-button-bar__sub-text']}>{footerText}</div>}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","subLabel","labelPosition","required","notValid","notValidatedText","actAsRadioButtonBar","footerText","disableGroup","segmented","forceSquared","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","prefix","tooltip","tooltipPosition","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;;;GAiDaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,qBAAAC,IAAsB;AAAA,EACtB,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AAC5B,QAAM,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCf,KAAiB,CAACO,IACdP,EAAc,IAAI,MAAM,IACxBA,KAAiBO,IACfP,EAAc,MAAM,GAAG,CAAC,IACxB,CAAA;AAAA,EAAC,GAGHgB,IAAe,CAACC,MAAkB;AACtC,QAAIC,IAASL;AAEb,IAAIN,KACFO,EAAiB,CAACG,CAAK,CAAC,GACxBL,EAAY,CAACK,CAAK,CAAC,MAEfC,EAAO,SAASD,CAAK,IACvBC,IAASA,EAAO,OAAO,CAACC,MAAQA,MAAQF,CAAK,IAE7CC,IAAS,CAAC,GAAGA,GAAQD,CAAK,GAE5BH,EAAiBI,CAAM,GACvBN,EAAYM,CAAM;AAAA,EAEtB;AAEA,SACE,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyCnB,CAAa,EAAE;AAAA,MAAA;AAAA,MAG/D,UAAA;AAAA,SAAAF,KAASC,wBACR,OAAA,EACE,UAAA;AAAA,UAAAD,KACC,gBAAAsB,EAACC,GAAA,EAAM,SAAQ,IAAG,UAAApB,GACf,UAAAH,GACH;AAAA,UAGDC,KAAYC,MAAkB,SAC7B,gBAAAoB,EAAC,SAAI,WAAWD,EAAO,+BAA+B,GAAI,UAAApB,EAAA,CAAS;AAAA,QAAA,GAEvE;AAAA,QAGF,gBAAAqB;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWF,EAAKC,EAAO,oCAAoC,GAAG;AAAA,cAC5D,CAACA,EAAO,+CAA+C,CAAC,GAAGZ;AAAA,YAAA,CAC5D;AAAA,YAEA,UAAAA,IACCX,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAgB,GAAO,QAAAQ,GAAQ,SAAAC,GAAS,iBAAAC,GAAiB,UAAAC,EAAA,MAChE,gBAAAL;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,kBAClD,CAACA,EAAO,qCAAqC,CAAC,GAAGjB,KAAYC;AAAA,gBAAA,CAC9D;AAAA,gBAED,UAAA,gBAAAiB;AAAA,kBAACM;AAAA,kBAAA;AAAA,oBACC,MAAMtB,IAAsB,UAAU;AAAA,oBACtC,OAAON;AAAAA,oBACP,QAAAwB;AAAA,oBACA,SAAAC;AAAA,oBACA,iBAAAC;AAAA,oBACA,cAAAhB;AAAA,oBACA,OAAAM;AAAA,oBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,oBACrC,UAAUW,KAAYnB;AAAA,oBACtB,YAAY,CAACqB,MAAUd,EAAac,EAAM,OAAO,KAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACxD;AAAA,cAhBKb;AAAA,YAAA,CAkBR,IAED,gBAAAM;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWF,EAAKC,EAAO,0BAA0B,GAAG;AAAA,kBAClD,CAACA,EAAO,qCAAqC,CAAC,GAAGjB,KAAYC;AAAA,gBAAA,CAC9D;AAAA,gBAEA,UAAAP,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAgB,GAAO,QAAAQ,GAAQ,SAAAC,GAAS,iBAAAC,GAAiB,UAAAC,EAAA,MACjE,gBAAAL;AAAA,kBAACM;AAAA,kBAAA;AAAA,oBAEC,MAAMtB,IAAsB,UAAU;AAAA,oBACtC,OAAON;AAAAA,oBACP,QAAAwB;AAAA,oBACA,SAAAC;AAAA,oBACA,iBAAAC;AAAA,oBACA,cAAAhB;AAAA,oBACA,OAAAM;AAAA,oBACA,SAASJ,EAAc,SAASI,CAAK;AAAA,oBACrC,UAAUW,KAAYnB;AAAA,oBACtB,YAAY,CAACqB,MAAUd,EAAac,EAAM,OAAO,KAAK;AAAA,kBAAA;AAAA,kBAVjDb;AAAA,gBAAA,CAYR;AAAA,cAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,QAIHT,KAAc,gBAAAe,EAAC,OAAA,EAAI,WAAWD,EAAO,+BAA+B,GAAI,UAAAd,GAAW;AAAA,QACnFF,MAAqB,MAAM,gBAAAiB,EAACQ,KAAY,OAAM,SAAQ,UAAUzB,EAAA,CAAkB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzF;"}
package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js CHANGED
@@ -77,6 +77,7 @@ n.args = {
77
77
  ],
78
78
  defaultValues: ["1", "2"],
79
79
  labelPosition: "top",
80
+ subLabel: "Selecteer een week",
80
81
  footerText: "Weken in periode 2",
81
82
  onSetValues: o()
82
83
  };
package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map CHANGED
@@ -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\nimport { Periods } from 'components/Periods';\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 actAsRadioButtonBar: {\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 footerText: 'Weken in periode 2',\n onSetValues: fn(),\n};\n\nexport const AsRadioButtonBar = Template.bind({});\nAsRadioButtonBar.args = {\n label: 'Weken',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n },\n {\n label: '2',\n value: '2',\n },\n {\n label: '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'],\n labelPosition: 'top',\n actAsRadioButtonBar: true,\n onSetValues: fn(),\n};\n\nexport const WithPrefix = Template.bind({});\nWithPrefix.args = {\n label: 'Weken',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n prefix: '13',\n },\n {\n label: '2',\n value: '2',\n prefix: '14',\n },\n {\n label: '3',\n value: '3',\n prefix: '15',\n },\n {\n label: '4',\n value: '4',\n prefix: '16',\n },\n {\n label: '5',\n value: '5',\n prefix: '17',\n },\n {\n label: '6',\n value: '6',\n prefix: '18',\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: false,\n onSetValues: fn(),\n};\n\nexport const WithTooltip = Template.bind({});\nWithTooltip.args = {\n label: 'Weken',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n prefix: '36',\n tooltip: (\n <>\n 1 sept - 5 sept\n <br />\n 2025\n </>\n ),\n tooltipPosition: 'left',\n },\n {\n label: '2',\n value: '2',\n prefix: '37',\n tooltip: (\n <>\n 8 sept - 12 sept\n <br />\n 2025\n </>\n ),\n },\n {\n label: '3',\n value: '3',\n prefix: '38',\n tooltip: (\n <>\n 15 sept - 19 sept\n <br />\n 2025\n </>\n ),\n },\n {\n label: '4',\n value: '4',\n prefix: '39',\n tooltip: (\n <>\n 22 sept - 26 sept\n <br />\n 2025\n </>\n ),\n },\n {\n label: '5',\n value: '5',\n prefix: '40',\n tooltip: (\n <>\n 29 sept - 3 okt\n <br />\n 2025\n </>\n ),\n },\n {\n label: '6',\n value: '6',\n prefix: '41',\n tooltip: (\n <>\n 6 okt - 10 okt\n <br />\n 2025\n </>\n ),\n },\n {\n label: '7',\n value: '7',\n prefix: '42',\n tooltip: (\n <>\n 13 okt - 17 okt\n <br />\n 2025\n </>\n ),\n },\n {\n label: '8',\n value: '8',\n prefix: '43',\n tooltip: (\n <>\n 20 okt - 24 okt\n <br />\n 2025\n </>\n ),\n tooltipPosition: 'right',\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: false,\n onSetValues: fn(),\n};\n\nexport const Segmented = Template.bind({});\nSegmented.args = {\n label: 'Year(s)',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n tooltip: <>2023 - 2024</>,\n tooltipPosition: 'left',\n },\n {\n label: '2',\n value: '2',\n tooltip: <>2025 - 2026</>,\n },\n {\n label: '3',\n value: '3',\n tooltip: <>2026 - 2027</>,\n },\n {\n label: '4',\n value: '4',\n tooltip: <>2027 - 2028</>,\n tooltipPosition: 'right',\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: false,\n segmented: true,\n onSetValues: fn(),\n};\n\nexport const WithPeriods = Template.bind({});\nWithPeriods.args = {\n label: 'Aanbieding',\n required: true,\n checkboxes: [\n {\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n label: <Periods periods={[1, 2]} />,\n value: '1',\n },\n {\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n label: <Periods periods={[2, 3]} />,\n value: '2',\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: false,\n segmented: true,\n onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn","AsRadioButtonBar","WithPrefix","WithTooltip","jsxs","Fragment","Segmented","WithPeriods","Periods"],"mappings":"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"}
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\nimport { Periods } from 'components/Periods';\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 actAsRadioButtonBar: {\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 subLabel: 'Selecteer een week',\n footerText: 'Weken in periode 2',\n onSetValues: fn(),\n};\n\nexport const AsRadioButtonBar = Template.bind({});\nAsRadioButtonBar.args = {\n label: 'Weken',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n },\n {\n label: '2',\n value: '2',\n },\n {\n label: '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'],\n labelPosition: 'top',\n actAsRadioButtonBar: true,\n onSetValues: fn(),\n};\n\nexport const WithPrefix = Template.bind({});\nWithPrefix.args = {\n label: 'Weken',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n prefix: '13',\n },\n {\n label: '2',\n value: '2',\n prefix: '14',\n },\n {\n label: '3',\n value: '3',\n prefix: '15',\n },\n {\n label: '4',\n value: '4',\n prefix: '16',\n },\n {\n label: '5',\n value: '5',\n prefix: '17',\n },\n {\n label: '6',\n value: '6',\n prefix: '18',\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: false,\n onSetValues: fn(),\n};\n\nexport const WithTooltip = Template.bind({});\nWithTooltip.args = {\n label: 'Weken',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n prefix: '36',\n tooltip: (\n <>\n 1 sept - 5 sept\n <br />\n 2025\n </>\n ),\n tooltipPosition: 'left',\n },\n {\n label: '2',\n value: '2',\n prefix: '37',\n tooltip: (\n <>\n 8 sept - 12 sept\n <br />\n 2025\n </>\n ),\n },\n {\n label: '3',\n value: '3',\n prefix: '38',\n tooltip: (\n <>\n 15 sept - 19 sept\n <br />\n 2025\n </>\n ),\n },\n {\n label: '4',\n value: '4',\n prefix: '39',\n tooltip: (\n <>\n 22 sept - 26 sept\n <br />\n 2025\n </>\n ),\n },\n {\n label: '5',\n value: '5',\n prefix: '40',\n tooltip: (\n <>\n 29 sept - 3 okt\n <br />\n 2025\n </>\n ),\n },\n {\n label: '6',\n value: '6',\n prefix: '41',\n tooltip: (\n <>\n 6 okt - 10 okt\n <br />\n 2025\n </>\n ),\n },\n {\n label: '7',\n value: '7',\n prefix: '42',\n tooltip: (\n <>\n 13 okt - 17 okt\n <br />\n 2025\n </>\n ),\n },\n {\n label: '8',\n value: '8',\n prefix: '43',\n tooltip: (\n <>\n 20 okt - 24 okt\n <br />\n 2025\n </>\n ),\n tooltipPosition: 'right',\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: false,\n onSetValues: fn(),\n};\n\nexport const Segmented = Template.bind({});\nSegmented.args = {\n label: 'Year(s)',\n required: true,\n checkboxes: [\n {\n label: '1',\n value: '1',\n tooltip: <>2023 - 2024</>,\n tooltipPosition: 'left',\n },\n {\n label: '2',\n value: '2',\n tooltip: <>2025 - 2026</>,\n },\n {\n label: '3',\n value: '3',\n tooltip: <>2026 - 2027</>,\n },\n {\n label: '4',\n value: '4',\n tooltip: <>2027 - 2028</>,\n tooltipPosition: 'right',\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: false,\n segmented: true,\n onSetValues: fn(),\n};\n\nexport const WithPeriods = Template.bind({});\nWithPeriods.args = {\n label: 'Aanbieding',\n required: true,\n checkboxes: [\n {\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n label: <Periods periods={[1, 2]} />,\n value: '1',\n },\n {\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n label: <Periods periods={[2, 3]} />,\n value: '2',\n },\n ],\n defaultValues: ['1'],\n labelPosition: 'top',\n actAsRadioButtonBar: false,\n segmented: true,\n onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn","AsRadioButtonBar","WithPrefix","WithTooltip","jsxs","Fragment","Segmented","WithPeriods","Periods"],"mappings":"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"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@uva-glass/component-library",
3
3
  "author": "Team Glass - Frontend vrienden",
4
4
  "private": false,
5
- "version": "3.53.2",
5
+ "version": "3.53.3",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",