@uva-glass/component-library 1.48.0 → 1.49.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/dist/MultiSelect-Ckf3uGw5.js.map +1 -1
- package/dist/assets/CheckboxButton.css +1 -0
- package/dist/assets/CheckboxButtonBar.css +1 -0
- package/dist/assets/CheckboxTree.css +1 -1
- package/dist/assets/Label.css +1 -1
- package/dist/assets/PeriodSelector.css +1 -0
- package/dist/components/Accordion/Accordion.d.ts +2 -2
- package/dist/components/Accordion/Accordion.js.map +1 -1
- package/dist/components/ActionList/ActionList.d.ts +6 -0
- package/dist/components/ActionList/ActionList.js +1 -1
- package/dist/components/ActionList/ActionList.js.map +1 -1
- package/dist/components/ActionList/ActionList.stories.js +4 -3
- package/dist/components/ActionList/ActionList.stories.js.map +1 -1
- package/dist/components/AppStatusBar/AppStatusBar.d.ts +3 -0
- package/dist/components/AppStatusBar/AppStatusBar.js.map +1 -1
- package/dist/components/AppStatusBar/AppStatusBar.stories.js +8 -7
- package/dist/components/AppStatusBar/AppStatusBar.stories.js.map +1 -1
- package/dist/components/Attention/Attention.d.ts +1 -0
- package/dist/components/Attention/Attention.js.map +1 -1
- package/dist/components/Attention/Attention.stories.js +3 -2
- package/dist/components/Attention/Attention.stories.js.map +1 -1
- package/dist/components/Backdrop/Backdrop.d.ts +1 -0
- package/dist/components/Backdrop/Backdrop.js.map +1 -1
- package/dist/components/Backdrop/Backdrop.stories.js +8 -7
- package/dist/components/Backdrop/Backdrop.stories.js.map +1 -1
- package/dist/components/Button/Button.d.ts +4 -0
- package/dist/components/Button/Button.js.map +1 -1
- package/dist/components/Button/Button.stories.js +14 -13
- package/dist/components/Button/Button.stories.js.map +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.d.ts +3 -0
- package/dist/components/ButtonGroup/ButtonGroup.js.map +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.stories.js +1 -0
- package/dist/components/ButtonGroup/ButtonGroup.stories.js.map +1 -1
- package/dist/components/Card/Card.d.ts +6 -0
- package/dist/components/Card/Card.js.map +1 -1
- package/dist/components/Card/Card.stories.js +14 -13
- package/dist/components/Card/Card.stories.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.d.ts +1 -0
- package/dist/components/Checkbox/Checkbox.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.stories.js +17 -16
- package/dist/components/Checkbox/Checkbox.stories.js.map +1 -1
- package/dist/components/CheckboxButton/CheckboxButton.d.ts +16 -0
- package/dist/components/CheckboxButton/CheckboxButton.js +51 -0
- package/dist/components/CheckboxButton/CheckboxButton.js.map +1 -0
- package/dist/components/CheckboxButton/CheckboxButton.stories.d.ts +5 -0
- package/dist/components/CheckboxButton/CheckboxButton.stories.js +48 -0
- package/dist/components/CheckboxButton/CheckboxButton.stories.js.map +1 -0
- package/dist/components/CheckboxButton/index.d.ts +1 -0
- package/dist/components/CheckboxButton/index.js +5 -0
- package/dist/components/CheckboxButton/index.js.map +1 -0
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.d.ts +22 -0
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js +62 -0
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.js.map +1 -0
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.d.ts +5 -0
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js +70 -0
- package/dist/components/CheckboxButtonBar/CheckboxButtonBar.stories.js.map +1 -0
- package/dist/components/CheckboxButtonBar/index.d.ts +1 -0
- package/dist/components/CheckboxButtonBar/index.js +5 -0
- package/dist/components/CheckboxButtonBar/index.js.map +1 -0
- package/dist/components/CheckboxTree/CheckboxTree.d.ts +5 -3
- package/dist/components/CheckboxTree/CheckboxTree.js +21 -21
- package/dist/components/CheckboxTree/CheckboxTree.js.map +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.js +1 -1
- package/dist/components/CheckboxTree/CheckboxTree.stories.js.map +1 -1
- package/dist/components/Drawer/Drawer.d.ts +6 -0
- package/dist/components/Drawer/Drawer.js.map +1 -1
- package/dist/components/Drawer/Drawer.stories.js +16 -15
- package/dist/components/Drawer/Drawer.stories.js.map +1 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.d.ts +3 -0
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.js.map +1 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.js +3 -2
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.js.map +1 -1
- package/dist/components/FeedbackBox/FeedbackBox.d.ts +4 -0
- package/dist/components/FeedbackBox/FeedbackBox.js.map +1 -1
- package/dist/components/FeedbackBox/FeedbackBox.stories.js +10 -9
- package/dist/components/FeedbackBox/FeedbackBox.stories.js.map +1 -1
- package/dist/components/FieldHint/FieldHint.d.ts +4 -0
- package/dist/components/FieldHint/FieldHint.js.map +1 -1
- package/dist/components/FieldHint/FieldHint.stories.js +1 -0
- package/dist/components/FieldHint/FieldHint.stories.js.map +1 -1
- package/dist/components/Fieldset/Fieldset.d.ts +5 -0
- package/dist/components/Fieldset/Fieldset.js.map +1 -1
- package/dist/components/Fieldset/Fieldset.stories.js +20 -19
- package/dist/components/Fieldset/Fieldset.stories.js.map +1 -1
- package/dist/components/FormField/FormField.d.ts +3 -0
- package/dist/components/FormField/FormField.js.map +1 -1
- package/dist/components/FormField/FormField.stories.js +16 -15
- package/dist/components/FormField/FormField.stories.js.map +1 -1
- package/dist/components/GridRow/GridRow.d.ts +4 -0
- package/dist/components/GridRow/GridRow.js +4 -4
- package/dist/components/GridRow/GridRow.js.map +1 -1
- package/dist/components/GridRow/GridRow.stories.js +1 -0
- package/dist/components/GridRow/GridRow.stories.js.map +1 -1
- package/dist/components/HorizontalList/HorizontalList.d.ts +3 -0
- package/dist/components/HorizontalList/HorizontalList.js.map +1 -1
- package/dist/components/HorizontalList/HorizontalList.stories.js +7 -6
- package/dist/components/HorizontalList/HorizontalList.stories.js.map +1 -1
- package/dist/components/Icon/Icon.d.ts +4 -0
- package/dist/components/Icon/Icon.js.map +1 -1
- package/dist/components/Icon/Icon.stories.js +1 -0
- package/dist/components/Icon/Icon.stories.js.map +1 -1
- package/dist/components/IconButton/IconButton.d.ts +5 -0
- package/dist/components/IconButton/IconButton.js.map +1 -1
- package/dist/components/IconButton/IconButton.stories.js +8 -7
- package/dist/components/IconButton/IconButton.stories.js.map +1 -1
- package/dist/components/InfoMessage/InfoMessage.d.ts +3 -0
- package/dist/components/InfoMessage/InfoMessage.js.map +1 -1
- package/dist/components/InfoMessage/InfoMessage.stories.js +4 -3
- package/dist/components/InfoMessage/InfoMessage.stories.js.map +1 -1
- package/dist/components/Input/Input.d.ts +6 -0
- package/dist/components/Input/Input.js.map +1 -1
- package/dist/components/Input/Input.stories.js +11 -10
- package/dist/components/Input/Input.stories.js.map +1 -1
- package/dist/components/InputField/InputField.d.ts +6 -0
- package/dist/components/InputField/InputField.js.map +1 -1
- package/dist/components/InputField/InputField.stories.js +16 -15
- package/dist/components/InputField/InputField.stories.js.map +1 -1
- package/dist/components/Label/Label.d.ts +6 -1
- package/dist/components/Label/Label.js +12 -10
- package/dist/components/Label/Label.js.map +1 -1
- package/dist/components/Label/Label.stories.js +1 -0
- package/dist/components/Label/Label.stories.js.map +1 -1
- package/dist/components/MenuButton/MenuButton.d.ts +4 -0
- package/dist/components/MenuButton/MenuButton.js +1 -1
- package/dist/components/MenuButton/MenuButton.js.map +1 -1
- package/dist/components/MenuButton/MenuButton.stories.js +19 -18
- package/dist/components/MenuButton/MenuButton.stories.js.map +1 -1
- package/dist/components/MenuLink/MenuLink.d.ts +1 -0
- package/dist/components/MenuLink/MenuLink.js.map +1 -1
- package/dist/components/MenuLink/MenuLink.stories.js +5 -4
- package/dist/components/MenuLink/MenuLink.stories.js.map +1 -1
- package/dist/components/MetaDataList/MetaDataList.d.ts +2 -0
- package/dist/components/MetaDataList/MetaDataList.js.map +1 -1
- package/dist/components/MetaDataList/MetaDataList.stories.js +5 -4
- package/dist/components/MetaDataList/MetaDataList.stories.js.map +1 -1
- package/dist/components/ModalDialog/ModalDialog.d.ts +20 -1
- package/dist/components/ModalDialog/ModalDialog.js.map +1 -1
- package/dist/components/ModalDialog/ModalDialog.stories.js +9 -8
- package/dist/components/ModalDialog/ModalDialog.stories.js.map +1 -1
- package/dist/components/MultiSelect/MultiSelect.d.ts +4 -0
- package/dist/components/MultiSelect/MultiSelect.stories.js +23 -22
- package/dist/components/MultiSelect/MultiSelect.stories.js.map +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.d.ts +3 -0
- package/dist/components/OverlayCloseButton/OverlayCloseButton.js.map +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +11 -10
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js.map +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.d.ts +16 -0
- package/dist/components/PeriodSelector/PeriodSelector.js +74 -0
- package/dist/components/PeriodSelector/PeriodSelector.js.map +1 -0
- package/dist/components/PeriodSelector/PeriodSelector.stories.d.ts +5 -0
- package/dist/components/PeriodSelector/PeriodSelector.stories.js +25 -0
- package/dist/components/PeriodSelector/PeriodSelector.stories.js.map +1 -0
- package/dist/components/PeriodSelector/index.d.ts +1 -0
- package/dist/components/PeriodSelector/index.js +5 -0
- package/dist/components/PeriodSelector/index.js.map +1 -0
- package/dist/components/Periods/Periods.d.ts +4 -0
- package/dist/components/Periods/Periods.js.map +1 -1
- package/dist/components/Periods/Periods.stories.js +1 -0
- package/dist/components/Periods/Periods.stories.js.map +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.d.ts +4 -0
- package/dist/components/ProgrammeCard/ProgrammeCard.js.map +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +19 -18
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js.map +1 -1
- package/dist/components/RadioButton/RadioButton.d.ts +5 -0
- package/dist/components/RadioButton/RadioButton.js.map +1 -1
- package/dist/components/RadioButton/RadioButton.stories.js +9 -8
- package/dist/components/RadioButton/RadioButton.stories.js.map +1 -1
- package/dist/components/Repeater/Repeater.d.ts +3 -0
- package/dist/components/Repeater/Repeater.js.map +1 -1
- package/dist/components/Repeater/Repeater.stories.js +6 -5
- package/dist/components/Repeater/Repeater.stories.js.map +1 -1
- package/dist/components/SectionNotification/SectionNotification.d.ts +2 -0
- package/dist/components/SectionNotification/SectionNotification.js.map +1 -1
- package/dist/components/SectionNotification/SectionNotification.stories.js +1 -0
- package/dist/components/SectionNotification/SectionNotification.stories.js.map +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.d.ts +2 -2
- package/dist/components/SelectListbox/SelectListBox.stories.js +1 -0
- package/dist/components/SelectListbox/SelectListBox.stories.js.map +1 -1
- package/dist/components/SelectListbox/SelectListbox.d.ts +12 -0
- package/dist/components/SelectListbox/SelectListbox.js +9 -9
- package/dist/components/SelectListbox/SelectListbox.js.map +1 -1
- package/dist/components/Spinner/Spinner.d.ts +3 -1
- package/dist/components/Spinner/Spinner.js.map +1 -1
- package/dist/components/Spinner/Spinner.stories.js +4 -3
- package/dist/components/Spinner/Spinner.stories.js.map +1 -1
- package/dist/components/StatusPill/StatusPill.d.ts +4 -0
- package/dist/components/StatusPill/StatusPill.js.map +1 -1
- package/dist/components/StatusPill/StatusPill.stories.js +7 -6
- package/dist/components/StatusPill/StatusPill.stories.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.d.ts +6 -0
- package/dist/components/Tooltip/Tooltip.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.stories.js +10 -9
- package/dist/components/Tooltip/Tooltip.stories.js.map +1 -1
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.js +73 -67
- package/dist/components/index.js.map +1 -1
- package/dist/index.js +73 -67
- package/dist/index.js.map +1 -1
- package/package.json +15 -15
|
@@ -1,50 +1,51 @@
|
|
|
1
1
|
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
-
import { Card as
|
|
3
|
-
const
|
|
2
|
+
import { Card as e } from "./Card.js";
|
|
3
|
+
const n = "<Card header={header}>{children}</Card>", d = {
|
|
4
4
|
title: "Atoms/Card",
|
|
5
|
-
component:
|
|
5
|
+
component: e,
|
|
6
6
|
argTypes: {
|
|
7
7
|
highContrast: {
|
|
8
|
-
|
|
8
|
+
control: "boolean"
|
|
9
9
|
},
|
|
10
10
|
padding: {
|
|
11
|
-
|
|
11
|
+
control: {
|
|
12
12
|
type: "select",
|
|
13
13
|
options: ["small", "regular", "large"]
|
|
14
14
|
}
|
|
15
15
|
},
|
|
16
16
|
alignCenter: {
|
|
17
|
-
|
|
17
|
+
control: "boolean"
|
|
18
18
|
},
|
|
19
19
|
children: {
|
|
20
20
|
control: "text"
|
|
21
21
|
}
|
|
22
22
|
},
|
|
23
23
|
parameters: {
|
|
24
|
-
|
|
24
|
+
inspectComponent: e,
|
|
25
|
+
codeString: n
|
|
25
26
|
}
|
|
26
|
-
},
|
|
27
|
+
}, t = (r) => /* @__PURE__ */ i(e, { ...r }), a = {
|
|
27
28
|
padding: "regular",
|
|
28
29
|
highContrast: !1,
|
|
29
30
|
alignCenter: !1,
|
|
30
31
|
header: "Example Header"
|
|
31
|
-
},
|
|
32
|
-
|
|
32
|
+
}, o = t.bind({});
|
|
33
|
+
o.args = {
|
|
33
34
|
...a,
|
|
34
35
|
notification: ""
|
|
35
36
|
};
|
|
36
|
-
const s =
|
|
37
|
+
const s = t.bind({});
|
|
37
38
|
s.args = {
|
|
38
39
|
...a,
|
|
39
40
|
notification: "This is an example notification"
|
|
40
41
|
};
|
|
41
|
-
const h =
|
|
42
|
+
const h = t.bind({});
|
|
42
43
|
h.args = {
|
|
43
44
|
...a,
|
|
44
45
|
children: "Chuck Norris is the reason why Waldo is hiding Remember the Soviet Union? They decided to quit after watching a DeltaForce marathon on Satellite TV, Chuck Norris CAN eat soup with a fork Morgan Freeman is the only person that could narrate Chuck Norris's life, other than himself, The quickest way to a man's heart is with Chuck Norris' fist. Chuck Norris ran in Nascar and came in 1st place. Then again, Chuck Norris wins everything."
|
|
45
46
|
};
|
|
46
47
|
export {
|
|
47
|
-
|
|
48
|
+
o as CardExample,
|
|
48
49
|
h as WithChildren,
|
|
49
50
|
s as WithNotification,
|
|
50
51
|
d as default
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.stories.js","sources":["../../../src/components/Card/Card.stories.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CardProps } from './Card';\n\nimport { Card } from './Card';\n\nconst codeString = '<Card header={header}>{children}</Card>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Card',\n component: Card,\n argTypes: {\n highContrast: {\n
|
|
1
|
+
{"version":3,"file":"Card.stories.js","sources":["../../../src/components/Card/Card.stories.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CardProps } from './Card';\n\nimport { Card } from './Card';\n\nconst codeString = '<Card header={header}>{children}</Card>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Card',\n component: Card,\n argTypes: {\n highContrast: {\n control: 'boolean',\n },\n padding: {\n control: {\n type: 'select',\n options: ['small', 'regular', 'large'],\n },\n },\n alignCenter: {\n control: 'boolean',\n },\n children: {\n control: 'text',\n },\n },\n parameters: {\n inspectComponent: Card,\n codeString: codeString,\n },\n} as Meta<PropsWithChildren<CardProps>>;\n\nconst Template: StoryFn<PropsWithChildren<CardProps>> = (args) => <Card {...args} />;\n\nconst defaultArgs: Partial<PropsWithChildren<CardProps>> = {\n padding: 'regular',\n highContrast: false,\n alignCenter: false,\n header: 'Example Header',\n};\n\nexport const CardExample = Template.bind({});\nCardExample.args = {\n ...defaultArgs,\n notification: '',\n};\n\nexport const WithNotification = Template.bind({});\nWithNotification.args = {\n ...defaultArgs,\n notification: 'This is an example notification',\n};\n\nexport const WithChildren = Template.bind({});\nWithChildren.args = {\n ...defaultArgs,\n children:\n \"Chuck Norris is the reason why Waldo is hiding Remember the Soviet Union? They decided to quit after watching a DeltaForce marathon on Satellite TV, Chuck Norris CAN eat soup with a fork Morgan Freeman is the only person that could narrate Chuck Norris's life, other than himself, The quickest way to a man's heart is with Chuck Norris' fist. Chuck Norris ran in Nascar and came in 1st place. Then again, Chuck Norris wins everything.\",\n};\n"],"names":["codeString","Card_stories","Card","Template","args","jsx","defaultArgs","CardExample","WithNotification","WithChildren"],"mappings":";;AAMA,MAAMA,IAAa,2CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS;AAAA,QACP,MAAM;AAAA,QACN,SAAS,CAAC,SAAS,WAAW,OAAO;AAAA,MACvC;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAkD,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAM,GAAGE,EAAM,CAAA,GAE5EE,IAAqD;AAAA,EACzD,SAAS;AAAA,EACT,cAAc;AAAA,EACd,aAAa;AAAA,EACb,QAAQ;AACV,GAEaC,IAAcJ,EAAS,KAAK,EAAE;AAC3CI,EAAY,OAAO;AAAA,EACjB,GAAGD;AAAA,EACH,cAAc;AAChB;AAEO,MAAME,IAAmBL,EAAS,KAAK,EAAE;AAChDK,EAAiB,OAAO;AAAA,EACtB,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAeN,EAAS,KAAK,EAAE;AAC5CM,EAAa,OAAO;AAAA,EAClB,GAAGH;AAAA,EACH,UACE;AACJ;"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
import { InputHTMLAttributes } from 'react';
|
|
2
2
|
export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'type'>;
|
|
3
|
+
/** Represents a checkbox component. */
|
|
3
4
|
export declare const Checkbox: ({ ...restProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\n\nimport styles from './Checkbox.module.css';\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'type'>;\n\nexport const Checkbox = ({ ...restProps }: CheckboxProps) => (\n <input {...restProps} type=\"checkbox\" className={styles['checkbox']} />\n);\n"],"names":["Checkbox","restProps","jsx","styles"],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\n\nimport styles from './Checkbox.module.css';\n\nexport type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style' | 'type'>;\n\n/** Represents a checkbox component. */\nexport const Checkbox = ({ ...restProps }: CheckboxProps) => (\n <input {...restProps} type=\"checkbox\" className={styles['checkbox']} />\n);\n"],"names":["Checkbox","restProps","jsx","styles"],"mappings":";;;GAOaA,IAAW,CAAC,EAAE,GAAGC,QAC5B,gBAAAC,EAAC,SAAO,EAAA,GAAGD,GAAW,MAAK,YAAW,WAAWE,EAAO,SAAa,CAAA;"}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import { jsxs as g, jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { fn as e } from "../../index-MQ0yPLdl.js";
|
|
3
|
-
import { Checkbox as
|
|
3
|
+
import { Checkbox as n } from "./Checkbox.js";
|
|
4
4
|
import { FormField as t } from "../FormField/FormField.js";
|
|
5
|
-
import { Label as
|
|
6
|
-
const
|
|
5
|
+
import { Label as i } from "../Label/Label.js";
|
|
6
|
+
const r = "<Checkbox checked={} id={} onChange={} />", C = {
|
|
7
7
|
title: "Atoms/Checkbox",
|
|
8
|
-
component:
|
|
8
|
+
component: n,
|
|
9
9
|
parameters: {
|
|
10
|
-
|
|
10
|
+
inspectComponent: n,
|
|
11
|
+
codeString: r
|
|
11
12
|
}
|
|
12
|
-
}, m = (
|
|
13
|
-
/* @__PURE__ */ o(
|
|
14
|
-
/* @__PURE__ */ o(
|
|
15
|
-
] }),
|
|
16
|
-
|
|
13
|
+
}, m = (l) => /* @__PURE__ */ g(t, { inline: !0, children: [
|
|
14
|
+
/* @__PURE__ */ o(n, { id: "72103b4d", ...l }),
|
|
15
|
+
/* @__PURE__ */ o(i, { htmlFor: "72103b4d", children: "Example Checkbox" })
|
|
16
|
+
] }), c = m.bind({});
|
|
17
|
+
c.args = {
|
|
17
18
|
onChange: e()
|
|
18
19
|
};
|
|
19
|
-
const
|
|
20
|
+
const a = (l) => /* @__PURE__ */ g(t, { inline: !0, children: [
|
|
20
21
|
/* @__PURE__ */ o(
|
|
21
22
|
"div",
|
|
22
23
|
{
|
|
@@ -24,17 +25,17 @@ const c = (n) => /* @__PURE__ */ g(t, { inline: !0, children: [
|
|
|
24
25
|
alignSelf: "flex-start",
|
|
25
26
|
marginTop: "0.18rem"
|
|
26
27
|
},
|
|
27
|
-
children: /* @__PURE__ */ o(
|
|
28
|
+
children: /* @__PURE__ */ o(n, { id: "72103b4e", ...l })
|
|
28
29
|
}
|
|
29
30
|
),
|
|
30
|
-
/* @__PURE__ */ o(
|
|
31
|
-
] }), h =
|
|
31
|
+
/* @__PURE__ */ o(i, { htmlFor: "72103b4e", children: "Example Checkbox with long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long label" })
|
|
32
|
+
] }), h = a.bind({});
|
|
32
33
|
h.args = {
|
|
33
34
|
onChange: e()
|
|
34
35
|
};
|
|
35
36
|
export {
|
|
36
|
-
|
|
37
|
+
c as CheckboxExample,
|
|
37
38
|
h as WithLongLabel,
|
|
38
|
-
|
|
39
|
+
C as default
|
|
39
40
|
};
|
|
40
41
|
//# sourceMappingURL=Checkbox.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.stories.js","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxProps } from './Checkbox';\n\nimport { Checkbox } from './Checkbox';\n\nimport { FormField } from 'components/FormField';\nimport { Label } from 'components/Label';\n\nconst codeString = '<Checkbox checked={} id={} onChange={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Checkbox',\n component: Checkbox,\n parameters: {\n codeString: codeString,\n },\n} as Meta<CheckboxProps>;\n\nconst Template: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <Checkbox id=\"72103b4d\" {...args} />\n <Label htmlFor=\"72103b4d\">Example Checkbox</Label>\n </FormField>\n);\n\nexport const CheckboxExample = Template.bind({});\nCheckboxExample.args = {\n onChange: fn(),\n};\n\n// Extra story created for UX to see how we can solve placement of checkbox when paired with long content\n// TODO: should this component be refactored to always include a label? (see RadioButton)\nconst WithLongLabelTemplate: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <div\n style={{\n alignSelf: 'flex-start',\n marginTop: '0.18rem',\n }}\n >\n <Checkbox id=\"72103b4e\" {...args} />\n </div>\n <Label htmlFor=\"72103b4e\">\n Example Checkbox with long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long label\n </Label>\n </FormField>\n);\n\nexport const WithLongLabel = WithLongLabelTemplate.bind({});\nWithLongLabel.args = {\n onChange: fn(),\n};\n"],"names":["codeString","Checkbox_stories","Checkbox","Template","args","jsxs","FormField","jsx","Label","CheckboxExample","fn","WithLongLabelTemplate","WithLongLabel"],"mappings":";;;;;AAUA,MAAMA,IAAa,6CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAmC,CAACC,MACvC,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC,EAACL,GAAS,EAAA,IAAG,YAAY,GAAGE,EAAM,CAAA;AAAA,EACjC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAgB,oBAAA;AAAA,EAC5C,CAAA,GAGWC,IAAkBN,EAAS,KAAK,EAAE;AAC/CM,EAAgB,OAAO;AAAA,EACrB,UAAUC,EAAG;AACf;AAIA,MAAMC,IAAgD,CAACP,MACpD,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,MAEA,UAAC,gBAAAA,EAAAL,GAAA,EAAS,IAAG,YAAY,GAAGE,GAAM;AAAA,IAAA;AAAA,EACpC;AAAA,EACC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAK1B,sZAAA;AAAA,EACF,CAAA,GAGWI,IAAgBD,EAAsB,KAAK,EAAE;AAC1DC,EAAc,OAAO;AAAA,EACnB,UAAUF,EAAG;AACf;"}
|
|
1
|
+
{"version":3,"file":"Checkbox.stories.js","sources":["../../../src/components/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxProps } from './Checkbox';\n\nimport { Checkbox } from './Checkbox';\n\nimport { FormField } from 'components/FormField';\nimport { Label } from 'components/Label';\n\nconst codeString = '<Checkbox checked={} id={} onChange={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Checkbox',\n component: Checkbox,\n parameters: {\n inspectComponent: Checkbox,\n codeString: codeString,\n },\n} as Meta<CheckboxProps>;\n\nconst Template: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <Checkbox id=\"72103b4d\" {...args} />\n <Label htmlFor=\"72103b4d\">Example Checkbox</Label>\n </FormField>\n);\n\nexport const CheckboxExample = Template.bind({});\nCheckboxExample.args = {\n onChange: fn(),\n};\n\n// Extra story created for UX to see how we can solve placement of checkbox when paired with long content\n// TODO: should this component be refactored to always include a label? (see RadioButton)\nconst WithLongLabelTemplate: StoryFn<CheckboxProps> = (args) => (\n <FormField inline>\n <div\n style={{\n alignSelf: 'flex-start',\n marginTop: '0.18rem',\n }}\n >\n <Checkbox id=\"72103b4e\" {...args} />\n </div>\n <Label htmlFor=\"72103b4e\">\n Example Checkbox with long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long long long long long long long long long long long long long\n long long long long long long long long long long long label\n </Label>\n </FormField>\n);\n\nexport const WithLongLabel = WithLongLabelTemplate.bind({});\nWithLongLabel.args = {\n onChange: fn(),\n};\n"],"names":["codeString","Checkbox_stories","Checkbox","Template","args","jsxs","FormField","jsx","Label","CheckboxExample","fn","WithLongLabelTemplate","WithLongLabel"],"mappings":";;;;;AAUA,MAAMA,IAAa,6CAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAmC,CAACC,MACvC,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC,EAACL,GAAS,EAAA,IAAG,YAAY,GAAGE,EAAM,CAAA;AAAA,EACjC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAAgB,oBAAA;AAAA,EAC5C,CAAA,GAGWC,IAAkBN,EAAS,KAAK,EAAE;AAC/CM,EAAgB,OAAO;AAAA,EACrB,UAAUC,EAAG;AACf;AAIA,MAAMC,IAAgD,CAACP,MACpD,gBAAAC,EAAAC,GAAA,EAAU,QAAM,IACf,UAAA;AAAA,EAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,WAAW;AAAA,QACX,WAAW;AAAA,MACb;AAAA,MAEA,UAAC,gBAAAA,EAAAL,GAAA,EAAS,IAAG,YAAY,GAAGE,GAAM;AAAA,IAAA;AAAA,EACpC;AAAA,EACC,gBAAAG,EAAAC,GAAA,EAAM,SAAQ,YAAW,UAK1B,sZAAA;AAAA,EACF,CAAA,GAGWI,IAAgBD,EAAsB,KAAK,EAAE;AAC1DC,EAAc,OAAO;AAAA,EACnB,UAAUF,EAAG;AACf;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
export interface CheckboxButtonProps {
|
|
2
|
+
label: string;
|
|
3
|
+
value: string;
|
|
4
|
+
/** to set default status */
|
|
5
|
+
isChecked?: boolean;
|
|
6
|
+
/** The button variant. */
|
|
7
|
+
variant?: 'single' | 'start' | 'middle' | 'end';
|
|
8
|
+
/** `true` to disable the button; otherwise, `false`. The default is `false`. */
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
/** if set border becomes red */
|
|
11
|
+
notValid?: boolean;
|
|
12
|
+
/** The callback function that is invoked when the checkbox button changes value. */
|
|
13
|
+
onSetValue: (value: string | null) => void;
|
|
14
|
+
}
|
|
15
|
+
/** Represents a component that acts as a checkbox, it's either set or unset. */
|
|
16
|
+
export declare const CheckboxButton: ({ label, value, isChecked, variant, disabled, notValid, onSetValue, }: CheckboxButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsxs as i, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { c as d } from "../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { useId as l, useState as p } from "react";
|
|
4
|
+
import '../../assets/CheckboxButton.css';const t = {
|
|
5
|
+
"checkbox-button__container": "_checkbox-button__container_sep9j_1",
|
|
6
|
+
"checkbox-button": "_checkbox-button_sep9j_1",
|
|
7
|
+
"checkbox-button--not-valid": "_checkbox-button--not-valid_sep9j_62",
|
|
8
|
+
"checkbox-button--single": "_checkbox-button--single_sep9j_72",
|
|
9
|
+
"checkbox-button--start": "_checkbox-button--start_sep9j_76",
|
|
10
|
+
"checkbox-button--middle": "_checkbox-button--middle_sep9j_80",
|
|
11
|
+
"checkbox-button--end": "_checkbox-button--end_sep9j_106"
|
|
12
|
+
}, f = ({
|
|
13
|
+
label: e,
|
|
14
|
+
value: b,
|
|
15
|
+
isChecked: s = !1,
|
|
16
|
+
variant: h = "single",
|
|
17
|
+
disabled: _,
|
|
18
|
+
notValid: u,
|
|
19
|
+
onSetValue: x
|
|
20
|
+
}) => {
|
|
21
|
+
const o = l(), [k, a] = p(s), r = (c) => {
|
|
22
|
+
a(c.target.checked), x(c.target.checked ? c.target.value : null);
|
|
23
|
+
};
|
|
24
|
+
return /* @__PURE__ */ i("span", { className: t["checkbox-button__container"], children: [
|
|
25
|
+
/* @__PURE__ */ n(
|
|
26
|
+
"input",
|
|
27
|
+
{
|
|
28
|
+
type: "checkbox",
|
|
29
|
+
id: `${o}${e}`,
|
|
30
|
+
disabled: _,
|
|
31
|
+
value: b,
|
|
32
|
+
checked: k,
|
|
33
|
+
onChange: r
|
|
34
|
+
}
|
|
35
|
+
),
|
|
36
|
+
/* @__PURE__ */ n(
|
|
37
|
+
"label",
|
|
38
|
+
{
|
|
39
|
+
htmlFor: `${o}${e}`,
|
|
40
|
+
className: d(t["checkbox-button"], t[`checkbox-button--${h}`], {
|
|
41
|
+
[t["checkbox-button--not-valid"]]: u
|
|
42
|
+
}),
|
|
43
|
+
children: e
|
|
44
|
+
}
|
|
45
|
+
)
|
|
46
|
+
] });
|
|
47
|
+
};
|
|
48
|
+
export {
|
|
49
|
+
f as CheckboxButton
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=CheckboxButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxButton.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useId, useState } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from './CheckboxButton.module.css';\n\nexport interface CheckboxButtonProps {\n label: string;\n value: string;\n /** to set default status */\n isChecked?: boolean;\n /** The button variant. */\n variant?: 'single' | 'start' | 'middle' | 'end';\n /** `true` to disable the button; otherwise, `false`. The default is `false`. */\n disabled?: boolean;\n /** if set border becomes red */\n notValid?: boolean;\n /** The callback function that is invoked when the checkbox button changes value. */\n onSetValue: (value: string | null) => void;\n}\n\n/** Represents a component that acts as a checkbox, it's either set or unset. */\nexport const CheckboxButton = ({\n label,\n value,\n isChecked = false,\n variant = 'single',\n disabled,\n notValid,\n onSetValue,\n}: CheckboxButtonProps) => {\n const idPrefix = useId();\n const [checked, setChecked] = useState(isChecked);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setChecked(event.target.checked);\n onSetValue(event.target.checked ? event.target.value : null);\n };\n\n return (\n <span className={styles['checkbox-button__container']}>\n <input\n type=\"checkbox\"\n id={`${idPrefix}${label}`}\n disabled={disabled}\n value={value}\n checked={checked}\n onChange={handleChange}\n />\n <label\n htmlFor={`${idPrefix}${label}`}\n className={clsx(styles['checkbox-button'], styles[`checkbox-button--${variant}`], {\n [styles['checkbox-button--not-valid']]: notValid,\n })}\n >\n {label}\n </label>\n </span>\n );\n};\n"],"names":["CheckboxButton","label","value","isChecked","variant","disabled","notValid","onSetValue","idPrefix","useId","checked","setChecked","useState","handleChange","event","jsxs","styles","jsx","clsx"],"mappings":";;;;;;;;;;;GAuBaA,IAAiB,CAAC;AAAA,EAC7B,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAA2B;AACzB,QAAMC,IAAWC,KACX,CAACC,GAASC,CAAU,IAAIC,EAAST,CAAS,GAE1CU,IAAe,CAACC,MAAyC;AAClD,IAAAH,EAAAG,EAAM,OAAO,OAAO,GAC/BP,EAAWO,EAAM,OAAO,UAAUA,EAAM,OAAO,QAAQ,IAAI;AAAA,EAAA;AAG7D,SACG,gBAAAC,EAAA,QAAA,EAAK,WAAWC,EAAO,4BAA4B,GAClD,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,IAAI,GAAGT,CAAQ,GAAGP,CAAK;AAAA,QACvB,UAAAI;AAAA,QACA,OAAAH;AAAA,QACA,SAAAQ;AAAA,QACA,UAAUG;AAAA,MAAA;AAAA,IACZ;AAAA,IACA,gBAAAI;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAS,GAAGT,CAAQ,GAAGP,CAAK;AAAA,QAC5B,WAAWiB,EAAKF,EAAO,iBAAiB,GAAGA,EAAO,oBAAoBZ,CAAO,EAAE,GAAG;AAAA,UAChF,CAACY,EAAO,4BAA4B,CAAC,GAAGV;AAAA,QAAA,CACzC;AAAA,QAEA,UAAAL;AAAA,MAAA;AAAA,IACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react';
|
|
2
|
+
import { CheckboxButtonProps } from './CheckboxButton';
|
|
3
|
+
declare const _default: Meta<CheckboxButtonProps>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const CheckboxButtonExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonProps>;
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { fn as n } from "../../index-MQ0yPLdl.js";
|
|
3
|
+
import { CheckboxButton as o } from "./CheckboxButton.js";
|
|
4
|
+
const a = "<CheckboxButton label={} value={} isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />", b = {
|
|
5
|
+
title: "Atoms/CheckboxButton",
|
|
6
|
+
component: o,
|
|
7
|
+
argTypes: {
|
|
8
|
+
label: {
|
|
9
|
+
control: "text"
|
|
10
|
+
},
|
|
11
|
+
value: {
|
|
12
|
+
control: "string"
|
|
13
|
+
},
|
|
14
|
+
isChecked: {
|
|
15
|
+
control: "boolean"
|
|
16
|
+
},
|
|
17
|
+
variant: {
|
|
18
|
+
options: ["single", "start", "middle", "end"],
|
|
19
|
+
control: "radio"
|
|
20
|
+
},
|
|
21
|
+
disabled: {
|
|
22
|
+
control: "boolean"
|
|
23
|
+
},
|
|
24
|
+
notValid: {
|
|
25
|
+
control: "boolean"
|
|
26
|
+
},
|
|
27
|
+
onSetValue: {
|
|
28
|
+
table: {
|
|
29
|
+
disable: !0
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
parameters: {
|
|
34
|
+
inspectComponent: o,
|
|
35
|
+
codeString: a
|
|
36
|
+
}
|
|
37
|
+
}, l = (t) => /* @__PURE__ */ e(o, { ...t }), r = l.bind({});
|
|
38
|
+
r.args = {
|
|
39
|
+
label: "1.2",
|
|
40
|
+
value: "1.2",
|
|
41
|
+
variant: "single",
|
|
42
|
+
onSetValue: n()
|
|
43
|
+
};
|
|
44
|
+
export {
|
|
45
|
+
r as CheckboxButtonExample,
|
|
46
|
+
b as default
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=CheckboxButton.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxButton.stories.js","sources":["../../../src/components/CheckboxButton/CheckboxButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonProps } from './CheckboxButton';\n\nimport { CheckboxButton } from './CheckboxButton';\n\nconst codeString =\n '<CheckboxButton label={} value={} isChecked={} variant={} disabled={} notValid={} onSetValue={} key={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/CheckboxButton',\n component: CheckboxButton,\n argTypes: {\n label: {\n control: 'text',\n },\n value: {\n control: 'string',\n },\n isChecked: {\n control: 'boolean',\n },\n variant: {\n options: ['single', 'start', 'middle', 'end'],\n control: 'radio',\n },\n disabled: {\n control: 'boolean',\n },\n notValid: {\n control: 'boolean',\n },\n onSetValue: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: CheckboxButton,\n codeString: codeString,\n },\n} as Meta<CheckboxButtonProps>;\n\nconst Template: StoryFn<CheckboxButtonProps> = (args) => <CheckboxButton {...args} />;\n\nexport const CheckboxButtonExample = Template.bind({});\nCheckboxButtonExample.args = {\n label: '1.2',\n value: '1.2',\n variant: 'single',\n onSetValue: fn(),\n};\n"],"names":["codeString","CheckboxButton_stories","CheckboxButton","Template","args","jsx","CheckboxButtonExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,6GAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,WAAW;AAAA,MACT,SAAS;AAAA,IACX;AAAA,IACA,SAAS;AAAA,MACP,SAAS,CAAC,UAAU,SAAS,UAAU,KAAK;AAAA,MAC5C,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAAyC,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAgB,GAAGE,EAAM,CAAA,GAEtEE,IAAwBH,EAAS,KAAK,EAAE;AACrDG,EAAsB,OAAO;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,SAAS;AAAA,EACT,YAAYC,EAAG;AACjB;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './CheckboxButton';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
type CheckboxProps = {
|
|
2
|
+
label: string;
|
|
3
|
+
value: string;
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
};
|
|
6
|
+
export interface CheckboxButtonBarProps {
|
|
7
|
+
/** array with objects with label, value */
|
|
8
|
+
checkboxes: CheckboxProps[];
|
|
9
|
+
defaultValues?: string[];
|
|
10
|
+
label?: string;
|
|
11
|
+
/** 'top' | 'left' */
|
|
12
|
+
labelPosition?: 'top' | 'left';
|
|
13
|
+
required?: boolean;
|
|
14
|
+
/** error text to display if set */
|
|
15
|
+
notValidatedText?: string;
|
|
16
|
+
/** disables all checkboxes in the bar */
|
|
17
|
+
disableGroup?: boolean;
|
|
18
|
+
onSetValues: (value: string[]) => void;
|
|
19
|
+
}
|
|
20
|
+
/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */
|
|
21
|
+
export declare const CheckboxButtonBar: ({ checkboxes, defaultValues, label, labelPosition, required, notValidatedText, disableGroup, onSetValues, }: CheckboxButtonBarProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export {};
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { jsxs as a, jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as d } from "react";
|
|
3
|
+
import { c as g } from "../../clsx-OuTLNxxd.js";
|
|
4
|
+
import { CheckboxButton as w } from "../CheckboxButton/CheckboxButton.js";
|
|
5
|
+
import { Label as C } from "../Label/Label.js";
|
|
6
|
+
import { Icon as N } from "../Icon/Icon.js";
|
|
7
|
+
import '../../assets/CheckboxButtonBar.css';const n = {
|
|
8
|
+
"checkbox-button-bar__container": "_checkbox-button-bar__container_1b278_1",
|
|
9
|
+
"checkbox-button-bar__container--label-left": "_checkbox-button-bar__container--label-left_1b278_6",
|
|
10
|
+
"checkbox-button-bar__container--label-top": "_checkbox-button-bar__container--label-top_1b278_12",
|
|
11
|
+
"checkbox-button-bar__row-container": "_checkbox-button-bar__row-container_1b278_19",
|
|
12
|
+
"checkbox-button-bar__row": "_checkbox-button-bar__row_1b278_19",
|
|
13
|
+
"checkbox-button-bar__error": "_checkbox-button-bar__error_1b278_30"
|
|
14
|
+
}, y = ({
|
|
15
|
+
checkboxes: i,
|
|
16
|
+
defaultValues: t,
|
|
17
|
+
label: l,
|
|
18
|
+
labelPosition: s = "top",
|
|
19
|
+
required: h = !1,
|
|
20
|
+
notValidatedText: b = "",
|
|
21
|
+
disableGroup: u = !1,
|
|
22
|
+
onSetValues: m
|
|
23
|
+
}) => {
|
|
24
|
+
const e = d(t ? t.map(String) : []), x = (o, r) => {
|
|
25
|
+
o === null ? e.current = e.current.filter((_) => _ !== r) : e.current = [...e.current, r], m(e.current);
|
|
26
|
+
}, k = (o, r) => o === 0 && r !== 1 ? "start" : o < r - 1 ? "middle" : r === 1 ? "single" : "end";
|
|
27
|
+
return /* @__PURE__ */ a(
|
|
28
|
+
"div",
|
|
29
|
+
{
|
|
30
|
+
className: g(
|
|
31
|
+
n["checkbox-button-bar__container"],
|
|
32
|
+
n[`checkbox-button-bar__container--label-${s}`]
|
|
33
|
+
),
|
|
34
|
+
children: [
|
|
35
|
+
l && /* @__PURE__ */ c(C, { htmlFor: "", required: h, children: l }),
|
|
36
|
+
/* @__PURE__ */ a("div", { className: n["checkbox-button-bar__row-container"], children: [
|
|
37
|
+
/* @__PURE__ */ c("div", { className: n["checkbox-button-bar__row"], children: i.map(({ label: o, value: r, disabled: _ }, f) => /* @__PURE__ */ c(
|
|
38
|
+
w,
|
|
39
|
+
{
|
|
40
|
+
label: o,
|
|
41
|
+
value: r,
|
|
42
|
+
isChecked: t ? t.includes(r) : !1,
|
|
43
|
+
variant: k(f, i.length),
|
|
44
|
+
disabled: _ || u,
|
|
45
|
+
notValid: b !== "",
|
|
46
|
+
onSetValue: (p) => x(p, r)
|
|
47
|
+
},
|
|
48
|
+
`${r}`
|
|
49
|
+
)) }),
|
|
50
|
+
b !== "" && /* @__PURE__ */ a("div", { className: n["checkbox-button-bar__error"], children: [
|
|
51
|
+
/* @__PURE__ */ c(N, { name: "ExclamationTriangleFill", size: 24 }),
|
|
52
|
+
b
|
|
53
|
+
] })
|
|
54
|
+
] })
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
export {
|
|
60
|
+
y as CheckboxButtonBar
|
|
61
|
+
};
|
|
62
|
+
//# sourceMappingURL=CheckboxButtonBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxButtonBar.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport type { CheckboxButtonProps } from 'components/CheckboxButton';\n\nimport styles from './CheckboxButtonBar.module.css';\n\nimport { CheckboxButton } from 'components/CheckboxButton';\nimport { Label } from 'components/Label';\nimport { Icon } from 'components/Icon';\n\ntype CheckboxProps = {\n label: string;\n value: string;\n disabled?: boolean;\n};\n\nexport interface CheckboxButtonBarProps {\n /** array with objects with label, value */\n checkboxes: CheckboxProps[];\n //** array with values */\n defaultValues?: string[];\n label?: string;\n /** 'top' | 'left' */\n labelPosition?: 'top' | 'left';\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** disables all checkboxes in the bar */\n disableGroup?: boolean;\n onSetValues: (value: string[]) => void;\n}\n\n/** Represents a component that shows a collection of [CheckboxButton](/story/atoms-checkboxbutton--checkbox-button-example)s. */\nexport const CheckboxButtonBar = ({\n checkboxes,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n disableGroup = false,\n onSetValues,\n}: CheckboxButtonBarProps) => {\n const values = useRef<string[]>(defaultValues ? defaultValues.map(String) : []);\n\n const handleChange = (setValue: string | null, value: string) => {\n if (setValue === null) {\n values.current = values.current.filter((val) => val !== value);\n } else {\n values.current = [...values.current, value];\n }\n onSetValues(values.current);\n };\n\n const getVariant = (index: number, totalItems: number): CheckboxButtonProps['variant'] => {\n if (index === 0 && totalItems !== 1) {\n return 'start';\n } else if (index < totalItems - 1) {\n return 'middle';\n } else if (totalItems === 1) {\n return 'single';\n } else {\n return 'end';\n }\n };\n\n return (\n <div\n className={clsx(\n styles['checkbox-button-bar__container'],\n styles[`checkbox-button-bar__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['checkbox-button-bar__row-container']}>\n <div className={styles['checkbox-button-bar__row']}>\n {checkboxes.map(({ label, value, disabled }, index) => (\n <CheckboxButton\n key={`${value}`}\n label={label}\n value={value}\n isChecked={defaultValues ? defaultValues.includes(value) : false}\n variant={getVariant(index, checkboxes.length)}\n disabled={disabled || disableGroup}\n notValid={notValidatedText !== ''}\n onSetValue={(newValue) => handleChange(newValue, value)}\n />\n ))}\n </div>\n {notValidatedText !== '' && (\n <div className={styles['checkbox-button-bar__error']}>\n <Icon name=\"ExclamationTriangleFill\" size={24} />\n {notValidatedText}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxButtonBar","checkboxes","defaultValues","label","labelPosition","required","notValidatedText","disableGroup","onSetValues","values","useRef","handleChange","setValue","value","val","getVariant","index","totalItems","jsxs","clsx","styles","jsx","Label","disabled","CheckboxButton","newValue","Icon"],"mappings":";;;;;;;;;;;;;GAkCaA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,cAAAC,IAAe;AAAA,EACf,aAAAC;AACF,MAA8B;AACtB,QAAAC,IAASC,EAAiBR,IAAgBA,EAAc,IAAI,MAAM,IAAI,CAAA,CAAE,GAExES,IAAe,CAACC,GAAyBC,MAAkB;AAC/D,IAAID,MAAa,OACfH,EAAO,UAAUA,EAAO,QAAQ,OAAO,CAACK,MAAQA,MAAQD,CAAK,IAE7DJ,EAAO,UAAU,CAAC,GAAGA,EAAO,SAASI,CAAK,GAE5CL,EAAYC,EAAO,OAAO;AAAA,EAAA,GAGtBM,IAAa,CAACC,GAAeC,MAC7BD,MAAU,KAAKC,MAAe,IACzB,UACED,IAAQC,IAAa,IACvB,WACEA,MAAe,IACjB,WAEA;AAKT,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTC,EAAO,gCAAgC;AAAA,QACvCA,EAAO,yCAAyChB,CAAa,EAAE;AAAA,MACjE;AAAA,MAEC,UAAA;AAAA,QAAAD,KACE,gBAAAkB,EAAAC,GAAA,EAAM,SAAQ,IAAG,UAAAjB,GACf,UACHF,GAAA;AAAA,QAED,gBAAAe,EAAA,OAAA,EAAI,WAAWE,EAAO,oCAAoC,GACzD,UAAA;AAAA,UAAA,gBAAAC,EAAC,OAAI,EAAA,WAAWD,EAAO,0BAA0B,GAC9C,UAAWnB,EAAA,IAAI,CAAC,EAAE,OAAAE,GAAO,OAAAU,GAAO,UAAAU,EAAA,GAAYP,MAC3C,gBAAAK;AAAA,YAACG;AAAA,YAAA;AAAA,cAEC,OAAOrB;AAAAA,cACP,OAAAU;AAAA,cACA,WAAWX,IAAgBA,EAAc,SAASW,CAAK,IAAI;AAAA,cAC3D,SAASE,EAAWC,GAAOf,EAAW,MAAM;AAAA,cAC5C,UAAUsB,KAAYhB;AAAA,cACtB,UAAUD,MAAqB;AAAA,cAC/B,YAAY,CAACmB,MAAad,EAAac,GAAUZ,CAAK;AAAA,YAAA;AAAA,YAPjD,GAAGA,CAAK;AAAA,UAShB,CAAA,GACH;AAAA,UACCP,MAAqB,MACpB,gBAAAY,EAAC,SAAI,WAAWE,EAAO,4BAA4B,GACjD,UAAA;AAAA,YAAA,gBAAAC,EAACK,GAAK,EAAA,MAAK,2BAA0B,MAAM,IAAI;AAAA,YAC9CpB;AAAA,UAAA,GACH;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { Meta } from '@storybook/react';
|
|
2
|
+
import { CheckboxButtonBarProps } from './CheckboxButtonBar';
|
|
3
|
+
declare const _default: Meta<CheckboxButtonBarProps>;
|
|
4
|
+
export default _default;
|
|
5
|
+
export declare const CheckboxButtonBarExample: import('@storybook/csf').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, CheckboxButtonBarProps>;
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { fn as l } from "../../index-MQ0yPLdl.js";
|
|
3
|
+
import { CheckboxButtonBar as e } from "./CheckboxButtonBar.js";
|
|
4
|
+
const a = "<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />", i = {
|
|
5
|
+
title: "Molecules/CheckboxButtonBar",
|
|
6
|
+
component: e,
|
|
7
|
+
argTypes: {
|
|
8
|
+
checkboxes: {
|
|
9
|
+
table: {
|
|
10
|
+
disable: !0
|
|
11
|
+
}
|
|
12
|
+
},
|
|
13
|
+
defaultValues: {
|
|
14
|
+
table: {
|
|
15
|
+
disable: !0
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
label: {
|
|
19
|
+
control: "text"
|
|
20
|
+
},
|
|
21
|
+
labelPosition: {
|
|
22
|
+
control: "radio",
|
|
23
|
+
options: ["top", "left"]
|
|
24
|
+
},
|
|
25
|
+
required: {
|
|
26
|
+
control: "boolean"
|
|
27
|
+
},
|
|
28
|
+
notValidatedText: {
|
|
29
|
+
control: "text"
|
|
30
|
+
},
|
|
31
|
+
disableGroup: {
|
|
32
|
+
control: "boolean"
|
|
33
|
+
},
|
|
34
|
+
onSetValues: {
|
|
35
|
+
table: {
|
|
36
|
+
disable: !0
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
parameters: {
|
|
41
|
+
inspectComponent: e,
|
|
42
|
+
codeString: a
|
|
43
|
+
}
|
|
44
|
+
}, r = (o) => /* @__PURE__ */ t(e, { ...o }), n = r.bind({});
|
|
45
|
+
n.args = {
|
|
46
|
+
label: "Periode",
|
|
47
|
+
required: !0,
|
|
48
|
+
checkboxes: [
|
|
49
|
+
{
|
|
50
|
+
label: "1.1",
|
|
51
|
+
value: "1"
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
label: "1.2",
|
|
55
|
+
value: "2"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
label: "1.3",
|
|
59
|
+
value: "3"
|
|
60
|
+
}
|
|
61
|
+
],
|
|
62
|
+
defaultValues: ["1", "2"],
|
|
63
|
+
labelPosition: "top",
|
|
64
|
+
onSetValues: l()
|
|
65
|
+
};
|
|
66
|
+
export {
|
|
67
|
+
n as CheckboxButtonBarExample,
|
|
68
|
+
i as default
|
|
69
|
+
};
|
|
70
|
+
//# sourceMappingURL=CheckboxButtonBar.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CheckboxButtonBar.stories.js","sources":["../../../src/components/CheckboxButtonBar/CheckboxButtonBar.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { CheckboxButtonBarProps } from './CheckboxButtonBar';\n\nimport { CheckboxButtonBar } from './CheckboxButtonBar';\n\nconst codeString =\n '<CheckboxButtonBar checkboxes={} defaultValues={} label={} labelPosition={} required={} notValidatedText={} disableGroup={} onSetValues={} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/CheckboxButtonBar',\n component: CheckboxButtonBar,\n argTypes: {\n checkboxes: {\n table: {\n disable: true,\n },\n },\n defaultValues: {\n table: {\n disable: true,\n },\n },\n label: {\n control: 'text',\n },\n labelPosition: {\n control: 'radio',\n options: ['top', 'left'],\n },\n required: {\n control: 'boolean',\n },\n notValidatedText: {\n control: 'text',\n },\n disableGroup: {\n control: 'boolean',\n },\n onSetValues: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: CheckboxButtonBar,\n codeString: codeString,\n },\n} as Meta<CheckboxButtonBarProps>;\n\nconst Template: StoryFn<CheckboxButtonBarProps> = (args) => <CheckboxButtonBar {...args} />;\n\nexport const CheckboxButtonBarExample = Template.bind({});\nCheckboxButtonBarExample.args = {\n label: 'Periode',\n required: true,\n checkboxes: [\n {\n label: '1.1',\n value: '1',\n },\n {\n label: '1.2',\n value: '2',\n },\n {\n label: '1.3',\n value: '3',\n },\n ],\n defaultValues: ['1', '2'],\n labelPosition: 'top',\n onSetValues: fn(),\n};\n"],"names":["codeString","CheckboxButtonBar_stories","CheckboxButtonBar","Template","args","jsx","CheckboxButtonBarExample","fn"],"mappings":";;;AAOA,MAAMA,IACJ,iJAGaC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,eAAe;AAAA,MACb,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,SAAS;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,MACT,SAAS,CAAC,OAAO,MAAM;AAAA,IACzB;AAAA,IACA,UAAU;AAAA,MACR,SAAS;AAAA,IACX;AAAA,IACA,kBAAkB;AAAA,MAChB,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,IACA,aAAa;AAAA,MACX,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EACF;AACF,GAEMG,IAA4C,CAACC,MAAU,gBAAAC,EAAAH,GAAA,EAAmB,GAAGE,EAAM,CAAA,GAE5EE,IAA2BH,EAAS,KAAK,EAAE;AACxDG,EAAyB,OAAO;AAAA,EAC9B,OAAO;AAAA,EACP,UAAU;AAAA,EACV,YAAY;AAAA,IACV;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,eAAe,CAAC,KAAK,GAAG;AAAA,EACxB,eAAe;AAAA,EACf,aAAaC,EAAG;AAClB;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './CheckboxButtonBar';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -8,13 +8,15 @@ type CheckboxBranch = {
|
|
|
8
8
|
children: CheckboxLeaf[];
|
|
9
9
|
};
|
|
10
10
|
export interface CheckboxTreeProps {
|
|
11
|
+
/** The title of the component. */
|
|
11
12
|
title?: string;
|
|
12
|
-
/**
|
|
13
|
+
/** Array of checkbox groups with a label and array of children (itemName, itemValue and disabled boolean). */
|
|
13
14
|
checkboxTree: CheckboxBranch[];
|
|
14
|
-
/**
|
|
15
|
+
/** Array of selected values. */
|
|
15
16
|
defaultValue?: string[];
|
|
16
|
-
/**
|
|
17
|
+
/** Returns array of selected values. */
|
|
17
18
|
onChange?: (value: string[]) => void;
|
|
18
19
|
}
|
|
20
|
+
/** Represents a component to render a tree of checkboxes. */
|
|
19
21
|
export declare const CheckboxTree: ({ title, checkboxTree, defaultValue, onChange }: CheckboxTreeProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
22
|
export {};
|