@arbor-education/design-system.components 0.1.4 → 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/.github/workflows/release.yml +17 -18
- package/CHANGELOG.md +12 -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/icon/Icon.test.js +6 -3
- package/dist/components/icon/Icon.test.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/useComponentDidMount.test.d.ts +2 -0
- package/dist/utils/hooks/useComponentDidMount.test.d.ts.map +1 -0
- package/dist/utils/hooks/useComponentDidMount.test.js +43 -0
- package/dist/utils/hooks/useComponentDidMount.test.js.map +1 -0
- 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/dist/utils/hooks/useGridApi.test.d.ts +2 -0
- package/dist/utils/hooks/useGridApi.test.d.ts.map +1 -0
- package/dist/utils/hooks/useGridApi.test.js +48 -0
- package/dist/utils/hooks/useGridApi.test.js.map +1 -0
- package/dist/utils/hooks/useIsMounted.test.d.ts +2 -0
- package/dist/utils/hooks/useIsMounted.test.d.ts.map +1 -0
- package/dist/utils/hooks/useIsMounted.test.js +46 -0
- package/dist/utils/hooks/useIsMounted.test.js.map +1 -0
- package/dist/utils/hooks/useMemoGenerateUuid.d.ts +1 -1
- package/dist/utils/hooks/useMemoGenerateUuid.d.ts.map +1 -1
- package/dist/utils/hooks/useMemoGenerateUuid.js +1 -1
- package/dist/utils/hooks/useMemoGenerateUuid.js.map +1 -1
- package/dist/utils/hooks/useMemoGenerateUuid.test.d.ts +2 -0
- package/dist/utils/hooks/useMemoGenerateUuid.test.d.ts.map +1 -0
- package/dist/utils/hooks/useMemoGenerateUuid.test.js +55 -0
- package/dist/utils/hooks/useMemoGenerateUuid.test.js.map +1 -0
- package/dist/utils/hooks/usePubSub.test.d.ts +2 -0
- package/dist/utils/hooks/usePubSub.test.d.ts.map +1 -0
- package/dist/utils/hooks/usePubSub.test.js +81 -0
- package/dist/utils/hooks/usePubSub.test.js.map +1 -0
- package/package.json +2 -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/icon/Icon.test.tsx +6 -3
- 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/useComponentDidMount.test.tsx +59 -0
- package/src/utils/hooks/useComponentDidUpdate.test.ts +107 -0
- package/src/utils/hooks/useComponentDidUpdate.ts +19 -0
- package/src/utils/hooks/useGridApi.test.tsx +79 -0
- package/src/utils/hooks/useIsMounted.test.tsx +63 -0
- package/src/utils/hooks/useMemoGenerateUuid.test.tsx +80 -0
- package/src/utils/hooks/useMemoGenerateUuid.ts +1 -1
- package/src/utils/hooks/usePubSub.test.tsx +100 -0
- package/vitest.config.ts +9 -0
|
@@ -8,18 +8,9 @@ permissions:
|
|
|
8
8
|
id-token: write # Required for OIDC authentication
|
|
9
9
|
|
|
10
10
|
on:
|
|
11
|
-
push:
|
|
12
|
-
branches:
|
|
13
|
-
- DOPS-17000-fix-git-ops # Temporary: trigger on feature branch push
|
|
14
11
|
schedule:
|
|
15
12
|
- cron: '0 7 * * 1-5' # 7 AM UTC, Monday-Friday
|
|
16
|
-
workflow_dispatch:
|
|
17
|
-
inputs:
|
|
18
|
-
force_publish:
|
|
19
|
-
description: 'Force publish current version (skip changeset version step)'
|
|
20
|
-
required: false
|
|
21
|
-
default: false
|
|
22
|
-
type: boolean
|
|
13
|
+
workflow_dispatch: # Allow manual trigger
|
|
23
14
|
|
|
24
15
|
concurrency: ${{ github.workflow }}-${{ github.ref }}
|
|
25
16
|
|
|
@@ -55,7 +46,6 @@ jobs:
|
|
|
55
46
|
|
|
56
47
|
- name: Version packages
|
|
57
48
|
id: version
|
|
58
|
-
if: ${{ !inputs.force_publish && github.event_name != 'push' }}
|
|
59
49
|
env:
|
|
60
50
|
GITHUB_TOKEN: ${{ secrets.ARBOR_AUTOMATION_ORG_GHA_TOKEN }}
|
|
61
51
|
run: |
|
|
@@ -70,13 +60,12 @@ jobs:
|
|
|
70
60
|
git commit -m "chore: version packages"
|
|
71
61
|
git push
|
|
72
62
|
fi
|
|
73
|
-
|
|
74
63
|
- name: Publish to npm
|
|
75
|
-
if: steps.version.outputs.changed == 'true'
|
|
64
|
+
if: steps.version.outputs.changed == 'true'
|
|
76
65
|
run: npm publish
|
|
77
66
|
|
|
78
67
|
- name: Get changelog for current release
|
|
79
|
-
if: steps.version.outputs.changed == 'true'
|
|
68
|
+
if: steps.version.outputs.changed == 'true'
|
|
80
69
|
id: get-changelog
|
|
81
70
|
run: |
|
|
82
71
|
changelog=$(python "${GITHUB_WORKSPACE}/.github/workflows/scripts/python/changelog_utils.py")
|
|
@@ -85,21 +74,21 @@ jobs:
|
|
|
85
74
|
echo "EOF" >> $GITHUB_ENV
|
|
86
75
|
|
|
87
76
|
- name: Get version
|
|
88
|
-
if: steps.version.outputs.changed == 'true'
|
|
77
|
+
if: steps.version.outputs.changed == 'true'
|
|
89
78
|
id: get-version
|
|
90
79
|
run: |
|
|
91
80
|
version=$(node -p "require('./package.json').version")
|
|
92
81
|
echo "version=${version}" >> $GITHUB_OUTPUT
|
|
93
82
|
|
|
94
83
|
- name: Create tarball
|
|
95
|
-
if: steps.version.outputs.changed == 'true'
|
|
84
|
+
if: steps.version.outputs.changed == 'true'
|
|
96
85
|
run: |
|
|
97
86
|
mkdir -p release
|
|
98
87
|
npm pack
|
|
99
88
|
mv *.tgz release/design-system.components.tgz
|
|
100
89
|
|
|
101
90
|
- name: Create GitHub Release
|
|
102
|
-
if: steps.version.outputs.changed == 'true'
|
|
91
|
+
if: steps.version.outputs.changed == 'true'
|
|
103
92
|
env:
|
|
104
93
|
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
|
105
94
|
run: |
|
|
@@ -114,7 +103,7 @@ jobs:
|
|
|
114
103
|
"./release/design-system.components.tgz"
|
|
115
104
|
|
|
116
105
|
- name: Send Slack Success Message
|
|
117
|
-
if: steps.version.outputs.changed == 'true'
|
|
106
|
+
if: steps.version.outputs.changed == 'true'
|
|
118
107
|
uses: rtCamp/action-slack-notify@v2
|
|
119
108
|
env:
|
|
120
109
|
SLACK_COLOR: good
|
|
@@ -133,3 +122,13 @@ jobs:
|
|
|
133
122
|
SLACK_LINK_NAMES: true
|
|
134
123
|
MSG_MINIMAL: true
|
|
135
124
|
SLACK_WEBHOOK: ${{ secrets.ARBOR_FRONTEND_RELEASE_SLACK_WEBHOOK }}
|
|
125
|
+
|
|
126
|
+
- name: Run component tests
|
|
127
|
+
if: steps.version.outputs.changed == 'true'
|
|
128
|
+
run: yarn test:coverage
|
|
129
|
+
- name: Coveralls
|
|
130
|
+
if: steps.version.outputs.changed == 'true'
|
|
131
|
+
uses: coverallsapp/github-action@v2
|
|
132
|
+
continue-on-error: true
|
|
133
|
+
with:
|
|
134
|
+
github-token: ${{ secrets.ARBOR_AUTOMATION_ORG_GHA_TOKEN }}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
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
|
+
|
|
9
|
+
## 0.1.5
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#93](https://github.com/arbor-education/design-system.components/pull/93) [`38e0e33`](https://github.com/arbor-education/design-system.components/commit/38e0e3315bb65becd546a5e6305f55ef7076bdab) Thanks [@AmeeMorris](https://github.com/AmeeMorris)! - MIS-67805 coveralls and add missing tests
|
|
14
|
+
|
|
3
15
|
### Patch Changes
|
|
4
16
|
|
|
5
17
|
- [#80](https://github.com/arbor-education/design-system.components/pull/80) [`592c5b2`](https://github.com/arbor-education/design-system.components/commit/592c5b2a4a5f32d6da5d21c45c3a4d23ff935fea) Thanks [@AmeeMorris](https://github.com/AmeeMorris)! - MIS-66551 remove browser default margins from ds headings
|
|
@@ -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
|