Skip to content

Commit

Permalink
updated less and markup, still broken
Browse files Browse the repository at this point in the history
updated less and markup, site looks okay

update snapshots
  • Loading branch information
flacoman91 committed Apr 16, 2024
1 parent 80593e4 commit 9ec2101
Show file tree
Hide file tree
Showing 63 changed files with 389 additions and 265 deletions.
22 changes: 11 additions & 11 deletions cypress/e2e/common/filters.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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',
Expand Down Expand Up @@ -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(
Expand Down
4 changes: 2 additions & 2 deletions cypress/e2e/export/export.cy.js
Original file line number Diff line number Diff line change
@@ -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]';
Expand Down
6 changes: 3 additions & 3 deletions cypress/e2e/list/list.cy.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
116 changes: 116 additions & 0 deletions find-replace.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
import * as fs from 'fs';
import { glob } from 'glob';

async function extractBEM() {
let uniqueClasses = [];
try {
const rawData = await fs.readFileSync(
'./dist/ccdb5.css',
'utf8',
);

// Strip comments.
let data = rawData.replaceAll(/\/\*.*\*\//g, '');

// Strip URLs.
data = data.replaceAll(
/[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/gi,
'',
);

// Parse out classes.
const classes = [
...new Set(
data.match(/(?:[\.]{1})([a-zA-Z_]+[\w-_]*)(?:[\s\.\,\{\>#\:]{0})/gim),
),
];

classes.forEach((clazz) => {
// Strip leading period.
clazz = clazz.substring(1);

// Build sets of the old and new BEM.
const oldBEM = updateOldBEM(clazz);
const newBEM = updateNewBEM(clazz);

if (oldBEM !== newBEM) {
uniqueClasses.push([oldBEM, newBEM]);
}
});
} catch (err) {
console.error(err);
}

return uniqueClasses;
}

function isBEM(clazz) {
if (
clazz.match(
/^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$/gim,
) !== null
) {
return true;
}

return false;
}

function updateOldBEM(clazz) {
if (isBEM(clazz)) {
//console.log(clazz);
// BEM.
clazz = clazz.replaceAll('__', '_');
clazz = clazz.replaceAll('--', '__');
}

return clazz;
}

function updateNewBEM(clazz) {
if (!isBEM(clazz)) {
// Not BEM.
clazz = clazz.replaceAll('__', '--');
clazz = clazz.replaceAll('_', '__');
}

return clazz;
}

/*
const beforeList = await fs
.readFileSync('css-classes-before.txt')
.toString()
.split('\n');
const afterList = await fs
.readFileSync('css-classes-after.txt')
.toString()
.split('\n');
*/

async function findAndReplaceBEM() {
const filePaths = await glob('**/*.{md,html,js,less,css}', {
ignore: ['CHANGELOG.md', 'node_modules/**', 'test/unit-test-coverage/**'],
});

const oldBEMList = await extractBEM();

let file;
let processedFile;
filePaths.forEach(async (filePath) => {
// A screenshot with a JS extention can be seen as a directory.
if (!fs.lstatSync(filePath).isDirectory()) {
file = await fs.readFileSync(filePath, 'utf8');
processedFile = file;
oldBEMList.forEach(async (clazz) => {
const oldBEMClass = clazz[0];
const newBEMClass = clazz[1];
processedFile = processedFile.replaceAll(oldBEMClass, newBEMClass);
});
await fs.writeFileSync(filePath, processedFile, 'utf8');
}
});
}

findAndReplaceBEM();
29 changes: 15 additions & 14 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.0.0",
"@cfpb/cfpb-core": "1.0.0",
"@cfpb/cfpb-design-system": "^1.0.0",
"@cfpb/cfpb-expandables": "^1.0.0",
"@cfpb/cfpb-forms": "1.0.0",
"@cfpb/cfpb-grid": "1.0.0",
"@cfpb/cfpb-icons": "^1.0.0",
"@cfpb/cfpb-layout": "1.0.0",
"@cfpb/cfpb-notifications": "1.0.0",
"@cfpb/cfpb-pagination": "1.0.0",
"@cfpb/cfpb-tables": "1.0.0",
"@cfpb/cfpb-typography": "1.0.0",
"@craco/craco": "^7.1.0",
"@reduxjs/toolkit": "^2.1.0",
"@testing-library/cypress": "^10.0.1",
Expand All @@ -74,9 +74,10 @@
"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",
"glob": "^10.3.12",
"highcharts": "9.2.2",
"history": "^5.3.0",
"husky": "^9.0.11",
Expand Down
4 changes: 2 additions & 2 deletions src/components/ActionBar/ActionBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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);
}}
Expand Down
2 changes: 1 addition & 1 deletion src/components/ComplaintDetail/ComplaintDetail.less
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
}
}

.a-btn__link {
.a-btn--link {
border: 0;

span {
Expand Down
8 changes: 4 additions & 4 deletions src/components/Dialogs/DataExport/DataExport.js
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand Down Expand Up @@ -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
Expand All @@ -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());
Expand Down
2 changes: 1 addition & 1 deletion src/components/Dialogs/DataExport/DataExport.less
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.export-modal {
.body {
.a-btn_icon {
.a-btn__icon {
padding-right: @gutter-minimum;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/Dialogs/DataExport/ExportConfirmation.js
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand Down
4 changes: 2 additions & 2 deletions src/components/Dialogs/RootModal.less
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@

align-items: flex-start;

.a-btn__link {
.a-btn--link {
border: 0;
}

Expand All @@ -61,7 +61,7 @@
button {
margin-right: @gutter-normal;

&.a-btn__link {
&.a-btn--link {
height: @size-iv;
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Filters/AggregationBranch.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Filters/AggregationBranch.less
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
}
}

.a-btn__link {
.a-btn--link {
border: 0;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/Filters/AggregationItem.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand Down

0 comments on commit 9ec2101

Please sign in to comment.