@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/dist/Hyperlink/index.js

@@ -1,4 +1,4 @@
-const _excluded = ["className", "destination", "children", "target", "onClick", "externalLinkAlternativeText", "externalLinkTitle", "variant", "isInline", "showLaunchIcon"];
+var _excluded = ["className", "destination", "children", "target", "onClick", "externalLinkAlternativeText", "externalLinkTitle", "variant", "isInline", "showLaunchIcon"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -9,28 +9,24 @@ import isRequiredIf from 'react-proptype-conditional-require';
 import { Launch } from '../../icons';
 import Icon from '../Icon';
 import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
-export const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';
-export const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';
-const Hyperlink = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-      className,
-      destination,
-      children,
-      target,
-      onClick,
-      externalLinkAlternativeText,
-      externalLinkTitle,
-      variant,
-      isInline,
-      showLaunchIcon
-    } = props,
+export var HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';
+export var HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';
+var Hyperlink = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+    destination = props.destination,
+    children = props.children,
+    target = props.target,
+    onClick = props.onClick,
+    externalLinkAlternativeText = props.externalLinkAlternativeText,
+    externalLinkTitle = props.externalLinkTitle,
+    variant = props.variant,
+    isInline = props.isInline,
+    showLaunchIcon = props.showLaunchIcon,
     attrs = _objectWithoutProperties(props, _excluded);
