@uva-glass/component-library 3.25.1 → 3.26.1

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 (14) hide show
  1. package/dist/assets/CheckboxButtonBar.css +1 -1
  2. package/dist/assets/OverlayStepBar.css +1 -1
  3. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.d.ts +3 -1
  4. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js +38 -35
  5. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -1
  6. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +5 -4
  7. package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map +1 -1
  8. package/dist/components/OverlayStepBar/OverlayStepBar.d.ts +3 -1
  9. package/dist/components/OverlayStepBar/OverlayStepBar.js +54 -27
  10. package/dist/components/OverlayStepBar/OverlayStepBar.js.map +1 -1
  11. package/dist/components/OverlayStepBar/OverlayStepBar.stories.d.ts +1 -0
  12. package/dist/components/OverlayStepBar/OverlayStepBar.stories.js +27 -15
  13. package/dist/components/OverlayStepBar/OverlayStepBar.stories.js.map +1 -1
  14. package/package.json +3 -3
package/dist/assets/CheckboxButtonBar.css CHANGED
@@ -1 +1 @@
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)}
1
+ ._checkbox-button-bar__container_u7fv0_1{display:flex;flex-wrap:wrap}._checkbox-button-bar__container--label-left_u7fv0_6{align-items:baseline;flex-direction:row;gap:1rem}._checkbox-button-bar__container--label-top_u7fv0_12{align-items:flex-start;flex-direction:column;gap:.5rem}._checkbox-button-bar__row-container_u7fv0_18{display:flex;flex-direction:column;gap:.5rem}._checkbox-button-bar__row_u7fv0_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}._checkbox-button-bar__row--not-validated_u7fv0_35{border-color:var(--new-color-red-600)}._checkbox-button-bar__footer_u7fv0_39{color:var(--new-color-grey-700);font-size:var(--font-size-text-non-essential)}
package/dist/assets/OverlayStepBar.css CHANGED
@@ -1 +1 @@
1
- ._overlay-step-bar__container_j9bq4_1{align-items:center;background-color:var(--new-color-grey-200);display:flex;height:2.5rem;justify-content:center;overflow-y:hidden}._overlay-step-bar__step-wrapper_j9bq4_10{background-color:var(--new-color-grey-200);height:100%;position:relative}._overlay-step-bar__step-wrapper_j9bq4_10:not(:last-child):after{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--new-color-grey-200);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.25rem;top:-.25rem;z-index:10}._overlay-step-bar__step-wrapper_j9bq4_10:not(:last-child):before{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--new-color-uva-white);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.5rem;top:-.25rem;z-index:5}._overlay-step-bar__step_j9bq4_10{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--new-color-grey-700);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-default);gap:.5rem;height:100%;margin-left:.5rem;padding:0 2rem 0 1.5rem;position:relative;width:calc(100% - .75rem)}._overlay-step-bar__step--label_j9bq4_56{display:none;text-decoration:none;white-space:nowrap}._overlay-step-bar__step--label_j9bq4_56:hover{text-decoration:underline}._overlay-step-bar__step--active_j9bq4_66 ._overlay-step-bar__step--label_j9bq4_56{display:block}._overlay-step-bar__step_j9bq4_10:hover ._overlay-step-bar__step--index_j9bq4_70,._overlay-step-bar__step_j9bq4_10:hover ._overlay-step-bar__step--label_j9bq4_56{text-decoration:underline}@media (min-width: 70rem){._overlay-step-bar__step--label_j9bq4_56{display:block}._overlay-step-bar__step_j9bq4_10:hover ._overlay-step-bar__step--index_j9bq4_70{text-decoration:none}}._overlay-step-bar__step_j9bq4_10:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:-.25rem;z-index:15}._overlay-step-bar__step--active_j9bq4_66{color:var(--new-color-uva-black);font-weight:var(--semibold)}._overlay-step-bar__step--active_j9bq4_66:hover ._overlay-step-bar__step--index_j9bq4_70,._overlay-step-bar__step--active_j9bq4_66:hover ._overlay-step-bar__step--label_j9bq4_56{cursor:default;text-decoration:none}
1
+ ._overlay-step-bar__container_goxua_1{align-items:center;background-color:var(--new-color-grey-200);display:flex;height:2.5rem;justify-content:center;overflow-y:hidden}._overlay-step-bar__step-wrapper_goxua_10{background-color:var(--new-color-grey-200);height:100%;position:relative}._overlay-step-bar__step-wrapper_goxua_10:not(:last-child):after{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--new-color-grey-200);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.25rem;top:-.25rem;z-index:10}._overlay-step-bar__step-wrapper_goxua_10:not(:last-child):before{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--new-color-uva-white);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.5rem;top:-.25rem;z-index:5}._overlay-step-bar__step_goxua_10{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--new-color-grey-700);cursor:pointer;display:flex;font-family:inherit;font-size:var(--font-size-default);height:100%;margin-left:.5rem;padding:0 2rem 0 1.5rem;position:relative;width:calc(100% - .75rem)}._overlay-step-bar__step--label_goxua_55{display:none;text-decoration:none;white-space:nowrap}._overlay-step-bar__step--label-show_goxua_61{display:block}._overlay-step-bar__step--index_goxua_65{margin-right:.5rem}._overlay-step-bar__step--label_goxua_55:hover{text-decoration:underline}._overlay-step-bar__step--active_goxua_73 ._overlay-step-bar__step--label_goxua_55{display:block}._overlay-step-bar__step_goxua_10:hover ._overlay-step-bar__step--index_goxua_65,._overlay-step-bar__step_goxua_10:hover ._overlay-step-bar__step--label_goxua_55{text-decoration:underline}@media (min-width: 70rem){._overlay-step-bar__step--label_goxua_55{display:block}._overlay-step-bar__step_goxua_10:hover ._overlay-step-bar__step--index_goxua_65{text-decoration:none}}._overlay-step-bar__step_goxua_10:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:-.25rem;z-index:15}._overlay-step-bar__step--active_goxua_73{color:var(--new-color-uva-black);font-weight:var(--semibold)}._overlay-step-bar__step--active_goxua_73:hover ._overlay-step-bar__step--index_goxua_65,._overlay-step-bar__step--active_goxua_73:hover ._overlay-step-bar__step--label_goxua_55{cursor:default;text-decoration:none}
package/dist/components/CheckboxButtonBar/CheckboxButtonBar.d.ts CHANGED
@@ -16,10 +16,12 @@ export interface CheckboxButtonBarProps {
16
16
  notValidated?: boolean;
17
17
  /** error text to display under the bar */
18
18
  notValidatedText?: string;
19
+ /** optional footer text */
20
+ footerText?: string;
19
21
  /** disables all checkboxes in the bar */
20
22
  disableGroup?: boolean;
21
23
  onSetValues: (value: string[]) => void;
22
24
  }
