@instructure/ui-billboard 11.7.3-snapshot-7 → 11.7.3-snapshot-26

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 +5 -2
  2. package/es/Billboard/v1/index.js +65 -60
  3. package/es/Billboard/v1/styles.js +8 -6
  4. package/es/Billboard/v1/theme.js +28 -27
  5. package/es/Billboard/v2/index.js +98 -91
  6. package/es/Billboard/v2/styles.js +8 -6
  7. package/lib/Billboard/v1/index.js +65 -60
  8. package/lib/Billboard/v1/styles.js +8 -6
  9. package/lib/Billboard/v1/theme.js +28 -27
  10. package/lib/Billboard/v2/index.js +98 -91
  11. package/lib/Billboard/v2/styles.js +8 -6
  12. package/package.json +13 -13
  13. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
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
- ## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-billboard
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/Billboard/v1/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _Billboard;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -37,45 +37,44 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
37
37
  category: components
38
38
  ---
39
39
  **/
40
- let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Billboard = class Billboard extends Component {
41
- constructor(...args) {
42
- super(...args);
43
- this.ref = null;
44
- this.handleRef = el => {
45
- const elementRef = this.props.elementRef;
46
- this.ref = el;
47
- if (typeof elementRef === 'function') {
48
- elementRef(el);
49
- }
50
- };
51
- this.handleClick = e => {
52
- const _this$props = this.props,
53
- readOnly = _this$props.readOnly,
54
- onClick = _this$props.onClick;
55
- if (readOnly) {
56
- e.preventDefault();
57
- e.stopPropagation();
58
- } else if (typeof onClick === 'function') {
59
- onClick(e);
60
- }
61
- };
62
- }
40
+ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Billboard extends Component {
41
+ static displayName = "Billboard";
42
+ static componentId = 'Billboard';
43
+ static allowedProps = allowedProps;
44
+ static defaultProps = {
45
+ disabled: false,
46
+ readOnly: false,
47
+ size: 'medium',
48
+ headingAs: 'span',
49
+ headingLevel: 'h1',
50
+ as: 'span',
51
+ elementRef: () => {}
52
+ };
53
+ ref = null;
54
+ handleRef = el => {
55
+ const {
56
+ elementRef
57
+ } = this.props;
58
+ this.ref = el;
59
+ if (typeof elementRef === 'function') {
60
+ elementRef(el);
61
+ }
62
+ };
63
63
  componentDidMount() {
64
- var _this$props$makeStyle, _this$props2;
65
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
64
+ this.props.makeStyles?.();
66
65
  }
67
66
  componentDidUpdate() {
68
- var _this$props$makeStyle2, _this$props3;
69
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
67
+ this.props.makeStyles?.();
70
68
  }
71
69
  renderHeading() {
72
- const _this$props4 = this.props,
73
- headingLevel = _this$props4.headingLevel,
74
- headingAs = _this$props4.headingAs,
75
- heading = _this$props4.heading,
76
- styles = _this$props4.styles;
70
+ const {
71
+ headingLevel,
72
+ headingAs,
73
+ heading,
74
+ styles
75
+ } = this.props;
77
76
  return _jsx("span", {
78
- css: styles === null || styles === void 0 ? void 0 : styles.heading,
77
+ css: styles?.heading,
79
78
  children: _jsx(Heading, {
80
79
  level: headingLevel,
81
80
  as: headingAs,
@@ -104,55 +103,61 @@ let Billboard = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
104
103
  }
105
104
  }
106
105
  renderContent() {
107
- const _this$props5 = this.props,
108
- heading = _this$props5.heading,
109
- message = _this$props5.message,
110
- hero = _this$props5.hero,
111
- styles = _this$props5.styles;
106
+ const {
107
+ heading,
108
+ message,
109
+ hero,
110
+ styles
111
+ } = this.props;
112
112
  return _jsxs("span", {
113
- css: styles === null || styles === void 0 ? void 0 : styles.content,
113
+ css: styles?.content,
114
114
  children: [hero && _jsx("span", {
115
- css: styles === null || styles === void 0 ? void 0 : styles.hero,
115
+ css: styles?.hero,
116
116
  children: this.renderHero()
117
117
  }), heading && this.renderHeading(), message && _jsx("span", {
118
- css: styles === null || styles === void 0 ? void 0 : styles.message,
118
+ css: styles?.message,
119
119
  children: callRenderProp(message)
120
120
  })]
121
121
  });
122
122
  }
123
+ handleClick = e => {
124
+ const {
125
+ readOnly,
126
+ onClick
127
+ } = this.props;
128
+ if (readOnly) {
129
+ e.preventDefault();
130
+ e.stopPropagation();
131
+ } else if (typeof onClick === 'function') {
132
+ onClick(e);
133
+ }
134
+ };
123
135
  render() {
124
- const _this$props6 = this.props,
125
- href = _this$props6.href,
126
- disabled = _this$props6.disabled,
127
- readOnly = _this$props6.readOnly,
128
- margin = _this$props6.margin,
129
- styles = _this$props6.styles;
136
+ const {
137
+ href,
138
+ disabled,
139
+ readOnly,
140
+ margin,
141
+ styles
142
+ } = this.props;
130
143
  const Element = getElementType(Billboard, this.props);
131
144
  return _jsx(View, {
132
145
  as: "div",
133
146
  margin: margin,
134
147
  children: _jsx(View, {
135
148
  ...omitProps(this.props, [...Billboard.allowedProps, ...View.allowedProps]),
136
- type: Element === 'button' ? 'button' : void 0,
149
+ type: Element === 'button' ? 'button' : undefined,
137
150
  as: Element,
138
151
  elementRef: this.handleRef,
139
- css: styles === null || styles === void 0 ? void 0 : styles.billboard,
152
+ css: styles?.billboard,
140
153
  href: href,
141
154
  onClick: this.handleClick,
142
155
  disabled: disabled,
143
- "aria-disabled": disabled || readOnly ? 'true' : void 0,
156
+ "aria-disabled": disabled || readOnly ? 'true' : undefined,
144
157
  children: this.renderContent()
145
158
  })
146
159
  });
147
160
  }
148
- }, _Billboard.displayName = "Billboard", _Billboard.componentId = 'Billboard', _Billboard.allowedProps = allowedProps, _Billboard.defaultProps = {
149
- disabled: false,
150
- readOnly: false,
151
- size: 'medium',
152
- headingAs: 'span',
153
- headingLevel: 'h1',
154
- as: 'span',
155
- elementRef: () => {}
156
- }, _Billboard)) || _class);
161
+ }) || _class);
157
162
  export default Billboard;
