@instructure/ui-link 10.16.1-snapshot-0 → 10.16.1

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 (13) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Link/__new-tests__/Link.test.js +165 -120
  3. package/es/Link/index.js +13 -10
  4. package/lib/Link/__new-tests__/Link.test.js +198 -153
  5. package/lib/Link/index.js +12 -10
  6. package/package.json +16 -16
  7. package/src/Link/__new-tests__/Link.test.tsx +5 -5
  8. package/src/Link/index.tsx +3 -4
  9. package/tsconfig.build.tsbuildinfo +1 -1
  10. package/types/Link/__new-tests__/Link.test.d.ts.map +1 -1
  11. package/types/Link/index.d.ts +4 -6
  12. package/types/Link/index.d.ts.map +1 -1
  13. package/tsconfig.json +0 -4
package/lib/Link/__new-tests__/Link.test.js CHANGED
@@ -1,13 +1,13 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
3
+ var _react = require("react");
5
4
  var _userEvent = require("@testing-library/user-event");
6
5
  var _react2 = require("@testing-library/react");
7
6
  require("@testing-library/jest-dom");
8
7
  var _vitest = require("vitest");
9
8
  var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
10
9
  var _index = require("../index");
10
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
11
11
  var _Link, _Link2, _Link3, _svg, _TruncateText2, _svg2, _Link4, _Link5, _Link6, _Link7, _Link8, _Link9, _Link10, _Link11, _Link12, _Link13, _Link14, _Link15, _Link16, _Link17;
12
12
  /*
13
13
  * The MIT License (MIT)
@@ -32,10 +32,12 @@ var _Link, _Link2, _Link3, _svg, _TruncateText2, _svg2, _Link4, _Link5, _Link6,
32
32
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
33
33
  * SOFTWARE.
34
34
  */
35
- //<unknown> is needed for React 17 compatibility
36
- class TruncateText extends _react.default.Component {
35
+ /** jsxImportSource @emotion/react */
36
+ class TruncateText extends _react.Component {
37
37
  render() {
38
- return /*#__PURE__*/_react.default.createElement("span", null, this.props.children);
38
+ return (0, _jsxRuntime.jsx)("span", {
39
+ children: this.props.children
40
+ });
39
41
  }
40
42
  }
41
43
  TruncateText.displayName = "TruncateText";
@@ -49,316 +51,359 @@ describe('<Link />', () => {
49
51
  consoleErrorMock.mockRestore();
50
52
  });
51
53
  it('should render the children as text content', async () => {
52
- (0, _react2.render)(_Link || (_Link = /*#__PURE__*/_react.default.createElement(_index.Link, {
53
- href: "https://instructure.design"
54
- }, "Hello World")));
54
+ (0, _react2.render)(_Link || (_Link = (0, _jsxRuntime.jsx)(_index.Link, {
55
+ href: "https://instructure.design",
56
+ children: "Hello World"
57
+ })));
55
58
  const link = _react2.screen.getByRole('link');
56
- expect(link).toHaveTextContent('Hello World');
59
+ (0, _vitest.expect)(link).toHaveTextContent('Hello World');
57
60
  });
58
61
  it('should render a button', async () => {
59
62
  const onClick = _vitest.vi.fn();
60
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
61
- onClick: onClick
62
- }, "Hello World"));
63
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
64
+ onClick: onClick,
65
+ children: "Hello World"
66
+ }));
63
67
  const button = _react2.screen.getByRole('button');
64
- expect(button).toHaveAttribute('type', 'button');
68
+ (0, _vitest.expect)(button).toHaveAttribute('type', 'button');
65
69
  });
66
70
  it('should meet a11y standards', async () => {
67
- const _render = (0, _react2.render)(_Link2 || (_Link2 = /*#__PURE__*/_react.default.createElement(_index.Link, {
68
- href: "https://instructure.design"
69
- }, "Hello World"))),
71
+ const _render = (0, _react2.render)(_Link2 || (_Link2 = (0, _jsxRuntime.jsx)(_index.Link, {
72
+ href: "https://instructure.design",
73
+ children: "Hello World"
74
+ }))),
70
75
  container = _render.container;
71
76
  const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
72
- expect(axeCheck).toBe(true);
77
+ (0, _vitest.expect)(axeCheck).toBe(true);
73
78
  });
