@openedx/paragon 22.15.2 → 22.15.3

package/dist/Modal/AlertModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"AlertModal.js","names":["React","PropTypes","classNames","requiredWhenNot","Icon","ModalDialog","AlertModal","_ref","children","footerNode","icon","props","createElement","className","Header","Title","src","title","Body","Footer","propTypes","node","isRequired","string","isOpen","bool","isBlocking","hasCloseButton","onClose","func","size","oneOf","variant","closeLabel","isFullscreenScroll","elementType","defaultProps","undefined"],"sources":["../../src/Modal/AlertModal.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { requiredWhenNot } from '../utils/propTypes';\nimport Icon from '../Icon';\nimport ModalDialog from './ModalDialog';\n\nfunction AlertModal({\n  children,\n  footerNode,\n  icon,\n  ...props\n}) {\n  return (\n    <ModalDialog\n      {...props}\n      className={classNames('pgn__alert-modal', props.className)}\n    >\n      <ModalDialog.Header>\n        <ModalDialog.Title>\n          {icon && (\n          <Icon\n            data-testid=\"title-icon\"\n            src={icon}\n            className={classNames('pgn__alert-modal__title_icon')}\n          />\n          )}\n          {props.title}\n        </ModalDialog.Title>\n      </ModalDialog.Header>\n      <ModalDialog.Body>{children}</ModalDialog.Body>\n      {footerNode && <ModalDialog.Footer>{footerNode}</ModalDialog.Footer>}\n    </ModalDialog>\n  );\n}\n\nAlertModal.propTypes = {\n  children: PropTypes.node.isRequired,\n  /** The aria-label of the dialog */\n  title: PropTypes.string.isRequired,\n  /** Is the modal dialog open or closed */\n  isOpen: PropTypes.bool,\n  /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n  isBlocking: PropTypes.bool,\n  /** Specifies whether the dialog box should contain 'x' icon button in the top right */\n  hasCloseButton: PropTypes.bool,\n  /** A callback to close the modal dialog */\n  onClose: requiredWhenNot(PropTypes.func, 'isBlocking'),\n  /** Sizes determine the maximum width of the dialog box */\n  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),\n  /** The visual style of the dialog box */\n  variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success']),\n  /** The label supplied to the close icon button if one is rendered */\n  closeLabel: PropTypes.string,\n  /** Specifies class name to append to the base element */\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  /** Specifies what should be displayed in the footer of the dialog box */\n  footerNode: PropTypes.node,\n  /** Icon that will be shown in the header of modal */\n  icon: PropTypes.elementType,\n};\n\nAlertModal.defaultProps = {\n  isOpen: false,\n  isBlocking: false,\n  hasCloseButton: false,\n  onClose: () => {},\n  size: 'md',\n  variant: 'default',\n  closeLabel: 'Close',\n  className: undefined,\n  isFullscreenScroll: false,\n  footerNode: null,\n  icon: undefined,\n};\n\nexport default AlertModal;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,eAAe,QAAQ,oBAAoB;AACpD,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,WAAW,MAAM,eAAe;AAEvC,SAASC,UAAUA,CAAAC,IAAA,EAKhB;EAAA,IALiB;IAClBC,QAAQ;IACRC,UAAU;IACVC,IAAI;IACJ,GAAGC;EACL,CAAC,GAAAJ,IAAA;EACC,oBACEP,KAAA,CAAAY,aAAA,CAACP,WAAW;IAAA,GACNM,KAAK;IACTE,SAAS,EAAEX,UAAU,CAAC,kBAAkB,EAAES,KAAK,CAACE,SAAS;EAAE,gBAE3Db,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACS,MAAM,qBACjBd,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACU,KAAK,QACfL,IAAI,iBACLV,KAAA,CAAAY,aAAA,CAACR,IAAI;IACH,eAAY,YAAY;IACxBY,GAAG,EAAEN,IAAK;IACVG,SAAS,EAAEX,UAAU,CAAC,8BAA8B;EAAE,CACvD,CACA,EACAS,KAAK,CAACM,KACU,CACD,CAAC,eACrBjB,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACa,IAAI,QAAEV,QAA2B,CAAC,EAC9CC,UAAU,iBAAIT,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACc,MAAM,QAAEV,UAA+B,CACxD,CAAC;AAElB;AAEAH,UAAU,CAACc,SAAS,GAAG;EACrBZ,QAAQ,EAAEP,SAAS,CAACoB,IAAI,CAACC,UAAU;EACnC;EACAL,KAAK,EAAEhB,SAAS,CAACsB,MAAM,CAACD,UAAU;EAClC;EACAE,MAAM,EAAEvB,SAAS,CAACwB,IAAI;EACtB;EACAC,UAAU,EAAEzB,SAAS,CAACwB,IAAI;EAC1B;EACAE,cAAc,EAAE1B,SAAS,CAACwB,IAAI;EAC9B;EACAG,OAAO,EAAEzB,eAAe,CAACF,SAAS,CAAC4B,IAAI,EAAE,YAAY,CAAC;EACtD;EACAC,IAAI,EAAE7B,SAAS,CAAC8B,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC;EAC7D;EACAC,OAAO,EAAE/B,SAAS,CAAC8B,KAAK,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;EACrE;EACAE,UAAU,EAAEhC,SAAS,CAACsB,MAAM;EAC5B;EACAV,SAAS,EAAEZ,SAAS,CAACsB,MAAM;EAC3B;AACF;AACA;AACA;AACA;EACEW,kBAAkB,EAAEjC,SAAS,CAACwB,IAAI;EAClC;EACAhB,UAAU,EAAER,SAAS,CAACoB,IAAI;EAC1B;EACAX,IAAI,EAAET,SAAS,CAACkC;AAClB,CAAC;AAED7B,UAAU,CAAC8B,YAAY,GAAG;EACxBZ,MAAM,EAAE,KAAK;EACbE,UAAU,EAAE,KAAK;EACjBC,cAAc,EAAE,KAAK;EACrBC,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAC;EACjBE,IAAI,EAAE,IAAI;EACVE,OAAO,EAAE,SAAS;EAClBC,UAAU,EAAE,OAAO;EACnBpB,SAAS,EAAEwB,SAAS;EACpBH,kBAAkB,EAAE,KAAK;EACzBzB,UAAU,EAAE,IAAI;EAChBC,IAAI,EAAE2B;AACR,CAAC;AAED,eAAe/B,UAAU","ignoreList":[]}
+{"version":3,"file":"AlertModal.js","names":["React","PropTypes","classNames","requiredWhenNot","Icon","ModalDialog","AlertModal","_ref","children","footerNode","icon","props","createElement","className","Header","Title","src","title","Body","Footer","propTypes","node","isRequired","string","isOpen","bool","isBlocking","hasCloseButton","onClose","func","size","oneOf","variant","closeLabel","isFullscreenScroll","elementType","defaultProps","undefined"],"sources":["../../src/Modal/AlertModal.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { requiredWhenNot } from '../utils/propTypes';\nimport Icon from '../Icon';\nimport ModalDialog from './ModalDialog';\n\nfunction AlertModal({\n  children,\n  footerNode,\n  icon,\n  ...props\n}) {\n  return (\n    <ModalDialog\n      {...props}\n      className={classNames('pgn__alert-modal', props.className)}\n    >\n      <ModalDialog.Header>\n        <ModalDialog.Title>\n          {icon && (\n            <Icon\n              data-testid=\"title-icon\"\n              src={icon}\n              className={classNames('pgn__alert-modal__title_icon')}\n            />\n          )}\n          {props.title}\n        </ModalDialog.Title>\n      </ModalDialog.Header>\n      <ModalDialog.Body>{children}</ModalDialog.Body>\n      {footerNode && <ModalDialog.Footer>{footerNode}</ModalDialog.Footer>}\n    </ModalDialog>\n  );\n}\n\nAlertModal.propTypes = {\n  children: PropTypes.node.isRequired,\n  /** The aria-label of the dialog */\n  title: PropTypes.string.isRequired,\n  /** Is the modal dialog open or closed */\n  isOpen: PropTypes.bool,\n  /** Prevent clicking on the backdrop or pressing Esc to close the modal */\n  isBlocking: PropTypes.bool,\n  /** Specifies whether the dialog box should contain 'x' icon button in the top right */\n  hasCloseButton: PropTypes.bool,\n  /** A callback to close the modal dialog */\n  onClose: requiredWhenNot(PropTypes.func, 'isBlocking'),\n  /** Sizes determine the maximum width of the dialog box */\n  size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fullscreen']),\n  /** The visual style of the dialog box */\n  variant: PropTypes.oneOf(['default', 'warning', 'danger', 'success']),\n  /** The label supplied to the close icon button if one is rendered */\n  closeLabel: PropTypes.string,\n  /** Specifies class name to append to the base element */\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  /** Specifies what should be displayed in the footer of the dialog box */\n  footerNode: PropTypes.node,\n  /** Icon that will be shown in the header of modal */\n  icon: PropTypes.elementType,\n};\n\nAlertModal.defaultProps = {\n  isOpen: false,\n  isBlocking: false,\n  hasCloseButton: false,\n  onClose: () => {},\n  size: 'md',\n  variant: 'default',\n  closeLabel: 'Close',\n  className: undefined,\n  isFullscreenScroll: false,\n  footerNode: null,\n  icon: undefined,\n};\n\nexport default AlertModal;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,eAAe,QAAQ,oBAAoB;AACpD,OAAOC,IAAI,MAAM,SAAS;AAC1B,OAAOC,WAAW,MAAM,eAAe;AAEvC,SAASC,UAAUA,CAAAC,IAAA,EAKhB;EAAA,IALiB;IAClBC,QAAQ;IACRC,UAAU;IACVC,IAAI;IACJ,GAAGC;EACL,CAAC,GAAAJ,IAAA;EACC,oBACEP,KAAA,CAAAY,aAAA,CAACP,WAAW;IAAA,GACNM,KAAK;IACTE,SAAS,EAAEX,UAAU,CAAC,kBAAkB,EAAES,KAAK,CAACE,SAAS;EAAE,gBAE3Db,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACS,MAAM,qBACjBd,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACU,KAAK,QACfL,IAAI,iBACHV,KAAA,CAAAY,aAAA,CAACR,IAAI;IACH,eAAY,YAAY;IACxBY,GAAG,EAAEN,IAAK;IACVG,SAAS,EAAEX,UAAU,CAAC,8BAA8B;EAAE,CACvD,CACF,EACAS,KAAK,CAACM,KACU,CACD,CAAC,eACrBjB,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACa,IAAI,QAAEV,QAA2B,CAAC,EAC9CC,UAAU,iBAAIT,KAAA,CAAAY,aAAA,CAACP,WAAW,CAACc,MAAM,QAAEV,UAA+B,CACxD,CAAC;AAElB;AAEAH,UAAU,CAACc,SAAS,GAAG;EACrBZ,QAAQ,EAAEP,SAAS,CAACoB,IAAI,CAACC,UAAU;EACnC;EACAL,KAAK,EAAEhB,SAAS,CAACsB,MAAM,CAACD,UAAU;EAClC;EACAE,MAAM,EAAEvB,SAAS,CAACwB,IAAI;EACtB;EACAC,UAAU,EAAEzB,SAAS,CAACwB,IAAI;EAC1B;EACAE,cAAc,EAAE1B,SAAS,CAACwB,IAAI;EAC9B;EACAG,OAAO,EAAEzB,eAAe,CAACF,SAAS,CAAC4B,IAAI,EAAE,YAAY,CAAC;EACtD;EACAC,IAAI,EAAE7B,SAAS,CAAC8B,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,CAAC,CAAC;EAC7D;EACAC,OAAO,EAAE/B,SAAS,CAAC8B,KAAK,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;EACrE;EACAE,UAAU,EAAEhC,SAAS,CAACsB,MAAM;EAC5B;EACAV,SAAS,EAAEZ,SAAS,CAACsB,MAAM;EAC3B;AACF;AACA;AACA;AACA;EACEW,kBAAkB,EAAEjC,SAAS,CAACwB,IAAI;EAClC;EACAhB,UAAU,EAAER,SAAS,CAACoB,IAAI;EAC1B;EACAX,IAAI,EAAET,SAAS,CAACkC;AAClB,CAAC;AAED7B,UAAU,CAAC8B,YAAY,GAAG;EACxBZ,MAAM,EAAE,KAAK;EACbE,UAAU,EAAE,KAAK;EACjBC,cAAc,EAAE,KAAK;EACrBC,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAC;EACjBE,IAAI,EAAE,IAAI;EACVE,OAAO,EAAE,SAAS;EAClBC,UAAU,EAAE,OAAO;EACnBpB,SAAS,EAAEwB,SAAS;EACpBH,kBAAkB,EAAE,KAAK;EACzBzB,UAAU,EAAE,IAAI;EAChBC,IAAI,EAAE2B;AACR,CAAC;AAED,eAAe/B,UAAU","ignoreList":[]}

package/dist/Modal/_ModalDialog.scss

@@ -125,6 +125,7 @@
 
   .pgn__modal-title {
     font-size: $h3-font-size;
+    line-height: $h3-font-size * $headings-line-height;
     margin-inline-end: 3rem; // roughly accomodate the width of the close buttonn
     text-align: start;
   }
@@ -310,7 +311,6 @@
   }
 
   .pgn__modal-title {
-    font-size: $h4-font-size;
     display: flex;
     flex-grow: 1;
     align-items: center;