@instructure/ui-billboard 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 (15) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Billboard/__new-tests__/Billboard.test.js +23 -18
  3. package/es/Billboard/index.js +36 -28
  4. package/lib/Billboard/__new-tests__/Billboard.test.js +35 -30
  5. package/lib/Billboard/index.js +35 -27
  6. package/package.json +13 -13
  7. package/src/Billboard/__new-tests__/Billboard.test.tsx +2 -2
  8. package/src/Billboard/index.tsx +1 -2
  9. package/src/Billboard/props.ts +1 -1
  10. package/tsconfig.build.tsbuildinfo +1 -1
  11. package/types/Billboard/__new-tests__/Billboard.test.d.ts.map +1 -1
  12. package/types/Billboard/index.d.ts +3 -5
  13. package/types/Billboard/index.d.ts.map +1 -1
  14. package/types/Billboard/props.d.ts +1 -1
  15. package/types/Billboard/props.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
6
+ ## [10.16.1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1) (2025-04-22)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-billboard
9
9
 
package/es/Billboard/__new-tests__/Billboard.test.js CHANGED
@@ -23,7 +23,6 @@ var _IconUserLine, _Billboard, _Billboard2, _Billboard3, _Billboard4, _span, _sp
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { fireEvent, render, screen } from '@testing-library/react';
28
27
  import { vi } from 'vitest';
29
28
  import userEvent from '@testing-library/user-event';
@@ -31,10 +30,11 @@ import '@testing-library/jest-dom';
31
30
  import { Billboard } from '../index';
32
31
  import { IconUserLine } from '@instructure/ui-icons';
33
32
  import { runAxeCheck } from '@instructure/ui-axe-check';
33
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
34
34
  const TEST_HEADING = 'test-heading';
35
35
  const TEST_MESSAGE = 'test-message';
36
36
  const TEST_LINK = 'http://instructure-test.com';