74
79
  it('should focus with the focus helper', async () => {
75
80
  let linkRef;
76
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
81
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
77
82
  href: "https://instructure.design",
78
83
  elementRef: el => {
79
84
  linkRef = el;
80
- }
81
- }, "Hello World"));
85
+ },
86
+ children: "Hello World"
87
+ }));
82
88
  const linkElement = _react2.screen.getByRole('link');
83
89
  linkRef.focus();
84
- expect(linkElement).toHaveFocus();
90
+ (0, _vitest.expect)(linkElement).toHaveFocus();
85
91
  });
86
92
  it('should display block when TruncateText is a child', async () => {
87
- (0, _react2.render)(_Link3 || (_Link3 = /*#__PURE__*/_react.default.createElement(_index.Link, {
88
- href: "example.html"
89
- }, /*#__PURE__*/_react.default.createElement(TruncateText, null, "Hello World"))));
93
+ (0, _react2.render)(_Link3 || (_Link3 = (0, _jsxRuntime.jsx)(_index.Link, {
94
+ href: "example.html",
95
+ children: (0, _jsxRuntime.jsx)(TruncateText, {
96
+ children: "Hello World"
97
+ })
98
+ })));
90
99
  const link = _react2.screen.getByRole('link');
91
- expect(link).toHaveStyle('display: block');
100
+ (0, _vitest.expect)(link).toHaveStyle('display: block');
92
101
  });
93
102
  it('should display inline-flex when TruncateText is a child and there is an icon', async () => {
94
- const customIcon = _svg || (_svg = /*#__PURE__*/_react.default.createElement("svg", {
103
+ const customIcon = _svg || (_svg = (0, _jsxRuntime.jsxs)("svg", {
95
104
  height: "24",
96
- width: "24"
97
- }, /*#__PURE__*/_react.default.createElement("title", null, "Custom icon"), /*#__PURE__*/_react.default.createElement("circle", {
98
- cx: "50",
99
- cy: "50",
100
- r: "40"
101
- })));
102
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
105
+ width: "24",
106
+ children: [(0, _jsxRuntime.jsx)("title", {
107
+ children: "Custom icon"
108
+ }), (0, _jsxRuntime.jsx)("circle", {
109
+ cx: "50",
110
+ cy: "50",
111
+ r: "40"
112
+ })]
113
+ }));
114
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
103
115
  href: "example.html",
104
- renderIcon: customIcon
105
- }, _TruncateText2 || (_TruncateText2 = /*#__PURE__*/_react.default.createElement(TruncateText, null, "Hello World"))));
116
+ renderIcon: customIcon,
117
+ children: _TruncateText2 || (_TruncateText2 = (0, _jsxRuntime.jsx)(TruncateText, {
118
+ children: "Hello World"
119
+ }))
120
+ }));
106
121
  const link = _react2.screen.getByRole('link');
107
- expect(link).toHaveStyle('display: inline-flex');
122
+ (0, _vitest.expect)(link).toHaveStyle('display: inline-flex');
108
123
  });
109
124
  it('should call the onClick prop when clicked', async () => {
110
125
  const onClick = _vitest.vi.fn();
111
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
112
- onClick: onClick
113
- }, "Hello World"));
126
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
127
+ onClick: onClick,
128
+ children: "Hello World"
129
+ }));
114
130
  const link = _react2.screen.getByRole('button');
115
131
  _userEvent.userEvent.click(link);
116
132
  await (0, _react2.waitFor)(() => {
117
- expect(onClick).toHaveBeenCalledTimes(1);
133
+ (0, _vitest.expect)(onClick).toHaveBeenCalledTimes(1);
118
134
  });
119
135
  });
120
136
  it('should call the onMouseEnter prop when mouseEntered', async () => {
121
137
  const onMouseEnter = _vitest.vi.fn();
122
- const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
123
- onMouseEnter: onMouseEnter
124
- }, "Hello World")),
138
+ const _render2 = (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
139
+ onMouseEnter: onMouseEnter,
140
+ children: "Hello World"
141
+ })),
125
142
  container = _render2.container;
126
- const link = container.querySelector('span[class$="-link"]');
143
+ const link = container.querySelector('span[class*="-link"]');
127
144
  _userEvent.userEvent.hover(link);
