@instructure/ui-heading 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/Heading/v1/index.js +66 -70
  3. package/es/Heading/v1/styles.js +7 -5
  4. package/es/Heading/v1/theme.js +36 -35
  5. package/es/Heading/v2/index.js +66 -66
  6. package/es/Heading/v2/styles.js +8 -5
  7. package/lib/Heading/v1/index.js +67 -71
  8. package/lib/Heading/v1/styles.js +7 -5
  9. package/lib/Heading/v1/theme.js +36 -35
  10. package/lib/Heading/v2/index.js +66 -66
  11. package/lib/Heading/v2/styles.js +8 -5
  12. package/package.json +11 -11
  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-heading
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/Heading/v1/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["border", "children", "color", "level", "margin", "elementRef", "makeStyles", "variant"];
3
- var _dec, _class, _Heading, _IconAiColoredSolid, _IconAiColoredSolid2, _IconAiColoredSolid3, _IconAiColoredSolid4, _IconAiColoredSolid5, _IconAiColoredSolid6;
1
+ var _dec, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -52,106 +50,107 @@ const variantLevels = {
52
50
  category: components
53
51
  ---
54
52
  **/
55
- let Heading = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Heading = class Heading extends Component {
56
- constructor(...args) {
57
- super(...args);
58
- this.ref = null;
59
- this.handleRef = el => {
60
- const elementRef = this.props.elementRef;
61
- this.ref = el;
62
- if (typeof elementRef === 'function') {
63
- elementRef(el);
64
- }
65
- };
66
- }
53
+ let Heading = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Heading extends Component {
54
+ static displayName = "Heading";
55
+ static componentId = 'Heading';
56
+ static allowedProps = allowedProps;
57
+ static defaultProps = {
58
+ children: null,
59
+ border: 'none',
60
+ color: 'inherit'
61
+ };
62
+ ref = null;
63
+ handleRef = el => {
64
+ const {
65
+ elementRef
66
+ } = this.props;
67
+ this.ref = el;
68
+ if (typeof elementRef === 'function') {
69
+ elementRef(el);
70
+ }
71
+ };
67
72
  checkProps() {
68
- const _this$props = this.props,
69
- variant = _this$props.variant,
70
- as = _this$props.as;
73
+ const {
74
+ variant,
75
+ as
76
+ } = this.props;
71
77
  if (variant) {
72
78
  if (as) {}
73
79
  }
74
80
  }
75
81
  componentDidMount() {
76
- var _this$props$makeStyle, _this$props2;
77
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
82
+ this.props.makeStyles?.();
78
83
  this.checkProps();
79
84
  }
80
85
  componentDidUpdate() {
81
- var _this$props$makeStyle2, _this$props3;
82
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
86
+ this.props.makeStyles?.();
83
87
  this.checkProps();
84
88
  }
85
89
  renderContent() {
86
- const _this$props4 = this.props,
87
- children = _this$props4.children,
88
- renderIcon = _this$props4.renderIcon,
89
- aiVariant = _this$props4.aiVariant;
90
+ const {
91
+ children,
92
+ renderIcon,
93
+ aiVariant
94
+ } = this.props;
90
95
  if (renderIcon && !aiVariant) {
91
- var _this$props$styles;
92
96
  return _jsxs("span", {
93
- css: [(_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.withIcon],
97
+ css: [this.props.styles?.withIcon],
94
98
  "aria-hidden": "true",
95
99
  children: [callRenderProp(renderIcon), "\xA0", children]
96
100
  });
97
101
  }
98
102
  if (aiVariant === 'stacked') {
99
- var _this$props$styles2, _this$props$styles3, _this$props$styles4;
100
103
  return _jsxs("span", {
101
- css: [(_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.withIcon],
104
+ css: [this.props.styles?.withIcon],
102
105
  "aria-hidden": "true",
103
106
  children: [_jsxs("span", {
104
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.igniteAIStacked,
105
- children: [_IconAiColoredSolid || (_IconAiColoredSolid = _jsx(IconAiColoredSolid, {})), _jsx("span", {
106
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.igniteAI,
107
+ css: this.props.styles?.igniteAIStacked,
108
+ children: [_jsx(IconAiColoredSolid, {}), _jsx("span", {
109
+ css: this.props.styles?.igniteAI,
107
110
  children: "IgniteAI"
108
111
  })]
109
112
  }), children]
110
113
  });
111
114
  }
112
115
  if (aiVariant === 'horizontal') {
113
- var _this$props$styles5, _this$props$styles6;
114
116
  return _jsxs("span", {
115
- css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.withIcon,
117
+ css: this.props.styles?.withIcon,
116
118
  "aria-hidden": "true",
117
- children: [_IconAiColoredSolid2 || (_IconAiColoredSolid2 = _jsx(IconAiColoredSolid, {})), _jsx("span", {
118
- css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.igniteAI,
119
+ children: [_jsx(IconAiColoredSolid, {}), _jsx("span", {
120
+ css: this.props.styles?.igniteAI,
119
121
  children: "IgniteAI"
120
122
  }), children]
121
123
  });
122
124
  }
123
125
  if (aiVariant === 'iconOnly') {
124
- var _this$props$styles7;
125
126
  return _jsxs("span", {
126
- css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.withIcon,
127
+ css: this.props.styles?.withIcon,
127
128
  "aria-hidden": "true",
128
- children: [_IconAiColoredSolid3 || (_IconAiColoredSolid3 = _jsx(IconAiColoredSolid, {})), "\xA0", children]
129
+ children: [_jsx(IconAiColoredSolid, {}), "\xA0", children]
129
130
  });
130
131
  }
131
132
  if (aiVariant === 'stacked') {
132
- var _this$props$styles8, _this$props$styles9;
133
133
  return _jsxs(_Fragment, {
134
134
  children: [_jsxs("span", {
135
- css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.igniteAIStacked,
136
- children: [_IconAiColoredSolid4 || (_IconAiColoredSolid4 = _jsx(IconAiColoredSolid, {})), _jsx("span", {
137
- css: (_this$props$styles9 = this.props.styles) === null || _this$props$styles9 === void 0 ? void 0 : _this$props$styles9.igniteAI,
135
+ css: this.props.styles?.igniteAIStacked,
136
+ children: [_jsx(IconAiColoredSolid, {}), _jsx("span", {
137
+ css: this.props.styles?.igniteAI,
138
138
  children: "IgniteAI"
139
139
  })]
140
140
  }), children]
141
141
  });
142
142
  }
143
143
  if (aiVariant === 'horizontal') {
144
- var _this$props$styles0;
145
144
  return _jsxs(_Fragment, {
146
- children: [_IconAiColoredSolid5 || (_IconAiColoredSolid5 = _jsx(IconAiColoredSolid, {})), _jsx("span", {
147
- css: (_this$props$styles0 = this.props.styles) === null || _this$props$styles0 === void 0 ? void 0 : _this$props$styles0.igniteAI,
145
+ children: [_jsx(IconAiColoredSolid, {}), _jsx("span", {
146
+ css: this.props.styles?.igniteAI,
148
147
  children: "IgniteAI"
149
148
  }), children]
150
149
  });
151
150
  }
152
151
  if (aiVariant === 'iconOnly') {
153
152
  return _jsxs(_Fragment, {
154
- children: [_IconAiColoredSolid6 || (_IconAiColoredSolid6 = _jsx(IconAiColoredSolid, {})), "\xA0", children]
153
+ children: [_jsx(IconAiColoredSolid, {}), "\xA0", children]
155
154
  });
156
155
  }
157
156
  return children;
@@ -159,30 +158,31 @@ let Heading = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
159
158
 
160
159
  //overriding default screen reader functionality is needed to read spans in h tags correctly
161
160
  getAriaLabel() {
162
- const _this$props5 = this.props,
163
- aiVariant = _this$props5.aiVariant,
164
- children = _this$props5.children,
165
- renderIcon = _this$props5.renderIcon;
161
+ const {
162
+ aiVariant,
163
+ children,
164
+ renderIcon
165
+ } = this.props;
166
166
  if (aiVariant === 'stacked' || aiVariant === 'horizontal') {
167
167
  return `IgniteAI, ${children}`;
168
168
  }
169
169
  if (aiVariant === 'iconOnly' || renderIcon) {
170
170
  return `${children}`;
171
171
  }
172
- return void 0;
172
+ return undefined;
173
173
  }
174
174
  render() {
175
- var _this$props$styles1;
176
- const _this$props6 = this.props,
177
- border = _this$props6.border,
178
- children = _this$props6.children,
179
- color = _this$props6.color,
180
- level = _this$props6.level,
181
- margin = _this$props6.margin,
182
- elementRef = _this$props6.elementRef,
183
- makeStyles = _this$props6.makeStyles,
184
- variant = _this$props6.variant,
185
- props = _objectWithoutProperties(_this$props6, _excluded);
175
+ const {
176
+ border,
177
+ children,
178
+ color,
179
+ level,
180
+ margin,
181
+ elementRef,
182
+ makeStyles,
183
+ variant,
184
+ ...props
185
+ } = this.props;
186
186
  let ElementType = 'h2';
187
187
  if (variant) {
188
188
  // TODO deprecated, remove. `variant` should not set DOM level
@@ -207,7 +207,7 @@ let Heading = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
207
207
  return _jsx(View, {
208
208
  "aria-label": this.getAriaLabel(),
209
209
  ...passthroughProps(props),
210
- css: (_this$props$styles1 = this.props.styles) === null || _this$props$styles1 === void 0 ? void 0 : _this$props$styles1.heading,
210
+ css: this.props.styles?.heading,
211
211
  as: ElementType,
212
212
  elementRef: this.handleRef,
213
213
  margin: margin,
@@ -215,10 +215,6 @@ let Heading = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
215
215
  children: this.renderContent()
216
216
  });
217
217
  }
218
- }, _Heading.displayName = "Heading", _Heading.componentId = 'Heading', _Heading.allowedProps = allowedProps, _Heading.defaultProps = {
219
- children: null,
220
- border: 'none',
221
- color: 'inherit'
222
- }, _Heading)) || _class);
218
+ }) || _class);
223
219
  export default Heading;
224
220
  export { Heading };
package/es/Heading/v1/styles.js CHANGED
@@ -33,11 +33,13 @@
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 level = props.level,
37
- color = props.color,
38
- border = props.border,
39
- variant = props.variant,
40
- aiVariant = props.aiVariant;
36
+ const {
37
+ level,
38
+ color,
39
+ border,
40
+ variant,
41
+ aiVariant
42
+ } = props;
41
43
  const variants = {
42
44
  titlePageDesktop: {
43
45
  fontStyle: 'normal',
package/es/Heading/v1/theme.js CHANGED
@@ -28,12 +28,13 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7;
32
- const typography = theme.typography,
33
- colors = theme.colors,
34
- spacing = theme.spacing,
35
- borders = theme.borders,
36
- themeName = theme.key;
31
+ const {
32
+ typography,
33
+ colors,
34
+ spacing,
35
+ borders,
36
+ key: themeName
37
+ } = theme;
37
38
  const themeSpecificStyle = {
38
39
  canvas: {
39
40
  primaryColor: theme['ic-brand-font-color-dark']
@@ -41,35 +42,35 @@ const generateComponentTheme = theme => {
41
42
  };
42
43
  const componentVariables = {
43
44
  ...typography,
44
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
45
- h1FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXXLarge,
46
- h1FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
47
- h1FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
48
- h2FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXLarge,
49
- h2FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
50
- h2FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
51
- h3FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
52
- h3FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
53
- h3FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
54
- h4FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
55
- h4FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
56
- h4FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
57
- h5FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
58
- h5FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
59
- h5FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
60
- h6FontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXSmall,
61
- h6FontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
62
- h6FontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
63
- primaryInverseColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
64
- primaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
65
- secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey4570,
66
- secondaryInverseColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1111,
67
- borderPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
68
- borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey3045,
69
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
70
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
71
- aiTextTopGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.violet4570,
72
- aiTextBottomGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.sea4570
45
+ lineHeight: typography?.lineHeightCondensed,
46
+ h1FontSize: typography?.fontSizeXXLarge,
47
+ h1FontWeight: typography?.fontWeightBold,
48
+ h1FontFamily: typography?.fontFamily,
49
+ h2FontSize: typography?.fontSizeXLarge,
50
+ h2FontWeight: typography?.fontWeightNormal,
51
+ h2FontFamily: typography?.fontFamily,
52
+ h3FontSize: typography?.fontSizeLarge,
53
+ h3FontWeight: typography?.fontWeightBold,
54
+ h3FontFamily: typography?.fontFamily,
55
+ h4FontSize: typography?.fontSizeMedium,
56
+ h4FontWeight: typography?.fontWeightBold,
57
+ h4FontFamily: typography?.fontFamily,
58
+ h5FontSize: typography?.fontSizeSmall,
59
+ h5FontWeight: typography?.fontWeightNormal,
60
+ h5FontFamily: typography?.fontFamily,
61
+ h6FontSize: typography?.fontSizeXSmall,
62
+ h6FontWeight: typography?.fontWeightNormal,
63
+ h6FontFamily: typography?.fontFamily,
64
+ primaryInverseColor: colors?.contrasts?.white1010,
65
+ primaryColor: colors?.contrasts?.grey125125,
66
+ secondaryColor: colors?.contrasts?.grey4570,
67
+ secondaryInverseColor: colors?.contrasts?.grey1111,
68
+ borderPadding: spacing?.xxxSmall,
69
+ borderColor: colors?.contrasts?.grey3045,
70
+ borderWidth: borders?.widthSmall,
71
+ borderStyle: borders?.style,
72
+ aiTextTopGradientColor: colors?.contrasts?.violet4570,
73
+ aiTextBottomGradientColor: colors?.contrasts?.sea4570
73
74
  };
74
75
  return {
75
76
  ...componentVariables,
package/es/Heading/v2/index.js CHANGED
@@ -1,6 +1,5 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["border", "children", "color", "level", "margin", "elementRef", "makeStyles", "variant"];
3
- var _dec, _class, _Heading, _IgniteaiLogoInstUIIc;
1
+ var _dec, _class;
2
+ import "core-js/modules/es.array.includes.js";
4
3
  /*
5
4
  * The MIT License (MIT)
6
5
  *
@@ -91,41 +90,48 @@ const levelToAIHorizontalIconSize = {
91
90
  category: components
92
91
  ---
93
92
  **/
94
- let Heading = (_dec = withStyle(generateStyle), _dec(_class = (_Heading = class Heading extends Component {
95
- constructor(...args) {
96
- super(...args);
97
- this.ref = null;
98
- this.handleRef = el => {
99
- const elementRef = this.props.elementRef;
100
- this.ref = el;
101
- if (typeof elementRef === 'function') {
102
- elementRef(el);
103
- }
104
- };
105
- }
93
+ let Heading = (_dec = withStyle(generateStyle), _dec(_class = class Heading extends Component {
94
+ static displayName = "Heading";
95
+ static componentId = 'Heading';
96
+ static allowedProps = allowedProps;
97
+ static defaultProps = {
98
+ children: null,
99
+ border: 'none',
100
+ color: 'primary'
101
+ };
102
+ ref = null;
103
+ handleRef = el => {
104
+ const {
105
+ elementRef
106
+ } = this.props;
107
+ this.ref = el;
108
+ if (typeof elementRef === 'function') {
109
+ elementRef(el);
110
+ }
111
+ };
106
112
  checkProps() {
107
- const _this$props = this.props,
108
- variant = _this$props.variant,
109
- as = _this$props.as;
113
+ const {
114
+ variant,
115
+ as
116
+ } = this.props;
110
117
  if (variant) {
111
118
  if (as) {}
112
119
  }
113
120
  }
114
121
  componentDidMount() {
115
- var _this$props$makeStyle, _this$props2;
116
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
122
+ this.props.makeStyles?.();
117
123
  this.checkProps();
118
124
  }
119
125
  componentDidUpdate() {
120
- var _this$props$makeStyle2, _this$props3;
121
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
126
+ this.props.makeStyles?.();
122
127
  this.checkProps();
123
128
  }
124
129
  getIconSize(forAIHorizontal = false) {
125
- const _this$props4 = this.props,
126
- variant = _this$props4.variant,
127
- level = _this$props4.level,
128
- as = _this$props4.as;
130
+ const {
131
+ variant,
132
+ level,
133
+ as
134
+ } = this.props;
129
135
  if (variant) {
130
136
  return forAIHorizontal ? variantToAIHorizontalIconSize[variant] : variantToIconSize[variant];
131
137
  }
@@ -139,56 +145,53 @@ let Heading = (_dec = withStyle(generateStyle), _dec(_class = (_Heading = class
139
145
  return 'md';
140
146
  }
141
147
  renderContent() {
142
- const _this$props5 = this.props,
143
- children = _this$props5.children,
144
- renderIcon = _this$props5.renderIcon,
145
- aiVariant = _this$props5.aiVariant;
148
+ const {
149
+ children,
150
+ renderIcon,
151
+ aiVariant
152
+ } = this.props;
146
153
  if (renderIcon && !aiVariant) {
147
- var _this$props$styles;
148
154
  return _jsxs("span", {
149
- css: [(_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.withIcon],
155
+ css: [this.props.styles?.withIcon],
150
156
  "aria-hidden": "true",
151
157
  children: [renderIconWithProps(renderIcon, this.getIconSize(), 'inherit'), children]
152
158
  });
153
159
  }
154
160
  if (aiVariant === 'stacked') {
155
- var _this$props$styles2, _this$props$styles3, _this$props$styles4;
156
161
  return _jsxs("span", {
157
- css: [(_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.withIcon],
162
+ css: [this.props.styles?.withIcon],
158
163
  "aria-hidden": "true",
159
164
  children: [_jsxs("span", {
160
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.igniteAIStacked,
161
- children: [_IgniteaiLogoInstUIIc || (_IgniteaiLogoInstUIIc = _jsx(IgniteaiLogoInstUIIcon, {
165
+ css: this.props.styles?.igniteAIStacked,
166
+ children: [_jsx(IgniteaiLogoInstUIIcon, {
162
167
  color: "ai",
163
168
  size: "sm"
164
- })), _jsx("span", {
165
- css: (_this$props$styles4 = this.props.styles) === null || _this$props$styles4 === void 0 ? void 0 : _this$props$styles4.igniteAI,
169
+ }), _jsx("span", {
170
+ css: this.props.styles?.igniteAI,
166
171
  children: "IgniteAI"
167
172
  })]
168
173
  }), children]
169
174
  });
170
175
  }
171
176
  if (aiVariant === 'horizontal') {
172
- var _this$props$styles5, _this$props$styles6, _this$props$styles7;
173
177
  return _jsxs("span", {
174
- css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.withIcon,
178
+ css: this.props.styles?.withIcon,
175
179
  "aria-hidden": "true",
176
180
  children: [_jsxs("span", {
177
- css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.igniteAIHorizontal,
181
+ css: this.props.styles?.igniteAIHorizontal,
178
182
  children: [_jsx(IgniteaiLogoInstUIIcon, {
179
183
  color: "ai",
180
184
  size: this.getIconSize(true)
181
185
  }), _jsx("span", {
182
- css: (_this$props$styles7 = this.props.styles) === null || _this$props$styles7 === void 0 ? void 0 : _this$props$styles7.igniteAI,
186
+ css: this.props.styles?.igniteAI,
183
187
  children: "IgniteAI"
184
188
  })]
185
189
  }), children]
186
190
  });
187
191
  }
188
192
  if (aiVariant === 'iconOnly') {
189
- var _this$props$styles8;
190
193
  return _jsxs("span", {
191
- css: (_this$props$styles8 = this.props.styles) === null || _this$props$styles8 === void 0 ? void 0 : _this$props$styles8.withIcon,
194
+ css: this.props.styles?.withIcon,
192
195
  "aria-hidden": "true",
193
196
  children: [_jsx(IgniteaiLogoInstUIIcon, {
194
197
  color: "ai",
@@ -201,30 +204,31 @@ let Heading = (_dec = withStyle(generateStyle), _dec(_class = (_Heading = class
201
204
 
202
205
  //overriding default screen reader functionality is needed to read spans in h tags correctly
203
206
  getAriaLabel() {
204
- const _this$props6 = this.props,
205
- aiVariant = _this$props6.aiVariant,
206
- children = _this$props6.children,
207
- renderIcon = _this$props6.renderIcon;
207
+ const {
208
+ aiVariant,
209
+ children,
210
+ renderIcon
211
+ } = this.props;
208
212
  if (aiVariant === 'stacked' || aiVariant === 'horizontal') {
209
213
  return `IgniteAI, ${children}`;
210
214
  }
211
215
  if (aiVariant === 'iconOnly' || renderIcon) {
212
216
  return `${children}`;
213
217
  }
214
- return void 0;
218
+ return undefined;
215
219
  }
216
220
  render() {
217
- var _this$props$styles9;
218
- const _this$props7 = this.props,
219
- border = _this$props7.border,
220
- children = _this$props7.children,
221
- color = _this$props7.color,
222
- level = _this$props7.level,
223
- margin = _this$props7.margin,
224
- elementRef = _this$props7.elementRef,
225
- makeStyles = _this$props7.makeStyles,
226
- variant = _this$props7.variant,
227
- props = _objectWithoutProperties(_this$props7, _excluded);
221
+ const {
222
+ border,
223
+ children,
224
+ color,
225
+ level,
226
+ margin,
227
+ elementRef,
228
+ makeStyles,
229
+ variant,
230
+ ...props
231
+ } = this.props;
228
232
  let ElementType = 'h2';
229
233
  if (variant) {
230
234
  // TODO deprecated, remove. `variant` should not set DOM level
@@ -249,7 +253,7 @@ let Heading = (_dec = withStyle(generateStyle), _dec(_class = (_Heading = class
249
253
  return _jsx(View, {
250
254
  "aria-label": this.getAriaLabel(),
251
255
  ...passthroughProps(props),
252
- css: (_this$props$styles9 = this.props.styles) === null || _this$props$styles9 === void 0 ? void 0 : _this$props$styles9.heading,
256
+ css: this.props.styles?.heading,
253
257
  as: ElementType,
254
258
  elementRef: this.handleRef,
255
259
  margin: margin,
@@ -257,10 +261,6 @@ let Heading = (_dec = withStyle(generateStyle), _dec(_class = (_Heading = class
257
261
  children: this.renderContent()
258
262
  });
259
263
  }
260
- }, _Heading.displayName = "Heading", _Heading.componentId = 'Heading', _Heading.allowedProps = allowedProps, _Heading.defaultProps = {
261
- children: null,
262
- border: 'none',
263
- color: 'primary'
264
- }, _Heading)) || _class);
264
+ }) || _class);
265
265
  export default Heading;
266
266
  export { Heading };
package/es/Heading/v2/styles.js CHANGED
@@ -1,3 +1,4 @@
1
+ import "core-js/modules/es.array.includes.js";
1
2
  /*
2
3
  * The MIT License (MIT)
3
4
  *
@@ -32,11 +33,13 @@
32
33
  * @return {Object} The final style object, which will be used in the component
33
34
  */
34
35
  const generateStyle = (componentTheme, props) => {
35
- const level = props.level,
36
- color = props.color,
37
- border = props.border,
38
- variant = props.variant,
39
- aiVariant = props.aiVariant;
36
+ const {
37
+ level,
38
+ color,
39
+ border,
40
+ variant,
41
+ aiVariant
42
+ } = props;
40
43
  const variants = {
41
44
  titlePageDesktop: {
42
45
  fontStyle: 'normal',