@openedx/paragon 22.19.0 → 22.20.0

package/dist/Modal/ModalDialog.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-export declare const MODAL_DIALOG_CLOSE_LABEL = "Close";
 interface Props {
     /** Specifies the content of the dialog */
     children: React.ReactNode;

package/dist/Modal/ModalDialog.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useMediaQuery } from 'react-responsive';
+import { useIntl } from 'react-intl';
 import ModalLayer from './ModalLayer';
 // @ts-ignore for now - this needs to be converted to TypeScript
 import ModalCloseButton from './ModalCloseButton';
@@ -17,7 +18,7 @@ import ModalDialogHero from './ModalDialogHero';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import { Close } from '../../icons';
-export const MODAL_DIALOG_CLOSE_LABEL = 'Close';
+import messages from './messages';
 function ModalDialog(_ref) {
   let {
     children,
@@ -27,7 +28,7 @@ function ModalDialog(_ref) {
     size = 'md',
     variant = 'default',
     hasCloseButton = true,
-    closeLabel = MODAL_DIALOG_CLOSE_LABEL,
+    closeLabel,
     isFullscreenScroll = false,
     className,
     isFullscreenOnMobile = false,
@@ -35,6 +36,8 @@ function ModalDialog(_ref) {
     zIndex,
     isOverflowVisible
   } = _ref;
+  const intl = useIntl();
+  const closeButtonText = closeLabel || intl.formatMessage(messages.closeButtonText);
   const isMobile = useMediaQuery({
     query: '(max-width: 767.98px)'
   });
@@ -60,7 +63,7 @@ function ModalDialog(_ref) {
     iconAs: Icon,
     invertColors: variant === 'dark',
     src: Close,
-    alt: closeLabel
+    alt: closeButtonText
   })), children));
 }
 ModalDialog.propTypes = {

package/dist/Modal/ModalDialog.js.map

@@ -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: 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":[]}
+{"version":3,"file":"ModalDialog.js","names":["React","PropTypes","classNames","useMediaQuery","useIntl","ModalLayer","ModalCloseButton","ModalDialogHeader","ModalDialogTitle","ModalDialogFooter","ModalDialogBody","ModalDialogHero","Icon","IconButton","Close","messages","ModalDialog","_ref","children","title","isOpen","onClose","size","variant","hasCloseButton","closeLabel","isFullscreenScroll","className","isFullscreenOnMobile","isBlocking","zIndex","isOverflowVisible","intl","closeButtonText","formatMessage","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 { useIntl } from 'react-intl';\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';\nimport messages from './messages';\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,\n  isFullscreenScroll = false,\n  className,\n  isFullscreenOnMobile = false,\n  isBlocking = false,\n  zIndex,\n  isOverflowVisible,\n}: Props) {\n  const intl = useIntl();\n  const closeButtonText = closeLabel || intl.formatMessage(messages.closeButtonText);\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={closeButtonText}\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/dist/Modal/messages.d.ts

@@ -0,0 +1,8 @@
+declare const messages: {
+    closeButtonText: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/Modal/messages.js

@@ -0,0 +1,10 @@
+import { defineMessages } from 'react-intl';
+const messages = defineMessages({
+  closeButtonText: {
+    id: 'pgn.Modal.closeButon',
+    defaultMessage: 'Close',
+    description: 'Accessible name for the close button in the modal dialog'
+  }
+});
+export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/Modal/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","names":["defineMessages","messages","closeButtonText","id","defaultMessage","description"],"sources":["../../src/Modal/messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nconst messages = defineMessages({\n  closeButtonText: {\n    id: 'pgn.Modal.closeButon',\n    defaultMessage: 'Close',\n    description: 'Accessible name for the close button in the modal dialog',\n  },\n});\n\nexport default messages;\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,YAAY;AAE3C,MAAMC,QAAQ,GAAGD,cAAc,CAAC;EAC9BE,eAAe,EAAE;IACfC,EAAE,EAAE,sBAAsB;IAC1BC,cAAc,EAAE,OAAO;IACvBC,WAAW,EAAE;EACf;AACF,CAAC,CAAC;AAEF,eAAeJ,QAAQ","ignoreList":[]}

package/dist/index.d.ts

@@ -35,7 +35,7 @@ export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as ModalContext } from './Modal/ModalContext';
-export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
+export { default as ModalDialog } from './Modal/ModalDialog';
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';

package/dist/index.js

@@ -35,7 +35,7 @@ export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as ModalContext } from './Modal/ModalContext';
-export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
+export { default as ModalDialog } from './Modal/ModalDialog';
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.19.0",
+  "version": "22.20.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Modal/ModalDialog.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useMediaQuery } from 'react-responsive';
+import { useIntl } from 'react-intl';
 import ModalLayer from './ModalLayer';
 // @ts-ignore for now - this needs to be converted to TypeScript
 import ModalCloseButton from './ModalCloseButton';
@@ -18,8 +19,7 @@ import ModalDialogHero from './ModalDialogHero';
 import Icon from '../Icon';
 import IconButton from '../IconButton';
 import { Close } from '../../icons';
-
-export const MODAL_DIALOG_CLOSE_LABEL = 'Close';
+import messages from './messages';
 
 interface Props {
   /** Specifies the content of the dialog */
@@ -64,7 +64,7 @@ function ModalDialog({
   size = 'md',
   variant = 'default',
   hasCloseButton = true,
-  closeLabel = MODAL_DIALOG_CLOSE_LABEL,
+  closeLabel,
   isFullscreenScroll = false,
   className,
   isFullscreenOnMobile = false,
@@ -72,6 +72,8 @@ function ModalDialog({
   zIndex,
   isOverflowVisible,
 }: Props) {
+  const intl = useIntl();
+  const closeButtonText = closeLabel || intl.formatMessage(messages.closeButtonText);
   const isMobile = useMediaQuery({ query: '(max-width: 767.98px)' });
   const showFullScreen = (isFullscreenOnMobile && isMobile);
   return (
@@ -97,7 +99,7 @@ function ModalDialog({
               iconAs={Icon}
               invertColors={variant === 'dark'}
               src={Close}
-              alt={closeLabel}
+              alt={closeButtonText}
             />
           </div>
         )}

package/src/Modal/messages.ts

@@ -0,0 +1,11 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  closeButtonText: {
+    id: 'pgn.Modal.closeButon',
+    defaultMessage: 'Close',
+    description: 'Accessible name for the close button in the modal dialog',
+  },
+});
+
+export default messages;

package/src/Modal/tests/AlertModal.test.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
+import { IntlProvider } from 'react-intl';
 import AlertModal from '../AlertModal';
 import { Info } from '../../../icons';
 
@@ -37,15 +38,17 @@ describe('<AlertModal />', () => {
 
   it('renders the body when isOpen', () => {
     render(
-      <AlertModal
-        title="some title"
-        isOpen={isOpen}
-        onClose={closeFn}
-        footerNode={<p>footer</p>}
-        isOverflowVisible={false}
-      >
-        <Body />
-      </AlertModal>,
+      <IntlProvider locale="en" messages={{}}>
+        <AlertModal
+          title="some title"
+          isOpen={isOpen}
+          onClose={closeFn}
+          footerNode={<p>footer</p>}
+          isOverflowVisible={false}
+        >
+          <Body />
+        </AlertModal>
+      </IntlProvider>,
     );
 
     const body = screen.getByText('The body of alert.');
@@ -55,16 +58,18 @@ describe('<AlertModal />', () => {
   describe('with variant prop', () => {
     it('renders warning variant', () => {
       render(
-        <AlertModal
-          title="warning"
-          isOpen={isOpen}
-          onClose={closeFn}
-          icon={Info}
-          footerNode={<p>footer</p>}
-          isOverflowVisible={false}
-        >
-          <Body />
-        </AlertModal>,
+        <IntlProvider locale="en" messages={{}}>
+          <AlertModal
+            title="warning"
+            isOpen={isOpen}
+            onClose={closeFn}
+            icon={Info}
+            footerNode={<p>footer</p>}
+            isOverflowVisible={false}
+          >
+            <Body />
+          </AlertModal>
+        </IntlProvider>,
       );
 
       const modalTitle = screen.getByTestId('title-icon');
@@ -73,16 +78,18 @@ describe('<AlertModal />', () => {
 
     it('renders success variant', () => {
       render(
-        <AlertModal
-          title="success"
-          isOpen={isOpen}
-          onClose={closeFn}
-          icon={Info}
-          footerNode={<p>footer</p>}
-          isOverflowVisible={false}
-        >
-          <Body />
-        </AlertModal>,
+        <IntlProvider locale="en" messages={{}}>
+          <AlertModal
+            title="success"
+            isOpen={isOpen}
+            onClose={closeFn}
+            icon={Info}
+            footerNode={<p>footer</p>}
+            isOverflowVisible={false}
+          >
+            <Body />
+          </AlertModal>
+        </IntlProvider>,
       );
 
       const modalTitle = screen.getByTestId('title-icon');
@@ -91,16 +98,18 @@ describe('<AlertModal />', () => {
 
     it('renders danger variant', () => {
       render(
-        <AlertModal
-          title="danger"
-          isOpen={isOpen}
-          onClose={closeFn}
-          icon={Info}
-          footerNode={<p>footer</p>}
-          isOverflowVisible={false}
-        >
-          <Body />
-        </AlertModal>,
+        <IntlProvider locale="en" messages={{}}>
+          <AlertModal
+            title="danger"
+            isOpen={isOpen}
+            onClose={closeFn}
+            icon={Info}
+            footerNode={<p>footer</p>}
+            isOverflowVisible={false}
+          >
+            <Body />
+          </AlertModal>
+        </IntlProvider>,
       );
 
       const modalTitle = screen.getByTestId('title-icon');

package/src/Modal/tests/ModalDialog.test.tsx

@@ -1,33 +1,36 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 
+import { IntlProvider } from 'react-intl';
 import ModalDialog from '../ModalDialog';
 
 describe('ModalDialog', () => {
   it('renders a dialog with aria-label and content', () => {
     const onClose = jest.fn();
     render(
-      <ModalDialog
-        title="My dialog"
-        isOpen
-        onClose={onClose}
-        size="md"
-        variant="default"
-        hasCloseButton
-        isOverflowVisible={false}
-      >
-        <ModalDialog.Header>
-          <ModalDialog.Title>The title</ModalDialog.Title>
-        </ModalDialog.Header>
+      <IntlProvider locale="en" messages={{}}>
+        <ModalDialog
+          title="My dialog"
+          isOpen
+          onClose={onClose}
+          size="md"
+          variant="default"
+          hasCloseButton
+          isOverflowVisible={false}
+        >
+          <ModalDialog.Header>
+            <ModalDialog.Title>The title</ModalDialog.Title>
+          </ModalDialog.Header>
 
-        <ModalDialog.Body>
-          <p>The content</p>
-        </ModalDialog.Body>
+          <ModalDialog.Body>
+            <p>The content</p>
+          </ModalDialog.Body>
 
-        <ModalDialog.Footer>
-          <ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton>
-        </ModalDialog.Footer>
-      </ModalDialog>,
+          <ModalDialog.Footer>
+            <ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton>
+          </ModalDialog.Footer>
+        </ModalDialog>
+      </IntlProvider>,
     );
 
     const dialogNode = screen.getByRole('dialog');
@@ -40,15 +43,17 @@ describe('ModalDialog', () => {
   it('is hidden by default', () => {
     const onClose = jest.fn();
     render(
-      <ModalDialog
-        title="My dialog"
-        onClose={onClose}
-        isOverflowVisible={false}
-      >
-        <ModalDialog.Header><ModalDialog.Title>The title</ModalDialog.Title></ModalDialog.Header>
-        <ModalDialog.Body><p>The hidden content</p></ModalDialog.Body>
-        <ModalDialog.Footer><ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton></ModalDialog.Footer>
-      </ModalDialog>,
+      <IntlProvider locale="en" messages={{}}>
+        <ModalDialog
+          title="My dialog"
+          onClose={onClose}
+          isOverflowVisible={false}
+        >
+          <ModalDialog.Header><ModalDialog.Title>The title</ModalDialog.Title></ModalDialog.Header>
+          <ModalDialog.Body><p>The hidden content</p></ModalDialog.Body>
+          <ModalDialog.Footer><ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton></ModalDialog.Footer>
+        </ModalDialog>
+      </IntlProvider>,
     );
 
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
@@ -59,30 +64,32 @@ describe('ModalDialog with Hero', () => {
   it('renders a dialog with aria-label and hero with img', () => {
     const onClose = jest.fn();
     render(
-      <ModalDialog
-        title="My dialog"
-        isOpen
-        onClose={onClose}
-        size="md"
-        variant="default"
-        hasCloseButton
-        isOverflowVisible={false}
-      >
-        <ModalDialog.Hero>
-          <ModalDialog.Hero.Background backgroundSrc="imageurl" />
-          <ModalDialog.Hero.Content data-testid="modal-hero-content">
-            <ModalDialog.Title>The title</ModalDialog.Title>
-          </ModalDialog.Hero.Content>
-        </ModalDialog.Hero>
+      <IntlProvider locale="en" messages={{}}>
+        <ModalDialog
+          title="My dialog"
+          isOpen
+          onClose={onClose}
+          size="md"
+          variant="default"
+          hasCloseButton
+          isOverflowVisible={false}
+        >
+          <ModalDialog.Hero>
+            <ModalDialog.Hero.Background backgroundSrc="imageurl" />
+            <ModalDialog.Hero.Content data-testid="modal-hero-content">
+              <ModalDialog.Title>The title</ModalDialog.Title>
+            </ModalDialog.Hero.Content>
+          </ModalDialog.Hero>
 
-        <ModalDialog.Body>
-          <p>The content</p>
-        </ModalDialog.Body>
+          <ModalDialog.Body>
+            <p>The content</p>
+          </ModalDialog.Body>
 
-        <ModalDialog.Footer>
-          <ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton>
-        </ModalDialog.Footer>
-      </ModalDialog>,
+          <ModalDialog.Footer>
+            <ModalDialog.CloseButton>Cancel</ModalDialog.CloseButton>
+          </ModalDialog.Footer>
+        </ModalDialog>
+      </IntlProvider>,
     );
     const dialogNode = screen.getByRole('dialog');
 

package/src/index.d.ts

@@ -35,7 +35,7 @@ export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as ModalContext } from './Modal/ModalContext';
-export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
+export { default as ModalDialog } from './Modal/ModalDialog';
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';

package/src/index.js

@@ -35,7 +35,7 @@ export { default as Hyperlink } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as ModalContext } from './Modal/ModalContext';
-export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalDialog';
+export { default as ModalDialog } from './Modal/ModalDialog';
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';