Updated to Design System 1.1.0

cypress/e2e/common/filters.cy.js

@@ -39,12 +39,12 @@ 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.a-btn--link: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.a-btn--link:first').click({ force: true });
       cy.log('apply dates');
 
       cy.get('#date_received-from').clear();
@@ -101,34 +101,34 @@ describe('Filter Panel', () => {
       cy.wait(750);
 
       cy.log('open simple filter');
-      cy.get('.timely > .o-expandable_header').click();
+      cy.get('.timely > .o-expandable__header').click();
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(750);
       cy.get(
-        '.timely > .o-expandable_content > ul > :nth-child(1) > .a-label',
+        '.timely > .o-expandable__content > ul > :nth-child(1) > .a-label',
       ).should('be.visible');
 
       cy.log('close it');
 
       // Close it after opening it
-      cy.get('.timely > .o-expandable_header').should('be.visible').click();
+      cy.get('.timely > .o-expandable__header').should('be.visible').click();
       cy.get(
-        '.timely > .o-expandable_content > ul > :nth-child(1) > .a-label',
+        '.timely > .o-expandable__content > ul > :nth-child(1) > .a-label',
       ).should('not.exist');
 
       cy.log('open it again');
-      cy.get('.timely > .o-expandable_header').click();
+      cy.get('.timely > .o-expandable__header').click();
       // eslint-disable-next-line cypress/no-unnecessary-waiting
       cy.wait(750);
 
       cy.get(
-        '.timely > .o-expandable_content > ul > :nth-child(1) > .a-label',
+        '.timely > .o-expandable__content > ul > :nth-child(1) > .a-label',
       ).should('be.visible');
 
       cy.log('apply filter');
 
       cy.get(
-        '.timely > .o-expandable_content > ul > :nth-child(1) > .a-label',
+        '.timely > .o-expandable__content > ul > :nth-child(1) > .a-label',
       ).click();
 
       cy.url().should('include', 'timely=Yes');
@@ -148,14 +148,14 @@ describe('Filter Panel', () => {
       );
 
       // close it
-      cy.get('.filter-panel .product .o-expandable_cue-close').click();
+      cy.get('.filter-panel .product .o-expandable__cue-close').click();
       cy.get('.filter-panel .product .aggregation-branch').should(
         'have.length',
         0,
       );
 
       // open it
-      cy.get('.filter-panel .product .o-expandable_cue-open').click();
+      cy.get('.filter-panel .product .o-expandable__cue-open').click();
 
       cy.get('.filter-panel .product .aggregation-branch').should(
         'have.length.gt',
@@ -167,11 +167,11 @@ describe('Filter Panel', () => {
       cy.get('.filter-panel .product .children').should('not.exist');
       // Open sub-filter
       cy.get(
-        '.filter-panel .product .aggregation-branch:first .a-btn__link',
+        '.filter-panel .product .aggregation-branch:first .a-btn--link',
       ).click();
       cy.get('.filter-panel .product .children').should('exist');
       cy.get(
-        '.filter-panel .product .aggregation-branch:first .a-btn__link',
+        '.filter-panel .product .aggregation-branch:first .a-btn--link',
       ).click();
       cy.get('.filter-panel .product .children').should('not.exist');
 
@@ -234,12 +234,12 @@ describe('Filter Panel', () => {
       cy.get('.state input').should('be.visible');
 
       cy.log('close it');
-      cy.get('.state .o-expandable_cues').click();
+      cy.get('.state .o-expandable__cues').click();
 
       cy.get('.state input').should('not.exist');
 
       cy.log('open again');
-      cy.get('.state .o-expandable_cues').click();
+      cy.get('.state .o-expandable__cues').click();
       cy.log('searches a typeahead filter');
       cy.findByPlaceholderText('Enter state name or abbreviation').clear();
       cy.findByPlaceholderText('Enter state name or abbreviation').type(

cypress/e2e/export/export.cy.js

@@ -1,6 +1,6 @@
 describe('Complaint export', () => {
-  const currentPage = '.m-pagination_label';
-  const nextButton = '.m-pagination .m-pagination_btn-next';
+  const currentPage = '.m-pagination__label';
+  const nextButton = '.m-pagination .m-pagination__btn-next';
 
   const exportButton = '.export-btn';
   const filteredDataset = 'label[for=dataset_filtered]';

cypress/e2e/list/list.cy.js

@@ -1,8 +1,8 @@
 describe('List View', () => {
   const cardContainers = '.cards-panel .card-container';
-  const currentPage = '.m-pagination_label';
-  const nextButton = '.m-pagination .m-pagination_btn-next';
-  const prevButton = '.m-pagination .m-pagination_btn-prev';
+  const currentPage = '.m-pagination__label';
+  const nextButton = '.m-pagination .m-pagination__btn-next';
+  const prevButton = '.m-pagination .m-pagination__btn-prev';
   const addNarrativesButton = '#btn-add-narratives';
   const removeNarrativesButton = '#btn-remove-narratives';
   const filterHasNarrative = '#filterHasNarrative';

package.json

@@ -42,19 +42,19 @@
     "@babel/eslint-parser": "^7.24.1",
     "@babel/preset-react": "^7.24.1",
     "@babel/runtime": "^7.24.4",
-    "@cfpb/cfpb-atomic-component": "0.43.1",
-    "@cfpb/cfpb-buttons": "0.43.0",
-    "@cfpb/cfpb-core": "0.43.0",
-    "@cfpb/cfpb-design-system": "^0.43.1",
-    "@cfpb/cfpb-expandables": "^0.43.1",
-    "@cfpb/cfpb-forms": "0.43.0",
-    "@cfpb/cfpb-grid": "0.43.0",
-    "@cfpb/cfpb-icons": "^0.43.0",
-    "@cfpb/cfpb-layout": "0.43.1",
-    "@cfpb/cfpb-notifications": "0.43.1",
-    "@cfpb/cfpb-pagination": "0.43.0",
-    "@cfpb/cfpb-tables": "0.43.1",
-    "@cfpb/cfpb-typography": "0.43.0",
+    "@cfpb/cfpb-atomic-component": "1.0.0",
+    "@cfpb/cfpb-buttons": "1.1.0",
+    "@cfpb/cfpb-core": "1.1.0",
+    "@cfpb/cfpb-design-system": "^1.1.0",
+    "@cfpb/cfpb-expandables": "^1.1.0",
+    "@cfpb/cfpb-forms": "1.1.0",
+    "@cfpb/cfpb-grid": "1.0.1",
+    "@cfpb/cfpb-icons": "^1.1.0",
+    "@cfpb/cfpb-layout": "1.1.0",
+    "@cfpb/cfpb-notifications": "1.1.0",
+    "@cfpb/cfpb-pagination": "1.1.0",
+    "@cfpb/cfpb-tables": "1.1.0",
+    "@cfpb/cfpb-typography": "1.1.0",
     "@craco/craco": "^7.1.0",
     "@reduxjs/toolkit": "^2.1.0",
     "@testing-library/cypress": "^10.0.1",
@@ -74,7 +74,7 @@
     "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-cypress": "^2.15.2",
     "eslint-plugin-jsdoc": "^48.2.3",
     "eslint-plugin-react-redux": "^4.1.0",
     "highcharts": "9.2.2",

src/__tests__/App.spec.js

@@ -29,7 +29,7 @@ describe('initial state', () => {
       </Provider>,
     );
 
-    expect(updateLocationHookSpy).toBeCalledTimes(1);
+    expect(updateLocationHookSpy).toBeCalled();
 
     expect(screen.getByText(/Consumer Complaint Database/)).toBeDefined();
     expect(screen.getByText(/Search within/)).toBeDefined();

src/components/ActionBar/ActionBar.js

@@ -47,7 +47,7 @@ export const ActionBar = () => {
         <div>
           <h3 className="h4 flex-all export-results">
             <button
-              className="a-btn a-btn__link export-btn"
+              className="a-btn a-btn--link export-btn"
               data-gtm_ignore="true"
               onClick={() => {
                 sendAnalyticsEvent('Export', tab + ':User Opens Export Modal');
@@ -57,7 +57,7 @@ export const ActionBar = () => {
               Export data
             </button>
             <button
-              className="a-btn a-btn__link print-preview"
+              className="a-btn a-btn--link print-preview"
               onClick={() => {
                 showPrintView(tab);
               }}

src/components/ComplaintDetail/ComplaintDetail.less

@@ -17,7 +17,7 @@
       }
     }
 
-    .a-btn__link {
+    .a-btn--link {
       border: 0;
 
       span {

src/components/Dialogs/DataExport/DataExport.js

@@ -76,7 +76,7 @@ export const DataExport = () => {
       <div className="header layout-row">
         <h3 className="flex-all">Export complaints</h3>
         <button
-          className="a-btn a-btn__link"
+          className="a-btn a-btn--link"
           data-gtm_ignore="true"
           onClick={() => {
             dispatch(hideModal());
@@ -198,13 +198,13 @@ export const DataExport = () => {
             >
               {!copied && (
                 <div>
-                  <span className="a-btn_icon">{getIcon('copy')}</span>
+                  <span className="a-btn__icon">{getIcon('copy')}</span>
                   Copy
                 </div>
               )}
               {!!copied && (
                 <div>
-                  <span className="a-btn_icon">
+                  <span className="a-btn__icon">
                     {getIcon('checkmark-round')}
                   </span>
                   Copied
@@ -229,7 +229,7 @@ export const DataExport = () => {
           Start export
         </button>
         <button
-          className="a-btn a-btn__link a-btn__warning"
+          className="a-btn a-btn--link a-btn__warning"
           data-gtm_ignore="true"
           onClick={() => {
             dispatch(hideModal());

src/components/Dialogs/DataExport/DataExport.less

@@ -1,6 +1,6 @@
 .export-modal {
   .body {
-    .a-btn_icon {
+    .a-btn__icon {
       padding-right: @gutter-minimum;
     }
 

src/components/Dialogs/DataExport/ExportConfirmation.js

@@ -11,7 +11,7 @@ export const ExportConfirmation = () => {
       <div className="header layout-row">
         <h3 className="flex-all">Export complaints</h3>
         <button
-          className="a-btn a-btn__link"
+          className="a-btn a-btn--link"
           data-gtm_ignore="true"
           onClick={() => {
             dispatch(hideModal());

src/components/Dialogs/RootModal.less

@@ -35,7 +35,7 @@
 
     align-items: flex-start;
 
-    .a-btn__link {
+    .a-btn--link {
       border: 0;
     }
 
@@ -61,7 +61,7 @@
     button {
       margin-right: @gutter-normal;
 
-      &.a-btn__link {
+      &.a-btn--link {
         height: @size-iv;
       }
     }

src/components/Filters/AggregationBranch.js

@@ -71,7 +71,7 @@ export class AggregationBranch extends React.Component {
       );
     }
 
-    const liStyle = 'parent m-form-field m-form-field__checkbox body-copy';
+    const liStyle = 'parent m-form-field m-form-field--checkbox body-copy';
     const id = sanitizeHtmlId(fieldName + '-' + item.key);
 
     let chevronIcon;
@@ -97,7 +97,7 @@ export class AggregationBranch extends React.Component {
             <span className="u-visually-hidden">{item.key}</span>
           </label>
           <button
-            className="flex-all a-btn a-btn__link"
+            className="flex-all a-btn a-btn--link"
             onClick={this._toggleChildDisplay}
           >
             <span>{item.key}</span>

src/components/Filters/AggregationBranch.less

@@ -39,7 +39,7 @@
       }
     }
 
-    .a-btn__link {
+    .a-btn--link {
       border: 0;
     }
 

src/components/Filters/AggregationItem.js

@@ -20,7 +20,7 @@ export class AggregationItem extends React.Component {
   render() {
     const { isActive, item, fieldName } = this.props;
     const value = item.value || item.key;
-    const liStyle = 'layout-row m-form-field m-form-field__checkbox';
+    const liStyle = 'layout-row m-form-field m-form-field--checkbox';
     const id = sanitizeHtmlId(fieldName + '-' + item.key);
     return (
       <li className={liStyle}>

src/components/Filters/CollapsibleFilter.js

@@ -40,33 +40,33 @@ export default class CollapsibleFilter extends React.Component {
 
     const opened = (
       <>
-        <span className="o-expandable_cue-close" role="img" aria-label="Hide">
+        <span className="o-expandable__cue-close" role="img" aria-label="Hide">
           {getIcon('minus-round')}
         </span>
       </>
     );
     const closed = (
       <>
-        <span className="o-expandable_cue-open" role="img" aria-label="Show">
+        <span className="o-expandable__cue-open" role="img" aria-label="Show">
           {getIcon('plus-round')}
         </span>
       </>
     );
     return (
       <section className={composeClasses}>
         <button
-          className="o-expandable_header"
+          className="o-expandable__header"
           aria-expanded={buttonAttr}
           aria-label={`Hide ${this.props.title} filter`}
           onClick={this._toggleChildDisplay}
         >
-          <h3 className="o-expandable_label">{this.props.title}</h3>
-          <span className="o-expandable_cues">
+          <h3 className="o-expandable__label">{this.props.title}</h3>
+          <span className="o-expandable__cues">
             {this.state.hasChildren ? opened : closed}
           </span>
         </button>
         {this.state.hasChildren ? (
-          <div className="o-expandable_content">
+          <div className="o-expandable__content">
             <p>{this.props.desc}</p>
             {this.props.children}
           </div>

src/components/Filters/CompanyReceivedFilter.js

@@ -157,7 +157,7 @@ export const CompanyReceivedFilter = () => {
                 value={fromDate}
               />
               <button
-                className="a-btn a-btn__link"
+                className="a-btn a-btn--link"
                 onClick={() => handleClear('from')}
               >
                 {getIcon('delete')}
@@ -189,7 +189,7 @@ export const CompanyReceivedFilter = () => {
                 value={throughDate}
               />
               <button
-                className="a-btn a-btn__link"
+                className="a-btn a-btn--link"
                 onClick={() => handleClear('through')}
               >
                 {getIcon('delete')}

src/components/Filters/DateFilter.js

@@ -174,7 +174,7 @@ export const DateFilter = () => {
                 value={fromDate}
               />
               <button
-                className="a-btn a-btn__link"
+                className="a-btn a-btn--link"
                 onClick={() => handleClear('from')}
               >
                 {getIcon('delete')}
@@ -206,7 +206,7 @@ export const DateFilter = () => {
                 value={throughDate}
               />
               <button
-                className="a-btn a-btn__link"
+                className="a-btn a-btn--link"
                 onClick={() => handleClear('through')}
               >
                 {getIcon('delete')}
@@ -223,7 +223,7 @@ export const DateFilter = () => {
             <span aria-hidden="true">
               {getIcon('delete-round', 'cf-icon-delete-round')}
             </span>
-            <span className="a-form-alert_text">{errors + ' '}</span>
+            <span className="a-form-alert__text">{errors + ' '}</span>
           </div>
         ) : null}
       </div>