128
145
  await (0, _react2.waitFor)(() => {
129
- expect(onMouseEnter).toHaveBeenCalledTimes(1);
146
+ (0, _vitest.expect)(onMouseEnter).toHaveBeenCalledTimes(1);
130
147
  });
131
148
  });
132
149
  it('should pass down an icon via the icon property', async () => {
133
- const customIcon = _svg2 || (_svg2 = /*#__PURE__*/_react.default.createElement("svg", {
150
+ const customIcon = _svg2 || (_svg2 = (0, _jsxRuntime.jsxs)("svg", {
134
151
  "data-testid": "svg",
135
152
  height: "100",
136
- width: "100"
137
- }, /*#__PURE__*/_react.default.createElement("title", null, "Custom icon"), /*#__PURE__*/_react.default.createElement("circle", {
138
- cx: "50",
139
- cy: "50",
140
- r: "40"
141
- })));
142
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
153
+ width: "100",
154
+ children: [(0, _jsxRuntime.jsx)("title", {
155
+ children: "Custom icon"
156
+ }), (0, _jsxRuntime.jsx)("circle", {
157
+ cx: "50",
158
+ cy: "50",
159
+ r: "40"
160
+ })]
161
+ }));
162
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
143
163
  href: "https://instructure.design",
144
- renderIcon: customIcon
145
- }, "Hello World"));
164
+ renderIcon: customIcon,
165
+ children: "Hello World"
166
+ }));
146
167
  const title = _react2.screen.getByText('Custom icon');
147
168
  const icon = _react2.screen.getByTestId('svg');
148
- expect(title).toBeInTheDocument();
149
- expect(icon).toBeInTheDocument();
169
+ (0, _vitest.expect)(title).toBeInTheDocument();
170
+ (0, _vitest.expect)(icon).toBeInTheDocument();
150
171
  });
151
172
  describe('when interaction is disabled', () => {
152
173
  it('should apply aria-disabled when interaction is disabled', async () => {
153
- (0, _react2.render)(_Link4 || (_Link4 = /*#__PURE__*/_react.default.createElement(_index.Link, {
174
+ (0, _react2.render)(_Link4 || (_Link4 = (0, _jsxRuntime.jsx)(_index.Link, {
154
175
  href: "example.html",
155
- interaction: "disabled"
156
- }, "Hello World")));
176
+ interaction: "disabled",
177
+ children: "Hello World"
178
+ })));
157
179
  const link = _react2.screen.getByRole('link');
158
- expect(link).toHaveAttribute('aria-disabled');
180
+ (0, _vitest.expect)(link).toHaveAttribute('aria-disabled');
159
181
  });
160
182
  });
161
183
  it('should apply aria-disabled when `disabled` is set', async () => {
162
- (0, _react2.render)(_Link5 || (_Link5 = /*#__PURE__*/_react.default.createElement(_index.Link, {
184
+ (0, _react2.render)(_Link5 || (_Link5 = (0, _jsxRuntime.jsx)(_index.Link, {
163
185
  href: "example.html",
164
- disabled: true
165
- }, "Hello World")));
186
+ disabled: true,
187
+ children: "Hello World"
188
+ })));
166
189
  const link = _react2.screen.getByRole('link');
167
- expect(link).toHaveAttribute('aria-disabled');
190
+ (0, _vitest.expect)(link).toHaveAttribute('aria-disabled');
168
191
  });
169
192
  it('should not be clickable when interaction is disabled', async () => {
170
193
  const onClick = _vitest.vi.fn();
171
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
194
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
172
195
  onClick: onClick,
173
- interaction: "disabled"
174
- }, "Hello World"));
196
+ interaction: "disabled",
197
+ children: "Hello World"
198
+ }));
175
199
  const button = _react2.screen.getByRole('button');
176
- expect(button).toHaveAttribute('aria-disabled', 'true');
200
+ (0, _vitest.expect)(button).toHaveAttribute('aria-disabled', 'true');
177
201
  });
178
202
  it('should not be clickable when `disabled` is set', async () => {
179
203
  const onClick = _vitest.vi.fn();
180
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
204
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
181
205
  onClick: onClick,
182
- disabled: true
183
- }, "Hello World"));
206
+ disabled: true,
207
+ children: "Hello World"
208
+ }));
184
209
  const button = _react2.screen.getByRole('button');
