@arbor-education/design-system.components 0.1.5 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/dist/components/formField/fieldset/Fieldset.d.ts +6 -0
- package/dist/components/formField/fieldset/Fieldset.d.ts.map +1 -0
- package/dist/components/formField/fieldset/Fieldset.js +7 -0
- package/dist/components/formField/fieldset/Fieldset.js.map +1 -0
- package/dist/components/formField/fieldset/Fieldset.stories.d.ts +28 -0
- package/dist/components/formField/fieldset/Fieldset.stories.d.ts.map +1 -0
- package/dist/components/formField/fieldset/Fieldset.stories.js +51 -0
- package/dist/components/formField/fieldset/Fieldset.stories.js.map +1 -0
- package/dist/components/formField/fieldset/Fieldset.test.d.ts +2 -0
- package/dist/components/formField/fieldset/Fieldset.test.d.ts.map +1 -0
- package/dist/components/formField/fieldset/Fieldset.test.js +62 -0
- package/dist/components/formField/fieldset/Fieldset.test.js.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.d.ts +8 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.d.ts.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.js +8 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.js.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.test.d.ts +2 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.test.d.ts.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.test.js +86 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.test.js.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.d.ts +3 -1
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.js +7 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.js.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonGroup.d.ts +11 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.d.ts.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.js +8 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.js.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.test.d.ts +2 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.test.d.ts.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.test.js +86 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.test.js.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js +8 -2
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js.map +1 -1
- package/dist/components/separator/Separator.d.ts +7 -0
- package/dist/components/separator/Separator.d.ts.map +1 -0
- package/dist/components/separator/Separator.js +8 -0
- package/dist/components/separator/Separator.js.map +1 -0
- package/dist/components/separator/Separator.stories.d.ts +10 -0
- package/dist/components/separator/Separator.stories.d.ts.map +1 -0
- package/dist/components/separator/Separator.stories.js +12 -0
- package/dist/components/separator/Separator.stories.js.map +1 -0
- package/dist/components/separator/Separator.test.d.ts +2 -0
- package/dist/components/separator/Separator.test.d.ts.map +1 -0
- package/dist/components/separator/Separator.test.js +10 -0
- package/dist/components/separator/Separator.test.js.map +1 -0
- package/dist/components/table/Table.d.ts +13 -0
- package/dist/components/table/Table.d.ts.map +1 -1
- package/dist/components/table/Table.js +43 -7
- package/dist/components/table/Table.js.map +1 -1
- package/dist/components/table/Table.stories.d.ts.map +1 -1
- package/dist/components/table/Table.stories.js +8 -1
- package/dist/components/table/Table.stories.js.map +1 -1
- package/dist/components/table/Table.test.js +254 -2
- package/dist/components/table/Table.test.js.map +1 -1
- package/dist/components/table/pagination/TableSettingsDropdown.d.ts +2 -0
- package/dist/components/table/pagination/TableSettingsDropdown.d.ts.map +1 -0
- package/dist/components/table/pagination/TableSettingsDropdown.js +43 -0
- package/dist/components/table/pagination/TableSettingsDropdown.js.map +1 -0
- package/dist/components/table/useTableSettings.d.ts +22 -0
- package/dist/components/table/useTableSettings.d.ts.map +1 -0
- package/dist/components/table/useTableSettings.js +28 -0
- package/dist/components/table/useTableSettings.js.map +1 -0
- package/dist/index.css +31 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/utils/hooks/useComponentDidUpdate.d.ts +7 -0
- package/dist/utils/hooks/useComponentDidUpdate.d.ts.map +1 -0
- package/dist/utils/hooks/useComponentDidUpdate.js +18 -0
- package/dist/utils/hooks/useComponentDidUpdate.js.map +1 -0
- package/dist/utils/hooks/useComponentDidUpdate.test.d.ts +2 -0
- package/dist/utils/hooks/useComponentDidUpdate.test.d.ts.map +1 -0
- package/dist/utils/hooks/useComponentDidUpdate.test.js +69 -0
- package/dist/utils/hooks/useComponentDidUpdate.test.js.map +1 -0
- package/package.json +1 -1
- package/src/components/formField/fieldset/Fieldset.stories.tsx +89 -0
- package/src/components/formField/fieldset/Fieldset.test.tsx +85 -0
- package/src/components/formField/fieldset/Fieldset.tsx +17 -0
- package/src/components/formField/fieldset/fieldset.scss +19 -0
- package/src/components/formField/inputs/checkbox/CheckboxGroup.test.tsx +127 -0
- package/src/components/formField/inputs/checkbox/CheckboxGroup.tsx +17 -0
- package/src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx +12 -1
- package/src/components/formField/inputs/radio/RadioButtonGroup.test.tsx +190 -0
- package/src/components/formField/inputs/radio/RadioButtonGroup.tsx +22 -0
- package/src/components/formField/inputs/radio/RadioButtonInput.stories.tsx +16 -7
- package/src/components/formField/label/label.scss +1 -1
- package/src/components/separator/Separator.stories.tsx +15 -0
- package/src/components/separator/Separator.test.tsx +10 -0
- package/src/components/separator/Separator.tsx +15 -0
- package/src/components/separator/separator.scss +6 -0
- package/src/components/table/Table.stories.tsx +8 -1
- package/src/components/table/Table.test.tsx +444 -1
- package/src/components/table/Table.tsx +69 -24
- package/src/components/table/pagination/TableSettingsDropdown.tsx +90 -0
- package/src/components/table/table.scss +6 -0
- package/src/components/table/useTableSettings.ts +47 -0
- package/src/index.scss +2 -0
- package/src/index.ts +2 -0
- package/src/utils/hooks/useComponentDidUpdate.test.ts +107 -0
- package/src/utils/hooks/useComponentDidUpdate.ts +19 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
## 0.1.4
|
|
2
2
|
|
|
3
|
+
## 0.2.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#94](https://github.com/arbor-education/design-system.components/pull/94) [`c95548a`](https://github.com/arbor-education/design-system.components/commit/c95548af1a3f2ffb2e08709af7f7a3b3b7c1cf76) Thanks [@angusmglfraser](https://github.com/angusmglfraser)! - MIS-65036 added table settings, checkboxgroup, radiogroup, separator, fieldset, useComponentDidUpdate
|
|
8
|
+
|
|
3
9
|
## 0.1.5
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Fieldset.d.ts","sourceRoot":"","sources":["../../../../src/components/formField/fieldset/Fieldset.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,MAAM,CAAC;CAChB,GAAG,SAAS,CAAC,mBAAmB,CAAC,CAAC;AAEnC,eAAO,MAAM,QAAQ,GAAI,OAAO,aAAa,4CAS5C,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
export const Fieldset = (props) => {
|
|
4
|
+
const { legend, children, className, ...rest } = props;
|
|
5
|
+
return (_jsxs("fieldset", { className: classNames('ds-fieldset', className), ...rest, children: [_jsx("legend", { className: "ds-fieldset__legend", children: legend }), children] }));
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=Fieldset.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../../../src/components/formField/fieldset/Fieldset.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEvD,OAAO,CACL,oBAAU,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,KAAM,IAAI,aACjE,iBAAQ,SAAS,EAAC,qBAAqB,YAAE,MAAM,GAAU,EACxD,QAAQ,IACA,CACZ,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
declare const meta: {
|
|
3
|
+
title: string;
|
|
4
|
+
component: (props: import("./Fieldset").FieldsetProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
parameters: {
|
|
6
|
+
layout: string;
|
|
7
|
+
};
|
|
8
|
+
tags: string[];
|
|
9
|
+
argTypes: {
|
|
10
|
+
legend: {
|
|
11
|
+
control: "text";
|
|
12
|
+
description: string;
|
|
13
|
+
};
|
|
14
|
+
disabled: {
|
|
15
|
+
control: "boolean";
|
|
16
|
+
description: string;
|
|
17
|
+
};
|
|
18
|
+
children: {
|
|
19
|
+
control: false;
|
|
20
|
+
description: string;
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
export default meta;
|
|
25
|
+
type Story = StoryObj<typeof meta>;
|
|
26
|
+
export declare const Default: Story;
|
|
27
|
+
export declare const Disabled: Story;
|
|
28
|
+
//# sourceMappingURL=Fieldset.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Fieldset.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/formField/fieldset/Fieldset.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAM5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;CAqBuB,CAAC;AAElC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA+BtB,CAAC"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Fieldset } from './Fieldset';
|
|
3
|
+
import { FormField } from '../FormField';
|
|
4
|
+
import { CheckboxInput } from '../inputs/checkbox/CheckboxInput';
|
|
5
|
+
import { RadioButtonInput } from '../inputs/radio/RadioButtonInput';
|
|
6
|
+
const meta = {
|
|
7
|
+
title: 'Components/FormField/Fieldset',
|
|
8
|
+
component: Fieldset,
|
|
9
|
+
parameters: {
|
|
10
|
+
layout: 'padded',
|
|
11
|
+
},
|
|
12
|
+
tags: ['autodocs'],
|
|
13
|
+
argTypes: {
|
|
14
|
+
legend: {
|
|
15
|
+
control: 'text',
|
|
16
|
+
description: 'The legend text for the fieldset',
|
|
17
|
+
},
|
|
18
|
+
disabled: {
|
|
19
|
+
control: 'boolean',
|
|
20
|
+
description: 'Disable all form controls within the fieldset',
|
|
21
|
+
},
|
|
22
|
+
children: {
|
|
23
|
+
control: false,
|
|
24
|
+
description: 'Form controls and other content to display within the fieldset',
|
|
25
|
+
},
|
|
26
|
+
},
|
|
27
|
+
};
|
|
28
|
+
export default meta;
|
|
29
|
+
// Default fieldset with simple content
|
|
30
|
+
export const Default = {
|
|
31
|
+
args: {
|
|
32
|
+
legend: 'Personal Information',
|
|
33
|
+
children: (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(FormField, { id: "first-name", label: "First Name", inputProps: {
|
|
34
|
+
placeholder: 'Enter your first name',
|
|
35
|
+
} }), _jsx(FormField, { id: "last-name", label: "Last Name", inputProps: {
|
|
36
|
+
placeholder: 'Enter your last name',
|
|
37
|
+
} })] })),
|
|
38
|
+
},
|
|
39
|
+
};
|
|
40
|
+
// Disabled fieldset
|
|
41
|
+
export const Disabled = {
|
|
42
|
+
args: {
|
|
43
|
+
legend: 'Disabled Fieldset',
|
|
44
|
+
disabled: true,
|
|
45
|
+
children: (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx(FormField, { id: "disabled-input", label: "Disabled Input", inputProps: {
|
|
46
|
+
placeholder: 'This input is disabled',
|
|
47
|
+
disabled: true,
|
|
48
|
+
} }), _jsx(CheckboxInput, { id: "disabled-checkbox", name: "disabled", value: "disabled", label: "Disabled checkbox", disabled: true }), _jsx(RadioButtonInput, { id: "disabled-radio", name: "disabled", value: "disabled", label: "Disabled radio", disabled: true })] })),
|
|
49
|
+
},
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=Fieldset.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Fieldset.stories.js","sourceRoot":"","sources":["../../../../src/components/formField/fieldset/Fieldset.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,kCAAkC,CAAC;AACjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,+BAA+B;IACtC,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,QAAQ;KACjB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,kCAAkC;SAChD;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,+CAA+C;SAC7D;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,gEAAgE;SAC9E;KACF;CAC8B,CAAC;AAElC,eAAe,IAAI,CAAC;AAGpB,uCAAuC;AACvC,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,MAAM,EAAE,sBAAsB;QAC9B,QAAQ,EAAE,CACR,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aACnE,KAAC,SAAS,IACR,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY,EAClB,UAAU,EAAE;wBACV,WAAW,EAAE,uBAAuB;qBACrC,GACD,EACF,KAAC,SAAS,IACR,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,WAAW,EACjB,UAAU,EAAE;wBACV,WAAW,EAAE,sBAAsB;qBACpC,GACD,IACE,CACP;KACF;CACF,CAAC;AACF,oBAAoB;AACpB,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,MAAM,EAAE,mBAAmB;QAC3B,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,CACR,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aACnE,KAAC,SAAS,IACR,EAAE,EAAC,gBAAgB,EACnB,KAAK,EAAC,gBAAgB,EACtB,UAAU,EAAE;wBACV,WAAW,EAAE,wBAAwB;wBACrC,QAAQ,EAAE,IAAI;qBACf,GACD,EACF,KAAC,aAAa,IACZ,EAAE,EAAC,mBAAmB,EACtB,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,IAAI,GACd,EACF,KAAC,gBAAgB,IACf,EAAE,EAAC,gBAAgB,EACnB,IAAI,EAAC,UAAU,EACf,KAAK,EAAC,UAAU,EAChB,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAE,IAAI,GACd,IACE,CACP;KACF;CACF,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Fieldset.test.d.ts","sourceRoot":"","sources":["../../../../src/components/formField/fieldset/Fieldset.test.tsx"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { expect, test, describe } from 'vitest';
|
|
3
|
+
import { Fieldset } from './Fieldset';
|
|
4
|
+
import { render, screen } from '@testing-library/react';
|
|
5
|
+
import '@testing-library/jest-dom/vitest';
|
|
6
|
+
describe('Fieldset component', () => {
|
|
7
|
+
test('renders fieldset with legend', () => {
|
|
8
|
+
render(_jsx(Fieldset, { legend: "Test Legend", children: "Content" }));
|
|
9
|
+
expect(screen.getByText('Test Legend')).toBeInTheDocument();
|
|
10
|
+
expect(screen.getByText('Content')).toBeInTheDocument();
|
|
11
|
+
});
|
|
12
|
+
test('applies correct base class', () => {
|
|
13
|
+
render(_jsx(Fieldset, { legend: "Test Legend", children: "Content" }));
|
|
14
|
+
const fieldset = screen.getByText('Test Legend').closest('fieldset');
|
|
15
|
+
expect(fieldset).toHaveClass('ds-fieldset');
|
|
16
|
+
});
|
|
17
|
+
test('applies correct legend class', () => {
|
|
18
|
+
render(_jsx(Fieldset, { legend: "Test Legend", children: "Content" }));
|
|
19
|
+
const legend = screen.getByText('Test Legend');
|
|
20
|
+
expect(legend).toHaveClass('ds-fieldset__legend');
|
|
21
|
+
});
|
|
22
|
+
test('renders children content', () => {
|
|
23
|
+
render(_jsxs(Fieldset, { legend: "Form Section", children: [_jsx("input", { type: "text", placeholder: "First name" }), _jsx("input", { type: "text", placeholder: "Last name" })] }));
|
|
24
|
+
expect(screen.getByPlaceholderText('First name')).toBeInTheDocument();
|
|
25
|
+
expect(screen.getByPlaceholderText('Last name')).toBeInTheDocument();
|
|
26
|
+
});
|
|
27
|
+
test('applies additional className when provided', () => {
|
|
28
|
+
render(_jsx(Fieldset, { legend: "Test Legend", className: "custom-class", children: "Content" }));
|
|
29
|
+
const fieldset = screen.getByText('Test Legend').closest('fieldset');
|
|
30
|
+
expect(fieldset).toHaveClass('ds-fieldset');
|
|
31
|
+
expect(fieldset).toHaveClass('custom-class');
|
|
32
|
+
});
|
|
33
|
+
test('passes through HTML fieldset attributes', () => {
|
|
34
|
+
render(_jsx(Fieldset, { legend: "Test Legend", disabled: true, "data-testid": "test-fieldset", children: "Content" }));
|
|
35
|
+
const fieldset = screen.getByTestId('test-fieldset');
|
|
36
|
+
expect(fieldset).toBeDisabled();
|
|
37
|
+
});
|
|
38
|
+
test('applies id attribute when provided', () => {
|
|
39
|
+
render(_jsx(Fieldset, { legend: "Test Legend", id: "custom-id", children: "Content" }));
|
|
40
|
+
const fieldset = screen.getByText('Test Legend').closest('fieldset');
|
|
41
|
+
expect(fieldset).toHaveAttribute('id', 'custom-id');
|
|
42
|
+
});
|
|
43
|
+
test('renders with multiple child elements', () => {
|
|
44
|
+
render(_jsxs(Fieldset, { legend: "Personal Information", children: [_jsx("div", { children: "First section" }), _jsx("div", { children: "Second section" }), _jsx("div", { children: "Third section" })] }));
|
|
45
|
+
expect(screen.getByText('First section')).toBeInTheDocument();
|
|
46
|
+
expect(screen.getByText('Second section')).toBeInTheDocument();
|
|
47
|
+
expect(screen.getByText('Third section')).toBeInTheDocument();
|
|
48
|
+
});
|
|
49
|
+
test('renders with aria attributes', () => {
|
|
50
|
+
render(_jsx(Fieldset, { legend: "Test Legend", "aria-describedby": "description-id", children: "Content" }));
|
|
51
|
+
const fieldset = screen.getByText('Test Legend').closest('fieldset');
|
|
52
|
+
expect(fieldset).toHaveAttribute('aria-describedby', 'description-id');
|
|
53
|
+
});
|
|
54
|
+
test('renders legend as first child of fieldset', () => {
|
|
55
|
+
render(_jsx(Fieldset, { legend: "Test Legend", children: "Content" }));
|
|
56
|
+
const fieldset = screen.getByText('Test Legend').closest('fieldset');
|
|
57
|
+
const firstChild = fieldset?.firstChild;
|
|
58
|
+
expect(firstChild).toHaveClass('ds-fieldset__legend');
|
|
59
|
+
expect(firstChild?.textContent).toBe('Test Legend');
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
//# sourceMappingURL=Fieldset.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Fieldset.test.js","sourceRoot":"","sources":["../../../../src/components/formField/fieldset/Fieldset.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { type FieldsetProps } from '../../../formField/fieldset/Fieldset';
|
|
2
|
+
import { type CheckboxInputProps } from './CheckboxInput';
|
|
3
|
+
type CheckboxGroupProps = {
|
|
4
|
+
options: CheckboxInputProps[];
|
|
5
|
+
} & FieldsetProps;
|
|
6
|
+
export declare const CheckboxGroup: (props: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=CheckboxGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACtF,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE,KAAK,kBAAkB,GAAG;IACxB,OAAO,EAAE,kBAAkB,EAAE,CAAC;CAC/B,GAAG,aAAa,CAAC;AAElB,eAAO,MAAM,aAAa,GAAI,OAAO,kBAAkB,4CAStD,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Fieldset } from '../../../formField/fieldset/Fieldset';
|
|
3
|
+
import { CheckboxInput } from './CheckboxInput';
|
|
4
|
+
export const CheckboxGroup = (props) => {
|
|
5
|
+
const { options, ...rest } = props;
|
|
6
|
+
return (_jsx(Fieldset, { ...rest, children: options.map((option) => (_jsx(CheckboxInput, { ...option }, option.id))) }));
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=CheckboxGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/checkbox/CheckboxGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,wCAAwC,CAAC;AACtF,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAC;AAMzE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,KAAyB,EAAE,EAAE;IACzD,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACnC,OAAO,CACL,KAAC,QAAQ,OAAK,IAAI,YACf,OAAO,CAAC,GAAG,CAAC,CAAC,MAA0B,EAAE,EAAE,CAAC,CAC3C,KAAC,aAAa,OAAqB,MAAM,IAArB,MAAM,CAAC,EAAE,CAAgB,CAC9C,CAAC,GACO,CACZ,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/checkbox/CheckboxGroup.test.tsx"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { expect, test, describe, vi } from 'vitest';
|
|
3
|
+
import { CheckboxGroup } from './CheckboxGroup';
|
|
4
|
+
import { render, screen, fireEvent } from '@testing-library/react';
|
|
5
|
+
import '@testing-library/jest-dom/vitest';
|
|
6
|
+
describe('CheckboxGroup component', () => {
|
|
7
|
+
const mockOptions = [
|
|
8
|
+
{ id: 'option1', label: 'Option 1', checked: false, onChange: vi.fn() },
|
|
9
|
+
{ id: 'option2', label: 'Option 2', checked: true, onChange: vi.fn() },
|
|
10
|
+
{ id: 'option3', label: 'Option 3', checked: false, onChange: vi.fn() },
|
|
11
|
+
];
|
|
12
|
+
test('renders fieldset with legend', () => {
|
|
13
|
+
render(_jsx(CheckboxGroup, { legend: "Choose options", options: mockOptions }));
|
|
14
|
+
expect(screen.getByText('Choose options')).toBeInTheDocument();
|
|
15
|
+
});
|
|
16
|
+
test('renders all checkbox options', () => {
|
|
17
|
+
render(_jsx(CheckboxGroup, { legend: "Choose options", options: mockOptions }));
|
|
18
|
+
expect(screen.getByRole('checkbox', { name: 'Option 1' })).toBeInTheDocument();
|
|
19
|
+
expect(screen.getByRole('checkbox', { name: 'Option 2' })).toBeInTheDocument();
|
|
20
|
+
expect(screen.getByRole('checkbox', { name: 'Option 3' })).toBeInTheDocument();
|
|
21
|
+
});
|
|
22
|
+
test('applies checked state to checkboxes', () => {
|
|
23
|
+
render(_jsx(CheckboxGroup, { legend: "Choose options", options: mockOptions }));
|
|
24
|
+
const option1 = screen.getByRole('checkbox', { name: 'Option 1' });
|
|
25
|
+
const option2 = screen.getByRole('checkbox', { name: 'Option 2' });
|
|
26
|
+
const option3 = screen.getByRole('checkbox', { name: 'Option 3' });
|
|
27
|
+
expect(option1.checked).toBe(false);
|
|
28
|
+
expect(option2.checked).toBe(true);
|
|
29
|
+
expect(option3.checked).toBe(false);
|
|
30
|
+
});
|
|
31
|
+
test('calls onChange when a checkbox is clicked', () => {
|
|
32
|
+
const handleChange1 = vi.fn();
|
|
33
|
+
const options = [
|
|
34
|
+
{ id: 'option1', label: 'Option 1', checked: false, onChange: handleChange1, value: 'value1' },
|
|
35
|
+
];
|
|
36
|
+
render(_jsx(CheckboxGroup, { legend: "Choose options", options: options }));
|
|
37
|
+
const checkbox = screen.getByRole('checkbox', { name: 'Option 1' });
|
|
38
|
+
fireEvent.click(checkbox);
|
|
39
|
+
expect(handleChange1).toHaveBeenCalledExactlyOnceWith(expect.objectContaining({
|
|
40
|
+
target: checkbox,
|
|
41
|
+
}));
|
|
42
|
+
});
|
|
43
|
+
test('renders empty group when options array is empty', () => {
|
|
44
|
+
render(_jsx(CheckboxGroup, { legend: "Choose options", options: [] }));
|
|
45
|
+
expect(screen.getByText('Choose options')).toBeInTheDocument();
|
|
46
|
+
const checkboxes = screen.queryAllByRole('checkbox');
|
|
47
|
+
expect(checkboxes).toHaveLength(0);
|
|
48
|
+
});
|
|
49
|
+
test('passes through fieldset props', () => {
|
|
50
|
+
render(_jsx(CheckboxGroup, { legend: "Choose options", options: mockOptions, className: "custom-class", "data-testid": "test-fieldset" }));
|
|
51
|
+
const fieldset = screen.getByTestId('test-fieldset');
|
|
52
|
+
expect(fieldset).toBeInTheDocument();
|
|
53
|
+
expect(fieldset).toHaveClass('custom-class');
|
|
54
|
+
});
|
|
55
|
+
test('renders options without labels', () => {
|
|
56
|
+
const optionsWithoutLabels = [
|
|
57
|
+
{ id: 'option1', checked: false, onChange: vi.fn() },
|
|
58
|
+
{ id: 'option2', checked: false, onChange: vi.fn() },
|
|
59
|
+
];
|
|
60
|
+
render(_jsx(CheckboxGroup, { legend: "Choose options", options: optionsWithoutLabels }));
|
|
61
|
+
const checkboxes = screen.getAllByRole('checkbox');
|
|
62
|
+
expect(checkboxes).toHaveLength(2);
|
|
63
|
+
});
|
|
64
|
+
test('supports disabled fieldset', () => {
|
|
65
|
+
render(_jsx(CheckboxGroup, { legend: "Choose options", options: mockOptions, disabled: true }));
|
|
66
|
+
const fieldset = screen.getByText('Choose options').closest('fieldset');
|
|
67
|
+
expect(fieldset).toBeDisabled();
|
|
68
|
+
});
|
|
69
|
+
test('passes additional HTML attributes to checkboxes', () => {
|
|
70
|
+
const optionsWithAttributes = [
|
|
71
|
+
{
|
|
72
|
+
'id': 'option1',
|
|
73
|
+
'label': 'Option 1',
|
|
74
|
+
'checked': false,
|
|
75
|
+
'onChange': vi.fn(),
|
|
76
|
+
'data-custom': 'value1',
|
|
77
|
+
'aria-describedby': 'description1',
|
|
78
|
+
},
|
|
79
|
+
];
|
|
80
|
+
render(_jsx(CheckboxGroup, { legend: "Choose options", options: optionsWithAttributes }));
|
|
81
|
+
const checkbox = screen.getByRole('checkbox', { name: 'Option 1' });
|
|
82
|
+
expect(checkbox).toHaveAttribute('data-custom', 'value1');
|
|
83
|
+
expect(checkbox).toHaveAttribute('aria-describedby', 'description1');
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
|
+
//# sourceMappingURL=CheckboxGroup.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxGroup.test.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/checkbox/CheckboxGroup.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import type { Meta } from '@storybook/react-vite';
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
2
|
import { CheckboxInput } from './CheckboxInput';
|
|
3
3
|
declare const meta: Meta<typeof CheckboxInput>;
|
|
4
|
+
type Story = StoryObj<typeof meta>;
|
|
4
5
|
export declare const Default: {
|
|
5
6
|
parameters: {
|
|
6
7
|
layout: string;
|
|
@@ -13,5 +14,6 @@ export declare const Default: {
|
|
|
13
14
|
label: string;
|
|
14
15
|
};
|
|
15
16
|
};
|
|
17
|
+
export declare const CheckboxGroupStory: Story;
|
|
16
18
|
export default meta;
|
|
17
19
|
//# sourceMappingURL=CheckboxInput.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,aAAa,CAGpC,CAAC;AAEF,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO;;;;;;;;;;;CAWnB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
2
|
import { CheckboxInput } from './CheckboxInput';
|
|
3
|
+
import { CheckboxGroup } from './CheckboxGroup';
|
|
2
4
|
const meta = {
|
|
3
5
|
title: 'Components/FormField/Inputs/Checkbox',
|
|
4
6
|
component: CheckboxInput,
|
|
@@ -15,5 +17,10 @@ export const Default = {
|
|
|
15
17
|
label: 'Label text',
|
|
16
18
|
},
|
|
17
19
|
};
|
|
20
|
+
export const CheckboxGroupStory = {
|
|
21
|
+
render: () => {
|
|
22
|
+
return (_jsx(CheckboxGroup, { legend: "Checkbox group", options: [{ id: 'option1', label: 'Option 1' }, { id: 'option2', label: 'Option 2' }, { id: 'option3', label: 'Option 3' }] }));
|
|
23
|
+
},
|
|
24
|
+
};
|
|
18
25
|
export default meta;
|
|
19
26
|
//# sourceMappingURL=CheckboxInput.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxInput.stories.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,IAAI,GAA+B;IACvC,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,aAAa;CACzB,CAAC;
|
|
1
|
+
{"version":3,"file":"CheckboxInput.stories.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,MAAM,IAAI,GAA+B;IACvC,KAAK,EAAE,sCAAsC;IAC7C,SAAS,EAAE,aAAa;CACzB,CAAC;AAIF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,aAAa,EAAE,KAAK;QACpB,KAAK,EAAE,YAAY;KACpB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAU;IACvC,MAAM,EAAE,GAAG,EAAE;QACX,OAAO,CACL,KAAC,aAAa,IAAC,MAAM,EAAC,gBAAgB,EAAC,OAAO,EAAE,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,GAAI,CACvK,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ChangeEvent } from 'react';
|
|
2
|
+
import { type RadioButtonInputProps } from './RadioButtonInput';
|
|
3
|
+
import { type FieldsetProps } from '../../fieldset/Fieldset';
|
|
4
|
+
export type RadioButtonGroupProps = {
|
|
5
|
+
name: string;
|
|
6
|
+
options: RadioButtonInputProps[];
|
|
7
|
+
checkedValue: string;
|
|
8
|
+
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
9
|
+
} & Omit<FieldsetProps, 'onChange'>;
|
|
10
|
+
export declare const RadioButtonGroup: (props: RadioButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
//# sourceMappingURL=RadioButtonGroup.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/radio/RadioButtonGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAoB,KAAK,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAEvE,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,qBAAqB,EAAE,CAAC;IACjC,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC1D,GAAG,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AAEpC,eAAO,MAAM,gBAAgB,GAAI,OAAO,qBAAqB,4CAU5D,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { RadioButtonInput } from './RadioButtonInput';
|
|
3
|
+
import { Fieldset } from '../../fieldset/Fieldset';
|
|
4
|
+
export const RadioButtonGroup = (props) => {
|
|
5
|
+
const { legend, name, options, checkedValue, onChange, ...rest } = props;
|
|
6
|
+
return (_jsx(Fieldset, { legend: legend, ...rest, children: options.map((option) => (_jsx(RadioButtonInput, { name: name, value: option.value, label: option.label, checked: checkedValue === option.value, onChange: onChange }, option.id))) }));
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=RadioButtonGroup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/radio/RadioButtonGroup.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,gBAAgB,EAA8B,MAAM,oBAAoB,CAAC;AAClF,OAAO,EAAE,QAAQ,EAAsB,MAAM,yBAAyB,CAAC;AASvE,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,KAA4B,EAAE,EAAE;IAC/D,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAEzE,OAAO,CACL,KAAC,QAAQ,IAAC,MAAM,EAAE,MAAM,KAAM,IAAI,YAC/B,OAAO,CAAC,GAAG,CAAC,CAAC,MAA6B,EAAE,EAAE,CAAC,CAC9C,KAAC,gBAAgB,IAAiB,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,YAAY,KAAK,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,IAA3H,MAAM,CAAC,EAAE,CAAsH,CACvJ,CAAC,GACO,CACZ,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.test.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/radio/RadioButtonGroup.test.tsx"],"names":[],"mappings":"AAGA,OAAO,kCAAkC,CAAC"}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { expect, test, describe, vi } from 'vitest';
|
|
3
|
+
import { RadioButtonGroup } from './RadioButtonGroup';
|
|
4
|
+
import { render, screen, fireEvent } from '@testing-library/react';
|
|
5
|
+
import '@testing-library/jest-dom/vitest';
|
|
6
|
+
describe('RadioButtonGroup component', () => {
|
|
7
|
+
const mockOptions = [
|
|
8
|
+
{ id: 'option1', value: 'value1', label: 'Option 1' },
|
|
9
|
+
{ id: 'option2', value: 'value2', label: 'Option 2' },
|
|
10
|
+
{ id: 'option3', value: 'value3', label: 'Option 3' },
|
|
11
|
+
];
|
|
12
|
+
test('renders fieldset with legend', () => {
|
|
13
|
+
render(_jsx(RadioButtonGroup, { legend: "Choose an option", name: "test-group", options: mockOptions, checkedValue: "value1", onChange: vi.fn() }));
|
|
14
|
+
expect(screen.getByText('Choose an option')).toBeInTheDocument();
|
|
15
|
+
});
|
|
16
|
+
test('renders all radio button options', () => {
|
|
17
|
+
render(_jsx(RadioButtonGroup, { legend: "Choose an option", name: "test-group", options: mockOptions, checkedValue: "value1", onChange: vi.fn() }));
|
|
18
|
+
expect(screen.getByRole('radio', { name: 'Option 1' })).toBeInTheDocument();
|
|
19
|
+
expect(screen.getByRole('radio', { name: 'Option 2' })).toBeInTheDocument();
|
|
20
|
+
expect(screen.getByRole('radio', { name: 'Option 3' })).toBeInTheDocument();
|
|
21
|
+
});
|
|
22
|
+
test('applies the same name attribute to all radio buttons', () => {
|
|
23
|
+
render(_jsx(RadioButtonGroup, { legend: "Choose an option", name: "test-group", options: mockOptions, checkedValue: "value1", onChange: vi.fn() }));
|
|
24
|
+
const radios = screen.getAllByRole('radio');
|
|
25
|
+
radios.forEach((radio) => {
|
|
26
|
+
expect(radio).toHaveAttribute('name', 'test-group');
|
|
27
|
+
});
|
|
28
|
+
});
|
|
29
|
+
test('initially checks the correct radio button based on checkedValue', () => {
|
|
30
|
+
render(_jsx(RadioButtonGroup, { legend: "Choose an option", name: "test-group", options: mockOptions, checkedValue: "value2", onChange: vi.fn() }));
|
|
31
|
+
const option1 = screen.getByRole('radio', { name: 'Option 1' });
|
|
32
|
+
const option2 = screen.getByRole('radio', { name: 'Option 2' });
|
|
33
|
+
const option3 = screen.getByRole('radio', { name: 'Option 3' });
|
|
34
|
+
expect(option1.checked).toBe(false);
|
|
35
|
+
expect(option2.checked).toBe(true);
|
|
36
|
+
expect(option3.checked).toBe(false);
|
|
37
|
+
});
|
|
38
|
+
test('calls onChange when a radio button is clicked', () => {
|
|
39
|
+
const handleChange = vi.fn();
|
|
40
|
+
render(_jsx(RadioButtonGroup, { legend: "Choose an option", name: "test-group", options: mockOptions, checkedValue: "value1", onChange: handleChange }));
|
|
41
|
+
const option2 = screen.getByRole('radio', { name: 'Option 2' });
|
|
42
|
+
fireEvent.click(option2);
|
|
43
|
+
expect(handleChange).toHaveBeenCalledExactlyOnceWith(expect.objectContaining({
|
|
44
|
+
target: expect.objectContaining({
|
|
45
|
+
value: 'value2',
|
|
46
|
+
}),
|
|
47
|
+
}));
|
|
48
|
+
});
|
|
49
|
+
test('renders with single option', () => {
|
|
50
|
+
const singleOption = [{ id: 'option1', value: 'value1', label: 'Only Option' }];
|
|
51
|
+
render(_jsx(RadioButtonGroup, { legend: "Choose an option", name: "test-group", options: singleOption, checkedValue: "value1", onChange: vi.fn() }));
|
|
52
|
+
const radios = screen.getAllByRole('radio');
|
|
53
|
+
expect(radios).toHaveLength(1);
|
|
54
|
+
expect(screen.getByRole('radio', { name: 'Only Option' })).toBeInTheDocument();
|
|
55
|
+
});
|
|
56
|
+
test('renders empty group when options array is empty', () => {
|
|
57
|
+
render(_jsx(RadioButtonGroup, { legend: "Choose an option", name: "test-group", options: [], checkedValue: "", onChange: vi.fn() }));
|
|
58
|
+
expect(screen.getByText('Choose an option')).toBeInTheDocument();
|
|
59
|
+
const radios = screen.queryAllByRole('radio');
|
|
60
|
+
expect(radios).toHaveLength(0);
|
|
61
|
+
});
|
|
62
|
+
test('passes through fieldset props', () => {
|
|
63
|
+
render(_jsx(RadioButtonGroup, { legend: "Choose an option", name: "test-group", options: mockOptions, checkedValue: "value1", onChange: vi.fn(), className: "custom-class", "data-testid": "test-fieldset" }));
|
|
64
|
+
const fieldset = screen.getByTestId('test-fieldset');
|
|
65
|
+
expect(fieldset).toBeInTheDocument();
|
|
66
|
+
expect(fieldset).toHaveClass('custom-class');
|
|
67
|
+
});
|
|
68
|
+
test('updates checked state when checkedValue changes', () => {
|
|
69
|
+
const { rerender } = render(_jsx(RadioButtonGroup, { legend: "Choose an option", name: "test-group", options: mockOptions, checkedValue: "value1", onChange: vi.fn() }));
|
|
70
|
+
let option1 = screen.getByRole('radio', { name: 'Option 1' });
|
|
71
|
+
let option2 = screen.getByRole('radio', { name: 'Option 2' });
|
|
72
|
+
expect(option1.checked).toBe(true);
|
|
73
|
+
expect(option2.checked).toBe(false);
|
|
74
|
+
rerender(_jsx(RadioButtonGroup, { legend: "Choose an option", name: "test-group", options: mockOptions, checkedValue: "value2", onChange: vi.fn() }));
|
|
75
|
+
option1 = screen.getByRole('radio', { name: 'Option 1' });
|
|
76
|
+
option2 = screen.getByRole('radio', { name: 'Option 2' });
|
|
77
|
+
expect(option1.checked).toBe(false);
|
|
78
|
+
expect(option2.checked).toBe(true);
|
|
79
|
+
});
|
|
80
|
+
test('supports disabled fieldset', () => {
|
|
81
|
+
render(_jsx(RadioButtonGroup, { legend: "Choose an option", name: "test-group", options: mockOptions, checkedValue: "value1", onChange: vi.fn(), disabled: true }));
|
|
82
|
+
const fieldset = screen.getByText('Choose an option').closest('fieldset');
|
|
83
|
+
expect(fieldset).toBeDisabled();
|
|
84
|
+
});
|
|
85
|
+
});
|
|
86
|
+
//# sourceMappingURL=RadioButtonGroup.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RadioButtonGroup.test.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/radio/RadioButtonGroup.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/radio/RadioButtonInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioButtonInput.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/radio/RadioButtonInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAO5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoC+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAGnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAGF,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAGF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAQ7B,CAAC;AAGF,eAAO,MAAM,UAAU,EAAE,KAexB,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { jsx as _jsx
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { fn } from 'storybook/test';
|
|
3
3
|
import { RadioButtonInput } from './RadioButtonInput';
|
|
4
|
+
import { RadioButtonGroup } from './RadioButtonGroup';
|
|
5
|
+
import { useState } from 'react';
|
|
4
6
|
const meta = {
|
|
5
7
|
title: 'Components/FormField/Inputs/RadioButton',
|
|
6
8
|
component: RadioButtonInput,
|
|
@@ -78,6 +80,10 @@ export const DisabledChecked = {
|
|
|
78
80
|
};
|
|
79
81
|
// Radio button group example
|
|
80
82
|
export const RadioGroup = {
|
|
81
|
-
render: () =>
|
|
83
|
+
render: () => {
|
|
84
|
+
const options = [{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }, { label: 'Option 3', value: 'option3' }];
|
|
85
|
+
const [checkedValue, setCheckedValue] = useState(options[0]?.value ?? '');
|
|
86
|
+
return (_jsx(RadioButtonGroup, { legend: "Radio group", name: "group", options: options, checkedValue: checkedValue, onChange: e => setCheckedValue(e.target.value) }));
|
|
87
|
+
},
|
|
82
88
|
};
|
|
83
89
|
//# sourceMappingURL=RadioButtonInput.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtonInput.stories.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/radio/RadioButtonInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAEpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"RadioButtonInput.stories.js","sourceRoot":"","sources":["../../../../../src/components/formField/inputs/radio/RadioButtonInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAEpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,yCAAyC;IAChD,SAAS,EAAE,gBAAgB;IAC3B,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,IAAI,EAAE;QACJ,QAAQ,EAAE,EAAE,EAAE;KACf;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,qCAAqC;SACnD;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0BAA0B;SACxC;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,kBAAkB;SAChC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,iCAAiC;SAC/C;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,2CAA2C;SACzD;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sCAAsC;SACpD;KACF;CACsC,CAAC;AAE1C,eAAe,IAAI,CAAC;AAGpB,uBAAuB;AACvB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,KAAK;KACf;CACF,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,IAAI;KACd;CACF,CAAC;AAEF,wBAAwB;AACxB,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,UAAU;QACjB,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,uBAAuB;AACvB,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,KAAK,EAAE,UAAU;QACjB,QAAQ,EAAE,IAAI;QACd,OAAO,EAAE,IAAI;KACd;CACF,CAAC;AAEF,6BAA6B;AAC7B,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE;QACX,MAAM,OAAO,GAAG,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAC5I,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAS,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;QAElF,OAAO,CACL,KAAC,gBAAgB,IACf,MAAM,EAAC,aAAa,EACpB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,GAC9C,CACH,CAAC;IACJ,CAAC;CACF,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { Separator as RadixSeparator } from 'radix-ui';
|
|
2
|
+
type SeparatorProps = {
|
|
3
|
+
className?: string;
|
|
4
|
+
} & RadixSeparator.SeparatorProps;
|
|
5
|
+
export declare const Separator: (props: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export {};
|
|
7
|
+
//# sourceMappingURL=Separator.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../src/components/separator/Separator.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AAEvD,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,cAAc,CAAC,cAAc,CAAC;AAElC,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,4CAO9C,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { Separator as RadixSeparator } from 'radix-ui';
|
|
4
|
+
export const Separator = (props) => {
|
|
5
|
+
const { className, ...rest } = props;
|
|
6
|
+
return _jsx(RadixSeparator.Root, { className: classNames('ds-separator', className), ...rest });
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=Separator.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../src/components/separator/Separator.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,SAAS,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AAMvD,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EACJ,SAAS,EACT,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,OAAO,KAAC,cAAc,CAAC,IAAI,IAAC,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,KAAM,IAAI,GAAI,CAAC;AAC7F,CAAC,CAAC"}
|