@uva-glass/component-library 1.20.0 → 1.21.0

package/dist/assets/Accordion.css

@@ -0,0 +1 @@
+._accordion_bvnps_1{overflow:hidden;position:relative}._accordion__title_bvnps_6{align-items:baseline;display:flex;gap:1rem;justify-content:space-between}._accordion__title_bvnps_6:hover{cursor:pointer;text-decoration:underline}._accordion__title_bvnps_6:focus-visible{text-decoration:underline}._accordion__title-icon_bvnps_22{margin:0 .5rem;transform:rotate(-90deg);transition:transform .3s ease-in}._accordion__title-icon--expanded_bvnps_28{transform:rotate(90deg);transition:transform .3s ease-out}._accordion__content_bvnps_33{display:none}._accordion__content--expanded_bvnps_37{display:block}

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface AccordionProps {
+    title: ReactNode;
+    content: ReactNode;
+    expanded?: boolean;
+}
+export declare const Accordion: ({ title, content, expanded }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Accordion/Accordion.js

@@ -0,0 +1,55 @@
+import { jsxs as i, jsx as d } from "react/jsx-runtime";
+import { c as _ } from "../../clsx-DB4S2d7J.js";
+import { useState as x, useId as m } from "react";
+import { Icon as b } from "../Icon/Icon.js";
+import '../../assets/Accordion.css';const v = "_accordion_bvnps_1", f = "_accordion__title_bvnps_6", u = "_accordion__content_bvnps_33", o = {
+  accordion: v,
+  accordion__title: f,
+  "accordion__title-icon": "_accordion__title-icon_bvnps_22",
+  "accordion__title-icon--expanded": "_accordion__title-icon--expanded_bvnps_28",
+  accordion__content: u,
+  "accordion__content--expanded": "_accordion__content--expanded_bvnps_37"
+}, E = ({ title: a, content: r, expanded: s = !1 }) => {
+  const [c, n] = x(s), e = m();
+  function l(p) {
+    const { code: t } = p;
+    (t === "Enter" || t === "Space") && n(!c);
+  }
+  return /* @__PURE__ */ i("div", { className: o.accordion, children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: o.accordion__title,
+        id: e,
+        role: "button",
+        tabIndex: 0,
+        onClick: () => n(!c),
+        onKeyUp: l,
+        "aria-expanded": c,
+        children: [
+          a,
+          /* @__PURE__ */ d(
+            b,
+            {
+              className: _(o["accordion__title-icon"], { [o["accordion__title-icon--expanded"]]: c }),
+              name: "CheveronLeft",
+              size: 16
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ d(
+      "div",
+      {
+        "aria-labelledby": e,
+        className: _(o.accordion__content, { [o["accordion__content--expanded"]]: c }),
+        children: r
+      }
+    )
+  ] });
+};
+export {
+  E as Accordion
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\n\nimport styles from './Accordion.module.css';\n\nimport { Icon } from 'components/Icon';\n\nexport interface AccordionProps {\n  title: ReactNode;\n  content: ReactNode;\n  expanded?: boolean;\n}\n\nexport const Accordion = ({ title, content, expanded = false }: AccordionProps) => {\n  const [isExpanded, setIsExpanded] = useState(expanded);\n  const accordionId = useId();\n\n  function onKeyUp(event: KeyboardEvent<HTMLDivElement>) {\n    const { code } = event;\n\n    if (code === 'Enter' || code === 'Space') {\n      setIsExpanded(!isExpanded);\n    }\n  }\n\n  return (\n    <div className={styles['accordion']}>\n      <div\n        className={styles['accordion__title']}\n        id={accordionId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={() => setIsExpanded(!isExpanded)}\n        onKeyUp={onKeyUp}\n        aria-expanded={isExpanded}\n      >\n        {title}\n        <Icon\n          className={clsx(styles['accordion__title-icon'], { [styles['accordion__title-icon--expanded']]: isExpanded })}\n          name=\"CheveronLeft\"\n          size={16}\n        />\n      </div>\n      <div\n        aria-labelledby={accordionId}\n        className={clsx(styles.accordion__content, { [styles['accordion__content--expanded']]: isExpanded })}\n      >\n        {content}\n      </div>\n    </div>\n  );\n};\n"],"names":["Accordion","title","content","expanded","isExpanded","setIsExpanded","useState","accordionId","useId","onKeyUp","event","code","jsxs","styles","jsx","Icon","clsx"],"mappings":";;;;;;;;;;;GAeaA,IAAY,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,IAAW,SAA4B;AACjF,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASH,CAAQ,GAC/CI,IAAcC;AAEpB,WAASC,EAAQC,GAAsC;AAC/C,UAAA,EAAE,MAAAC,EAAS,IAAAD;AAEb,KAAAC,MAAS,WAAWA,MAAS,YAC/BN,EAAc,CAACD,CAAU;AAAA,EAE7B;AAEA,SACG,gBAAAQ,EAAA,OAAA,EAAI,WAAWC,EAAO,WACrB,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAO;AAAA,QAClB,IAAIN;AAAA,QACJ,MAAK;AAAA,QACL,UAAU;AAAA,QACV,SAAS,MAAMF,EAAc,CAACD,CAAU;AAAA,QACxC,SAAAK;AAAA,QACA,iBAAeL;AAAA,QAEd,UAAA;AAAA,UAAAH;AAAA,UACD,gBAAAa;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWC,EAAKH,EAAO,uBAAuB,GAAG,EAAE,CAACA,EAAO,iCAAiC,CAAC,GAAGT,GAAY;AAAA,cAC5G,MAAK;AAAA,cACL,MAAM;AAAA,YAAA;AAAA,UACR;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,mBAAiBP;AAAA,QACjB,WAAWS,EAAKH,EAAO,oBAAoB,EAAE,CAACA,EAAO,8BAA8B,CAAC,GAAGT,GAAY;AAAA,QAElG,UAAAF;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

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

@@ -0,0 +1,6 @@
+import { AccordionProps } from './Accordion';
+
+declare const _default: import('@storybook/types').ComponentAnnotations<import('@storybook/react').ReactRenderer, AccordionProps>;
+export default _default;
+export declare const AccordionExample: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, AccordionProps>;
+export declare const WithComplexProps: import('@storybook/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, AccordionProps>;

package/dist/components/Accordion/Accordion.stories.js

@@ -0,0 +1,30 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Accordion as e } from "./Accordion.js";
+import { Container as i } from "../storyComponents/Container/Container.js";
+const p = {
+  title: "Atoms/Accordion",
+  component: e,
+  argTypes: {
+    expanded: {
+      // Hide the expanded prop. Changing the value in Storybook doesn't update the state of the component.
+      table: {
+        disable: !0
+      }
+    }
+  }
+}, o = (n) => /* @__PURE__ */ t(i, { children: /* @__PURE__ */ t(e, { ...n }) }), l = o.bind({});
+l.args = {
+  title: "Example title",
+  content: "Example content"
+};
+const c = o.bind({});
+c.args = {
+  title: /* @__PURE__ */ t("div", { style: { fontWeight: "bold" }, children: "Complex sample title" }),
+  content: /* @__PURE__ */ t("div", { style: { fontStyle: "italic" }, children: "Complex sample content" })
+};
+export {
+  l as AccordionExample,
+  c as WithComplexProps,
+  p as default
+};
+//# sourceMappingURL=Accordion.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.stories.js","sources":["../../../src/components/Accordion/Accordion.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { AccordionProps } from './Accordion';\n\nimport { Accordion } from './Accordion';\n\nimport { Container } from 'components/storyComponents/Container';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/Accordion',\n  component: Accordion,\n  argTypes: {\n    expanded: {\n      // Hide the expanded prop. Changing the value in Storybook doesn't update the state of the component.\n      table: {\n        disable: true,\n      },\n    },\n  },\n} as Meta<AccordionProps>;\n\nconst Template: StoryFn<AccordionProps> = (args) => (\n  <Container>\n    <Accordion {...args} />\n  </Container>\n);\n\nexport const AccordionExample = Template.bind({});\nAccordionExample.args = {\n  title: 'Example title',\n  content: 'Example content',\n};\n\nexport const WithComplexProps = Template.bind({});\nWithComplexProps.args = {\n  title: <div style={{ fontWeight: 'bold' }}>Complex sample title</div>,\n  content: <div style={{ fontStyle: 'italic' }}>Complex sample content</div>,\n};\n"],"names":["Accordion_stories","Accordion","Template","args","jsx","Container","AccordionExample","WithComplexProps"],"mappings":";;;AAQA,MAAeA,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA;AAAA,MAER,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AACF,GAEMC,IAAoC,CAACC,MACzC,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAW,GAAGE,EAAM,CAAA,EACvB,CAAA,GAGWG,IAAmBJ,EAAS,KAAK,EAAE;AAChDI,EAAiB,OAAO;AAAA,EACtB,OAAO;AAAA,EACP,SAAS;AACX;AAEO,MAAMC,IAAmBL,EAAS,KAAK,EAAE;AAChDK,EAAiB,OAAO;AAAA,EACtB,yBAAQ,OAAI,EAAA,OAAO,EAAE,YAAY,UAAU,UAAoB,wBAAA;AAAA,EAC/D,2BAAU,OAAI,EAAA,OAAO,EAAE,WAAW,YAAY,UAAsB,0BAAA;AACtE;"}

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

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

package/dist/components/Accordion/index.js

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

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

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

package/dist/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './Accordion';
 export * from './AppStatusBar';
 export * from './Backdrop';
 export * from './Button';

package/dist/components/index.js

@@ -1,46 +1,48 @@
-import { AppStatusBar as t } from "./AppStatusBar/AppStatusBar.js";
-import { Backdrop as p } from "./Backdrop/Backdrop.js";
-import { Button as x } from "./Button/Button.js";
-import { Card as a } from "./Card/Card.js";
-import { FieldHint as i } from "./FieldHint/FieldHint.js";
-import { Icon as s } from "./Icon/Icon.js";
-import { IconButton as c } from "./IconButton/IconButton.js";
-import { InfoMessage as B } from "./InfoMessage/InfoMessage.js";
-import { Input as S } from "./Input/Input.js";
-import { InputField as L } from "./InputField/InputField.js";
-import { Label as g } from "./Label/Label.js";
-import { M as v } from "../MenuLink-CLEqkVVh.js";
-import { MetaDataList as D } from "./MetaDataList/MetaDataList.js";
-import { M as y } from "../ModalDialog-yEr_JLht.js";
-import { OverlayCloseButton as H } from "./OverlayCloseButton/OverlayCloseButton.js";
-import { RadioButton as O } from "./RadioButton/RadioButton.js";
-import { SectionNotification as R } from "./SectionNotification/SectionNotification.js";
-import { SelectListbox as h } from "./SelectListbox/SelectListbox.js";
-import { SelectProvider as q, useSelect as w } from "./SelectListbox/SelectProvider.js";
-import { Spinner as E } from "./Spinner/Spinner.js";
-import { Tooltip as J } from "./Tooltip/Tooltip.js";
+import { Accordion as t } from "./Accordion/Accordion.js";
+import { AppStatusBar as p } from "./AppStatusBar/AppStatusBar.js";
+import { Backdrop as x } from "./Backdrop/Backdrop.js";
+import { Button as n } from "./Button/Button.js";
+import { Card as i } from "./Card/Card.js";
+import { FieldHint as c } from "./FieldHint/FieldHint.js";
+import { Icon as u } from "./Icon/Icon.js";
+import { IconButton as B } from "./IconButton/IconButton.js";
+import { InfoMessage as S } from "./InfoMessage/InfoMessage.js";
+import { Input as L } from "./Input/Input.js";
+import { InputField as g } from "./InputField/InputField.js";
+import { Label as v } from "./Label/Label.js";
+import { M as C } from "../MenuLink-CLEqkVVh.js";
+import { MetaDataList as F } from "./MetaDataList/MetaDataList.js";
+import { M as H } from "../ModalDialog-yEr_JLht.js";
+import { OverlayCloseButton as O } from "./OverlayCloseButton/OverlayCloseButton.js";
+import { RadioButton as R } from "./RadioButton/RadioButton.js";
+import { SectionNotification as h } from "./SectionNotification/SectionNotification.js";
+import { SelectListbox as q } from "./SelectListbox/SelectListbox.js";
+import { SelectProvider as z, useSelect as E } from "./SelectListbox/SelectProvider.js";
+import { Spinner as J } from "./Spinner/Spinner.js";
+import { Tooltip as Q } from "./Tooltip/Tooltip.js";
 export {
-  t as AppStatusBar,
-  p as Backdrop,
-  x as Button,
-  a as Card,
-  i as FieldHint,
-  s as Icon,
-  c as IconButton,
-  B as InfoMessage,
-  S as Input,
-  L as InputField,
-  g as Label,
-  v as MenuLink,
-  D as MetaDataList,
-  y as ModalDialog,
-  H as OverlayCloseButton,
-  O as RadioButton,
-  R as SectionNotification,
-  h as SelectListbox,
-  q as SelectProvider,
-  E as Spinner,
-  J as Tooltip,
-  w as useSelect
+  t as Accordion,
+  p as AppStatusBar,
+  x as Backdrop,
+  n as Button,
+  i as Card,
+  c as FieldHint,
+  u as Icon,
+  B as IconButton,
+  S as InfoMessage,
+  L as Input,
+  g as InputField,
+  v as Label,
+  C as MenuLink,
+  F as MetaDataList,
+  H as ModalDialog,
+  O as OverlayCloseButton,
+  R as RadioButton,
+  h as SectionNotification,
+  q as SelectListbox,
+  z as SelectProvider,
+  J as Spinner,
+  Q as Tooltip,
+  E as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

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

package/dist/index.js

@@ -1,46 +1,48 @@
-import { AppStatusBar as t } from "./components/AppStatusBar/AppStatusBar.js";
-import { Backdrop as p } from "./components/Backdrop/Backdrop.js";
-import { Button as x } from "./components/Button/Button.js";
-import { Card as a } from "./components/Card/Card.js";
-import { FieldHint as i } from "./components/FieldHint/FieldHint.js";
-import { Icon as s } from "./components/Icon/Icon.js";
-import { IconButton as c } from "./components/IconButton/IconButton.js";
-import { InfoMessage as B } from "./components/InfoMessage/InfoMessage.js";
-import { Input as S } from "./components/Input/Input.js";
-import { InputField as L } from "./components/InputField/InputField.js";
-import { Label as g } from "./components/Label/Label.js";
-import { M as v } from "./MenuLink-CLEqkVVh.js";
-import { MetaDataList as D } from "./components/MetaDataList/MetaDataList.js";
-import { M as y } from "./ModalDialog-yEr_JLht.js";
-import { OverlayCloseButton as H } from "./components/OverlayCloseButton/OverlayCloseButton.js";
-import { RadioButton as O } from "./components/RadioButton/RadioButton.js";
-import { SectionNotification as R } from "./components/SectionNotification/SectionNotification.js";
-import { SelectListbox as h } from "./components/SelectListbox/SelectListbox.js";
-import { SelectProvider as q, useSelect as w } from "./components/SelectListbox/SelectProvider.js";
-import { Spinner as E } from "./components/Spinner/Spinner.js";
-import { Tooltip as J } from "./components/Tooltip/Tooltip.js";
+import { Accordion as t } from "./components/Accordion/Accordion.js";
+import { AppStatusBar as p } from "./components/AppStatusBar/AppStatusBar.js";
+import { Backdrop as x } from "./components/Backdrop/Backdrop.js";
+import { Button as n } from "./components/Button/Button.js";
+import { Card as i } from "./components/Card/Card.js";
+import { FieldHint as c } from "./components/FieldHint/FieldHint.js";
+import { Icon as u } from "./components/Icon/Icon.js";
+import { IconButton as B } from "./components/IconButton/IconButton.js";
+import { InfoMessage as S } from "./components/InfoMessage/InfoMessage.js";
+import { Input as L } from "./components/Input/Input.js";
+import { InputField as g } from "./components/InputField/InputField.js";
+import { Label as v } from "./components/Label/Label.js";
+import { M as C } from "./MenuLink-CLEqkVVh.js";
+import { MetaDataList as F } from "./components/MetaDataList/MetaDataList.js";
+import { M as H } from "./ModalDialog-yEr_JLht.js";
+import { OverlayCloseButton as O } from "./components/OverlayCloseButton/OverlayCloseButton.js";
+import { RadioButton as R } from "./components/RadioButton/RadioButton.js";
+import { SectionNotification as h } from "./components/SectionNotification/SectionNotification.js";
+import { SelectListbox as q } from "./components/SelectListbox/SelectListbox.js";
+import { SelectProvider as z, useSelect as E } from "./components/SelectListbox/SelectProvider.js";
+import { Spinner as J } from "./components/Spinner/Spinner.js";
+import { Tooltip as Q } from "./components/Tooltip/Tooltip.js";
 export {
-  t as AppStatusBar,
-  p as Backdrop,
-  x as Button,
-  a as Card,
-  i as FieldHint,
-  s as Icon,
-  c as IconButton,
-  B as InfoMessage,
-  S as Input,
-  L as InputField,
-  g as Label,
-  v as MenuLink,
-  D as MetaDataList,
-  y as ModalDialog,
-  H as OverlayCloseButton,
-  O as RadioButton,
-  R as SectionNotification,
-  h as SelectListbox,
-  q as SelectProvider,
-  E as Spinner,
-  J as Tooltip,
-  w as useSelect
+  t as Accordion,
+  p as AppStatusBar,
+  x as Backdrop,
+  n as Button,
+  i as Card,
+  c as FieldHint,
+  u as Icon,
+  B as IconButton,
+  S as InfoMessage,
+  L as Input,
+  g as InputField,
+  v as Label,
+  C as MenuLink,
+  F as MetaDataList,
+  H as ModalDialog,
+  O as OverlayCloseButton,
+  R as RadioButton,
+  h as SectionNotification,
+  q as SelectListbox,
+  z as SelectProvider,
+  J as Spinner,
+  Q as Tooltip,
+  E as useSelect
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

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