@instructure/ui-link 8.17.1-snapshot.21 → 8.17.1-snapshot.30

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 (6) hide show
  1. package/es/Link/index.js +14 -22
  2. package/es/Link/theme.js +11 -11
  3. package/lib/Link/index.js +14 -22
  4. package/lib/Link/theme.js +11 -11
  5. package/package.json +18 -18
  6. package/tsconfig.build.tsbuildinfo +1 -1
package/es/Link/index.js CHANGED
@@ -108,15 +108,11 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
108
108
  }
109
109
 
110
110
  componentDidMount() {
111
- var _this$props$makeStyle, _this$props;
112
-
113
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
111
+ this.props.makeStyles?.(this.makeStyleProps());
114
112
  }
115
113
 
116
114
  componentDidUpdate() {
117
- var _this$props$makeStyle2, _this$props2;
118
-
119
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
115
+ this.props.makeStyles?.(this.makeStyleProps());
120
116
  }
121
117
 
122
118
  get containsTruncateText() {
@@ -173,28 +169,24 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
173
169
  }
174
170
 
175
171
  renderIcon() {
176
- var _this$props$styles;
177
-
178
172
  warn( // if display prop is used, warn about icon or TruncateText
179
173
  this.props.display === void 0, '[Link] Using the display property with an icon may cause layout issues.');
180
174
  return jsx("span", {
181
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
175
+ css: this.props.styles?.icon
182
176
  }, callRenderProp(this.props.renderIcon));
183
177
  }
184
178
 
185
179
  render() {
186
- var _this$props$styles2;
187
-
188
- const _this$props3 = this.props,
189
- children = _this$props3.children,
190
- onClick = _this$props3.onClick,
191
- color = _this$props3.color,
192
- href = _this$props3.href,
193
- margin = _this$props3.margin,
194
- renderIcon = _this$props3.renderIcon,
195
- iconPlacement = _this$props3.iconPlacement,
196
- isWithinText = _this$props3.isWithinText,
197
- props = _objectWithoutProperties(_this$props3, _excluded);
180
+ const _this$props = this.props,
181
+ children = _this$props.children,
182
+ onClick = _this$props.onClick,
183
+ color = _this$props.color,
184
+ href = _this$props.href,
185
+ margin = _this$props.margin,
186
+ renderIcon = _this$props.renderIcon,
187
+ iconPlacement = _this$props.iconPlacement,
188
+ isWithinText = _this$props.isWithinText,
189
+ props = _objectWithoutProperties(_this$props, _excluded);
198
190
 
199
191
  const interaction = this.interaction;
200
192
  const isDisabled = interaction === 'disabled';
@@ -214,7 +206,7 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
214
206
  role: role,
215
207
  type: type,
216
208
  tabIndex: tabIndex,
217
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link
209
+ css: this.props.styles?.link
218
210
  }), renderIcon && iconPlacement === 'start' && this.renderIcon(), children, renderIcon && iconPlacement === 'end' && this.renderIcon());
219
211
  }
220
212
 
package/es/Link/theme.js CHANGED
@@ -49,23 +49,23 @@ const generateComponentTheme = theme => {
49
49
  }; // maps the theme variables to component specific style variables
50
50
 
51
51
  const componentVariables = {
52
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
53
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
54
- color: colors === null || colors === void 0 ? void 0 : colors.textLink,
52
+ fontFamily: typography?.fontFamily,
53
+ fontWeight: typography?.fontWeightNormal,
54
+ color: colors?.textLink,
55
55
  textDecorationWithinText: 'underline',
56
56
  hoverTextDecorationWithinText: 'none',
57
57
  textDecorationOutsideText: 'none',
58
58
  hoverTextDecorationOutsideText: 'underline',
59
- focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
60
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
61
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
62
- hoverColor: darken(colors === null || colors === void 0 ? void 0 : colors.textLink, 10),
63
- colorInverse: colors === null || colors === void 0 ? void 0 : colors.textLight,
64
- focusInverseOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
65
- focusInverseIconOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
59
+ focusOutlineWidth: borders?.widthMedium,
60
+ focusOutlineColor: colors?.borderBrand,
61
+ focusOutlineStyle: borders?.style,
62
+ hoverColor: darken(colors?.textLink, 10),
63
+ colorInverse: colors?.textLight,
64
+ focusInverseOutlineColor: colors?.borderLightest,
65
+ focusInverseIconOutlineColor: colors?.borderLightest,
66
66
  iconSize: '1.125em',
67
67
  // make icon slightly larger than inherited font-size,
68
- iconPlusTextMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
68
+ iconPlusTextMargin: spacing?.xxSmall
69
69
  };
