@uva-glass/component-library 3.2.2 → 3.3.0

package/dist/assets/RadioGroup.css

@@ -0,0 +1 @@
+._radio-group__header_omi6f_1{font-family:inherit;font-size:inherit;line-height:var(--line-height-s);margin:0;margin-bottom:.5rem}._radio-group_omi6f_1{background-color:var(--color-white);border:1px solid var(--color-grey-400);border-radius:.25rem;overflow:hidden}._radio-group__option_omi6f_16{cursor:pointer;display:flex;gap:1rem;padding:1rem}._radio-group__option_omi6f_16:not(:last-of-type){border-bottom:1px solid var(--color-grey-200)}._radio-group__option_omi6f_16:hover{background-color:var(--color-grey-100)}._radio-group__option--disabled_omi6f_31{cursor:default;pointer-events:none}

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,19 @@
+type Option = {
+    id: string;
+    titleLabel: string;
+    descriptionLabel?: string;
+    value: string;
+};
+export interface RadioGroupProps {
+    /** The label of the radio group */
+    label: string;
+    /** Radio options. */
+    options: Option[];
+    /** Returns selected values as string */
+    onChange: (value: string) => void;
+    /** If true, the whole group will be disabled. */
+    disabled?: boolean;
+}
+/** Represents a component for dispalying grouped styled radio buttons. */
+export declare const RadioGroup: ({ label, options, onChange, disabled }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,51 @@
+import { jsxs as g, Fragment as u, jsx as i } from "react/jsx-runtime";
+import { useState as h } from "react";
+import { c as f } from "../../clsx-OuTLNxxd.js";
+import { RadioButton as k } from "../RadioButton/RadioButton.js";
+import '../../assets/RadioGroup.css';const a = {
+  "radio-group__header": "_radio-group__header_omi6f_1",
+  "radio-group": "_radio-group_omi6f_1",
+  "radio-group__option": "_radio-group__option_omi6f_16",
+  "radio-group__option--disabled": "_radio-group__option--disabled_omi6f_31"
+}, j = ({ label: d, options: n, onChange: p, disabled: t }) => {
+  const [s, c] = h(null), _ = (o) => {
+    t || (c(o), p(o));
+  };
+  return /* @__PURE__ */ g(u, { children: [
+    /* @__PURE__ */ i("h2", { className: a["radio-group__header"], children: d }),
+    /* @__PURE__ */ i("div", { className: a["radio-group"], children: n.map(({ id: o, descriptionLabel: l, titleLabel: m, value: r }) => /* @__PURE__ */ i(
+      "div",
+      {
+        className: f(a["radio-group__option"], {
+          [a["radio-group__option--disabled"]]: t
+        }),
+        onClick: () => _(r),
+        onKeyDown: (e) => {
+          (e.key === "Enter" || e.key === " ") && _(r);
+        },
+        role: "presentation",
+        children: /* @__PURE__ */ i(
+          k,
+          {
+            id: o,
+            label: m,
+            description: l,
+            name: d,
+            onChange: (e) => {
+              _(e.target.value);
+            },
+            value: r,
+            checked: s === r,
+            disabled: t,
+            gap: "large"
+          }
+        )
+      },
+      o
+    )) })
+  ] });
+};
+export {
+  j as RadioGroup
+};
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './RadioGroup.module.css';\n\nimport { RadioButton } from 'components/RadioButton/RadioButton';\n\ntype Option = {\n  id: string;\n  titleLabel: string;\n  descriptionLabel?: string;\n  value: string;\n};\n\nexport interface RadioGroupProps {\n  /** The label of the radio group */\n  label: string;\n  /** Radio options. */\n  options: Option[];\n  /** Returns selected values as string */\n  onChange: (value: string) => void;\n  /** If true, the whole group will be disabled. */\n  disabled?: boolean;\n}\n\n/** Represents a component for dispalying grouped styled radio buttons. */\nexport const RadioGroup = ({ label, options, onChange, disabled }: RadioGroupProps) => {\n  const [selectedValue, setSelectedValue] = useState<string | null>(null);\n\n  const handleSelection = (value: string) => {\n    if (!disabled) {\n      setSelectedValue(value);\n      onChange(value);\n    }\n  };\n\n  return (\n    <>\n      <h2 className={styles['radio-group__header']}>{label}</h2>\n      <div className={styles['radio-group']}>\n        {options.map(({ id, descriptionLabel, titleLabel, value }) => (\n          <div\n            className={clsx(styles['radio-group__option'], {\n              [styles['radio-group__option--disabled']]: disabled,\n            })}\n            key={id}\n            onClick={() => handleSelection(value)}\n            onKeyDown={(event) => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                handleSelection(value);\n              }\n            }}\n            role=\"presentation\"\n          >\n            <RadioButton\n              id={id}\n              label={titleLabel}\n              description={descriptionLabel}\n              name={label}\n              onChange={(event) => {\n                handleSelection(event.target.value);\n              }}\n              value={value}\n              checked={selectedValue === value}\n              disabled={disabled}\n              gap=\"large\"\n            />\n          </div>\n        ))}\n      </div>\n    </>\n  );\n};\n"],"names":["RadioGroup","label","options","onChange","disabled","selectedValue","setSelectedValue","useState","handleSelection","value","jsxs","Fragment","jsx","styles","id","descriptionLabel","titleLabel","clsx","event","RadioButton"],"mappings":";;;;;;;;;GA0BaA,IAAa,CAAC,EAAE,OAAAC,GAAO,SAAAC,GAAS,UAAAC,GAAU,UAAAC,QAAgC;AACrF,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAwB,IAAI,GAEhEC,IAAkB,CAACC,MAAkB;AACzC,IAAKL,MACHE,EAAiBG,CAAK,GACtBN,EAASM,CAAK;AAAA,EAElB;AAEA,SAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAAC,MAAG,EAAA,WAAWC,EAAO,qBAAqB,GAAI,UAAMZ,GAAA;AAAA,IACpD,gBAAAW,EAAA,OAAA,EAAI,WAAWC,EAAO,aAAa,GACjC,UAAAX,EAAQ,IAAI,CAAC,EAAE,IAAAY,GAAI,kBAAAC,GAAkB,YAAAC,GAAY,OAAAP,QAChD,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWK,EAAKJ,EAAO,qBAAqB,GAAG;AAAA,UAC7C,CAACA,EAAO,+BAA+B,CAAC,GAAGT;AAAA,QAAA,CAC5C;AAAA,QAED,SAAS,MAAMI,EAAgBC,CAAK;AAAA,QACpC,WAAW,CAACS,MAAU;AACpB,WAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QACzCV,EAAgBC,CAAK;AAAA,QAEzB;AAAA,QACA,MAAK;AAAA,QAEL,UAAA,gBAAAG;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,IAAAL;AAAA,YACA,OAAOE;AAAA,YACP,aAAaD;AAAA,YACb,MAAMd;AAAA,YACN,UAAU,CAACiB,MAAU;AACH,cAAAV,EAAAU,EAAM,OAAO,KAAK;AAAA,YACpC;AAAA,YACA,OAAAT;AAAA,YACA,SAASJ,MAAkBI;AAAA,YAC3B,UAAAL;AAAA,YACA,KAAI;AAAA,UAAA;AAAA,QAAA;AAAA,MACN;AAAA,MArBKU;AAAA,IAAA,CAuBR,EACH,CAAA;AAAA,EAAA,GACF;AAEJ;"}

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

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

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -0,0 +1,48 @@
+import { jsx as t } from "react/jsx-runtime";
+import { fn as a } from "../../index-DXR-TB1d.js";
+import { RadioGroup as o } from "./RadioGroup.js";
+const l = `
+  <RadioGroup label={label} options={options} 
+    onChange={onChangeFunction} disabled={disabled} /> `, b = {
+  title: "Molecules/RadioGroup",
+  component: o,
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    disabled: {
+      control: "boolean"
+    }
+  },
+  parameters: {
+    inspectComponent: o,
+    codeString: l
+  }
+}, n = [
+  {
+    id: "1",
+    titleLabel: "Option 1",
+    value: "option1"
+  },
+  {
+    id: "2",
+    titleLabel: "Option 2",
+    value: "option2"
+  },
+  {
+    id: "3",
+    titleLabel: "Option 3",
+    value: "option3"
+  }
+], i = (e) => /* @__PURE__ */ t(o, { ...e }), p = i.bind({});
+p.args = {
+  disabled: !1,
+  label: "Sample label",
+  options: n,
+  onChange: a()
+};
+export {
+  p as RadioGroupExample,
+  b as default
+};
+//# sourceMappingURL=RadioGroup.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.stories.js","sources":["../../../src/components/RadioGroup/RadioGroup.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { RadioGroupProps } from './RadioGroup';\n\nimport { RadioGroup } from './RadioGroup';\n\nconst codeString = `\n  <RadioGroup label={label} options={options} \n    onChange={onChangeFunction} disabled={disabled} /> `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n  title: 'Molecules/RadioGroup',\n  component: RadioGroup,\n  argTypes: {\n    label: {\n      control: 'text',\n    },\n    disabled: {\n      control: 'boolean',\n    },\n  },\n  parameters: {\n    inspectComponent: RadioGroup,\n    codeString: codeString,\n  },\n} as Meta<RadioGroupProps>;\n\nconst mockData = [\n  {\n    id: '1',\n    titleLabel: 'Option 1',\n    value: 'option1',\n  },\n  {\n    id: '2',\n    titleLabel: 'Option 2',\n    value: 'option2',\n  },\n  {\n    id: '3',\n    titleLabel: 'Option 3',\n    value: 'option3',\n  },\n];\n\nconst Template: StoryFn<RadioGroupProps> = (args) => <RadioGroup {...args} />;\n\nexport const RadioGroupExample = Template.bind({});\nRadioGroupExample.args = {\n  disabled: false,\n  label: 'Sample label',\n  options: mockData,\n  onChange: fn(),\n};\n"],"names":["codeString","RadioGroup_stories","RadioGroup","mockData","Template","args","jsx","RadioGroupExample","fn"],"mappings":";;;AAOA,MAAMA,IAAa;AAAA;AAAA,0DAKJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAW;AAAA,EACf;AAAA,IACE,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,YAAY;AAAA,IACZ,OAAO;AAAA,EAAA;AAEX,GAEMC,IAAqC,CAACC,MAAU,gBAAAC,EAAAJ,GAAA,EAAY,GAAGG,GAAM,GAE9DE,IAAoBH,EAAS,KAAK,CAAE,CAAA;AACjDG,EAAkB,OAAO;AAAA,EACvB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAASJ;AAAA,EACT,UAAUK,EAAG;AACf;"}

package/dist/components/RadioGroup/Radiogroup.test.js

@@ -0,0 +1,24 @@
+import { jsx as n } from "react/jsx-runtime";
+import "../../index-Z7qwJmRM.js";
+import { r as l, s as t, f as s } from "../../react.esm-B8teOYlo.js";
+import { RadioGroup as a } from "./RadioGroup.js";
+const i = [
+  { id: "1", titleLabel: "Option 1", value: "option1" },
+  { id: "2", titleLabel: "Option 2", value: "option2" }
+];
+describe("RadioGroup", () => {
+  it("should render correctly", () => {
+    l(/* @__PURE__ */ n(a, { label: "Test Label", options: i, onChange: jest.fn() })), expect(t.getByText("Test Label")).toBeInTheDocument(), expect(t.getByText("Option 1")).toBeInTheDocument(), expect(t.getByText("Option 2")).toBeInTheDocument();
+  }), it("should call onChange when an option is selected", () => {
+    const e = jest.fn();
+    l(/* @__PURE__ */ n(a, { label: "Test Label", options: i, onChange: e }));
+    const o = t.getByLabelText("Option 1");
+    s.click(o), expect(e).toHaveBeenCalledWith("option1");
+  }), it("should not allow selection when disabled", () => {
+    const e = jest.fn();
+    l(/* @__PURE__ */ n(a, { label: "Test Label", options: i, onChange: e, disabled: !0 }));
+    const o = t.getByLabelText("Option 1");
+    s.click(o), expect(e).not.toHaveBeenCalled();
+  });
+});
+//# sourceMappingURL=Radiogroup.test.js.map

package/dist/components/RadioGroup/Radiogroup.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radiogroup.test.js","sources":["../../../src/components/RadioGroup/Radiogroup.test.tsx"],"sourcesContent":["import '@testing-library/jest-dom';\nimport { render, screen, fireEvent } from '@testing-library/react';\n\nimport { RadioGroup } from './RadioGroup';\n\nconst options = [\n  { id: '1', titleLabel: 'Option 1', value: 'option1' },\n  { id: '2', titleLabel: 'Option 2', value: 'option2' },\n];\n\ndescribe('RadioGroup', () => {\n  it('should render correctly', () => {\n    render(<RadioGroup label=\"Test Label\" options={options} onChange={jest.fn()} />);\n    expect(screen.getByText('Test Label')).toBeInTheDocument();\n    expect(screen.getByText('Option 1')).toBeInTheDocument();\n    expect(screen.getByText('Option 2')).toBeInTheDocument();\n  });\n\n  it('should call onChange when an option is selected', () => {\n    const handleChange = jest.fn();\n    render(<RadioGroup label=\"Test Label\" options={options} onChange={handleChange} />);\n\n    const option1 = screen.getByLabelText('Option 1');\n    fireEvent.click(option1);\n    expect(handleChange).toHaveBeenCalledWith('option1');\n  });\n\n  it('should not allow selection when disabled', () => {\n    const handleChange = jest.fn();\n    render(<RadioGroup label=\"Test Label\" options={options} onChange={handleChange} disabled />);\n\n    const option1 = screen.getByLabelText('Option 1');\n    fireEvent.click(option1);\n    expect(handleChange).not.toHaveBeenCalled();\n  });\n});\n"],"names":["options","render","jsx","RadioGroup","screen","handleChange","option1","fireEvent"],"mappings":";;;;AAKA,MAAMA,IAAU;AAAA,EACd,EAAE,IAAI,KAAK,YAAY,YAAY,OAAO,UAAU;AAAA,EACpD,EAAE,IAAI,KAAK,YAAY,YAAY,OAAO,UAAU;AACtD;AAEA,SAAS,cAAc,MAAM;AAC3B,KAAG,2BAA2B,MAAM;AAC3B,IAAAC,EAAA,gBAAAC,EAACC,KAAW,OAAM,cAAa,SAAAH,GAAkB,UAAU,KAAK,GAAG,EAAG,CAAA,CAAE,GAC/E,OAAOI,EAAO,UAAU,YAAY,CAAC,EAAE,kBAAkB,GACzD,OAAOA,EAAO,UAAU,UAAU,CAAC,EAAE,kBAAkB,GACvD,OAAOA,EAAO,UAAU,UAAU,CAAC,EAAE,kBAAkB;AAAA,EAAA,CACxD,GAED,GAAG,mDAAmD,MAAM;AACpD,UAAAC,IAAe,KAAK,GAAG;AAC7B,IAAAJ,oBAAQE,GAAW,EAAA,OAAM,cAAa,SAAAH,GAAkB,UAAUK,GAAc,CAAE;AAE5E,UAAAC,IAAUF,EAAO,eAAe,UAAU;AAChD,IAAAG,EAAU,MAAMD,CAAO,GAChB,OAAAD,CAAY,EAAE,qBAAqB,SAAS;AAAA,EAAA,CACpD,GAED,GAAG,4CAA4C,MAAM;AAC7C,UAAAA,IAAe,KAAK,GAAG;AACtB,IAAAJ,EAAA,gBAAAC,EAACC,KAAW,OAAM,cAAa,SAAAH,GAAkB,UAAUK,GAAc,UAAQ,GAAC,CAAA,CAAE;AAErF,UAAAC,IAAUF,EAAO,eAAe,UAAU;AAChD,IAAAG,EAAU,MAAMD,CAAO,GAChB,OAAAD,CAAY,EAAE,IAAI,iBAAiB;AAAA,EAAA,CAC3C;AACH,CAAC;"}

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

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

package/dist/components/RadioGroup/index.js

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

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

@@ -0,0 +1 @@
+{"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": "3.2.2",
+  "version": "3.3.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",