Ww datap 874 svg icons (#471)

* Got svgr working correctly with iconMap * Refactors iconMap to use CRA's ReactComponent to import svg files as React components; adds necessary svg files to src/icons/ * Updated snapshots * Fixes remaining tests, changes iconMap and test to use console error * Built for prod --------- Co-authored-by: Bill Whorton <>
cfpb · Oct 27, 2023 · 70ea0ed · 70ea0ed
1 parent bf21f47
commit 70ea0ed
Show file tree

Hide file tree

Showing 47 changed files with 262 additions and 639 deletions.
diff --git a/craco.config.js b/craco.config.js
@@ -4,6 +4,8 @@ const {
   addAfterLoader,
   addAfterLoaders,
   addBeforeLoader,
+  addAfterAssetModule,
+  assetModuleByName,
   getLoader,
   getLoaders,
   removeLoader,
@@ -47,8 +49,10 @@ module.exports = {
         strReplaceLoader
       );
 
+
       //
       return webpackConfig;
+
     },
   },
   plugins: [

diff --git a/dist/ccdb5.css b/dist/ccdb5.css
diff --git a/dist/ccdb5.css.map b/dist/ccdb5.css.map
diff --git a/dist/ccdb5.js b/dist/ccdb5.js
diff --git a/dist/ccdb5.js.LICENSE.txt b/dist/ccdb5.js.LICENSE.txt
@@ -103,7 +103,7 @@ object-assign
  */
 
 /**
- * @remix-run/router v1.9.0
+ * @remix-run/router v1.8.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -114,7 +114,7 @@ object-assign
  */
 
 /**
- * React Router DOM v6.16.0
+ * React Router DOM v6.15.0
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -125,7 +125,7 @@ object-assign
  */
 
 /**
- * React Router v6.16.0
+ * React Router v6.15.0
  *
  * Copyright (c) Remix Software Inc.
  *

diff --git a/dist/ccdb5.js.map b/dist/ccdb5.js.map
diff --git a/package.json b/package.json
@@ -46,13 +46,13 @@
     "@cfpb/cfpb-expandables": "^0.17.12",
     "@cfpb/cfpb-forms": "0.27.0",
     "@cfpb/cfpb-grid": "0.27.0",
-    "@cfpb/cfpb-icons": "0.27.0",
+    "@cfpb/cfpb-icons": "^0.31.0",
     "@cfpb/cfpb-layout": "0.27.1",
     "@cfpb/cfpb-notifications": "0.27.0",
     "@cfpb/cfpb-pagination": "0.27.0",
     "@cfpb/cfpb-tables": "0.27.0",
     "@cfpb/cfpb-typography": "0.27.0",
-    "@craco/craco": "^6.4.3",
+    "@craco/craco": "^7.1.0",
     "@reduxjs/toolkit": "^1.8.5",
     "@testing-library/cypress": "^8.0.3",
     "@testing-library/jest-dom": "^5.16.5",

diff --git a/src/components/ActionBar/ActionBar.spec.js b/src/components/ActionBar/ActionBar.spec.js
@@ -53,12 +53,12 @@ describe('ActionBar', () => {
     expect(
       screen.getByText('Showing 10 matches out of 100 total complaints')
     ).toBeInTheDocument();
-    const buttonExport = screen.getByRole('button', { name: 'Export data' });
+    const buttonExport = screen.getByRole('button', { name: /Export data/ });
     expect(buttonExport).toBeInTheDocument();
     fireEvent.click(buttonExport);
     expect(dataExportSpy).toHaveBeenCalledTimes(1);
 
-    const buttonPrint = screen.getByRole('button', { name: 'Print' });
+    const buttonPrint = screen.getByRole('button', { name: /Print/ });
     expect(buttonPrint).toBeInTheDocument();
     fireEvent.click(buttonPrint);
     expect(gaSpy).toHaveBeenCalledWith('Print', 'tab:Map');

diff --git a/src/components/Dialogs/DataExport/DataExport.spec.js b/src/components/Dialogs/DataExport/DataExport.spec.js
@@ -54,19 +54,19 @@ describe('DataExport', () => {
     ).toBeInTheDocument();
 
     expect(
-      screen.getByRole('button', { name: 'Start export' })
+      screen.getByRole('button', { name: /Start export/ })
     ).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
-    const buttonCopy = screen.getByRole('button', { name: 'Copy' });
+    expect(screen.getByRole('button', { name: /Cancel/ })).toBeInTheDocument();
+    const buttonCopy = screen.getByRole('button', { name: /Copy/ });
     expect(buttonCopy).toBeInTheDocument();
     expect(buttonCopy).toHaveClass('a-btn__secondary');
     fireEvent.click(buttonCopy);
     await waitFor(() => {
       expect(buttonCopy).toHaveClass('export-url-copied');
     });
 
-    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(screen.getByRole('button', { name: /Close/ })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: /Close/ }));
     expect(hideModalSpy).toHaveBeenCalled();
   });
 
@@ -76,8 +76,8 @@ describe('DataExport', () => {
       .mockImplementation(() => jest.fn());
     renderComponent({}, {});
     expect(screen.getByText('Export complaints')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(screen.getByRole('button', { name: /Cancel/ })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: /Cancel/ }));
     expect(hideModalSpy).toHaveBeenCalled();
   });
 
@@ -91,12 +91,12 @@ describe('DataExport', () => {
     renderComponent({}, {});
     expect(screen.getByText('Export complaints')).toBeInTheDocument();
     expect(
-      screen.getByRole('button', { name: 'Start export' })
+      screen.getByRole('button', { name: /Start export/ })
     ).toBeInTheDocument();
     expect(screen.getByRole('textbox')).toHaveValue(
       'https://files.consumerfinance.gov/ccdb/complaints.csv.zip'
     );
-    fireEvent.click(screen.getByRole('button', { name: 'Start export' }));
+    fireEvent.click(screen.getByRole('button', { name: /Start export/ }));
     expect(sendAnalyticsSpy).toHaveBeenCalledWith(
       'Export All Data',
       'Trends:csv'
@@ -114,7 +114,7 @@ describe('DataExport', () => {
     renderComponent({}, {});
     expect(screen.getByText('Export complaints')).toBeInTheDocument();
     expect(
-      screen.getByRole('button', { name: 'Start export' })
+      screen.getByRole('button', { name: /Start export/ })
     ).toBeInTheDocument();
     expect(screen.getByRole('textbox')).toHaveValue(
       'https://files.consumerfinance.gov/ccdb/complaints.csv.zip'
@@ -137,7 +137,7 @@ describe('DataExport', () => {
       );
     });
 
-    fireEvent.click(screen.getByRole('button', { name: 'Start export' }));
+    fireEvent.click(screen.getByRole('button', { name: /Start export/ }));
     expect(sendAnalyticsSpy).toHaveBeenCalledWith(
       'Export All Data',
       'Trends:json'
@@ -181,9 +181,9 @@ describe('DataExport', () => {
     );
 
     expect(
-      screen.getByRole('button', { name: 'Start export' })
+      screen.getByRole('button', { name: /Start export/ })
     ).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: 'Start export' }));
+    fireEvent.click(screen.getByRole('button', { name: /Start export/ }));
 
     expect(sendAnalyticsSpy).toHaveBeenCalledWith(
       'Export Some Data',

diff --git a/src/components/Dialogs/DataExport/ExportConfirmation.spec.js b/src/components/Dialogs/DataExport/ExportConfirmation.spec.js
@@ -18,8 +18,8 @@ describe('ExportConfirmation', () => {
       .mockImplementation(() => jest.fn());
     renderComponent();
     expect(screen.getByText('Export complaints')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    expect(screen.getByRole('button', { name: /Close/ })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: /Close/ }));
     expect(hideModalSpy).toHaveBeenCalled();
   });
 });
diff --git a/src/components/Dialogs/RootModal.spec.js b/src/components/Dialogs/RootModal.spec.js
@@ -35,7 +35,7 @@ describe('RootModal', () => {
     });
     Modal.setAppElement(container);
     expect(screen.getByText('Export complaints')).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    fireEvent.click(screen.getByRole('button', { name: /Close/ }));
     expect(closeSpy).toHaveBeenCalled();
   });
 
@@ -74,7 +74,7 @@ describe('RootModal', () => {
     expect(
       screen.getByText('Things you should know before you use this database')
     ).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+    fireEvent.click(screen.getByRole('button', { name: /Close/ }));
     expect(closeSpy).toHaveBeenCalled();
   });
 });
diff --git a/src/components/Filters/__tests__/__snapshots__/AggregationBranch.spec.js.snap b/src/components/Filters/__tests__/__snapshots__/AggregationBranch.spec.js.snap
@@ -32,14 +32,8 @@ exports[`component::AggregationBranch snapshots renders with all checked 1`] = `
       <span>
         foo
       </span>
-      <svg
-        className="cf-icon-svg"
-        viewBox="0 0 988.7 1200"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M923.6 967.6c-17.3 0-33.8-6.8-46-19L494.1 565 110.5 948.5c-25.6 25.1-66.8 24.8-91.9-.8-24.8-25.3-24.8-65.8 0-91.1l429.5-429.5c25.4-25.4 66.5-25.4 91.9 0l429.6 429.5c25.4 25.4 25.4 66.5.1 91.9-12.3 12.3-28.8 19.1-46.1 19.1z"
-        />
+      <svg>
+        up.svg
       </svg>
     </button>
     <span
@@ -156,14 +150,8 @@ exports[`component::AggregationBranch snapshots renders with indeterminate 1`] =
       <span>
         foo
       </span>
-      <svg
-        className="cf-icon-svg"
-        viewBox="0 0 988.7 1200"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M923.6 967.6c-17.3 0-33.8-6.8-46-19L494.1 565 110.5 948.5c-25.6 25.1-66.8 24.8-91.9-.8-24.8-25.3-24.8-65.8 0-91.1l429.5-429.5c25.4-25.4 66.5-25.4 91.9 0l429.6 429.5c25.4 25.4 25.4 66.5.1 91.9-12.3 12.3-28.8 19.1-46.1 19.1z"
-        />
+      <svg>
+        up.svg
       </svg>
     </button>
     <span
@@ -280,14 +268,8 @@ exports[`component::AggregationBranch snapshots renders with none checked 1`] =
       <span>
         foo
       </span>
-      <svg
-        className="cf-icon-svg"
-        viewBox="0 0 988.2 1200"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M494.1 967.2c-17.3 0-33.8-6.8-46-19L18.6 518.6c-25.1-25.6-24.8-66.8.8-91.9 25.3-24.8 65.8-24.8 91.1 0l383.6 383.6 383.6-383.6c25.6-25.1 66.8-24.8 91.9.8 24.8 25.3 24.8 65.8 0 91.1L540.1 948.1c-12.2 12.2-28.7 19.1-46 19.1z"
-        />
+      <svg>
+        down.svg
       </svg>
     </button>
     <span

diff --git a/src/components/Filters/__tests__/__snapshots__/CollapsibleFilter.spec.js.snap b/src/components/Filters/__tests__/__snapshots__/CollapsibleFilter.spec.js.snap
@@ -25,14 +25,8 @@ exports[`component:CollapsibleFilter initial state renders without crashing 1`]
         >
           Hide
         </span>
-        <svg
-          className="cf-icon-svg"
-          viewBox="0 0 1000 1200"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"
-          />
+        <svg>
+          minus-round.svg
         </svg>
       </span>
     </span>

diff --git a/src/components/Filters/__tests__/__snapshots__/CompanyReceivedFilter.spec.js.snap b/src/components/Filters/__tests__/__snapshots__/CompanyReceivedFilter.spec.js.snap
@@ -25,14 +25,8 @@ exports[`component::CompanyReceivedFilter snapshot shows errors 1`] = `
         >
           Hide
         </span>
-        <svg
-          className="cf-icon-svg"
-          viewBox="0 0 1000 1200"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"
-          />
+        <svg>
+          minus-round.svg
         </svg>
       </span>
     </span>
@@ -71,14 +65,8 @@ exports[`component::CompanyReceivedFilter snapshot shows errors 1`] = `
               className="a-btn a-btn__link"
               onClick={[Function]}
             >
-              <svg
-                className="cf-icon-svg"
-                viewBox="0 0 718.9 1200"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M451.4 613.7l248.1-248.1c25.6-25.1 26-66.3.8-91.9s-66.3-26-91.9-.8l-.8.8-248.1 248.1-248.1-248.1c-25.4-25.4-66.5-25.4-91.9 0s-25.4 66.5 0 91.9l248.1 248.1L19.5 861.8c-25.6 25.1-26 66.3-.8 91.9s66.3 26 91.9.8l.8-.8 248.1-248.1 248.1 248.1c25.4 25.4 66.5 25.4 91.9 0s25.4-66.5 0-91.9L451.4 613.7z"
-                />
+              <svg>
+                error.svg
               </svg>
               <span
                 className="u-visually-hidden"
@@ -114,14 +102,8 @@ exports[`component::CompanyReceivedFilter snapshot shows errors 1`] = `
               className="a-btn a-btn__link"
               onClick={[Function]}
             >
-              <svg
-                className="cf-icon-svg"
-                viewBox="0 0 718.9 1200"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M451.4 613.7l248.1-248.1c25.6-25.1 26-66.3.8-91.9s-66.3-26-91.9-.8l-.8.8-248.1 248.1-248.1-248.1c-25.4-25.4-66.5-25.4-91.9 0s-25.4 66.5 0 91.9l248.1 248.1L19.5 861.8c-25.6 25.1-26 66.3-.8 91.9s66.3 26 91.9.8l.8-.8 248.1-248.1 248.1 248.1c25.4 25.4 66.5 25.4 91.9 0s25.4-66.5 0-91.9L451.4 613.7z"
-                />
+              <svg>
+                error.svg
               </svg>
               <span
                 className="u-visually-hidden"
@@ -139,12 +121,8 @@ exports[`component::CompanyReceivedFilter snapshot shows errors 1`] = `
         >
           <svg
             className="cf-icon-svg cf-icon-delete-round"
-            viewBox="0 0 1000 1200"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
-              d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm261.8 692.2c19.4 19.6 19.3 51.3-.3 70.7-19.5 19.3-50.9 19.3-70.4 0L499.6 676.6 308 868.1c-19.6 19.4-51.3 19.3-70.7-.3-19.3-19.5-19.3-50.9 0-70.4l191.6-191.5-191.6-191.6c-19.3-19.8-18.9-51.4.9-70.7 19.4-18.9 50.4-18.9 69.8 0l191.6 191.5 191.5-191.5c19.6-19.4 51.3-19.3 70.7.3 19.3 19.5 19.3 50.9 0 70.4L570.3 605.9l191.5 191.5z"
-            />
+            error-round.svg
           </svg>
         </span>
       </div>
@@ -178,14 +156,8 @@ exports[`component::CompanyReceivedFilter snapshot supports no dates in the Redu
         >
           Hide
         </span>
-        <svg
-          className="cf-icon-svg"
-          viewBox="0 0 1000 1200"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm263.1 550.7H236c-27.6 0-50-22.4-50-50s22.4-50 50-50h527.1c27.6 0 50 22.4 50 50s-22.4 50-50 50z"
-          />
+        <svg>
+          minus-round.svg
         </svg>
       </span>
     </span>
@@ -224,14 +196,8 @@ exports[`component::CompanyReceivedFilter snapshot supports no dates in the Redu
               className="a-btn a-btn__link"
               onClick={[Function]}
             >
-              <svg
-                className="cf-icon-svg"
-                viewBox="0 0 718.9 1200"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M451.4 613.7l248.1-248.1c25.6-25.1 26-66.3.8-91.9s-66.3-26-91.9-.8l-.8.8-248.1 248.1-248.1-248.1c-25.4-25.4-66.5-25.4-91.9 0s-25.4 66.5 0 91.9l248.1 248.1L19.5 861.8c-25.6 25.1-26 66.3-.8 91.9s66.3 26 91.9.8l.8-.8 248.1-248.1 248.1 248.1c25.4 25.4 66.5 25.4 91.9 0s25.4-66.5 0-91.9L451.4 613.7z"
-                />
+              <svg>
+                error.svg
               </svg>
               <span
                 className="u-visually-hidden"
@@ -267,14 +233,8 @@ exports[`component::CompanyReceivedFilter snapshot supports no dates in the Redu
               className="a-btn a-btn__link"
               onClick={[Function]}
             >
-              <svg
-                className="cf-icon-svg"
-                viewBox="0 0 718.9 1200"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M451.4 613.7l248.1-248.1c25.6-25.1 26-66.3.8-91.9s-66.3-26-91.9-.8l-.8.8-248.1 248.1-248.1-248.1c-25.4-25.4-66.5-25.4-91.9 0s-25.4 66.5 0 91.9l248.1 248.1L19.5 861.8c-25.6 25.1-26 66.3-.8 91.9s66.3 26 91.9.8l.8-.8 248.1-248.1 248.1 248.1c25.4 25.4 66.5 25.4 91.9 0s25.4-66.5 0-91.9L451.4 613.7z"
-                />
+              <svg>
+                error.svg
               </svg>
               <span
                 className="u-visually-hidden"