feat: completely deprecate FontAwesome (#2327)

* feat: finished FontAwesome deprecation * refactor: deleted fonawesom packages * refactor: after review
openedx · May 26, 2023 · 9a94ac5 · 9a94ac5
1 parent c13dfb1
commit 9a94ac5
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 103 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,16 +51,13 @@
     "replace-variables-definition-with-css": "node tokens/replace-variables.js -p src -t definition"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/react-fontawesome": "^0.1.18",
     "@popperjs/core": "^2.11.4",
     "bootstrap": "^4.6.2",
     "chroma-js": "^2.4.2",
     "classnames": "^2.3.1",
     "commander": "^9.4.1",
     "email-prop-type": "^3.0.0",
     "file-selector": "^0.6.0",
-    "font-awesome": "^4.7.0",
     "glob": "^8.0.3",
     "lodash.uniqby": "^4.7.0",
     "mailto-link": "^2.0.0",

diff --git a/src/IconButton/README.md b/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"

diff --git a/src/IconButton/__snapshots__/IconButton.test.jsx.snap b/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={Object {}}
-      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={Object {}}
-      />
-    </svg>
+    <span
+      aria-hidden={true}
+      className="btn-icon__icon"
+      id="Icon1"
+    />
   </span>
 </button>
 `;
diff --git a/src/IconButton/index.jsx b/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 '@edx/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. https://fontawesome.com/how-to-use/on-the-web/using-with/react */
+  /** Accepts a [Paragon icon](https://paragon-openedx.netlify.app/foundations/icons) */
   icon: PropTypes.shape({
     prefix: PropTypes.string,
     iconName: PropTypes.string,

diff --git a/www/package.json b/www/package.json
@@ -5,7 +5,6 @@
   "dependencies": {
     "@docsearch/react": "^3.1.0",
     "@edx/brand-openedx": "^1.1.0",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "analytics-node": "^6.0.0",