@uva-glass/component-library 3.17.0 → 3.17.2

package/dist/assets/OverlayStepBar.css

@@ -1 +1 @@
-._overlay-step-bar__container_18gn9_1{align-items:center;background-color:var(--color-grey-50);display:flex;height:2.5rem;justify-content:center;overflow-y:hidden}._overlay-step-bar__step_18gn9_10{align-items:center;background-color:var(--color-grey-50);color:var(--color-grey-500);display:flex;font-family:inherit;font-size:var(--font-size-default);gap:.5rem;height:100%;padding:0 2rem;position:relative}._overlay-step-bar__step_18gn9_10:not(:last-child):after{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--color-grey-50);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.25rem;top:-.25rem;z-index:10}._overlay-step-bar__step_18gn9_10:not(:last-child):before{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--color-white);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.5rem;top:-.25rem;z-index:5}._overlay-step-bar__step--active_18gn9_45{color:var(--color-black);font-weight:var(--semibold)}
+._overlay-step-bar__container_1w5f8_1{align-items:center;background-color:var(--color-grey-50);display:flex;height:2.5rem;justify-content:center;overflow-y:hidden}._overlay-step-bar__step-wrapper_1w5f8_10{background-color:var(--color-grey-50);height:100%;position:relative}._overlay-step-bar__step-wrapper_1w5f8_10:not(:last-child):after{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--color-grey-50);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.25rem;top:-.25rem;z-index:10}._overlay-step-bar__step-wrapper_1w5f8_10:not(:last-child):before{border-bottom:1.5rem solid transparent;border-left:1rem solid var(--color-white);border-top:1.5rem solid transparent;content:"";position:absolute;right:-.5rem;top:-.25rem;z-index:5}._overlay-step-bar__step_1w5f8_10{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;color:var(--color-grey-500);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_1w5f8_56{display:none;text-decoration:none}._overlay-step-bar__step_1w5f8_10:hover ._overlay-step-bar__step--index_1w5f8_61,._overlay-step-bar__step_1w5f8_10:hover ._overlay-step-bar__step--label_1w5f8_56{text-decoration:underline}@media (min-width: 70rem){._overlay-step-bar__step--label_1w5f8_56{display:block;white-space:nowrap}._overlay-step-bar__step_1w5f8_10:hover ._overlay-step-bar__step--index_1w5f8_61{text-decoration:none}}._overlay-step-bar__step_1w5f8_10:focus-visible{outline:.125rem dotted var(--color-cobalt);outline-offset:-.25rem;z-index:15}._overlay-step-bar__step--label_1w5f8_56:hover{text-decoration:underline}._overlay-step-bar__step--active_1w5f8_87{color:var(--color-black);font-weight:var(--semibold)}._overlay-step-bar__step--active_1w5f8_87 ._overlay-step-bar__step--label_1w5f8_56{display:block}._overlay-step-bar__step--active_1w5f8_87:hover ._overlay-step-bar__step--index_1w5f8_61,._overlay-step-bar__step--active_1w5f8_87:hover ._overlay-step-bar__step--label_1w5f8_56{cursor:default;text-decoration:none}

package/dist/components/OverlayStepBar/OverlayStepBar.d.ts

@@ -3,5 +3,7 @@ export interface OverlayStepBarProps {
     stepLabels: string[];
     /** activeStep number starting with 1. */
     activeStep: number;
+    /** navigate to step. */
+    onStepClick?: (step: number) => void;
 }
-export declare const OverlayStepBar: ({ stepLabels, activeStep }: OverlayStepBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OverlayStepBar: ({ stepLabels, activeStep, onStepClick }: OverlayStepBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/OverlayStepBar/OverlayStepBar.js

@@ -1,22 +1,30 @@
-import { jsx as e, Fragment as n, jsxs as o } from "react/jsx-runtime";
-import { c as p } from "../../clsx-OuTLNxxd.js";
-import '../../assets/OverlayStepBar.css';const t = {
-  "overlay-step-bar__container": "_overlay-step-bar__container_18gn9_1",
-  "overlay-step-bar__step": "_overlay-step-bar__step_18gn9_10",
-  "overlay-step-bar__step--active": "_overlay-step-bar__step--active_18gn9_45"
-}, i = ({ stepLabels: r, activeStep: s = 0 }) => (s > r.length && console.error("activeStep is greater than the number of steps"), /* @__PURE__ */ e("div", { className: t["overlay-step-bar__container"], children: r.length && r.map((_, a) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ o(
-  "span",
+import { jsx as s, jsxs as l } from "react/jsx-runtime";
+import { c as o } from "../../clsx-OuTLNxxd.js";
+import '../../assets/OverlayStepBar.css';const r = {
+  "overlay-step-bar__container": "_overlay-step-bar__container_1w5f8_1",
+  "overlay-step-bar__step-wrapper": "_overlay-step-bar__step-wrapper_1w5f8_10",
+  "overlay-step-bar__step": "_overlay-step-bar__step_1w5f8_10",
+  "overlay-step-bar__step--label": "_overlay-step-bar__step--label_1w5f8_56",
+  "overlay-step-bar__step--index": "_overlay-step-bar__step--index_1w5f8_61",
+  "overlay-step-bar__step--active": "_overlay-step-bar__step--active_1w5f8_87"
+}, 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(
+  "button",
   {
-    className: p(t["overlay-step-bar__step"], [
-      a === s - 1 && t["overlay-step-bar__step--active"]
+    className: o(r["overlay-step-bar__step"], [
+      e === a - 1 && r["overlay-step-bar__step--active"]
     ]),
+    ...t && { onClick: () => t(e + 1) },
+    type: "button",
+    "aria-label": `Step ${e + 1}`,
+    "aria-current": e === a - 1 ? "step" : void 0,
+    disabled: e === a - 1,
     children: [
-      /* @__PURE__ */ e("span", { children: a + 1 }),
-      /* @__PURE__ */ e("span", { children: _ })
+      /* @__PURE__ */ s("span", { className: r["overlay-step-bar__step--index"], children: e + 1 }),
+      /* @__PURE__ */ s("span", { className: r["overlay-step-bar__step--label"], children: p })
     ]
   }
-) }, `${a}_${_}`)) }));
+) }, `${e}_${p}`)) }));
 export {
-  i as OverlayStepBar
+  v as OverlayStepBar
 };
 //# sourceMappingURL=OverlayStepBar.js.map

