@instructure/ui-heading 11.7.3-snapshot-25 → 11.7.3-snapshot-27

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