37
- const TEST_HERO = () => _IconUserLine || (_IconUserLine = /*#__PURE__*/React.createElement(IconUserLine, {
37
+ const TEST_HERO = () => _IconUserLine || (_IconUserLine = _jsx(IconUserLine, {
38
38
  size: 'medium'
39
39
  }));
40
40
  describe('<Billboard />', () => {
@@ -50,12 +50,12 @@ describe('<Billboard />', () => {
50
50
  consoleErrorMock.mockRestore();
51
51
  });
52
52
  it('should render', () => {
53
- const _render = render(_Billboard || (_Billboard = /*#__PURE__*/React.createElement(Billboard, null))),
53
+ const _render = render(_Billboard || (_Billboard = _jsx(Billboard, {}))),
54
54
  container = _render.container;
55
55
  expect(container.firstChild).toBeInTheDocument();
56
56
  });
57
57
  it('should be accessible', async () => {
58
- const _render2 = render(_Billboard2 || (_Billboard2 = /*#__PURE__*/React.createElement(Billboard, {
58
+ const _render2 = render(_Billboard2 || (_Billboard2 = _jsx(Billboard, {
59
59
  heading: TEST_HEADING,
60
60
  message: TEST_MESSAGE,
61
61
  hero: TEST_HERO
@@ -65,7 +65,7 @@ describe('<Billboard />', () => {
65
65
  expect(axeCheck).toBe(true);
66
66
  });
67
67
  it('should render a heading with the correct tag', () => {
68
- render(_Billboard3 || (_Billboard3 = /*#__PURE__*/React.createElement(Billboard, {
68
+ render(_Billboard3 || (_Billboard3 = _jsx(Billboard, {
69
69
  heading: TEST_HEADING,
70
70
  headingAs: "h2"
71
71
  })));
@@ -74,7 +74,7 @@ describe('<Billboard />', () => {
74
74
  expect(heading.tagName).toBe('H2');
75
75
  });
76
76
  it('renders as a link if it has an href prop', () => {
77
- render(_Billboard4 || (_Billboard4 = /*#__PURE__*/React.createElement(Billboard, {
77
+ render(_Billboard4 || (_Billboard4 = _jsx(Billboard, {
78
78
  href: TEST_LINK
79
79
  })));
80
80
  const link = screen.getByRole('link');
@@ -83,7 +83,7 @@ describe('<Billboard />', () => {
83
83
  });
84
84
  it('renders as a button and responds to onClick event', () => {
85
85
  const onClick = vi.fn();
86
- render(/*#__PURE__*/React.createElement(Billboard, {
86
+ render(_jsx(Billboard, {
87
87
  onClick: onClick
88
88
  }));
89
89
  const button = screen.getByRole('button');
@@ -92,8 +92,10 @@ describe('<Billboard />', () => {
92
92
  });
93
93
  describe('when rendering message', () => {
94
94
  it('should render message when passed a node', async () => {
95
- const messageNode = _span || (_span = /*#__PURE__*/React.createElement("span", null, TEST_MESSAGE));
96
- render(/*#__PURE__*/React.createElement(Billboard, {
95
+ const messageNode = _span || (_span = _jsx("span", {
96
+ children: TEST_MESSAGE
97
+ }));
98
+ render(_jsx(Billboard, {
97
99
  message: messageNode
98
100
  }));
99
101
  const messageElement = screen.getByText(TEST_MESSAGE);
@@ -101,8 +103,10 @@ describe('<Billboard />', () => {
101
103
  expect(messageElement.tagName).toBe('SPAN');
102
104
  });
103
105
  it('should render message passed a function', () => {
104
- const messageNode = _span2 || (_span2 = /*#__PURE__*/React.createElement("span", null, TEST_MESSAGE));
105
- render(/*#__PURE__*/React.createElement(Billboard, {
106
+ const messageNode = _span2 || (_span2 = _jsx("span", {
107
+ children: TEST_MESSAGE
108
+ }));
109
+ render(_jsx(Billboard, {
106
110
  message: () => messageNode
107
111
  }));
108
112
  const messageElement = screen.getByText(TEST_MESSAGE);
@@ -112,7 +116,7 @@ describe('<Billboard />', () => {
112
116
  });
113
117
  describe('when disabled', () => {
114
118
  it('should apply aria-disabled to link', () => {
115
- render(_Billboard5 || (_Billboard5 = /*#__PURE__*/React.createElement(Billboard, {
119
+ render(_Billboard5 || (_Billboard5 = _jsx(Billboard, {
116
120
  href: TEST_LINK,
117
121
  disabled: true
118
122
  })));
@@ -120,7 +124,7 @@ describe('<Billboard />', () => {
120
124
  expect(link).toHaveAttribute('aria-disabled', 'true');
121
125
  });
122
126
  it('should not be clickable', () => {
123
- render(/*#__PURE__*/React.createElement(Billboard, {
127
+ render(_jsx(Billboard, {
124
128
  onClick: vi.fn(),
125
129
  disabled: true
126
130
  }));
@@ -130,7 +134,7 @@ describe('<Billboard />', () => {
130
134
  });
131
135
  describe('when readOnly', () => {
132
136
  it('should apply aria-disabled', () => {
133
- render(_Billboard6 || (_Billboard6 = /*#__PURE__*/React.createElement(Billboard, {
137
+ render(_Billboard6 || (_Billboard6 = _jsx(Billboard, {
134
138
  href: TEST_LINK,
135
139
  readOnly: true
136
140
  })));
@@ -139,7 +143,7 @@ describe('<Billboard />', () => {
139
143
  });
140
144
  it('should not be clickable', () => {
141
145
  const onClick = vi.fn();
142
- render(/*#__PURE__*/React.createElement(Billboard, {
146
+ render(_jsx(Billboard, {
143
147
  onClick: onClick,
144
148
  readOnly: true
145
149
  }));
@@ -151,7 +155,7 @@ describe('<Billboard />', () => {
151
155
  describe('when passing down props to View', () => {
152
156
  it('should support an elementRef prop', () => {
153
157
  const elementRef = vi.fn();
154
- render(/*#__PURE__*/React.createElement(Billboard, {
158
+ render(_jsx(Billboard, {
155
159
  elementRef: elementRef,
156
160
  href: TEST_LINK
157
161
  }));
@@ -159,13 +163,14 @@ describe('<Billboard />', () => {
159
163
  expect(elementRef).toHaveBeenCalledWith(link);
160
164
  });
161
165
  it('should support an `as` prop', () => {
162
- const _render3 = render(_Billboard7 || (_Billboard7 = /*#__PURE__*/React.createElement(Billboard, {
166
+ const _render3 = render(_Billboard7 || (_Billboard7 = _jsx(Billboard, {
163
167
  as: "em"
164
168
  }))),
165
169
  container = _render3.container;
166
170
  const billboardAsEm = container.querySelector('em');
167
171
  expect(billboardAsEm).toBeInTheDocument();
168
- expect(billboardAsEm === null || billboardAsEm === void 0 ? void 0 : billboardAsEm.className).toMatch(/view-billboard/);
172
+ expect(billboardAsEm === null || billboardAsEm === void 0 ? void 0 : billboardAsEm.className).toMatch(/billboard/);
173
+ expect(billboardAsEm === null || billboardAsEm === void 0 ? void 0 : billboardAsEm.className).toMatch(/view/);
169
174
  });
170
175
  });
171
176
  });
package/es/Billboard/index.js CHANGED
@@ -23,15 +23,15 @@ var _dec, _class, _Billboard;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- /** @jsx jsx */
27
26
  import { Component } from 'react';
28
27
  import { Heading } from '@instructure/ui-heading';
29
28
  import { View } from '@instructure/ui-view';
30
29
  import { omitProps, callRenderProp, getElementType } from '@instructure/ui-react-utils';
31
- import { withStyle, jsx } from '@instructure/emotion';
30
+ import { withStyle } from '@instructure/emotion';
32
31
  import generateStyle from './styles';
33
32
  import generateComponentTheme from './theme';
34
33
  import { propTypes, allowedProps } from './props';
34
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
35
35
  /**
36
36
  ---
37
37
  category: components
@@ -74,13 +74,15 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
74
74
  headingAs = _this$props4.headingAs,
75
75
  heading = _this$props4.heading,
76
76
  styles = _this$props4.styles;
77
- return jsx("span", {
78
- css: styles === null || styles === void 0 ? void 0 : styles.heading
79
- }, jsx(Heading, {
80
- level: headingLevel,
81
- as: headingAs,
82
- color: "primary"
83
- }, heading));
77
+ return _jsx("span", {
78
+ css: styles === null || styles === void 0 ? void 0 : styles.heading,
79
+ children: _jsx(Heading, {
80
+ level: headingLevel,
81
+ as: headingAs,
82
+ color: "primary",
83
+ children: heading
84
+ })
85
+ });
84
86
  }
85
87
  get SVGIconSize() {
86
88
  const size = this.props.size;
@@ -107,13 +109,16 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
107
109
  message = _this$props5.message,
108
110
  hero = _this$props5.hero,
109
111
  styles = _this$props5.styles;
110
- return jsx("span", {
111
- css: styles === null || styles === void 0 ? void 0 : styles.content
112
- }, hero && jsx("span", {
113
- css: styles === null || styles === void 0 ? void 0 : styles.hero
114
- }, this.renderHero()), heading && this.renderHeading(), message && jsx("span", {
115
- css: styles === null || styles === void 0 ? void 0 : styles.message
116
- }, callRenderProp(message)));
112
+ return _jsxs("span", {
113
+ css: styles === null || styles === void 0 ? void 0 : styles.content,
114
+ children: [hero && _jsx("span", {
115
+ css: styles === null || styles === void 0 ? void 0 : styles.hero,
116
+ children: this.renderHero()
117
+ }), heading && this.renderHeading(), message && _jsx("span", {
118
+ css: styles === null || styles === void 0 ? void 0 : styles.message,
119
+ children: callRenderProp(message)
120
+ })]
121
+ });
117
122
  }
118
123
  render() {
119
124
  const _this$props6 = this.props,
@@ -123,19 +128,22 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
123
128
  margin = _this$props6.margin,
124
129
  styles = _this$props6.styles;
125
130
  const Element = getElementType(Billboard, this.props);
126
- return jsx(View, {
131
+ return _jsx(View, {
127
132
  as: "div",
128
- margin: margin
129
- }, jsx(View, Object.assign({}, omitProps(this.props, [...Billboard.allowedProps, ...View.allowedProps]), {
130
- type: Element === 'button' ? 'button' : void 0,
131
- as: Element,
132
- elementRef: this.handleRef,
133
- css: styles === null || styles === void 0 ? void 0 : styles.billboard,
134
- href: href,
135
- onClick: this.handleClick,
136
- disabled: disabled,
137
- "aria-disabled": disabled || readOnly ? 'true' : void 0
138
- }), this.renderContent()));
133
+ margin: margin,
134
+ children: _jsx(View, {
135
+ ...omitProps(this.props, [...Billboard.allowedProps, ...View.allowedProps]),
136
+ type: Element === 'button' ? 'button' : void 0,
137
+ as: Element,
138
+ elementRef: this.handleRef,
139
+ css: styles === null || styles === void 0 ? void 0 : styles.billboard,
140
+ href: href,
141
+ onClick: this.handleClick,
142
+ disabled: disabled,
143
+ "aria-disabled": disabled || readOnly ? 'true' : void 0,
144
+ children: this.renderContent()
145
+ })
146
+ });
139
147
  }
140
148
  }, _Billboard.displayName = "Billboard", _Billboard.componentId = 'Billboard', _Billboard.propTypes = propTypes, _Billboard.allowedProps = allowedProps, _Billboard.defaultProps = {
141
149
  disabled: false,
package/lib/Billboard/__new-tests__/Billboard.test.js CHANGED
@@ -1,14 +1,14 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
4
+ var _react = require("@testing-library/react");
6
5
  var _vitest = require("vitest");
7
6
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
8
7
  require("@testing-library/jest-dom");
9
8
  var _index = require("../index");
10
9
  var _IconUserLine2 = require("@instructure/ui-icons/lib/IconUserLine.js");
11
10
  var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
11
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
12
12
  var _IconUserLine, _Billboard, _Billboard2, _Billboard3, _Billboard4, _span, _span2, _Billboard5, _Billboard6, _Billboard7;
13
13
  /*
14
14
  * The MIT License (MIT)
@@ -36,7 +36,7 @@ var _IconUserLine, _Billboard, _Billboard2, _Billboard3, _Billboard4, _span, _sp
36
36
  const TEST_HEADING = 'test-heading';
37
37
  const TEST_MESSAGE = 'test-message';
38
38
  const TEST_LINK = 'http://instructure-test.com';
39
- const TEST_HERO = () => _IconUserLine || (_IconUserLine = /*#__PURE__*/_react.default.createElement(_IconUserLine2.IconUserLine, {
39
+ const TEST_HERO = () => _IconUserLine || (_IconUserLine = (0, _jsxRuntime.jsx)(_IconUserLine2.IconUserLine, {
40
40
  size: 'medium'
41
41
  }));
42
42
  describe('<Billboard />', () => {
@@ -52,12 +52,12 @@ describe('<Billboard />', () => {
52
52
  consoleErrorMock.mockRestore();
53
53
  });
54
54
  it('should render', () => {
55
- const _render = (0, _react2.render)(_Billboard || (_Billboard = /*#__PURE__*/_react.default.createElement(_index.Billboard, null))),
55
+ const _render = (0, _react.render)(_Billboard || (_Billboard = (0, _jsxRuntime.jsx)(_index.Billboard, {}))),
56
56
  container = _render.container;
57
57
  expect(container.firstChild).toBeInTheDocument();
58
58
  });
59
59
  it('should be accessible', async () => {
60
- const _render2 = (0, _react2.render)(_Billboard2 || (_Billboard2 = /*#__PURE__*/_react.default.createElement(_index.Billboard, {
60
+ const _render2 = (0, _react.render)(_Billboard2 || (_Billboard2 = (0, _jsxRuntime.jsx)(_index.Billboard, {
61
61
  heading: TEST_HEADING,
62
62
  message: TEST_MESSAGE,
63
63
  hero: TEST_HERO
@@ -67,85 +67,89 @@ describe('<Billboard />', () => {
67
67
  expect(axeCheck).toBe(true);
68
68
  });
69
69
  it('should render a heading with the correct tag', () => {
70
- (0, _react2.render)(_Billboard3 || (_Billboard3 = /*#__PURE__*/_react.default.createElement(_index.Billboard, {
70
+ (0, _react.render)(_Billboard3 || (_Billboard3 = (0, _jsxRuntime.jsx)(_index.Billboard, {
71
71
  heading: TEST_HEADING,
72
72
  headingAs: "h2"
73
73
  })));
74
- const heading = _react2.screen.getByText(TEST_HEADING);
74
+ const heading = _react.screen.getByText(TEST_HEADING);
75
75
  expect(heading).toBeInTheDocument();
76
76
  expect(heading.tagName).toBe('H2');
77
77
  });
78
78
  it('renders as a link if it has an href prop', () => {
79
- (0, _react2.render)(_Billboard4 || (_Billboard4 = /*#__PURE__*/_react.default.createElement(_index.Billboard, {
79
+ (0, _react.render)(_Billboard4 || (_Billboard4 = (0, _jsxRuntime.jsx)(_index.Billboard, {
80
80
  href: TEST_LINK
81
81
  })));
82
- const link = _react2.screen.getByRole('link');
82
+ const link = _react.screen.getByRole('link');
83
83
  expect(link).toBeInTheDocument();
84
84
  expect(link).toHaveAttribute('href', TEST_LINK);
85
85
  });
86
86
  it('renders as a button and responds to onClick event', () => {
87
87
  const onClick = _vitest.vi.fn();
88
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Billboard, {
88
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.Billboard, {
89
89
  onClick: onClick
90
90
  }));
91
- const button = _react2.screen.getByRole('button');
92
- _react2.fireEvent.click(button);
91
+ const button = _react.screen.getByRole('button');
92
+ _react.fireEvent.click(button);
93
93
  expect(onClick).toHaveBeenCalledTimes(1);
94
94
  });
95
95
  describe('when rendering message', () => {
96
96
  it('should render message when passed a node', async () => {
97
- const messageNode = _span || (_span = /*#__PURE__*/_react.default.createElement("span", null, TEST_MESSAGE));
98
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Billboard, {
97
+ const messageNode = _span || (_span = (0, _jsxRuntime.jsx)("span", {
98
+ children: TEST_MESSAGE
99
+ }));
100
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.Billboard, {
99
101
  message: messageNode
100
102
  }));
101
- const messageElement = _react2.screen.getByText(TEST_MESSAGE);
103
+ const messageElement = _react.screen.getByText(TEST_MESSAGE);
102
104
  expect(messageElement).toBeInTheDocument();
103
105
  expect(messageElement.tagName).toBe('SPAN');
104
106
  });
105
107
  it('should render message passed a function', () => {
106
- const messageNode = _span2 || (_span2 = /*#__PURE__*/_react.default.createElement("span", null, TEST_MESSAGE));
107
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Billboard, {
108
+ const messageNode = _span2 || (_span2 = (0, _jsxRuntime.jsx)("span", {
109
+ children: TEST_MESSAGE
110
+ }));
111
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.Billboard, {
108
112
  message: () => messageNode
109
113
  }));
110
- const messageElement = _react2.screen.getByText(TEST_MESSAGE);
114
+ const messageElement = _react.screen.getByText(TEST_MESSAGE);
111
115
  expect(messageElement).toBeInTheDocument();
112
116
  expect(messageElement.tagName).toBe('SPAN');
113
117
  });
114
118
  });
115
119
  describe('when disabled', () => {
116
120
  it('should apply aria-disabled to link', () => {
117
- (0, _react2.render)(_Billboard5 || (_Billboard5 = /*#__PURE__*/_react.default.createElement(_index.Billboard, {
121
+ (0, _react.render)(_Billboard5 || (_Billboard5 = (0, _jsxRuntime.jsx)(_index.Billboard, {
118
122
  href: TEST_LINK,
119
123
  disabled: true
120
124
  })));
121
- const link = _react2.screen.getByRole('link');
125
+ const link = _react.screen.getByRole('link');
122
126
  expect(link).toHaveAttribute('aria-disabled', 'true');
123
127
  });
124
128
  it('should not be clickable', () => {
125
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Billboard, {
129
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.Billboard, {
126
130
  onClick: _vitest.vi.fn(),
127
131
  disabled: true
128
132
  }));
129
- const button = _react2.screen.getByRole('button');
133
+ const button = _react.screen.getByRole('button');
130
134
  expect(button).toHaveAttribute('aria-disabled', 'true');
131
135
  });
132
136
  });
133
137
  describe('when readOnly', () => {
134
138
  it('should apply aria-disabled', () => {
135
- (0, _react2.render)(_Billboard6 || (_Billboard6 = /*#__PURE__*/_react.default.createElement(_index.Billboard, {
139
+ (0, _react.render)(_Billboard6 || (_Billboard6 = (0, _jsxRuntime.jsx)(_index.Billboard, {
136
140
  href: TEST_LINK,
137
141
  readOnly: true
138
142
  })));
139
- const link = _react2.screen.getByRole('link');
143
+ const link = _react.screen.getByRole('link');
140
144
  expect(link).toHaveAttribute('aria-disabled', 'true');
141
145
  });
142
146
  it('should not be clickable', () => {
143
147
  const onClick = _vitest.vi.fn();
144
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Billboard, {
148
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.Billboard, {
145
149
  onClick: onClick,
146
150
  readOnly: true
147
151
  }));
148
- const button = _react2.screen.getByRole('button');
152
+ const button = _react.screen.getByRole('button');
149
153
  _userEvent.default.click(button);
150
154
  expect(onClick).not.toHaveBeenCalled();
151
155
  });
@@ -153,21 +157,22 @@ describe('<Billboard />', () => {
153
157
  describe('when passing down props to View', () => {
154
158
  it('should support an elementRef prop', () => {
155
159
  const elementRef = _vitest.vi.fn();
156
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Billboard, {
160
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.Billboard, {
157
161
  elementRef: elementRef,
158
162
  href: TEST_LINK
159
163
  }));
160
- const link = _react2.screen.getByRole('link');
164
+ const link = _react.screen.getByRole('link');
161
165
  expect(elementRef).toHaveBeenCalledWith(link);
162
166
  });
163
167
  it('should support an `as` prop', () => {
164
- const _render3 = (0, _react2.render)(_Billboard7 || (_Billboard7 = /*#__PURE__*/_react.default.createElement(_index.Billboard, {
168
+ const _render3 = (0, _react.render)(_Billboard7 || (_Billboard7 = (0, _jsxRuntime.jsx)(_index.Billboard, {
165
169
  as: "em"
166
170
  }))),
167
171
  container = _render3.container;
168
172
  const billboardAsEm = container.querySelector('em');
169
173
  expect(billboardAsEm).toBeInTheDocument();
170
- expect(billboardAsEm === null || billboardAsEm === void 0 ? void 0 : billboardAsEm.className).toMatch(/view-billboard/);
174
+ expect(billboardAsEm === null || billboardAsEm === void 0 ? void 0 : billboardAsEm.className).toMatch(/billboard/);
175
+ expect(billboardAsEm === null || billboardAsEm === void 0 ? void 0 : billboardAsEm.className).toMatch(/view/);
171
176
  });
172
177
  });
173
178
  });
package/lib/Billboard/index.js CHANGED
@@ -15,6 +15,7 @@ var _emotion = require("@instructure/emotion");
15
15
  var _styles = _interopRequireDefault(require("./styles"));
16
16
  var _theme = _interopRequireDefault(require("./theme"));
17
17
  var _props = require("./props");
18
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
18
19
  var _dec, _class, _Billboard;
19
20
  /*
20
21
  * The MIT License (MIT)
@@ -39,7 +40,6 @@ var _dec, _class, _Billboard;
39
40
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
40
41
  * SOFTWARE.
41
42
  */
42
- /** @jsx jsx */
43
43
  /**
44
44
  ---
45
45
  category: components
@@ -82,13 +82,15 @@ let Billboard = exports.Billboard = (_dec = (0, _emotion.withStyle)(_styles.defa
82
82
  headingAs = _this$props4.headingAs,
83
83
  heading = _this$props4.heading,
84
84
  styles = _this$props4.styles;
85
- return (0, _emotion.jsx)("span", {
86
- css: styles === null || styles === void 0 ? void 0 : styles.heading
87
- }, (0, _emotion.jsx)(_Heading.Heading, {
88
- level: headingLevel,
89
- as: headingAs,
90
- color: "primary"
91
- }, heading));
85
+ return (0, _jsxRuntime.jsx)("span", {
86
+ css: styles === null || styles === void 0 ? void 0 : styles.heading,
87
+ children: (0, _jsxRuntime.jsx)(_Heading.Heading, {
88
+ level: headingLevel,
89
+ as: headingAs,
90
+ color: "primary",
91
+ children: heading
92
+ })
93
+ });
92
94
  }
93
95
  get SVGIconSize() {
94
96
  const size = this.props.size;
@@ -115,13 +117,16 @@ let Billboard = exports.Billboard = (_dec = (0, _emotion.withStyle)(_styles.defa
115
117
  message = _this$props5.message,
116
118
  hero = _this$props5.hero,
117
119
  styles = _this$props5.styles;
118
- return (0, _emotion.jsx)("span", {
119
- css: styles === null || styles === void 0 ? void 0 : styles.content
120
- }, hero && (0, _emotion.jsx)("span", {
121
- css: styles === null || styles === void 0 ? void 0 : styles.hero
122
- }, this.renderHero()), heading && this.renderHeading(), message && (0, _emotion.jsx)("span", {
123
- css: styles === null || styles === void 0 ? void 0 : styles.message
124
- }, (0, _callRenderProp.callRenderProp)(message)));
120
+ return (0, _jsxRuntime.jsxs)("span", {
121
+ css: styles === null || styles === void 0 ? void 0 : styles.content,
122
+ children: [hero && (0, _jsxRuntime.jsx)("span", {
123
+ css: styles === null || styles === void 0 ? void 0 : styles.hero,
124
+ children: this.renderHero()
125
+ }), heading && this.renderHeading(), message && (0, _jsxRuntime.jsx)("span", {
126
+ css: styles === null || styles === void 0 ? void 0 : styles.message,
127
+ children: (0, _callRenderProp.callRenderProp)(message)
128
+ })]
129
+ });
125
130
  }
126
131
  render() {
127
132
  const _this$props6 = this.props,
@@ -131,19 +136,22 @@ let Billboard = exports.Billboard = (_dec = (0, _emotion.withStyle)(_styles.defa
131
136
  margin = _this$props6.margin,
132
137
  styles = _this$props6.styles;
133
138
  const Element = (0, _getElementType.getElementType)(Billboard, this.props);
134
- return (0, _emotion.jsx)(_View.View, {
139
+ return (0, _jsxRuntime.jsx)(_View.View, {
135
140
  as: "div",
136
- margin: margin
137
- }, (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _omitProps.omitProps)(this.props, [...Billboard.allowedProps, ..._View.View.allowedProps]), {
138
- type: Element === 'button' ? 'button' : void 0,
139
- as: Element,
140
- elementRef: this.handleRef,
141
- css: styles === null || styles === void 0 ? void 0 : styles.billboard,
142
- href: href,
143
- onClick: this.handleClick,
144
- disabled: disabled,
145
- "aria-disabled": disabled || readOnly ? 'true' : void 0
146
- }), this.renderContent()));
141
+ margin: margin,
142
+ children: (0, _jsxRuntime.jsx)(_View.View, {
143
+ ...(0, _omitProps.omitProps)(this.props, [...Billboard.allowedProps, ..._View.View.allowedProps]),
144
+ type: Element === 'button' ? 'button' : void 0,
145
+ as: Element,
146
+ elementRef: this.handleRef,
147
+ css: styles === null || styles === void 0 ? void 0 : styles.billboard,
148
+ href: href,
149
+ onClick: this.handleClick,
150
+ disabled: disabled,
151
+ "aria-disabled": disabled || readOnly ? 'true' : void 0,
152
+ children: this.renderContent()
153
+ })
154
+ });
147
155
  }
148
156
  }, _Billboard.displayName = "Billboard", _Billboard.componentId = 'Billboard', _Billboard.propTypes = _props.propTypes, _Billboard.allowedProps = _props.allowedProps, _Billboard.defaultProps = {
149
157
  disabled: false,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-billboard",
3
- "version": "10.16.1-snapshot-0",
3
+ "version": "10.16.1",
4
4
  "description": "A UI component to display empty states, 404 pages, redirects, etc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,12 +23,12 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.16.1-snapshot-0",
27
- "@instructure/ui-babel-preset": "10.16.1-snapshot-0",
28
- "@instructure/ui-color-utils": "10.16.1-snapshot-0",
29
- "@instructure/ui-icons": "10.16.1-snapshot-0",
30
- "@instructure/ui-test-utils": "10.16.1-snapshot-0",
31
- "@instructure/ui-themes": "10.16.1-snapshot-0",
26
+ "@instructure/ui-axe-check": "10.16.1",
27
+ "@instructure/ui-babel-preset": "10.16.1",
28
+ "@instructure/ui-color-utils": "10.16.1",
29
+ "@instructure/ui-icons": "10.16.1",
30
+ "@instructure/ui-test-utils": "10.16.1",
31
+ "@instructure/ui-themes": "10.16.1",
32
32
  "@testing-library/jest-dom": "^6.6.3",
33
33
  "@testing-library/react": "^16.0.1",
34
34
  "@testing-library/user-event": "^14.5.2",
@@ -36,12 +36,12 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@babel/runtime": "^7.26.0",
39
- "@instructure/emotion": "10.16.1-snapshot-0",
40
- "@instructure/shared-types": "10.16.1-snapshot-0",
41
- "@instructure/ui-heading": "10.16.1-snapshot-0",
42
- "@instructure/ui-img": "10.16.1-snapshot-0",
43
- "@instructure/ui-react-utils": "10.16.1-snapshot-0",
44
- "@instructure/ui-view": "10.16.1-snapshot-0",
39
+ "@instructure/emotion": "10.16.1",
40
+ "@instructure/shared-types": "10.16.1",
41
+ "@instructure/ui-heading": "10.16.1",
42
+ "@instructure/ui-img": "10.16.1",
43
+ "@instructure/ui-react-utils": "10.16.1",
44
+ "@instructure/ui-view": "10.16.1",
45
45
  "prop-types": "^15.8.1"
46
46
  },
47
47
  "peerDependencies": {
package/src/Billboard/__new-tests__/Billboard.test.tsx CHANGED
@@ -22,7 +22,6 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import React from 'react'
26
25
  import { fireEvent, render, screen } from '@testing-library/react'
27
26
  import { vi } from 'vitest'
28
27
  import userEvent from '@testing-library/user-event'
@@ -176,7 +175,8 @@ describe('<Billboard />', () => {
176
175
  const billboardAsEm = container.querySelector('em')
177
176
 
178
177
  expect(billboardAsEm).toBeInTheDocument()
179
- expect(billboardAsEm?.className).toMatch(/view-billboard/)
178
+ expect(billboardAsEm?.className).toMatch(/billboard/)
179
+ expect(billboardAsEm?.className).toMatch(/view/)
180
180
  })
181
181
  })
182
182
  })
package/src/Billboard/index.tsx CHANGED
@@ -22,7 +22,6 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- /** @jsx jsx */
26
25
  import { Component, MouseEvent } from 'react'
27
26
 
28
27
  import { Heading } from '@instructure/ui-heading'
@@ -33,7 +32,7 @@ import {
33
32
  getElementType
34
33
  } from '@instructure/ui-react-utils'
35
34
 
36
- import { withStyle, jsx } from '@instructure/emotion'
35
+ import { withStyle } from '@instructure/emotion'
37
36
 
38
37
  import generateStyle from './styles'
39
38
  import generateComponentTheme from './theme'
package/src/Billboard/props.ts CHANGED
@@ -36,7 +36,7 @@ import type {
36
36
  PropValidators
37
37
  } from '@instructure/shared-types'
38
38
  import type { ViewProps } from '@instructure/ui-view'
39
- import React, { MouseEvent } from 'react'
39
+ import { MouseEvent } from 'react'
40
40
  import { Renderable } from '@instructure/shared-types'
41
41
  type HeroIconSize = 'medium' | 'x-large' | 'large'
42
42
  type BillboardOwnProps = {