@transferwise/components 0.0.0-experimental-0b6dfe0 → 0.0.0-experimental-c279974

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.
Files changed (9) hide show
  1. package/build/index.esm.js +18 -12
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +18 -12
  4. package/build/index.js.map +1 -1
  5. package/build/types/alert/Alert.d.ts.map +1 -1
  6. package/package.json +3 -3
  7. package/src/alert/Alert.js +15 -9
  8. package/src/alert/Alert.spec.js +22 -13
  9. package/src/alert/withArrow/withArrow.spec.js +4 -4
package/build/types/alert/Alert.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.js"],"names":[],"mappings":";AA8BA,gEAyFC"}
1
+ {"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/alert/Alert.js"],"names":[],"mappings":";AA8BA,gEA+FC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-0b6dfe0",
3
+ "version": "0.0.0-experimental-c279974",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -78,12 +78,12 @@
78
78
  "rollup": "^3.28.1",
79
79
  "storybook": "^7.4.5",
80
80
  "@transferwise/less-config": "3.0.6",
81
- "@transferwise/neptune-css": "0.0.0-experimental-0b6dfe0",
81
+ "@transferwise/neptune-css": "0.0.0-experimental-c279974",
82
82
  "@wise/components-theming": "0.8.4"
83
83
  },
84
84
  "peerDependencies": {
85
85
  "@transferwise/icons": "^3.7.0",
86
- "@transferwise/neptune-css": "0.0.0-experimental-0b6dfe0",
86
+ "@transferwise/neptune-css": "0.0.0-experimental-c279974",
87
87
  "@wise/art": "^2.7.0",
88
88
  "@wise/components-theming": "^0.8.4",
89
89
  "currency-flags": "^4.0.2",
package/src/alert/Alert.js CHANGED
@@ -62,6 +62,10 @@ const Alert = (props) => {
62
62
  }
63
63
  }
64
64
 
65
+ function calculateRole() {
66
+ return Sentiment.NEGATIVE === mappedType ? 'alert' : 'status';
67
+ }
68
+
65
69
  const handleTouchStart = () => setShouldFire(true);
66
70
  const handleTouchMove = () => setShouldFire(false);
