@uva-glass/component-library 3.23.0 → 3.25.0

package/dist/assets/ExpandableInfoPanel.css

@@ -0,0 +1 @@
+._expandable-info-panel_wrapper_946pe_1{display:flex;flex-direction:column;width:100%}._expandable-info-panel_header_946pe_7{align-items:center;display:flex;flex-direction:row;justify-content:space-between;padding-bottom:.5rem;width:100%}._expandable-info-panel_trigger_946pe_16{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;border-radius:.25rem;display:flex;font-size:var(--font-size-default);gap:.5rem;height:2.75rem;margin-bottom:0;outline:none;padding:.5rem;position:relative;width:fit-content}._expandable-info-panel_trigger_946pe_16:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem;text-decoration:underline}._expandable-info-panel_trigger_946pe_16:hover{background-color:var(--new-color-grey-200);text-decoration:underline}._expandable-info-panel_trigger--active_946pe_44{background-color:var(--new-color-navy-200);border-radius:.25rem .25rem 0 0}._expandable-info-panel_trigger--active_946pe_44:after{background-color:var(--new-color-navy-200);content:"";display:block;height:.5rem;left:0;position:absolute;right:0;top:100%;z-index:-1}._expandable-info-panel_trigger--active_946pe_44:hover,._expandable-info-panel_trigger--active_946pe_44:hover:after{background-color:var(--new-color-navy-300)}._expandable-info-panel_content-wrapper_946pe_66{align-items:start;background-color:var(--new-color-navy-200);display:grid;gap:1rem;grid-template-columns:1.5rem 1fr;padding:2rem 1.5rem}

package/dist/assets/InfoBanner.css

@@ -0,0 +1 @@
+._infobanner_wrapper_1ojyh_1{align-items:center;background-color:var(--new-color-grey-300);border-left:.5rem solid var(--new-color-grey-600);display:flex;gap:1rem;padding:1rem;width:100%}

