Skip to content

Commit

Permalink
updated less and markup, still broken
Browse files Browse the repository at this point in the history
  • Loading branch information
flacoman91 committed Apr 16, 2024
1 parent 4bd2434 commit e102b59
Show file tree
Hide file tree
Showing 36 changed files with 275 additions and 151 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/Dialogs/DataExport/DataExport.js
Original file line number Diff line number Diff line change
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 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
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
12 changes: 6 additions & 6 deletions src/components/Filters/CollapsibleFilter.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Filters/DateFilter.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Filters/__tests__/CollapsibleFilter.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ describe('component:CollapsibleFilter', () => {

xit('hides the children when Hide is clicked', () => {
const target = mount(<CollapsibleFilter hasChildren={true} />);
const theButton = target.find('button.o-expandable_header');
const theButton = target.find('button.o-expandable__header');

expect(target.state('hasChildren')).toEqual(true);
theButton.simulate('click');
Expand Down
4 changes: 2 additions & 2 deletions src/components/List/ListPanel/ListPanel.less
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@

.m-pagination {
.a-btn[disabled],
.m-pagination_label,
.m-pagination_btn-submit {
.m-pagination__label,
.m-pagination__btn-submit {
color: var(--gray);
}
}
Expand Down

0 comments on commit e102b59

Please sign in to comment.