Use DSR checkbox for indeterminate state

front-end/cypress/helpers/pageHelper.ts

@@ -88,28 +88,23 @@ export class Metro2Page {
   ) {
     switch (state) {
       case 'checked': {
-        this.getInputByLabel(label).should('be.checked')
-        cy.contains('label', label)
-          .parent()
-          .should('not.have.class', 'indeterminate')
-
+        this.getInputByLabel(label)
+          .should('be.checked')
+          .and('have.prop', 'indeterminate', false)
         break
       }
       case 'unchecked': {
-        this.getInputByLabel(label).should('not.be.checked')
-        cy.contains('label', label)
-          .parent()
-          .should('not.have.class', 'indeterminate')
-
+        this.getInputByLabel(label)
+          .should('not.be.checked')
+          .and('have.prop', 'indeterminate', false)
         break
       }
       case 'indeterminate': {
-        this.getInputByLabel(label).should('not.be.checked')
-        cy.contains('label', label).parent().should('have.class', 'indeterminate')
-
+        this.getInputByLabel(label)
+          .should('not.be.checked')
+          .and('have.prop', 'indeterminate', true)
         break
       }
-      // No default
     }
   }
 

front-end/package.json

@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@cfpb/cfpb-design-system": "^5.8.0",
-    "@cfpb/design-system-react": "^2.0.1",
+    "@cfpb/design-system-react": "^2.0.3",
     "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-router": "^1.170.18",
     "@tanstack/router-devtools": "^1.167.0",

front-end/src/components/Filters/NestedCheckboxGroup/NestedCheckboxGroup.tsx

@@ -1,6 +1,6 @@
+import { Checkbox } from '@cfpb/design-system-react'
 import Accordion from '@src/components/Accordion/Accordion'
 import type { ReactElement } from 'react'
-import { IndeterminateCheckbox } from '../IndeterminateCheckbox/IndeterminateCheckbox'
 import type { CheckboxItem } from './CheckboxItem'
 import './NestedCheckboxGroup.scss'
 
@@ -77,7 +77,7 @@ export default function NestedCheckboxGroup({
             key={item.key}
             openOnLoad={level === 1 && someChecked}
             header={
-              <IndeterminateCheckbox
+              <Checkbox
                 onChange={item.onChange}
                 id={String(item.key)}
                 label={item.name}
@@ -89,7 +89,7 @@ export default function NestedCheckboxGroup({
             <NestedCheckboxGroup items={item.children} level={level + 1} />
           </Accordion>
         ) : (
-          <IndeterminateCheckbox
+          <Checkbox
             id={String(item.key)}
             key={item.key}
             label={item.name}

front-end/yarn.lock

@@ -481,17 +481,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@cfpb/design-system-react@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "@cfpb/design-system-react@npm:2.0.1"
+"@cfpb/design-system-react@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "@cfpb/design-system-react@npm:2.0.3"
   dependencies:
     react-select: "npm:^5.10.2"
   peerDependencies:
-    "@cfpb/cfpb-design-system": 5.8.1
+    "@cfpb/cfpb-design-system": 5.10.0
     lit: ^3.3.3
     react: ^19.2.8
     react-dom: ^19.2.8
-  checksum: 10/f376e122c60509d26b328bde75e4ee6a61e851ec1652daa925ac07cf80973cbef71295ab5868f67b6317f9d34e4ada0e99ec8e70dca57149b1c2359f37cd6ad2
+  checksum: 10/17a8145e805e218805fba7de097890225cd29192f569024386296d6f8024fa634176934dbd30d62fe4df9382084a40dcfeb69597caa179b6a7b095c01deadae7
   languageName: node
   linkType: hard
 
@@ -6279,7 +6279,7 @@ __metadata:
   dependencies:
     "@cfpb/browserslist-config": "npm:^0.0.6"
     "@cfpb/cfpb-design-system": "npm:^5.8.0"
-    "@cfpb/design-system-react": "npm:^2.0.1"
+    "@cfpb/design-system-react": "npm:^2.0.3"
     "@eslint/js": "npm:^10.0.1"
     "@nabla/vite-plugin-eslint": "npm:^3.0.0"
     "@tanstack/react-query": "npm:^5.90.21"