23
25
  /** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */
24
- export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidated, notValidatedText, disableGroup, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
26
+ export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidated, notValidatedText, footerText, disableGroup, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
25
27
  export {};
package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js CHANGED
@@ -1,69 +1,72 @@
1
- import { jsxs as l, jsx as r } from "react/jsx-runtime";
1
+ import { jsxs as u, jsx as r } from "react/jsx-runtime";
2
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";
3
+ import { c as i } from "../../clsx-OuTLNxxd.js";
4
+ import { Label as B } from "../Label/Label.js";
5
+ import { FeedbackBox as C } from "../FeedbackBox/FeedbackBox.js";
6
+ import { ControlsButton as N } from "../ControlsButton/ControlsButton.js";
7
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,
8
+ "checkbox-button-bar__container": "_checkbox-button-bar__container_u7fv0_1",
9
+ "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_u7fv0_6",
10
+ "checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_u7fv0_12",
11
+ "checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_u7fv0_18",
12
+ "checkbox-button-bar__row": "_checkbox-button-bar__row_u7fv0_18",
13
+ "checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_u7fv0_35",
14
+ "checkbox-button-bar__footer": "_checkbox-button-bar__footer_u7fv0_39"
15
+ }, q = ({
16
+ checkboxes: h,
16
17
  defaultValues: n,
17
18
  label: a,
18
- labelPosition: h = "top",
19
- required: u = !1,
20
- notValidated: k = !1,
19
+ labelPosition: s = "top",
20
+ required: k = !1,
21
+ notValidated: x = !1,
21
22
  notValidatedText: c = "",
22
- disableGroup: x = !1,
23
- onSetValues: m
23
+ footerText: _ = "",
24
+ disableGroup: f = !1,
25
+ onSetValues: d
24
26
  }) => {
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);
27
+ const [l, m] = w(n ? n.map(String) : []), p = (e) => {
28
+ let o = l;
29
+ o.includes(e) ? o = o.filter((b) => b !== e) : o = [...o, e], m(o), d(o);
28
30
  };
