@uva-glass/component-library 1.45.5 → 1.46.0

package/dist/assets/variables.css

@@ -62,4 +62,7 @@
   --color-lavender: #ebebec;
   --color-lavender-transparent: rgba(235 235 236 / 50%);
   --color-ghost-white: #f4f4f5;
+  --color-electric-violet: #9747FF;
+  --color-natural-wool: #FFF6D6;
+  --color-uva-black: #1F1D20;
 }

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

@@ -1,7 +1,11 @@
 import { ReactNode } from 'react';
 export interface AccordionProps {
+    /** Clickable title (always visible). */
     title: ReactNode;
+    /** Main content (hidden when expanded is false). */
     content: ReactNode;
+    /** Indicator if Accordion is should be expanded by default.*/
     expanded?: boolean;
 }
+/** A controller for accordion dispay toggeling of content with click on a title. */
 export declare const Accordion: ({ title, content, expanded }: AccordionProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +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;"}
+{"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  /** Clickable title (always visible). */\n  title: ReactNode;\n  /** Main content (hidden when expanded is false). */\n  content: ReactNode;\n  /** Indicator if Accordion is should be expanded by default.*/\n  expanded?: boolean;\n}\n\n/** A controller for accordion dispay toggeling of content with click on a title. */\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":";;;;;;;;;;;GAmBaA,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.js

@@ -1,7 +1,7 @@
 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 = {
+const m = {
   title: "Atoms/Accordion",
   component: e,
   argTypes: {
@@ -11,20 +11,23 @@ const p = {
         disable: !0
       }
     }
+  },
+  parameters: {
+    inspectComponent: e
   }
 }, 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 = {
+const r = o.bind({});
+r.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
+  r as WithComplexProps,
+  m as default
 };
 //# sourceMappingURL=Accordion.stories.js.map

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

@@ -1 +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;"}
+{"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  parameters: {\n    inspectComponent: Accordion,\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;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,EACpB;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/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "1.45.5",
+  "version": "1.46.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,10 +52,12 @@
     "@storybook/addon-essentials": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
+    "@storybook/manager-api": "^8.2.9",
+    "@storybook/preview-api": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
     "@storybook/test": "^8.2.9",
-    "@types/node": "^20.16.3",
+    "@types/node": "^20.16.5",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@uva-glass/eslint-config": "^1.3.1",
@@ -65,7 +67,7 @@
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.35.1",
+    "eslint-plugin-react": "^7.35.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.11",
     "eslint-plugin-storybook": "^0.8.0",
@@ -86,7 +88,7 @@
     "stylelint-config-standard": "^36.0.1",
     "stylelint-order": "^6.0.4",
     "typescript": "^5.5.4",
-    "vite": "^5.4.2",
+    "vite": "^5.4.3",
     "vite-plugin-dts": "^4.1.0",
     "vite-plugin-lib-inject-css": "^2.1.1",
     "vite-plugin-static-copy": "^1.0.6",