@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/dist/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","classNames","PropTypes","BaseDropdown","DropdownMenu","BaseDropdownItem","BaseDropdownToggle","DropdownDeprecated","Button","IconButton","Dropdown","forwardRef","_ref","ref","show","autoClose","onToggle","variant","className","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","internalShow","setInternalShow","isClosingPermitted","source","handleToggle","isOpen","event","metadata","_metadata","_objectSpread","currentTarget","document","key","createElement","_extends","concat","propTypes","oneOfType","string","bool","func","oneOf","defaultProps","undefined","DropdownToggle","_ref2","as","bsPrefix","otherProps","_excluded2","prefix","elementType","id","number","isRequired","Item","DropdownItem","_ref3","_excluded3","Deprecated","Toggle","Menu","Header","Divider","default","DropdownButton","SplitButton"],"sources":["../../src/Dropdown/index.jsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseDropdown from 'react-bootstrap/Dropdown';\nimport DropdownMenu from 'react-bootstrap/DropdownMenu';\nimport BaseDropdownItem from 'react-bootstrap/DropdownItem';\nimport BaseDropdownToggle from 'react-bootstrap/DropdownToggle';\nimport DropdownDeprecated from './deprecated';\nimport Button from '../Button';\nimport IconButton from '../IconButton';\n\nconst Dropdown = React.forwardRef(\n  // eslint-disable-next-line prefer-arrow-callback\n  function Dropdown({\n    show,\n    autoClose,\n    onToggle,\n    variant,\n    className,\n    ...rest\n  }, ref) {\n    const [internalShow, setInternalShow] = React.useState(show);\n    const isClosingPermitted = (source) => {\n      // autoClose=false only permits close on button click\n      if (autoClose === false) {\n        return source === 'click';\n      }\n      // autoClose=inside doesn't permit close on rootClose\n      if (autoClose === 'inside') {\n        return source !== 'rootClose';\n      }\n      // autoClose=outside doesn't permit close on select\n      if (autoClose === 'outside') {\n        return source !== 'select';\n      }\n      return true;\n    };\n\n    const handleToggle = (isOpen, event, metadata) => {\n      if (isOpen) {\n        setInternalShow(true);\n        onToggle?.(isOpen, event, metadata);\n        return;\n      }\n      let { source } = { ...metadata };\n\n      if (event.currentTarget === document && (source !== 'keydown' || event.key === 'Escape')) {\n        source = 'rootClose';\n      }\n      if (isClosingPermitted(source)) {\n        setInternalShow(false);\n        onToggle?.(isOpen, event, metadata);\n      }\n    };\n\n    return (\n      <BaseDropdown\n        className={classNames(\n          'pgn__dropdown',\n          `pgn__dropdown-${variant}`,\n          className,\n        )}\n        data-testid=\"dropdown\"\n        onToggle={handleToggle}\n        ref={ref}\n        show={internalShow}\n        {...rest}\n      />\n    );\n  },\n);\n\nDropdown.propTypes = {\n  autoClose: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  className: PropTypes.string,\n  onToggle: PropTypes.func,\n  show: PropTypes.bool,\n  variant: PropTypes.oneOf(['light', 'dark']),\n};\n\nDropdown.defaultProps = {\n  autoClose: true,\n  className: '',\n  onToggle: undefined,\n  show: false,\n  variant: 'light',\n};\n\nconst DropdownToggle = React.forwardRef(\n  // eslint-disable-next-line prefer-arrow-callback\n  function DropdownToggle({\n    as,\n    bsPrefix,\n    ...otherProps\n  }, ref) {\n    // hide arrow from the toggle if it is rendered as IconButton\n    // because it hinders the positioning of IconButton\n    const prefix = as === IconButton ? 'pgn__dropdown-toggle-iconbutton' : bsPrefix;\n    return <BaseDropdownToggle {...otherProps} as={as} bsPrefix={prefix} ref={ref} />;\n  },\n);\n\nDropdownToggle.propTypes = {\n  /** Specifies the base element. */\n  as: PropTypes.elementType,\n  /** Overrides underlying component base CSS class name. */\n  bsPrefix: PropTypes.string,\n  /** An html id attribute, necessary for assistive technologies, such as screen readers. */\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n};\n\nDropdownToggle.defaultProps = {\n  as: Button,\n  bsPrefix: 'dropdown-toggle',\n};\n\nDropdown.Item = React.forwardRef(\n  // eslint-disable-next-line prefer-arrow-callback\n  function DropdownItem({ className, ...otherProps }, ref) {\n    return (\n      <BaseDropdownItem\n        className={classNames(className, 'pgn__dropdown-item')}\n        ref={ref}\n        {...otherProps}\n      />\n    );\n  },\n);\n\nDropdown.Item.propTypes = {\n  className: PropTypes.string,\n};\n\nDropdown.Item.defaultProps = {\n  className: undefined,\n};\n\nDropdown.Deprecated = DropdownDeprecated;\nDropdown.Toggle = DropdownToggle;\nDropdown.Menu = DropdownMenu;\nDropdown.Header = BaseDropdown.Header;\nDropdown.Divider = BaseDropdown.Divider;\n\nexport default Dropdown;\nexport { DropdownToggle };\nexport { default as DropdownButton } from 'react-bootstrap/DropdownButton';\nexport { default as SplitButton } from 'react-bootstrap/SplitButton';\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","classNames","PropTypes","BaseDropdown","DropdownMenu","BaseDropdownItem","BaseDropdownToggle","Button","IconButton","Dropdown","forwardRef","_ref","ref","show","autoClose","onToggle","variant","className","rest","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","internalShow","setInternalShow","isClosingPermitted","source","handleToggle","isOpen","event","metadata","_metadata","_objectSpread","currentTarget","document","key","createElement","_extends","concat","propTypes","oneOfType","string","bool","func","oneOf","defaultProps","undefined","DropdownToggle","_ref2","as","bsPrefix","otherProps","_excluded2","prefix","elementType","id","number","isRequired","Item","DropdownItem","_ref3","_excluded3","Toggle","Menu","Header","Divider","default","DropdownButton","SplitButton"],"sources":["../../src/Dropdown/index.jsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport BaseDropdown from 'react-bootstrap/Dropdown';\nimport DropdownMenu from 'react-bootstrap/DropdownMenu';\nimport BaseDropdownItem from 'react-bootstrap/DropdownItem';\nimport BaseDropdownToggle from 'react-bootstrap/DropdownToggle';\nimport Button from '../Button';\nimport IconButton from '../IconButton';\n\nconst Dropdown = React.forwardRef(\n  // eslint-disable-next-line prefer-arrow-callback\n  function Dropdown({\n    show,\n    autoClose,\n    onToggle,\n    variant,\n    className,\n    ...rest\n  }, ref) {\n    const [internalShow, setInternalShow] = React.useState(show);\n    const isClosingPermitted = (source) => {\n      // autoClose=false only permits close on button click\n      if (autoClose === false) {\n        return source === 'click';\n      }\n      // autoClose=inside doesn't permit close on rootClose\n      if (autoClose === 'inside') {\n        return source !== 'rootClose';\n      }\n      // autoClose=outside doesn't permit close on select\n      if (autoClose === 'outside') {\n        return source !== 'select';\n      }\n      return true;\n    };\n\n    const handleToggle = (isOpen, event, metadata) => {\n      if (isOpen) {\n        setInternalShow(true);\n        onToggle?.(isOpen, event, metadata);\n        return;\n      }\n      let { source } = { ...metadata };\n\n      if (event.currentTarget === document && (source !== 'keydown' || event.key === 'Escape')) {\n        source = 'rootClose';\n      }\n      if (isClosingPermitted(source)) {\n        setInternalShow(false);\n        onToggle?.(isOpen, event, metadata);\n      }\n    };\n\n    return (\n      <BaseDropdown\n        className={classNames(\n          'pgn__dropdown',\n          `pgn__dropdown-${variant}`,\n          className,\n        )}\n        data-testid=\"dropdown\"\n        onToggle={handleToggle}\n        ref={ref}\n        show={internalShow}\n        {...rest}\n      />\n    );\n  },\n);\n\nDropdown.propTypes = {\n  autoClose: PropTypes.oneOfType([\n    PropTypes.string,\n    PropTypes.bool,\n  ]),\n  className: PropTypes.string,\n  onToggle: PropTypes.func,\n  show: PropTypes.bool,\n  variant: PropTypes.oneOf(['light', 'dark']),\n};\n\nDropdown.defaultProps = {\n  autoClose: true,\n  className: '',\n  onToggle: undefined,\n  show: false,\n  variant: 'light',\n};\n\nconst DropdownToggle = React.forwardRef(\n  // eslint-disable-next-line prefer-arrow-callback\n  function DropdownToggle({\n    as,\n    bsPrefix,\n    ...otherProps\n  }, ref) {\n    // hide arrow from the toggle if it is rendered as IconButton\n    // because it hinders the positioning of IconButton\n    const prefix = as === IconButton ? 'pgn__dropdown-toggle-iconbutton' : bsPrefix;\n    return <BaseDropdownToggle {...otherProps} as={as} bsPrefix={prefix} ref={ref} />;\n  },\n);\n\nDropdownToggle.propTypes = {\n  /** Specifies the base element. */\n  as: PropTypes.elementType,\n  /** Overrides underlying component base CSS class name. */\n  bsPrefix: PropTypes.string,\n  /** An html id attribute, necessary for assistive technologies, such as screen readers. */\n  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,\n};\n\nDropdownToggle.defaultProps = {\n  as: Button,\n  bsPrefix: 'dropdown-toggle',\n};\n\nDropdown.Item = React.forwardRef(\n  // eslint-disable-next-line prefer-arrow-callback\n  function DropdownItem({ className, ...otherProps }, ref) {\n    return (\n      <BaseDropdownItem\n        className={classNames(className, 'pgn__dropdown-item')}\n        ref={ref}\n        {...otherProps}\n      />\n    );\n  },\n);\n\nDropdown.Item.propTypes = {\n  className: PropTypes.string,\n};\n\nDropdown.Item.defaultProps = {\n  className: undefined,\n};\n\nDropdown.Toggle = DropdownToggle;\nDropdown.Menu = DropdownMenu;\nDropdown.Header = BaseDropdown.Header;\nDropdown.Divider = BaseDropdown.Divider;\n\nexport default Dropdown;\nexport { DropdownToggle };\nexport { default as DropdownButton } from 'react-bootstrap/DropdownButton';\nexport { default as SplitButton } from 'react-bootstrap/SplitButton';\n"],"mappings":"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","ignoreList":[]}

package/dist/Dropdown/index.scss

@@ -1,47 +1,46 @@
-@import "variables";
-@import "~bootstrap/scss/dropdown";
+@import "dropdown-bootstrap";
 
 .pgn__dropdown-dark {
   .dropdown-menu {
-    background-color: $dark-300;
-    color: $white;
+    background-color: var(--pgn-color-dark-300);
+    color: var(--pgn-color-white);
 
     .pgn__dropdown-item {
-      color: $white;
+      color: var(--pgn-color-white);
       font-weight: 400;
 
       &:hover {
-        background-color: $dark-200;
+        background-color: var(--pgn-color-dark-200);
       }
 
       &.active {
-        background-color: $light-300;
-        color: $primary-700;
+        background-color: var(--pgn-color-light-300);
+        color: var(--pgn-color-primary-700);
         font-weight: 700;
       }
 
       &:focus {
-        border: 2px solid $white;
+        border: 2px solid var(--pgn-color-white);
         background-color: inherit;
       }
     }
 
     .dropdown-header {
-      color: $light-700;
+      color: var(--pgn-color-light-700);
     }
 
 
     .dropdown-divider {
-      border-color: $dark-200;
+      border-color: var(--pgn-color-dark-200);
     }
   }
 }
 
 .dropdown-toggle::after {
+  content: "";
   border: 0;
   border-style: solid;
   border-width: .15rem .15rem 0 0;
-  content: "";
   height: .45rem;
   margin-inline-start: .5em;
   position: relative;

package/dist/Dropzone/index.scss

@@ -1,12 +1,10 @@
-@import "variables";
-
 .pgn__dropzone {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 200px;
-  padding: $dropzone-padding;
-  border: $dropzone-border-default;
+  padding: var(--pgn-spacing-dropzone-padding);
+  border: var(--pgn-spacing-dropzone-border-base) dashed var(--pgn-color-dropzone-border-base);
   box-sizing: border-box;
   cursor: pointer;
 
@@ -18,30 +16,30 @@
   }
 
   &:hover {
-    box-shadow: $dropzone-box-shadow-hover;
+    box-shadow: var(--pgn-elevation-dropzone-hover);
   }
 
   &:focus {
-    box-shadow: $dropzone-box-shadow-focus;
+    box-shadow: var(--pgn-elevation-dropzone-focus);
   }
 
   &.pgn__dropzone-validation-error {
-    box-shadow: $dropzone-box-shadow-error;
+    box-shadow: var(--pgn-elevation-dropzone-error);
   }
 
   &.pgn__dropzone-active {
-    box-shadow: $dropzone-box-shadow-active;
+    box-shadow: var(--pgn-elevation-dropzone-active);
   }
 }
 
 .pgn__dropzone-error-wrapper {
   text-align: center;
-  color: $dropzone-error-wrapper-color;
+  color: var(--pgn-color-dropzone-error-wrapper);
 }
 
 .pgn__dropzone-generic-alert {
   width: 100%;
-  margin-bottom: map_get($spacers, 4);
+  margin-bottom: var(--pgn-spacing-spacer-4);
 
   .pgn__alert-message-wrapper .alert-message-content {
     > span {
@@ -53,10 +51,10 @@
 .pgn__dropzone__upload-icon-wrapper {
   height: 56px;
   width: 56px;
-  background: $light-300;
+  background: var(--pgn-color-light-300);
   border-radius: 50%;
   position: relative;
-  margin-bottom: map-get($spacers, 4);
+  margin-bottom: var(--pgn-spacing-spacer-4);
 }
 
 .pgn__dropzone__upload-icon {
@@ -69,6 +67,6 @@
 }
 
 .pgn__dropzone__upload-restriction-message {
-  font-size: $dropzone-restriction-msg-font-size;
-  color: $dropzone-restriction-msg-color;
+  font-size: var(--pgn-typography-dropzone-restriction-msg-font-size);
+  color: var(--pgn-color-dropzone-restriction-msg);
 }

package/dist/Form/_FormText.scss

@@ -1,5 +1,5 @@
 .pgn__form-text {
-  font-size: $small-font-size;
+  font-size: var(--pgn-typography-font-size-small-base);
   display: flex;
   align-items: center;
 
@@ -22,35 +22,35 @@
 }
 
 .pgn__form-text-default {
-  color: $text-muted;
+  color: var(--pgn-color-text-muted);
 }
 
 .pgn__form-text-valid {
-  color: $form-feedback-valid-color;
+  color: var(--pgn-color-form-feedback-valid);
 }
 
 .pgn__form-text-invalid {
-  color: $form-feedback-invalid-color;
+  color: var(--pgn-color-form-feedback-invalid);
 }
 
 .pgn__form-text-warning {
-  color: $gray-900;
+  color: var(--pgn-color-gray-900);
 }
 
 .pgn__form-text-criteria-empty {
   .pgn__icon {
-    color: $text-muted;
+    color: var(--pgn-color-text-muted);
   }
 }
 
 .pgn__form-text-criteria-valid {
   .pgn__icon {
-    color: $form-feedback-valid-color;
+    color: var(--pgn-color-form-feedback-valid);
   }
 }
 
 .pgn__form-text-criteria-invalid {
   .pgn__icon {
-    color: $form-feedback-invalid-color;
+    color: var(--pgn-color-form-feedback-invalid);
   }
 }