@arbor-education/design-system.components 0.1.5 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/release.yml +1 -1
- package/CHANGELOG.md +12 -0
- package/dist/components/formField/fieldset/Fieldset.d.ts +6 -0
- package/dist/components/formField/fieldset/Fieldset.d.ts.map +1 -0
- package/dist/components/formField/fieldset/Fieldset.js +7 -0
- package/dist/components/formField/fieldset/Fieldset.js.map +1 -0
- package/dist/components/formField/fieldset/Fieldset.stories.d.ts +28 -0
- package/dist/components/formField/fieldset/Fieldset.stories.d.ts.map +1 -0
- package/dist/components/formField/fieldset/Fieldset.stories.js +51 -0
- package/dist/components/formField/fieldset/Fieldset.stories.js.map +1 -0
- package/dist/components/formField/fieldset/Fieldset.test.d.ts +2 -0
- package/dist/components/formField/fieldset/Fieldset.test.d.ts.map +1 -0
- package/dist/components/formField/fieldset/Fieldset.test.js +62 -0
- package/dist/components/formField/fieldset/Fieldset.test.js.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.d.ts +8 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.d.ts.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.js +8 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.js.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.test.d.ts +2 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.test.d.ts.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.test.js +86 -0
- package/dist/components/formField/inputs/checkbox/CheckboxGroup.test.js.map +1 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.d.ts +3 -1
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.js +7 -0
- package/dist/components/formField/inputs/checkbox/CheckboxInput.stories.js.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonGroup.d.ts +11 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.d.ts.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.js +8 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.js.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.test.d.ts +2 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.test.d.ts.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.test.js +86 -0
- package/dist/components/formField/inputs/radio/RadioButtonGroup.test.js.map +1 -0
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.d.ts.map +1 -1
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js +8 -2
- package/dist/components/formField/inputs/radio/RadioButtonInput.stories.js.map +1 -1
- package/dist/components/modal/Modal.d.ts +25 -0
- package/dist/components/modal/Modal.d.ts.map +1 -0
- package/dist/components/modal/Modal.js +22 -0
- package/dist/components/modal/Modal.js.map +1 -0
- package/dist/components/modal/Modal.stories.d.ts +13 -0
- package/dist/components/modal/Modal.stories.d.ts.map +1 -0
- package/dist/components/modal/Modal.stories.js +23 -0
- package/dist/components/modal/Modal.stories.js.map +1 -0
- package/dist/components/modal/Modal.test.d.ts +2 -0
- package/dist/components/modal/Modal.test.d.ts.map +1 -0
- package/dist/components/modal/Modal.test.js +131 -0
- package/dist/components/modal/Modal.test.js.map +1 -0
- package/dist/components/modal/ModalBody.d.ts +7 -0
- package/dist/components/modal/ModalBody.d.ts.map +1 -0
- package/dist/components/modal/ModalBody.js +7 -0
- package/dist/components/modal/ModalBody.js.map +1 -0
- package/dist/components/modal/ModalCloseButton.d.ts +3 -0
- package/dist/components/modal/ModalCloseButton.d.ts.map +1 -0
- package/dist/components/modal/ModalCloseButton.js +25 -0
- package/dist/components/modal/ModalCloseButton.js.map +1 -0
- package/dist/components/modal/ModalFooter.d.ts +7 -0
- package/dist/components/modal/ModalFooter.d.ts.map +1 -0
- package/dist/components/modal/ModalFooter.js +7 -0
- package/dist/components/modal/ModalFooter.js.map +1 -0
- package/dist/components/modal/ModalHeader.d.ts +7 -0
- package/dist/components/modal/ModalHeader.d.ts.map +1 -0
- package/dist/components/modal/ModalHeader.js +8 -0
- package/dist/components/modal/ModalHeader.js.map +1 -0
- package/dist/components/modal/ModalTitle.d.ts +3 -0
- package/dist/components/modal/ModalTitle.d.ts.map +1 -0
- package/dist/components/modal/ModalTitle.js +8 -0
- package/dist/components/modal/ModalTitle.js.map +1 -0
- package/dist/components/modal/modalManager/ModalManager.d.ts +7 -0
- package/dist/components/modal/modalManager/ModalManager.d.ts.map +1 -0
- package/dist/components/modal/modalManager/ModalManager.js +22 -0
- package/dist/components/modal/modalManager/ModalManager.js.map +1 -0
- package/dist/components/modal/modalManager/ModalManager.stories.d.ts +13 -0
- package/dist/components/modal/modalManager/ModalManager.stories.d.ts.map +1 -0
- package/dist/components/modal/modalManager/ModalManager.stories.js +110 -0
- package/dist/components/modal/modalManager/ModalManager.stories.js.map +1 -0
- package/dist/components/modal/modalManager/ModalManager.test.d.ts +2 -0
- package/dist/components/modal/modalManager/ModalManager.test.d.ts.map +1 -0
- package/dist/components/modal/modalManager/ModalManager.test.js +191 -0
- package/dist/components/modal/modalManager/ModalManager.test.js.map +1 -0
- package/dist/components/separator/Separator.d.ts +7 -0
- package/dist/components/separator/Separator.d.ts.map +1 -0
- package/dist/components/separator/Separator.js +8 -0
- package/dist/components/separator/Separator.js.map +1 -0
- package/dist/components/separator/Separator.stories.d.ts +10 -0
- package/dist/components/separator/Separator.stories.d.ts.map +1 -0
- package/dist/components/separator/Separator.stories.js +12 -0
- package/dist/components/separator/Separator.stories.js.map +1 -0
- package/dist/components/separator/Separator.test.d.ts +2 -0
- package/dist/components/separator/Separator.test.d.ts.map +1 -0
- package/dist/components/separator/Separator.test.js +10 -0
- package/dist/components/separator/Separator.test.js.map +1 -0
- package/dist/components/table/Table.d.ts +20 -0
- package/dist/components/table/Table.d.ts.map +1 -1
- package/dist/components/table/Table.js +45 -7
- package/dist/components/table/Table.js.map +1 -1
- package/dist/components/table/Table.stories.d.ts.map +1 -1
- package/dist/components/table/Table.stories.js +14 -1
- package/dist/components/table/Table.stories.js.map +1 -1
- package/dist/components/table/Table.test.js +315 -2
- package/dist/components/table/Table.test.js.map +1 -1
- package/dist/components/table/pagination/TableSettingsDropdown.d.ts +2 -0
- package/dist/components/table/pagination/TableSettingsDropdown.d.ts.map +1 -0
- package/dist/components/table/pagination/TableSettingsDropdown.js +43 -0
- package/dist/components/table/pagination/TableSettingsDropdown.js.map +1 -0
- package/dist/components/table/useTableSettings.d.ts +22 -0
- package/dist/components/table/useTableSettings.d.ts.map +1 -0
- package/dist/components/table/useTableSettings.js +36 -0
- package/dist/components/table/useTableSettings.js.map +1 -0
- package/dist/index.css +102 -1
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/dist/utils/Constants.d.ts +5 -0
- package/dist/utils/Constants.d.ts.map +1 -1
- package/dist/utils/Constants.js +5 -0
- package/dist/utils/Constants.js.map +1 -1
- package/dist/utils/ModalUtils.d.ts +7 -0
- package/dist/utils/ModalUtils.d.ts.map +1 -0
- package/dist/utils/ModalUtils.js +14 -0
- package/dist/utils/ModalUtils.js.map +1 -0
- package/dist/utils/hooks/useComponentDidUpdate.d.ts +7 -0
- package/dist/utils/hooks/useComponentDidUpdate.d.ts.map +1 -0
- package/dist/utils/hooks/useComponentDidUpdate.js +18 -0
- package/dist/utils/hooks/useComponentDidUpdate.js.map +1 -0
- package/dist/utils/hooks/useComponentDidUpdate.test.d.ts +2 -0
- package/dist/utils/hooks/useComponentDidUpdate.test.d.ts.map +1 -0
- package/dist/utils/hooks/useComponentDidUpdate.test.js +69 -0
- package/dist/utils/hooks/useComponentDidUpdate.test.js.map +1 -0
- package/package.json +1 -1
- package/src/components/formField/fieldset/Fieldset.stories.tsx +89 -0
- package/src/components/formField/fieldset/Fieldset.test.tsx +85 -0
- package/src/components/formField/fieldset/Fieldset.tsx +17 -0
- package/src/components/formField/fieldset/fieldset.scss +19 -0
- package/src/components/formField/inputs/checkbox/CheckboxGroup.test.tsx +127 -0
- package/src/components/formField/inputs/checkbox/CheckboxGroup.tsx +17 -0
- package/src/components/formField/inputs/checkbox/CheckboxInput.stories.tsx +12 -1
- package/src/components/formField/inputs/radio/RadioButtonGroup.test.tsx +190 -0
- package/src/components/formField/inputs/radio/RadioButtonGroup.tsx +22 -0
- package/src/components/formField/inputs/radio/RadioButtonInput.stories.tsx +16 -7
- package/src/components/formField/label/label.scss +1 -1
- package/src/components/modal/Modal.stories.tsx +37 -0
- package/src/components/modal/Modal.test.tsx +244 -0
- package/src/components/modal/Modal.tsx +65 -0
- package/src/components/modal/ModalBody.tsx +16 -0
- package/src/components/modal/ModalCloseButton.tsx +39 -0
- package/src/components/modal/ModalFooter.tsx +14 -0
- package/src/components/modal/ModalHeader.tsx +20 -0
- package/src/components/modal/ModalTitle.tsx +12 -0
- package/src/components/modal/modal.scss +74 -0
- package/src/components/modal/modalManager/ModalManager.stories.tsx +497 -0
- package/src/components/modal/modalManager/ModalManager.test.tsx +255 -0
- package/src/components/modal/modalManager/ModalManager.tsx +40 -0
- package/src/components/modal/modalManager/modalManager.scss +4 -0
- package/src/components/separator/Separator.stories.tsx +15 -0
- package/src/components/separator/Separator.test.tsx +10 -0
- package/src/components/separator/Separator.tsx +15 -0
- package/src/components/separator/separator.scss +6 -0
- package/src/components/table/Table.stories.tsx +14 -1
- package/src/components/table/Table.test.tsx +553 -1
- package/src/components/table/Table.tsx +80 -24
- package/src/components/table/pagination/TableSettingsDropdown.tsx +90 -0
- package/src/components/table/table.scss +8 -0
- package/src/components/table/useTableSettings.ts +59 -0
- package/src/index.scss +4 -0
- package/src/index.ts +4 -0
- package/src/tokens.scss +1 -0
- package/src/utils/Constants.ts +6 -0
- package/src/utils/ModalUtils.ts +17 -0
- package/src/utils/hooks/useComponentDidUpdate.test.ts +107 -0
- package/src/utils/hooks/useComponentDidUpdate.ts +19 -0
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { Dialog } from 'radix-ui';
|
|
2
|
+
type ModalContextValue = {
|
|
3
|
+
closeHandler?: () => void;
|
|
4
|
+
};
|
|
5
|
+
export declare const ModalContext: import("react").Context<ModalContextValue>;
|
|
6
|
+
export type ModalProps = {
|
|
7
|
+
className?: string;
|
|
8
|
+
overlayClassName?: string;
|
|
9
|
+
open?: boolean;
|
|
10
|
+
portalTarget?: HTMLElement | null;
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
hideCloseButton?: boolean;
|
|
13
|
+
closeHandler?: ModalContextValue['closeHandler'];
|
|
14
|
+
title?: string;
|
|
15
|
+
};
|
|
16
|
+
export declare const Modal: {
|
|
17
|
+
(props: ModalProps): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
Header: (props: import("./ModalHeader").ModalHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
Body: (props: import("./ModalBody").ModalBodyProps) => import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
Footer: (props: import("./ModalFooter").ModalFooterProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
CloseButton: (props: import("../button/Button").ButtonProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
22
|
+
Title: (props: Dialog.DialogTitleProps) => import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
};
|
|
24
|
+
export {};
|
|
25
|
+
//# sourceMappingURL=Modal.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AASlC,KAAK,iBAAiB,GAAG;IACvB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,eAAO,MAAM,YAAY,4CAAuC,CAAC;AAEjE,MAAM,MAAM,UAAU,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,KAAK;YAAW,UAAU;;;;;;CA+BtC,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { Dialog } from 'radix-ui';
|
|
4
|
+
import { ModalHeader } from './ModalHeader';
|
|
5
|
+
import { ModalFooter } from './ModalFooter';
|
|
6
|
+
import { ModalBody } from './ModalBody';
|
|
7
|
+
import { PopupParentContext } from '../../utils/PopupParentContext';
|
|
8
|
+
import { createContext, useRef } from 'react';
|
|
9
|
+
import { ModalCloseButon } from './ModalCloseButton';
|
|
10
|
+
import { ModalTitle } from './ModalTitle';
|
|
11
|
+
export const ModalContext = createContext({});
|
|
12
|
+
export const Modal = (props) => {
|
|
13
|
+
const { className, overlayClassName, open, portalTarget, children, closeHandler, hideCloseButton = false, title, } = props;
|
|
14
|
+
const overlayRef = useRef(null);
|
|
15
|
+
return (_jsx(PopupParentContext.Provider, { value: overlayRef, children: _jsx(ModalContext.Provider, { value: { closeHandler }, children: _jsx(Dialog.Root, { open: open, children: _jsx(Dialog.Portal, { container: portalTarget, children: _jsx(Dialog.Overlay, { ref: overlayRef, className: classNames('ds-modal__overlay', overlayClassName), children: _jsxs(Dialog.Content, { className: classNames('ds-modal__container', className), children: [title && _jsx(ModalHeader, { children: _jsx(ModalTitle, { children: title }) }), children, !hideCloseButton && _jsx(ModalCloseButon, { className: "ds-modal__close-button--top-right" })] }) }) }) }) }) }));
|
|
16
|
+
};
|
|
17
|
+
Modal.Header = ModalHeader;
|
|
18
|
+
Modal.Body = ModalBody;
|
|
19
|
+
Modal.Footer = ModalFooter;
|
|
20
|
+
Modal.CloseButton = ModalCloseButon;
|
|
21
|
+
Modal.Title = ModalTitle;
|
|
22
|
+
//# sourceMappingURL=Modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAoB,EAAE,CAAC,CAAC;AAajE,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IACzC,MAAM,EACJ,SAAS,EACT,gBAAgB,EAChB,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,eAAe,GAAG,KAAK,EACvB,KAAK,GACN,GAAG,KAAK,CAAC;IAEV,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,OAAO,CACL,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YAC5C,KAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,YAAY,EAAE,YAC5C,KAAC,MAAM,CAAC,IAAI,IAAC,IAAI,EAAE,IAAI,YACrB,KAAC,MAAM,CAAC,MAAM,IAAC,SAAS,EAAE,YAAY,YACpC,KAAC,MAAM,CAAC,OAAO,IAAC,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,YAC3F,MAAC,MAAM,CAAC,OAAO,IAAC,SAAS,EAAE,UAAU,CAAC,qBAAqB,EAAE,SAAS,CAAC,aACpE,KAAK,IAAI,KAAC,WAAW,cAAC,KAAC,UAAU,cAAE,KAAK,GAAc,GAAc,EACpE,QAAQ,EACR,CAAC,eAAe,IAAI,KAAC,eAAe,IAAC,SAAS,EAAC,mCAAmC,GAAG,IACvE,GACF,GACH,GACJ,GACQ,GACI,CAC/B,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;AACvB,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,WAAW,GAAG,eAAe,CAAC;AACpC,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Meta } from '@storybook/react-vite';
|
|
2
|
+
import { Modal, type ModalProps } from './Modal';
|
|
3
|
+
declare const meta: Meta<typeof Modal>;
|
|
4
|
+
export declare const Default: {
|
|
5
|
+
args: {
|
|
6
|
+
open: boolean;
|
|
7
|
+
closeHandler: import("@vitest/spy").Mock<(...args: any[]) => any>;
|
|
8
|
+
title: string;
|
|
9
|
+
};
|
|
10
|
+
render: (args: ModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
//# sourceMappingURL=Modal.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAElD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AAIjD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAI5B,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;mBAMH,UAAU;CAgB1B,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { fn } from 'storybook/test';
|
|
3
|
+
import { Modal } from './Modal';
|
|
4
|
+
import { Button } from '../button/Button';
|
|
5
|
+
import { useState } from 'react';
|
|
6
|
+
const meta = {
|
|
7
|
+
title: 'Components/Modals/Modal',
|
|
8
|
+
component: Modal,
|
|
9
|
+
tags: ['autodocs'],
|
|
10
|
+
};
|
|
11
|
+
export const Default = {
|
|
12
|
+
args: {
|
|
13
|
+
open: false,
|
|
14
|
+
closeHandler: fn(),
|
|
15
|
+
title: 'Modal Title',
|
|
16
|
+
},
|
|
17
|
+
render: (args) => {
|
|
18
|
+
const [showModal, setShowModal] = useState(args.open);
|
|
19
|
+
return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "primary", onClick: () => setShowModal(true), children: "Open Modal" }), _jsxs(Modal, { ...args, open: showModal, closeHandler: () => setShowModal(false), children: [_jsx(Modal.Body, { children: "Cheddar and Pickle were Norwich terriers who lived next door. Cheddar, the older, was cautious and methodical; Pickle, the younger, was bold and impulsive. One morning, Pickle spotted a squirrel in the garden and gave chase, while Cheddar watched from the porch. When Pickle got stuck under the neighbor\u2019s fence, Cheddar squeezed through a gap and nudged him free. From then on, they worked as a team: Pickle scouted, and Cheddar planned. They became inseparable, exploring the neighborhood together and always looking out for each other." }), _jsxs(Modal.Footer, { children: [_jsx(Button, { variant: "tertiary", onClick: () => setShowModal(false), children: "Close" }), _jsx(Button, { variant: "primary", onClick: () => setShowModal(false), children: "Primary Action" })] })] })] }));
|
|
20
|
+
},
|
|
21
|
+
};
|
|
22
|
+
export default meta;
|
|
23
|
+
//# sourceMappingURL=Modal.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK;QACX,YAAY,EAAE,EAAE,EAAE;QAClB,KAAK,EAAE,aAAa;KACrB;IACD,MAAM,EAAE,CAAC,IAAgB,EAAE,EAAE;QAC3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACtD,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,2BAAqB,EAC7E,MAAC,KAAK,OAAK,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,aACvE,KAAC,KAAK,CAAC,IAAI,kjBAAwiB,EACnjB,MAAC,KAAK,CAAC,MAAM,eACX,KAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,sBAAgB,EAC7E,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,+BAAyB,IACxE,IACT,IACP,CAEJ,CAAC;IACJ,CAAC;CACF,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.test.d.ts","sourceRoot":"","sources":["../../../src/components/modal/Modal.test.tsx"],"names":[],"mappings":"AAIA,OAAO,kCAAkC,CAAC"}
|
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { describe, expect, test, vi } from 'vitest';
|
|
3
|
+
import { render, screen } from '@testing-library/react';
|
|
4
|
+
import userEvent from '@testing-library/user-event';
|
|
5
|
+
import { Modal } from './Modal';
|
|
6
|
+
import '@testing-library/jest-dom/vitest';
|
|
7
|
+
describe('Modal', () => {
|
|
8
|
+
test('renders when open prop is true', () => {
|
|
9
|
+
render(_jsx(Modal, { open: true, children: _jsx(Modal.Body, { children: "Modal content" }) }));
|
|
10
|
+
expect(screen.getByText('Modal content')).toBeInTheDocument();
|
|
11
|
+
});
|
|
12
|
+
test('does not render when open prop is false', () => {
|
|
13
|
+
render(_jsx(Modal, { open: false, children: _jsx(Modal.Body, { children: "Modal content" }) }));
|
|
14
|
+
expect(screen.queryByText('Modal content')).not.toBeInTheDocument();
|
|
15
|
+
});
|
|
16
|
+
test('renders with custom className', () => {
|
|
17
|
+
render(_jsx(Modal, { open: true, className: "custom-modal", children: _jsx(Modal.Body, { children: "Content" }) }));
|
|
18
|
+
const modalContainer = document.querySelector('.custom-modal');
|
|
19
|
+
expect(modalContainer).toBeInTheDocument();
|
|
20
|
+
});
|
|
21
|
+
test('renders with custom overlayClassName', () => {
|
|
22
|
+
render(_jsx(Modal, { open: true, overlayClassName: "custom-overlay", children: _jsx(Modal.Body, { children: "Content" }) }));
|
|
23
|
+
const overlay = document.querySelector('.custom-overlay');
|
|
24
|
+
expect(overlay).toBeInTheDocument();
|
|
25
|
+
});
|
|
26
|
+
test('renders with title prop', () => {
|
|
27
|
+
render(_jsx(Modal, { open: true, title: "Test Modal Title", children: _jsx(Modal.Body, { children: "Content" }) }));
|
|
28
|
+
expect(screen.getByText('Test Modal Title')).toBeInTheDocument();
|
|
29
|
+
});
|
|
30
|
+
test('renders close button by default', () => {
|
|
31
|
+
const closeHandler = vi.fn();
|
|
32
|
+
render(_jsx(Modal, { open: true, closeHandler: closeHandler, children: _jsx(Modal.Body, { children: "Content" }) }));
|
|
33
|
+
const closeButton = screen.getByRole('button');
|
|
34
|
+
expect(closeButton).toBeInTheDocument();
|
|
35
|
+
});
|
|
36
|
+
test('hides close button when hideCloseButton is true', () => {
|
|
37
|
+
const closeHandler = vi.fn();
|
|
38
|
+
render(_jsx(Modal, { open: true, hideCloseButton: true, closeHandler: closeHandler, children: _jsx(Modal.Body, { children: "Content" }) }));
|
|
39
|
+
expect(screen.queryByRole('button')).not.toBeInTheDocument();
|
|
40
|
+
});
|
|
41
|
+
test('calls closeHandler when close button is clicked', async () => {
|
|
42
|
+
const user = userEvent.setup();
|
|
43
|
+
const closeHandler = vi.fn();
|
|
44
|
+
render(_jsx(Modal, { open: true, closeHandler: closeHandler, children: _jsx(Modal.Body, { children: "Content" }) }));
|
|
45
|
+
const closeButton = screen.getByRole('button');
|
|
46
|
+
await user.click(closeButton);
|
|
47
|
+
expect(closeHandler).toHaveBeenCalledTimes(1);
|
|
48
|
+
});
|
|
49
|
+
test('calls closeHandler when Escape key is pressed', async () => {
|
|
50
|
+
const user = userEvent.setup();
|
|
51
|
+
const closeHandler = vi.fn();
|
|
52
|
+
render(_jsx(Modal, { open: true, closeHandler: closeHandler, children: _jsx(Modal.Body, { children: "Content" }) }));
|
|
53
|
+
await user.keyboard('{Escape}');
|
|
54
|
+
expect(closeHandler).toHaveBeenCalledTimes(1);
|
|
55
|
+
});
|
|
56
|
+
test('renders Modal.Header component', () => {
|
|
57
|
+
render(_jsx(Modal, { open: true, children: _jsx(Modal.Header, { children: "Header content" }) }));
|
|
58
|
+
expect(screen.getByText('Header content')).toBeInTheDocument();
|
|
59
|
+
const header = document.querySelector('.ds-modal__header');
|
|
60
|
+
expect(header).toBeInTheDocument();
|
|
61
|
+
});
|
|
62
|
+
test('renders Modal.Body component', () => {
|
|
63
|
+
render(_jsx(Modal, { open: true, children: _jsx(Modal.Body, { children: "Body content" }) }));
|
|
64
|
+
expect(screen.getByText('Body content')).toBeInTheDocument();
|
|
65
|
+
const body = document.querySelector('.ds-modal__body');
|
|
66
|
+
expect(body).toBeInTheDocument();
|
|
67
|
+
});
|
|
68
|
+
test('renders Modal.Footer component', () => {
|
|
69
|
+
render(_jsx(Modal, { open: true, children: _jsx(Modal.Footer, { children: "Footer content" }) }));
|
|
70
|
+
expect(screen.getByText('Footer content')).toBeInTheDocument();
|
|
71
|
+
const footer = document.querySelector('.ds-modal__footer');
|
|
72
|
+
expect(footer).toBeInTheDocument();
|
|
73
|
+
});
|
|
74
|
+
test('renders Modal.Title component', () => {
|
|
75
|
+
render(_jsx(Modal, { open: true, children: _jsx(Modal.Header, { children: _jsx(Modal.Title, { children: "Title content" }) }) }));
|
|
76
|
+
expect(screen.getByText('Title content')).toBeInTheDocument();
|
|
77
|
+
const title = document.querySelector('.ds-modal__title');
|
|
78
|
+
expect(title).toBeInTheDocument();
|
|
79
|
+
});
|
|
80
|
+
test('renders complete modal structure with all components', () => {
|
|
81
|
+
const closeHandler = vi.fn();
|
|
82
|
+
render(_jsxs(Modal, { open: true, closeHandler: closeHandler, children: [_jsx(Modal.Header, { children: _jsx(Modal.Title, { children: "Complete Modal" }) }), _jsx(Modal.Body, { children: "This is the modal body" }), _jsx(Modal.Footer, { children: _jsx("button", { children: "Action" }) })] }));
|
|
83
|
+
expect(screen.getByText('Complete Modal')).toBeInTheDocument();
|
|
84
|
+
expect(screen.getByText('This is the modal body')).toBeInTheDocument();
|
|
85
|
+
expect(screen.getByText('Action')).toBeInTheDocument();
|
|
86
|
+
});
|
|
87
|
+
test('applies custom className to Modal.Header', () => {
|
|
88
|
+
render(_jsx(Modal, { open: true, children: _jsx(Modal.Header, { className: "custom-header", children: "Header" }) }));
|
|
89
|
+
const header = document.querySelector('.custom-header');
|
|
90
|
+
expect(header).toBeInTheDocument();
|
|
91
|
+
expect(header).toHaveClass('ds-modal__header');
|
|
92
|
+
});
|
|
93
|
+
test('applies custom className to Modal.Body', () => {
|
|
94
|
+
render(_jsx(Modal, { open: true, children: _jsx(Modal.Body, { className: "custom-body", children: "Body" }) }));
|
|
95
|
+
const body = document.querySelector('.custom-body');
|
|
96
|
+
expect(body).toBeInTheDocument();
|
|
97
|
+
expect(body).toHaveClass('ds-modal__body');
|
|
98
|
+
});
|
|
99
|
+
test('applies custom className to Modal.Footer', () => {
|
|
100
|
+
render(_jsx(Modal, { open: true, children: _jsx(Modal.Footer, { className: "custom-footer", children: "Footer" }) }));
|
|
101
|
+
const footer = document.querySelector('.custom-footer');
|
|
102
|
+
expect(footer).toBeInTheDocument();
|
|
103
|
+
expect(footer).toHaveClass('ds-modal__footer');
|
|
104
|
+
});
|
|
105
|
+
test('renders to custom portal target', () => {
|
|
106
|
+
const container = document.createElement('div');
|
|
107
|
+
container.id = 'custom-portal';
|
|
108
|
+
document.body.appendChild(container);
|
|
109
|
+
render(_jsx(Modal, { open: true, portalTarget: container, children: _jsx(Modal.Body, { children: "Portal content" }) }));
|
|
110
|
+
expect(container.querySelector('.ds-modal__overlay')).toBeInTheDocument();
|
|
111
|
+
document.body.removeChild(container);
|
|
112
|
+
});
|
|
113
|
+
test('Modal.CloseButton does not render without closeHandler', () => {
|
|
114
|
+
render(_jsxs(Modal, { open: true, children: [_jsx(Modal.Body, { children: "Content" }), _jsx(Modal.CloseButton, {})] }));
|
|
115
|
+
// Only the default close button should be present
|
|
116
|
+
const buttons = screen.queryAllByRole('button');
|
|
117
|
+
expect(buttons).toHaveLength(0);
|
|
118
|
+
});
|
|
119
|
+
test('Modal.CloseButton renders with closeHandler in context', async () => {
|
|
120
|
+
const user = userEvent.setup();
|
|
121
|
+
const closeHandler = vi.fn();
|
|
122
|
+
render(_jsxs(Modal, { open: true, closeHandler: closeHandler, children: [_jsx(Modal.Body, { children: "Content" }), _jsx(Modal.CloseButton, { className: "custom-close" })] }));
|
|
123
|
+
const closeButtons = screen.getAllByRole('button');
|
|
124
|
+
expect(closeButtons.length).toBeGreaterThan(0);
|
|
125
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
126
|
+
// @ts-ignore
|
|
127
|
+
await user.click(closeButtons[0]);
|
|
128
|
+
expect(closeHandler).toHaveBeenCalled();
|
|
129
|
+
});
|
|
130
|
+
});
|
|
131
|
+
//# sourceMappingURL=Modal.test.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Modal.test.js","sourceRoot":"","sources":["../../../src/components/modal/Modal.test.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalBody.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalBody.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,cAAc,GAAG;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,4CAO9C,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
export const ModalBody = (props) => {
|
|
4
|
+
const { className, children } = props;
|
|
5
|
+
return (_jsx("div", { className: classNames('ds-modal__body', className), children: children }));
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=ModalBody.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalBody.js","sourceRoot":"","sources":["../../../src/components/modal/ModalBody.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACjD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACtC,OAAO,CACL,cAAK,SAAS,EAAE,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,YACpD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalCloseButton.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalCloseButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGpE,eAAO,MAAM,eAAe,GAAI,OAAO,WAAW,mDAiCjD,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useContext, useEffect } from 'react';
|
|
3
|
+
import { ModalContext } from './Modal';
|
|
4
|
+
import { Button } from '../button/Button';
|
|
5
|
+
import classNames from 'classnames';
|
|
6
|
+
export const ModalCloseButon = (props) => {
|
|
7
|
+
const { className, ...rest } = props;
|
|
8
|
+
const { closeHandler } = useContext(ModalContext);
|
|
9
|
+
const handleKeyDown = (event) => {
|
|
10
|
+
if (event.key === 'Escape' && closeHandler) {
|
|
11
|
+
closeHandler();
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
document.addEventListener('keydown', handleKeyDown);
|
|
16
|
+
return () => {
|
|
17
|
+
document.removeEventListener('keydown', handleKeyDown);
|
|
18
|
+
};
|
|
19
|
+
}, [closeHandler]);
|
|
20
|
+
if (!closeHandler) {
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
return (_jsx(Button, { size: "S", onClick: closeHandler, variant: "secondary", iconRightName: "x", iconRightScreenReaderText: "Close", borderless: true, className: classNames('ds-modal__close-button', className), ...rest }));
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=ModalCloseButton.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalCloseButton.js","sourceRoot":"","sources":["../../../src/components/modal/ModalCloseButton.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,MAAM,EAAoB,MAAM,0BAA0B,CAAC;AACpE,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,KAAkB,EAAE,EAAE;IACpD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IACrC,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAElD,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;QAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,YAAY,EAAE,CAAC;YAC3C,YAAY,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAC,GAAG,EACR,OAAO,EAAE,YAAY,EACrB,OAAO,EAAC,WAAW,EACnB,aAAa,EAAC,GAAG,EACjB,yBAAyB,EAAC,OAAO,EACjC,UAAU,QACV,SAAS,EAAE,UAAU,CAAC,wBAAwB,EAAE,SAAS,CAAC,KACtD,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export type ModalFooterProps = {
|
|
3
|
+
className?: string;
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
};
|
|
6
|
+
export declare const ModalFooter: (props: ModalFooterProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
//# sourceMappingURL=ModalFooter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalFooter.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAKlD,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
export const ModalFooter = (props) => {
|
|
4
|
+
const { className, children } = props;
|
|
5
|
+
return (_jsx("footer", { className: classNames('ds-modal__footer', className), children: children }));
|
|
6
|
+
};
|
|
7
|
+
//# sourceMappingURL=ModalFooter.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalFooter.js","sourceRoot":"","sources":["../../../src/components/modal/ModalFooter.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACtC,OAAO,CACL,iBAAQ,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,YAAG,QAAQ,GAAU,CAClF,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
export type ModalHeaderProps = {
|
|
3
|
+
className?: string;
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
};
|
|
6
|
+
export declare const ModalHeader: (props: ModalHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
//# sourceMappingURL=ModalHeader.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,MAAM,gBAAgB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAWlD,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import {} from 'react';
|
|
3
|
+
import classNames from 'classnames';
|
|
4
|
+
export const ModalHeader = (props) => {
|
|
5
|
+
const { className, children, } = props;
|
|
6
|
+
return (_jsx("header", { className: classNames('ds-modal__header', className), children: children }));
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=ModalHeader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalHeader.js","sourceRoot":"","sources":["../../../src/components/modal/ModalHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,UAAU,MAAM,YAAY,CAAC;AAOpC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EACJ,SAAS,EACT,QAAQ,GACT,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,iBAAQ,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,YACzD,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalTitle.d.ts","sourceRoot":"","sources":["../../../src/components/modal/ModalTitle.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,CAAC,gBAAgB,4CAQxD,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import classNames from 'classnames';
|
|
3
|
+
import { Dialog } from 'radix-ui';
|
|
4
|
+
export const ModalTitle = (props) => {
|
|
5
|
+
const { children, className, ...rest } = props;
|
|
6
|
+
return (_jsx(Dialog.Title, { className: classNames('ds-modal__title', className), ...rest, children: children }));
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=ModalTitle.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalTitle.js","sourceRoot":"","sources":["../../../src/components/modal/ModalTitle.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,KAA8B,EAAE,EAAE;IAC3D,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAE/C,OAAO,CACL,KAAC,MAAM,CAAC,KAAK,IAAC,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,KAAM,IAAI,YACxE,QAAQ,GACI,CAChB,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { type ModalProps } from '../../modal/Modal';
|
|
2
|
+
type ModalManagerProps = {
|
|
3
|
+
modal?: ModalProps;
|
|
4
|
+
};
|
|
5
|
+
export declare const ModalManager: (props: ModalManagerProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export {};
|
|
7
|
+
//# sourceMappingURL=ModalManager.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalManager.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modalManager/ModalManager.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKhE,KAAK,iBAAiB,GAAG;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CA8BpD,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Modal } from '../../modal/Modal';
|
|
3
|
+
import { useEffect, useRef, useState } from 'react';
|
|
4
|
+
import { MODAL } from '../../../utils/Constants';
|
|
5
|
+
import { usePubSub } from '../../../utils/hooks/usePubSub';
|
|
6
|
+
export const ModalManager = (props) => {
|
|
7
|
+
const { modal: initialModal } = props;
|
|
8
|
+
const [modal, setModal] = useState(() => initialModal);
|
|
9
|
+
const modalManagerContainerRef = useRef(null);
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
setModal(initialModal);
|
|
12
|
+
}, [initialModal]);
|
|
13
|
+
const hasModal = !!modal;
|
|
14
|
+
usePubSub(MODAL.ADD_MODAL, (newModal) => {
|
|
15
|
+
setModal(newModal);
|
|
16
|
+
});
|
|
17
|
+
usePubSub(MODAL.REMOVE_MODAL, () => {
|
|
18
|
+
setModal(undefined);
|
|
19
|
+
});
|
|
20
|
+
return (_jsx("div", { ref: modalManagerContainerRef, className: "ds-modal-manager", children: _jsx(Modal, { ...modal, open: hasModal, portalTarget: modalManagerContainerRef.current, closeHandler: () => setModal(undefined) }) }));
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=ModalManager.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalManager.js","sourceRoot":"","sources":["../../../../src/components/modal/modalManager/ModalManager.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAmB,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAMlD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,KAAwB,EAAE,EAAE;IACvD,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IACtC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAyB,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;IAE/E,MAAM,wBAAwB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE9D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,YAAY,CAAC,CAAC;IACzB,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,QAAQ,GAAG,CAAC,CAAC,KAAK,CAAC;IAEzB,SAAS,CAAC,KAAK,CAAC,SAAS,EAAE,CAAC,QAAoB,EAAE,EAAE;QAClD,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrB,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,KAAK,CAAC,YAAY,EAAE,GAAG,EAAE;QACjC,QAAQ,CAAC,SAAS,CAAC,CAAC;IACtB,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,GAAG,EAAE,wBAAwB,EAAE,SAAS,EAAC,kBAAkB,YAC9D,KAAC,KAAK,OACA,KAAK,EACT,IAAI,EAAE,QAAQ,EACd,YAAY,EAAE,wBAAwB,CAAC,OAAO,EAC9C,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,GACvC,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
declare const meta: Meta;
|
|
3
|
+
export default meta;
|
|
4
|
+
type Story = StoryObj;
|
|
5
|
+
export declare const Default: Story;
|
|
6
|
+
export declare const WithHeaderAndFooter: Story;
|
|
7
|
+
export declare const WithSections: Story;
|
|
8
|
+
export declare const WithFormFields: Story;
|
|
9
|
+
export declare const WithScrollableContent: Story;
|
|
10
|
+
export declare const DestructiveAction: Story;
|
|
11
|
+
export declare const SimpleConfirmation: Story;
|
|
12
|
+
export declare const ExampleErrorModal: Story;
|
|
13
|
+
//# sourceMappingURL=ModalManager.stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ModalManager.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/modal/modalManager/ModalManager.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAWvD,QAAA,MAAM,IAAI,EAAE,IAYX,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC;AAkBtB,eAAO,MAAM,OAAO,EAAE,KAuBrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA4CjC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA2C1B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAoE5B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KA4GnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA+C/B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA4ChC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA4D/B,CAAC"}
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { ModalManager } from './ModalManager';
|
|
3
|
+
import { ModalUtils } from '../../../utils/ModalUtils';
|
|
4
|
+
import { Button } from '../../button/Button';
|
|
5
|
+
import { Section } from '../../section/Section';
|
|
6
|
+
import { FormField } from '../../formField/FormField';
|
|
7
|
+
import { generateUuid } from '../../../utils/generateUuid';
|
|
8
|
+
import { Modal } from '../Modal';
|
|
9
|
+
import { fn } from 'storybook/test';
|
|
10
|
+
import { Icon } from '../../icon/Icon';
|
|
11
|
+
const meta = {
|
|
12
|
+
title: 'Components/Modals/ModalManager',
|
|
13
|
+
parameters: {
|
|
14
|
+
layout: 'fullscreen',
|
|
15
|
+
docs: {
|
|
16
|
+
description: {
|
|
17
|
+
component: 'The ModalManager is a container that manages the display of modals. It listens for events to add or remove modals.',
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
tags: ['autodocs'],
|
|
22
|
+
};
|
|
23
|
+
export default meta;
|
|
24
|
+
let modalCount = 0;
|
|
25
|
+
const addModalWithContent = (content) => {
|
|
26
|
+
modalCount++;
|
|
27
|
+
ModalUtils.addModal({
|
|
28
|
+
children: content,
|
|
29
|
+
});
|
|
30
|
+
};
|
|
31
|
+
const removeModal = () => {
|
|
32
|
+
if (modalCount > 0) {
|
|
33
|
+
modalCount--;
|
|
34
|
+
}
|
|
35
|
+
ModalUtils.removeModal();
|
|
36
|
+
};
|
|
37
|
+
export const Default = {
|
|
38
|
+
render: () => (_jsxs(_Fragment, { children: [_jsx(ModalManager, {}), _jsx("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: _jsx(Button, { onClick: () => addModalWithContent(_jsxs(_Fragment, { children: [_jsx(Modal.Header, { children: _jsx(Modal.Title, { children: "Simple Modal" }) }), _jsx(Modal.Body, { children: _jsx("p", { children: "This is a simple modal with basic content." }) })] })), children: "Open Simple Modal" }) })] })),
|
|
39
|
+
};
|
|
40
|
+
export const WithHeaderAndFooter = {
|
|
41
|
+
render: () => {
|
|
42
|
+
const handleSave = () => {
|
|
43
|
+
alert('Save clicked!');
|
|
44
|
+
ModalUtils.removeModal();
|
|
45
|
+
};
|
|
46
|
+
const handleCancel = () => {
|
|
47
|
+
ModalUtils.removeModal();
|
|
48
|
+
};
|
|
49
|
+
return (_jsxs(_Fragment, { children: [_jsx(ModalManager, {}), _jsx("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: _jsx(Button, { onClick: () => addModalWithContent(_jsxs(_Fragment, { children: [_jsx(Modal.Header, { children: _jsx(Modal.Title, { children: "Modal with Header and Footer" }) }), _jsx(Modal.Body, { children: _jsx("p", { children: "This modal has both a header with a close button and a footer with action buttons." }) }), _jsx(Modal.Footer, { children: _jsxs("div", { style: { display: 'flex', gap: '1rem', justifyContent: 'flex-end' }, children: [_jsx(Button, { variant: "secondary", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: handleSave, children: "Save Changes" })] }) })] })), children: "Open Modal with Footer" }) })] }));
|
|
50
|
+
},
|
|
51
|
+
};
|
|
52
|
+
export const WithSections = {
|
|
53
|
+
render: () => (_jsxs(_Fragment, { children: [_jsx(ModalManager, {}), _jsx("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: _jsx(Button, { onClick: () => addModalWithContent(_jsxs(_Fragment, { children: [_jsx(Modal.Header, { children: _jsx(Modal.Title, { children: "Modal with Sections" }) }), _jsxs(Modal.Body, { children: [_jsx(Section, { title: "Section 1", collapsible: true, children: _jsx("p", { children: "Aliquip ea tempor officia irure do qui culpa. Laborum proident laboris aliqua ad Lorem eiusmod fugiat dolore qui occaecat adipisicing. Dolore quis nisi occaecat commodo labore ad nulla aliquip in. Enim labore nisi laborum nostrud officia ad nulla ut quis. Aute excepteur quis amet aliquip. Excepteur Lorem cupidatat adipisicing consectetur ipsum Lorem." }) }), _jsx(Section, { title: "Section 2", collapsible: true, collapsed: true, children: _jsx("p", { children: "Veniam adipisicing culpa id esse duis in officia consequat veniam ad ullamco sint sunt anim. Incididunt exercitation dolor Lorem anim aute ad deserunt. Nulla culpa sint aliqua ea Lorem sint. Elit sit consectetur minim cillum consectetur pariatur Lorem labore consectetur nisi consectetur officia exercitation. Est consectetur commodo deserunt ipsum aliqua occaecat qui sunt consectetur." }) }), _jsx(Section, { title: "Section 3", collapsible: true, children: _jsx("p", { children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo." }) })] })] })), children: "Open Modal with Sections" }) })] })),
|
|
54
|
+
};
|
|
55
|
+
export const WithFormFields = {
|
|
56
|
+
render: () => {
|
|
57
|
+
const handleSubmit = () => {
|
|
58
|
+
alert('Form submitted!');
|
|
59
|
+
ModalUtils.removeModal();
|
|
60
|
+
};
|
|
61
|
+
return (_jsxs(_Fragment, { children: [_jsx(ModalManager, {}), _jsx("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: _jsx(Button, { onClick: () => addModalWithContent(_jsxs(_Fragment, { children: [_jsx(Modal.Header, { children: _jsx(Modal.Title, { children: "User Information Form" }) }), _jsxs(Modal.Body, { children: [_jsx(FormField, { id: generateUuid(), label: "Your Name", inputType: "text", inputProps: { placeholder: 'e.g. Jane Doe' }, fieldDescription: "Please enter your full name." }), _jsx(FormField, { id: generateUuid(), label: "Email Address", inputType: "text", inputProps: { placeholder: 'e.g. jane@example.com', type: 'email' } }), _jsx(FormField, { id: generateUuid(), label: "Message", inputType: "textarea", inputProps: { placeholder: 'Enter your message here...', rows: 4 }, fieldDescription: "Maximum 500 characters." }), _jsx(FormField, { id: generateUuid(), label: "Password", inputType: "selectDropdown", inputProps: {
|
|
62
|
+
options: [{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }, { label: 'Option 3', value: 'option3' }],
|
|
63
|
+
onSelectionChange: fn(),
|
|
64
|
+
} })] }), _jsx(Modal.Footer, { children: _jsxs("div", { style: { display: 'flex', gap: '1rem', justifyContent: 'flex-end' }, children: [_jsx(Button, { variant: "secondary", onClick: removeModal, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: handleSubmit, children: "Submit" })] }) })] })), children: "Open Form Modal" }) })] }));
|
|
65
|
+
},
|
|
66
|
+
};
|
|
67
|
+
export const WithScrollableContent = {
|
|
68
|
+
render: () => {
|
|
69
|
+
const handleClose = () => {
|
|
70
|
+
ModalUtils.removeModal();
|
|
71
|
+
};
|
|
72
|
+
return (_jsxs(_Fragment, { children: [_jsx(ModalManager, {}), _jsx("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: _jsx(Button, { onClick: () => addModalWithContent(_jsxs(_Fragment, { children: [_jsx(Modal.Header, { children: _jsx(Modal.Title, { children: "Long Content Modal" }) }), _jsxs(Modal.Body, { children: [_jsx(Section, { title: "Introduction", collapsible: true, children: _jsx("p", { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." }) }), _jsxs(Section, { title: "Details", collapsible: true, children: [_jsx("p", { children: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." }), _jsx(FormField, { id: generateUuid(), label: "Field 1", inputType: "text", inputProps: { placeholder: 'Enter value' } }), _jsx(FormField, { id: generateUuid(), label: "Field 2", inputType: "text", inputProps: { placeholder: 'Enter value' } })] }), _jsxs(Section, { title: "Additional Information", collapsible: true, children: [_jsx("p", { children: "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt." }), _jsx(FormField, { id: generateUuid(), label: "Long Text Field", inputType: "textarea", inputProps: { placeholder: 'Enter long text', rows: 6 } })] }), _jsxs(Section, { title: "More Content", collapsible: true, children: [_jsx("p", { children: "Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam." }), _jsx(FormField, { id: generateUuid(), label: "Field 3", inputType: "number", inputProps: { placeholder: 'Enter number' } }), _jsx(FormField, { id: generateUuid(), label: "Field 4", inputType: "text", inputProps: { placeholder: 'Enter value' } })] }), _jsxs(Section, { title: "Final Section", collapsible: true, collapsed: true, children: [_jsx("p", { children: "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga." }), _jsx(FormField, { id: generateUuid(), label: "Final Field", inputType: "text", inputProps: { placeholder: 'Enter value' } })] })] }), _jsx(Modal.Footer, { children: _jsxs("div", { style: { display: 'flex', gap: '1rem', justifyContent: 'flex-end' }, children: [_jsx(Button, { variant: "secondary", onClick: handleClose, children: "Close" }), _jsx(Button, { variant: "primary", onClick: handleClose, children: "Save" })] }) })] })), children: "Open Scrollable Modal" }) })] }));
|
|
73
|
+
},
|
|
74
|
+
};
|
|
75
|
+
export const DestructiveAction = {
|
|
76
|
+
render: () => {
|
|
77
|
+
const handleDelete = () => {
|
|
78
|
+
alert('Item deleted!');
|
|
79
|
+
ModalUtils.removeModal();
|
|
80
|
+
};
|
|
81
|
+
const handleCancel = () => {
|
|
82
|
+
ModalUtils.removeModal();
|
|
83
|
+
};
|
|
84
|
+
return (_jsxs(_Fragment, { children: [_jsx(ModalManager, {}), _jsx("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: _jsx(Button, { onClick: () => addModalWithContent(_jsxs(_Fragment, { children: [_jsx(Modal.Header, { children: _jsx(Modal.Title, { children: "Confirm Deletion" }) }), _jsxs(Modal.Body, { children: [_jsx("p", { children: "Are you sure you want to delete this item? This action cannot be undone." }), _jsx("p", { style: { marginTop: '1rem', fontWeight: 'bold' }, children: "Item: Important Document.pdf" })] }), _jsx(Modal.Footer, { children: _jsxs("div", { style: { display: 'flex', gap: '1rem', justifyContent: 'flex-end' }, children: [_jsx(Button, { variant: "secondary", onClick: handleCancel, children: "Cancel" }), _jsx(Button, { variant: "primary-destructive", onClick: handleDelete, children: "Delete" })] }) })] })), children: "Open Deletion Confirmation Modal" }) })] }));
|
|
85
|
+
},
|
|
86
|
+
};
|
|
87
|
+
export const SimpleConfirmation = {
|
|
88
|
+
render: () => {
|
|
89
|
+
const handleConfirm = () => {
|
|
90
|
+
alert('Confirmed!');
|
|
91
|
+
ModalUtils.removeModal();
|
|
92
|
+
};
|
|
93
|
+
const handleCancel = () => {
|
|
94
|
+
ModalUtils.removeModal();
|
|
95
|
+
};
|
|
96
|
+
return (_jsxs(_Fragment, { children: [_jsx(ModalManager, {}), _jsx("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: _jsx(Button, { onClick: () => addModalWithContent(_jsxs(_Fragment, { children: [_jsx(Modal.Header, { children: _jsx(Modal.Title, { children: "Confirm Action" }) }), _jsx(Modal.Body, { children: _jsx("p", { children: "Are you sure you want to proceed with this action?" }) }), _jsx(Modal.Footer, { children: _jsxs("div", { style: { display: 'flex', gap: '1rem', justifyContent: 'flex-end' }, children: [_jsx(Button, { variant: "secondary", onClick: handleCancel, children: "No" }), _jsx(Button, { variant: "primary", onClick: handleConfirm, children: "Yes" })] }) })] })), children: "Open Confirmation Modal" }) })] }));
|
|
97
|
+
},
|
|
98
|
+
};
|
|
99
|
+
export const ExampleErrorModal = {
|
|
100
|
+
render: () => {
|
|
101
|
+
const handleConfirm = () => {
|
|
102
|
+
ModalUtils.removeModal();
|
|
103
|
+
};
|
|
104
|
+
const handleCancel = () => {
|
|
105
|
+
ModalUtils.removeModal();
|
|
106
|
+
};
|
|
107
|
+
return (_jsxs(_Fragment, { children: [_jsx(ModalManager, {}), _jsx("div", { style: { padding: '1rem', display: 'flex', gap: '1rem' }, children: _jsx(Button, { onClick: () => addModalWithContent(_jsxs(_Fragment, { children: [_jsxs(Modal.Header, { children: [_jsx(Icon, { name: "triangle-alert", size: 24, color: "var(--color-semantic-destructive-500)" }), _jsx(Modal.Title, { children: "Sorry, we can\u2019t find this page" })] }), _jsxs(Modal.Body, { children: [_jsxs("span", { children: [_jsx("b", { children: "Please try finding the page using the navigation." }), ' ', "If you can't find what you're looking for, there are two options depending on your support plan:"] }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("b", { children: "Arbor supported:" }), ' ', "Press here to send an email to our Support Team using our Contact Us form (the error ID will be added automatically)."] }), _jsxs("li", { children: [_jsx("b", { children: "Partner supported:" }), ' ', "Please get in touch with your Support Partner, and let them know the error ID below."] })] }), _jsx("span", { children: "ID:f47ecbd4-319b-11f0-a5ae-06f9b8bc5d95" })] }), _jsx(Modal.Footer, { children: _jsxs("div", { style: { display: 'flex', gap: '1rem', justifyContent: 'flex-end' }, children: [_jsx(Button, { variant: "tertiary", onClick: handleCancel, children: "Close" }), _jsx(Button, { variant: "primary", onClick: handleConfirm, children: "Primary Action" })] }) })] })), children: "Open Deletion Confirmation Modal" }) })] }));
|
|
108
|
+
},
|
|
109
|
+
};
|
|
110
|
+
//# sourceMappingURL=ModalManager.stories.js.map
|