185
- expect(button).toHaveAttribute('aria-disabled', 'true');
210
+ (0, _vitest.expect)(button).toHaveAttribute('aria-disabled', 'true');
186
211
  });
187
212
  });
188
213
  describe('with `as` prop', () => {
189
214
  describe('with `onClick`', () => {
190
215
  it('should render designated tag', async () => {
191
216
  const onClick = _vitest.vi.fn();
192
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
217
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
193
218
  as: "a",
194
- onClick: onClick
195
- }, "Hello World"));
219
+ onClick: onClick,
220
+ children: "Hello World"
221
+ }));
196
222
  const link = _react2.screen.getByText('Hello World');
197
- expect(link.tagName).toBe('A');
223
+ (0, _vitest.expect)(link.tagName).toBe('A');
198
224
  });
199
225
  it('should set role="button"', async () => {
200
226
  const onClick = _vitest.vi.fn();
201
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
227
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
202
228
  as: "span",
203
- onClick: onClick
204
- }, "Hello World"));
229
+ onClick: onClick,
230
+ children: "Hello World"
231
+ }));
205
232
  const spanLink = _react2.screen.getByRole('button');
206
- expect(spanLink).toHaveAttribute('role', 'button');
233
+ (0, _vitest.expect)(spanLink).toHaveAttribute('role', 'button');
207
234
  });
208
235
  });
209
236
  describe('should not set type="button", unless it is actually a button', () => {
210
237
  it('should not set type="button" on other things like <span>s', async () => {
211
238
  const onClick = _vitest.vi.fn();
212
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
239
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
213
240
  as: "span",
214
- onClick: onClick
215
- }, "Hello World"));
241
+ onClick: onClick,
242
+ children: "Hello World"
243
+ }));
216
244
  const link = _react2.screen.getByText('Hello World');
217
- expect(link).not.toHaveAttribute('type', 'button');
245
+ (0, _vitest.expect)(link).not.toHaveAttribute('type', 'button');
218
246
  });
219
247
  it('should set type="button" on <button>s', async () => {
220
248
  const onClick = _vitest.vi.fn();
221
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
249
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
222
250
  as: "button",
223
- onClick: onClick
224
- }, "Hello World"));
251
+ onClick: onClick,
252
+ children: "Hello World"
253
+ }));
225
254
  const button = _react2.screen.getByText('Hello World');
226
- expect(button).toHaveAttribute('type', 'button');
255
+ (0, _vitest.expect)(button).toHaveAttribute('type', 'button');
227
256
  });
228
257
  it('should set tabIndex="0"', async () => {
229
258
  const onClick = _vitest.vi.fn();
230
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
259
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
231
260
  as: "span",
232
- onClick: onClick
233
- }, "Hello World"));
261
+ onClick: onClick,
262
+ children: "Hello World"
263
+ }));
234
264
  const spanLink = _react2.screen.getByText('Hello World');
235
- expect(spanLink).toHaveAttribute('tabIndex', '0');
265
+ (0, _vitest.expect)(spanLink).toHaveAttribute('tabIndex', '0');
236
266
  });
237
267
  });
