@openedx/paragon 22.15.3 → 22.16.1

package/dist/Toast/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useState","classNames","PropTypes","BaseToast","useIntl","Close","ToastContainer","Button","Icon","IconButton","TOAST_CLOSE_LABEL_TEXT","TOAST_DELAY","Toast","_ref","action","children","className","closeLabel","onClose","show","rest","intl","autoHide","setAutoHide","intlCloseLabel","formatMessage","id","defaultMessage","description","createElement","autohide","onBlur","onFocus","onMouseOut","onMouseOver","iconAs","alt","src","onClick","variant","invertColors","as","href","size","label","defaultProps","undefined","delay","propTypes","string","isRequired","func","bool","shape","number"],"sources":["../../src/Toast/index.jsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\n\nimport BaseToast from 'react-bootstrap/Toast';\nimport { useIntl } from 'react-intl';\n\nimport { Close } from '../../icons';\nimport ToastContainer from './ToastContainer';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\n\nexport const TOAST_CLOSE_LABEL_TEXT = 'Close';\nexport const TOAST_DELAY = 5000;\n\nfunction Toast({\n  action, children, className, closeLabel, onClose, show, ...rest\n}) {\n  const intl = useIntl();\n  const [autoHide, setAutoHide] = useState(true);\n  const intlCloseLabel = closeLabel || intl.formatMessage({\n    id: 'pgn.Toast.closeLabel',\n    defaultMessage: 'Close',\n    description: 'Close label for Toast component',\n  });\n  return (\n    <ToastContainer>\n      <BaseToast\n        autohide={autoHide}\n        className={classNames('pgn__toast', className)}\n        onClose={onClose}\n        onBlur={() => setAutoHide(true)}\n        onFocus={() => setAutoHide(false)}\n        onMouseOut={() => setAutoHide(true)}\n        onMouseOver={() => setAutoHide(false)}\n        show={show}\n        {...rest}\n      >\n        <div\n          className=\"toast-header\"\n        >\n          <p className=\"small\">{children}</p>\n          <div className=\"toast-header-btn-container\">\n            <IconButton\n              iconAs={Icon}\n              alt={intlCloseLabel}\n              className=\"align-self-start\"\n              src={Close}\n              onClick={onClose}\n              variant=\"primary\"\n              invertColors\n            />\n          </div>\n        </div>\n        {action && (\n          <Button\n            as={action.href ? 'a' : 'button'}\n            href={action.href}\n            onClick={action.onClick}\n            size=\"sm\"\n            variant=\"inverse-outline-primary\"\n          >\n            {action.label}\n          </Button>\n        )}\n      </BaseToast>\n    </ToastContainer>\n  );\n}\n\nToast.defaultProps = {\n  action: null,\n  closeLabel: undefined,\n  delay: TOAST_DELAY,\n  className: undefined,\n};\n\nToast.propTypes = {\n  /** A string or an element that is rendered inside the main body of the `Toast`. */\n  children: PropTypes.string.isRequired,\n  /**\n   * A function that is called on close. It can be used to perform\n   * actions upon closing of the `Toast`, such as setting the \"show\"\n   * element to false.\n   * */\n  onClose: PropTypes.func.isRequired,\n  /** Boolean used to control whether the `Toast` shows */\n  show: PropTypes.bool.isRequired,\n  /**\n   * Fields used to build optional action button.\n   * `label` is a string rendered inside the button.\n   * `href` is a link that will render the action button as an anchor tag.\n   * `onClick` is a function that is called when the button is clicked.\n   */\n  action: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    href: PropTypes.string,\n    onClick: PropTypes.func,\n  }),\n  /**\n   * Alt text for the `Toast`'s dismiss button. Defaults to 'Close'.\n   */\n  closeLabel: PropTypes.string,\n  /** Time in milliseconds for which the `Toast` will display. */\n  delay: PropTypes.number,\n  /** Class names for the `BaseToast` component */\n  className: PropTypes.string,\n};\n\nexport default Toast;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useState","classNames","PropTypes","BaseToast","useIntl","Close","ToastContainer","Button","Icon","IconButton","TOAST_CLOSE_LABEL_TEXT","TOAST_DELAY","Toast","_ref","action","children","className","closeLabel","onClose","show","rest","intl","autoHide","setAutoHide","intlCloseLabel","formatMessage","id","defaultMessage","description","createElement","autohide","onBlur","onFocus","onMouseOut","onMouseOver","iconAs","alt","src","onClick","variant","invertColors","as","href","size","label","defaultProps","undefined","delay","propTypes","string","isRequired","func","bool","shape","number"],"sources":["../../src/Toast/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseToast from 'react-bootstrap/Toast';\nimport { useIntl } from 'react-intl';\n\nimport { Close } from '../../icons';\nimport ToastContainer from './ToastContainer';\nimport Button from '../Button';\nimport Icon from '../Icon';\nimport IconButton from '../IconButton';\n\nexport const TOAST_CLOSE_LABEL_TEXT = 'Close';\nexport const TOAST_DELAY = 5000;\n\ninterface ToastAction {\n  label: string;\n  href?: string;\n  onClick?: (event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\ninterface ToastProps {\n  children: string;\n  onClose: () => void;\n  show: boolean;\n  action?: ToastAction;\n  closeLabel?: string;\n  delay?: number;\n  className?: string;\n}\n\nfunction Toast({\n  action,\n  children,\n  className,\n  closeLabel,\n  onClose,\n  show,\n  ...rest\n}: ToastProps) {\n  const intl = useIntl();\n  const [autoHide, setAutoHide] = useState(true);\n\n  const intlCloseLabel = closeLabel || intl.formatMessage({\n    id: 'pgn.Toast.closeLabel',\n    defaultMessage: 'Close',\n    description: 'Close label for Toast component',\n  });\n\n  return (\n    <ToastContainer>\n      <BaseToast\n        autohide={autoHide}\n        className={classNames('pgn__toast', className)}\n        onClose={onClose}\n        onBlur={() => setAutoHide(true)}\n        onFocus={() => setAutoHide(false)}\n        onMouseOut={() => setAutoHide(true)}\n        onMouseOver={() => setAutoHide(false)}\n        show={show}\n        {...rest}\n      >\n        <div className=\"toast-header\">\n          <p className=\"small\">{children}</p>\n          <div className=\"toast-header-btn-container\">\n            <IconButton\n              iconAs={Icon}\n              alt={intlCloseLabel}\n              className=\"align-self-start\"\n              src={Close}\n              onClick={onClose}\n              variant=\"primary\"\n              invertColors\n            />\n          </div>\n        </div>\n        {action && (\n          <Button\n            as={action.href ? 'a' : 'button'}\n            href={action.href}\n            onClick={action.onClick}\n            size=\"sm\"\n            variant=\"inverse-outline-primary\"\n          >\n            {action.label}\n          </Button>\n        )}\n      </BaseToast>\n    </ToastContainer>\n  );\n}\n\nToast.defaultProps = {\n  action: null,\n  closeLabel: undefined,\n  delay: TOAST_DELAY,\n  className: undefined,\n};\n\nToast.propTypes = {\n  /** A string or an element that is rendered inside the main body of the `Toast`. */\n  children: PropTypes.string.isRequired,\n  /**\n   * A function that is called on close. It can be used to perform\n   * actions upon closing of the `Toast`, such as setting the \"show\"\n   * element to false.\n   * */\n  onClose: PropTypes.func.isRequired,\n  /** Boolean used to control whether the `Toast` shows */\n  show: PropTypes.bool.isRequired,\n  /**\n   * Fields used to build optional action button.\n   * `label` is a string rendered inside the button.\n   * `href` is a link that will render the action button as an anchor tag.\n   * `onClick` is a function that is called when the button is clicked.\n   */\n  action: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    href: PropTypes.string,\n    onClick: PropTypes.func,\n  }),\n  /**\n   * Alt text for the `Toast`'s dismiss button. Defaults to 'Close'.\n   */\n  closeLabel: PropTypes.string,\n  /** Time in milliseconds for which the `Toast` will display. */\n  delay: PropTypes.number,\n  /** Class names for the `BaseToast` component */\n  className: PropTypes.string,\n};\n\nexport default Toast;\n"],"mappings":"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","ignoreList":[]}

