Update dependencies: design-system@0.39.0, babel/core@7.24.0, cypress@13.6.6, eslint@8.57.0, eslint-plugin-jsdoc@48.2.1, mini-css-extract-plugin@2.8.1, postcss-preset-env@9.5.0

package.json

@@ -38,23 +38,23 @@
   ],
   "devDependencies": {
     "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.23.9",
+    "@babel/core": "^7.24.0",
     "@babel/eslint-parser": "^7.23.10",
     "@babel/preset-react": "^7.23.3",
-    "@babel/runtime": "^7.23.9",
-    "@cfpb/cfpb-atomic-component": "0.37.0",
-    "@cfpb/cfpb-buttons": "0.37.0",
-    "@cfpb/cfpb-core": "0.37.0",
-    "@cfpb/cfpb-design-system": "^0.37.2",
-    "@cfpb/cfpb-expandables": "^0.37.0",
-    "@cfpb/cfpb-forms": "0.37.1",
-    "@cfpb/cfpb-grid": "0.37.0",
-    "@cfpb/cfpb-icons": "^0.37.0",
-    "@cfpb/cfpb-layout": "0.37.0",
-    "@cfpb/cfpb-notifications": "0.37.0",
-    "@cfpb/cfpb-pagination": "0.37.0",
-    "@cfpb/cfpb-tables": "0.37.0",
-    "@cfpb/cfpb-typography": "0.37.2",
+    "@babel/runtime": "^7.24.0",
+    "@cfpb/cfpb-atomic-component": "0.39.0",
+    "@cfpb/cfpb-buttons": "0.39.0",
+    "@cfpb/cfpb-core": "0.39.0",
+    "@cfpb/cfpb-design-system": "^0.39.0",
+    "@cfpb/cfpb-expandables": "^0.39.0",
+    "@cfpb/cfpb-forms": "0.39.0",
+    "@cfpb/cfpb-grid": "0.39.0",
+    "@cfpb/cfpb-icons": "^0.39.0",
+    "@cfpb/cfpb-layout": "0.39.0",
+    "@cfpb/cfpb-notifications": "0.39.0",
+    "@cfpb/cfpb-pagination": "0.39.0",
+    "@cfpb/cfpb-tables": "0.39.0",
+    "@cfpb/cfpb-typography": "0.39.0",
     "@craco/craco": "^7.1.0",
     "@reduxjs/toolkit": "^2.1.0",
     "@testing-library/cypress": "^10.0.1",
@@ -65,17 +65,17 @@
     "coveralls": "^3.0.9",
     "craco-esbuild": "^0.5.2",
     "craco-less": "^3.0.1",
-    "cypress": "^13.6.5",
+    "cypress": "^13.6.6",
     "d3": "^5.12.0",
     "d3-selection": "^1.4.0",
     "dayjs": "^1.11.10",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.7",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-cypress": "^2.15.1",
-    "eslint-plugin-jsdoc": "^48.0.6",
+    "eslint-plugin-jsdoc": "^48.2.1",
     "eslint-plugin-react-redux": "^4.1.0",
     "highcharts": "9.2.2",
     "history": "^5.3.0",
@@ -91,11 +91,11 @@
     "less-plugin-clean-css": "^1.5.1",
     "lint-staged": "^15.2.2",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.8.0",
+    "mini-css-extract-plugin": "^2.8.1",
     "mockdate": "^3.0.5",
     "postcss": "^8.4.35",
     "postcss-less": "^6.0.0",
-    "postcss-preset-env": "^9.4.0",
+    "postcss-preset-env": "^9.5.0",
     "postcss-safe-parser": "^7.0.0",
     "prettier": "^3.2.4",
     "prop-types": "^15.5.10",

src/components/Filters/DateFilter.js

@@ -219,12 +219,12 @@ export const DateFilter = () => {
         </ul>
         <DateRanges />
         {errors ? (
-          <>
-            {errors + ' '}
+          <div className="a-form-alert a-form-alert__error" role="alert">
             <span aria-hidden="true">
               {getIcon('delete-round', 'cf-icon-delete-round')}
             </span>
-          </>
+            <span className="a-form-alert_text">{errors + ' '}</span>
+          </div>
         ) : null}
       </div>
     </CollapsibleFilter>

src/components/Filters/FilterPanel.less

@@ -12,10 +12,16 @@
     border-right: none;
   }
 
-  hr {
+  .a-form-alert {
     margin-top: @gutter-normal;
-    margin-bottom: @gutter-normal;
+  }
 
+  hr {
+    margin: 0;
     color: @gray-40;
   }
+
+  .single-checkbox {
+    margin: @gutter-normal;
+  }
 }

src/components/Filters/__tests__/__snapshots__/DateFilter.spec.js.snap

@@ -333,16 +333,25 @@ exports[`component::DateFilter snapshot shows errors 1`] = `
           All
         </button>
       </section>
-      'From' date must be less than 'through' date 
-      <span
-        aria-hidden="true"
+      <div
+        className="a-form-alert a-form-alert__error"
+        role="alert"
       >
-        <svg
-          className="cf-icon-svg cf-icon-delete-round"
+        <span
+          aria-hidden="true"
         >
-          error-round.svg
-        </svg>
-      </span>
+          <svg
+            className="cf-icon-svg cf-icon-delete-round"
+          >
+            error-round.svg
+          </svg>
+        </span>
+        <span
+          className="a-form-alert_text"
+        >
+          'From' date must be less than 'through' date 
+        </span>
+      </div>
     </div>
   </div>
 </section>

src/components/__tests__/FilterPanel.spec.js

@@ -11,7 +11,7 @@ import renderer from 'react-test-renderer';
 import { shallow } from 'enzyme';
 
 /**
- * @returns {object}
+ * @returns {object} - An enzyme configuration object.
  */
 function setupEnzyme() {
   const props = {