@openedx/paragon 22.16.2 → 22.17.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Modal/ModalDialog.d.ts +2 -2
- package/dist/Modal/ModalDialog.js +2 -2
- package/dist/Modal/ModalDialog.js.map +1 -1
- package/package.json +1 -1
- package/src/Modal/ModalDialog.tsx +3 -3
- package/src/Modal/README.md +1 -1
- package/src/Modal/alert-modal.mdx +4 -0
- package/src/Modal/fullscreen-modal.mdx +1 -0
- package/src/Modal/marketing-modal.mdx +1 -0
- package/src/Modal/modal-dialog.mdx +2 -0
- package/src/Modal/standard-modal.mdx +1 -0
- package/src/Modal/tests/AlertModal.test.jsx +4 -0
- package/src/Modal/tests/ModalDialog.test.tsx +3 -0
|
@@ -33,7 +33,7 @@ interface Props {
|
|
|
33
33
|
/** Specifies the z-index of the modal */
|
|
34
34
|
zIndex?: number;
|
|
35
35
|
/** Specifies whether overflow is visible in the modal */
|
|
36
|
-
isOverflowVisible
|
|
36
|
+
isOverflowVisible: boolean;
|
|
37
37
|
}
|
|
38
38
|
declare function ModalDialog({ children, title, isOpen, onClose, size, variant, hasCloseButton, closeLabel, isFullscreenScroll, className, isFullscreenOnMobile, isBlocking, zIndex, isOverflowVisible, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
39
39
|
declare namespace ModalDialog {
|
|
@@ -93,7 +93,7 @@ declare namespace ModalDialog {
|
|
|
93
93
|
*/
|
|
94
94
|
zIndex: PropTypes.Requireable<number>;
|
|
95
95
|
/** Specifies whether overflow is visible in the modal */
|
|
96
|
-
isOverflowVisible: PropTypes.
|
|
96
|
+
isOverflowVisible: PropTypes.Validator<boolean>;
|
|
97
97
|
};
|
|
98
98
|
var Header: import("react-bootstrap/esm/helpers").BsPrefixRefForwardingComponent<"div", import("./ModalDialogHeader").Props>;
|
|
99
99
|
var Title: any;
|
|
@@ -33,7 +33,7 @@ function ModalDialog(_ref) {
|
|
|
33
33
|
isFullscreenOnMobile = false,
|
|
34
34
|
isBlocking = false,
|
|
35
35
|
zIndex,
|
|
36
|
-
isOverflowVisible
|
|
36
|
+
isOverflowVisible
|
|
37
37
|
} = _ref;
|
|
38
38
|
const isMobile = useMediaQuery({
|
|
39
39
|
query: '(max-width: 767.98px)'
|
|
@@ -119,7 +119,7 @@ ModalDialog.propTypes = {
|
|
|
119
119
|
*/
|
|
120
120
|
zIndex: PropTypes.number,
|
|
121
121
|
/** Specifies whether overflow is visible in the modal */
|
|
122
|
-
isOverflowVisible: PropTypes.bool
|
|
122
|
+
isOverflowVisible: PropTypes.bool.isRequired
|
|
123
123
|
};
|
|
124
124
|
ModalDialog.Header = ModalDialogHeader;
|
|
125
125
|
ModalDialog.Title = ModalDialogTitle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalDialog.js","names":["React","PropTypes","classNames","useMediaQuery","ModalLayer","ModalCloseButton","ModalDialogHeader","ModalDialogTitle","ModalDialogFooter","ModalDialogBody","ModalDialogHero","Icon","IconButton","Close","MODAL_DIALOG_CLOSE_LABEL","ModalDialog","_ref","children","title","isOpen","onClose","size","variant","hasCloseButton","closeLabel","isFullscreenScroll","className","isFullscreenOnMobile","isBlocking","zIndex","isOverflowVisible","isMobile","query","showFullScreen","createElement","role","as","iconAs","invertColors","src","alt","propTypes","node","isRequired","string","func","bool","oneOf","number","Header","Title","Footer","CloseButton","Body","Hero"],"sources":["../../src/Modal/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useMediaQuery } from 'react-responsive';\nimport ModalLayer from './ModalLayer';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalCloseButton from './ModalCloseButton';\nimport ModalDialogHeader from './ModalDialogHeader';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogTitle from './ModalDialogTitle';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogFooter from './ModalDialogFooter';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogBody from './ModalDialogBody';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogHero from './ModalDialogHero';\n\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { Close } from '../../icons';\n\nexport const MODAL_DIALOG_CLOSE_LABEL = 'Close';\n\ninterface Props {\n /** Specifies the content of the dialog */\n children: React.ReactNode;\n /** The aria-label of the dialog */\n title: string;\n /** A callback to close the modal dialog, e.g. when Escape is pressed */\n onClose: () => void;\n /** Is the modal dialog open or closed? */\n isOpen?: boolean;\n /** The close 'x' icon button in the top right of the dialog box */\n hasCloseButton?: boolean;\n /** Size determines the maximum width of the dialog box */\n size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';\n /** The visual style of the dialog box */\n variant?: 'default' | 'warning' | 'danger' | 'success' | 'dark';\n /** The label supplied to the close icon button if one is rendered */\n closeLabel?: string;\n /** Specifies class name to append to the base element */\n className?: string;\n /**\n * Determines where a scrollbar should appear if a modal is too large for the\n * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n * the browser window itself receives the scrollbar.\n */\n isFullscreenScroll?: boolean;\n /** To show full screen view on mobile screens */\n isFullscreenOnMobile?: boolean;\n /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n isBlocking?: boolean;\n /** Specifies the z-index of the modal */\n zIndex?: number;\n /** Specifies whether overflow is visible in the modal */\n isOverflowVisible
|
|
1
|
+
{"version":3,"file":"ModalDialog.js","names":["React","PropTypes","classNames","useMediaQuery","ModalLayer","ModalCloseButton","ModalDialogHeader","ModalDialogTitle","ModalDialogFooter","ModalDialogBody","ModalDialogHero","Icon","IconButton","Close","MODAL_DIALOG_CLOSE_LABEL","ModalDialog","_ref","children","title","isOpen","onClose","size","variant","hasCloseButton","closeLabel","isFullscreenScroll","className","isFullscreenOnMobile","isBlocking","zIndex","isOverflowVisible","isMobile","query","showFullScreen","createElement","role","as","iconAs","invertColors","src","alt","propTypes","node","isRequired","string","func","bool","oneOf","number","Header","Title","Footer","CloseButton","Body","Hero"],"sources":["../../src/Modal/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useMediaQuery } from 'react-responsive';\nimport ModalLayer from './ModalLayer';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalCloseButton from './ModalCloseButton';\nimport ModalDialogHeader from './ModalDialogHeader';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogTitle from './ModalDialogTitle';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogFooter from './ModalDialogFooter';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogBody from './ModalDialogBody';\n// @ts-ignore for now - this needs to be converted to TypeScript\nimport ModalDialogHero from './ModalDialogHero';\n\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\nimport { Close } from '../../icons';\n\nexport const MODAL_DIALOG_CLOSE_LABEL = 'Close';\n\ninterface Props {\n /** Specifies the content of the dialog */\n children: React.ReactNode;\n /** The aria-label of the dialog */\n title: string;\n /** A callback to close the modal dialog, e.g. when Escape is pressed */\n onClose: () => void;\n /** Is the modal dialog open or closed? */\n isOpen?: boolean;\n /** The close 'x' icon button in the top right of the dialog box */\n hasCloseButton?: boolean;\n /** Size determines the maximum width of the dialog box */\n size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';\n /** The visual style of the dialog box */\n variant?: 'default' | 'warning' | 'danger' | 'success' | 'dark';\n /** The label supplied to the close icon button if one is rendered */\n closeLabel?: string;\n /** Specifies class name to append to the base element */\n className?: string;\n /**\n * Determines where a scrollbar should appear if a modal is too large for the\n * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n * the browser window itself receives the scrollbar.\n */\n isFullscreenScroll?: boolean;\n /** To show full screen view on mobile screens */\n isFullscreenOnMobile?: boolean;\n /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n isBlocking?: boolean;\n /** Specifies the z-index of the modal */\n zIndex?: number;\n /** Specifies whether overflow is visible in the modal */\n isOverflowVisible: boolean;\n}\n\nfunction ModalDialog({\n children,\n title,\n isOpen = false,\n onClose,\n size = 'md',\n variant = 'default',\n hasCloseButton = true,\n closeLabel = MODAL_DIALOG_CLOSE_LABEL,\n isFullscreenScroll = false,\n className,\n isFullscreenOnMobile = false,\n isBlocking = false,\n zIndex,\n isOverflowVisible,\n}: Props) {\n const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });\n const showFullScreen = (isFullscreenOnMobile && isMobile);\n return (\n <ModalLayer isOpen={isOpen} onClose={onClose} isBlocking={isBlocking} zIndex={zIndex}>\n <div\n role=\"dialog\"\n aria-label={title}\n className={classNames(\n 'pgn__modal',\n {\n [`pgn__modal-${showFullScreen ? 'fullscreen' : size}`]: size,\n [`pgn__modal-${variant}`]: variant,\n 'pgn__modal-scroll-fullscreen': isFullscreenScroll,\n 'pgn__modal-visible-overflow': isOverflowVisible,\n },\n className,\n )}\n >\n {hasCloseButton && (\n <div className=\"pgn__modal-close-container\">\n <ModalCloseButton\n as={IconButton}\n iconAs={Icon}\n invertColors={variant === 'dark'}\n src={Close}\n alt={closeLabel}\n />\n </div>\n )}\n {children}\n </div>\n </ModalLayer>\n );\n}\n\nModalDialog.propTypes = {\n /**\n * Specifies the content of the dialog\n */\n children: PropTypes.node.isRequired,\n /**\n * The aria-label of the dialog\n */\n title: PropTypes.string.isRequired,\n /**\n * A callback to close the modal dialog\n */\n onClose: PropTypes.func.isRequired,\n /**\n * Is the modal dialog open or closed\n */\n isOpen: PropTypes.bool,\n /**\n * The close 'x' icon button in the top right of the dialog box\n */\n hasCloseButton: PropTypes.bool,\n /**\n * Sizes determine the maximum width of the dialog box\n */\n size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),\n /**\n * The visual style of the dialog box\n */\n variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success', 'dark']),\n /**\n * The label supplied to the close icon button if one is rendered\n */\n closeLabel: PropTypes.string,\n /**\n * Specifies class name to append to the base element\n */\n className: PropTypes.string,\n /**\n * Determines where a scrollbar should appear if a modal is too large for the\n * viewport. When false, the ``ModalDialog``. Body receives a scrollbar, when true\n * the browser window itself receives the scrollbar.\n */\n isFullscreenScroll: PropTypes.bool,\n /**\n * To show full screen view on mobile screens\n */\n isFullscreenOnMobile: PropTypes.bool,\n /**\n * Prevent clicking on the backdrop or pressing Esc to close the modal\n */\n isBlocking: PropTypes.bool,\n /**\n * Specifies the z-index of the modal\n */\n zIndex: PropTypes.number,\n /** Specifies whether overflow is visible in the modal */\n isOverflowVisible: PropTypes.bool.isRequired,\n};\n\nModalDialog.Header = ModalDialogHeader;\nModalDialog.Title = ModalDialogTitle;\nModalDialog.Footer = ModalDialogFooter;\nModalDialog.CloseButton = ModalCloseButton;\nModalDialog.Body = ModalDialogBody;\nModalDialog.Hero = ModalDialogHero;\n\nexport default ModalDialog;\n"],"mappings":"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","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -53,7 +53,7 @@ interface Props {
|
|
|
53
53
|
/** Specifies the z-index of the modal */
|
|
54
54
|
zIndex?: number;
|
|
55
55
|
/** Specifies whether overflow is visible in the modal */
|
|
56
|
-
isOverflowVisible
|
|
56
|
+
isOverflowVisible: boolean;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
function ModalDialog({
|
|
@@ -70,7 +70,7 @@ function ModalDialog({
|
|
|
70
70
|
isFullscreenOnMobile = false,
|
|
71
71
|
isBlocking = false,
|
|
72
72
|
zIndex,
|
|
73
|
-
isOverflowVisible
|
|
73
|
+
isOverflowVisible,
|
|
74
74
|
}: Props) {
|
|
75
75
|
const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });
|
|
76
76
|
const showFullScreen = (isFullscreenOnMobile && isMobile);
|
|
@@ -163,7 +163,7 @@ ModalDialog.propTypes = {
|
|
|
163
163
|
*/
|
|
164
164
|
zIndex: PropTypes.number,
|
|
165
165
|
/** Specifies whether overflow is visible in the modal */
|
|
166
|
-
isOverflowVisible: PropTypes.bool,
|
|
166
|
+
isOverflowVisible: PropTypes.bool.isRequired,
|
|
167
167
|
};
|
|
168
168
|
|
|
169
169
|
ModalDialog.Header = ModalDialogHeader;
|
package/src/Modal/README.md
CHANGED
|
@@ -36,6 +36,7 @@ This is the alert style `ModalDialog` composition. `AlertModal` passes all of it
|
|
|
36
36
|
<Button variant="danger">Submit</Button>
|
|
37
37
|
</ActionRow>
|
|
38
38
|
)}
|
|
39
|
+
isOverflowVisible={false}
|
|
39
40
|
>
|
|
40
41
|
<p>
|
|
41
42
|
I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever.
|
|
@@ -67,6 +68,7 @@ const [isOpen, open, close] = useToggle(false);
|
|
|
67
68
|
<Button variant="primary">Delete</Button>
|
|
68
69
|
</ActionRow>
|
|
69
70
|
)}
|
|
71
|
+
isOverflowVisible={false}
|
|
70
72
|
>
|
|
71
73
|
<p>
|
|
72
74
|
Are your sure you want to delete this file? You can't undo this action.
|
|
@@ -95,6 +97,7 @@ const [isOpen, open, close] = useToggle(false);
|
|
|
95
97
|
<Button variant="danger">Acknowledge errror</Button>
|
|
96
98
|
</ActionRow>
|
|
97
99
|
)}
|
|
100
|
+
isOverflowVisible={false}
|
|
98
101
|
>
|
|
99
102
|
<p>
|
|
100
103
|
An unknown error has occured.
|
|
@@ -123,6 +126,7 @@ const [isOpen, open, close] = useToggle(false);
|
|
|
123
126
|
<Button variant="success">Confirm</Button>
|
|
124
127
|
</ActionRow>
|
|
125
128
|
)}
|
|
129
|
+
isOverflowVisible={false}
|
|
126
130
|
>
|
|
127
131
|
<p>
|
|
128
132
|
All good!
|
|
@@ -50,6 +50,7 @@ The ``MarketingModal`` is a preconfigured `ModalDialog` that accepts an image an
|
|
|
50
50
|
<Button>Submit</Button>
|
|
51
51
|
</ActionRow>
|
|
52
52
|
)}
|
|
53
|
+
isOverflowVisible={false}
|
|
53
54
|
>
|
|
54
55
|
<p>
|
|
55
56
|
I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
|
|
@@ -44,6 +44,7 @@ label for the dialog element.
|
|
|
44
44
|
variant={modalVariant}
|
|
45
45
|
hasCloseButton
|
|
46
46
|
isFullscreenOnMobile
|
|
47
|
+
isOverflowVisible={false}
|
|
47
48
|
>
|
|
48
49
|
<ModalDialog.Header>
|
|
49
50
|
<ModalDialog.Title>
|
|
@@ -114,6 +115,7 @@ label for the dialog element.
|
|
|
114
115
|
size={modalSize}
|
|
115
116
|
variant={modalVariant}
|
|
116
117
|
hasCloseButton
|
|
118
|
+
isOverflowVisible={false}
|
|
117
119
|
>
|
|
118
120
|
<ModalDialog.Hero>
|
|
119
121
|
<ModalDialog.Hero.Background
|
|
@@ -38,6 +38,7 @@ The standard `ModalDialog` composition. `StandardModal` passes all of its props
|
|
|
38
38
|
<Button>Submit</Button>
|
|
39
39
|
</ActionRow>
|
|
40
40
|
)}
|
|
41
|
+
isOverflowVisible={false}
|
|
41
42
|
>
|
|
42
43
|
<p>
|
|
43
44
|
I'm baby palo santo ugh celiac fashion axe. La croix lo-fi venmo whatever. Beard man braid migas single-origin coffee forage ramps. Tumeric messenger bag bicycle rights wayfarers, try-hard cronut blue bottle health goth. Sriracha tumblr cardigan, cloud bread succulents tumeric copper mug marfa semiotics woke next level organic roof party +1 try-hard.
|
|
@@ -42,6 +42,7 @@ describe('<AlertModal />', () => {
|
|
|
42
42
|
isOpen={isOpen}
|
|
43
43
|
onClose={closeFn}
|
|
44
44
|
footerNode={<p>footer</p>}
|
|
45
|
+
isOverflowVisible={false}
|
|
45
46
|
>
|
|
46
47
|
<Body />
|
|
47
48
|
</AlertModal>,
|
|
@@ -60,6 +61,7 @@ describe('<AlertModal />', () => {
|
|
|
60
61
|
onClose={closeFn}
|
|
61
62
|
icon={Info}
|
|
62
63
|
footerNode={<p>footer</p>}
|
|
64
|
+
isOverflowVisible={false}
|
|
63
65
|
>
|
|
64
66
|
<Body />
|
|
65
67
|
</AlertModal>,
|
|
@@ -77,6 +79,7 @@ describe('<AlertModal />', () => {
|
|
|
77
79
|
onClose={closeFn}
|
|
78
80
|
icon={Info}
|
|
79
81
|
footerNode={<p>footer</p>}
|
|
82
|
+
isOverflowVisible={false}
|
|
80
83
|
>
|
|
81
84
|
<Body />
|
|
82
85
|
</AlertModal>,
|
|
@@ -94,6 +97,7 @@ describe('<AlertModal />', () => {
|
|
|
94
97
|
onClose={closeFn}
|
|
95
98
|
icon={Info}
|
|
96
99
|
footerNode={<p>footer</p>}
|
|
100
|
+
isOverflowVisible={false}
|
|
97
101
|
>
|
|
98
102
|
<Body />
|
|
99
103
|
</AlertModal>,
|
|
@@ -14,6 +14,7 @@ describe('ModalDialog', () => {
|
|
|
14
14
|
size="md"
|
|
15
15
|
variant="default"
|
|
16
16
|
hasCloseButton
|
|
17
|
+
isOverflowVisible={false}
|
|
17
18
|
>
|
|
18
19
|
<ModalDialog.Header>
|
|
19
20
|
<ModalDialog.Title>The title</ModalDialog.Title>
|
|
@@ -42,6 +43,7 @@ describe('ModalDialog', () => {
|
|
|
42
43
|
<ModalDialog
|
|
43
44
|
title="My dialog"
|
|
44
45
|
onClose={onClose}
|
|
46
|
+
isOverflowVisible={false}
|
|
45
47
|
>
|
|
46
48
|
<ModalDialog.Header><ModalDialog.Title>The title</ModalDialog.Title></ModalDialog.Header>
|
|
47
49
|
<ModalDialog.Body><p>The hidden content</p></ModalDialog.Body>
|
|
@@ -64,6 +66,7 @@ describe('ModalDialog with Hero', () => {
|
|
|
64
66
|
size="md"
|
|
65
67
|
variant="default"
|
|
66
68
|
hasCloseButton
|
|
69
|
+
isOverflowVisible={false}
|
|
67
70
|
>
|
|
68
71
|
<ModalDialog.Hero>
|
|
69
72
|
<ModalDialog.Hero.Background backgroundSrc="imageurl" />
|