@uva-glass/component-library 1.51.0 → 1.52.0

package/dist/assets/HorizontalList.css

@@ -1 +1 @@
-._horizontal-list-wrapper_1ahjq_1{margin:0}._horizontal-list-separator_1ahjq_5{margin:0 .5rem}
+._horizontal-list-wrapper_oivby_1{display:flex;margin:0}._horizontal-list-value_oivby_6{align-items:center;display:flex}._horizontal-list-separator_oivby_11{align-items:center;display:flex;margin:0 .5rem}

package/dist/components/HorizontalList/HorizontalList.d.ts

@@ -1,8 +1,9 @@
+import { ReactNode } from 'react';
 export interface HorizontalListProps {
     /** The items to display. */
-    values: string[];
+    values: ReactNode[];
     /** The separator to use. */
-    separator?: string;
+    separator?: ReactNode;
 }
 /** Represents a component to show text separated by a given separator in a horizontal direction. */
 export declare const HorizontalList: ({ values, separator }: HorizontalListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/HorizontalList/HorizontalList.js

@@ -1,12 +1,13 @@
-import { jsx as l, jsxs as e } from "react/jsx-runtime";
-import '../../assets/HorizontalList.css';const o = {
-  "horizontal-list-wrapper": "_horizontal-list-wrapper_1ahjq_1",
-  "horizontal-list-separator": "_horizontal-list-separator_1ahjq_5"
-}, n = ({ values: r, separator: s = "•" }) => /* @__PURE__ */ l("div", { className: o["horizontal-list-wrapper"], children: r.map((a, t) => /* @__PURE__ */ e("span", { children: [
-  a,
-  t < r.length - 1 && /* @__PURE__ */ l("span", { className: o["horizontal-list-separator"], dangerouslySetInnerHTML: { __html: s } })
-] }, `${a.replace(" ", "-")}_${t}`)) });
+import { jsx as s, jsxs as l } from "react/jsx-runtime";
+import '../../assets/HorizontalList.css';const t = {
+  "horizontal-list-wrapper": "_horizontal-list-wrapper_oivby_1",
+  "horizontal-list-value": "_horizontal-list-value_oivby_6",
+  "horizontal-list-separator": "_horizontal-list-separator_oivby_11"
+}, p = ({ values: r, separator: a = "•" }) => /* @__PURE__ */ s("div", { className: t["horizontal-list-wrapper"], children: r.map((o, i) => /* @__PURE__ */ l("span", { className: t["horizontal-list-value"], children: [
+  o,
+  i < r.length - 1 && /* @__PURE__ */ s("span", { className: t["horizontal-list-separator"], children: a })
+] }, `${o == null ? void 0 : o.toString()}-${i}`)) });
 export {
-  n as HorizontalList
+  p as HorizontalList
 };
 //# sourceMappingURL=HorizontalList.js.map

package/dist/components/HorizontalList/HorizontalList.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalList.js","sources":["../../../src/components/HorizontalList/HorizontalList.tsx"],"sourcesContent":["import styles from './HorizontalList.module.css';\n\nexport interface HorizontalListProps {\n  /** The items to display. */\n  values: string[];\n  /** The separator to use. */\n  separator?: string;\n}\n\n/** Represents a component to show text separated by a given separator in a horizontal direction. */\nexport const HorizontalList = ({ values, separator = '&bull;' }: HorizontalListProps) => {\n  return (\n    <div className={styles['horizontal-list-wrapper']}>\n      {values.map((string, index) => (\n        <span key={`${string.replace(' ', '-')}_${index}`}>\n          {string}\n          {index < values.length - 1 && (\n            <span className={styles['horizontal-list-separator']} dangerouslySetInnerHTML={{ __html: separator }} />\n          )}\n        </span>\n      ))}\n    </div>\n  );\n};\n"],"names":["HorizontalList","values","separator","jsx","styles","string","index","jsxs"],"mappings":";;;;GAUaA,IAAiB,CAAC,EAAE,QAAAC,GAAQ,WAAAC,IAAY,eAEhD,gBAAAC,EAAA,OAAA,EAAI,WAAWC,EAAO,yBAAyB,GAC7C,UAAOH,EAAA,IAAI,CAACI,GAAQC,MACnB,gBAAAC,EAAC,QACE,EAAA,UAAA;AAAA,EAAAF;AAAA,EACAC,IAAQL,EAAO,SAAS,uBACtB,QAAK,EAAA,WAAWG,EAAO,2BAA2B,GAAG,yBAAyB,EAAE,QAAQF,EAAa,EAAA,CAAA;AAH/F,EAAA,GAAA,GAAGG,EAAO,QAAQ,KAAK,GAAG,CAAC,IAAIC,CAAK,EAK/C,CACD,EACH,CAAA;"}
+{"version":3,"file":"HorizontalList.js","sources":["../../../src/components/HorizontalList/HorizontalList.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport styles from './HorizontalList.module.css';\n\nexport interface HorizontalListProps {\n  /** The items to display. */\n  values: ReactNode[];\n  /** The separator to use. */\n  separator?: ReactNode;\n}\n\n/** Represents a component to show text separated by a given separator in a horizontal direction. */\nexport const HorizontalList = ({ values, separator = '•' }: HorizontalListProps) => {\n  return (\n    <div className={styles['horizontal-list-wrapper']}>\n      {values.map((value, index) => (\n        <span className={styles['horizontal-list-value']} key={`${value?.toString()}-${index}`}>\n          {value}\n          {index < values.length - 1 && <span className={styles['horizontal-list-separator']}>{separator}</span>}\n        </span>\n      ))}\n    </div>\n  );\n};\n"],"names":["HorizontalList","values","separator","styles","value","index","jsxs","jsx"],"mappings":";;;;;GAYaA,IAAiB,CAAC,EAAE,QAAAC,GAAQ,WAAAC,IAAY,4BAEhD,OAAI,EAAA,WAAWC,EAAO,yBAAyB,GAC7C,UAAOF,EAAA,IAAI,CAACG,GAAOC,MACjB,gBAAAC,EAAA,QAAA,EAAK,WAAWH,EAAO,uBAAuB,GAC5C,UAAA;AAAA,EAAAC;AAAA,EACAC,IAAQJ,EAAO,SAAS,KAAK,gBAAAM,EAAC,UAAK,WAAWJ,EAAO,2BAA2B,GAAI,UAAUD,EAAA,CAAA;AAAA,KAF1C,GAAGE,KAAA,gBAAAA,EAAO,UAAU,IAAIC,CAAK,EAGpF,CACD,EACH,CAAA;"}

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

@@ -3,3 +3,4 @@ import { HorizontalListProps } from './HorizontalList';
 declare const _default: Meta<HorizontalListProps>;
 export default _default;
 export declare const HorizontalListExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, HorizontalListProps>;
+export declare const WithComplexContent: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, HorizontalListProps>;

package/dist/components/HorizontalList/HorizontalList.stories.js

@@ -1,26 +1,47 @@
-import { jsx as s } from "react/jsx-runtime";
-import { HorizontalList as t } from "./HorizontalList.js";
-const a = '<HorizontalList values={values} separator="•" />', p = {
+import { jsx as t } from "react/jsx-runtime";
+import { HorizontalList as o } from "./HorizontalList.js";
+import { Button as i } from "../Buttons/Button.js";
+import "../Buttons/LinkButton.js";
+import "@react-aria/button";
+import { Icon as r } from "../Icon/Icon.js";
+const n = '<HorizontalList values={values} separator="•" />', g = {
   title: "Atoms/HorizontalList",
-  component: t,
+  component: o,
   argTypes: {
     separator: {
       control: "text"
     }
   },
   parameters: {
-    inspectComponent: t,
-    codeString: a
+    inspectComponent: o,
+    codeString: n
+  }
+}, s = (a) => /* @__PURE__ */ t(o, { ...a }), l = s.bind({});
+l.args = {
+  values: ["Curabitur consequat", "Lectus sit amet luctus vulputate", "Nisi semi mattis"]
+};
+const e = s.bind({});
+e.args = {
+  values: [
+    /* @__PURE__ */ t("a", { href: "/?path=/story/atoms-horizontallist--with-complex-content", children: "Curabitur consequat" }, "1"),
+    /* @__PURE__ */ t(i, { type: "button", variant: "primary", children: "Lectus sit amet luctus vulputate" }, "2"),
+    /* @__PURE__ */ t(r, { name: "Sparkles" }, "3"),
+    /* @__PURE__ */ t("strong", { children: "Nisi semi mattis" }, "4")
+  ],
+  separator: /* @__PURE__ */ t(r, { name: "CheveronRight", size: 12 })
+};
+e.argTypes = {
+  ...e.argTypes,
+  separator: {
+    table: {
+      disable: !0
+      // Disable separator controls for this specific story
+    }
   }
-}, e = (o) => /* @__PURE__ */ s(t, { ...o }), r = {
-  values: ["Curabitur consequat", "Lectus sit amet luctus vulputate", "Nisi semi mattis"],
-  separator: "&bull;"
-}, i = e.bind({});
-i.args = {
-  ...r
 };
 export {
-  i as HorizontalListExample,
-  p as default
+  l as HorizontalListExample,
+  e as WithComplexContent,
+  g as default
 };
 //# sourceMappingURL=HorizontalList.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HorizontalList.stories.js","sources":["../../../src/components/HorizontalList/HorizontalList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { HorizontalListProps } from './HorizontalList';\n\nimport { HorizontalList } from './HorizontalList';\n\nconst codeString = '<HorizontalList values={values} separator=\"•\" />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/HorizontalList',\n  component: HorizontalList,\n  argTypes: {\n    separator: {\n      control: 'text',\n    },\n  },\n  parameters: {\n    inspectComponent: HorizontalList,\n    codeString: codeString,\n  },\n} as Meta<HorizontalListProps>;\n\nconst Template: StoryFn<HorizontalListProps> = (args) => <HorizontalList {...args} />;\n\nconst defaultArgs: Partial<HorizontalListProps> = {\n  values: ['Curabitur consequat', 'Lectus sit amet luctus vulputate', 'Nisi semi mattis'],\n  separator: '&bull;',\n};\n\nexport const HorizontalListExample = Template.bind({});\nHorizontalListExample.args = {\n  ...defaultArgs,\n};\n"],"names":["codeString","HorizontalList_stories","HorizontalList","Template","args","jsx","defaultArgs","HorizontalListExample"],"mappings":";;AAKA,MAAMA,IAAa,oDAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,EAAM,CAAA,GAE7EE,IAA4C;AAAA,EAChD,QAAQ,CAAC,uBAAuB,oCAAoC,kBAAkB;AAAA,EACtF,WAAW;AACb,GAEaC,IAAwBJ,EAAS,KAAK,EAAE;AACrDI,EAAsB,OAAO;AAAA,EAC3B,GAAGD;AACL;"}
+{"version":3,"file":"HorizontalList.stories.js","sources":["../../../src/components/HorizontalList/HorizontalList.stories.tsx"],"sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { HorizontalListProps } from './HorizontalList';\n\nimport { HorizontalList } from './HorizontalList';\n\nimport { Button } from 'components/Buttons';\nimport { Icon } from 'components/Icon';\n\nconst codeString = '<HorizontalList values={values} separator=\"•\" />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Atoms/HorizontalList',\n  component: HorizontalList,\n  argTypes: {\n    separator: {\n      control: 'text',\n    },\n  },\n  parameters: {\n    inspectComponent: HorizontalList,\n    codeString: codeString,\n  },\n} as Meta<HorizontalListProps>;\n\nconst Template: StoryFn<HorizontalListProps> = (args) => <HorizontalList {...args} />;\n\nexport const HorizontalListExample = Template.bind({});\nHorizontalListExample.args = {\n  values: ['Curabitur consequat', 'Lectus sit amet luctus vulputate', 'Nisi semi mattis'],\n};\n\nexport const WithComplexContent = Template.bind({});\nWithComplexContent.args = {\n  values: [\n    <a href=\"/?path=/story/atoms-horizontallist--with-complex-content\" key=\"1\">\n      Curabitur consequat\n    </a>,\n    <Button type=\"button\" variant=\"primary\" key=\"2\">\n      Lectus sit amet luctus vulputate\n    </Button>,\n    <Icon name=\"Sparkles\" key=\"3\" />,\n    <strong key=\"4\">Nisi semi mattis</strong>,\n  ],\n  separator: <Icon name=\"CheveronRight\" size={12} />,\n};\n\nWithComplexContent.argTypes = {\n  ...WithComplexContent.argTypes,\n  separator: {\n    table: {\n      disable: true, // Disable separator controls for this specific story\n    },\n  },\n};\n"],"names":["codeString","HorizontalList_stories","HorizontalList","Template","args","jsx","HorizontalListExample","WithComplexContent","Button","Icon"],"mappings":";;;;;;AAQA,MAAMA,IAAa,oDAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,EAAM,CAAA,GAEtEE,IAAwBH,EAAS,KAAK,EAAE;AACrDG,EAAsB,OAAO;AAAA,EAC3B,QAAQ,CAAC,uBAAuB,oCAAoC,kBAAkB;AACxF;AAEO,MAAMC,IAAqBJ,EAAS,KAAK,EAAE;AAClDI,EAAmB,OAAO;AAAA,EACxB,QAAQ;AAAA,IACL,gBAAAF,EAAA,KAAA,EAAE,MAAK,4DAAmE,mCAAJ,GAEvE;AAAA,sBACCG,GAAO,EAAA,MAAK,UAAS,SAAQ,WAAkB,gDAAJ,GAE5C;AAAA,IACC,gBAAAH,EAAAI,GAAA,EAAK,MAAK,WAAA,GAAe,GAAI;AAAA,IAC9B,gBAAAJ,EAAC,UAAe,EAAA,UAAA,mBAAA,GAAJ,GAAoB;AAAA,EAClC;AAAA,EACA,WAAY,gBAAAA,EAAAI,GAAA,EAAK,MAAK,iBAAgB,MAAM,IAAI;AAClD;AAEAF,EAAmB,WAAW;AAAA,EAC5B,GAAGA,EAAmB;AAAA,EACtB,WAAW;AAAA,IACT,OAAO;AAAA,MACL,SAAS;AAAA;AAAA,IACX;AAAA,EACF;AACF;"}

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

@@ -5,7 +5,7 @@ export interface IconProps extends Omit<SVGAttributes<SVGElement>, 'height' | 'w
     /** The name of the icon to render. */
     name: IconName;
     /** The size (in pixels) of the icon to render. */
-    size?: 16 | 20 | 24 | 32 | 48 | 64 | 96 | 128;
+    size?: 12 | 16 | 20 | 24 | 32 | 48 | 64 | 96 | 128;
     /** The title used for a tooltip. */
     title?: string;
 }

