updated craco config so less file builds.

fixing search bar text area fixing z-index of spyglass icon getting typeahead to work correctly with styling. move button around, fix date filter async typeahead text fix update some stuff update filter and snapshot hide cancel button if no value update more deps, fixing cypress tests fix warnings and nags fix error styles, remove clear button, fixing styles in mobile view.
cfpb · Jun 6, 2024 · 3099ac7 · 3099ac7
1 parent 61388d2
commit 3099ac7
Show file tree

Hide file tree

Showing 19 changed files with 443 additions and 576 deletions.
diff --git a/craco.config.js b/craco.config.js
@@ -94,6 +94,9 @@ module.exports = {
             },
             javascriptEnabled: true,
             math: 'always',
+            paths: [
+              path.resolve(__dirname, 'node_modules/@cfpb/cfpb-core/src'),
+            ],
           },
         },
       },

diff --git a/cypress/e2e/common/filters.cy.js b/cypress/e2e/common/filters.cy.js
@@ -39,12 +39,16 @@ describe('Filter Panel', () => {
       cy.get('#date_received-from').should('be.visible');
 
       cy.log('collapse it');
-      cy.get('.date-filter button.a-btn--link:first').click({ force: true });
+      cy.get('.date-filter > button.o-expandable__header:first').click({
+        force: true,
+      });
 
       cy.get('#date-received-agg #start_date').should('not.exist');
 
       cy.log('open it');
-      cy.get('.date-filter button.a-btn--link:first').click({ force: true });
+      cy.get('.date-filter > button.o-expandable__header:first').click({
+        force: true,
+      });
       cy.log('apply dates');
 
       cy.get('#date_received-from').clear();

diff --git a/package.json b/package.json
@@ -32,25 +32,25 @@
   },
   "browserslist": "> 0.2% in @cfpb/browserslist-config stats",
   "devDependencies": {
-    "@babel/cli": "^7.24.5",
-    "@babel/core": "^7.24.5",
-    "@babel/eslint-parser": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/runtime": "^7.24.5",
+    "@babel/cli": "^7.24.7",
+    "@babel/core": "^7.24.7",
+    "@babel/eslint-parser": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/runtime": "^7.24.7",
     "@cfpb/browserslist-config": "0.0.2",
     "@cfpb/cfpb-atomic-component": "1.2.0",
-    "@cfpb/cfpb-buttons": "1.2.0",
+    "@cfpb/cfpb-buttons": "1.3.0",
     "@cfpb/cfpb-core": "1.2.0",
-    "@cfpb/cfpb-design-system": "^1.2.0",
+    "@cfpb/cfpb-design-system": "^1.3.2",
     "@cfpb/cfpb-expandables": "^1.2.0",
-    "@cfpb/cfpb-forms": "1.2.0",
+    "@cfpb/cfpb-forms": "1.3.0",
     "@cfpb/cfpb-grid": "1.2.0",
     "@cfpb/cfpb-icons": "^1.2.0",
-    "@cfpb/cfpb-layout": "1.2.0",
-    "@cfpb/cfpb-notifications": "1.2.0",
-    "@cfpb/cfpb-pagination": "1.2.0",
+    "@cfpb/cfpb-layout": "1.3.0",
+    "@cfpb/cfpb-notifications": "1.3.0",
+    "@cfpb/cfpb-pagination": "1.3.0",
     "@cfpb/cfpb-tables": "1.2.0",
-    "@cfpb/cfpb-typography": "1.2.0",
+    "@cfpb/cfpb-typography": "1.3.2",
     "@craco/craco": "^7.1.0",
     "@reduxjs/toolkit": "^2.2.5",
     "@testing-library/cypress": "^10.0.1",
@@ -61,7 +61,7 @@
     "coveralls": "^3.0.9",
     "craco-esbuild": "^0.6.1",
     "craco-less": "^3.0.1",
-    "cypress": "^13.9.0",
+    "cypress": "^13.11.0",
     "d3": "^7.9.0",
     "d3-selection": "^3.0.0",
     "dayjs": "^1.11.10",
@@ -91,7 +91,7 @@
     "postcss-less": "^6.0.0",
     "postcss-preset-env": "^9.5.13",
     "postcss-safe-parser": "^7.0.0",
-    "prettier": "^3.2.4",
+    "prettier": "^3.3.1",
     "prop-types": "^15.5.10",
     "query-string": "^9.0.0",
     "react": "^18.2.0",

diff --git a/src/components/Filters/CompanyReceivedFilter.js b/src/components/Filters/CompanyReceivedFilter.js
@@ -49,15 +49,6 @@ export const CompanyReceivedFilter = () => {
     setThroughDate(validThroughDate);
   }, [dateThrough]);
 
-  const handleClear = (period) => {
-    if (period === 'from') {
-      dispatch(changeDates(fieldName, '', throughDate));
-    }
-    if (period === 'through') {
-      dispatch(changeDates(fieldName, fromDate, ''));
-    }
-  };
-
   const handleKeyDownFromDate = (event) => {
     if (event.key === 'Enter') {
       fromRef.current.blur();
@@ -115,7 +106,7 @@ export const CompanyReceivedFilter = () => {
       dayjs(fromDate).isBefore(minDate) ||
       dayjs(fromDate).isAfter(throughDate)
     ) {
-      style.push('a-text-input__error');
+      style.push('a-text-input--error');
     }
     return style.join(' ');
   }, [fromDate, throughDate]);
@@ -126,7 +117,7 @@ export const CompanyReceivedFilter = () => {
       dayjs(throughDate).isAfter(maxDate) ||
       dayjs(throughDate).isBefore(fromDate)
     ) {
-      style.push('a-text-input__error');
+      style.push('a-text-input--error');
     }
     return style.join(' ');
   }, [fromDate, throughDate]);
