@indico-data/design-system 3.0.0 → 3.0.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/lib/components/modal/ConfirmationModal.d.ts +1 -1
- package/lib/components/modal/Modal.stories.d.ts +1 -0
- package/lib/components/modal/types.d.ts +5 -2
- package/lib/index.css +22 -22
- package/lib/index.d.ts +6 -3
- package/lib/index.esm.css +22 -22
- package/lib/index.esm.js +6 -2
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +6 -2
- package/lib/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/modal/ConfirmationModal.tsx +31 -2
- package/src/components/modal/Modal.stories.tsx +69 -0
- package/src/components/modal/types.ts +7 -3
- package/src/styles/variables/themes/dark.scss +11 -11
- package/src/styles/variables/themes/light.scss +11 -12
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { ConfirmationModalProps } from './types';
|
|
2
|
-
export declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText, cancelButtonText, confirmationButtonVariant, icon, title, status, maxWidthInPixels, }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText, cancelButtonText, confirmationButtonVariant, icon, title, status, maxWidthInPixels, hasDontShowAgainCheckbox, }: ConfirmationModalProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -6,3 +6,4 @@ export default meta;
|
|
|
6
6
|
type Story = StoryObj<typeof Modal>;
|
|
7
7
|
export declare const Default: Story;
|
|
8
8
|
export declare const ConfirmationModalStory: StoryObj<typeof ConfirmationModal>;
|
|
9
|
+
export declare const ConfirmationModalStoryWithCheckbox: StoryObj<typeof ConfirmationModal>;
|
|
@@ -21,8 +21,11 @@ export interface ModalProps {
|
|
|
21
21
|
maxWidthInPixels?: number;
|
|
22
22
|
}
|
|
23
23
|
export interface ConfirmationModalProps extends ModalProps {
|
|
24
|
-
onConfirmRequest?: (
|
|
25
|
-
|
|
24
|
+
onConfirmRequest?: ({ dontShowAgain, }: {
|
|
25
|
+
dontShowAgain?: boolean;
|
|
26
|
+
}) => void | Promise<void> | Promise<boolean>;
|
|
27
|
+
onCancelRequest?: () => void | Promise<void> | Promise<boolean>;
|
|
28
|
+
hasDontShowAgainCheckbox?: boolean;
|
|
26
29
|
confirmationButtonVariant?: ButtonVariants;
|
|
27
30
|
confirmationButtonText?: string;
|
|
28
31
|
cancelButtonText?: string;
|
package/lib/index.css
CHANGED
|
@@ -173,20 +173,20 @@
|
|
|
173
173
|
--pf-teal-color-700: #235252;
|
|
174
174
|
--pf-teal-color-800: #1b3232;
|
|
175
175
|
--pf-teal-color-900: #101818;
|
|
176
|
-
--pf-brand-color: #
|
|
176
|
+
--pf-brand-color: #2989ff;
|
|
177
177
|
--pf-brand-color-50: #f6fafd;
|
|
178
178
|
--pf-brand-color-100: #eef4fc;
|
|
179
|
-
--pf-brand-color-150: #
|
|
180
|
-
--pf-brand-color-200: #
|
|
181
|
-
--pf-brand-color-250: #
|
|
182
|
-
--pf-brand-color-300: #
|
|
183
|
-
--pf-brand-color-400: #
|
|
179
|
+
--pf-brand-color-150: #e5effa;
|
|
180
|
+
--pf-brand-color-200: #d8e9fd;
|
|
181
|
+
--pf-brand-color-250: #bbd8fb;
|
|
182
|
+
--pf-brand-color-300: #9ec7fa;
|
|
183
|
+
--pf-brand-color-400: #2989ff;
|
|
184
184
|
--pf-brand-color-450: #0070f5;
|
|
185
|
-
--pf-brand-color-500: #
|
|
186
|
-
--pf-brand-color-600: #
|
|
187
|
-
--pf-brand-color-700: #
|
|
188
|
-
--pf-brand-color-800: #
|
|
189
|
-
--pf-brand-color-900: #
|
|
185
|
+
--pf-brand-color-500: #005ccc;
|
|
186
|
+
--pf-brand-color-600: #004599;
|
|
187
|
+
--pf-brand-color-700: #06356f;
|
|
188
|
+
--pf-brand-color-800: #082345;
|
|
189
|
+
--pf-brand-color-900: #061323;
|
|
190
190
|
--pf-purple-color: #5c29a3;
|
|
191
191
|
--pf-purple-color-50: #f9f6fc;
|
|
192
192
|
--pf-purple-color-100: #f4f0fa;
|
|
@@ -382,20 +382,20 @@
|
|
|
382
382
|
--pf-teal-color-700: #235252;
|
|
383
383
|
--pf-teal-color-800: #1b3232;
|
|
384
384
|
--pf-teal-color-900: #101818;
|
|
385
|
-
--pf-brand-color: #
|
|
385
|
+
--pf-brand-color: #2989ff;
|
|
386
386
|
--pf-brand-color-50: #f6fafd;
|
|
387
387
|
--pf-brand-color-100: #eef4fc;
|
|
388
|
-
--pf-brand-color-150: #
|
|
389
|
-
--pf-brand-color-200: #
|
|
390
|
-
--pf-brand-color-250: #
|
|
391
|
-
--pf-brand-color-300: #
|
|
392
|
-
--pf-brand-color-400: #
|
|
388
|
+
--pf-brand-color-150: #e5effa;
|
|
389
|
+
--pf-brand-color-200: #d8e9fd;
|
|
390
|
+
--pf-brand-color-250: #bbd8fb;
|
|
391
|
+
--pf-brand-color-300: #9ec7fa;
|
|
392
|
+
--pf-brand-color-400: #2989ff;
|
|
393
393
|
--pf-brand-color-450: #0070f5;
|
|
394
|
-
--pf-brand-color-500: #
|
|
395
|
-
--pf-brand-color-600: #
|
|
396
|
-
--pf-brand-color-700: #
|
|
397
|
-
--pf-brand-color-800: #
|
|
398
|
-
--pf-brand-color-900: #
|
|
394
|
+
--pf-brand-color-500: #005ccc;
|
|
395
|
+
--pf-brand-color-600: #004599;
|
|
396
|
+
--pf-brand-color-700: #06356f;
|
|
397
|
+
--pf-brand-color-800: #082345;
|
|
398
|
+
--pf-brand-color-900: #061323;
|
|
399
399
|
--pf-purple-color: #5c29a3;
|
|
400
400
|
--pf-purple-color-50: #f9f6fc;
|
|
401
401
|
--pf-purple-color-100: #f4f0fa;
|
package/lib/index.d.ts
CHANGED
|
@@ -564,8 +564,11 @@ interface ModalProps {
|
|
|
564
564
|
maxWidthInPixels?: number;
|
|
565
565
|
}
|
|
566
566
|
interface ConfirmationModalProps extends ModalProps {
|
|
567
|
-
onConfirmRequest?: (
|
|
568
|
-
|
|
567
|
+
onConfirmRequest?: ({ dontShowAgain, }: {
|
|
568
|
+
dontShowAgain?: boolean;
|
|
569
|
+
}) => void | Promise<void> | Promise<boolean>;
|
|
570
|
+
onCancelRequest?: () => void | Promise<void> | Promise<boolean>;
|
|
571
|
+
hasDontShowAgainCheckbox?: boolean;
|
|
569
572
|
confirmationButtonVariant?: ButtonVariants;
|
|
570
573
|
confirmationButtonText?: string;
|
|
571
574
|
cancelButtonText?: string;
|
|
@@ -575,7 +578,7 @@ interface ConfirmationModalProps extends ModalProps {
|
|
|
575
578
|
|
|
576
579
|
declare const Modal: ({ className, children, isOpen, onRequestClose, portalClassName, overlayClassName, appElement, shouldCloseOnOverlayClick, shouldCloseOnEsc, testId, contentElement, overlayElement, position, parentSelector, title, subtitle, footer, maxWidthInPixels, ...rest }: ModalProps) => react_jsx_runtime.JSX.Element;
|
|
577
580
|
|
|
578
|
-
declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText, cancelButtonText, confirmationButtonVariant, icon, title, status, maxWidthInPixels, }: ConfirmationModalProps) => react_jsx_runtime.JSX.Element;
|
|
581
|
+
declare const ConfirmationModal: ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText, cancelButtonText, confirmationButtonVariant, icon, title, status, maxWidthInPixels, hasDontShowAgainCheckbox, }: ConfirmationModalProps) => react_jsx_runtime.JSX.Element;
|
|
579
582
|
|
|
580
583
|
type WithPaginationProps = {
|
|
581
584
|
rowsPerPage: number;
|
package/lib/index.esm.css
CHANGED
|
@@ -173,20 +173,20 @@
|
|
|
173
173
|
--pf-teal-color-700: #235252;
|
|
174
174
|
--pf-teal-color-800: #1b3232;
|
|
175
175
|
--pf-teal-color-900: #101818;
|
|
176
|
-
--pf-brand-color: #
|
|
176
|
+
--pf-brand-color: #2989ff;
|
|
177
177
|
--pf-brand-color-50: #f6fafd;
|
|
178
178
|
--pf-brand-color-100: #eef4fc;
|
|
179
|
-
--pf-brand-color-150: #
|
|
180
|
-
--pf-brand-color-200: #
|
|
181
|
-
--pf-brand-color-250: #
|
|
182
|
-
--pf-brand-color-300: #
|
|
183
|
-
--pf-brand-color-400: #
|
|
179
|
+
--pf-brand-color-150: #e5effa;
|
|
180
|
+
--pf-brand-color-200: #d8e9fd;
|
|
181
|
+
--pf-brand-color-250: #bbd8fb;
|
|
182
|
+
--pf-brand-color-300: #9ec7fa;
|
|
183
|
+
--pf-brand-color-400: #2989ff;
|
|
184
184
|
--pf-brand-color-450: #0070f5;
|
|
185
|
-
--pf-brand-color-500: #
|
|
186
|
-
--pf-brand-color-600: #
|
|
187
|
-
--pf-brand-color-700: #
|
|
188
|
-
--pf-brand-color-800: #
|
|
189
|
-
--pf-brand-color-900: #
|
|
185
|
+
--pf-brand-color-500: #005ccc;
|
|
186
|
+
--pf-brand-color-600: #004599;
|
|
187
|
+
--pf-brand-color-700: #06356f;
|
|
188
|
+
--pf-brand-color-800: #082345;
|
|
189
|
+
--pf-brand-color-900: #061323;
|
|
190
190
|
--pf-purple-color: #5c29a3;
|
|
191
191
|
--pf-purple-color-50: #f9f6fc;
|
|
192
192
|
--pf-purple-color-100: #f4f0fa;
|
|
@@ -382,20 +382,20 @@
|
|
|
382
382
|
--pf-teal-color-700: #235252;
|
|
383
383
|
--pf-teal-color-800: #1b3232;
|
|
384
384
|
--pf-teal-color-900: #101818;
|
|
385
|
-
--pf-brand-color: #
|
|
385
|
+
--pf-brand-color: #2989ff;
|
|
386
386
|
--pf-brand-color-50: #f6fafd;
|
|
387
387
|
--pf-brand-color-100: #eef4fc;
|
|
388
|
-
--pf-brand-color-150: #
|
|
389
|
-
--pf-brand-color-200: #
|
|
390
|
-
--pf-brand-color-250: #
|
|
391
|
-
--pf-brand-color-300: #
|
|
392
|
-
--pf-brand-color-400: #
|
|
388
|
+
--pf-brand-color-150: #e5effa;
|
|
389
|
+
--pf-brand-color-200: #d8e9fd;
|
|
390
|
+
--pf-brand-color-250: #bbd8fb;
|
|
391
|
+
--pf-brand-color-300: #9ec7fa;
|
|
392
|
+
--pf-brand-color-400: #2989ff;
|
|
393
393
|
--pf-brand-color-450: #0070f5;
|
|
394
|
-
--pf-brand-color-500: #
|
|
395
|
-
--pf-brand-color-600: #
|
|
396
|
-
--pf-brand-color-700: #
|
|
397
|
-
--pf-brand-color-800: #
|
|
398
|
-
--pf-brand-color-900: #
|
|
394
|
+
--pf-brand-color-500: #005ccc;
|
|
395
|
+
--pf-brand-color-600: #004599;
|
|
396
|
+
--pf-brand-color-700: #06356f;
|
|
397
|
+
--pf-brand-color-800: #082345;
|
|
398
|
+
--pf-brand-color-900: #061323;
|
|
399
399
|
--pf-purple-color: #5c29a3;
|
|
400
400
|
--pf-purple-color-50: #f9f6fc;
|
|
401
401
|
--pf-purple-color-100: #f4f0fa;
|
package/lib/index.esm.js
CHANGED
|
@@ -21044,8 +21044,9 @@ const Modal = (_a) => {
|
|
|
21044
21044
|
return (jsx(ReactModal, Object.assign({ className: modalClasses, overlayClassName: overlayClasses, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement }, rest, { children: jsxs("div", { className: "modal-content", style: { maxWidth: `${maxWidthInPixels}px` }, children: [jsx(Button$1, { className: "modal-close-button", onClick: onRequestClose, variant: "link", size: "md", iconLeft: "x-close", ariaLabel: "Close" }), hasHeader && (jsx("div", { className: "modal-header", children: jsx(Row, { justify: "between", align: "center", children: jsxs(Col, { children: [title && jsx("h2", { className: "modal-title", children: title }), subtitle && jsx("p", { className: "modal-subtitle", children: subtitle })] }) }) })), jsx("div", { className: "modal-body", children: children }), footer && jsx("div", { className: "modal-footer", children: footer })] }) })));
|
|
21045
21045
|
};
|
|
21046
21046
|
|
|
21047
|
-
const defaultFooter = ({ onCancelRequest, onConfirmRequest, confirmationButtonText, confirmationButtonVariant, cancelButtonText, }) => (jsxs(Row, { gutterWidth: 12, justify: "end", align: "center", children: [jsx(Col, { xs: "content", children: jsx(Button$1, { onClick: onCancelRequest, ariaLabel: cancelButtonText || 'Cancel', variant: "outline", children: cancelButtonText }) }), jsx(Col, { xs: "content", children: jsx(Button$1, { onClick: onConfirmRequest, ariaLabel: confirmationButtonText || 'Confirm', variant: confirmationButtonVariant, children: confirmationButtonText }) })] }));
|
|
21048
|
-
const ConfirmationModal = ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText = 'Confirm', cancelButtonText = 'Cancel', confirmationButtonVariant = 'solid', icon, title, status = 'info', maxWidthInPixels, }) => {
|
|
21047
|
+
const defaultFooter = ({ onCancelRequest, onConfirmRequest, confirmationButtonText, confirmationButtonVariant, cancelButtonText, hasDontShowAgainCheckbox, isChecked, onDontShowAgainChange, }) => (jsxs(Row, { gutterWidth: 12, justify: "end", align: "center", children: [hasDontShowAgainCheckbox && (jsx(Col, { children: jsx(Checkbox, { label: "Don't display this again.", onChange: (e) => onDontShowAgainChange === null || onDontShowAgainChange === void 0 ? void 0 : onDontShowAgainChange(e.target.checked), isChecked: isChecked, id: "dont-show-again", name: "dont-show-again" }) })), jsx(Col, { xs: "content", children: jsx(Button$1, { onClick: onCancelRequest, ariaLabel: cancelButtonText || 'Cancel', variant: "outline", children: cancelButtonText }) }), jsx(Col, { xs: "content", children: jsx(Button$1, { onClick: () => onConfirmRequest === null || onConfirmRequest === void 0 ? void 0 : onConfirmRequest({ dontShowAgain: isChecked }), ariaLabel: confirmationButtonText || 'Confirm', variant: confirmationButtonVariant, children: confirmationButtonText }) })] }));
|
|
21048
|
+
const ConfirmationModal = ({ className, overlayClassName, testId, isOpen, onRequestClose, portalClassName, appElement, parentSelector, shouldCloseOnOverlayClick, shouldCloseOnEsc, contentElement, overlayElement, footer, children, onConfirmRequest, onCancelRequest, confirmationButtonText = 'Confirm', cancelButtonText = 'Cancel', confirmationButtonVariant = 'solid', icon, title, status = 'info', maxWidthInPixels, hasDontShowAgainCheckbox, }) => {
|
|
21049
|
+
const [dontShowAgain, setDontShowAgain] = useState(false);
|
|
21049
21050
|
const modalFooter = footer ||
|
|
21050
21051
|
defaultFooter({
|
|
21051
21052
|
onCancelRequest,
|
|
@@ -21053,6 +21054,9 @@ const ConfirmationModal = ({ className, overlayClassName, testId, isOpen, onRequ
|
|
|
21053
21054
|
confirmationButtonText,
|
|
21054
21055
|
cancelButtonText,
|
|
21055
21056
|
confirmationButtonVariant,
|
|
21057
|
+
hasDontShowAgainCheckbox,
|
|
21058
|
+
isChecked: dontShowAgain,
|
|
21059
|
+
onDontShowAgainChange: setDontShowAgain,
|
|
21056
21060
|
});
|
|
21057
21061
|
return (jsxs(Modal, { className: classNames('confirmation-modal', className), overlayClassName: overlayClassName, testId: testId, isOpen: isOpen, onRequestClose: onRequestClose, portalClassName: portalClassName, appElement: appElement, parentSelector: parentSelector, shouldCloseOnOverlayClick: shouldCloseOnOverlayClick, shouldCloseOnEsc: shouldCloseOnEsc, contentElement: contentElement, overlayElement: overlayElement, footer: modalFooter, maxWidthInPixels: maxWidthInPixels, children: [icon && (jsx(Icon, { name: icon, className: classNames('confirmation-modal-icon', `color-${status}`), size: "xl" })), title && jsx("h2", { className: "confirmation-modal-title", children: title }), children] }));
|
|
21058
21062
|
};
|