238
268
  describe('without `onClick`', () => {
239
269
  it('should render designated tag', async () => {
240
- (0, _react2.render)(_Link6 || (_Link6 = /*#__PURE__*/_react.default.createElement(_index.Link, {
241
- as: "a"
242
- }, "Hello World")));
270
+ (0, _react2.render)(_Link6 || (_Link6 = (0, _jsxRuntime.jsx)(_index.Link, {
271
+ as: "a",
272
+ children: "Hello World"
273
+ })));
243
274
  const link = _react2.screen.getByText('Hello World');
244
- expect(link.tagName).toBe('A');
275
+ (0, _vitest.expect)(link.tagName).toBe('A');
245
276
  });
246
277
  it('should not set role="button"', async () => {
247
- (0, _react2.render)(_Link7 || (_Link7 = /*#__PURE__*/_react.default.createElement(_index.Link, {
248
- as: "span"
249
- }, "Hello World")));
278
+ (0, _react2.render)(_Link7 || (_Link7 = (0, _jsxRuntime.jsx)(_index.Link, {
279
+ as: "span",
280
+ children: "Hello World"
281
+ })));
250
282
  const link = _react2.screen.getByText('Hello World');
251
- expect(link).not.toHaveAttribute('role', 'button');
283
+ (0, _vitest.expect)(link).not.toHaveAttribute('role', 'button');
252
284
  });
253
285
  it('should not set type="button"', async () => {
254
- (0, _react2.render)(_Link8 || (_Link8 = /*#__PURE__*/_react.default.createElement(_index.Link, {
255
- as: "span"
256
- }, "Hello World")));
286
+ (0, _react2.render)(_Link8 || (_Link8 = (0, _jsxRuntime.jsx)(_index.Link, {
287
+ as: "span",
288
+ children: "Hello World"
289
+ })));
257
290
  const link = _react2.screen.getByText('Hello World');
258
- expect(link).not.toHaveAttribute('type', 'button');
291
+ (0, _vitest.expect)(link).not.toHaveAttribute('type', 'button');
259
292
  });
260
293
  it('should not set tabIndex="0"', async () => {
261
- (0, _react2.render)(_Link9 || (_Link9 = /*#__PURE__*/_react.default.createElement(_index.Link, {
262
- as: "span"
263
- }, "Hello World")));
294
+ (0, _react2.render)(_Link9 || (_Link9 = (0, _jsxRuntime.jsx)(_index.Link, {
295
+ as: "span",
296
+ children: "Hello World"
297
+ })));
264
298
  const link = _react2.screen.getByText('Hello World');
265
- expect(link).not.toHaveAttribute('tabIndex', '0');
299
+ (0, _vitest.expect)(link).not.toHaveAttribute('tabIndex', '0');
266
300
  });
267
301
  });
268
302
  describe('when an href is provided', () => {
269
303
  it('should render an anchor element', async () => {
270
- (0, _react2.render)(_Link10 || (_Link10 = /*#__PURE__*/_react.default.createElement(_index.Link, {
271
- href: "example.html"
272
- }, "Hello World")));
304
+ (0, _react2.render)(_Link10 || (_Link10 = (0, _jsxRuntime.jsx)(_index.Link, {
305
+ href: "example.html",
306
+ children: "Hello World"
307
+ })));
273
308
  const link = _react2.screen.getByRole('link');
274
- expect(link.tagName).toBe('A');
309
+ (0, _vitest.expect)(link.tagName).toBe('A');
275
310
  });
276
311
  it('should set the href attribute', async () => {
277
- (0, _react2.render)(_Link11 || (_Link11 = /*#__PURE__*/_react.default.createElement(_index.Link, {
278
- href: "example.html"
279
- }, "Hello World")));
312
+ (0, _react2.render)(_Link11 || (_Link11 = (0, _jsxRuntime.jsx)(_index.Link, {
313
+ href: "example.html",
314
+ children: "Hello World"
315
+ })));
280
316
  const link = _react2.screen.getByRole('link');
281
- expect(link).toHaveAttribute('href', 'example.html');
317
+ (0, _vitest.expect)(link).toHaveAttribute('href', 'example.html');
282
318
  });
283
319
  it('should not set role="button"', async () => {
284
- (0, _react2.render)(_Link12 || (_Link12 = /*#__PURE__*/_react.default.createElement(_index.Link, {
285
- href: "example.html"
286
- }, "Hello World")));
320
+ (0, _react2.render)(_Link12 || (_Link12 = (0, _jsxRuntime.jsx)(_index.Link, {
321
+ href: "example.html",
322
+ children: "Hello World"
323
+ })));
287
324
  const link = _react2.screen.getByRole('link');
288
- expect(link).not.toHaveAttribute('role', 'button');
325
+ (0, _vitest.expect)(link).not.toHaveAttribute('role', 'button');
289
326
  });
290
327
  it('should not set type="button"', async () => {
291
- (0, _react2.render)(_Link13 || (_Link13 = /*#__PURE__*/_react.default.createElement(_index.Link, {
292
- href: "example.html"
293
- }, "Hello World")));
328
+ (0, _react2.render)(_Link13 || (_Link13 = (0, _jsxRuntime.jsx)(_index.Link, {
329
+ href: "example.html",
330
+ children: "Hello World"
331
+ })));
294
332
  const link = _react2.screen.getByRole('link');
295
- expect(link).not.toHaveAttribute('type', 'button');
333
+ (0, _vitest.expect)(link).not.toHaveAttribute('type', 'button');
296
334
  });
297
335
  });