@@ -142,29 +133,22 @@ export const CompanyReceivedFilter = () => {
             >
               From
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-from`}
-                className={inputFromClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setFromDate(evt.target.value)}
-                onKeyDown={handleKeyDownFromDate}
-                min={minDate}
-                max={maxDate}
-                ref={fromRef}
-                placeholder={DATE_VALIDATION_FORMAT}
-                type="date"
-                value={fromDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('from')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear company received from date filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-from`}
+                  className={inputFromClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => setFromDate(evt.target.value)}
+                  onKeyDown={handleKeyDownFromDate}
+                  min={minDate}
+                  max={maxDate}
+                  ref={fromRef}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  type="date"
+                  value={fromDate}
+                />
+              </div>
             </div>
           </li>
           <li>
@@ -174,43 +158,38 @@ export const CompanyReceivedFilter = () => {
             >
               Through
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-through`}
-                className={inputThroughClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setThroughDate(evt.target.value)}
-                onKeyDown={handleKeyDownThroughDate}
-                min={minDate}
-                max={maxDate}
-                placeholder={DATE_VALIDATION_FORMAT}
-                ref={throughRef}
-                type="date"
-                value={throughDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('through')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear company received through date filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-through`}
+                  className={inputThroughClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => setThroughDate(evt.target.value)}
+                  onKeyDown={handleKeyDownThroughDate}
+                  min={minDate}
+                  max={maxDate}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  ref={throughRef}
+                  type="date"
+                  value={throughDate}
+                />
+              </div>
             </div>
           </li>
         </ul>
 
-        {errors.length
-          ? errors.map((message, key) => (
+        {errors.length ? (
+          <div className="a-form-alert a-form-alert__error" role="alert">
+            {errors.map((message, key) => (
               <div key={key}>
                 {message}
                 <span aria-hidden="true">
                   {getIcon('delete-round', 'cf-icon-delete-round')}
                 </span>
               </div>
-            ))
-          : null}
+            ))}
+          </div>
+        ) : null}
       </div>
     </CollapsibleFilter>
   );

