diff --git a/front-end/.yarn/cache/@cfpb-design-system-react-npm-2.0.1-83627bce77-f376e122c6.zip b/front-end/.yarn/cache/@cfpb-design-system-react-npm-2.0.1-83627bce77-f376e122c6.zip deleted file mode 100644 index 2f78c4d1..00000000 Binary files a/front-end/.yarn/cache/@cfpb-design-system-react-npm-2.0.1-83627bce77-f376e122c6.zip and /dev/null differ diff --git a/front-end/.yarn/cache/@cfpb-design-system-react-npm-2.0.3-9ee0081f77-17a8145e80.zip b/front-end/.yarn/cache/@cfpb-design-system-react-npm-2.0.3-9ee0081f77-17a8145e80.zip new file mode 100644 index 00000000..c1b7efd3 Binary files /dev/null and b/front-end/.yarn/cache/@cfpb-design-system-react-npm-2.0.3-9ee0081f77-17a8145e80.zip differ diff --git a/front-end/cypress/helpers/pageHelper.ts b/front-end/cypress/helpers/pageHelper.ts index b109a22e..0cc0924e 100644 --- a/front-end/cypress/helpers/pageHelper.ts +++ b/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 } } diff --git a/front-end/package.json b/front-end/package.json index 07caa4b0..0e28d753 100644 --- a/front-end/package.json +++ b/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", diff --git a/front-end/src/components/Filters/IndeterminateCheckbox/IndeterminateCheckbox.scss b/front-end/src/components/Filters/IndeterminateCheckbox/IndeterminateCheckbox.scss deleted file mode 100644 index f0cd74b6..00000000 --- a/front-end/src/components/Filters/IndeterminateCheckbox/IndeterminateCheckbox.scss +++ /dev/null @@ -1,9 +0,0 @@ -@use '@cfpb/cfpb-design-system/src/utilities' as *; - -.a-checkbox:indeterminate + .a-label::before { - --cfpb-background-icon-svg: 'minus'; - - background-size: auto 1.1875em; - background-repeat: no-repeat; - background-position: center 0; -} diff --git a/front-end/src/components/Filters/IndeterminateCheckbox/IndeterminateCheckbox.tsx b/front-end/src/components/Filters/IndeterminateCheckbox/IndeterminateCheckbox.tsx deleted file mode 100644 index a4295555..00000000 --- a/front-end/src/components/Filters/IndeterminateCheckbox/IndeterminateCheckbox.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { Label } from '@cfpb/design-system-react' -import type { ChangeEvent, JSX, ReactElement, ReactNode } from 'react' -import { useEffect, useRef } from 'react' -import './IndeterminateCheckbox.scss' - -/** - * IndeterminateCheckbox - * - * Based on the checkbox component in the DSR: - * https://github.com/cfpb/design-system-react/blob/main/src/components/Checkbox/Checkbox.tsx - * - * Adds an indeterminate state, illustrated by a minus sign. - * Used with nested checkboxes to indicate that children are partially selected. - * - * An HTML checkbox can be marked as indeterminate by applying the indeterminate property - * using JavaScript. Indeterminate state is visual only. - * - * @param {boolean} isIndeterminate - whether the indeterminate property should be - * set to true for this checkbox - * ... - * - */ - -export interface CheckboxProperties { - /** Unique identifier for this checkbox */ - id: number | string - /** Text that appears next to the checkbox for clarification of purpose */ - label: ReactNode - /** Additional CSS classes applied to the checkbox's wrapper element */ - className?: string - /** Is checkboxed checked? */ - checked?: boolean - /** Additional CSS classes that will be applied to checkbox input element */ - inputClassName?: string - /** Apply indeterminate attribute to checkbox? */ - isIndeterminate?: boolean - /** Apply the "Large" styles for this element? */ - isLarge?: boolean - /** Additional CSS classes that will be applied to checkbox label element */ - labelClassName?: string - /** Removes/Adds 'label__heading' class to the Label * */ - isLabelInline?: boolean - /** A name for this checkbox's value that can be referenced in javascript */ - name?: string - /** Is this checkbox disabled? */ - disabled?: boolean - /** An event handler function that will be called when the checkbox's value is changed */ - onChange?: (event: ChangeEvent) => void - /** Border status */ - status?: 'error' | 'success' | 'warning' -} - -const containerBaseStyles = ['m-form-field m-form-field--checkbox'] - -const borderStatus = { - success: 'm-form-field--checkbox--success', - warning: 'm-form-field--checkbox--warning', - error: 'm-form-field--checkbox--error' -} - -export function IndeterminateCheckbox({ - id, - label, - className, - inputClassName, - labelClassName = '', - checked = false, - disabled = false, - isIndeterminate = false, - isLarge = false, - isLabelInline = true, // 'true' REMOVES the a.label__heading class - name, - onChange, - status, - ...properties -}: CheckboxProperties & JSX.IntrinsicElements['input']): ReactElement { - const onChangeHandler = (event: ChangeEvent): void => { - onChange?.(event) - } - - const ref = useRef(null) - - useEffect(() => { - if (ref.current) { - ref.current.indeterminate = isIndeterminate - } - }) - - const containerClasses = [ - ...containerBaseStyles, - isLarge ? 'm-form-field--lg-target' : '', - status && status in borderStatus ? borderStatus[status] : '', - isIndeterminate ? 'indeterminate' : '', - className - ] - - return ( -
- - -
- ) -} - -export default IndeterminateCheckbox diff --git a/front-end/src/components/Filters/NestedCheckboxGroup/NestedCheckboxGroup.tsx b/front-end/src/components/Filters/NestedCheckboxGroup/NestedCheckboxGroup.tsx index bdcf9032..0656dc85 100644 --- a/front-end/src/components/Filters/NestedCheckboxGroup/NestedCheckboxGroup.tsx +++ b/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={ - ) : ( -