package/dist/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { ReactNode, SVGAttributes } from 'react';\n\nimport { Icons } from './icons';\n\ntype IconName = keyof typeof Icons;\n\nexport interface IconProps extends Omit<SVGAttributes<SVGElement>, 'height' | 'width'> {\n  /** The name of the icon to render. */\n  name: IconName;\n  /** The size (in pixels) of the icon to render. */\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  size?: 16 | 20 | 24 | 32 | 48 | 64 | 96 | 128;\n  /** The title used for a tooltip. */\n  title?: string;\n}\n\nconst defaultSize = 24;\n\n/** Represents a component to render an icon. */\nexport const Icon = ({ name, size = defaultSize, title, ...restProps }: IconProps): ReactNode => {\n  const Icon = Icons[name];\n\n  return <Icon aria-hidden={true} height={size} width={size} title={title} {...restProps} />;\n};\n"],"names":["defaultSize","Icon","name","size","title","restProps","Icons","jsx"],"mappings":";;AAgBA,MAAMA,IAAc,IAGPC,IAAO,CAAC,EAAE,MAAAC,GAAM,MAAAC,IAAOH,GAAa,OAAAI,GAAO,GAAGC,QAAsC;AACzFJ,QAAAA,IAAOK,EAAMJ,CAAI;AAEhB,SAAA,gBAAAK,EAACN,GAAA,EAAK,eAAa,IAAM,QAAQE,GAAM,OAAOA,GAAM,OAAAC,GAAe,GAAGC,EAAW,CAAA;AAC1F;"}
+{"version":3,"file":"Icon.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import type { ReactNode, SVGAttributes } from 'react';\n\nimport { Icons } from './icons';\n\ntype IconName = keyof typeof Icons;\n\nexport interface IconProps extends Omit<SVGAttributes<SVGElement>, 'height' | 'width'> {\n  /** The name of the icon to render. */\n  name: IconName;\n  /** The size (in pixels) of the icon to render. */\n  // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n  size?: 12 | 16 | 20 | 24 | 32 | 48 | 64 | 96 | 128;\n  /** The title used for a tooltip. */\n  title?: string;\n}\n\nconst defaultSize = 24;\n\n/** Represents a component to render an icon. */\nexport const Icon = ({ name, size = defaultSize, title, ...restProps }: IconProps): ReactNode => {\n  const Icon = Icons[name];\n\n  return <Icon aria-hidden={true} height={size} width={size} title={title} {...restProps} />;\n};\n"],"names":["defaultSize","Icon","name","size","title","restProps","Icons","jsx"],"mappings":";;AAgBA,MAAMA,IAAc,IAGPC,IAAO,CAAC,EAAE,MAAAC,GAAM,MAAAC,IAAOH,GAAa,OAAAI,GAAO,GAAGC,QAAsC;AACzFJ,QAAAA,IAAOK,EAAMJ,CAAI;AAEhB,SAAA,gBAAAK,EAACN,GAAA,EAAK,eAAa,IAAM,QAAQE,GAAM,OAAOA,GAAM,OAAAC,GAAe,GAAGC,EAAW,CAAA;AAC1F;"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@uva-glass/component-library",
   "author": "Team Glass - Frontend vrienden",
   "private": false,
-  "version": "1.51.0",
+  "version": "1.52.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -67,7 +67,7 @@
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react": "^7.37.1",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.12",
     "eslint-plugin-storybook": "^0.9.0",