@transferwise/components 45.25.0 → 45.25.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.esm.js +34 -19
- package/build/index.esm.js.map +1 -1
- package/build/index.js +36 -21
- package/build/index.js.map +1 -1
- package/build/main.css +1 -1
- package/build/styles/header/Header.css +1 -1
- package/build/styles/main.css +1 -1
- package/build/types/dateInput/DateInput.d.ts +2 -0
- package/build/types/dateInput/DateInput.d.ts.map +1 -1
- package/build/types/select/Select.d.ts.map +1 -1
- package/build/types/test-utils/window-mock.d.ts +1 -0
- package/build/types/test-utils/window-mock.d.ts.map +1 -1
- package/package.json +2 -2
- package/src/body/Body.story.tsx +14 -2
- package/src/dateInput/DateInput.js +14 -8
- package/src/dateInput/DateInput.spec.js +12 -136
- package/src/dateInput/DateInput.story.tsx +49 -2
- package/src/header/Header.css +1 -1
- package/src/header/Header.less +0 -5
- package/src/inputs/SelectInput.spec.tsx +3 -27
- package/src/main.css +1 -1
- package/src/phoneNumberInput/PhoneNumberInput.spec.js +4 -20
- package/src/select/Select.js +3 -0
- package/src/test-utils/window-mock.ts +11 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.js"],"names":[],"mappings":";AAeA
|
|
1
|
+
{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../../src/dateInput/DateInput.js"],"names":[],"mappings":";AAeA;;;;;;;;;;;;;;;;;;;gCA0QC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;;;;;;;;;;;;;;;;;;;;;gCAkeC"}
|
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/select/Select.js"],"names":[],"mappings":"AA8EA;;GAEG;AACH;;;;;;;;;;;;;;;;;;;;;;gCAkeC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,SAkB7B"}
|
|
1
|
+
{"version":3,"file":"window-mock.d.ts","sourceRoot":"","sources":["../../../src/test-utils/window-mock.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,SAkB7B;AAED,wBAAgB,kBAAkB,SASjC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "45.25.
|
|
3
|
+
"version": "45.25.2",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"rollup": "^3.28.1",
|
|
79
79
|
"storybook": "^7.4.5",
|
|
80
80
|
"@transferwise/less-config": "3.0.6",
|
|
81
|
-
"@transferwise/neptune-css": "14.7.
|
|
81
|
+
"@transferwise/neptune-css": "14.7.1",
|
|
82
82
|
"@wise/components-theming": "0.8.4"
|
|
83
83
|
},
|
|
84
84
|
"peerDependencies": {
|
package/src/body/Body.story.tsx
CHANGED
|
@@ -30,6 +30,9 @@ export const Basic = () => {
|
|
|
30
30
|
Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
|
|
31
31
|
internationalen <b>Bericht der Welt auf</b>.
|
|
32
32
|
</Body>
|
|
33
|
+
<Body as="p" type={Typography.BODY_LARGE_BOLD}>
|
|
34
|
+
↑ ↓ {'<-'} {'->'}
|
|
35
|
+
</Body>
|
|
33
36
|
</div>
|
|
34
37
|
<div>
|
|
35
38
|
<Title type={Typography.TITLE_SUBSECTION}>Body Default</Title>
|
|
@@ -49,6 +52,9 @@ export const Basic = () => {
|
|
|
49
52
|
Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
|
|
50
53
|
internationalen <b>Bericht der Welt auf</b>.
|
|
51
54
|
</Body>
|
|
55
|
+
<Body as="p" type={Typography.BODY_DEFAULT}>
|
|
56
|
+
↑ ↓ {'<-'} {'->'}
|
|
57
|
+
</Body>
|
|
52
58
|
</div>
|
|
53
59
|
<div>
|
|
54
60
|
<Title type={Typography.TITLE_SUBSECTION}>Body Default Bold</Title>
|
|
@@ -68,6 +74,9 @@ export const Basic = () => {
|
|
|
68
74
|
Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
|
|
69
75
|
internationalen <b>Bericht der Welt auf</b>.
|
|
70
76
|
</Body>
|
|
77
|
+
<Body as="p" type={Typography.BODY_DEFAULT_BOLD}>
|
|
78
|
+
↑ ↓ {'<-'} {'->'}
|
|
79
|
+
</Body>
|
|
71
80
|
</div>
|
|
72
81
|
<div>
|
|
73
82
|
<Title type={Typography.TITLE_SUBSECTION}>Body Large</Title>
|
|
@@ -87,6 +96,9 @@ export const Basic = () => {
|
|
|
87
96
|
Wir bauen den internationalen <strong>Bericht der Welt auf</strong>. Wir bauen den
|
|
88
97
|
internationalen <b>Bericht der Welt auf</b>.
|
|
89
98
|
</Body>
|
|
99
|
+
<Body as="p" type={Typography.BODY_LARGE}>
|
|
100
|
+
↑ ↓ {'<-'} {'->'}
|
|
101
|
+
</Body>
|
|
90
102
|
</div>
|
|
91
103
|
<Title type={Typography.TITLE_SUBSECTION}>
|
|
92
104
|
Copy Example without <code>{'<Body />'}</code> component
|
|
@@ -94,12 +106,12 @@ export const Basic = () => {
|
|
|
94
106
|
<p>
|
|
95
107
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo saepe repellendus
|
|
96
108
|
accusantium eveniet temporibus perspiciatis iure ut, pariatur nihil totam iusto, delectus,
|
|
97
|
-
modi possimus soluta. Et iusto odio autem debitis!
|
|
109
|
+
modi possimus soluta. Et iusto odio autem debitis! ↑ ↓ {'<-'} {'->'}
|
|
98
110
|
</p>
|
|
99
111
|
<Title type={Typography.TITLE_SUBSECTION}>Copy Example without any HTML tag</Title>
|
|
100
112
|
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo saepe repellendus
|
|
101
113
|
accusantium eveniet temporibus perspiciatis iure ut, pariatur nihil totam iusto, delectus,
|
|
102
|
-
modi possimus soluta. Et iusto odio autem debitis!
|
|
114
|
+
modi possimus soluta. Et iusto odio autem debitis! ↑ ↓ {'<-'} {'->'}
|
|
103
115
|
</>
|
|
104
116
|
);
|
|
105
117
|
};
|
|
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
|
|
|
3
3
|
import { useState } from 'react';
|
|
4
4
|
import { useIntl } from 'react-intl';
|
|
5
5
|
|
|
6
|
-
import {
|
|
6
|
+
import { Input, SelectInput, SelectInputOptionContent } from '..';
|
|
7
7
|
import { Size, DateMode, MonthFormat } from '../common';
|
|
8
8
|
import { getMonthNames, isDateValid, isMonthAndYearFormat } from '../common/dateUtils';
|
|
9
9
|
|
|
@@ -14,6 +14,8 @@ const MonthBeforeDay = new Set(['en-US', 'ja-JP']);
|
|
|
14
14
|
const INITIAL_DEFAULT_STATE = { year: null, month: null, day: null };
|
|
15
15
|
|
|
16
16
|
const DateInput = ({
|
|
17
|
+
'aria-labelledby': ariaLabelledBy,
|
|
18
|
+
'aria-label': ariaLabel,
|
|
17
19
|
disabled,
|
|
18
20
|
size,
|
|
19
21
|
value,
|
|
@@ -85,19 +87,19 @@ const DateInput = ({
|
|
|
85
87
|
};
|
|
86
88
|
|
|
87
89
|
const getSelectElement = () => {
|
|
88
|
-
const
|
|
90
|
+
const monthOptions = getMonthsOptions();
|
|
89
91
|
|
|
90
92
|
return (
|
|
91
|
-
<label>
|
|
93
|
+
<label className="d-flex flex-column">
|
|
92
94
|
<span className="sr-only">{monthLabel}</span>
|
|
93
|
-
<
|
|
94
|
-
id={id ? `${id}-select` : undefined}
|
|
95
|
+
<SelectInput
|
|
95
96
|
name="month"
|
|
96
97
|
disabled={disabled}
|
|
97
98
|
placeholder={placeholders.month}
|
|
98
|
-
|
|
99
|
+
items={monthOptions}
|
|
99
100
|
size={size}
|
|
100
|
-
|
|
101
|
+
value={monthOptions.find((item) => item.value.value === month)?.value}
|
|
102
|
+
renderValue={({ label }) => <SelectInputOptionContent title={label} />}
|
|
101
103
|
onChange={(selectedValue) => handleMonthChange(selectedValue)}
|
|
102
104
|
{...selectProps}
|
|
103
105
|
/>
|
|
@@ -110,7 +112,7 @@ const DateInput = ({
|
|
|
110
112
|
const months = getMonthNames(locale, monthFormat);
|
|
111
113
|
|
|
112
114
|
months.forEach((label, index) => {
|
|
113
|
-
options.push({
|
|
115
|
+
options.push({ type: 'option', value: { label, value: index } });
|
|
114
116
|
});
|
|
115
117
|
return options;
|
|
116
118
|
};
|
|
@@ -224,6 +226,8 @@ const DateInput = ({
|
|
|
224
226
|
<div
|
|
225
227
|
className="tw-date"
|
|
226
228
|
id={id}
|
|
229
|
+
aria-labelledby={ariaLabelledBy}
|
|
230
|
+
aria-label={ariaLabel}
|
|
227
231
|
onFocus={(event) =>
|
|
228
232
|
shouldPropagateOnFocus(event) ? onFocus && onFocus() : event.stopPropagation()
|
|
229
233
|
}
|
|
@@ -300,6 +304,8 @@ function shouldPropagateOnBlur({ target, relatedTarget }) {
|
|
|
300
304
|
}
|
|
301
305
|
|
|
302
306
|
DateInput.propTypes = {
|
|
307
|
+
'aria-label': PropTypes.string,
|
|
308
|
+
'aria-labelledby': PropTypes.string,
|
|
303
309
|
disabled: PropTypes.bool,
|
|
304
310
|
size: PropTypes.oneOf(['sm', 'md', 'lg']),
|
|
305
311
|
value: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
|
|
@@ -2,7 +2,7 @@ import { shallow, mount } from 'enzyme';
|
|
|
2
2
|
import { useIntl } from 'react-intl';
|
|
3
3
|
|
|
4
4
|
import { DateInput, Input } from '..';
|
|
5
|
-
import {
|
|
5
|
+
import { mockMatchMedia, mockResizeObserver } from '../test-utils';
|
|
6
6
|
|
|
7
7
|
const MONTHS_FR = [
|
|
8
8
|
'janvier',
|
|
@@ -41,10 +41,10 @@ const LOCALES = {
|
|
|
41
41
|
|
|
42
42
|
const DEFAULT_LOCALE = 'en-GB';
|
|
43
43
|
|
|
44
|
-
const FEBRUARY_OPTION = { value:
|
|
44
|
+
const FEBRUARY_OPTION = { value: MONTHS_EN[1] };
|
|
45
45
|
|
|
46
46
|
const DAY_SELECTOR = 'ForwardRef(Input)[name="day"]';
|
|
47
|
-
const MONTH_SELECTOR = '
|
|
47
|
+
const MONTH_SELECTOR = 'SelectInput';
|
|
48
48
|
const YEAR_SELECTOR = 'ForwardRef(Input)[name="year"]';
|
|
49
49
|
|
|
50
50
|
jest.mock('./DateInput.messages', () => ({
|
|
@@ -78,6 +78,8 @@ describe('Date Input Component', () => {
|
|
|
78
78
|
const props = { onChange: jest.fn() };
|
|
79
79
|
|
|
80
80
|
beforeEach(() => {
|
|
81
|
+
mockMatchMedia();
|
|
82
|
+
mockResizeObserver();
|
|
81
83
|
useIntl.mockReturnValue({
|
|
82
84
|
locale: DEFAULT_LOCALE,
|
|
83
85
|
formatMessage: (message) => message.defaultMessage,
|
|
@@ -99,7 +101,7 @@ describe('Date Input Component', () => {
|
|
|
99
101
|
});
|
|
100
102
|
|
|
101
103
|
it('sets month field to 0', () => {
|
|
102
|
-
expect(selectMonth.props().
|
|
104
|
+
expect(selectMonth.props().value).toBeUndefined();
|
|
103
105
|
});
|
|
104
106
|
|
|
105
107
|
it('sets year field to empty', () => {
|
|
@@ -131,7 +133,7 @@ describe('Date Input Component', () => {
|
|
|
131
133
|
inputYear = component.find(YEAR_SELECTOR);
|
|
132
134
|
|
|
133
135
|
expect(inputDay.prop('value')).toBe(1);
|
|
134
|
-
expect(selectMonth.prop('
|
|
136
|
+
expect(selectMonth.prop('value').label).toBe(FEBRUARY_OPTION.value);
|
|
135
137
|
expect(inputYear.prop('value')).toBe(1971);
|
|
136
138
|
});
|
|
137
139
|
});
|
|
@@ -145,7 +147,7 @@ describe('Date Input Component', () => {
|
|
|
145
147
|
inputYear = component.find(YEAR_SELECTOR);
|
|
146
148
|
|
|
147
149
|
expect(inputDay.prop('value')).toBe(22);
|
|
148
|
-
expect(selectMonth.prop('
|
|
150
|
+
expect(selectMonth.prop('value').label).toBe(MONTHS_EN[7]);
|
|
149
151
|
expect(inputYear.prop('value')).toBe(1990);
|
|
150
152
|
});
|
|
151
153
|
});
|
|
@@ -159,7 +161,7 @@ describe('Date Input Component', () => {
|
|
|
159
161
|
inputYear = component.find(YEAR_SELECTOR);
|
|
160
162
|
|
|
161
163
|
expect(inputDay.prop('value')).toBe('');
|
|
162
|
-
expect(selectMonth.prop('
|
|
164
|
+
expect(selectMonth.prop('value').label).toBe(MONTHS_EN[7]);
|
|
163
165
|
expect(inputYear.prop('value')).toBe(1990);
|
|
164
166
|
});
|
|
165
167
|
});
|
|
@@ -173,7 +175,7 @@ describe('Date Input Component', () => {
|
|
|
173
175
|
inputYear = component.find(YEAR_SELECTOR);
|
|
174
176
|
|
|
175
177
|
expect(inputDay.prop('value')).toBe(28);
|
|
176
|
-
expect(selectMonth.prop('
|
|
178
|
+
expect(selectMonth.prop('value').label).toBe(FEBRUARY_OPTION.value);
|
|
177
179
|
expect(inputYear.prop('value')).toBe(1990);
|
|
178
180
|
});
|
|
179
181
|
});
|
|
@@ -216,7 +218,7 @@ describe('Date Input Component', () => {
|
|
|
216
218
|
component = shallow(<DateInput {...props} />);
|
|
217
219
|
selectMonth = component.find(MONTH_SELECTOR);
|
|
218
220
|
|
|
219
|
-
expect(selectMonth.props().
|
|
221
|
+
expect(selectMonth.props().items[0].value.label).toStrictEqual(MONTHS_FR[0]);
|
|
220
222
|
});
|
|
221
223
|
|
|
222
224
|
it('shows day before month if locale not US', () => {
|
|
@@ -240,26 +242,6 @@ describe('Date Input Component', () => {
|
|
|
240
242
|
});
|
|
241
243
|
});
|
|
242
244
|
|
|
243
|
-
describe('when id is provided', () => {
|
|
244
|
-
it('renders Select component with id', () => {
|
|
245
|
-
component = mount(<DateInput id="mock-id" {...props} />);
|
|
246
|
-
|
|
247
|
-
const select = component.find('Select');
|
|
248
|
-
|
|
249
|
-
expect(select.prop('id')).toBe('mock-id-select');
|
|
250
|
-
});
|
|
251
|
-
});
|
|
252
|
-
|
|
253
|
-
describe('when id is not provided', () => {
|
|
254
|
-
it('renders Select component with no id', () => {
|
|
255
|
-
component = mount(<DateInput {...props} />);
|
|
256
|
-
|
|
257
|
-
const select = component.find('Select');
|
|
258
|
-
|
|
259
|
-
expect(select.prop('id')).toBeUndefined();
|
|
260
|
-
});
|
|
261
|
-
});
|
|
262
|
-
|
|
263
245
|
describe('when initialised', () => {
|
|
264
246
|
describe('without an initial value', () => {
|
|
265
247
|
it(`doesn't call the onChange callback`, () => {
|
|
@@ -334,19 +316,6 @@ describe('Date Input Component', () => {
|
|
|
334
316
|
|
|
335
317
|
describe('when user interacts', () => {
|
|
336
318
|
describe('with an empty date input', () => {
|
|
337
|
-
it('calls onChange with null if day is not entered', () => {
|
|
338
|
-
component = mount(<DateInput {...props} />);
|
|
339
|
-
|
|
340
|
-
// Select February
|
|
341
|
-
simulateSelectChange(2);
|
|
342
|
-
|
|
343
|
-
inputYear = component.find(YEAR_SELECTOR);
|
|
344
|
-
|
|
345
|
-
inputYear.simulate('change', { target: { value: '1990' } });
|
|
346
|
-
|
|
347
|
-
expect(props.onChange).toHaveBeenLastCalledWith(null);
|
|
348
|
-
});
|
|
349
|
-
|
|
350
319
|
it('calls onChange with null if month is not selected', () => {
|
|
351
320
|
component = mount(<DateInput {...props} />);
|
|
352
321
|
|
|
@@ -360,36 +329,6 @@ describe('Date Input Component', () => {
|
|
|
360
329
|
|
|
361
330
|
expect(props.onChange).toHaveBeenLastCalledWith(null);
|
|
362
331
|
});
|
|
363
|
-
|
|
364
|
-
it('calls onChange with null if year is not entered', () => {
|
|
365
|
-
component = mount(<DateInput {...props} />);
|
|
366
|
-
|
|
367
|
-
inputDay = component.find(DAY_SELECTOR);
|
|
368
|
-
|
|
369
|
-
inputDay.simulate('change', { target: { value: '12' } });
|
|
370
|
-
|
|
371
|
-
// Select February
|
|
372
|
-
simulateSelectChange(2);
|
|
373
|
-
|
|
374
|
-
expect(props.onChange).toHaveBeenLastCalledWith(null);
|
|
375
|
-
});
|
|
376
|
-
|
|
377
|
-
it('returns a valid date if all three fields are entered', () => {
|
|
378
|
-
component = mount(<DateInput {...props} />);
|
|
379
|
-
|
|
380
|
-
inputDay = component.find(DAY_SELECTOR);
|
|
381
|
-
|
|
382
|
-
inputDay.simulate('change', { target: { value: '12' } });
|
|
383
|
-
|
|
384
|
-
// Select February
|
|
385
|
-
simulateSelectChange(2);
|
|
386
|
-
|
|
387
|
-
inputYear = component.find(YEAR_SELECTOR);
|
|
388
|
-
|
|
389
|
-
inputYear.simulate('change', { target: { value: '1990' } });
|
|
390
|
-
|
|
391
|
-
expect(props.onChange).toHaveBeenLastCalledWith('1990-02-12');
|
|
392
|
-
});
|
|
393
332
|
});
|
|
394
333
|
|
|
395
334
|
describe('with day input', () => {
|
|
@@ -434,26 +373,6 @@ describe('Date Input Component', () => {
|
|
|
434
373
|
expect(props.onChange).toHaveBeenCalledWith('1990-01-01');
|
|
435
374
|
});
|
|
436
375
|
});
|
|
437
|
-
|
|
438
|
-
describe('with month select', () => {
|
|
439
|
-
it('returns correct value for correct input', () => {
|
|
440
|
-
component = mount(<DateInput {...props} value="2001-01-01" />);
|
|
441
|
-
|
|
442
|
-
// Selects March
|
|
443
|
-
simulateSelectChange(3);
|
|
444
|
-
|
|
445
|
-
expect(props.onChange).toHaveBeenCalledWith('2001-03-01');
|
|
446
|
-
});
|
|
447
|
-
|
|
448
|
-
it('returns null when de-selecting month', () => {
|
|
449
|
-
component = mount(<DateInput {...props} value="2001-01-01" />);
|
|
450
|
-
|
|
451
|
-
// De-selects Month
|
|
452
|
-
simulateSelectChange(0);
|
|
453
|
-
|
|
454
|
-
expect(props.onChange).toHaveBeenLastCalledWith(null);
|
|
455
|
-
});
|
|
456
|
-
});
|
|
457
376
|
});
|
|
458
377
|
|
|
459
378
|
describe('with day input and year input', () => {
|
|
@@ -515,38 +434,6 @@ describe('Date Input Component', () => {
|
|
|
515
434
|
expect(component.find(DAY_SELECTOR).prop('value')).toBe(28);
|
|
516
435
|
});
|
|
517
436
|
|
|
518
|
-
it('corrects days too high in February', () => {
|
|
519
|
-
component = mount(<DateInput {...props} />);
|
|
520
|
-
|
|
521
|
-
inputDay = component.find(DAY_SELECTOR);
|
|
522
|
-
inputYear = component.find(YEAR_SELECTOR);
|
|
523
|
-
|
|
524
|
-
inputDay.simulate('change', { target: { value: 29 } });
|
|
525
|
-
// Selects February
|
|
526
|
-
simulateSelectChange(2);
|
|
527
|
-
inputYear.simulate('change', { target: { value: 2001 } });
|
|
528
|
-
|
|
529
|
-
expect(component.find(DAY_SELECTOR).prop('value')).toBe(28);
|
|
530
|
-
});
|
|
531
|
-
|
|
532
|
-
it("doesn't correct days in leap years February", () => {
|
|
533
|
-
component = mount(<DateInput {...props} value="2000-03-29" />);
|
|
534
|
-
|
|
535
|
-
// Selects February
|
|
536
|
-
simulateSelectChange(2);
|
|
537
|
-
|
|
538
|
-
expect(component.find(DAY_SELECTOR).prop('value')).toBe(29);
|
|
539
|
-
});
|
|
540
|
-
|
|
541
|
-
it('corrects days too high for selected months', () => {
|
|
542
|
-
component = mount(<DateInput {...props} value="2001-01-31" />);
|
|
543
|
-
|
|
544
|
-
// Selects April
|
|
545
|
-
simulateSelectChange(4);
|
|
546
|
-
|
|
547
|
-
expect(component.find(DAY_SELECTOR).prop('value')).toBe(30);
|
|
548
|
-
});
|
|
549
|
-
|
|
550
437
|
it('lowers days if value entered too high', () => {
|
|
551
438
|
const comp = shallow(<DateInput {...props} />);
|
|
552
439
|
|
|
@@ -582,12 +469,6 @@ describe('Date Input Component', () => {
|
|
|
582
469
|
expect(component.exists(MONTH_SELECTOR)).toBe(true);
|
|
583
470
|
expect(component.exists(DAY_SELECTOR)).toBe(false);
|
|
584
471
|
});
|
|
585
|
-
|
|
586
|
-
it('should produce MM-YYYY date string', () => {
|
|
587
|
-
// Selects March
|
|
588
|
-
simulateSelectChange(3);
|
|
589
|
-
expect(props.onChange).toHaveBeenCalledWith('2001-03');
|
|
590
|
-
});
|
|
591
472
|
});
|
|
592
473
|
|
|
593
474
|
describe('when selectProps is provided', () => {
|
|
@@ -605,16 +486,11 @@ describe('Date Input Component', () => {
|
|
|
605
486
|
});
|
|
606
487
|
|
|
607
488
|
it('renders Select component with expected props', () => {
|
|
608
|
-
const select = component.find(
|
|
489
|
+
const select = component.find(MONTH_SELECTOR);
|
|
609
490
|
|
|
610
491
|
expect(select.prop('buttonProps')).toStrictEqual({
|
|
611
492
|
'aria-label': 'mock-button-label',
|
|
612
493
|
});
|
|
613
494
|
});
|
|
614
495
|
});
|
|
615
|
-
|
|
616
|
-
const simulateSelectChange = (n) => {
|
|
617
|
-
component.find('button.np-dropdown-toggle').simulate('click', fakeEvent());
|
|
618
|
-
component.find('li').at(n).simulate('click', fakeEvent());
|
|
619
|
-
};
|
|
620
496
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Meta, StoryObj } from '@storybook/react';
|
|
2
2
|
|
|
3
|
-
import { DateInput, InlineAlert } from '..';
|
|
4
|
-
import { lorem10, storyConfig } from '../test-utils';
|
|
3
|
+
import { DateInput, Info, InlineAlert, Title, Typography } from '..';
|
|
4
|
+
import { lorem10, storyConfig, userEvent, within } from '../test-utils';
|
|
5
5
|
|
|
6
6
|
export default {
|
|
7
7
|
component: DateInput,
|
|
@@ -25,6 +25,53 @@ type Story = StoryObj<typeof DateInput>;
|
|
|
25
25
|
|
|
26
26
|
export const Basic: Story = {};
|
|
27
27
|
|
|
28
|
+
Basic.play = ({ canvasElement }) => {
|
|
29
|
+
const canvas = within(canvasElement);
|
|
30
|
+
userEvent.click(canvas.getByRole('button'));
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export const WithLabel: Story = {
|
|
34
|
+
render: (args) => {
|
|
35
|
+
const id1 = 'date-input-group-label-1';
|
|
36
|
+
const label = 'Date of Birth';
|
|
37
|
+
return (
|
|
38
|
+
<>
|
|
39
|
+
<Title type={Typography.TITLE_SUBSECTION}>
|
|
40
|
+
label (as <code>div</code> element) is linked with <code>DateInput</code> via{' '}
|
|
41
|
+
<code>aria-labelledby</code> prop
|
|
42
|
+
</Title>
|
|
43
|
+
<div className="control-label" id={id1}>
|
|
44
|
+
Date of Delivery
|
|
45
|
+
</div>
|
|
46
|
+
<DateInput {...args} aria-labelledby={id1} />
|
|
47
|
+
|
|
48
|
+
<br />
|
|
49
|
+
|
|
50
|
+
<Title type={Typography.TITLE_SUBSECTION}>
|
|
51
|
+
label (as <code>div</code> element) is detached but <code>DateInput</code> has same label
|
|
52
|
+
via <code>aria-label</code> attribute
|
|
53
|
+
</Title>
|
|
54
|
+
<div className="control-label">
|
|
55
|
+
{label}{' '}
|
|
56
|
+
<Info aria-label="Fast transfer hint" title="Fast transfer hint" content={lorem10} />
|
|
57
|
+
</div>
|
|
58
|
+
<DateInput {...args} aria-label={label} />
|
|
59
|
+
|
|
60
|
+
<br />
|
|
61
|
+
|
|
62
|
+
<Title type={Typography.TITLE_SUBSECTION}>
|
|
63
|
+
<code>DateInput</code> wrapped in <code>fieldset</code> + using <code>legend</code> as
|
|
64
|
+
label (rare use case)
|
|
65
|
+
</Title>
|
|
66
|
+
<fieldset>
|
|
67
|
+
<legend className="control-label">Expiry Date</legend>
|
|
68
|
+
<DateInput {...args} />
|
|
69
|
+
</fieldset>
|
|
70
|
+
</>
|
|
71
|
+
);
|
|
72
|
+
},
|
|
73
|
+
};
|
|
74
|
+
|
|
28
75
|
export const BasicMobile: Story = storyConfig(Basic, { variants: ['mobile'] });
|
|
29
76
|
|
|
30
77
|
export const InputError: Story = {
|
package/src/header/Header.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.np-header{align-items:flex-end;border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);display:flex;justify-content:space-between;margin-bottom:8px;margin-bottom:var(--size-8);max-width:100%;padding:8px 0;padding:var(--size-8) 0}.np-header__title{color:#5d7079;color:var(--color-content-secondary)}.np-theme-personal .np-header{-moz-column-gap:24px;column-gap:24px;-moz-column-gap:var(--size-24);column-gap:var(--size-24)}.np-theme-personal .np-header__button{margin-inline:-16px;margin-inline:calc(var(--size-16)*-1);margin-bottom:-4px;margin-bottom:calc(var(--size-4)*-1)}
|
|
1
|
+
.np-header{align-items:flex-end;border-bottom:1px solid #0000001a;border-bottom:1px solid var(--color-border-neutral);display:flex;justify-content:space-between;margin-bottom:8px;margin-bottom:var(--size-8);max-width:100%;padding:8px 0;padding:var(--size-8) 0}.np-header__title{color:#5d7079;color:var(--color-content-secondary)}.np-theme-personal .np-header{-moz-column-gap:24px;column-gap:24px;-moz-column-gap:var(--size-24);column-gap:var(--size-24)}.np-theme-personal .np-header__button{margin-inline:-16px;margin-inline:calc(var(--size-16)*-1);margin-bottom:-4px;margin-bottom:calc(var(--size-4)*-1)}
|
package/src/header/Header.less
CHANGED
|
@@ -1,36 +1,12 @@
|
|
|
1
1
|
import { act, screen, within } from '@testing-library/react';
|
|
2
2
|
import userEvent, { specialChars } from '@testing-library/user-event';
|
|
3
3
|
|
|
4
|
-
import { render } from '../test-utils';
|
|
4
|
+
import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
|
|
5
5
|
|
|
6
6
|
import { SelectInput } from './SelectInput';
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
value: jest.fn((query: string) => {
|
|
11
|
-
const matches = /^\(min-width: ([0-9]+)px\)$/.exec(query);
|
|
12
|
-
const minWidth = matches != null ? Number(matches[1]) : undefined;
|
|
13
|
-
return {
|
|
14
|
-
matches: minWidth != null ? window.innerWidth >= minWidth : false,
|
|
15
|
-
media: query,
|
|
16
|
-
onchange: null,
|
|
17
|
-
addListener: jest.fn(), // deprecated
|
|
18
|
-
removeListener: jest.fn(), // deprecated
|
|
19
|
-
addEventListener: jest.fn(),
|
|
20
|
-
removeEventListener: jest.fn(),
|
|
21
|
-
dispatchEvent: jest.fn(),
|
|
22
|
-
};
|
|
23
|
-
}),
|
|
24
|
-
});
|
|
25
|
-
|
|
26
|
-
Object.defineProperty(window, 'ResizeObserver', {
|
|
27
|
-
writable: true,
|
|
28
|
-
value: jest.fn(() => ({
|
|
29
|
-
observe: jest.fn(),
|
|
30
|
-
unobserve: jest.fn(),
|
|
31
|
-
disconnect: jest.fn(),
|
|
32
|
-
})),
|
|
33
|
-
});
|
|
8
|
+
mockMatchMedia();
|
|
9
|
+
mockResizeObserver();
|
|
34
10
|
|
|
35
11
|
describe('SelectInput', () => {
|
|
36
12
|
it('renders placeholder', () => {
|