package/dist/components/OverlayStepBar/OverlayStepBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayStepBar.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { Fragment } from 'react/jsx-runtime';\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}\n\nexport const OverlayStepBar = ({ stepLabels, activeStep = 0 }: 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          <Fragment key={`${index}_${label}`}>\n            <span\n              className={clsx(styles[`overlay-step-bar__step`], [\n                index === activeStep - 1 && styles[`overlay-step-bar__step--active`],\n              ])}\n            >\n              <span>{index + 1}</span>\n              <span>{label}</span>\n            </span>\n          </Fragment>\n        ))}\n    </div>\n  );\n};\n"],"names":["OverlayStepBar","stepLabels","activeStep","jsx","styles","label","index","Fragment","jsxs","clsx"],"mappings":";;;;;;GAYaA,IAAiB,CAAC,EAAE,YAAAC,GAAY,YAAAC,IAAa,SACpDA,IAAaD,EAAW,UAC1B,QAAQ,MAAM,gDAAgD,GAI7D,gBAAAE,EAAA,OAAA,EAAI,WAAWC,EAAO,6BAA6B,GACjD,UAAAH,EAAW,UACVA,EAAW,IAAI,CAACI,GAAOC,wBACpBC,GACC,EAAA,UAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC,EAAKL,EAAO,wBAAwB,GAAG;AAAA,MAChDE,MAAUJ,IAAa,KAAKE,EAAO,gCAAgC;AAAA,IAAA,CACpE;AAAA,IAED,UAAA;AAAA,MAAC,gBAAAD,EAAA,QAAA,EAAM,cAAQ,EAAE,CAAA;AAAA,MACjB,gBAAAA,EAAC,UAAM,UAAME,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAAA,KAPF,GAAGC,CAAK,IAAID,CAAK,EAShC,CACD,GACL;"}
+{"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;"}

package/dist/components/OverlayStepBar/OverlayStepBar.stories.js

@@ -1,22 +1,40 @@
 import { jsx as s } from "react/jsx-runtime";