-  let externalLinkIcon;
+  var externalLinkIcon;
   if (target === '_blank') {
-    const generateRel = () => {
-      let {
-        rel
-      } = attrs;
+    var generateRel = function generateRel() {
+      var rel = attrs.rel;
       if (!rel) {
         return 'noopener noreferrer';
       }
@@ -62,7 +58,7 @@ const Hyperlink = /*#__PURE__*/React.forwardRef((props, ref) => {
   }
   return /*#__PURE__*/React.createElement("a", _extends({
     ref: ref,
-    className: classNames('pgn__hyperlink', `${variant}-link`, {
+    className: classNames('pgn__hyperlink', "".concat(variant, "-link"), {
       'standalone-link': !isInline,
       'inline-link': isInline
     }, className),
@@ -74,7 +70,7 @@ const Hyperlink = /*#__PURE__*/React.forwardRef((props, ref) => {
 Hyperlink.defaultProps = {
   className: undefined,
   target: '_self',
-  onClick: () => {},
+  onClick: function onClick() {},
   externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,
   externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,
   variant: 'default',
@@ -88,22 +84,27 @@ Hyperlink.propTypes = {
   children: PropTypes.node.isRequired,
   /** Custom class names for the hyperlink */
   className: PropTypes.string,
-  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be loaded into the same browsing context as the current one. If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
-   */
+  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be
+   * loaded into the same browsing context as the current one.
+   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent
+   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).
+  */
   target: PropTypes.string,
   /** specifies the callback function when the link is clicked */
   onClick: PropTypes.func,
-  // eslint-disable-next-line max-len
   /** specifies the text for links with a `_blank` target (which loads the URL in a new browsing context). */
-  externalLinkAlternativeText: isRequiredIf(PropTypes.string, props => props.target === '_blank'),
-  // eslint-disable-next-line max-len
+  externalLinkAlternativeText: isRequiredIf(PropTypes.string, function (props) {
+    return props.target === '_blank';
+  }),
   /** specifies the title for links with a `_blank` target (which loads the URL in a new browsing context). */
-  externalLinkTitle: isRequiredIf(PropTypes.string, props => props.target === '_blank'),
+  externalLinkTitle: isRequiredIf(PropTypes.string, function (props) {
+    return props.target === '_blank';
+  }),
   /** type of hyperlink */
   variant: PropTypes.oneOf(['default', 'muted', 'brand']),
-  /** specify the link style. By default it will be underlined. */
+  /** specify the link style. By default, it will be underlined. */
   isInline: PropTypes.bool,
-  /** specify if we need to show launch Icon. By default it will be visible. */
+  /** specify if we need to show launch Icon. By default, it will be visible. */
   showLaunchIcon: PropTypes.bool
 };
 export default withDeprecatedProps(Hyperlink, 'Hyperlink', {

package/dist/Hyperlink/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","isRequiredIf","Launch","Icon","withDeprecatedProps","DeprTypes","HYPER_LINK_EXTERNAL_LINK_ALT_TEXT","HYPER_LINK_EXTERNAL_LINK_TITLE","Hyperlink","forwardRef","props","ref","className","destination","children","target","onClick","externalLinkAlternativeText","externalLinkTitle","variant","isInline","showLaunchIcon","attrs","_objectWithoutProperties","_excluded","externalLinkIcon","generateRel","rel","includes","createElement","title","src","screenReaderText","style","height","width","_extends","href","defaultProps","undefined","propTypes","string","isRequired","node","func","oneOf","bool","content","deprType","MOVED","newName"],"sources":["../../src/Hyperlink/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport isRequiredIf from 'react-proptype-conditional-require';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nexport const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';\nexport const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';\n\nconst Hyperlink = React.forwardRef((props, ref) => {\n  const {\n    className,\n    destination,\n    children,\n    target,\n    onClick,\n    externalLinkAlternativeText,\n    externalLinkTitle,\n    variant,\n    isInline,\n    showLaunchIcon,\n    ...attrs\n  } = props;\n  let externalLinkIcon;\n\n  if (target === '_blank') {\n    const generateRel = () => {\n      let { rel } = attrs;\n      if (!rel) {\n        return 'noopener noreferrer';\n      }\n      if (!rel.includes('noopener')) {\n        rel += ' noopener';\n      }\n      if (!rel.includes('noreferrer')) {\n        rel += ' noreferrer';\n      }\n      return rel;\n    };\n\n    // Add this rel attribute to prevent Reverse Tabnabbing\n    attrs.rel = generateRel();\n    if (showLaunchIcon) {\n      externalLinkIcon = (\n        <span\n          className=\"pgn__hyperlink__external-icon\"\n          title={externalLinkTitle}\n        >\n          <Icon\n            src={Launch}\n            screenReaderText={externalLinkAlternativeText}\n            style={{ height: '1em', width: '1em' }}\n            data-testid=\"hyperlink-icon\"\n          />\n        </span>\n      );\n    }\n  }\n\n  return (\n    <a\n      ref={ref}\n      className={classNames(\n        'pgn__hyperlink',\n        `${variant}-link`,\n        {\n          'standalone-link': !isInline,\n          'inline-link': isInline,\n        },\n        className,\n      )}\n      href={destination}\n      target={target}\n      onClick={onClick}\n      {...attrs}\n    >\n      {children}\n      {externalLinkIcon}\n    </a>\n  );\n});\n\nHyperlink.defaultProps = {\n  className: undefined,\n  target: '_self',\n  onClick: () => {},\n  externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,\n  externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,\n  variant: 'default',\n  isInline: false,\n  showLaunchIcon: true,\n};\n\nHyperlink.propTypes = {\n  /** specifies the URL */\n  destination: PropTypes.string.isRequired,\n  /** Content of the hyperlink */\n  children: PropTypes.node.isRequired,\n  /** Custom class names for the hyperlink */\n  className: PropTypes.string,\n  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be loaded into the same browsing context as the current one. If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n   */\n  target: PropTypes.string,\n  /** specifies the callback function when the link is clicked */\n  onClick: PropTypes.func,\n  // eslint-disable-next-line max-len\n  /** specifies the text for links with a `_blank` target (which loads the URL in a new browsing context). */\n  externalLinkAlternativeText: isRequiredIf(\n    PropTypes.string,\n    props => props.target === '_blank',\n  ),\n  // eslint-disable-next-line max-len\n  /** specifies the title for links with a `_blank` target (which loads the URL in a new browsing context). */\n  externalLinkTitle: isRequiredIf(\n    PropTypes.string,\n    props => props.target === '_blank',\n  ),\n  /** type of hyperlink */\n  variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n  /** specify the link style. By default it will be underlined. */\n  isInline: PropTypes.bool,\n  /** specify if we need to show launch Icon. By default it will be visible. */\n  showLaunchIcon: PropTypes.bool,\n};\n\nexport default withDeprecatedProps(Hyperlink, 'Hyperlink', {\n  /** specifies the text or element that a URL should be associated with */\n  content: {\n    deprType: DeprTypes.MOVED,\n    newName: 'children',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","isRequiredIf","Launch","Icon","withDeprecatedProps","DeprTypes","HYPER_LINK_EXTERNAL_LINK_ALT_TEXT","HYPER_LINK_EXTERNAL_LINK_TITLE","Hyperlink","forwardRef","props","ref","className","destination","children","target","onClick","externalLinkAlternativeText","externalLinkTitle","variant","isInline","showLaunchIcon","attrs","_objectWithoutProperties","_excluded","externalLinkIcon","generateRel","rel","includes","createElement","title","src","screenReaderText","style","height","width","_extends","concat","href","defaultProps","undefined","propTypes","string","isRequired","node","func","oneOf","bool","content","deprType","MOVED","newName"],"sources":["../../src/Hyperlink/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport isRequiredIf from 'react-proptype-conditional-require';\nimport { Launch } from '../../icons';\nimport Icon from '../Icon';\n\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\nexport const HYPER_LINK_EXTERNAL_LINK_ALT_TEXT = 'in a new tab';\nexport const HYPER_LINK_EXTERNAL_LINK_TITLE = 'Opens in a new tab';\n\nconst Hyperlink = React.forwardRef((props, ref) => {\n  const {\n    className,\n    destination,\n    children,\n    target,\n    onClick,\n    externalLinkAlternativeText,\n    externalLinkTitle,\n    variant,\n    isInline,\n    showLaunchIcon,\n    ...attrs\n  } = props;\n  let externalLinkIcon;\n\n  if (target === '_blank') {\n    const generateRel = () => {\n      let { rel } = attrs;\n      if (!rel) {\n        return 'noopener noreferrer';\n      }\n      if (!rel.includes('noopener')) {\n        rel += ' noopener';\n      }\n      if (!rel.includes('noreferrer')) {\n        rel += ' noreferrer';\n      }\n      return rel;\n    };\n\n    // Add this rel attribute to prevent Reverse Tabnabbing\n    attrs.rel = generateRel();\n    if (showLaunchIcon) {\n      externalLinkIcon = (\n        <span\n          className=\"pgn__hyperlink__external-icon\"\n          title={externalLinkTitle}\n        >\n          <Icon\n            src={Launch}\n            screenReaderText={externalLinkAlternativeText}\n            style={{ height: '1em', width: '1em' }}\n            data-testid=\"hyperlink-icon\"\n          />\n        </span>\n      );\n    }\n  }\n\n  return (\n    <a\n      ref={ref}\n      className={classNames(\n        'pgn__hyperlink',\n        `${variant}-link`,\n        {\n          'standalone-link': !isInline,\n          'inline-link': isInline,\n        },\n        className,\n      )}\n      href={destination}\n      target={target}\n      onClick={onClick}\n      {...attrs}\n    >\n      {children}\n      {externalLinkIcon}\n    </a>\n  );\n});\n\nHyperlink.defaultProps = {\n  className: undefined,\n  target: '_self',\n  onClick: () => {},\n  externalLinkAlternativeText: HYPER_LINK_EXTERNAL_LINK_ALT_TEXT,\n  externalLinkTitle: HYPER_LINK_EXTERNAL_LINK_TITLE,\n  variant: 'default',\n  isInline: false,\n  showLaunchIcon: true,\n};\n\nHyperlink.propTypes = {\n  /** specifies the URL */\n  destination: PropTypes.string.isRequired,\n  /** Content of the hyperlink */\n  children: PropTypes.node.isRequired,\n  /** Custom class names for the hyperlink */\n  className: PropTypes.string,\n  /** specifies where the link should open. The default behavior is `_self`, which means that the URL will be\n   * loaded into the same browsing context as the current one.\n   * If the target is `_blank` (opening a new window) `rel='noopener'` will be added to the anchor tag to prevent\n   * any potential [reverse tabnabbing attack](https://www.owasp.org/index.php/Reverse_Tabnabbing).\n  */\n  target: PropTypes.string,\n  /** specifies the callback function when the link is clicked */\n  onClick: PropTypes.func,\n  /** specifies the text for links with a `_blank` target (which loads the URL in a new browsing context). */\n  externalLinkAlternativeText: isRequiredIf(\n    PropTypes.string,\n    props => props.target === '_blank',\n  ),\n  /** specifies the title for links with a `_blank` target (which loads the URL in a new browsing context). */\n  externalLinkTitle: isRequiredIf(\n    PropTypes.string,\n    props => props.target === '_blank',\n  ),\n  /** type of hyperlink */\n  variant: PropTypes.oneOf(['default', 'muted', 'brand']),\n  /** specify the link style. By default, it will be underlined. */\n  isInline: PropTypes.bool,\n  /** specify if we need to show launch Icon. By default, it will be visible. */\n  showLaunchIcon: PropTypes.bool,\n};\n\nexport default withDeprecatedProps(Hyperlink, 'Hyperlink', {\n  /** specifies the text or element that a URL should be associated with */\n  content: {\n    deprType: DeprTypes.MOVED,\n    newName: 'children',\n  },\n});\n"],"mappings":"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"}

package/dist/Hyperlink/index.scss

@@ -1,9 +1,9 @@
 .pgn__hyperlink {
+  display: inline-flex;
+  align-items: center;
   text-align: start;
 
   &__external-icon {
-    display: inline-block;
-    vertical-align: middle;
-    margin-inline-start: var(--pgn-spacing-spacer-2);
+    margin-inline-start: map_get($spacers, 2);
   }
 }

package/dist/Icon/_variables.scss

@@ -0,0 +1,7 @@
+// Icons sizes
+
+$icon-inline: .8em !default;
+$icon-xs: 1rem !default;
+$icon-sm: 1.25rem !default;
+$icon-md: 1.5rem !default;
+$icon-lg: 1.75rem !default;

package/dist/Icon/index.js

@@ -1,10 +1,11 @@
-const _excluded = ["src", "id", "className", "hidden", "screenReaderText", "svgAttrs", "size"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["src", "id", "className", "hidden", "screenReaderText", "svgAttrs", "size"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
@@ -21,28 +22,24 @@ import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
  */
 
 function Icon(_ref) {
-  let {
-      src: Component,
-      id,
-      className,
-      hidden,
-      screenReaderText,
-      svgAttrs,
-      size
-    } = _ref,
+  var Component = _ref.src,
+    id = _ref.id,
+    className = _ref.className,
+    hidden = _ref.hidden,
+    screenReaderText = _ref.screenReaderText,
+    svgAttrs = _ref.svgAttrs,
+    size = _ref.size,
     attrs = _objectWithoutProperties(_ref, _excluded);
   if (Component) {
     // If no aria label is specified, hide this icon from screenreaders
-    const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];
-    const mergedSvgProps = _objectSpread({}, svgAttrs);
+    var hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];
+    var mergedSvgProps = _objectSpread({}, svgAttrs);
     if (!hasAriaLabel) {
       mergedSvgProps['aria-label'] = undefined;
       mergedSvgProps['aria-hidden'] = true;
     }
     return /*#__PURE__*/React.createElement("span", _extends({
-      className: classNames('pgn__icon', {
-        [`pgn__icon__${size}`]: !!size
-      }, className),
+      className: classNames('pgn__icon', _defineProperty({}, "pgn__icon__".concat(size), !!size), className),
       id: id
     }, attrs), /*#__PURE__*/React.createElement(Component, _extends({
       role: "img",
@@ -60,28 +57,35 @@ function Icon(_ref) {
   }, screenReaderText));
 }
 Icon.propTypes = {
-  // eslint-disable-next-line max-len
-  /** An icon component to render. Example import of a Paragon icon component: `import { Check } from '@edx/paragon/dist/icon';` */
-  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * An icon component to render.
+   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`
+   */
+  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** HTML element attributes to pass through to the underlying svg element */
   svgAttrs: PropTypes.shape({
     'aria-label': PropTypes.string,
     'aria-labelledby': PropTypes.string
   }),
-  // eslint-disable-next-line max-len
-  /** the `id` property of the Icon element, by default this value is generated with the `newId` function with the `prefix` of `Icon`. */
+  /**
+   * the `id` property of the Icon element, by default this value is generated
+   * with the `newId` function with the `prefix` of `Icon`.
+   */
   id: PropTypes.string,
-  // eslint-disable-next-line max-len
   /** The size of the icon. */
   size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),
-  // eslint-disable-next-line max-len
   /** A class name that will define what the Icon looks like. */
   className: PropTypes.string,
-  // eslint-disable-next-line max-len
-  /** a boolean that determines the value of `aria-hidden` attribute on the Icon span, this value is `true` by default. */
+  /**
+   * a boolean that determines the value of `aria-hidden` attribute on the Icon span,
+   * this value is `true` by default.
+   */
   hidden: PropTypes.bool,
-  // eslint-disable-next-line max-len
-  /** a string or an element that will be used on a secondary span leveraging the `sr-only` style for screenreader only text, this value is `undefined` by default. This value is recommended for use unless the Icon is being used in a way that is purely decorative or provides no additional context for screen reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.
+  /**
+   * a string or an element that will be used on a secondary span leveraging the `sr-only` style
+   * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless
+   * the Icon is being used in a way that is purely decorative or provides no additional context for screen
+   * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.
    */
   screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
 };
@@ -97,8 +101,12 @@ Icon.defaultProps = {
 export default withDeprecatedProps(Icon, 'Icon', {
   className: {
     deprType: DeprTypes.FORMAT,
-    expect: value => typeof value === 'string',
-    transform: value => Array.isArray(value) ? value.join(' ') : value,
+    expect: function expect(value) {
+      return typeof value === 'string';
+    },
+    transform: function transform(value) {
+      return Array.isArray(value) ? value.join(' ') : value;
+    },
     message: 'It should be a string.'
   }
 });

package/dist/Icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","newId","withDeprecatedProps","DeprTypes","Icon","_ref","src","Component","id","className","hidden","screenReaderText","svgAttrs","size","attrs","_objectWithoutProperties","_excluded","hasAriaLabel","mergedSvgProps","_objectSpread","undefined","createElement","_extends","role","focusable","Fragment","propTypes","oneOfType","element","func","shape","string","oneOf","bool","defaultProps","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/Icon/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport newId from '../utils/newId';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\n/**\n * An svg with an \"img\" role must satisfy the following a11y requirements\n * - It needs a text alternative in the form of aria-label, aria-labelledby, or screen-reader only text.\n * - If no label is desired, aria-label will be set to an empty string and aria-hidden to \"true\".\n * - focusable is set to false on the svg in all cases as a workaround for an ie11 bug\n */\n\nfunction Icon({\n  src: Component,\n  id,\n  className,\n  hidden,\n  screenReaderText,\n  svgAttrs,\n  size,\n  ...attrs\n}) {\n  if (Component) {\n    // If no aria label is specified, hide this icon from screenreaders\n    const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];\n\n    const mergedSvgProps = { ...svgAttrs };\n\n    if (!hasAriaLabel) {\n      mergedSvgProps['aria-label'] = undefined;\n      mergedSvgProps['aria-hidden'] = true;\n    }\n\n    return (\n      <span\n        className={classNames('pgn__icon', { [`pgn__icon__${size}`]: !!size }, className)}\n        id={id}\n        {...attrs}\n      >\n        <Component\n          role=\"img\"\n          focusable={false}\n          {...mergedSvgProps}\n        />\n        {screenReaderText && (\n          <span className=\"sr-only\">\n            {screenReaderText}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      <span\n        id={id || newId('Icon')}\n        className={className}\n        aria-hidden={hidden}\n      />\n      {screenReaderText && (\n        <span className=\"sr-only\">\n          {screenReaderText}\n        </span>\n      )}\n    </>\n  );\n}\n\nIcon.propTypes = {\n  // eslint-disable-next-line max-len\n  /** An icon component to render. Example import of a Paragon icon component: `import { Check } from '@edx/paragon/dist/icon';` */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  /** HTML element attributes to pass through to the underlying svg element */\n  svgAttrs: PropTypes.shape({\n    'aria-label': PropTypes.string,\n    'aria-labelledby': PropTypes.string,\n  }),\n  // eslint-disable-next-line max-len\n  /** the `id` property of the Icon element, by default this value is generated with the `newId` function with the `prefix` of `Icon`. */\n  id: PropTypes.string,\n  // eslint-disable-next-line max-len\n  /** The size of the icon. */\n  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),\n  // eslint-disable-next-line max-len\n  /** A class name that will define what the Icon looks like. */\n  className: PropTypes.string,\n  // eslint-disable-next-line max-len\n  /** a boolean that determines the value of `aria-hidden` attribute on the Icon span, this value is `true` by default. */\n  hidden: PropTypes.bool,\n  // eslint-disable-next-line max-len\n  /** a string or an element that will be used on a secondary span leveraging the `sr-only` style for screenreader only text, this value is `undefined` by default. This value is recommended for use unless the Icon is being used in a way that is purely decorative or provides no additional context for screen reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.\n   */\n  screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nIcon.defaultProps = {\n  src: null,\n  svgAttrs: {},\n  id: undefined,\n  hidden: true,\n  screenReaderText: undefined,\n  size: undefined,\n  className: undefined,\n};\n\nexport default withDeprecatedProps(Icon, 'Icon', {\n  className: {\n    deprType: DeprTypes.FORMAT,\n    expect: value => typeof value === 'string',\n    transform: value => (Array.isArray(value) ? value.join(' ') : value),\n    message: 'It should be a string.',\n  },\n});\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","newId","withDeprecatedProps","DeprTypes","Icon","_ref","Component","src","id","className","hidden","screenReaderText","svgAttrs","size","attrs","_objectWithoutProperties","_excluded","hasAriaLabel","mergedSvgProps","_objectSpread","undefined","createElement","_extends","_defineProperty","concat","role","focusable","Fragment","propTypes","oneOfType","element","elementType","shape","string","oneOf","bool","defaultProps","deprType","FORMAT","expect","value","transform","Array","isArray","join","message"],"sources":["../../src/Icon/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport newId from '../utils/newId';\nimport withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';\n\n/**\n * An svg with an \"img\" role must satisfy the following a11y requirements\n * - It needs a text alternative in the form of aria-label, aria-labelledby, or screen-reader only text.\n * - If no label is desired, aria-label will be set to an empty string and aria-hidden to \"true\".\n * - focusable is set to false on the svg in all cases as a workaround for an ie11 bug\n */\n\nfunction Icon({\n  src: Component,\n  id,\n  className,\n  hidden,\n  screenReaderText,\n  svgAttrs,\n  size,\n  ...attrs\n}) {\n  if (Component) {\n    // If no aria label is specified, hide this icon from screenreaders\n    const hasAriaLabel = svgAttrs['aria-label'] || svgAttrs['aria-labelledby'];\n\n    const mergedSvgProps = { ...svgAttrs };\n\n    if (!hasAriaLabel) {\n      mergedSvgProps['aria-label'] = undefined;\n      mergedSvgProps['aria-hidden'] = true;\n    }\n\n    return (\n      <span\n        className={classNames('pgn__icon', { [`pgn__icon__${size}`]: !!size }, className)}\n        id={id}\n        {...attrs}\n      >\n        <Component\n          role=\"img\"\n          focusable={false}\n          {...mergedSvgProps}\n        />\n        {screenReaderText && (\n          <span className=\"sr-only\">\n            {screenReaderText}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  return (\n    <>\n      <span\n        id={id || newId('Icon')}\n        className={className}\n        aria-hidden={hidden}\n      />\n      {screenReaderText && (\n        <span className=\"sr-only\">\n          {screenReaderText}\n        </span>\n      )}\n    </>\n  );\n}\n\nIcon.propTypes = {\n  /**\n   * An icon component to render.\n   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';`\n   */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n  /** HTML element attributes to pass through to the underlying svg element */\n  svgAttrs: PropTypes.shape({\n    'aria-label': PropTypes.string,\n    'aria-labelledby': PropTypes.string,\n  }),\n  /**\n   * the `id` property of the Icon element, by default this value is generated\n   * with the `newId` function with the `prefix` of `Icon`.\n   */\n  id: PropTypes.string,\n  /** The size of the icon. */\n  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg']),\n  /** A class name that will define what the Icon looks like. */\n  className: PropTypes.string,\n  /**\n   * a boolean that determines the value of `aria-hidden` attribute on the Icon span,\n   * this value is `true` by default.\n   */\n  hidden: PropTypes.bool,\n  /**\n   * a string or an element that will be used on a secondary span leveraging the `sr-only` style\n   * for screenreader only text, this value is `undefined` by default. This value is recommended for use unless\n   * the Icon is being used in a way that is purely decorative or provides no additional context for screen\n   * reader users. This field should be thought of the same way an `alt` attribute would be used for `image` tags.\n   */\n  screenReaderText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n};\n\nIcon.defaultProps = {\n  src: null,\n  svgAttrs: {},\n  id: undefined,\n  hidden: true,\n  screenReaderText: undefined,\n  size: undefined,\n  className: undefined,\n};\n\nexport default withDeprecatedProps(Icon, 'Icon', {\n  className: {\n    deprType: DeprTypes.FORMAT,\n    expect: value => typeof value === 'string',\n    transform: value => (Array.isArray(value) ? value.join(' ') : value),\n    message: 'It should be a string.',\n  },\n});\n"],"mappings":"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"}

package/dist/Icon/index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .pgn__icon {
   display: block;
   height: 1.5rem; // 24px, Assumes base font size to be 16px
@@ -6,28 +8,28 @@
   flex-shrink: 0;
 
   &.pgn__icon__inline {
-    width: var(--pgn-size-icon-inline);
-    height: var(--pgn-size-icon-inline);
+    width: $icon-inline;
+    height: $icon-inline;
   }
 
   &.pgn__icon__xs {
-    width: var(--pgn-size-icon-xs);
-    height: var(--pgn-size-icon-xs);
+    width: $icon-xs;
+    height: $icon-xs;
   }
 
   &.pgn__icon__sm {
-    width: var(--pgn-size-icon-sm);
-    height: var(--pgn-size-icon-sm);
+    width: $icon-sm;
+    height: $icon-sm;
   }
 
   &.pgn__icon__md {
-    width: var(--pgn-size-icon-md);
-    height: var(--pgn-size-icon-md);
+    width: $icon-md;
+    height: $icon-md;
   }
 
   &.pgn__icon__lg {
-    width: var(--pgn-size-icon-lg);
-    height: var(--pgn-size-icon-lg);
+    width: $icon-lg;
+    height: $icon-lg;
   }
 }
 

package/dist/IconButton/index.js

@@ -1,37 +1,42 @@
-const _excluded = ["className", "alt", "invertColors", "icon", "src", "iconClassNames", "onClick", "size", "variant", "iconAs", "isActive"],
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["className", "alt", "invertColors", "icon", "src", "iconClassNames", "onClick", "size", "variant", "iconAs", "isActive"],
   _excluded2 = ["tooltipPlacement", "tooltipContent", "variant", "invertColors"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Icon from '../Icon';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { OverlayTrigger } from '../Overlay';
 import Tooltip from '../Tooltip';
-const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      className,
-      alt,
-      invertColors,
-      icon,
-      src,
-      iconClassNames,
-      onClick,
-      size,
-      variant,
-      iconAs,
-      isActive
-    } = _ref,
+var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    alt = _ref.alt,
+    invertColors = _ref.invertColors,
+    icon = _ref.icon,
+    src = _ref.src,
+    iconClassNames = _ref.iconClassNames,
+    onClick = _ref.onClick,
+    size = _ref.size,
+    variant = _ref.variant,
+    iconAs = _ref.iconAs,
+    isActive = _ref.isActive,
     attrs = _objectWithoutProperties(_ref, _excluded);
-  const invert = invertColors ? 'inverse-' : '';
-  const activeStyle = isActive ? `${variant}-` : '';
-  const IconComponent = iconAs;
+  var invert = invertColors ? 'inverse-' : '';
+  var activeStyle = isActive ? "".concat(variant, "-") : '';
+  if (!iconAs && process.env.NODE_ENV === 'development' && console) {
+    var msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and ' + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon ' + 'as Paragon is moving away from FontAwesome, please use Paragon\'s icons instead.';
+    // eslint-disable-next-line no-console
+    console.warn(msg);
+  }
+  var IconComponent = iconAs || FontAwesomeIcon;
   return /*#__PURE__*/React.createElement("button", _extends({
     "aria-label": alt,
-    className: classNames('btn-icon', `btn-icon-${invert}${variant}`, `btn-icon-${size}`, {
-      [`btn-icon-${invert}${activeStyle}active`]: isActive
-    }, className),
+    className: classNames('btn-icon', "btn-icon-".concat(invert).concat(variant), "btn-icon-".concat(size), _defineProperty({}, "btn-icon-".concat(invert).concat(activeStyle, "active"), isActive), className),
     onClick: onClick,
     type: "button",
     ref: ref
@@ -44,7 +49,7 @@ const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   })));
 });
 IconButton.defaultProps = {
-  iconAs: Icon,
+  iconAs: undefined,
   src: null,
   icon: undefined,
   iconClassNames: undefined,
@@ -52,25 +57,26 @@ IconButton.defaultProps = {
   invertColors: false,
   variant: 'primary',
   size: 'md',
-  onClick: () => {},
+  onClick: function onClick() {},
   isActive: false
 };
 IconButton.propTypes = {
   /** A custom class name. */
   className: PropTypes.string,
-  /** Component that renders the icon, currently defaults to `Icon` */
+  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,
+   *  but is going to be deprecated soon, please use Paragon's icons instead. */
   iconAs: PropTypes.elementType,
   /** An icon component to render. Example import of a Paragon icon component:
-   * `import { Check } from '@edx/paragon/dist/icon';`
+   * `import { Check } from '@openedx/paragon/dist/icon';`
    * */
-  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
   /** Alt text for your icon. For best practice, avoid using alt text to describe
    * the image in the `IconButton`. Instead, we recommend describing the function
    * of the button. */
   alt: PropTypes.string.isRequired,
   /** Changes icon styles for dark background */
   invertColors: PropTypes.bool,
-  /** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */
+  /** Accepts a React fontawesome icon. */
   icon: PropTypes.shape({
     prefix: PropTypes.string,
     iconName: PropTypes.string,
@@ -97,18 +103,16 @@ IconButton.propTypes = {
  * @returns { IconButton } a button wrapped in overlaytrigger
  */
 function IconButtonWithTooltip(_ref2) {
-  let {
-      tooltipPlacement,
-      tooltipContent,
-      variant,
-      invertColors
-    } = _ref2,
+  var tooltipPlacement = _ref2.tooltipPlacement,
+    tooltipContent = _ref2.tooltipContent,
+    variant = _ref2.variant,
+    invertColors = _ref2.invertColors,
     props = _objectWithoutProperties(_ref2, _excluded2);
-  const invert = invertColors ? 'inverse-' : '';
+  var invert = invertColors ? 'inverse-' : '';
   return /*#__PURE__*/React.createElement(OverlayTrigger, {
     placement: tooltipPlacement,
     overlay: /*#__PURE__*/React.createElement(Tooltip, {
-      id: `iconbutton-tooltip-${tooltipPlacement}`,
+      id: "iconbutton-tooltip-".concat(tooltipPlacement),
       variant: invert ? 'light' : ''
     }, tooltipContent)
   }, /*#__PURE__*/React.createElement(IconButton, _extends({

package/dist/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","Icon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","attrs","_objectWithoutProperties","_excluded","invert","activeStyle","IconComponent","createElement","_extends","type","defaultProps","undefined","propTypes","string","elementType","oneOfType","element","func","isRequired","bool","shape","prefix","iconName","array","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","_excluded2","placement","overlay","id","node"],"sources":["../../src/IconButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport Icon from '../Icon';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\n\nconst IconButton = React.forwardRef(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  const IconComponent = iconAs;\n\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: Icon,\n  src: null,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `Icon` */\n  iconAs: PropTypes.elementType,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@edx/paragon/dist/icon';`\n   * */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }),\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n};\n\n/**\n *\n * @param { object } args Arguments\n * @param { string } args.tooltipPlacement choose from https://popper.js.org/docs/v2/constructors/#options\n * @param { React.Component } args.tooltipContent any content to pass to tooltip content area\n * @returns { IconButton } a button wrapped in overlaytrigger\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, variant, invertColors, ...props\n}) {\n  const invert = invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : ''}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton variant={variant} invertColors={invertColors} {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  tooltipPlacement: 'top',\n  variant: 'primary',\n  invertColors: false,\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\nIconButton.IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton;\nexport { IconButtonWithTooltip };\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","FontAwesomeIcon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","attrs","_objectWithoutProperties","_excluded","invert","activeStyle","concat","process","env","NODE_ENV","console","msg","warn","IconComponent","createElement","_extends","_defineProperty","type","defaultProps","undefined","propTypes","string","elementType","oneOfType","element","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","_excluded2","placement","overlay","id","node"],"sources":["../../src/IconButton/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\n\nconst IconButton = React.forwardRef(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  if (!iconAs && process.env.NODE_ENV === 'development' && console) {\n    const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '\n      + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '\n      + 'as Paragon is moving away from FontAwesome, please use Paragon\\'s icons instead.';\n    // eslint-disable-next-line no-console\n    console.warn(msg);\n  }\n  const IconComponent = iconAs || FontAwesomeIcon;\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: undefined,\n  src: null,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,\n   *  but is going to be deprecated soon, please use Paragon's icons instead. */\n  iconAs: PropTypes.elementType,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/dist/icon';`\n   * */\n  src: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a React fontawesome icon. */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }),\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n};\n\n/**\n *\n * @param { object } args Arguments\n * @param { string } args.tooltipPlacement choose from https://popper.js.org/docs/v2/constructors/#options\n * @param { React.Component } args.tooltipContent any content to pass to tooltip content area\n * @returns { IconButton } a button wrapped in overlaytrigger\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, variant, invertColors, ...props\n}) {\n  const invert = invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : ''}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton variant={variant} invertColors={invertColors} {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  tooltipPlacement: 'top',\n  variant: 'primary',\n  invertColors: false,\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\nIconButton.IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton;\nexport { IconButtonWithTooltip };\n"],"mappings":"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"}