@uva-glass/component-library 1.47.6 → 1.47.8
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/components/Accordion/Accordion.stories.js +1 -1
- package/dist/components/Accordion/Accordion.stories.js.map +1 -1
- package/dist/components/Backdrop/Backdrop.stories.js +1 -1
- package/dist/components/Backdrop/Backdrop.stories.js.map +1 -1
- package/dist/components/ButtonGroup/ButtonGroup.stories.js +20 -12
- package/dist/components/ButtonGroup/ButtonGroup.stories.js.map +1 -1
- package/dist/components/Drawer/Drawer.stories.js +35 -25
- package/dist/components/Drawer/Drawer.stories.js.map +1 -1
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.js +9 -6
- package/dist/components/EmptyStateDataDisplay/EmptyStateDataDisplay.stories.js.map +1 -1
- package/dist/components/FeedbackBox/FeedbackBox.stories.js +1 -1
- package/dist/components/FeedbackBox/FeedbackBox.stories.js.map +1 -1
- package/dist/components/Fieldset/Fieldset.stories.js +1 -1
- package/dist/components/Fieldset/Fieldset.stories.js.map +1 -1
- package/dist/components/FormField/FormField.stories.js +1 -1
- package/dist/components/FormField/FormField.stories.js.map +1 -1
- package/dist/components/GridRow/GridRow.stories.js +26 -18
- package/dist/components/GridRow/GridRow.stories.js.map +1 -1
- package/dist/components/Icon/Icon.stories.js +1 -1
- package/dist/components/Icon/Icon.stories.js.map +1 -1
- package/dist/components/InputField/InputField.stories.js +1 -1
- package/dist/components/InputField/InputField.stories.js.map +1 -1
- package/dist/components/MetaDataList/MetaDataList.stories.js +1 -1
- package/dist/components/MetaDataList/MetaDataList.stories.js.map +1 -1
- package/dist/components/ModalDialog/ModalDialog.stories.js +32 -24
- package/dist/components/ModalDialog/ModalDialog.stories.js.map +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.js.map +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js +1 -1
- package/dist/components/OverlayCloseButton/OverlayCloseButton.stories.js.map +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js.map +1 -1
- package/dist/components/Repeater/Repeater.stories.js +1 -1
- package/dist/components/Repeater/Repeater.stories.js.map +1 -1
- package/dist/components/SelectListbox/SelectListBox.stories.js +21 -13
- package/dist/components/SelectListbox/SelectListBox.stories.js.map +1 -1
- package/dist/components/StatusPill/StatusPill.stories.js +9 -6
- package/dist/components/StatusPill/StatusPill.stories.js.map +1 -1
- package/dist/components/Tooltip/Tooltip.stories.js +1 -1
- package/dist/components/Tooltip/Tooltip.stories.js.map +1 -1
- package/dist/{components/storyComponents → storyComponents}/ClipboardButton/ClipboardButton.js +1 -1
- package/dist/storyComponents/ClipboardButton/ClipboardButton.js.map +1 -0
- package/dist/{components/storyComponents → storyComponents}/Container/Container.js +2 -2
- package/dist/storyComponents/Container/Container.js.map +1 -0
- package/package.json +6 -6
- package/dist/components/storyComponents/ClipboardButton/ClipboardButton.js.map +0 -1
- package/dist/components/storyComponents/Container/Container.js.map +0 -1
- /package/dist/{components/storyComponents → storyComponents}/ClipboardButton/ClipboardButton.d.ts +0 -0
- /package/dist/{components/storyComponents → storyComponents}/ClipboardButton/index.d.ts +0 -0
- /package/dist/{components/storyComponents → storyComponents}/ClipboardButton/index.js +0 -0
- /package/dist/{components/storyComponents → storyComponents}/ClipboardButton/index.js.map +0 -0
- /package/dist/{components/storyComponents → storyComponents}/Container/Container.d.ts +0 -0
- /package/dist/{components/storyComponents → storyComponents}/Container/index.d.ts +0 -0
- /package/dist/{components/storyComponents → storyComponents}/Container/index.js +0 -0
- /package/dist/{components/storyComponents → storyComponents}/Container/index.js.map +0 -0
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { ModalProvider as
|
|
2
|
+
import { ModalProvider as n } from "@react-aria/overlays";
|
|
3
3
|
import { f as i } from "../../index-CuON43Qx.js";
|
|
4
|
-
import { ModalDialog as
|
|
5
|
-
import { Button as
|
|
4
|
+
import { ModalDialog as o } from "./ModalDialog.js";
|
|
5
|
+
import { Button as l } from "../Button/Button.js";
|
|
6
6
|
import { ButtonGroup as m } from "../ButtonGroup/ButtonGroup.js";
|
|
7
|
-
import { FormField as
|
|
7
|
+
import { FormField as r } from "../FormField/FormField.js";
|
|
8
8
|
import { InputField as d } from "../InputField/InputField.js";
|
|
9
9
|
import { Label as c } from "../Label/Label.js";
|
|
10
|
-
const
|
|
10
|
+
const p = `
|
|
11
|
+
/* ModalDialog has more styling props (see Info-tab).
|
|
12
|
+
Code example is made with the most commonly used props. **/
|
|
13
|
+
<ModalDialog isOpen={isOpen} title={title} onClose={onCloseFunction}
|
|
14
|
+
onSubmit={onSubmitFunction} buttons={buttons}> {children} </ModalDialog>
|
|
15
|
+
`, F = {
|
|
11
16
|
title: "Molecules/ModalDialog",
|
|
12
|
-
component:
|
|
17
|
+
component: o,
|
|
13
18
|
argTypes: {
|
|
14
19
|
isOpen: {
|
|
15
20
|
table: {
|
|
@@ -38,11 +43,14 @@ const S = {
|
|
|
38
43
|
disable: !0
|
|
39
44
|
}
|
|
40
45
|
}
|
|
46
|
+
},
|
|
47
|
+
parameters: {
|
|
48
|
+
codeString: p
|
|
41
49
|
}
|
|
42
|
-
}, u = (t) => /* @__PURE__ */ e(
|
|
50
|
+
}, u = (t) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(o, { ...t, children: /* @__PURE__ */ a(r, { outerSpace: !0, children: [
|
|
43
51
|
/* @__PURE__ */ e(c, { htmlFor: "text-field", children: "Example Text Field" }),
|
|
44
52
|
/* @__PURE__ */ e(d, { id: "text-field" })
|
|
45
|
-
] }) }) }),
|
|
53
|
+
] }) }) }), s = {
|
|
46
54
|
padded: !1,
|
|
47
55
|
slim: !1,
|
|
48
56
|
wide: !1,
|
|
@@ -55,32 +63,32 @@ const S = {
|
|
|
55
63
|
onSubmit: i(),
|
|
56
64
|
onClose: i(),
|
|
57
65
|
buttons: /* @__PURE__ */ a(m, { reversed: !0, children: [
|
|
58
|
-
/* @__PURE__ */ e(
|
|
59
|
-
/* @__PURE__ */ e(
|
|
66
|
+
/* @__PURE__ */ e(l, { variant: "primary", onClick: i(), children: "OK" }),
|
|
67
|
+
/* @__PURE__ */ e(l, { variant: "secondary", onClick: i(), children: "Cancel" })
|
|
60
68
|
] }),
|
|
61
69
|
isOpen: !0
|
|
62
|
-
},
|
|
63
|
-
p.args = {
|
|
64
|
-
...l
|
|
65
|
-
};
|
|
66
|
-
const b = u.bind({});
|
|
70
|
+
}, b = u.bind({});
|
|
67
71
|
b.args = {
|
|
68
|
-
...
|
|
72
|
+
...s
|
|
73
|
+
};
|
|
74
|
+
const g = u.bind({});
|
|
75
|
+
g.args = {
|
|
76
|
+
...s,
|
|
69
77
|
isLoading: !0,
|
|
70
78
|
spinnerAriaValueText: "Loading"
|
|
71
79
|
};
|
|
72
|
-
const
|
|
80
|
+
const f = (t) => /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(o, { ...t, children: /* @__PURE__ */ a(r, { outerSpace: !0, children: [
|
|
73
81
|
/* @__PURE__ */ e("div", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla. Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod. Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae ultrices erat." }),
|
|
74
82
|
/* @__PURE__ */ e("div", { children: "Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non, vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut sapien tempor, a ornare ipsum faucibus." })
|
|
75
|
-
] }) }) }),
|
|
76
|
-
|
|
77
|
-
...
|
|
83
|
+
] }) }) }), h = f.bind({});
|
|
84
|
+
h.args = {
|
|
85
|
+
...s,
|
|
78
86
|
noButtonBorder: !0
|
|
79
87
|
};
|
|
80
88
|
export {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
89
|
+
g as Loading,
|
|
90
|
+
b as ModalDialogExample,
|
|
91
|
+
h as WithLongContentAndNoBorder,
|
|
92
|
+
F as default
|
|
85
93
|
};
|
|
86
94
|
//# sourceMappingURL=ModalDialog.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalDialog.stories.js","sources":["../../../src/components/ModalDialog/ModalDialog.stories.tsx"],"sourcesContent":["import { ModalProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ModalDialogProps } from './ModalDialog';\n\nimport { ModalDialog } from './ModalDialog';\n\nimport { Button } from 'components/Button';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { FormField } from 'components/FormField';\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/ModalDialog',\n component: ModalDialog,\n argTypes: {\n isOpen: {\n table: {\n disable: true,\n },\n },\n noValidate: {\n control: 'boolean',\n },\n role: {\n control: 'radio',\n options: ['dialog', 'alertdialog'],\n },\n onSubmit: {\n table: {\n disable: true,\n },\n },\n onClose: {\n table: {\n disable: true,\n },\n },\n buttons: {\n table: {\n disable: true,\n },\n },\n },\n} as Meta<ModalDialogProps>;\n\nconst Template: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n <ModalProvider>\n <ModalDialog {...args}>\n <FormField outerSpace>\n <Label htmlFor=\"text-field\">Example Text Field</Label>\n <InputField id=\"text-field\" />\n </FormField>\n </ModalDialog>\n </ModalProvider>\n);\n\nconst defaultArgs: Partial<ModalDialogProps> = {\n padded: false,\n slim: false,\n wide: false,\n noButtonBorder: false,\n variant: 'dialog',\n role: 'dialog',\n title: 'Example Title',\n closeButtonAriaValueText: 'Close',\n noValidate: false,\n onSubmit: fn(),\n onClose: fn(),\n buttons: (\n <ButtonGroup reversed>\n <Button variant=\"primary\" onClick={fn()}>\n OK\n </Button>\n <Button variant=\"secondary\" onClick={fn()}>\n Cancel\n </Button>\n </ButtonGroup>\n ),\n isOpen: true,\n};\n\nexport const ModalDialogExample = Template.bind({});\nModalDialogExample.args = {\n ...defaultArgs,\n};\n\nexport const Loading = Template.bind({});\nLoading.args = {\n ...defaultArgs,\n isLoading: true,\n spinnerAriaValueText: 'Loading',\n};\n\nconst LongContentTemplate: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n <ModalProvider>\n <ModalDialog {...args}>\n <FormField outerSpace>\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla.\n Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut\n fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod.\n Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet\n dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac\n molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit\n consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus\n neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae\n ultrices erat.\n </div>\n <div>\n Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam\n porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac\n diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non,\n vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut\n sapien tempor, a ornare ipsum faucibus.\n </div>\n </FormField>\n </ModalDialog>\n </ModalProvider>\n);\n\nexport const WithLongContentAndNoBorder = LongContentTemplate.bind({});\nWithLongContentAndNoBorder.args = {\n ...defaultArgs,\n noButtonBorder: true,\n};\n"],"names":["ModalDialog_stories","ModalDialog","Template","args","jsx","ModalProvider","jsxs","FormField","Label","InputField","defaultArgs","fn","ButtonGroup","Button","ModalDialogExample","Loading","LongContentTemplate","WithLongContentAndNoBorder"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ModalDialog.stories.js","sources":["../../../src/components/ModalDialog/ModalDialog.stories.tsx"],"sourcesContent":["import { ModalProvider } from '@react-aria/overlays';\nimport { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ModalDialogProps } from './ModalDialog';\n\nimport { ModalDialog } from './ModalDialog';\n\nimport { Button } from 'components/Button';\nimport { ButtonGroup } from 'components/ButtonGroup';\nimport { FormField } from 'components/FormField';\nimport { InputField } from 'components/InputField';\nimport { Label } from 'components/Label';\n\nconst codeString = `\n/* ModalDialog has more styling props (see Info-tab).\n Code example is made with the most commonly used props. **/\n <ModalDialog isOpen={isOpen} title={title} onClose={onCloseFunction}\n onSubmit={onSubmitFunction} buttons={buttons}> {children} </ModalDialog>\n`;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Molecules/ModalDialog',\n component: ModalDialog,\n argTypes: {\n isOpen: {\n table: {\n disable: true,\n },\n },\n noValidate: {\n control: 'boolean',\n },\n role: {\n control: 'radio',\n options: ['dialog', 'alertdialog'],\n },\n onSubmit: {\n table: {\n disable: true,\n },\n },\n onClose: {\n table: {\n disable: true,\n },\n },\n buttons: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n codeString: codeString,\n },\n} as Meta<ModalDialogProps>;\n\nconst Template: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n <ModalProvider>\n <ModalDialog {...args}>\n <FormField outerSpace>\n <Label htmlFor=\"text-field\">Example Text Field</Label>\n <InputField id=\"text-field\" />\n </FormField>\n </ModalDialog>\n </ModalProvider>\n);\n\nconst defaultArgs: Partial<ModalDialogProps> = {\n padded: false,\n slim: false,\n wide: false,\n noButtonBorder: false,\n variant: 'dialog',\n role: 'dialog',\n title: 'Example Title',\n closeButtonAriaValueText: 'Close',\n noValidate: false,\n onSubmit: fn(),\n onClose: fn(),\n buttons: (\n <ButtonGroup reversed>\n <Button variant=\"primary\" onClick={fn()}>\n OK\n </Button>\n <Button variant=\"secondary\" onClick={fn()}>\n Cancel\n </Button>\n </ButtonGroup>\n ),\n isOpen: true,\n};\n\nexport const ModalDialogExample = Template.bind({});\nModalDialogExample.args = {\n ...defaultArgs,\n};\n\nexport const Loading = Template.bind({});\nLoading.args = {\n ...defaultArgs,\n isLoading: true,\n spinnerAriaValueText: 'Loading',\n};\n\nconst LongContentTemplate: StoryFn<ModalDialogProps> = (args: ModalDialogProps) => (\n <ModalProvider>\n <ModalDialog {...args}>\n <FormField outerSpace>\n <div>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac dui et nibh eleifend ultricies a id nulla.\n Pellentesque eleifend sem a tellus dictum tempus. Proin non leo id risus placerat vulputate at ac erat. Ut\n fringilla imperdiet sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n cubilia curae; Cras molestie ante ac magna ornare rhoncus non at quam. Mauris elementum luctus euismod.\n Pellentesque molestie malesuada purus, sed egestas lacus interdum sit amet. Morbi blandit lacus sit amet\n dictum pulvinar. Ut semper nunc ac enim imperdiet, non interdum diam gravida. In nunc tortor, mollis ac\n molestie dignissim, elementum sed quam. Suspendisse mollis venenatis libero, pellentesque vestibulum elit\n consequat et. Aliquam fringilla tellus id libero tempus, sit amet suscipit augue tristique. Quisque cursus\n neque vel justo tristique, eget semper turpis elementum. Etiam venenatis mattis sapien ac mattis. Mauris vitae\n ultrices erat.\n </div>\n <div>\n Aliquam facilisis massa sed justo rhoncus bibendum. Sed lobortis urna orci, vitae porta leo placerat nec. Nam\n porta porttitor ornare. Suspendisse vehicula nunc nec egestas finibus. Aliquam non luctus risus. Phasellus ac\n diam tincidunt, bibendum sem eget, sollicitudin neque. Curabitur mauris risus, feugiat ac euismod non,\n vulputate ac justo. Curabitur pretium vehicula augue, blandit porta odio rutrum sit amet. Proin semper enim ut\n sapien tempor, a ornare ipsum faucibus.\n </div>\n </FormField>\n </ModalDialog>\n </ModalProvider>\n);\n\nexport const WithLongContentAndNoBorder = LongContentTemplate.bind({});\nWithLongContentAndNoBorder.args = {\n ...defaultArgs,\n noButtonBorder: true,\n};\n"],"names":["codeString","ModalDialog_stories","ModalDialog","Template","args","jsx","ModalProvider","jsxs","FormField","Label","InputField","defaultArgs","fn","ButtonGroup","Button","ModalDialogExample","Loading","LongContentTemplate","WithLongContentAndNoBorder"],"mappings":";;;;;;;;;AAcA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA,GAQJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,UAAU,aAAa;AAAA,IACnC;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAsC,CAACC,MAC3C,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAC,gBAAAH,EAAAI,GAAA,EAAM,SAAQ,cAAa,UAAkB,sBAAA;AAAA,EAC9C,gBAAAJ,EAACK,GAAW,EAAA,IAAG,aAAa,CAAA;AAAA,GAC9B,GACF,EACF,CAAA,GAGIC,IAAyC;AAAA,EAC7C,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,0BAA0B;AAAA,EAC1B,YAAY;AAAA,EACZ,UAAUC,EAAG;AAAA,EACb,SAASA,EAAG;AAAA,EACZ,SACE,gBAAAL,EAACM,GAAY,EAAA,UAAQ,IACnB,UAAA;AAAA,IAAA,gBAAAR,EAACS,KAAO,SAAQ,WAAU,SAASF,KAAM,UAEzC,MAAA;AAAA,sBACCE,GAAO,EAAA,SAAQ,aAAY,SAASF,KAAM,UAE3C,UAAA;AAAA,EAAA,GACF;AAAA,EAEF,QAAQ;AACV,GAEaG,IAAqBZ,EAAS,KAAK,EAAE;AAClDY,EAAmB,OAAO;AAAA,EACxB,GAAGJ;AACL;AAEO,MAAMK,IAAUb,EAAS,KAAK,EAAE;AACvCa,EAAQ,OAAO;AAAA,EACb,GAAGL;AAAA,EACH,WAAW;AAAA,EACX,sBAAsB;AACxB;AAEA,MAAMM,IAAiD,CAACb,MACtD,gBAAAC,EAACC,GACC,EAAA,UAAA,gBAAAD,EAACH,GAAa,EAAA,GAAGE,GACf,UAAA,gBAAAG,EAACC,GAAU,EAAA,YAAU,IACnB,UAAA;AAAA,EAAA,gBAAAH,EAAC,SAAI,UAWL,88BAAA,CAAA;AAAA,EACA,gBAAAA,EAAC,SAAI,UAML,4dAAA,CAAA;AAAA,GACF,GACF,EACF,CAAA,GAGWa,IAA6BD,EAAoB,KAAK,EAAE;AACrEC,EAA2B,OAAO;AAAA,EAChC,GAAGP;AAAA,EACH,gBAAgB;AAClB;"}
|
|
@@ -2,7 +2,7 @@ import { jsxs as S, jsx as r } from "react/jsx-runtime";
|
|
|
2
2
|
import { f as d } from "../../index-CuON43Qx.js";
|
|
3
3
|
import { useState as M } from "react";
|
|
4
4
|
import { M as a } from "../../MultiSelect-Ckf3uGw5.js";
|
|
5
|
-
import { Container as p } from "
|
|
5
|
+
import { Container as p } from "../../storyComponents/Container/Container.js";
|
|
6
6
|
const f = `
|
|
7
7
|
// MultiSelectHeader can be added optionally
|
|
8
8
|
<MultiSelect.MultiSelectHeader label={label} clearTrigger={clearTrigger} onClear={handleClear} />
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelect.stories.js","sources":["../../../src/components/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\nimport { useState } from 'react';\n\nimport type { ChangeEvent, PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectProps } from './MultiSelect';\n\nimport { MultiSelect } from './MultiSelect';\n\nimport { Container } from '
|
|
1
|
+
{"version":3,"file":"MultiSelect.stories.js","sources":["../../../src/components/MultiSelect/MultiSelect.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\nimport { useState } from 'react';\n\nimport type { ChangeEvent, PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { MultiSelectProps } from './MultiSelect';\n\nimport { MultiSelect } from './MultiSelect';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = `\n // MultiSelectHeader can be added optionally\n <MultiSelect.MultiSelectHeader label={label} clearTrigger={clearTrigger} onClear={handleClear} />\n <MultiSelect noBorder={noBorder} scrollable={scrollable}>\n {mockItems.map(({ itemName, itemValue, disabled }) => (\n <MultiSelect.MultiSelectItem key={itemName} label={itemName} value={itemValue}\n checked={stateItems.includes(itemValue)} onChange={handleChange} disabled={disabled} />\n ))}\n </MultiSelect>\n `;\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Organisms/MultiSelect',\n component: MultiSelect,\n argTypes: {\n header: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n codeString: codeString,\n },\n} as Meta<PropsWithChildren<MultiSelectProps>>;\n\nconst Template: StoryFn<PropsWithChildren<MultiSelectProps>> = (args) => {\n const [items, setItems] = useState<string[]>([]);\n\n const mockItems = [\n { itemName: 'AItem 1', itemValue: '1', disabled: true },\n { itemName: 'BItem 2', itemValue: '2' },\n { itemName: 'Multi line Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3 Item 3', itemValue: '3' },\n { itemName: 'CItem 4', itemValue: '4' },\n { itemName: 'DItem 5', itemValue: '5' },\n { itemName: 'EItem 6', itemValue: '6' },\n ];\n\n const handleClear = () => {\n setItems([]);\n fn()();\n };\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const { checked, value } = event.target;\n setItems((prevState) => {\n const newItems = checked ? [...prevState, value] : prevState.filter((itemValue) => itemValue !== value);\n fn()(newItems);\n return newItems;\n });\n };\n\n return (\n <Container>\n {/* header added under separate boolean arg here for storybook purpose, \n it should be added as direct arg to MultiSelect when used in application */}\n {args.header && (\n <MultiSelect.MultiSelectHeader\n label=\"Item list\"\n clearTrigger={items.length > 0 ? 'Clear Selection' : ''}\n onClear={handleClear}\n />\n )}\n <MultiSelect {...args}>\n {mockItems.map(({ itemName, itemValue, disabled }) => (\n <MultiSelect.MultiSelectItem\n key={itemName}\n label={itemName}\n value={itemValue}\n checked={items.includes(itemValue)}\n onChange={handleChange}\n disabled={disabled}\n />\n ))}\n </MultiSelect>\n </Container>\n );\n};\n\nconst defaultArgs: Partial<MultiSelectProps> = {\n scrollable: true,\n noBorder: false,\n};\n\nexport const MultiSelectExample = Template.bind({});\nMultiSelectExample.args = {\n ...defaultArgs,\n};\n\nexport const WithHeader = Template.bind({});\nWithHeader.args = {\n ...defaultArgs,\n // boolean is not normal way of adding header but if added after template the rerender logic of\n // storybook would not correctly clear the checkboxes\n header: true,\n};\n\nexport const WithheaderAndWithoutScrollContainerAndBorder = Template.bind({});\nWithheaderAndWithoutScrollContainerAndBorder.args = {\n scrollable: false,\n noBorder: true,\n // boolean is not normal way of adding header but if added after template the rerender logic of\n // storybook would not correctly clear the checkboxes\n header: true,\n};\n"],"names":["codeString","MultiSelect_stories","MultiSelect","Template","args","items","setItems","useState","mockItems","handleClear","fn","handleChange","event","checked","value","prevState","newItems","itemValue","Container","jsx","itemName","disabled","defaultArgs","MultiSelectExample","WithHeader","WithheaderAndWithoutScrollContainerAndBorder"],"mappings":";;;;;AAWA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAYJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAyD,CAACC,MAAS;AACvE,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAmB,CAAE,CAAA,GAEzCC,IAAY;AAAA,IAChB,EAAE,UAAU,WAAW,WAAW,KAAK,UAAU,GAAK;AAAA,IACtD,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,IACtC,EAAE,UAAU,oFAAoF,WAAW,IAAI;AAAA,IAC/G,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,IACtC,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,IACtC,EAAE,UAAU,WAAW,WAAW,IAAI;AAAA,EAAA,GAGlCC,IAAc,MAAM;AACxB,IAAAH,EAAS,CAAE,CAAA,GACXI,EAAK,EAAA;AAAA,EAAA,GAGDC,IAAe,CAACC,MAAyC;AAC7D,UAAM,EAAE,SAAAC,GAAS,OAAAC,MAAUF,EAAM;AACjC,IAAAN,EAAS,CAACS,MAAc;AACtB,YAAMC,IAAWH,IAAU,CAAC,GAAGE,GAAWD,CAAK,IAAIC,EAAU,OAAO,CAACE,MAAcA,MAAcH,CAAK;AACtGJ,aAAAA,EAAA,EAAKM,CAAQ,GACNA;AAAA,IAAA,CACR;AAAA,EAAA;AAGH,2BACGE,GAGE,EAAA,UAAA;AAAA,IAAAd,EAAK,UACJ,gBAAAe;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QACC,OAAM;AAAA,QACN,cAAcG,EAAM,SAAS,IAAI,oBAAoB;AAAA,QACrD,SAASI;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,gBAAAU,EAACjB,GAAa,EAAA,GAAGE,GACd,UAAAI,EAAU,IAAI,CAAC,EAAE,UAAAY,GAAU,WAAAH,GAAW,UAAAI,EACrC,MAAA,gBAAAF;AAAA,MAACjB,EAAY;AAAA,MAAZ;AAAA,QAEC,OAAOkB;AAAA,QACP,OAAOH;AAAA,QACP,SAASZ,EAAM,SAASY,CAAS;AAAA,QACjC,UAAUN;AAAA,QACV,UAAAU;AAAA,MAAA;AAAA,MALKD;AAAA,IAOR,CAAA,GACH;AAAA,EACF,EAAA,CAAA;AAEJ,GAEME,IAAyC;AAAA,EAC7C,YAAY;AAAA,EACZ,UAAU;AACZ,GAEaC,IAAqBpB,EAAS,KAAK,EAAE;AAClDoB,EAAmB,OAAO;AAAA,EACxB,GAAGD;AACL;AAEO,MAAME,IAAarB,EAAS,KAAK,EAAE;AAC1CqB,EAAW,OAAO;AAAA,EAChB,GAAGF;AAAA;AAAA;AAAA,EAGH,QAAQ;AACV;AAEO,MAAMG,IAA+CtB,EAAS,KAAK,EAAE;AAC5EsB,EAA6C,OAAO;AAAA,EAClD,YAAY;AAAA,EACZ,UAAU;AAAA;AAAA;AAAA,EAGV,QAAQ;AACV;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
2
|
import { f as l } from "../../index-CuON43Qx.js";
|
|
3
3
|
import { OverlayCloseButton as e } from "./OverlayCloseButton.js";
|
|
4
|
-
import { Container as t } from "
|
|
4
|
+
import { Container as t } from "../../storyComponents/Container/Container.js";
|
|
5
5
|
const r = "<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />", p = {
|
|
6
6
|
title: "Atoms/OverlayCloseButton",
|
|
7
7
|
component: e,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlayCloseButton.stories.js","sources":["../../../src/components/OverlayCloseButton/OverlayCloseButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayCloseButtonProps } from './OverlayCloseButton';\n\nimport { OverlayCloseButton } from './OverlayCloseButton';\n\nimport { Container } from '
|
|
1
|
+
{"version":3,"file":"OverlayCloseButton.stories.js","sources":["../../../src/components/OverlayCloseButton/OverlayCloseButton.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { OverlayCloseButtonProps } from './OverlayCloseButton';\n\nimport { OverlayCloseButton } from './OverlayCloseButton';\n\nimport { Container } from 'storyComponents/Container/';\n\nconst codeString = '<OverlayCloseButton aria-label={aria-label} onClick={onClickFunction} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/OverlayCloseButton',\n component: OverlayCloseButton,\n argTypes: {\n paddedModal: {\n control: 'boolean',\n },\n 'aria-label': {\n control: 'text',\n },\n },\n parameters: {\n codeString: codeString,\n },\n} as Meta<OverlayCloseButtonProps>;\n\nconst Template: StoryFn<OverlayCloseButtonProps> = (args) => {\n return (\n <Container size=\"small\" padded={false}>\n <OverlayCloseButton {...args} />\n </Container>\n );\n};\n\nexport const OverlayCloseButtonExample = Template.bind({});\nOverlayCloseButtonExample.args = {\n paddedModal: false,\n 'aria-label': 'Close',\n onClick: fn(),\n};\n"],"names":["codeString","OverlayCloseButton_stories","OverlayCloseButton","Template","args","jsx","Container","OverlayCloseButtonExample","fn"],"mappings":";;;;AASA,MAAMA,IAAa,4EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,aAAa;AAAA,MACX,SAAS;AAAA,IACX;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAA6C,CAACC,MAEhD,gBAAAC,EAACC,GAAU,EAAA,MAAK,SAAQ,QAAQ,IAC9B,UAAC,gBAAAD,EAAAH,GAAA,EAAoB,GAAGE,EAAM,CAAA,EAChC,CAAA,GAISG,IAA4BJ,EAAS,KAAK,EAAE;AACzDI,EAA0B,OAAO;AAAA,EAC/B,aAAa;AAAA,EACb,cAAc;AAAA,EACd,SAASC,EAAG;AACd;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as e, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { f as a } from "../../index-CuON43Qx.js";
|
|
3
3
|
import { ProgrammeCard as t } from "./ProgrammeCard.js";
|
|
4
|
-
import { Container as n } from "
|
|
4
|
+
import { Container as n } from "../../storyComponents/Container/Container.js";
|
|
5
5
|
import "react";
|
|
6
6
|
import { Icon as m } from "../Icon/Icon.js";
|
|
7
7
|
import "@react-aria/button";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ProgrammeCardProps } from './ProgrammeCard';\n\nimport { ProgrammeCard } from './ProgrammeCard';\n\nimport { Container } from '
|
|
1
|
+
{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { fn } from '@storybook/test';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ProgrammeCardProps } from './ProgrammeCard';\n\nimport { ProgrammeCard } from './ProgrammeCard';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon, Repeater } from 'components';\n\nconst codeString = '<ProgrammeCard key={key} header={header} details={details} onClick={onClickFunction} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ProgrammeCard',\n component: ProgrammeCard,\n parameters: {\n codeString: codeString,\n },\n} as Meta<ProgrammeCardProps>;\n\nconst Template: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <ProgrammeCard {...args} />\n </Container>\n);\n\nexport const ProgrammeCardExample = Template.bind({});\nProgrammeCardExample.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n\nexport const WithComplexContent = Template.bind({});\nWithComplexContent.args = {\n header: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Icon name=\"Envelope\" size={32} />\n <h2 style={{ margin: 0 }}>This is my header</h2>\n </Repeater>\n ),\n details: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Repeater flexDirection=\"row\">\n <Icon name=\"FaceFrown\" />\n Details 1\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Heart\" />\n Details 2\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Sparkles\" />\n Details 3\n </Repeater>\n </Repeater>\n ),\n onClick: fn(),\n};\n\nconst MultiProgrammeCardsTemplate: StoryFn<ProgrammeCardProps> = (args) => (\n <Container size=\"large\">\n <Repeater>\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n </Repeater>\n </Container>\n);\n\nexport const MultiProgrammeCards = MultiProgrammeCardsTemplate.bind({});\nMultiProgrammeCards.args = {\n header: 'This is my header',\n details: 'This is my details',\n onClick: fn(),\n};\n"],"names":["codeString","ProgrammeCard_stories","ProgrammeCard","Template","args","jsx","Container","ProgrammeCardExample","fn","WithComplexContent","jsxs","Repeater","Icon","MultiProgrammeCardsTemplate","MultiProgrammeCards"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,IAAa,2FAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAwC,CAACC,MAC5C,gBAAAC,EAAAC,GAAA,EAAU,MAAK,SACd,UAAC,gBAAAD,EAAAH,GAAA,EAAe,GAAGE,EAAM,CAAA,EAC3B,CAAA,GAGWG,IAAuBJ,EAAS,KAAK,EAAE;AACpDI,EAAqB,OAAO;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASC,EAAG;AACd;AAEO,MAAMC,IAAqBN,EAAS,KAAK,EAAE;AAClDM,EAAmB,OAAO;AAAA,EACxB,QACG,gBAAAC,EAAAC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAA,gBAAAN,EAACO,GAAK,EAAA,MAAK,YAAW,MAAM,IAAI;AAAA,sBAC/B,MAAG,EAAA,OAAO,EAAE,QAAQ,KAAK,UAAiB,qBAAA;AAAA,EAAA,GAC7C;AAAA,EAEF,SACG,gBAAAF,EAAAC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAC,gBAAAD,EAAAC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,YAAY,CAAA;AAAA,MAAE;AAAA,IAAA,GAE3B;AAAA,IACA,gBAAAF,EAACC,GAAS,EAAA,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,QAAQ,CAAA;AAAA,MAAE;AAAA,IAAA,GAEvB;AAAA,IACA,gBAAAF,EAACC,GAAS,EAAA,eAAc,OACtB,UAAA;AAAA,MAAC,gBAAAN,EAAAO,GAAA,EAAK,MAAK,WAAW,CAAA;AAAA,MAAE;AAAA,IAAA,GAE1B;AAAA,EAAA,GACF;AAAA,EAEF,SAASJ,EAAG;AACd;AAEA,MAAMK,IAA2D,CAACT,MAChE,gBAAAC,EAACC,KAAU,MAAK,SACd,4BAACK,GACC,EAAA,UAAA;AAAA,EAAC,gBAAAN,EAAAH,GAAA,EAAe,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAe,EAAA,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAe,EAAA,GAAGE,GAAM;AAAA,EAC3B,CAAA,EACF,CAAA,GAGWU,IAAsBD,EAA4B,KAAK,EAAE;AACtEC,EAAoB,OAAO;AAAA,EACzB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAASN,EAAG;AACd;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as i, Fragment as l, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { Repeater as t } from "./Repeater.js";
|
|
3
|
-
import { Container as o } from "
|
|
3
|
+
import { Container as o } from "../../storyComponents/Container/Container.js";
|
|
4
4
|
const a = "<Repeater flexDirection={flexDirection} gap={gap}>{children}</Repeater>", d = {
|
|
5
5
|
title: "Atoms/Repeater",
|
|
6
6
|
component: t,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Repeater.stories.js","sources":["../../../src/components/Repeater/Repeater.stories.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { RepeaterProps } from './Repeater';\n\nimport { Repeater } from './Repeater';\n\nimport { Container } from '
|
|
1
|
+
{"version":3,"file":"Repeater.stories.js","sources":["../../../src/components/Repeater/Repeater.stories.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { RepeaterProps } from './Repeater';\n\nimport { Repeater } from './Repeater';\n\nimport { Container } from 'storyComponents/Container';\n\nconst codeString = '<Repeater flexDirection={flexDirection} gap={gap}>{children}</Repeater>';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/Repeater',\n component: Repeater,\n argTypes: {\n flexDirection: {\n control: {\n type: 'select',\n },\n },\n gap: {\n control: {\n type: 'select',\n sort: false,\n },\n },\n children: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n codeString: codeString,\n },\n} as Meta<PropsWithChildren<RepeaterProps>>;\n\nconst Template: StoryFn<PropsWithChildren<RepeaterProps>> = (args) => (\n <Container>\n <Repeater {...args} />\n </Container>\n);\n\nexport const RepeaterExample = Template.bind({});\nRepeaterExample.args = {\n flexDirection: 'column',\n gap: '050',\n children: (\n <>\n <div>Example item 1</div>\n <div>Example item 2</div>\n <div>Example item 3</div>\n </>\n ),\n};\n"],"names":["codeString","Repeater_stories","Repeater","Template","args","jsx","Container","RepeaterExample","jsxs","Fragment"],"mappings":";;;AAQA,MAAMA,IAAa,2EAGJC,IAAA;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,eAAe;AAAA,MACb,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,KAAK;AAAA,MACH,SAAS;AAAA,QACP,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,UAAU;AAAA,MACR,OAAO;AAAA,QACL,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,YAAAF;AAAA,EACF;AACF,GAEMG,IAAsD,CAACC,MAC3D,gBAAAC,EAACC,KACC,UAAC,gBAAAD,EAAAH,GAAA,EAAU,GAAGE,EAAM,CAAA,EACtB,CAAA,GAGWG,IAAkBJ,EAAS,KAAK,EAAE;AAC/CI,EAAgB,OAAO;AAAA,EACrB,eAAe;AAAA,EACf,KAAK;AAAA,EACL,UAEI,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAJ,EAAC,SAAI,UAAc,iBAAA,CAAA;AAAA,IACnB,gBAAAA,EAAC,SAAI,UAAc,iBAAA,CAAA;AAAA,IACnB,gBAAAA,EAAC,SAAI,UAAc,iBAAA,CAAA;AAAA,EAAA,GACrB;AAEJ;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as a, jsxs as
|
|
1
|
+
import { jsx as a, jsxs as s } from "react/jsx-runtime";
|
|
2
2
|
import { f as i } from "../../index-CuON43Qx.js";
|
|
3
3
|
import { SelectListbox as r } from "./SelectListbox.js";
|
|
4
4
|
import * as e from "react";
|
|
@@ -59,7 +59,12 @@ const d = ({
|
|
|
59
59
|
label: "Spanish",
|
|
60
60
|
value: "ES"
|
|
61
61
|
}
|
|
62
|
-
],
|
|
62
|
+
], v = `
|
|
63
|
+
<SelectListbox options={mockData} defaultValue={defaultValue} variant={variant}
|
|
64
|
+
size={size} buttonLabelBold={buttonLabelBold} onChange={onChangeFunction}>
|
|
65
|
+
{mockData.map(({label, value}, index) => ( <SelectListbox.SelectOption option="{{label, value}}"
|
|
66
|
+
index={index} key={value}> {label} </SelectListbox.SelectOption> ))} </SelectListbox>
|
|
67
|
+
`, S = {
|
|
63
68
|
title: "Organisms/SelectListbox",
|
|
64
69
|
component: r,
|
|
65
70
|
argTypes: {
|
|
@@ -124,8 +129,11 @@ const d = ({
|
|
|
124
129
|
disable: !0
|
|
125
130
|
}
|
|
126
131
|
}
|
|
132
|
+
},
|
|
133
|
+
parameters: {
|
|
134
|
+
codeString: v
|
|
127
135
|
}
|
|
128
|
-
},
|
|
136
|
+
}, o = {
|
|
129
137
|
options: n,
|
|
130
138
|
defaultValue: "EN",
|
|
131
139
|
disabled: !1,
|
|
@@ -135,11 +143,11 @@ const d = ({
|
|
|
135
143
|
mobileBreakpoint: "28rem",
|
|
136
144
|
size: "default",
|
|
137
145
|
onChange: i()
|
|
138
|
-
},
|
|
139
|
-
|
|
140
|
-
...
|
|
146
|
+
}, W = (l) => /* @__PURE__ */ a("div", { style: { width: "10rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...l, children: n.map(({ label: t, value: c }, h) => /* @__PURE__ */ a(r.SelectOption, { option: { label: t, value: c }, index: h, children: t }, `${c}`)) }) }), z = W.bind({});
|
|
147
|
+
z.args = {
|
|
148
|
+
...o
|
|
141
149
|
};
|
|
142
|
-
const
|
|
150
|
+
const b = ({ label: l, value: t }) => /* @__PURE__ */ s("div", { style: { display: "flex" }, children: [
|
|
143
151
|
{
|
|
144
152
|
NL: /* @__PURE__ */ a(d, { style: { width: "24px", height: "24px", marginRight: "10px" } }),
|
|
145
153
|
EN: /* @__PURE__ */ a(m, { style: { width: "24px", height: "24px", marginRight: "10px" } }),
|
|
@@ -150,13 +158,13 @@ const z = ({ label: l, value: t }) => /* @__PURE__ */ o("div", { style: { displa
|
|
|
150
158
|
ES: /* @__PURE__ */ a(E, { style: { width: "24px", height: "24px", marginRight: "10px" } })
|
|
151
159
|
}[t],
|
|
152
160
|
l
|
|
153
|
-
] }),
|
|
154
|
-
|
|
155
|
-
...
|
|
161
|
+
] }), g = (l) => /* @__PURE__ */ a("div", { style: { width: "10rem", margin: "0rem auto 0 auto" }, children: /* @__PURE__ */ a(r, { ...l, children: l.options.map(({ label: t, value: c }, h) => /* @__PURE__ */ a(r.SelectOption, { option: { label: t, value: c }, index: h, children: /* @__PURE__ */ a(b, { label: t, value: c }) }, `${c}`)) }) }), u = g.bind({});
|
|
162
|
+
u.args = {
|
|
163
|
+
...o
|
|
156
164
|
};
|
|
157
165
|
export {
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
166
|
+
z as SelectListboxExample,
|
|
167
|
+
u as WithComponentOption,
|
|
168
|
+
S as default
|
|
161
169
|
};
|
|
162
170
|
//# sourceMappingURL=SelectListBox.stories.js.map
|