70
70
  return { ...componentVariables,
71
71
  ...themeSpecificStyle[themeName]
package/lib/Link/index.js CHANGED
@@ -115,15 +115,11 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
115
115
  }
116
116
 
117
117
  componentDidMount() {
118
- var _this$props$makeStyle, _this$props;
119
-
120
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
118
+ this.props.makeStyles?.(this.makeStyleProps());
121
119
  }
122
120
 
123
121
  componentDidUpdate() {
124
- var _this$props$makeStyle2, _this$props2;
125
-
126
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
122
+ this.props.makeStyles?.(this.makeStyleProps());
127
123
  }
128
124
 
129
125
  get containsTruncateText() {
@@ -182,28 +178,24 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
182
178
  }
183
179
 
184
180
  renderIcon() {
185
- var _this$props$styles;
186
-
187
181
  (0, _console.logWarn)( // if display prop is used, warn about icon or TruncateText
188
182
  this.props.display === void 0, '[Link] Using the display property with an icon may cause layout issues.');
189
183
  return (0, _emotion.jsx)("span", {
190
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
184
+ css: this.props.styles?.icon
191
185
  }, (0, _callRenderProp.callRenderProp)(this.props.renderIcon));
192
186
  }
193
187
 
194
188
  render() {
195
- var _this$props$styles2;
196
-
197
- const _this$props3 = this.props,
198
- children = _this$props3.children,
199
- onClick = _this$props3.onClick,
200
- color = _this$props3.color,
201
- href = _this$props3.href,
202
- margin = _this$props3.margin,
203
- renderIcon = _this$props3.renderIcon,
204
- iconPlacement = _this$props3.iconPlacement,
205
- isWithinText = _this$props3.isWithinText,
206
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
189
+ const _this$props = this.props,
190
+ children = _this$props.children,
191
+ onClick = _this$props.onClick,
192
+ color = _this$props.color,
193
+ href = _this$props.href,
194
+ margin = _this$props.margin,
195
+ renderIcon = _this$props.renderIcon,
196
+ iconPlacement = _this$props.iconPlacement,
197
+ isWithinText = _this$props.isWithinText,
198
+ props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
207
199
  const interaction = this.interaction;
208
200
  const isDisabled = interaction === 'disabled';
209
201
  const role = onClick && this.element !== 'button' ? 'button' : void 0;
@@ -222,7 +214,7 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
222
214
  role: role,
223
215
  type: type,
224
216
  tabIndex: tabIndex,
225
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link
217
+ css: this.props.styles?.link
226
218
  }), renderIcon && iconPlacement === 'start' && this.renderIcon(), children, renderIcon && iconPlacement === 'end' && this.renderIcon());
227
219
  }
228
220
 
package/lib/Link/theme.js CHANGED
@@ -57,23 +57,23 @@ const generateComponentTheme = theme => {
57
57
  }; // maps the theme variables to component specific style variables
58
58
 
59
59
  const componentVariables = {
60
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
61
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
62
- color: colors === null || colors === void 0 ? void 0 : colors.textLink,
60
+ fontFamily: typography?.fontFamily,
61
+ fontWeight: typography?.fontWeightNormal,
62
+ color: colors?.textLink,
63
63
  textDecorationWithinText: 'underline',
64
64
  hoverTextDecorationWithinText: 'none',
65
65
  textDecorationOutsideText: 'none',
66
66
  hoverTextDecorationOutsideText: 'underline',
67
- focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
68
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
69
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
70
- hoverColor: (0, _darken.darken)(colors === null || colors === void 0 ? void 0 : colors.textLink, 10),
71
- colorInverse: colors === null || colors === void 0 ? void 0 : colors.textLight,
72
- focusInverseOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
73
- focusInverseIconOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderLightest,
67
+ focusOutlineWidth: borders?.widthMedium,
68
+ focusOutlineColor: colors?.borderBrand,
69
+ focusOutlineStyle: borders?.style,
70
+ hoverColor: (0, _darken.darken)(colors?.textLink, 10),
71
+ colorInverse: colors?.textLight,
72
+ focusInverseOutlineColor: colors?.borderLightest,
73
+ focusInverseIconOutlineColor: colors?.borderLightest,
74
74
  iconSize: '1.125em',
75
75
  // make icon slightly larger than inherited font-size,
76
- iconPlusTextMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
76
+ iconPlusTextMargin: spacing?.xxSmall
77
77
  };
