Skip to content

Commit 9ff4a26

Browse files
anselmbradfordanselmbradford
authored
Update some build and test dependencies | Update to latest design-system 0.37.x (#490)
* Update some build and test dependencies * Update husky for v9 | build artifacts * Update to latest design-system 0.37.x * Update expandable markup * Update snapshots
1 parent bbad5a8 commit 9ff4a26

17 files changed

+503
-179
lines changed

‎.husky/pre-commit

-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
#!/bin/sh
2-
. "$(dirname "$0")/_/husky.sh"
3-
41
# when running git commit, it starts from the root of ccdb5-ui
52
echo "[pre-commit]=> linting"
63
yarn lint-staged
7-
8-

‎cypress/e2e/common/filters.cy.js

+21-21
Original file line numberDiff line numberDiff line change
@@ -82,13 +82,13 @@ describe('Filter Panel', () => {
8282
cy.get('.date-ranges .a-btn.range-3y').contains('3y').click();
8383
cy.url().should(
8484
'include',
85-
`date_received_max=${maxDate}&date_received_min=${minDate}`
85+
`date_received_max=${maxDate}&date_received_min=${minDate}`,
8686
);
8787
minDate = dayjs(new Date()).subtract(6, 'months').format('YYYY-MM-DD');
8888
cy.get('.date-ranges .a-btn.range-6m').contains('6m').click();
8989
cy.url().should(
9090
'include',
91-
`date_received_max=${maxDate}&date_received_min=${minDate}`
91+
`date_received_max=${maxDate}&date_received_min=${minDate}`,
9292
);
9393
});
9494
});
@@ -101,34 +101,34 @@ describe('Filter Panel', () => {
101101
cy.wait(750);
102102

103103
cy.log('open simple filter');
104-
cy.get('.timely > .o-expandable_target').click();
104+
cy.get('.timely > .o-expandable_header').click();
105105
// eslint-disable-next-line cypress/no-unnecessary-waiting
106106
cy.wait(750);
107107
cy.get(
108-
'.timely > .o-expandable_content > ul > :nth-child(1) > .a-label'
108+
'.timely > .o-expandable_content > ul > :nth-child(1) > .a-label',
109109
).should('be.visible');
110110

111111
cy.log('close it');
112112

113113
// Close it after opening it
114-
cy.get('.timely > .o-expandable_target').should('be.visible').click();
114+
cy.get('.timely > .o-expandable_header').should('be.visible').click();
115115
cy.get(
116-
'.timely > .o-expandable_content > ul > :nth-child(1) > .a-label'
116+
'.timely > .o-expandable_content > ul > :nth-child(1) > .a-label',
117117
).should('not.exist');
118118

119119
cy.log('open it again');
120-
cy.get('.timely > .o-expandable_target').click();
120+
cy.get('.timely > .o-expandable_header').click();
121121
// eslint-disable-next-line cypress/no-unnecessary-waiting
122122
cy.wait(750);
123123

124124
cy.get(
125-
'.timely > .o-expandable_content > ul > :nth-child(1) > .a-label'
125+
'.timely > .o-expandable_content > ul > :nth-child(1) > .a-label',
126126
).should('be.visible');
127127

128128
cy.log('apply filter');
129129

130130
cy.get(
131-
'.timely > .o-expandable_content > ul > :nth-child(1) > .a-label'
131+
'.timely > .o-expandable_content > ul > :nth-child(1) > .a-label',
132132
).click();
133133

134134
cy.url().should('include', 'timely=Yes');
@@ -144,34 +144,34 @@ describe('Filter Panel', () => {
144144
cy.log('can collapse/expand a complex filter');
145145
cy.get('.filter-panel .product .aggregation-branch').should(
146146
'have.length.gt',
147-
1
147+
1,
148148
);
149149

150150
// close it
151151
cy.get('.filter-panel .product .o-expandable_cue-close').click();
152152
cy.get('.filter-panel .product .aggregation-branch').should(
153153
'have.length',
154-
0
154+
0,
155155
);
156156

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

160160
cy.get('.filter-panel .product .aggregation-branch').should(
161161
'have.length.gt',
162-
1
162+
1,
163163
);
164164

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

167167
cy.get('.filter-panel .product .children').should('not.exist');
168168
// Open sub-filter
169169
cy.get(
170-
'.filter-panel .product .aggregation-branch:first .a-btn__link'
170+
'.filter-panel .product .aggregation-branch:first .a-btn__link',
171171
).click();
172172
cy.get('.filter-panel .product .children').should('exist');
173173
cy.get(
174-
'.filter-panel .product .aggregation-branch:first .a-btn__link'
174+
'.filter-panel .product .aggregation-branch:first .a-btn__link',
175175
).click();
176176
cy.get('.filter-panel .product .children').should('not.exist');
177177

@@ -193,13 +193,13 @@ describe('Filter Panel', () => {
193193
cy.get('.filter-panel .product .children').should('not.exist');
194194
// Open sub-filter
195195
cy.get(
196-
'.filter-panel .product .aggregation-branch.mortgage button'
196+
'.filter-panel .product .aggregation-branch.mortgage button',
197197
).click();
198198
cy.get(
199-
'.filter-panel .product .aggregation-branch.mortgage .children'
199+
'.filter-panel .product .aggregation-branch.mortgage .children',
200200
).should('exist');
201201
cy.get(
202-
'.filter-panel .product input#product-mortgage-fha-mortgage'
202+
'.filter-panel .product input#product-mortgage-fha-mortgage',
203203
).click({ force: true });
204204

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

215215
cy.url().should(
216216
'not.include',
217-
'&product=Mortgage%E2%80%A2FHA%20mortgage'
217+
'&product=Mortgage%E2%80%A2FHA%20mortgage',
218218
);
219219
cy.url().should('include', 'product=Mortgage');
220220

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

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

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

241241
cy.log('open again');
242-
cy.get('.state .o-expandable_link').click();
242+
cy.get('.state .o-expandable_cues').click();
243243
cy.log('searches a typeahead filter');
244244
cy.findByPlaceholderText('Enter state name or abbreviation').clear();
245245
cy.findByPlaceholderText('Enter state name or abbreviation').type(
246-
'texas'
246+
'texas',
247247
);
248248

249249
cy.get('.state .typeahead-selector').should('exist');

‎dist/ccdb5.css

+9-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ccdb5.css.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ccdb5.js

+354-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ccdb5.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+32-31
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"eject": "react-scripts eject",
2626
"lint": "yarn prettier \"src/**/*.{js,jsx,ts,tsx,json,md}\" --write && yarn eslint ./src --fix && yarn stylelint \"src/**/*.{css,less}\" --fix && yarn lint:cypress",
2727
"lint:cypress": "yarn eslint ./cypress --fix",
28-
"prepare": "husky install",
28+
"prepare": "husky",
2929
"release": "yarn run build && release-it --npm.skipChecks",
3030
"start": "NODE_ENV=development craco start",
3131
"test": "craco test --coverage --watchAll=false"
@@ -37,35 +37,35 @@
3737
"not ie > 0"
3838
],
3939
"devDependencies": {
40-
"@babel/cli": "^7.22.5",
41-
"@babel/core": "^7.22.5",
42-
"@babel/eslint-parser": "^7.22.5",
43-
"@babel/preset-react": "^7.22.5",
44-
"@babel/runtime": "^7.22.5",
45-
"@cfpb/cfpb-atomic-component": "0.27.0",
46-
"@cfpb/cfpb-buttons": "0.27.0",
47-
"@cfpb/cfpb-core": "0.27.0",
48-
"@cfpb/cfpb-design-system": "^0.27.1",
49-
"@cfpb/cfpb-expandables": "^0.17.12",
50-
"@cfpb/cfpb-forms": "0.27.0",
51-
"@cfpb/cfpb-grid": "0.27.0",
52-
"@cfpb/cfpb-icons": "^0.31.0",
53-
"@cfpb/cfpb-layout": "0.27.1",
54-
"@cfpb/cfpb-notifications": "0.27.0",
55-
"@cfpb/cfpb-pagination": "0.27.0",
56-
"@cfpb/cfpb-tables": "0.27.0",
57-
"@cfpb/cfpb-typography": "0.27.0",
40+
"@babel/cli": "^7.23.9",
41+
"@babel/core": "^7.23.9",
42+
"@babel/eslint-parser": "^7.23.10",
43+
"@babel/preset-react": "^7.23.3",
44+
"@babel/runtime": "^7.23.9",
45+
"@cfpb/cfpb-atomic-component": "0.37.0",
46+
"@cfpb/cfpb-buttons": "0.37.0",
47+
"@cfpb/cfpb-core": "0.37.0",
48+
"@cfpb/cfpb-design-system": "^0.37.2",
49+
"@cfpb/cfpb-expandables": "^0.37.0",
50+
"@cfpb/cfpb-forms": "0.37.1",
51+
"@cfpb/cfpb-grid": "0.37.0",
52+
"@cfpb/cfpb-icons": "^0.37.0",
53+
"@cfpb/cfpb-layout": "0.37.0",
54+
"@cfpb/cfpb-notifications": "0.37.0",
55+
"@cfpb/cfpb-pagination": "0.37.0",
56+
"@cfpb/cfpb-tables": "0.37.0",
57+
"@cfpb/cfpb-typography": "0.37.2",
5858
"@craco/craco": "^7.1.0",
5959
"@reduxjs/toolkit": "^2.1.0",
60-
"@testing-library/cypress": "^8.0.3",
61-
"@testing-library/jest-dom": "^5.16.5",
62-
"@testing-library/react": "13.4.0",
63-
"@testing-library/user-event": "^14.4.3",
60+
"@testing-library/cypress": "^10.0.1",
61+
"@testing-library/jest-dom": "^6.4.2",
62+
"@testing-library/react": "14.2.1",
63+
"@testing-library/user-event": "^14.5.2",
6464
"britecharts": "git+https://github.com/cfpb/britecharts.git#v2.4.2",
6565
"coveralls": "^3.0.9",
6666
"craco-esbuild": "^0.5.2",
6767
"craco-less": "^3.0.1",
68-
"cypress": "^10.10.0",
68+
"cypress": "^13.6.5",
6969
"d3": "^5.12.0",
7070
"d3-selection": "^1.4.0",
7171
"dayjs": "^1.11.10",
@@ -74,29 +74,29 @@
7474
"eslint": "^8.56.0",
7575
"eslint-config-prettier": "^9.1.0",
7676
"eslint-config-react-app": "^7.0.1",
77-
"eslint-plugin-cypress": "^2.13.3",
77+
"eslint-plugin-cypress": "^2.15.1",
7878
"eslint-plugin-jsdoc": "^48.0.6",
7979
"eslint-plugin-react-redux": "^4.1.0",
8080
"highcharts": "9.2.2",
8181
"history": "^5.3.0",
82-
"husky": "^8.0.1",
82+
"husky": "^9.0.11",
8383
"identity-obj-proxy": "3.0.0",
8484
"intro.js": "^7.2.0",
8585
"intro.js-react": "1.0.0",
8686
"jest": "29.7.0",
8787
"jest-environment-jsdom": "29.7.0",
8888
"jest-fetch-mock": "^3.0.3",
8989
"less": "^4.2.0",
90-
"less-loader": "^11.1.3",
90+
"less-loader": "^12.2.0",
9191
"less-plugin-clean-css": "^1.5.1",
9292
"lint-staged": "^15.2.2",
9393
"lodash": "^4.17.21",
94-
"mini-css-extract-plugin": "^2.7.6",
94+
"mini-css-extract-plugin": "^2.8.0",
9595
"mockdate": "^3.0.5",
9696
"postcss": "^8.4.35",
9797
"postcss-less": "^6.0.0",
98-
"postcss-preset-env": "^7.8.2",
99-
"postcss-safe-parser": "^6.0.0",
98+
"postcss-preset-env": "^9.4.0",
99+
"postcss-safe-parser": "^7.0.0",
100100
"prettier": "^3.2.4",
101101
"prop-types": "^15.5.10",
102102
"query-string": "^5.0.0",
@@ -134,5 +134,6 @@
134134
"access": "public",
135135
"registry": "https://registry.npmjs.org/"
136136
},
137-
"proxy": "https://www.consumerfinance.gov"
137+
"proxy": "https://www.consumerfinance.gov",
138+
"dependencies": {}
138139
}

‎scripts/fonts.sh

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ mkdir ./static/
66
mkdir ./static/fonts
77
cd ./static/fonts
88
prefix="https://github.com/cfpb/consumerfinance.gov/blob/main/static.in/cfgov-fonts/fonts/"
9-
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")
9+
fonts=("2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2" "627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2")
1010
for font in ${fonts[@]}; do
1111
# Flags: L = follow redirects.
1212
curl -L "${prefix}${font}?raw=true" > ${font}

‎src/components/Filters/CollapsibleFilter.js

+7-13
Original file line numberDiff line numberDiff line change
@@ -36,38 +36,32 @@ export default class CollapsibleFilter extends React.Component {
3636
composeClasses += ' ' + this.props.className;
3737
}
3838

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

4141
const opened = (
4242
<>
43-
<span className="o-expandable_cue o-expandable_cue-close">
44-
<span className="u-visually-hidden-on-mobile">Hide</span>
43+
<span className="o-expandable_cue-close" role="img" aria-label="Hide">
4544
{getIcon('minus-round')}
4645
</span>
4746
</>
4847
);
4948
const closed = (
5049
<>
51-
<span className="o-expandable_cue o-expandable_cue-open">
52-
<span className="u-visually-hidden-on-mobile">Show</span>
50+
<span className="o-expandable_cue-open" role="img" aria-label="Show">
5351
{getIcon('plus-round')}
5452
</span>
5553
</>
5654
);
5755
return (
5856
<section className={composeClasses}>
5957
<button
60-
className={
61-
'o-expandable_header o-expandable_target o-expandable_target' +
62-
buttonClasses
63-
}
58+
className="o-expandable_header"
59+
aria-expanded={buttonAttr}
6460
aria-label={`Hide ${this.props.title} filter`}
6561
onClick={this._toggleChildDisplay}
6662
>
67-
<h3 className="h4 o-expandable_header-left o-expandable_label">
68-
{this.props.title}
69-
</h3>
70-
<span className="o-expandable_header-right o-expandable_link">
63+
<h3 className="h4 o-expandable_label">{this.props.title}</h3>
64+
<span className="o-expandable_cues">
7165
{this.state.hasChildren ? opened : closed}
7266
</span>
7367
</button>

‎src/components/Filters/CollapsibleFilter.less

-12
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,6 @@
66
padding-right: @gutter-minimum;
77
}
88

9-
.o-expandable_cue {
10-
&.a-btn__link {
11-
border: 0;
12-
13-
font-size: @size-v;
14-
}
15-
16-
.cf-icon-svg {
17-
padding-left: @gutter-minimum;
18-
}
19-
}
20-
219
p {
2210
color: @gray;
2311
font-size: 16px;

‎src/components/Filters/__tests__/CollapsibleFilter.spec.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe('component:CollapsibleFilter', () => {
1717

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

2222
expect(target.state('hasChildren')).toEqual(true);
2323
theButton.simulate('click');

‎src/components/Filters/__tests__/__snapshots__/CollapsibleFilter.spec.js.snap

+7-9
Original file line numberDiff line numberDiff line change
@@ -5,26 +5,24 @@ exports[`component:CollapsibleFilter initial state renders without crashing 1`]
55
className="o-expandable"
66
>
77
<button
8+
aria-expanded="true"
89
aria-label="Hide foo filter"
9-
className="o-expandable_header o-expandable_target o-expandable_target__expanded"
10+
className="o-expandable_header"
1011
onClick={[Function]}
1112
>
1213
<h3
13-
className="h4 o-expandable_header-left o-expandable_label"
14+
className="h4 o-expandable_label"
1415
>
1516
foo
1617
</h3>
1718
<span
18-
className="o-expandable_header-right o-expandable_link"
19+
className="o-expandable_cues"
1920
>
2021
<span
21-
className="o-expandable_cue o-expandable_cue-close"
22+
aria-label="Hide"
23+
className="o-expandable_cue-close"
24+
role="img"
2225
>
23-
<span
24-
className="u-visually-hidden-on-mobile"
25-
>
26-
Hide
27-
</span>
2826
<svg>
2927
minus-round.svg
3028
</svg>

0 commit comments

Comments
 (0)