diff --git a/src/components/Filters/DateFilter.js b/src/components/Filters/DateFilter.js
@@ -49,24 +49,15 @@ export const DateFilter = () => {
   useEffect(() => {
     // put it in YYYY-MM-DD format
     // validate to make sure it's not invalid
-    const validFromDate = dateFrom ? formatDate(dateFrom) : '';
+    const validFromDate = dateFrom ? formatDate(dateFrom) : minDate;
     setFromDate(validFromDate);
   }, [dateFrom]);
 
   useEffect(() => {
-    const validThroughDate = dateThrough ? formatDate(dateThrough) : '';
+    const validThroughDate = dateThrough ? formatDate(dateThrough) : maxDate;
     setThroughDate(validThroughDate);
   }, [dateThrough]);
 
-  const handleClear = (period) => {
-    if (period === 'from') {
-      dispatch(changeDates(fieldName, minDate, throughDate));
-    }
-    if (period === 'through') {
-      dispatch(changeDates(fieldName, fromDate, maxDate));
-    }
-  };
-
   const handleKeyDownFromDate = (event) => {
     if (event.key === 'Enter') {
       fromRef.current.blur();
@@ -118,7 +109,7 @@ export const DateFilter = () => {
       dayjs(fromDate).isAfter(throughDate) ||
       dayjs(fromDate).isSame(throughDate)
     ) {
-      style.push('a-text-input__error');
+      style.push('a-text-input--error');
     }
     return style.join(' ');
   }, [fromDate, throughDate]);
@@ -130,7 +121,7 @@ export const DateFilter = () => {
       dayjs(throughDate).isBefore(fromDate) ||
       dayjs(throughDate).isSame(fromDate)
     ) {
-      style.push('a-text-input__error');
+      style.push('a-text-input--error');
     }
     return style.join(' ');
   }, [fromDate, throughDate]);
@@ -159,29 +150,25 @@ export const DateFilter = () => {
             >
               From
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-from`}
-                className={inputFromClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setFromDate(evt.target.value)}
-                onKeyDown={handleKeyDownFromDate}
-                min={minDate}
-                max={maxDate}
-                ref={fromRef}
-                placeholder={DATE_VALIDATION_FORMAT}
-                type="date"
-                value={fromDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('from')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear date received from filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-from`}
+                  className={inputFromClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => {
+                    const value = evt.target.value || minDate;
+                    setFromDate(value);
+                  }}
+                  onKeyDown={handleKeyDownFromDate}
+                  min={minDate}
+                  max={maxDate}
+                  ref={fromRef}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  type="date"
+                  value={fromDate}
+                />
+              </div>
             </div>
           </li>
           <li>
@@ -191,29 +178,25 @@ export const DateFilter = () => {
             >
               Through
             </label>
-            <div className="m-btn-inside-input">
-              <input
-                id={`${fieldName}-through`}
-                className={inputThroughClassName}
-                onBlur={handleDateChange}
-                onChange={(evt) => setThroughDate(evt.target.value)}
-                onKeyDown={handleKeyDownThroughDate}
-                min={minDate}
-                max={maxDate}
-                placeholder={DATE_VALIDATION_FORMAT}
-                ref={throughRef}
-                type="date"
-                value={throughDate}
-              />
-              <button
-                className="a-btn a-btn--link"
-                onClick={() => handleClear('through')}
-              >
-                {getIcon('delete')}
-                <span className="u-visually-hidden">
-                  Clear date received through filter
-                </span>
-              </button>
+            <div className="o-search-input">
+              <div className="o-search-input__input">
+                <input
+                  id={`${fieldName}-through`}
+                  className={inputThroughClassName}
+                  onBlur={handleDateChange}
+                  onChange={(evt) => {
+                    const value = evt.target.value || minDate;
+                    setThroughDate(value);
+                  }}
+                  onKeyDown={handleKeyDownThroughDate}
+                  min={minDate}
+                  max={maxDate}
+                  placeholder={DATE_VALIDATION_FORMAT}
+                  ref={throughRef}
+                  type="date"
+                  value={throughDate}
+                />
+              </div>
             </div>
           </li>
         </ul>

diff --git a/src/components/Filters/DateFilter.less b/src/components/Filters/DateFilter.less
@@ -15,14 +15,8 @@
       &:first-of-type {
         margin-right: @gutter-normal;
       }
-
-      .m-btn-inside-input {
-        .a-text-input {
-          padding-right: @grid_gutter-width;
-        }
-        .a-btn {
-          color: var(--gray);
-        }
+      input {
+        width: 100%;
       }
     }
   }