CWBI-23331: Update material icons (#120)

USACE · Nov 29, 2024 · d27f204 · d27f204
1 parent 4c07967
commit d27f204
Show file tree

Hide file tree

Showing 50 changed files with 432 additions and 16,612 deletions.
diff --git a/jsconfig.json b/jsconfig.json
@@ -5,9 +5,9 @@
       "@src/*": ["src/*"],
       "@components/*": ["src/app-components/*"],
       "@pages/*": ["src/app-pages/*"],
-      "@styles/*": ["src/style/*"],
+      "@styles/*": ["src/css/*"],
       "@hooks/*": ["src/customHooks/*"],
       "@common/*": ["src/common/*"]
     }
   }
-}
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@corpsmap/corpsmap": "^4.0.36",
     "@eslint/js": "^9.15.0",
     "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

diff --git a/src/App.jsx b/src/App.jsx
@@ -12,7 +12,6 @@ import NavBar from '@components/navigation';
 
 import 'react-toastify/dist/ReactToastify.css';
 import './css/bootstrap/css/bootstrap.water.min.css';
-import './css/mdi/css/materialdesignicons.min.css';
 import './css/index.scss';
 
 export default connect(
@@ -22,14 +21,7 @@ export default connect(
   'selectAuth',
   'selectLoadingState',
   'selectLoadingMessage',
-  ({
-    doModalOpen,
-    doModalClose,
-    route: Route,
-    auth,
-    loadingState,
-    loadingMessage,
-  }) => {
+  ({ doModalOpen, doModalClose, route: Route, auth, loadingState, loadingMessage }) => {
     useEffect(() => {
       if (!auth.token && !sessionStorage.getItem('isLoggedIn')) {
         doModalOpen(LandingModal);

diff --git a/src/app-components/accordion/accordionListItem.jsx b/src/app-components/accordion/accordionListItem.jsx
@@ -1,9 +1,10 @@
 import { useState } from 'react';
-
-import Icon from '../icon';
+import { mdiMenuDown, mdiMenuRight } from '@mdi/js';
 
 import { classArray } from '@src/utils';
 
+import Icon from '@components/icon/icon';
+
 import './accordion.scss';
 
 const AccordionListItem = ({
@@ -18,12 +19,7 @@ const AccordionListItem = ({
 
   const itemClasses = classArray(['accordion-item', className]);
 
-  const contentClasses = classArray([
-    'accordion-collapse',
-    'collapse',
-    isOpen && 'show',
-    contentClassname,
-  ]);
+  const contentClasses = classArray(['accordion-collapse', 'collapse', isOpen && 'show', contentClassname]);
 
   const headingClasses = classArray(['accordion-heading', isOpen && 'is-open']);
 
@@ -35,10 +31,7 @@ const AccordionListItem = ({
   return (
     <div className={itemClasses}>
       <div className={headingClasses} onClick={() => toggleAccordion()}>
-        <Icon
-          className='ml-3 accordion-icon'
-          icon={isOpen ? 'menu-down' : 'menu-right'}
-        />
+        <Icon className='ml-3 accordion-icon' focusable={false} path={isOpen ? mdiMenuDown : mdiMenuRight} />
         <p className='text-primary'>{headingText}</p>
       </div>
       <div className={contentClasses}>

diff --git a/src/app-components/breadcrumb/breadcrumb.jsx b/src/app-components/breadcrumb/breadcrumb.jsx
@@ -1,4 +1,6 @@
-import Icon from '../icon';
+import { mdiHome } from '@mdi/js';
+
+import Icon from '@components/icon/icon';
 
 import { hrefAsString } from '@src/utils';
 
@@ -15,7 +17,7 @@ const Breadcrumb = ({ home = true, pathname }) => {
           {home && (
             <li className='breadcrumb-item'>
               <a href='/'>
-                <Icon icon='home' className='pr-1' />
+                <Icon className='pr-1' path={mdiHome} />
                 Home
               </a>
             </li>

diff --git a/src/app-components/downloadAsCSV.jsx b/src/app-components/downloadAsCSV.jsx
@@ -1,22 +1,11 @@
 import { CSVLink } from 'react-csv';
 
-import Icon from '@components/icon';
 import { classArray } from '@src/utils';
+import { mdiDownload } from '@mdi/js';
+import Icon from '@components/icon/icon';
 
-const DownloadAsCSV = ({
-  content = [],
-  className = '',
-  filePrefix = '',
-  headers,
-}) => {
-  const classes = classArray([
-    'mb-3',
-    'mt-1',
-    'btn',
-    'btn-sm',
-    'btn-outline-info',
-    className,
-  ]);
+const DownloadAsCSV = ({ content = [], className = '', filePrefix = '', headers }) => {
+  const classes = classArray(['mb-3', 'mt-1', 'btn', 'btn-sm', 'btn-outline-info', className]);
 
   return (
     <CSVLink
@@ -25,7 +14,7 @@ const DownloadAsCSV = ({
       data={content}
       headers={headers}
     >
-      <Icon icon='download' className='mr-1' />
+      <Icon className='mr-1' focusable={false} path={mdiDownload} />
       Export as CSV
     </CSVLink>
   );

diff --git a/src/app-components/drag-input/dragInput.jsx b/src/app-components/drag-input/dragInput.jsx
@@ -1,16 +1,14 @@
 import { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
+import { mdiClose } from '@mdi/js';
 
 import Button from '@components/button';
-import Icon from '@components/icon';
 import FileDetails from './fileDetails';
+import Icon from '@components/icon/icon';
 
 import './dragInput.scss';
 
-const DragInput = ({
-  text = "Drag 'n' drop your file here, or click to select a file",
-  onChange = (_file) => {},
-}) => {
+const DragInput = ({ text = "Drag 'n' drop your file here, or click to select a file", onChange = (_file) => {} }) => {
   const [currentFile, setCurrentFile] = useState(null);
   const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
     accept:
@@ -49,7 +47,7 @@ const DragInput = ({
           handleClick={(e) => {
             setCurrentFile(null);
           }}
-          icon={<Icon icon='close' />}
+          icon={<Icon path={mdiClose} focusable={false} />}
         />
       )}
     </div>

diff --git a/src/app-components/filter-select/filter-select.jsx b/src/app-components/filter-select/filter-select.jsx
@@ -1,16 +1,13 @@
-import {
-  useEffect,
-  useState,
-  forwardRef,
-  useImperativeHandle,
-  useRef,
-} from 'react';
+import { useEffect, useState, forwardRef, useImperativeHandle, useRef } from 'react';
 import ReactTooltip from 'react-tooltip';
 import isEqual from 'lodash.isequal';
+import { mdiClose, mdiHelpCircleOutline } from '@mdi/js';
 
 import Dropdown from '../dropdown';
-import Icon from '../icon';
+import Icon from '@components/icon/icon';
+
 import usePrevious from '@hooks/usePrevious';
+
 import { classArray } from '@src/utils';
 
 import './filter-select.scss';
@@ -87,11 +84,7 @@ const FilterSelect = (
       setFilteredList(newSet);
 
       if (onChange) {
-        onChange(
-          newSet,
-          inputVal,
-          inputVal ? (items.find((e) => e.text === inputVal) || {}).value : ''
-        );
+        onChange(newSet, inputVal, inputVal ? (items.find((e) => e.text === inputVal) || {}).value : '');
       }
     }
   }, [inputVal, previousVal, items, onChange, setFilteredList]);
@@ -112,7 +105,7 @@ const FilterSelect = (
       {hasHelperIcon && (
         <>
           <Icon
-            icon='help-circle-outline'
+            path={mdiHelpCircleOutline}
             data-tip
             data-for={helperIconId}
             style={{ fontSize: '15px', marginBottom: '8px' }}
@@ -129,22 +122,16 @@ const FilterSelect = (
             <input
               disabled={isDisabled}
               ref={inputRef}
-              className={
-                showRequired ? 'form-control is-invalid' : 'form-control'
-              }
+              className={showRequired ? 'form-control is-invalid' : 'form-control'}
               placeholder={placeholder}
               onChange={(e) => handleChange(e.target.value)}
               value={!!handleInputChange ? value : inputVal}
               required={isRequired}
             />
             {hasClearButton && (
               <div className='input-group-append'>
-                <span
-                  title='Clear Filter'
-                  className='input-group-text pointer'
-                  onClick={() => setInputVal('')}
-                >
-                  <Icon icon='close' />
+                <span title='Clear Filter' className='input-group-text pointer' onClick={() => setInputVal('')}>
+                  <Icon path={mdiClose} />
                 </span>
               </div>
             )}
@@ -157,10 +144,7 @@ const FilterSelect = (
             const display = getDisplay(elem);
 
             return (
-              <Dropdown.Item
-                key={display}
-                onClick={() => handleChange(display)}
-              >
+              <Dropdown.Item key={display} onClick={() => handleChange(display)}>
                 {display}
               </Dropdown.Item>
             );

diff --git a/src/app-components/footer/index.jsx b/src/app-components/footer/index.jsx
@@ -1,7 +1,7 @@
-import React from 'react';
+import { mdiCopyright } from '@mdi/js';
 
 import CuiBanner from '../cui-banner';
-import Icon from '../icon';
+import Icon from '@components/icon/icon';
 
 import './footer.scss';
 
@@ -12,7 +12,7 @@ const Footer = () => (
         <div className='text-center'>
           <p>
             <strong>
-              <Icon icon='copyright' />
+              <Icon path={mdiCopyright} />
             </strong>{' '}
             U.S. Army Corps of Engineers {new Date().getFullYear()}
           </p>

diff --git a/src/app-components/icon/icon.jsx b/src/app-components/icon/icon.jsx
@@ -1,9 +1,14 @@
-import { classArray } from '@src/utils';
+import MaterialIcon from '@mdi/react';
 
-const Icon = ({ icon = '', className = '', ...customProps }) => {
-  const classnames = classArray(['mdi', `mdi-${icon}`, className]);
-
-  return <i className={classnames} {...customProps} />;
-};
+const Icon = ({ focusable = true, size = '16px', ...rest }) => (
+  <MaterialIcon
+    aria-hidden={focusable ? 'false' : 'true'}
+    focusable={focusable ? 'true' : 'false'}
+    tabIndex={focusable ? '0' : '-1'}
+    role={focusable ? 'button' : 'img'}
+    size={size}
+    {...rest}
+  />
+);
 
 export default Icon;
diff --git a/src/app-components/icon/index.jsx b/src/app-components/icon/index.jsx
diff --git a/src/app-components/multi-select/helper.jsx b/src/app-components/multi-select/helper.jsx
@@ -1,5 +1,6 @@
+import { mdiCheckboxBlankOutline, mdiCheckboxOutline } from '@mdi/js';
 import Dropdown from '../dropdown';
-import Icon from '../icon';
+import Icon from '../icon/icon';
 
 export const reduceSelections = (selection, currentSelections) => {
   const final = [...currentSelections];
@@ -11,14 +12,12 @@ export const reduceSelections = (selection, currentSelections) => {
 };
 
 export const generateOption = (option, handleClick, optionIsSelected, i) => {
-  const icon = optionIsSelected
-    ? 'check-box-outline'
-    : 'checkbox-blank-outline';
+  const icon = optionIsSelected ? mdiCheckboxOutline : mdiCheckboxBlankOutline;
 
   return (
     <Dropdown.Item key={i} onClick={(_e) => handleClick()}>
       <span className={optionIsSelected ? 'text-info' : 'text-dark'}>
-        <Icon icon={icon} />
+        <Icon path={icon} />
         &nbsp;
         {option.text || option.value}
       </span>