-import { OverlayStepBar as e } from "./OverlayStepBar.js";
-const r = "<OverlayStepBar stelLabels={[string]} activeStep={number}/>", i = {
+import { useState as c } from "react";
+import { OverlayStepBar as t } from "./OverlayStepBar.js";
+const i = "<OverlayStepBar stepLabels={[string]} activeStep={number} onStepClick={(step) => void}/>", b = {
   title: "Molecules/OverlayStepBar",
-  component: e,
-  argTypes: {},
+  component: t,
+  argTypes: {
+    activeStep: { control: "number" },
+    stepLabels: { control: "object" },
+    onStepClick: { action: "stepClicked" }
+  },
   parameters: {
-    inspectComponent: e,
-    codeString: r
+    inspectComponent: t,
+    codeString: i
   }
-}, a = (t) => /* @__PURE__ */ s(e, { ...t }), l = {
-  stepLabels: ["BasicDetails", "Lecturers", "PeriodPlanning", "Assessment", "Miscellaneous", "Overview"],
+}, a = (e) => {
+  const [n, r] = c(e.activeStep || 1);
+  return /* @__PURE__ */ s(
+    t,
+    {
+      ...e,
+      activeStep: n,
+      onStepClick: (o) => {
+        var p;
+        r(o), (p = e.onStepClick) == null || p.call(e, o);
+      }
+    }
+  );
+}, l = {
+  stepLabels: ["Basic Details", "Lecturers", "Period Planning", "Assessment", "Miscellaneous", "Overview"]
+}, S = a.bind({});
+S.args = {
+  ...l,
   activeStep: 2
-}, n = a.bind({});
-n.args = {
-  ...l
 };
 export {
-  n as OverlayStepBarExample,
-  i as default
+  S as OverlayStepBarExample,
+  b as default
 };
 //# sourceMappingURL=OverlayStepBar.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"OverlayStepBar.stories.js","sources":["../../../src/components/OverlayStepBar/OverlayStepBar.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayStepBarProps } from './OverlayStepBar';\n\nimport { OverlayStepBar } from './OverlayStepBar';\n\nconst codeString = '<OverlayStepBar stelLabels={[string]} activeStep={number}/>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/OverlayStepBar',\n  component: OverlayStepBar,\n  argTypes: {},\n  parameters: {\n    inspectComponent: OverlayStepBar,\n    codeString: codeString,\n  },\n} as Meta<OverlayStepBarProps>;\n\nconst Template: StoryFn<OverlayStepBarProps> = (args) => <OverlayStepBar {...args} />;\n\nconst defaultArgs: Partial<OverlayStepBarProps> = {\n  stepLabels: ['BasicDetails', 'Lecturers', 'PeriodPlanning', 'Assessment', 'Miscellaneous', 'Overview'],\n  activeStep: 2,\n};\n\nexport const OverlayStepBarExample = Template.bind({});\nOverlayStepBarExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","OverlayStepBar_stories","OverlayStepBar","Template","args","jsx","defaultArgs","OverlayStepBarExample"],"mappings":";;AAKA,MAAMA,IAAa,+DAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,GAAM,GAE7EE,IAA4C;AAAA,EAChD,YAAY,CAAC,gBAAgB,aAAa,kBAAkB,cAAc,iBAAiB,UAAU;AAAA,EACrG,YAAY;AACd,GAEaC,IAAwBJ,EAAS,KAAK,CAAE,CAAA;AACrDI,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AACL;"}
+{"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;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "3.17.0",
+  "version": "3.17.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -64,9 +64,9 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.15.3",
+    "@types/node": "^22.15.12",
     "@types/react-dom": "^19.1.3",
-    "@types/react": "^19.1.2",
+    "@types/react": "^19.1.3",
     "@uva-glass/eslint-config": "^1.3.10",
     "@uva-glass/stylelint-config": "^1.2.2",
     "@vitejs/plugin-react": "^4.4.1",
@@ -81,7 +81,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "jest-junit": "^16.0.0",
     "jsdom": "^26.1.0",
-    "npm-run-all2": "^7.0.2",
+    "npm-run-all2": "^8.0.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.5.3",
@@ -99,7 +99,7 @@
     "vite-plugin-static-copy": "^2.3.1",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4",
-    "vite": "^6.3.4"
+    "vite": "^6.3.5"
   },
   "dependencies": {
     "@babel/preset-env": "^7.27.1",