67
71
  const handleTouchEnd = (event) => {
@@ -79,8 +83,8 @@ const Alert = (props) => {
79
83
  };
80
84
  return (
81
85
  <div
82
- role="alert"
83
86
  className={classNames('alert d-flex', `alert-${mappedType}`, className)}
87
+ data-testid="alert"
84
88
  onTouchStart={handleTouchStart}
85
89
  onTouchEnd={handleTouchEnd}
86
90
  onTouchMove={handleTouchMove}
@@ -91,14 +95,16 @@ const Alert = (props) => {
91
95
  >
92
96
  {generateIcon()}
93
97
  <div className="alert__message">
94
- {title && (
95
- <Title className="m-b-1" type={Typography.TITLE_BODY}>
96
- {title}
97
- </Title>
98
- )}
99
- <Body as="span" className="d-block" type={Typography.BODY_LARGE}>
100
- {children || <InlineMarkdown>{message}</InlineMarkdown>}
101
- </Body>
98
+ <div role={calculateRole()}>
99
+ {title && (
100
+ <Title className="m-b-1" type={Typography.TITLE_BODY}>
101
+ {title}
102
+ </Title>
103
+ )}
104
+ <Body as="span" className="d-block" type={Typography.BODY_LARGE}>
105
+ {children || <InlineMarkdown>{message}</InlineMarkdown>}
106
+ </Body>
107
+ </div>
102
108
  {action && (
103
109
  <Link
104
110
  href={action.href}
package/src/alert/Alert.spec.js CHANGED
@@ -61,7 +61,7 @@ describe('Alert', () => {
61
61
  <Alert message={message} />
62
62
  </ThemeProvider>,
63
63
  ));
64
- component = screen.getByRole('alert');
64
+ component = screen.getByTestId('alert');
65
65
  });
66
66
 
67
67
  it('the message is rendered', () => {
@@ -85,7 +85,7 @@ describe('Alert', () => {
85
85
  describe('deprecated props', () => {
86
86
  it('renders arrows but logs a warning', () => {
87
87
  render(<Alert arrow={AlertArrowPosition.BOTTOM} message={message} />);
88
- component = screen.getByRole('alert');
88
+ component = screen.getByTestId('alert');
89
89
 
90
90
  expect(component).toHaveClass('arrow');
91
91
  expect(component).toHaveClass('arrow-bottom');
@@ -125,7 +125,7 @@ describe('Alert', () => {
125
125
  it('maps type SUCCESS to type POSITIVE and logs a warning', () => {
126
126
  render(<Alert type={Sentiment.SUCCESS} message={message} />);
127
127
 
128
- const success = screen.getByRole('alert');
128
+ const success = screen.getByTestId('alert');
129
129
 
130
130
  expect(success).toHaveClass(classForType(Sentiment.POSITIVE));
131
131
  expect(screen.getByTestId('check-circle-icon')).toBeInTheDocument();
@@ -137,7 +137,7 @@ describe('Alert', () => {
137
137
  it('maps type INFO to type NEUTRAL and logs a warning', () => {
138
138
  render(<Alert type={Sentiment.INFO} message={message} />);
139
139
 
140
- const info = screen.getByRole('alert');
140
+ const info = screen.getByTestId('alert');
141
141
 
142
142
  expect(info).toHaveClass(classForType(Sentiment.NEUTRAL));
143
143
  expect(screen.getByTestId('info-circle-icon')).toBeInTheDocument();
@@ -150,7 +150,7 @@ describe('Alert', () => {
150
150
  it('maps type ERROR to type NEGATIVE and logs a warning', () => {
151
151
  render(<Alert type={Sentiment.ERROR} message={message} />);
152
152
 
153
- const error = screen.getByRole('alert');
153
+ const error = screen.getByTestId('alert');
154
154
 
155
155
  expect(error).toHaveClass(classForType(Sentiment.NEGATIVE));
156
156
  expect(screen.getByTestId('cross-circle-icon')).toBeInTheDocument();
@@ -197,14 +197,14 @@ describe('Alert', () => {
197
197
  it('converts message to markdown', () => {
198
198
  render(<Alert message={input} />);
199
199
 
200
- expect(screen.getByRole('alert')).toContainHTML(output);
200
+ expect(screen.getByTestId('alert')).toContainHTML(output);
201
201
  });
202
202
 
203
203
  it('does not convert children to markdown', () => {
204
204
  render(<Alert>{input}</Alert>);
205
205
 
206
206
  expect(screen.getByText(input)).toBeInTheDocument();
207
- expect(screen.getByRole('alert')).not.toContainHTML(output);
207
+ expect(screen.getByTestId('alert')).not.toContainHTML(output);
208
208
  });
209
209
  });
210
210
 
@@ -212,7 +212,7 @@ describe('Alert', () => {
212
212
  it('applies provided classes', () => {
213
213
  render(<Alert className="cats" message={message} />);
214
214
 
215
- expect(screen.getByRole('alert')).toHaveClass('cats');
215
+ expect(screen.getByTestId('alert')).toHaveClass('cats');
216
216
  });
217
217
  });
218
218
 
@@ -221,7 +221,7 @@ describe('Alert', () => {
221
221
  const icon = <HappyEmoji />;
222
222
 
223
223
  render(<Alert icon={icon} message={message} />);
224
- component = screen.getByRole('alert');
224
+ component = screen.getByTestId('alert');
225
225
  expect(screen.getByTestId('happy-emoji-icon')).toBeInTheDocument();
226
226
  });
227
227
  });
@@ -247,7 +247,7 @@ describe('Alert', () => {
247
247
  describe('types', () => {
248
248
  const getComponentWithType = (type) => {
249
249
  render(<Alert type={type} message={message} />);
250
- return screen.getByRole('alert');
250
+ return screen.getByTestId('alert');
251
251
  };
252
252
 
253
253
  it('renders neutral', () => {
@@ -277,6 +277,15 @@ describe('Alert', () => {
277
277
  expect(component).toHaveClass(classForType(Sentiment.WARNING));
278
278
  expect(screen.getByTestId('warning-icon')).toBeInTheDocument();
279
279
  });
280
+
281
+ it('renders error alerts with aria-role alert', () => {
282
+ component = getComponentWithType(Sentiment.NEGATIVE);
283
+ expect(screen.getByRole('alert')).toBeInTheDocument();
284
+ });
285
+ it('renders neutral alerts with aria-role status', () => {
286
+ component = getComponentWithType(Sentiment.NEUTRAL);
287
+ expect(screen.getByRole('status')).toBeInTheDocument();
288
+ });
280
289
  });
281
290
 
282
291
  describe('on touch devices', () => {
@@ -304,7 +313,7 @@ describe('Alert', () => {
304
313
 
305
314
  render(<Alert action={action} message={message} onDismiss={jest.fn()} />);
306
315
 
307
- alert = screen.getByRole('alert');
316
+ alert = screen.getByTestId('alert');
308
317
  closeButton = screen.getByLabelText('Close');
309
318
 
310
319
  jest.spyOn(React, 'useRef').mockReturnValue({
@@ -344,7 +353,7 @@ describe('Alert', () => {
344
353
 
345
354
  render(<Alert action={action} message={message} onDismiss={jest.fn()} />);
346
355
 
347
- alert = screen.getByRole('alert');
356
+ alert = screen.getByTestId('alert');
348
357
  closeButton = screen.getByLabelText('Close');
349
358
 
350
359
  jest.spyOn(React, 'useRef').mockReturnValue({
@@ -368,7 +377,7 @@ describe('Alert', () => {
368
377
  beforeEach(() => {
369
378
  render(<Alert message={message} onDismiss={jest.fn()} />);
370
379
 
371
- alert = screen.getByRole('alert');
380
+ alert = screen.getByTestId('alert');
372
381
  closeButton = screen.getByLabelText('Close');
373
382
 
374
383
  jest.spyOn(React, 'useRef').mockReturnValue({
package/src/alert/withArrow/withArrow.spec.js CHANGED
@@ -12,7 +12,7 @@ describe('withArrow', () => {
12
12
  const ArrowLessAlert = withArrow(Alert);
13
13
 
14
14
  render(<ArrowLessAlert message={message} />);
15
- const component = screen.getByRole('alert');
15
+ const component = screen.getByTestId('alert');
16
16
 
17
17
  expect(component).not.toHaveClass('arrow');
18
18
  });
@@ -21,7 +21,7 @@ describe('withArrow', () => {
21
21
  const AlertTopArrow = withArrow(Alert, ArrowPosition.TOP_LEFT);
22
22
 
23
23
  render(<AlertTopArrow message={message} arrow={ArrowPosition.BOTTOM_LEFT} />);
24
- const component = screen.getByRole('alert');
24
+ const component = screen.getByTestId('alert');
25
25
  expect(component).toHaveClass('arrow');
26
26
  expect(component).not.toHaveClass('arrow-bottom');
27
27
  });
@@ -33,7 +33,7 @@ describe('withArrow', () => {
33
33
  it(`returns an bottom arrowed alert if you pass a bottom arrow`, () => {
34
34
  const BottomArrowAlert = getPointyAlert(ArrowPosition.BOTTOM);
35
35
  render(<BottomArrowAlert message={message} />);
36
- const component = screen.getByRole('alert');
36
+ const component = screen.getByTestId('alert');
37
37
 
38
38
  expect(component).toHaveClass('arrow');
39
39
  expect(component).toHaveClass('arrow-bottom');
@@ -42,7 +42,7 @@ describe('withArrow', () => {
42
42
  it(`returns an top-right arrowed alert if you pass a top right arrow`, () => {
43
43
  const BottomArrowAlert = getPointyAlert(ArrowPosition.TOP_RIGHT);
44
44
  render(<BottomArrowAlert message={message} />);
45
- const component = screen.getByRole('alert');
45
+ const component = screen.getByTestId('alert');
46
46
 
47
47
  expect(component).toHaveClass('arrow');
48
48
  expect(component).toHaveClass('arrow-right');