Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update some build and test dependencies | Update to latest design-system 0.37.x #490

Merged
merged 5 commits into from
Feb 22, 2024
Merged

Update some build and test dependencies | Update to latest design-system 0.37.x #490

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a88f5a5
Update some build and test dependencies
anselmbradford Feb 22, 2024
aa7b719
Update husky for v9 | build artifacts
anselmbradford Feb 22, 2024
291c2b2
Update to latest design-system 0.37.x
anselmbradford Feb 22, 2024
96b0103
Update expandable markup
anselmbradford Feb 22, 2024
3df2dca
Update snapshots
anselmbradford Feb 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 0 additions & 5 deletions .husky/pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# when running git commit, it starts from the root of ccdb5-ui
echo "[pre-commit]=> linting"
yarn lint-staged


42 changes: 21 additions & 21 deletions cypress/e2e/common/filters.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,13 @@ describe('Filter Panel', () => {
cy.get('.date-ranges .a-btn.range-3y').contains('3y').click();
cy.url().should(
'include',
`date_received_max=${maxDate}&date_received_min=${minDate}`
`date_received_max=${maxDate}&date_received_min=${minDate}`,
);
minDate = dayjs(new Date()).subtract(6, 'months').format('YYYY-MM-DD');
cy.get('.date-ranges .a-btn.range-6m').contains('6m').click();
cy.url().should(
'include',
`date_received_max=${maxDate}&date_received_min=${minDate}`
`date_received_max=${maxDate}&date_received_min=${minDate}`,
);
});
});
Expand All @@ -101,34 +101,34 @@ describe('Filter Panel', () => {
cy.wait(750);

cy.log('open simple filter');
cy.get('.timely > .o-expandable_target').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_target').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_target').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 @@ -144,34 +144,34 @@ describe('Filter Panel', () => {
cy.log('can collapse/expand a complex filter');
cy.get('.filter-panel .product .aggregation-branch').should(
'have.length.gt',
1
1,
);

// close it
cy.get('.filter-panel .product .o-expandable_cue-close').click();
cy.get('.filter-panel .product .aggregation-branch').should(
'have.length',
0
0,
);

// open it
cy.get('.filter-panel .product .o-expandable_cue-open').click();

cy.get('.filter-panel .product .aggregation-branch').should(
'have.length.gt',
1
1,
);

cy.log('can expand sub-filters');

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');

Expand All @@ -193,13 +193,13 @@ describe('Filter Panel', () => {
cy.get('.filter-panel .product .children').should('not.exist');
// Open sub-filter
cy.get(
'.filter-panel .product .aggregation-branch.mortgage button'
'.filter-panel .product .aggregation-branch.mortgage button',
).click();
cy.get(
'.filter-panel .product .aggregation-branch.mortgage .children'
'.filter-panel .product .aggregation-branch.mortgage .children',
).should('exist');
cy.get(
'.filter-panel .product input#product-mortgage-fha-mortgage'
'.filter-panel .product input#product-mortgage-fha-mortgage',
).click({ force: true });

cy.url().should('include', '&product=Mortgage%E2%80%A2FHA%20mortgage');
Expand All @@ -214,7 +214,7 @@ describe('Filter Panel', () => {

cy.url().should(
'not.include',
'&product=Mortgage%E2%80%A2FHA%20mortgage'
'&product=Mortgage%E2%80%A2FHA%20mortgage',
);
cy.url().should('include', 'product=Mortgage');

Expand All @@ -234,16 +234,16 @@ describe('Filter Panel', () => {
cy.get('.state input').should('be.visible');

cy.log('close it');
cy.get('.state .o-expandable_link').click();
cy.get('.state .o-expandable_cues').click();

cy.get('.state input').should('not.exist');

cy.log('open again');
cy.get('.state .o-expandable_link').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(
'texas'
'texas',
);

cy.get('.state .typeahead-selector').should('exist');
Expand Down
12 changes: 9 additions & 3 deletions dist/ccdb5.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/ccdb5.css.map
View file
Open in desktop

Large diffs are not rendered by default.

357 changes: 354 additions & 3 deletions dist/ccdb5.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/ccdb5.js.map
View file
Open in desktop

Large diffs are not rendered by default.

63 changes: 32 additions & 31 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"eject": "react-scripts eject",
"lint": "yarn prettier \"src/**/*.{js,jsx,ts,tsx,json,md}\" --write && yarn eslint ./src --fix && yarn stylelint \"src/**/*.{css,less}\" --fix && yarn lint:cypress",
"lint:cypress": "yarn eslint ./cypress --fix",
"prepare": "husky install",
"prepare": "husky",
"release": "yarn run build && release-it --npm.skipChecks",
"start": "NODE_ENV=development craco start",
"test": "craco test --coverage --watchAll=false"
Expand All @@ -37,35 +37,35 @@
"not ie > 0"
],
"devDependencies": {
"@babel/cli": "^7.22.5",
"@babel/core": "^7.22.5",
"@babel/eslint-parser": "^7.22.5",
"@babel/preset-react": "^7.22.5",
"@babel/runtime": "^7.22.5",
"@cfpb/cfpb-atomic-component": "0.27.0",
"@cfpb/cfpb-buttons": "0.27.0",
"@cfpb/cfpb-core": "0.27.0",
"@cfpb/cfpb-design-system": "^0.27.1",
"@cfpb/cfpb-expandables": "^0.17.12",
"@cfpb/cfpb-forms": "0.27.0",
"@cfpb/cfpb-grid": "0.27.0",
"@cfpb/cfpb-icons": "^0.31.0",
"@cfpb/cfpb-layout": "0.27.1",
"@cfpb/cfpb-notifications": "0.27.0",
"@cfpb/cfpb-pagination": "0.27.0",
"@cfpb/cfpb-tables": "0.27.0",
"@cfpb/cfpb-typography": "0.27.0",
"@babel/cli": "^7.23.9",
"@babel/core": "^7.23.9",
"@babel/eslint-parser": "^7.23.10",
"@babel/preset-react": "^7.23.3",
"@babel/runtime": "^7.23.9",
"@cfpb/cfpb-atomic-component": "0.37.0",
"@cfpb/cfpb-buttons": "0.37.0",
"@cfpb/cfpb-core": "0.37.0",
"@cfpb/cfpb-design-system": "^0.37.2",
"@cfpb/cfpb-expandables": "^0.37.0",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it all looks the same, but is this issue still valid?

#463

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated here. Hopefully I got everything 96b0103

Before:
Screenshot 2024-02-22 at 4 50 37 PM

After:
Screenshot 2024-02-22 at 4 50 47 PM

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wow, that was fast. Faster than me trying to figure it out!

"@cfpb/cfpb-forms": "0.37.1",
"@cfpb/cfpb-grid": "0.37.0",
"@cfpb/cfpb-icons": "^0.37.0",
"@cfpb/cfpb-layout": "0.37.0",
"@cfpb/cfpb-notifications": "0.37.0",
"@cfpb/cfpb-pagination": "0.37.0",
"@cfpb/cfpb-tables": "0.37.0",
"@cfpb/cfpb-typography": "0.37.2",
"@craco/craco": "^7.1.0",
"@reduxjs/toolkit": "^2.1.0",
"@testing-library/cypress": "^8.0.3",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "13.4.0",
"@testing-library/user-event": "^14.4.3",
"@testing-library/cypress": "^10.0.1",
"@testing-library/jest-dom": "^6.4.2",
"@testing-library/react": "14.2.1",
"@testing-library/user-event": "^14.5.2",
"britecharts": "git+https://github.com/cfpb/britecharts.git#v2.4.2",
"coveralls": "^3.0.9",
"craco-esbuild": "^0.5.2",
"craco-less": "^3.0.1",
"cypress": "^10.10.0",
"cypress": "^13.6.5",
"d3": "^5.12.0",
"d3-selection": "^1.4.0",
"dayjs": "^1.11.10",
Expand All @@ -74,29 +74,29 @@
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-cypress": "^2.13.3",
"eslint-plugin-cypress": "^2.15.1",
"eslint-plugin-jsdoc": "^48.0.6",
"eslint-plugin-react-redux": "^4.1.0",
"highcharts": "9.2.2",
"history": "^5.3.0",
"husky": "^8.0.1",
"husky": "^9.0.11",
"identity-obj-proxy": "3.0.0",
"intro.js": "^7.2.0",
"intro.js-react": "1.0.0",
"jest": "29.7.0",
"jest-environment-jsdom": "29.7.0",
"jest-fetch-mock": "^3.0.3",
"less": "^4.2.0",
"less-loader": "^11.1.3",
"less-loader": "^12.2.0",
"less-plugin-clean-css": "^1.5.1",
"lint-staged": "^15.2.2",
"lodash": "^4.17.21",
"mini-css-extract-plugin": "^2.7.6",
"mini-css-extract-plugin": "^2.8.0",
"mockdate": "^3.0.5",
"postcss": "^8.4.35",
"postcss-less": "^6.0.0",
"postcss-preset-env": "^7.8.2",
"postcss-safe-parser": "^6.0.0",
"postcss-preset-env": "^9.4.0",
"postcss-safe-parser": "^7.0.0",
"prettier": "^3.2.4",
"prop-types": "^15.5.10",
"query-string": "^5.0.0",
Expand Down Expand Up @@ -134,5 +134,6 @@
"access": "public",
"registry": "https://registry.npmjs.org/"
},
"proxy": "https://www.consumerfinance.gov"
"proxy": "https://www.consumerfinance.gov",
"dependencies": {}
}
2 changes: 1 addition & 1 deletion scripts/fonts.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ mkdir ./static/
mkdir ./static/fonts
cd ./static/fonts
prefix="https://github.com/cfpb/consumerfinance.gov/blob/main/static.in/cfgov-fonts/fonts/"
fonts=("1e9892c0-6927-4412-9874-1b82801ba47a.woff" "2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2" "627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2" "f26faddb-86cc-4477-a253-1e1287684336.woff")
fonts=("2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2" "627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2")
for font in ${fonts[@]}; do
# Flags: L = follow redirects.
curl -L "${prefix}${font}?raw=true" > ${font}
Expand Down
20 changes: 7 additions & 13 deletions src/components/Filters/CollapsibleFilter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,38 +36,32 @@ export default class CollapsibleFilter extends React.Component {
composeClasses += ' ' + this.props.className;
}

const buttonClasses = this.state.hasChildren ? '__expanded' : '__collapsed';
const buttonAttr = this.state.hasChildren ? 'true' : 'false';

const opened = (
<>
<span className="o-expandable_cue o-expandable_cue-close">
<span className="u-visually-hidden-on-mobile">Hide</span>
<span className="o-expandable_cue-close" role="img" aria-label="Hide">
{getIcon('minus-round')}
</span>
</>
);
const closed = (
<>
<span className="o-expandable_cue o-expandable_cue-open">
<span className="u-visually-hidden-on-mobile">Show</span>
<span className="o-expandable_cue-open" role="img" aria-label="Show">
{getIcon('plus-round')}
</span>
</>
);
return (
<section className={composeClasses}>
<button
className={
'o-expandable_header o-expandable_target o-expandable_target' +
buttonClasses
}
className="o-expandable_header"
aria-expanded={buttonAttr}
aria-label={`Hide ${this.props.title} filter`}
onClick={this._toggleChildDisplay}
>
<h3 className="h4 o-expandable_header-left o-expandable_label">
{this.props.title}
</h3>
<span className="o-expandable_header-right o-expandable_link">
<h3 className="h4 o-expandable_label">{this.props.title}</h3>
<span className="o-expandable_cues">
{this.state.hasChildren ? opened : closed}
</span>
</button>
Expand Down
12 changes: 0 additions & 12 deletions src/components/Filters/CollapsibleFilter.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,6 @@
padding-right: @gutter-minimum;
}

.o-expandable_cue {
&.a-btn__link {
border: 0;

font-size: @size-v;
}

.cf-icon-svg {
padding-left: @gutter-minimum;
}
}

p {
color: @gray;
font-size: 16px;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Filters/__tests__/CollapsibleFilter.spec.js
View file
Open in desktop
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_target');
const theButton = target.find('button.o-expandable_header');

expect(target.state('hasChildren')).toEqual(true);
theButton.simulate('click');
Expand Down
16 changes: 7 additions & 9 deletions src/components/Filters/__tests__/__snapshots__/CollapsibleFilter.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,24 @@ exports[`component:CollapsibleFilter initial state renders without crashing 1`]
className="o-expandable"
>
<button
aria-expanded="true"
aria-label="Hide foo filter"
className="o-expandable_header o-expandable_target o-expandable_target__expanded"
className="o-expandable_header"
onClick={[Function]}
>
<h3
className="h4 o-expandable_header-left o-expandable_label"
className="h4 o-expandable_label"
>
foo
</h3>
<span
className="o-expandable_header-right o-expandable_link"
className="o-expandable_cues"
>
<span
className="o-expandable_cue o-expandable_cue-close"
aria-label="Hide"
className="o-expandable_cue-close"
role="img"
>
<span
className="u-visually-hidden-on-mobile"
>
Hide
</span>
<svg>
minus-round.svg
</svg>
Expand Down
Loading
Loading