78
78
  return { ...componentVariables,
79
79
  ...themeSpecificStyle[themeName]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-link",
3
- "version": "8.17.1-snapshot.21+79d490548",
3
+ "version": "8.17.1-snapshot.30+cb1322c25",
4
4
  "description": "A component for creating links",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,25 +24,25 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.13.10",
27
- "@instructure/console": "8.17.1-snapshot.21+79d490548",
28
- "@instructure/emotion": "8.17.1-snapshot.21+79d490548",
29
- "@instructure/shared-types": "8.17.1-snapshot.21+79d490548",
30
- "@instructure/ui-a11y-utils": "8.17.1-snapshot.21+79d490548",
31
- "@instructure/ui-color-utils": "8.17.1-snapshot.21+79d490548",
32
- "@instructure/ui-dom-utils": "8.17.1-snapshot.21+79d490548",
33
- "@instructure/ui-icons": "8.17.1-snapshot.21+79d490548",
34
- "@instructure/ui-prop-types": "8.17.1-snapshot.21+79d490548",
35
- "@instructure/ui-react-utils": "8.17.1-snapshot.21+79d490548",
36
- "@instructure/ui-testable": "8.17.1-snapshot.21+79d490548",
37
- "@instructure/ui-view": "8.17.1-snapshot.21+79d490548",
27
+ "@instructure/console": "8.17.1-snapshot.30+cb1322c25",
28
+ "@instructure/emotion": "8.17.1-snapshot.30+cb1322c25",
29
+ "@instructure/shared-types": "8.17.1-snapshot.30+cb1322c25",
30
+ "@instructure/ui-a11y-utils": "8.17.1-snapshot.30+cb1322c25",
31
+ "@instructure/ui-color-utils": "8.17.1-snapshot.30+cb1322c25",
32
+ "@instructure/ui-dom-utils": "8.17.1-snapshot.30+cb1322c25",
33
+ "@instructure/ui-icons": "8.17.1-snapshot.30+cb1322c25",
34
+ "@instructure/ui-prop-types": "8.17.1-snapshot.30+cb1322c25",
35
+ "@instructure/ui-react-utils": "8.17.1-snapshot.30+cb1322c25",
36
+ "@instructure/ui-testable": "8.17.1-snapshot.30+cb1322c25",
37
+ "@instructure/ui-view": "8.17.1-snapshot.30+cb1322c25",
38
38
  "prop-types": "^15"
39
39
  },
40
40
  "devDependencies": {
41
- "@instructure/ui-babel-preset": "8.17.1-snapshot.21+79d490548",
42
- "@instructure/ui-test-locator": "8.17.1-snapshot.21+79d490548",
43
- "@instructure/ui-test-queries": "8.17.1-snapshot.21+79d490548",
44
- "@instructure/ui-test-utils": "8.17.1-snapshot.21+79d490548",
45
- "@instructure/ui-themes": "8.17.1-snapshot.21+79d490548"
41
+ "@instructure/ui-babel-preset": "8.17.1-snapshot.30+cb1322c25",
42
+ "@instructure/ui-test-locator": "8.17.1-snapshot.30+cb1322c25",
43
+ "@instructure/ui-test-queries": "8.17.1-snapshot.30+cb1322c25",
44
+ "@instructure/ui-test-utils": "8.17.1-snapshot.30+cb1322c25",
45
+ "@instructure/ui-themes": "8.17.1-snapshot.30+cb1322c25"
46
46
  },
47
47
  "peerDependencies": {
48
48
  "react": ">=16.8 <=17"
@@ -51,5 +51,5 @@
51
51
  "access": "public"
52
52
  },
53
53
  "sideEffects": false,
54
- "gitHead": "79d490548a0736feb2a7232bf5918857317b178b"
54
+ "gitHead": "cb1322c25257139750149d7a817f1fb32571c1ed"
55
55
  }