chore: replace font-awesome with paragon icons (#350)

* chore: replace font-awesome with paragon icons * fix: refactor to incorporate reviewer comment
openedx · Aug 9, 2023 · ce95b39 · ce95b39
1 parent 5241cc1
commit ce95b39
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 74 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/catalog-search/package.json b/packages/catalog-search/package.json
@@ -47,8 +47,6 @@
     "@edx/frontend-build": "12.7.0",
     "@edx/frontend-platform": "4.6.0",
     "@edx/paragon": "20.45.0",
-    "@fortawesome/free-solid-svg-icons": "5.8.1",
-    "@fortawesome/react-fontawesome": "0.2.0",
     "@testing-library/jest-dom": "5.11.6",
     "@testing-library/react": "12.1.4",
     "@testing-library/react-hooks": "3.4.2",
@@ -62,8 +60,6 @@
   "peerDependencies": {
     "@edx/frontend-platform": "^4.0.1",
     "@edx/paragon": "^19.15.0 || ^20.0.0",
-    "@fortawesome/free-solid-svg-icons": "^5.8.1",
-    "@fortawesome/react-fontawesome": "^0.1.4",
     "react": "^16.12.0 || ^17.0.0",
     "react-dom": "^16.12.0 || ^17.0.0",
     "react-instantsearch-dom": "^6.8.3",

diff --git a/packages/catalog-search/src/CurrentRefinements.jsx b/packages/catalog-search/src/CurrentRefinements.jsx
@@ -4,9 +4,8 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { Badge, Button } from '@edx/paragon';
+import { CloseSmall } from '@edx/paragon/icons';
 import { connectCurrentRefinements } from 'react-instantsearch-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
 import ClearCurrentRefinements from './ClearCurrentRefinements';
 
@@ -86,15 +85,15 @@ export const CurrentRefinementsBase = ({ items, variant }) => {
           >
             {/* Temporary fix : can be removed when learnerpathway content type is changed to pathways */}
             <span className="mr-2">{item.label === LEARNING_TYPE_PATHWAY ? 'Pathway' : item.label}</span>
-            <FontAwesomeIcon icon={faTimes} />
+            <CloseSmall />
             <span className="sr-only">Remove the filter {item.label}</span>
           </Badge>
         </li>
       ))}
       {!showAllRefinements && activeRefinementsAsFlatArray.length > NUM_CURRENT_REFINEMENTS_TO_DISPLAY && (
         <li className="mr-2">
           <Badge
-            className={classNames('fe__refinement-badge mb-2 py-2 font-weight-light', { 'fe__refinement-badge--default': variant === STYLE_VARIANTS.defualt })}
+            className={classNames('fe__refinement-badge mb-2 py-2 font-weight-light fe_current-icon-justify-center', { 'fe__refinement-badge--default': variant === STYLE_VARIANTS.defualt })}
             variant="light"
             onClick={() => setShowAllRefinements(true)}
           >

diff --git a/packages/catalog-search/src/MobileFilterMenu.jsx b/packages/catalog-search/src/MobileFilterMenu.jsx
@@ -1,10 +1,9 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faTimes, faCaretDown } from '@fortawesome/free-solid-svg-icons';
 import { connectCurrentRefinements } from 'react-instantsearch-dom';
 import { Button } from '@edx/paragon';
+import { ArrowDropDown, Close } from '@edx/paragon/icons';
 
 import ClearCurrentRefinements from './ClearCurrentRefinements';
 
@@ -30,7 +29,7 @@ export const MobileFilterMenuBase = ({ children, className, items }) => {
               </span>
             )}
           </div>
-          <FontAwesomeIcon icon={faCaretDown} />
+          <ArrowDropDown />
         </Button>
       )}
       <div
@@ -58,8 +57,7 @@ export const MobileFilterMenuBase = ({ children, className, items }) => {
                 className="btn-close position-absolute px-2"
                 onClick={() => setIsOpen(false)}
               >
-                <FontAwesomeIcon
-                  icon={faTimes}
+                <Close
                   id="icon-close-mobile-filter-menu"
                 />
                 <span className="sr-only">close filter menu</span>

diff --git a/packages/catalog-search/src/SearchPagination.jsx b/packages/catalog-search/src/SearchPagination.jsx
@@ -1,9 +1,8 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { connectPagination } from 'react-instantsearch-dom';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
-import { Pagination } from '@edx/paragon';
+import { Pagination, Icon } from '@edx/paragon';
+import { ArrowBackIos, ArrowForwardIos } from '@edx/paragon/icons';
 
 import { SearchContext } from './SearchContext';
 import { setRefinementAction, deleteRefinementAction } from './data/actions';
@@ -19,13 +18,13 @@ export const SearchPaginationBase = ({
     () => ({
       left: (
         <>
-          <FontAwesomeIcon icon={faAngleLeft} />
+          <Icon src={ArrowBackIos} />
           <div className="sr-only">Navigate Left</div>
         </>
       ),
       right: (
         <>
-          <FontAwesomeIcon icon={faAngleRight} />
+          <Icon src={ArrowForwardIos} />
           <div className="sr-only">Navigate Right</div>
         </>
       ),

diff --git a/packages/catalog-search/src/styles/_CurrentRefinements.scss b/packages/catalog-search/src/styles/_CurrentRefinements.scss
@@ -11,3 +11,9 @@
 .fe__current-refinement-button--inverse {
   color: $white;
 }
+
+.fe_current-icon-justify-center {
+  height: 40px;
+  display: flex;
+  align-items: center;
+}