158
163
  export { Billboard };
package/es/Billboard/v1/styles.js CHANGED
@@ -33,12 +33,14 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props) => {
36
- const size = props.size,
37
- href = props.href,
38
- onClick = props.onClick,
39
- disabled = props.disabled,
40
- hero = props.hero,
41
- heading = props.heading;
36
+ const {
37
+ size,
38
+ href,
39
+ onClick,
40
+ disabled,
41
+ hero,
42
+ heading
43
+ } = props;
42
44
  const clickable = href || onClick;
43
45
  const sizeVariants = {
44
46
  small: {
package/es/Billboard/v1/theme.js CHANGED
@@ -30,12 +30,13 @@
30
30
  * @return {Object} The final theme object with the overrides and component variables
31
31
  */
32
32
  const generateComponentTheme = theme => {
33
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9;
34
- const borders = theme.borders,
35
- colors = theme.colors,
36
- spacing = theme.spacing,
37
- typography = theme.typography,
38
- themeName = theme.key;
33
+ const {
34
+ borders,
35
+ colors,
36
+ spacing,
37
+ typography,
38
+ key: themeName
39
+ } = theme;
39
40
  const themeSpecificStyle = {
40
41
  canvas: {
41
42
  iconHoverColor: theme['ic-link-color'],
@@ -44,27 +45,27 @@ const generateComponentTheme = theme => {
44
45
  }
45
46
  };
46
47
  const componentVariables = {
47
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
48
- paddingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
49
- paddingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
50
- paddingLarge: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
51
- iconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey4570,
52
- mediumMargin: spacing === null || spacing === void 0 ? void 0 : spacing.small,
53
- largeMargin: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
54
- iconHoverColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.blue4570,
55
- backgroundColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
56
- iconHoverColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.white1010,
57
- buttonBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
58
- buttonBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusLarge,
59
- messageColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.blue4570,
60
- messageColorClickable: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.blue4570,
61
- messageColorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey1111,
62
- messageFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
63
- messageFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
64
- messageFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
65
- clickableActiveBg: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.blue4570,
66
- clickableActiveText: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.white1010,
67
- buttonBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
48
+ fontFamily: typography?.fontFamily,
49
+ paddingSmall: spacing?.small,
50
+ paddingMedium: spacing?.medium,
51
+ paddingLarge: spacing?.medium,
52
+ iconColor: colors?.contrasts?.grey4570,
53
+ mediumMargin: spacing?.small,
54
+ largeMargin: spacing?.medium,
55
+ iconHoverColor: colors?.contrasts?.blue4570,
56
+ backgroundColor: colors?.contrasts?.white1010,
57
+ iconHoverColorInverse: colors?.contrasts?.white1010,
58
+ buttonBorderWidth: borders?.widthMedium,
59
+ buttonBorderRadius: borders?.radiusLarge,
60
+ messageColor: colors?.contrasts?.blue4570,
61
+ messageColorClickable: colors?.contrasts?.blue4570,
62
+ messageColorInverse: colors?.contrasts?.grey1111,
63
+ messageFontSizeSmall: typography?.fontSizeSmall,
64
+ messageFontSizeMedium: typography?.fontSizeMedium,
65
+ messageFontSizeLarge: typography?.fontSizeLarge,
66
+ clickableActiveBg: colors?.contrasts?.blue4570,
67
+ clickableActiveText: colors?.contrasts?.white1010,
68
+ buttonBorderStyle: borders?.style,
68
69
  buttonHoverBorderStyle: 'dashed'
69
70
  };
70
71
  return {
package/es/Billboard/v2/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _Billboard;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -44,70 +44,48 @@ const billboardSizeToIconSize = {
44
44
  category: components
45
45
  ---
46
46
  **/
47
- let Billboard = (_dec = withStyle(generateStyle), _dec(_class = (_Billboard = class Billboard extends Component {
48
- constructor(...args) {
49
- super(...args);
50
- this.state = {
51
- isHovered: false,
52
- isActive: false
53
- };
54
- this.ref = null;
55
- this.handleRef = el => {
56
- const elementRef = this.props.elementRef;
57
- this.ref = el;
58
- if (typeof elementRef === 'function') {
59
- elementRef(el);
60
- }
61
- };
62
- this.handleMouseEnter = () => {
63
- this.setState({
64
- isHovered: true
65
- });
66
- };
67
- this.handleMouseLeave = () => {
68
- this.setState({
69
- isHovered: false,
70
- isActive: false
71
- });
72
- };
73
- this.handleMouseDown = () => {
74
- this.setState({
75
- isActive: true
76
- });
77
- };
78
- this.handleMouseUp = () => {
79
- this.setState({
80
- isActive: false
81
- });
82
- };
83
- this.handleClick = e => {
84
- const _this$props = this.props,
85
- readOnly = _this$props.readOnly,
86
- onClick = _this$props.onClick;
87
- if (readOnly) {
88
- e.preventDefault();
89
- e.stopPropagation();
90
- } else if (typeof onClick === 'function') {
91
- onClick(e);
92
- }
93
- };
94
- }
47
+ let Billboard = (_dec = withStyle(generateStyle), _dec(_class = class Billboard extends Component {
48
+ static displayName = "Billboard";
49
+ static componentId = 'Billboard';
50
+ static allowedProps = allowedProps;
51
+ static defaultProps = {
52
+ disabled: false,
53
+ readOnly: false,
54
+ size: 'medium',
55
+ headingAs: 'span',
56
+ headingLevel: 'h1',
57
+ as: 'span',
58
+ elementRef: () => {}
59
+ };
60
+ state = {
61
+ isHovered: false,
62
+ isActive: false
63
+ };
64
+ ref = null;
65
+ handleRef = el => {
66
+ const {
67
+ elementRef
68
+ } = this.props;
69
+ this.ref = el;
70
+ if (typeof elementRef === 'function') {
71
+ elementRef(el);
72
+ }
73
+ };
95
74
  componentDidMount() {
96
- var _this$props$makeStyle, _this$props2;
97
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
75
+ this.props.makeStyles?.();
98
76
  }
99
77
  componentDidUpdate() {
100
- var _this$props$makeStyle2, _this$props3;
101
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
78
+ this.props.makeStyles?.();
102
79
  }
103
80
  renderHeading() {
104
- const _this$props4 = this.props,
105
- headingLevel = _this$props4.headingLevel,
106
- headingAs = _this$props4.headingAs,
107
- heading = _this$props4.heading,
108
- styles = _this$props4.styles;
81
+ const {
82
+ headingLevel,
83
+ headingAs,
84
+ heading,
85
+ styles
86
+ } = this.props;
109
87
  return _jsx("span", {
110
- css: styles === null || styles === void 0 ? void 0 : styles.heading,
88
+ css: styles?.heading,
111
89
  children: _jsx(Heading, {
112
90
  level: headingLevel,
113
91
  as: headingAs,
@@ -116,13 +94,36 @@ let Billboard = (_dec = withStyle(generateStyle), _dec(_class = (_Billboard = cl
116
94
  })
117
95
  });
118
96
  }
97
+ handleMouseEnter = () => {
98
+ this.setState({
99
+ isHovered: true
100
+ });
101
+ };
102
+ handleMouseLeave = () => {
103
+ this.setState({
104
+ isHovered: false,
105
+ isActive: false
106
+ });
107
+ };
108
+ handleMouseDown = () => {
109
+ this.setState({
110
+ isActive: true
111
+ });
112
+ };
113
+ handleMouseUp = () => {
114
+ this.setState({
115
+ isActive: false
116
+ });
117
+ };
119
118
  renderHero() {
120
- const _this$props5 = this.props,
121
- hero = _this$props5.hero,
122
- size = _this$props5.size;
123
- const _this$state = this.state,
124
- isHovered = _this$state.isHovered,
125
- isActive = _this$state.isActive;
119
+ const {
120
+ hero,
121
+ size
122
+ } = this.props;
123
+ const {
124
+ isHovered,
125
+ isActive
126
+ } = this.state;
126
127
  if (!hero) return null;
127
128
  const iconSize = billboardSizeToIconSize[size];
128
129
  // Priority: active > hover > default
@@ -130,39 +131,53 @@ let Billboard = (_dec = withStyle(generateStyle), _dec(_class = (_Billboard = cl
130
131
  return renderIconWithProps(hero, iconSize, iconColor);
131
132
  }
132
133
  renderContent() {
133
- const _this$props6 = this.props,
134
- heading = _this$props6.heading,
135
- message = _this$props6.message,
136
- hero = _this$props6.hero,
137
- styles = _this$props6.styles;
134
+ const {
135
+ heading,
136
+ message,
137
+ hero,
138
+ styles
139
+ } = this.props;
138
140
  return _jsxs("span", {
139
- css: styles === null || styles === void 0 ? void 0 : styles.content,
141
+ css: styles?.content,
140
142
  children: [hero && _jsx("span", {
141
- css: styles === null || styles === void 0 ? void 0 : styles.hero,
143
+ css: styles?.hero,
142
144
  children: this.renderHero()
143
145
  }), heading && this.renderHeading(), message && _jsx("span", {
144
- css: styles === null || styles === void 0 ? void 0 : styles.message,
146
+ css: styles?.message,
145
147
  children: callRenderProp(message)
146
148
  })]
147
149
  });
148
150
  }
151
+ handleClick = e => {
152
+ const {
153
+ readOnly,
154
+ onClick
155
+ } = this.props;
156
+ if (readOnly) {
157
+ e.preventDefault();
158
+ e.stopPropagation();
159
+ } else if (typeof onClick === 'function') {
160
+ onClick(e);
161
+ }
162
+ };
149
163
  render() {
150
- const _this$props7 = this.props,
151
- href = _this$props7.href,
152
- disabled = _this$props7.disabled,
153
- readOnly = _this$props7.readOnly,
154
- margin = _this$props7.margin,
155
- styles = _this$props7.styles;
164
+ const {
165
+ href,
166
+ disabled,
167
+ readOnly,
168
+ margin,
169
+ styles
170
+ } = this.props;
156
171
  const Element = getElementType(Billboard, this.props);
157
172
  return _jsx(View, {
158
173
  as: "div",
159
174
  margin: margin,
160
175
  children: _jsx(View, {
161
176
  ...omitProps(this.props, [...Billboard.allowedProps, ...View.allowedProps]),
162
- type: Element === 'button' ? 'button' : void 0,
177
+ type: Element === 'button' ? 'button' : undefined,
163
178
  as: Element,
164
179
  elementRef: this.handleRef,
165
- css: styles === null || styles === void 0 ? void 0 : styles.billboard,
180
+ css: styles?.billboard,
166
181
  href: href,
167
182
  onClick: this.handleClick,
168
183
  onMouseEnter: this.handleMouseEnter,
@@ -170,19 +185,11 @@ let Billboard = (_dec = withStyle(generateStyle), _dec(_class = (_Billboard = cl
170
185
  onMouseDown: this.handleMouseDown,
171
186
  onMouseUp: this.handleMouseUp,
172
187
  disabled: disabled,
173
- "aria-disabled": disabled || readOnly ? 'true' : void 0,
188
+ "aria-disabled": disabled || readOnly ? 'true' : undefined,
174
189
  children: this.renderContent()
175
190
  })
176
191
  });
177
192
  }
178
- }, _Billboard.displayName = "Billboard", _Billboard.componentId = 'Billboard', _Billboard.allowedProps = allowedProps, _Billboard.defaultProps = {
179
- disabled: false,
180
- readOnly: false,
181
- size: 'medium',
182
- headingAs: 'span',
183
- headingLevel: 'h1',
184
- as: 'span',
185
- elementRef: () => {}
186
- }, _Billboard)) || _class);
193
+ }) || _class);
187
194
  export default Billboard;
188
195
  export { Billboard };
package/es/Billboard/v2/styles.js CHANGED
@@ -33,12 +33,14 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props) => {
36
- const size = props.size,
37
- href = props.href,
38
- onClick = props.onClick,
39
- disabled = props.disabled,
40
- hero = props.hero,
41
- heading = props.heading;
36
+ const {
37
+ size,
38
+ href,
39
+ onClick,
40
+ disabled,
41
+ hero,
42
+ heading
43
+ } = props;
42
44
  const clickable = href || onClick;
43
45
  const sizeVariants = {
44
46
  small: {