298
336
  describe('when a `role` is provided', () => {
299
337
  it('should set role', async () => {
300
- (0, _react2.render)(_Link14 || (_Link14 = /*#__PURE__*/_react.default.createElement(_index.Link, {
338
+ (0, _react2.render)(_Link14 || (_Link14 = (0, _jsxRuntime.jsx)(_index.Link, {
301
339
  href: "example.html",
302
- role: "button"
303
- }, "Hello World")));
340
+ role: "button",
341
+ children: "Hello World"
342
+ })));
304
343
  const link = _react2.screen.getByText('Hello World');
305
- expect(link).toHaveAttribute('role', 'button');
344
+ (0, _vitest.expect)(link).toHaveAttribute('role', 'button');
306
345
  });
307
346
  it('should not override button role when it is forced by default', async () => {
308
347
  const onClick = _vitest.vi.fn();
309
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
348
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
310
349
  role: "link",
311
350
  onClick: onClick,
312
- as: "a"
313
- }, "Hello World"));
351
+ as: "a",
352
+ children: "Hello World"
353
+ }));
314
354
  const link = _react2.screen.getByText('Hello World');
315
- expect(link).toHaveAttribute('role', 'button');
355
+ (0, _vitest.expect)(link).toHaveAttribute('role', 'button');
316
356
  });
317
357
  });
318
358
  describe('when a `forceButtonRole` is set to false', () => {
319
359
  it('should not force button role', async () => {
320
360
  const onClick = _vitest.vi.fn();
321
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
361
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
322
362
  onClick: onClick,
323
363
  as: "a",
324
- forceButtonRole: false
325
- }, "Hello World"));
364
+ forceButtonRole: false,
365
+ children: "Hello World"
366
+ }));
326
367
  const link = _react2.screen.getByText('Hello World');
327
- expect(link).not.toHaveAttribute('role');
368
+ (0, _vitest.expect)(link).not.toHaveAttribute('role');
328
369
  });
329
370
  it('should override button role with `role` prop', async () => {
330
371
  const onClick = _vitest.vi.fn();
331
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Link, {
372
+ (0, _react2.render)((0, _jsxRuntime.jsx)(_index.Link, {
332
373
  role: "link",
333
374
  onClick: onClick,
334
375
  as: "a",
335
- forceButtonRole: false
336
- }, "Hello World"));
376
+ forceButtonRole: false,
377
+ children: "Hello World"
378
+ }));
337
379
  const link = _react2.screen.getByText('Hello World');
338
- expect(link).toHaveAttribute('role', 'link');
380
+ (0, _vitest.expect)(link).toHaveAttribute('role', 'link');
339
381
  });
340
382
  });
341
383
  describe('when a `to` is provided', () => {
342
384
  it('should render an anchor element', async () => {
343
- (0, _react2.render)(_Link15 || (_Link15 = /*#__PURE__*/_react.default.createElement(_index.Link, {
344
- to: "/example"
345
- }, "Hello World")));
385
+ (0, _react2.render)(_Link15 || (_Link15 = (0, _jsxRuntime.jsx)(_index.Link, {
386
+ to: "/example",
387
+ children: "Hello World"
388
+ })));
346
389
  const link = _react2.screen.getByText('Hello World');
347
- expect(link.tagName).toBe('A');
390
+ (0, _vitest.expect)(link.tagName).toBe('A');
348
391
  });
349
392
  it('should set the to attribute', async () => {
350
- (0, _react2.render)(_Link16 || (_Link16 = /*#__PURE__*/_react.default.createElement(_index.Link, {
351
- to: "/example"
352
- }, "Hello World")));
393
+ (0, _react2.render)(_Link16 || (_Link16 = (0, _jsxRuntime.jsx)(_index.Link, {
394
+ to: "/example",
395
+ children: "Hello World"
396
+ })));
353
397
  const link = _react2.screen.getByText('Hello World');
354
- expect(link).toHaveAttribute('to', '/example');
398
+ (0, _vitest.expect)(link).toHaveAttribute('to', '/example');
355
399
  });
356
400
  it('should not set role="button"', async () => {
357
- (0, _react2.render)(_Link17 || (_Link17 = /*#__PURE__*/_react.default.createElement(_index.Link, {
358
- to: "/example"
359
- }, "Hello World")));
401
+ (0, _react2.render)(_Link17 || (_Link17 = (0, _jsxRuntime.jsx)(_index.Link, {
402
+ to: "/example",
403
+ children: "Hello World"
404
+ })));
360
405
  const link = _react2.screen.getByText('Hello World');
361
- expect(link).not.toHaveAttribute('role', 'button');
406
+ (0, _vitest.expect)(link).not.toHaveAttribute('role', 'button');
362
407
  });
363
408
  });
