@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/src/IconButton/README.md

@@ -20,7 +20,7 @@ notes: ''
   return (
     <div className="d-flex flex-wrap">
       {variants.map((variant) => (
-        <IconButton key={variant} src={Close} iconAs={Icon} alt="Close" onClick={() => {}} variant={variant} className="mr-2" />
+        <IconButton key={variant} src={Close} alt="Close" onClick={() => {}} variant={variant} className="mr-2" />
       ))}
     </div>
   );
@@ -40,7 +40,6 @@ notes: ''
           tooltipPlacement='top'
           tooltipContent={<div>a nice tooltip of {variant}!</div>}
           src={Close}
-          iconAs={Icon}
           alt="Close"
           onClick={() => {}}
           variant={variant}
@@ -64,7 +63,6 @@ notes: ''
           isActive
           key={variant}
           src={Close}
-          iconAs={Icon}
           alt="Close"
           onClick={() => {}}
           variant={variant}
@@ -89,7 +87,6 @@ notes: ''
           isActive
           key={variant}
           src={Close}
-          iconAs={Icon}
           alt="Close"
           onClick={() => {}}
           variant={variant}
@@ -109,7 +106,6 @@ notes: ''
   <div className="p-1 bg-brand">
     <IconButton
       src={MenuIcon}
-      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="brand"
@@ -119,7 +115,6 @@ notes: ''
   <div className="p-1 bg-primary">
     <IconButton
       src={MenuIcon}
-      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="primary"
@@ -129,7 +124,6 @@ notes: ''
   <div className="p-1 bg-secondary">
     <IconButton
       src={MenuIcon}
-      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="secondary"
@@ -139,7 +133,6 @@ notes: ''
   <div className="p-1 bg-success">
     <IconButton
       src={MenuIcon}
-      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="success"
@@ -149,7 +142,6 @@ notes: ''
   <div className="p-1 bg-warning">
     <IconButton
       src={MenuIcon}
-      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="warning"
@@ -159,7 +151,6 @@ notes: ''
   <div className="p-1 bg-danger">
     <IconButton
       src={MenuIcon}
-      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="danger"
@@ -169,7 +160,6 @@ notes: ''
   <div className="p-1 bg-light">
     <IconButton
       src={MenuIcon}
-      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="light"
@@ -179,7 +169,6 @@ notes: ''
   <div className="p-1" style={{ background: "black" }}>
     <IconButton
       src={MenuIcon}
-      iconAs={Icon}
       alt="Menu"
       onClick={() => console.log("You clicked the menu button")}
       variant="black"
@@ -197,7 +186,6 @@ notes: ''
     Small
     <IconButton
       src={MenuIcon}
-      iconAs={Icon}
       alt="Menu"
       onClick={() => {}}
       variant="primary"
@@ -208,7 +196,6 @@ notes: ''
     Inline:
     <IconButton
       src={MenuIcon}
-      iconAs={Icon}
       alt="Menu"
       onClick={() => {}}
       variant="primary"
@@ -220,7 +207,6 @@ notes: ''
     For example, applying className="x-small" will make the Icon Button look like this:
     <IconButton
       src={Favorite}
-      iconAs={Icon}
       alt="Favorite"
       onClick={() => {}}
       variant="primary"

package/src/IconButton/__snapshots__/IconButton.test.jsx.snap

@@ -10,34 +10,11 @@ exports[`<IconButton /> renders with required props 1`] = `
   <span
     className="btn-icon__icon-container"
   >
-    <svg
-      aria-hidden="true"
-      className="svg-inline--fa fa-InfoOutlineIcon btn-icon__icon"
-      data-icon="InfoOutlineIcon"
-      data-prefix="pgn"
-      focusable="false"
-      role="img"
-      src={null}
-      style={{}}
-      viewBox="0 0 function SvgInfoOutline(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, props), /*#__PURE__*/React.createElement("path", {
-    d: "M11 7h2v2h-2V7Zm0 4h2v6h-2v-6Zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2Zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8Z",
-    fill: "currentColor"
-  }));
-} undefined"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill="currentColor"
-        style={{}}
-      />
-    </svg>
+    <span
+      aria-hidden={true}
+      className="btn-icon__icon"
+      id="Icon1"
+    />
   </span>
 </button>
 `;

package/src/IconButton/_mixins.scss

@@ -0,0 +1,4 @@
+@mixin btn-icon-size($icon-size) {
+  width: $icon-size;
+  height: $icon-size;
+}

package/src/IconButton/index.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import Icon from '../Icon';
 import { OverlayTrigger } from '../Overlay';
 import Tooltip from '../Tooltip';
 
@@ -22,14 +22,8 @@ const IconButton = React.forwardRef(({
 }, ref) => {
   const invert = invertColors ? 'inverse-' : '';
   const activeStyle = isActive ? `${variant}-` : '';
-  if (!iconAs && process.env.NODE_ENV === 'development' && console) {
-    const 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);
-  }
-  const IconComponent = iconAs || FontAwesomeIcon;
+  const IconComponent = iconAs;
+
   return (
     <button
       aria-label={alt}
@@ -59,7 +53,7 @@ const IconButton = React.forwardRef(({
 });
 
 IconButton.defaultProps = {
-  iconAs: undefined,
+  iconAs: Icon,
   src: null,
   icon: undefined,
   iconClassNames: undefined,
@@ -74,8 +68,7 @@ IconButton.defaultProps = {
 IconButton.propTypes = {
   /** A custom class name. */
   className: PropTypes.string,
-  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,
-   *  but is going to be deprecated soon, please use Paragon's icons instead. */
+  /** Component that renders the icon, currently defaults to `Icon` */
   iconAs: PropTypes.elementType,
   /** An icon component to render. Example import of a Paragon icon component:
    * `import { Check } from '@openedx/paragon/dist/icon';`
@@ -87,7 +80,7 @@ IconButton.propTypes = {
   alt: PropTypes.string.isRequired,
   /** Changes icon styles for dark background */
   invertColors: PropTypes.bool,
-  /** Accepts a React fontawesome icon. */
+  /** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */
   icon: PropTypes.shape({
     prefix: PropTypes.string,
     iconName: PropTypes.string,