29
- return /* @__PURE__ */ l(
31
+ return /* @__PURE__ */ u(
30
32
  "div",
31
33
  {
32
- className: s(
34
+ className: i(
33
35
  t["checkbox-button-bar__container"],
34
- t[`checkbox-button-bar__container--label-${h}`]
36
+ t[`checkbox-button-bar__container--label-${s}`]
35
37
  ),
36
38
  children: [
37
- a && /* @__PURE__ */ r(z, { htmlFor: "", required: u, children: a }),
38
- /* @__PURE__ */ l("div", { className: t["checkbox-button-bar__row-container"], children: [
39
+ a && /* @__PURE__ */ r(B, { htmlFor: "", required: k, children: a }),
40
+ /* @__PURE__ */ u("div", { className: t["checkbox-button-bar__row-container"], children: [
39
41
  /* @__PURE__ */ r(
40
42
  "div",
41
43
  {
42
- className: s(t["checkbox-button-bar__row"], {
43
- [t["checkbox-button-bar__row--not-validated"]]: k || c
44
+ className: i(t["checkbox-button-bar__row"], {
45
+ [t["checkbox-button-bar__row--not-validated"]]: x || c
44
46
  }),
45
- children: i.map(({ label: e, value: o, disabled: b }) => /* @__PURE__ */ r(
46
- B,
47
+ children: h.map(({ label: e, value: o, disabled: b }) => /* @__PURE__ */ r(
48
+ N,
47
49
  {
48
50
  type: "checkbox",
49
51
  label: e,
50
52
  forceSquared: !0,
51
53
  value: o,
52
- checked: _.includes(o),
53
- disabled: b || x,
54
- onSetValue: (p) => f(p.target.value)
54
+ checked: l.includes(o),
55
+ disabled: b || f,
56
+ onSetValue: (v) => p(v.target.value)
55
57
  },
56
58
  `${o}`
57
59
  ))
58
60
  }
59
61
  ),
60
- c !== "" && /* @__PURE__ */ r(v, { level: "error", feedback: c })
62
+ _ && /* @__PURE__ */ r("div", { className: t["checkbox-button-bar__footer"], children: _ }),
63
+ c !== "" && /* @__PURE__ */ r(C, { level: "error", feedback: c })
61
64
  ] })
62
65
  ]
63
66
  }
64
67
  );
65
68
  };
66
69
  export {
67
- F as CheckboxButtonBar
70
+ q as CheckboxButtonBar
68
71
  };
69
72
  //# 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 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
+ {"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 /** optional footer text */\n footerText?: 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 footerText = '',\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 {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","footerText","disableGroup","onSetValues","currentValues","setCurrentValues","useState","handleChange","value","values","val","jsxs","clsx","styles","jsx","Label","disabled","ControlsButton","event","FeedbackBox"],"mappings":";;;;;;;;;;;;;;GAqCaA,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,YAAAC,IAAa;AAAA,EACb,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAA,CAACC,GAAeC,CAAgB,IAAIC,EAAmBX,IAAgBA,EAAc,IAAI,MAAM,IAAI,EAAE,GAErGY,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,yCAAyChB,CAAa,EAAE;AAAA,MACjE;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAkB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAjB,GACf,UACHF,GAAA;AAAA,QAED,gBAAAe,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,GAAGd,KAAgBC;AAAA,cAAA,CACtE;AAAA,cAEA,UAAAN,EAAW,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAY,GAAO,UAAAQ,QAC/B,gBAAAF;AAAA,gBAACG;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBAEL,OAAOrB;AAAAA,kBACP,cAAc;AAAA,kBACd,OAAAY;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,KAAe,gBAAAa,EAAA,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAAI,UAAWZ,GAAA;AAAA,UACjFD,MAAqB,MAAM,gBAAAc,EAACK,KAAY,OAAM,SAAQ,UAAUnB,EAAkB,CAAA;AAAA,QAAA,EACrF,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js CHANGED
@@ -1,5 +1,5 @@
1
- import { jsx as l } from "react/jsx-runtime";
2
- import { fn as t } from "../../index-Dwqes6RH.js";
1
+ import { jsx as t } from "react/jsx-runtime";
2
+ import { fn as l } 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__ */ l(e, { ...o }), n = r.bind({});
44
+ }, r = (o) => /* @__PURE__ */ t(e, { ...o }), n = r.bind({});
45
45
  n.args = {
46
46
  label: "Periode",
47
47
  required: !0,
@@ -73,7 +73,8 @@ n.args = {
73
73
  ],
74
74
  defaultValues: ["1", "2"],
75
75
  labelPosition: "top",
76
- onSetValues: t()
76
+ footerText: "Weken in periode 2",
77
+ onSetValues: l()
77
78
  };
78
79
  export {
79
80
  n as CheckboxButtonBarExample,
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\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
+ {"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 footerText: 'Weken in periode 2',\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,YAAY;AAAA,EACZ,aAAaC,EAAG;AAClB;"}
package/dist/components/OverlayStepBar/OverlayStepBar.d.ts CHANGED
@@ -3,7 +3,9 @@ export interface OverlayStepBarProps {
3
3
  stepLabels: string[];
4
4
  /** activeStep number starting with 1. */
5
5
  activeStep: number;
6
+ /** Array of prefix numbers to not show in the steplabels */
7
+ disabledCountPrefix?: number[];
6
8
  /** navigate to step. */
7
9
  onStepClick?: (step: number) => void;
8
10
  }
9
- export declare const OverlayStepBar: ({ stepLabels, activeStep, onStepClick }: OverlayStepBarProps) => import("react/jsx-runtime").JSX.Element;
11
+ export declare const OverlayStepBar: ({ stepLabels, activeStep, disabledCountPrefix, onStepClick, }: OverlayStepBarProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/OverlayStepBar/OverlayStepBar.js CHANGED
@@ -1,30 +1,57 @@
1
- import { jsx as s, jsxs as l } from "react/jsx-runtime";
2
- import { c as o } from "../../clsx-OuTLNxxd.js";
3
- import '../../assets/OverlayStepBar.css';const r = {
4
- "overlay-step-bar__container": "_overlay-step-bar__container_j9bq4_1",
5
- "overlay-step-bar__step-wrapper": "_overlay-step-bar__step-wrapper_j9bq4_10",
6
- "overlay-step-bar__step": "_overlay-step-bar__step_j9bq4_10",
7
- "overlay-step-bar__step--label": "_overlay-step-bar__step--label_j9bq4_56",
8
- "overlay-step-bar__step--active": "_overlay-step-bar__step--active_j9bq4_66",
9
- "overlay-step-bar__step--index": "_overlay-step-bar__step--index_j9bq4_70"
10
- }, v = ({ stepLabels: _, activeStep: a = 0, onStepClick: t }) => (a > _.length && console.error("activeStep is greater than the number of steps"), /* @__PURE__ */ s("div", { className: r["overlay-step-bar__container"], children: _.length && _.map((p, e) => /* @__PURE__ */ s("span", { className: r["overlay-step-bar__step-wrapper"], children: /* @__PURE__ */ l(
11
- "button",
12
- {
13
- className: o(r["overlay-step-bar__step"], [
14
- e === a - 1 && r["overlay-step-bar__step--active"]
15
- ]),
16
- ...t && { onClick: () => t(e + 1) },
17
- type: "button",
18
- "aria-label": `Step ${e + 1}`,
19
- "aria-current": e === a - 1 ? "step" : void 0,
20
- disabled: e === a - 1,
21
- children: [
22
- /* @__PURE__ */ s("span", { className: r["overlay-step-bar__step--index"], children: e + 1 }),
23
- /* @__PURE__ */ s("span", { className: r["overlay-step-bar__step--label"], children: p })
24
- ]
25
- }
26
- ) }, `${e}_${p}`)) }));
1
+ import { jsx as t, jsxs as v } from "react/jsx-runtime";
2
+ import { c as b } from "../../clsx-OuTLNxxd.js";
3
+ import '../../assets/OverlayStepBar.css';const a = {
4
+ "overlay-step-bar__container": "_overlay-step-bar__container_goxua_1",
5
+ "overlay-step-bar__step-wrapper": "_overlay-step-bar__step-wrapper_goxua_10",
6
+ "overlay-step-bar__step": "_overlay-step-bar__step_goxua_10",
7
+ "overlay-step-bar__step--label": "_overlay-step-bar__step--label_goxua_55",
8
+ "overlay-step-bar__step--label-show": "_overlay-step-bar__step--label-show_goxua_61",
9
+ "overlay-step-bar__step--index": "_overlay-step-bar__step--index_goxua_65",
10
+ "overlay-step-bar__step--active": "_overlay-step-bar__step--active_goxua_73"
11
+ }, g = ({
12
+ stepLabels: _,
13
+ activeStep: s = 0,
14
+ disabledCountPrefix: p = [],
15
+ onStepClick: l
16
+ }) => {
17
+ s > _.length && console.error("activeStep is greater than the number of steps");
18
+ const n = (r) => {
19
+ const e = r + 1;
20
+ if (p.includes(e))
21
+ return "";
22
+ const c = Array.from({ length: r }, (o, y) => y + 1).filter(
23
+ (o) => !p.includes(o)
24
+ ).length;
25
+ return String(c + 1);
26
+ };
27
+ return /* @__PURE__ */ t("div", { className: a["overlay-step-bar__container"], children: _.length && _.map((r, e) => /* @__PURE__ */ t("span", { className: a["overlay-step-bar__step-wrapper"], children: /* @__PURE__ */ v(
28
+ "button",
29
+ {
30
+ className: b(a["overlay-step-bar__step"], [
31
+ e === s - 1 && a["overlay-step-bar__step--active"]
32
+ ]),
33
+ ...l && { onClick: () => l(e + 1) },
34
+ type: "button",
35
+ "aria-label": `Step ${e + 1}`,
36
+ "aria-current": e === s - 1 ? "step" : void 0,
37
+ disabled: e === s - 1,
38
+ children: [
39
+ /* @__PURE__ */ t("span", { className: a["overlay-step-bar__step--index"], children: n(e) }),
40
+ /* @__PURE__ */ t(
41
+ "span",
42
+ {
43
+ className: b(
44
+ a["overlay-step-bar__step--label"],
45
+ p.includes(e + 1) && a["overlay-step-bar__step--label-show"]
46
+ ),
47
+ children: r
48
+ }
49
+ )
50
+ ]
51
+ }
52
+ ) }, `${e}_${r}`)) });
53
+ };
27
54
  export {
28
- v as OverlayStepBar
55
+ g as OverlayStepBar
29
56
  };
30
57
  //# sourceMappingURL=OverlayStepBar.js.map
package/dist/components/OverlayStepBar/OverlayStepBar.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OverlayStepBar.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './OverlayStepBar.module.css';\n\nexport interface OverlayStepBarProps {\n /** Array of strings. */\n stepLabels: string[];\n /** activeStep number starting with 1. */\n activeStep: number;\n /** navigate to step. */\n onStepClick?: (step: number) => void;\n}\n\nexport const OverlayStepBar = ({ stepLabels, activeStep = 0, onStepClick }: OverlayStepBarProps) => {\n if (activeStep > stepLabels.length) {\n console.error('activeStep is greater than the number of steps');\n }\n\n return (\n <div className={styles['overlay-step-bar__container']}>\n {stepLabels.length &&\n stepLabels.map((label, index) => (\n <span key={`${index}_${label}`} className={styles[`overlay-step-bar__step-wrapper`]}>\n <button\n className={clsx(styles[`overlay-step-bar__step`], [\n index === activeStep - 1 && styles[`overlay-step-bar__step--active`],\n ])}\n {...(onStepClick && { onClick: () => onStepClick(index + 1) })}\n type=\"button\"\n aria-label={`Step ${index + 1}`}\n aria-current={index === activeStep - 1 ? 'step' : undefined}\n disabled={index === activeStep - 1}\n >\n <span className={styles[`overlay-step-bar__step--index`]}>{index + 1}</span>\n <span className={styles[`overlay-step-bar__step--label`]}>{label}</span>\n </button>\n </span>\n ))}\n </div>\n );\n};\n"],"names":["OverlayStepBar","stepLabels","activeStep","onStepClick","styles","label","index","jsx","jsxs","clsx"],"mappings":";;;;;;;;;GAaaA,IAAiB,CAAC,EAAE,YAAAC,GAAY,YAAAC,IAAa,GAAG,aAAAC,SACvDD,IAAaD,EAAW,UAC1B,QAAQ,MAAM,gDAAgD,qBAI7D,OAAI,EAAA,WAAWG,EAAO,6BAA6B,GACjD,YAAW,UACVH,EAAW,IAAI,CAACI,GAAOC,MACrB,gBAAAC,EAAC,UAA+B,WAAWH,EAAO,gCAAgC,GAChF,UAAA,gBAAAI;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKL,EAAO,wBAAwB,GAAG;AAAA,MAChDE,MAAUJ,IAAa,KAAKE,EAAO,gCAAgC;AAAA,IAAA,CACpE;AAAA,IACA,GAAID,KAAe,EAAE,SAAS,MAAMA,EAAYG,IAAQ,CAAC,EAAE;AAAA,IAC5D,MAAK;AAAA,IACL,cAAY,QAAQA,IAAQ,CAAC;AAAA,IAC7B,gBAAcA,MAAUJ,IAAa,IAAI,SAAS;AAAA,IAClD,UAAUI,MAAUJ,IAAa;AAAA,IAEjC,UAAA;AAAA,MAAA,gBAAAK,EAAC,UAAK,WAAWH,EAAO,+BAA+B,GAAI,cAAQ,GAAE;AAAA,wBACpE,QAAK,EAAA,WAAWA,EAAO,+BAA+B,GAAI,UAAMC,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA,KAZ1D,GAAGC,CAAK,IAAID,CAAK,EAc5B,CACD,GACL;"}
1
+ {"version":3,"file":"OverlayStepBar.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.tsx"],"sourcesContent":["import clsx from 'clsx';\n\nimport styles from './OverlayStepBar.module.css';\n\nexport interface OverlayStepBarProps {\n /** Array of strings. */\n stepLabels: string[];\n /** activeStep number starting with 1. */\n activeStep: number;\n /** Array of prefix numbers to not show in the steplabels */\n disabledCountPrefix?: number[];\n /** navigate to step. */\n onStepClick?: (step: number) => void;\n}\n\nexport const OverlayStepBar = ({\n stepLabels,\n activeStep = 0,\n disabledCountPrefix = [],\n onStepClick,\n}: OverlayStepBarProps) => {\n if (activeStep > stepLabels.length) {\n console.error('activeStep is greater than the number of steps');\n }\n\n const getStepDisplayNumber = (stepIndex: number): string => {\n const stepNumber = stepIndex + 1;\n\n if (disabledCountPrefix.includes(stepNumber)) {\n return '';\n }\n\n const enabledStepsBefore = Array.from({ length: stepIndex }, (_, count) => count + 1).filter(\n (step) => !disabledCountPrefix.includes(step)\n ).length;\n\n return String(enabledStepsBefore + 1);\n };\n\n return (\n <div className={styles['overlay-step-bar__container']}>\n {stepLabels.length &&\n stepLabels.map((label, index) => (\n <span key={`${index}_${label}`} className={styles[`overlay-step-bar__step-wrapper`]}>\n <button\n className={clsx(styles[`overlay-step-bar__step`], [\n index === activeStep - 1 && styles[`overlay-step-bar__step--active`],\n ])}\n {...(onStepClick && { onClick: () => onStepClick(index + 1) })}\n type=\"button\"\n aria-label={`Step ${index + 1}`}\n aria-current={index === activeStep - 1 ? 'step' : undefined}\n disabled={index === activeStep - 1}\n >\n <span className={styles[`overlay-step-bar__step--index`]}>{getStepDisplayNumber(index)}</span>\n <span\n className={clsx(\n styles[`overlay-step-bar__step--label`],\n disabledCountPrefix.includes(index + 1) && styles[`overlay-step-bar__step--label-show`]\n )}\n >\n {label}\n </span>\n </button>\n </span>\n ))}\n </div>\n );\n};\n"],"names":["OverlayStepBar","stepLabels","activeStep","disabledCountPrefix","onStepClick","getStepDisplayNumber","stepIndex","stepNumber","enabledStepsBefore","_","count","step","styles","label","index","jsx","jsxs","clsx"],"mappings":";;;;;;;;;;GAeaA,IAAiB,CAAC;AAAA,EAC7B,YAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,qBAAAC,IAAsB,CAAC;AAAA,EACvB,aAAAC;AACF,MAA2B;AACrB,EAAAF,IAAaD,EAAW,UAC1B,QAAQ,MAAM,gDAAgD;AAG1D,QAAAI,IAAuB,CAACC,MAA8B;AAC1D,UAAMC,IAAaD,IAAY;AAE3B,QAAAH,EAAoB,SAASI,CAAU;AAClC,aAAA;AAGT,UAAMC,IAAqB,MAAM,KAAK,EAAE,QAAQF,KAAa,CAACG,GAAGC,MAAUA,IAAQ,CAAC,EAAE;AAAA,MACpF,CAACC,MAAS,CAACR,EAAoB,SAASQ,CAAI;AAAA,IAAA,EAC5C;AAEK,WAAA,OAAOH,IAAqB,CAAC;AAAA,EACtC;AAEA,2BACG,OAAI,EAAA,WAAWI,EAAO,6BAA6B,GACjD,YAAW,UACVX,EAAW,IAAI,CAACY,GAAOC,MACrB,gBAAAC,EAAC,UAA+B,WAAWH,EAAO,gCAAgC,GAChF,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKL,EAAO,wBAAwB,GAAG;AAAA,QAChDE,MAAUZ,IAAa,KAAKU,EAAO,gCAAgC;AAAA,MAAA,CACpE;AAAA,MACA,GAAIR,KAAe,EAAE,SAAS,MAAMA,EAAYU,IAAQ,CAAC,EAAE;AAAA,MAC5D,MAAK;AAAA,MACL,cAAY,QAAQA,IAAQ,CAAC;AAAA,MAC7B,gBAAcA,MAAUZ,IAAa,IAAI,SAAS;AAAA,MAClD,UAAUY,MAAUZ,IAAa;AAAA,MAEjC,UAAA;AAAA,QAAA,gBAAAa,EAAC,UAAK,WAAWH,EAAO,+BAA+B,GAAI,UAAAP,EAAqBS,CAAK,EAAE,CAAA;AAAA,QACvF,gBAAAC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWE;AAAA,cACTL,EAAO,+BAA+B;AAAA,cACtCT,EAAoB,SAASW,IAAQ,CAAC,KAAKF,EAAO,oCAAoC;AAAA,YACxF;AAAA,YAEC,UAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA,KAnBO,GAAGC,CAAK,IAAID,CAAK,EAqB5B,CACD,GACL;AAEJ;"}
package/dist/components/OverlayStepBar/OverlayStepBar.stories.d.ts CHANGED
@@ -3,3 +3,4 @@ import { OverlayStepBarProps } from './OverlayStepBar';
3
3
  declare const _default: Meta<OverlayStepBarProps>;
4
4
  export default _default;
5
5
  export declare const OverlayStepBarExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, OverlayStepBarProps>;
6
+ export declare const OverlayStepBarHidePrifix: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, OverlayStepBarProps>;
package/dist/components/OverlayStepBar/OverlayStepBar.stories.js CHANGED
@@ -1,40 +1,52 @@
1
- import { jsx as s } from "react/jsx-runtime";
2
- import { useState as c } from "react";
1
+ import { jsx as l } from "react/jsx-runtime";
2
+ import { useState as p } from "react";
3
3
  import { OverlayStepBar as t } from "./OverlayStepBar.js";
4
- const i = "<OverlayStepBar stepLabels={[string]} activeStep={number} onStepClick={(step) => void}/>", b = {
4
+ const c = "<OverlayStepBar stepLabels={[string]} activeStep={number} disabledCountPrefix={[numbers]} onStepClick={(step) => void}/>", u = {
5
5
  title: "Molecules/OverlayStepBar",
6
6
  component: t,
7
7
  argTypes: {
8
8
  activeStep: { control: "number" },
9
9
  stepLabels: { control: "object" },
10
+ disabledCountPrefix: {
11
+ table: {
12
+ disable: !0
13
+ }
14
+ },
10
15
  onStepClick: { action: "stepClicked" }
11
16
  },
12
17
  parameters: {
13
18
  inspectComponent: t,
14
- codeString: i
19
+ codeString: c
15
20
  }
16
- }, a = (e) => {
17
- const [n, r] = c(e.activeStep || 1);
18
- return /* @__PURE__ */ s(
21
+ }, o = (e) => {
22
+ const [s, n] = p(e.activeStep || 1);
23
+ return /* @__PURE__ */ l(
19
24
  t,
20
25
  {
21
26
  ...e,
22
- activeStep: n,
23
- onStepClick: (o) => {
24
- var p;
25
- r(o), (p = e.onStepClick) == null || p.call(e, o);
27
+ activeStep: s,
28
+ onStepClick: (i) => {
29
+ var r;
30
+ n(i), (r = e.onStepClick) == null || r.call(e, i);
26
31
  }
27
32
  }
28
33
  );
29
- }, l = {
34
+ }, a = {
30
35
  stepLabels: ["Basic Details", "Lecturers", "Period Planning", "Assessment", "Miscellaneous", "Overview"]
31
- }, S = a.bind({});
36
+ }, S = o.bind({});
32
37
  S.args = {
33
- ...l,
38
+ ...a,
39
+ activeStep: 2
40
+ };
41
+ const d = o.bind({});
42
+ d.args = {
43
+ ...a,
44
+ disabledCountPrefix: [1, 6],
34
45
  activeStep: 2
35
46
  };
36
47
  export {
37
48
  S as OverlayStepBarExample,
38
- b as default
49
+ d as OverlayStepBarHidePrifix,
50
+ u as default
39
51
  };
40
52
  //# sourceMappingURL=OverlayStepBar.stories.js.map
package/dist/components/OverlayStepBar/OverlayStepBar.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString = '<OverlayStepBar stepLabels={[string]} activeStep={number} onStepClick={(step) => void}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/OverlayStepBar',\n component: OverlayStepBar,\n argTypes: {\n activeStep: { control: 'number' },\n stepLabels: { control: 'object' },\n onStepClick: { action: 'stepClicked' },\n },\n parameters: {\n inspectComponent: OverlayStepBar,\n codeString: codeString,\n },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => {\n const [activeStep, setActiveStep] = useState(args.activeStep || 1);\n\n return (\n <OverlayStepBar\n {...args}\n activeStep={activeStep}\n onStepClick={(step) => {\n setActiveStep(step);\n args.onStepClick?.(step);\n }}\n />\n );\n};\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n stepLabels: ['Basic Details', 'Lecturers', 'Period Planning', 'Assessment', 'Miscellaneous', 'Overview'],\n};\n\nexport const OverlayStepBarExample = Template.bind({});\nOverlayStepBarExample.args = {\n ...defaultArgs,\n activeStep: 2,\n};\n"],"names":["codeString","OverlayStepBar_stories","OverlayStepBar","Template","args","activeStep","setActiveStep","useState","jsx","step","_a","defaultArgs","OverlayStepBarExample"],"mappings":";;;AAOA,MAAMA,IAAa,4FAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY,EAAE,SAAS,SAAS;AAAA,IAChC,YAAY,EAAE,SAAS,SAAS;AAAA,IAChC,aAAa,EAAE,QAAQ,cAAc;AAAA,EACvC;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS;AACvD,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,EAAK,cAAc,CAAC;AAG/D,SAAA,gBAAAI;AAAA,IAACN;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,YAAAC;AAAA,MACA,aAAa,CAACI,MAAS;;AACrB,QAAAH,EAAcG,CAAI,IAClBC,IAAAN,EAAK,gBAAL,QAAAM,EAAA,KAAAN,GAAmBK;AAAA,MAAI;AAAA,IACzB;AAAA,EACF;AAEJ,GAEME,IAA4C;AAAA,EAChD,YAAY,CAAC,iBAAiB,aAAa,mBAAmB,cAAc,iBAAiB,UAAU;AACzG,GAEaC,IAAwBT,EAAS,KAAK,CAAE,CAAA;AACrDS,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AAAA,EACH,YAAY;AACd;"}
1
+ {"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString =\n '<OverlayStepBar stepLabels={[string]} activeStep={number} disabledCountPrefix={[numbers]} onStepClick={(step) => void}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/OverlayStepBar',\n component: OverlayStepBar,\n argTypes: {\n activeStep: { control: 'number' },\n stepLabels: { control: 'object' },\n disabledCountPrefix: {\n table: {\n disable: true,\n },\n },\n onStepClick: { action: 'stepClicked' },\n },\n parameters: {\n inspectComponent: OverlayStepBar,\n codeString: codeString,\n },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => {\n const [activeStep, setActiveStep] = useState(args.activeStep || 1);\n\n return (\n <OverlayStepBar\n {...args}\n activeStep={activeStep}\n onStepClick={(step) => {\n setActiveStep(step);\n args.onStepClick?.(step);\n }}\n />\n );\n};\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n stepLabels: ['Basic Details', 'Lecturers', 'Period Planning', 'Assessment', 'Miscellaneous', 'Overview'],\n};\n\nexport const OverlayStepBarExample = Template.bind({});\nOverlayStepBarExample.args = {\n ...defaultArgs,\n activeStep: 2,\n};\n\nexport const OverlayStepBarHidePrifix = Template.bind({});\nOverlayStepBarHidePrifix.args = {\n ...defaultArgs,\n disabledCountPrefix: [1, 6],\n activeStep: 2,\n};\n"],"names":["codeString","OverlayStepBar_stories","OverlayStepBar","Template","args","activeStep","setActiveStep","useState","jsx","step","_a","defaultArgs","OverlayStepBarExample","OverlayStepBarHidePrifix"],"mappings":";;;AAOA,MAAMA,IACJ,4HAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY,EAAE,SAAS,SAAS;AAAA,IAChC,YAAY,EAAE,SAAS,SAAS;AAAA,IAChC,qBAAqB;AAAA,MACnB,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,aAAa,EAAE,QAAQ,cAAc;AAAA,EACvC;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAS;AACvD,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,EAAK,cAAc,CAAC;AAG/D,SAAA,gBAAAI;AAAA,IAACN;AAAA,IAAA;AAAA,MACE,GAAGE;AAAA,MACJ,YAAAC;AAAA,MACA,aAAa,CAACI,MAAS;;AACrB,QAAAH,EAAcG,CAAI,IAClBC,IAAAN,EAAK,gBAAL,QAAAM,EAAA,KAAAN,GAAmBK;AAAA,MAAI;AAAA,IACzB;AAAA,EACF;AAEJ,GAEME,IAA4C;AAAA,EAChD,YAAY,CAAC,iBAAiB,aAAa,mBAAmB,cAAc,iBAAiB,UAAU;AACzG,GAEaC,IAAwBT,EAAS,KAAK,CAAE,CAAA;AACrDS,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AAAA,EACH,YAAY;AACd;AAEO,MAAME,IAA2BV,EAAS,KAAK,CAAE,CAAA;AACxDU,EAAyB,OAAO;AAAA,EAC9B,GAAGF;AAAA,EACH,qBAAqB,CAAC,GAAG,CAAC;AAAA,EAC1B,YAAY;AACd;"}
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.25.1",
5
+ "version": "3.26.1",
6
6
  "type": "module",
7
7
  "main": "dist/index.js",
8
8
  "types": "dist/index.d.ts",
@@ -64,7 +64,7 @@
64
64
  "@testing-library/jest-dom": "^6.6.3",
65
65
  "@testing-library/react": "^16.3.0",
66
66
  "@types/jest": "^29.5.14",
67
- "@types/node": "^22.15.21",
67
+ "@types/node": "^22.15.23",
68
68
  "@types/react-dom": "^19.1.5",
69
69
  "@types/react": "^19.1.6",
70
70
  "@uva-glass/eslint-config": "^1.3.10",
@@ -115,6 +115,6 @@
115
115
  "@rollup/rollup-linux-x64-gnu": "^4.41.1",
116
116
  "@rspack/binding-darwin-arm64": "1.3.12",
117
117
  "@rspack/binding-linux-x64-gnu": "1.3.12",
118
- "@ast-grep/napi-linux-x64-gnu": "0.38.2"
118
+ "@ast-grep/napi-linux-x64-gnu": "0.38.3"
119
119
  }
120
120
  }