package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+export interface ExpandableInfoPanelProps {
+    /** Label for the trigger button that toggles the expandable panel. */
+    triggerLabel: string;
+    /** Main header displayed inline left of the trigger button. */
+    mainHeader?: ReactNode | string;
+    /** Aria-label for the button when the panel is collapsed. */
+    collapseLabel?: string;
+    /** Aria-label for the button when the panel is expanded. */
+    expandLabel?: string;
+    /** Content to be displayed inside the expandable panel. */
+    content: ReactNode | string;
+}
+export declare const ExpandableInfoPanel: ({ triggerLabel, mainHeader, collapseLabel, expandLabel, content, }: ExpandableInfoPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.js

@@ -0,0 +1,50 @@
+import { jsxs as n, jsx as p } from "react/jsx-runtime";
+import { useState as s, useId as f } from "react";
+import { c as x } from "../../clsx-OuTLNxxd.js";
+import { Icon as r } from "../Icon/Icon.js";
+import '../../assets/ExpandableInfoPanel.css';const a = {
+  "expandable-info-panel_wrapper": "_expandable-info-panel_wrapper_946pe_1",
+  "expandable-info-panel_header": "_expandable-info-panel_header_946pe_7",
+  "expandable-info-panel_trigger": "_expandable-info-panel_trigger_946pe_16",
+  "expandable-info-panel_trigger--active": "_expandable-info-panel_trigger--active_946pe_44",
+  "expandable-info-panel_content-wrapper": "_expandable-info-panel_content-wrapper_946pe_66"
+}, h = ({
+  triggerLabel: l,
+  mainHeader: o,
+  collapseLabel: t = "",
+  expandLabel: d = "",
+  content: _
+}) => {
+  const [e, c] = s(!1), i = f();
+  return /* @__PURE__ */ n("div", { className: a["expandable-info-panel_wrapper"], children: [
+    /* @__PURE__ */ n("div", { className: a["expandable-info-panel_header"], children: [
+      o,
+      /* @__PURE__ */ n(
+        "button",
+        {
+          className: x(a["expandable-info-panel_trigger"], {
+            [a["expandable-info-panel_trigger--active"]]: e
+          }),
+          type: "button",
+          "aria-expanded": e,
+          "aria-controls": i,
+          "aria-label": `${l} - ${e ? t : d}`,
+          onClick: () => c(!e),
+          children: [
+            /* @__PURE__ */ p(r, { name: e ? "SquareInfoSolid" : "SquareInfo", size: 24 }),
+            l,
+            /* @__PURE__ */ p(r, { name: e ? "CheveronUp" : "CheveronDown", size: 16 })
+          ]
+        }
+      )
+    ] }),
+    e && /* @__PURE__ */ n("div", { id: i, className: a["expandable-info-panel_content-wrapper"], children: [
+      /* @__PURE__ */ p(r, { name: "SquareInfo", size: 24 }),
+      /* @__PURE__ */ p("div", { children: _ })
+    ] })
+  ] });
+};
+export {
+  h as ExpandableInfoPanel
+};
+//# sourceMappingURL=ExpandableInfoPanel.js.map

package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableInfoPanel.js","sources":["../../../src/components/ExpandableInfoPanel/ExpandableInfoPanel.tsx"],"sourcesContent":["import { useState, type ReactNode } from 'react';\r\nimport clsx from 'clsx';\r\nimport { useId } from 'react';\r\n\r\nimport styles from './ExpandableInfoPanel.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface ExpandableInfoPanelProps {\r\n  /** Label for the trigger button that toggles the expandable panel. */\r\n  triggerLabel: string;\r\n  /** Main header displayed inline left of the trigger button. */\r\n  mainHeader?: ReactNode | string;\r\n  /** Aria-label for the button when the panel is collapsed. */\r\n  collapseLabel?: string;\r\n  /** Aria-label for the button when the panel is expanded. */\r\n  expandLabel?: string;\r\n  /** Content to be displayed inside the expandable panel. */\r\n  content: ReactNode | string;\r\n}\r\n\r\nexport const ExpandableInfoPanel = ({\r\n  triggerLabel,\r\n  mainHeader,\r\n  collapseLabel = '',\r\n  expandLabel = '',\r\n  content,\r\n}: ExpandableInfoPanelProps) => {\r\n  const [active, setActive] = useState(false);\r\n  const contentId = useId();\r\n\r\n  return (\r\n    <div className={styles['expandable-info-panel_wrapper']}>\r\n      <div className={styles['expandable-info-panel_header']}>\r\n        {mainHeader}\r\n        <button\r\n          className={clsx(styles['expandable-info-panel_trigger'], {\r\n            [styles['expandable-info-panel_trigger--active']]: active,\r\n          })}\r\n          type=\"button\"\r\n          aria-expanded={active}\r\n          aria-controls={contentId}\r\n          aria-label={`${triggerLabel} - ${active ? collapseLabel : expandLabel}`}\r\n          onClick={() => setActive(!active)}\r\n        >\r\n          <Icon name={active ? 'SquareInfoSolid' : 'SquareInfo'} size={24} />\r\n          {triggerLabel}\r\n          <Icon name={active ? 'CheveronUp' : 'CheveronDown'} size={16} />\r\n        </button>\r\n      </div>\r\n      {active && (\r\n        <div id={contentId} className={styles['expandable-info-panel_content-wrapper']}>\r\n          <Icon name=\"SquareInfo\" size={24} />\r\n          <div>{content}</div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n"],"names":["ExpandableInfoPanel","triggerLabel","mainHeader","collapseLabel","expandLabel","content","active","setActive","useState","contentId","useId","jsxs","styles","clsx","jsx","Icon"],"mappings":";;;;;;;;;;GAqBaA,IAAsB,CAAC;AAAA,EAClC,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,aAAAC,IAAc;AAAA,EACd,SAAAC;AACF,MAAgC;AAC9B,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAYC,EAAM;AAExB,SACG,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,+BAA+B,GACpD,UAAA;AAAA,IAAA,gBAAAD,EAAC,OAAI,EAAA,WAAWC,EAAO,8BAA8B,GAClD,UAAA;AAAA,MAAAV;AAAA,MACD,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE,EAAKD,EAAO,+BAA+B,GAAG;AAAA,YACvD,CAACA,EAAO,uCAAuC,CAAC,GAAGN;AAAA,UAAA,CACpD;AAAA,UACD,MAAK;AAAA,UACL,iBAAeA;AAAA,UACf,iBAAeG;AAAA,UACf,cAAY,GAAGR,CAAY,MAAMK,IAASH,IAAgBC,CAAW;AAAA,UACrE,SAAS,MAAMG,EAAU,CAACD,CAAM;AAAA,UAEhC,UAAA;AAAA,YAAA,gBAAAQ,EAACC,KAAK,MAAMT,IAAS,oBAAoB,cAAc,MAAM,IAAI;AAAA,YAChEL;AAAA,8BACAc,GAAK,EAAA,MAAMT,IAAS,eAAe,gBAAgB,MAAM,GAAI,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAChE,GACF;AAAA,IACCA,uBACE,OAAI,EAAA,IAAIG,GAAW,WAAWG,EAAO,uCAAuC,GAC3E,UAAA;AAAA,MAAA,gBAAAE,EAACC,GAAK,EAAA,MAAK,cAAa,MAAM,IAAI;AAAA,MAClC,gBAAAD,EAAC,SAAK,UAAQT,EAAA,CAAA;AAAA,IAAA,EAChB,CAAA;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { ExpandableInfoPanelProps } from './ExpandableInfoPanel';
+declare const _default: Meta<ExpandableInfoPanelProps>;
+export default _default;
+export declare const ExpandableInfoPanelExample: import('@storybook/core/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, ExpandableInfoPanelProps>;

package/dist/components/ExpandableInfoPanel/ExpandableInfoPanel.stories.js

@@ -0,0 +1,31 @@
+import { jsxs as a, jsx as e, Fragment as t } from "react/jsx-runtime";
+import { ExpandableInfoPanel as n } from "./ExpandableInfoPanel.js";
+const r = "<ExpandableInfoPanel triggerLabel={string} mainHeader={string or reactnode} collapseLabel={string} expandLabel={string} content={string or reactnode} />", p = {
+  title: "Molecules/ExpandableInfoPanel",
+  component: n,
+  parameters: {
+    inspectComponent: n,
+    codeString: r
+  }
+}, o = (i) => /* @__PURE__ */ a(t, { children: [
+  /* @__PURE__ */ e(n, { ...i }),
+  /* @__PURE__ */ e("div", { style: { marginTop: "1rem" }, children: "De universiteit biedt een breed scala aan vakken aan, variërend van exacte wetenschappen tot geesteswetenschappen. Studenten kunnen kiezen uit uitdagende keuzevakken, minors en specialisaties die hun studie verrijken. Deze vaklaanbiedingen stimuleren interdisciplinair leren, persoonlijke ontwikkeling en academische verdieping, afgestemd op actuele maatschappelijke vraagstukken en de behoeften van de arbeidsmarkt." })
+] }), s = o.bind({});
+s.args = {
+  triggerLabel: "Wat moet ik doen?",
+  mainHeader: /* @__PURE__ */ e("h1", { children: "Basisgegevens" }),
+  collapseLabel: "Sluit informatiepaneel",
+  expandLabel: "Open informatiepaneel",
+  content: /* @__PURE__ */ a(t, { children: [
+    /* @__PURE__ */ e("h3", { style: { marginTop: "0" }, children: "Wat moet ik doen?" }),
+    /* @__PURE__ */ e("span", { children: "Controleer de onderstaande basisgegevens. Klik daarna op ‘Start’ om te beginnen met het invoeren van de roosterwensen. Je kunt tussentijds opslaan en op een later moment verdergaan." }),
+    /* @__PURE__ */ e("br", {}),
+    /* @__PURE__ */ e("br", {}),
+    /* @__PURE__ */ e("span", { children: "Kloppen de gegevens niet? Neem contact op met de opleidingscoördinator." })
+  ] })
+};
+export {
+  s as ExpandableInfoPanelExample,
+  p as default
+};
+//# sourceMappingURL=ExpandableInfoPanel.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableInfoPanel.stories.js","sources":["../../../src/components/ExpandableInfoPanel/ExpandableInfoPanel.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\r\nimport type { ExpandableInfoPanelProps } from './ExpandableInfoPanel';\r\n\r\nimport { ExpandableInfoPanel } from './ExpandableInfoPanel';\r\n\r\nconst codeString =\r\n  '<ExpandableInfoPanel triggerLabel={string} mainHeader={string or reactnode} collapseLabel={string} expandLabel={string} content={string or reactnode} />';\r\n\r\n// eslint-disable-next-line import/no-default-export\r\nexport default {\r\n  title: 'Molecules/ExpandableInfoPanel',\r\n  component: ExpandableInfoPanel,\r\n  parameters: {\r\n    inspectComponent: ExpandableInfoPanel,\r\n    codeString: codeString,\r\n  },\r\n} as Meta<ExpandableInfoPanelProps>;\r\n\r\nconst Template: StoryFn<ExpandableInfoPanelProps> = (args) => (\r\n  <>\r\n    <ExpandableInfoPanel {...args} />\r\n    <div style={{ marginTop: '1rem' }}>\r\n      De universiteit biedt een breed scala aan vakken aan, variërend van exacte wetenschappen tot geesteswetenschappen.\r\n      Studenten kunnen kiezen uit uitdagende keuzevakken, minors en specialisaties die hun studie verrijken. Deze\r\n      vaklaanbiedingen stimuleren interdisciplinair leren, persoonlijke ontwikkeling en academische verdieping,\r\n      afgestemd op actuele maatschappelijke vraagstukken en de behoeften van de arbeidsmarkt.\r\n    </div>\r\n  </>\r\n);\r\n\r\nexport const ExpandableInfoPanelExample = Template.bind({});\r\nExpandableInfoPanelExample.args = {\r\n  triggerLabel: 'Wat moet ik doen?',\r\n  mainHeader: <h1>Basisgegevens</h1>,\r\n  collapseLabel: 'Sluit informatiepaneel',\r\n  expandLabel: 'Open informatiepaneel',\r\n  content: (\r\n    <>\r\n      <h3 style={{ marginTop: '0' }}>Wat moet ik doen?</h3>\r\n      <span>\r\n        Controleer de onderstaande basisgegevens. Klik daarna op ‘Start’ om te beginnen met het invoeren van de\r\n        roosterwensen. Je kunt tussentijds opslaan en op een later moment verdergaan.\r\n      </span>\r\n      <br />\r\n      <br />\r\n      <span>Kloppen de gegevens niet? Neem contact op met de opleidingscoördinator.</span>\r\n    </>\r\n  ),\r\n};\r\n"],"names":["codeString","ExpandableInfoPanel_stories","ExpandableInfoPanel","Template","args","jsxs","Fragment","jsx","ExpandableInfoPanelExample"],"mappings":";;AAKA,MAAMA,IACJ,4JAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAA8C,CAACC,MAEjD,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,EAAC,gBAAAC,EAAAL,GAAA,EAAqB,GAAGE,GAAM;AAAA,oBAC9B,OAAI,EAAA,OAAO,EAAE,WAAW,UAAU,UAKnC,maAAA,CAAA;AAAA,GACF,GAGWI,IAA6BL,EAAS,KAAK,CAAE,CAAA;AAC1DK,EAA2B,OAAO;AAAA,EAChC,cAAc;AAAA,EACd,YAAa,gBAAAD,EAAA,MAAA,EAAG,UAAa,gBAAA,CAAA;AAAA,EAC7B,eAAe;AAAA,EACf,aAAa;AAAA,EACb,SAEI,gBAAAF,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAG,OAAO,EAAE,WAAW,OAAO,UAAiB,qBAAA;AAAA,IAChD,gBAAAA,EAAC,UAAK,UAGN,wLAAA,CAAA;AAAA,sBACC,MAAG,EAAA;AAAA,sBACH,MAAG,EAAA;AAAA,IACJ,gBAAAA,EAAC,UAAK,UAAuE,0EAAA,CAAA;AAAA,EAAA,EAC/E,CAAA;AAEJ;"}

package/dist/components/ExpandableInfoPanel/index.d.ts

@@ -0,0 +1 @@
+export * from './ExpandableInfoPanel';

package/dist/components/ExpandableInfoPanel/index.js

@@ -0,0 +1,5 @@
+import { ExpandableInfoPanel as n } from "./ExpandableInfoPanel.js";
+export {
+  n as ExpandableInfoPanel
+};
+//# sourceMappingURL=index.js.map

package/dist/components/ExpandableInfoPanel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/Icon/icons/index.d.ts

@@ -107,6 +107,18 @@ export declare const Icons: {
         desc?: string;
         descId?: string;
     }>;
+    CalendarEdit: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    CalendarEditFill: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
     ChainLink: import('react').FunctionComponent<import('react').SVGProps<SVGSVGElement> & {
         title?: string;
         titleId?: string;