package/dist/Toast/index.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "variables";
 @import "~bootstrap/scss/toasts";
 
@@ -5,7 +6,7 @@
   background-color: $toast-background-color;
   box-shadow: $toast-box-shadow;
   margin: 0;
-  padding: 1rem;
+  padding: $spacer;
   position: relative;
   border-radius: $toast-border-radius;
   z-index: 2;
@@ -38,15 +39,15 @@
     }
 
     & + .btn {
-      margin-top: 1rem;
+      margin-top: $spacer;
     }
   }
 
-  @media only screen and (width <= 768px) {
+  @media (max-width: map.get($grid-breakpoints, "md")) {
     max-width: 100%;
   }
 
-  @media only screen and (width >= 768px) {
+  @media (min-width: map.get($grid-breakpoints, "md")) {
     min-width: $toast-max-width;
     max-width: $toast-max-width;
   }

package/dist/index.d.ts

@@ -39,6 +39,7 @@ export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalD
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
+export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 export { default as Tooltip } from './Tooltip';
 export { default as useWindowSize, type WindowSizeData } from './hooks/useWindowSizeHook';
 export { default as useToggle, type Toggler, type ToggleHandlers } from './hooks/useToggleHook';
@@ -163,7 +164,6 @@ export const
 // from './Tabs';
 /** @deprecated Replaced by `Form.Control`. */
 export const TextArea: any; // from './TextArea';
-export const Toast: any, TOAST_CLOSE_LABEL_TEXT: string, TOAST_DELAY: number; // from './Toast';
 /** @deprecated Replaced by `Form.Group`. */
 export const ValidationFormGroup: any; // from './ValidationFormGroup';
 export const TransitionReplace: any; // from './TransitionReplace';

package/dist/index.js

@@ -39,6 +39,7 @@ export { default as ModalDialog, MODAL_DIALOG_CLOSE_LABEL } from './Modal/ModalD
 export { default as ModalLayer } from './Modal/ModalLayer';
 export { default as Overlay, OverlayTrigger } from './Overlay';
 export { default as Portal } from './Modal/Portal';
+export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 export { default as Tooltip } from './Tooltip';
 export { default as useWindowSize } from './hooks/useWindowSizeHook';
 export { default as useToggle } from './hooks/useToggleHook';
@@ -163,7 +164,6 @@ export {
 } from './Tabs';
 /** @deprecated Replaced by `Form.Control`. */
 export { default as TextArea } from './TextArea';
-export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 /** @deprecated Replaced by `Form.Group`. */
 export { default as ValidationFormGroup } from './ValidationFormGroup';
 export { default as TransitionReplace } from './TransitionReplace';