364
409
  });
package/lib/Link/index.js CHANGED
@@ -1,13 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = exports.Link = void 0;
9
8
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
- var _react = _interopRequireWildcard(require("react"));
9
+ var _react = require("react");
11
10
  var _View = require("@instructure/ui-view/lib/View");
12
11
  var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
13
12
  var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
@@ -23,6 +22,7 @@ var _emotion = require("@instructure/emotion");
23
22
  var _styles = _interopRequireDefault(require("./styles"));
24
23
  var _theme = _interopRequireDefault(require("./theme"));
25
24
  var _props = require("./props");
25
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
26
26
  const _excluded = ["children", "onClick", "onMouseEnter", "color", "href", "margin", "renderIcon", "iconPlacement", "isWithinText"];
27
27
  var _dec, _dec2, _class, _Link;
28
28
  /*
@@ -48,7 +48,6 @@ var _dec, _dec2, _class, _Link;
48
48
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
49
49
  * SOFTWARE.
50
50
  */
51
- /** @jsx jsx */
52
51
  /**
53
52
  ---
54
53
  category: components
@@ -114,7 +113,7 @@ let Link = exports.Link = (_dec = (0, _emotion.withStyle)(_styles.default, _them
114
113
  }
115
114
  get containsTruncateText() {
116
115
  let truncateText = false;
117
- _react.default.Children.forEach(this.props.children, child => {
116
+ _react.Children.forEach(this.props.children, child => {
118
117
  if (child && (0, _matchComponentTypes.matchComponentTypes)(child, ['TruncateText'])) {
119
118
  truncateText = true;
120
119
  }
@@ -171,9 +170,10 @@ let Link = exports.Link = (_dec = (0, _emotion.withStyle)(_styles.default, _them
171
170
  (0, _console.logWarn)(
172
171
  // if display prop is used, warn about icon or TruncateText
173
172
  this.props.display === void 0, '[Link] Using the display property with an icon may cause layout issues.');
174
- return (0, _emotion.jsx)("span", {
175
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
176
- }, (0, _callRenderProp.callRenderProp)(this.props.renderIcon));
173
+ return (0, _jsxRuntime.jsx)("span", {
174
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon,
175
+ children: (0, _callRenderProp.callRenderProp)(this.props.renderIcon)
176
+ });
177
177
  }
178
178
  render() {
179
179
  var _this$props$styles2;
@@ -192,7 +192,8 @@ let Link = exports.Link = (_dec = (0, _emotion.withStyle)(_styles.default, _them
192
192
  const isDisabled = interaction === 'disabled';
193
193
  const type = this.element === 'button' || this.element === 'input' ? 'button' : void 0;
194
194
  const tabIndex = this.role === 'button' && !isDisabled ? 0 : void 0;
195
- return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
195
+ return (0, _jsxRuntime.jsxs)(_View.View, {
196
+ ...(0, _passthroughProps.passthroughProps)(props),
196
197
  elementRef: this.handleElementRef,
197
198
  as: this.element,
198
199
  display: this.display,
@@ -206,8 +207,9 @@ let Link = exports.Link = (_dec = (0, _emotion.withStyle)(_styles.default, _them
206
207
  role: this.role,
207
208
  type: type,
208
209
  tabIndex: tabIndex,
209
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link
210
- }), renderIcon && iconPlacement === 'start' ? this.renderIcon() : null, children, renderIcon && iconPlacement === 'end' ? this.renderIcon() : null);
210
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link,
211
+ children: [renderIcon && iconPlacement === 'start' ? this.renderIcon() : null, children, renderIcon && iconPlacement === 'end' ? this.renderIcon() : null]
212
+ });
211
213
  }
212
214
  }, _Link.displayName = "Link", _Link.componentId = 'Link', _Link.propTypes = _props.propTypes, _Link.allowedProps = _props.allowedProps, _Link.defaultProps = {
213
215
  // Leave interaction default undefined so that `disabled` can also be supplied