@uva-glass/component-library 3.26.0 → 3.26.1

package/dist/assets/CheckboxButtonBar.css

@@ -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)}
+._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/components/CheckboxButtonBar/CheckboxButtonBar.d.ts

@@ -16,10 +16,12 @@ export interface CheckboxButtonBarProps {
     notValidated?: boolean;
     /** error text to display under the bar */
     notValidatedText?: string;
+    /** optional footer text */
+    footerText?: string;
     /** disables all checkboxes in the bar */
     disableGroup?: boolean;
     onSetValues: (value: string[]) => void;
 }
 /** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */
-export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidated, notValidatedText, disableGroup, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidated, notValidatedText, footerText, disableGroup, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js

@@ -1,69 +1,72 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
 import { useState as w } from "react";
-import { c as s } from "../../clsx-OuTLNxxd.js";
-import { Label as z } from "../Label/Label.js";
-import { FeedbackBox as v } from "../FeedbackBox/FeedbackBox.js";
-import { ControlsButton as B } from "../ControlsButton/ControlsButton.js";
+import { c as i } from "../../clsx-OuTLNxxd.js";
+import { Label as B } from "../Label/Label.js";
+import { FeedbackBox as C } from "../FeedbackBox/FeedbackBox.js";
+import { ControlsButton as N } from "../ControlsButton/ControlsButton.js";
 import '../../assets/CheckboxButtonBar.css';const t = {
-  "checkbox-button-bar__container": "_checkbox-button-bar__container_e14sz_1",
-  "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_e14sz_6",
-  "checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_e14sz_12",
-  "checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_e14sz_18",
-  "checkbox-button-bar__row": "_checkbox-button-bar__row_e14sz_18",
-  "checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_e14sz_35"
-}, F = ({
-  checkboxes: i,
+  "checkbox-button-bar__container": "_checkbox-button-bar__container_u7fv0_1",
+  "checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_u7fv0_6",
+  "checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_u7fv0_12",
+  "checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_u7fv0_18",
+  "checkbox-button-bar__row": "_checkbox-button-bar__row_u7fv0_18",
+  "checkbox-button-bar__row--not-validated": "_checkbox-button-bar__row--not-validated_u7fv0_35",
+  "checkbox-button-bar__footer": "_checkbox-button-bar__footer_u7fv0_39"
+}, q = ({
+  checkboxes: h,
   defaultValues: n,
   label: a,
-  labelPosition: h = "top",
-  required: u = !1,
-  notValidated: k = !1,
+  labelPosition: s = "top",
+  required: k = !1,
+  notValidated: x = !1,
   notValidatedText: c = "",
-  disableGroup: x = !1,
-  onSetValues: m
+  footerText: _ = "",
+  disableGroup: f = !1,
+  onSetValues: d
 }) => {
-  const [_, d] = w(n ? n.map(String) : []), f = (e) => {
-    let o = _;
-    o.includes(e) ? o = o.filter((b) => b !== e) : o = [...o, e], d(o), m(o);
+  const [l, m] = w(n ? n.map(String) : []), p = (e) => {
+    let o = l;
+    o.includes(e) ? o = o.filter((b) => b !== e) : o = [...o, e], m(o), d(o);
   };
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: s(
+      className: i(
         t["checkbox-button-bar__container"],
-        t[`checkbox-button-bar__container--label-${h}`]
+        t[`checkbox-button-bar__container--label-${s}`]
       ),
       children: [
-        a && /* @__PURE__ */ r(z, { htmlFor: "", required: u, children: a }),
-        /* @__PURE__ */ l("div", { className: t["checkbox-button-bar__row-container"], children: [
+        a && /* @__PURE__ */ r(B, { htmlFor: "", required: k, children: a }),
+        /* @__PURE__ */ u("div", { className: t["checkbox-button-bar__row-container"], children: [
           /* @__PURE__ */ r(
             "div",
             {
-              className: s(t["checkbox-button-bar__row"], {
-                [t["checkbox-button-bar__row--not-validated"]]: k || c
+              className: i(t["checkbox-button-bar__row"], {
+                [t["checkbox-button-bar__row--not-validated"]]: x || c
               }),
-              children: i.map(({ label: e, value: o, disabled: b }) => /* @__PURE__ */ r(
-                B,
+              children: h.map(({ label: e, value: o, disabled: b }) => /* @__PURE__ */ r(
+                N,
                 {
                   type: "checkbox",
                   label: e,
                   forceSquared: !0,
                   value: o,
-                  checked: _.includes(o),
-                  disabled: b || x,
-                  onSetValue: (p) => f(p.target.value)
+                  checked: l.includes(o),
+                  disabled: b || f,
+                  onSetValue: (v) => p(v.target.value)
                 },
                 `${o}`
               ))
             }
           ),
-          c !== "" && /* @__PURE__ */ r(v, { level: "error", feedback: c })
+          _ && /* @__PURE__ */ r("div", { className: t["checkbox-button-bar__footer"], children: _ }),
+          c !== "" && /* @__PURE__ */ r(C, { level: "error", feedback: c })
         ] })
       ]
     }
   );
 };
 export {
-  F as CheckboxButtonBar
+  q as CheckboxButtonBar
 };
 //# sourceMappingURL=CheckboxButtonBar.js.map

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map

@@ -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;"}
+{"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

@@ -1,5 +1,5 @@
-import { jsx as l } from "react/jsx-runtime";
-import { fn as t } from "../../index-Dwqes6RH.js";
+import { jsx as t } from "react/jsx-runtime";
+import { fn as l } from "../../index-Dwqes6RH.js";
 import { CheckboxButtonBar as e } from "./CheckboxButtonBar.js";
 const a = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", i = {
   title: "Molecules/CheckboxButtonBar",
@@ -41,7 +41,7 @@ const a = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosit
     inspectComponent: e,
     codeString: a
   }
-}, r = (o) => /* @__PURE__ */ l(e, { ...o }), n = r.bind({});
+}, r = (o) => /* @__PURE__ */ t(e, { ...o }), n = r.bind({});
 n.args = {
   label: "Periode",
   required: !0,
@@ -73,7 +73,8 @@ n.args = {
   ],
   defaultValues: ["1", "2"],
   labelPosition: "top",
-  onSetValues: t()
+  footerText: "Weken in periode 2",
+  onSetValues: l()
 };
 export {
   n as CheckboxButtonBarExample,

package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map

@@ -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;"}
+{"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/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.26.0",
+  "version": "3.26.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",