@instructure/ui-link 8.17.1-snapshot.82 → 8.18.1-snapshot.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/es/Link/index.js +22 -14
  3. package/es/Link/theme.js +11 -11
  4. package/lib/Link/index.js +22 -14
  5. package/lib/Link/theme.js +11 -11
  6. package/package.json +18 -18
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
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
+ # [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-link
9
+
6
10
  # [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
7
11
 
8
12
  ### Bug Fixes
package/es/Link/index.js CHANGED
@@ -108,11 +108,15 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
108
108
  }
109
109
 
110
110
  componentDidMount() {
111
- this.props.makeStyles?.(this.makeStyleProps());
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());
112
114
  }
113
115
 
114
116
  componentDidUpdate() {
115
- this.props.makeStyles?.(this.makeStyleProps());
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());
116
120
  }
117
121
 
118
122
  get containsTruncateText() {
@@ -169,24 +173,28 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
169
173
  }
170
174
 
171
175
  renderIcon() {
176
+ var _this$props$styles;
177
+
172
178
  warn( // if display prop is used, warn about icon or TruncateText
173
179
  this.props.display === void 0, '[Link] Using the display property with an icon may cause layout issues.');
174
180
  return jsx("span", {
175
- css: this.props.styles?.icon
181
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
176
182
  }, callRenderProp(this.props.renderIcon));
177
183
  }
178
184
 
179
185
  render() {
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);
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);
190
198
 
191
199
  const interaction = this.interaction;
192
200
  const isDisabled = interaction === 'disabled';
@@ -206,7 +214,7 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
206
214
  role: role,
207
215
  type: type,
208
216
  tabIndex: tabIndex,
209
- css: this.props.styles?.link
217
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link
210
218
  }), renderIcon && iconPlacement === 'start' && this.renderIcon(), children, renderIcon && iconPlacement === 'end' && this.renderIcon());
211
219
  }
212
220
 
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?.fontFamily,
53
- fontWeight: typography?.fontWeightNormal,
54
- color: colors?.textLink,
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,
55
55
  textDecorationWithinText: 'underline',
56
56
  hoverTextDecorationWithinText: 'none',
57
57
  textDecorationOutsideText: 'none',
58
58
  hoverTextDecorationOutsideText: 'underline',
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,
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,
66
66
  iconSize: '1.125em',
67
67
  // make icon slightly larger than inherited font-size,
68
- iconPlusTextMargin: spacing?.xxSmall
68
+ iconPlusTextMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
69
69
  };
70
70
  return { ...componentVariables,
71
71
  ...themeSpecificStyle[themeName]
package/lib/Link/index.js CHANGED
@@ -115,11 +115,15 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
115
115
  }
116
116
 
117
117
  componentDidMount() {
118
- this.props.makeStyles?.(this.makeStyleProps());
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());
119
121
  }
120
122
 
121
123
  componentDidUpdate() {
122
- this.props.makeStyles?.(this.makeStyleProps());
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());
123
127
  }
124
128
 
125
129
  get containsTruncateText() {
@@ -178,24 +182,28 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
178
182
  }
179
183
 
180
184
  renderIcon() {
185
+ var _this$props$styles;
186
+
181
187
  (0, _console.logWarn)( // if display prop is used, warn about icon or TruncateText
182
188
  this.props.display === void 0, '[Link] Using the display property with an icon may cause layout issues.');
183
189
  return (0, _emotion.jsx)("span", {
184
- css: this.props.styles?.icon
190
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon
185
191
  }, (0, _callRenderProp.callRenderProp)(this.props.renderIcon));
186
192
  }
187
193
 
188
194
  render() {
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);
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);
199
207
  const interaction = this.interaction;
200
208
  const isDisabled = interaction === 'disabled';
201
209
  const role = onClick && this.element !== 'button' ? 'button' : void 0;
@@ -214,7 +222,7 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
214
222
  role: role,
215
223
  type: type,
216
224
  tabIndex: tabIndex,
217
- css: this.props.styles?.link
225
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link
218
226
  }), renderIcon && iconPlacement === 'start' && this.renderIcon(), children, renderIcon && iconPlacement === 'end' && this.renderIcon());
219
227
  }
220
228
 
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?.fontFamily,
61
- fontWeight: typography?.fontWeightNormal,
62
- color: colors?.textLink,
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,
63
63
  textDecorationWithinText: 'underline',
64
64
  hoverTextDecorationWithinText: 'none',
65
65
  textDecorationOutsideText: 'none',
66
66
  hoverTextDecorationOutsideText: 'underline',
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,
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,
74
74
  iconSize: '1.125em',
75
75
  // make icon slightly larger than inherited font-size,
76
- iconPlusTextMargin: spacing?.xxSmall
76
+ iconPlusTextMargin: spacing === null || spacing === void 0 ? void 0 : 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.82+96244a097",
3
+ "version": "8.18.1-snapshot.1+669aa5892",
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.82+96244a097",
28
- "@instructure/emotion": "8.17.1-snapshot.82+96244a097",
29
- "@instructure/shared-types": "8.17.1-snapshot.82+96244a097",
30
- "@instructure/ui-a11y-utils": "8.17.1-snapshot.82+96244a097",
31
- "@instructure/ui-color-utils": "8.17.1-snapshot.82+96244a097",
32
- "@instructure/ui-dom-utils": "8.17.1-snapshot.82+96244a097",
33
- "@instructure/ui-icons": "8.17.1-snapshot.82+96244a097",
34
- "@instructure/ui-prop-types": "8.17.1-snapshot.82+96244a097",
35
- "@instructure/ui-react-utils": "8.17.1-snapshot.82+96244a097",
36
- "@instructure/ui-testable": "8.17.1-snapshot.82+96244a097",
37
- "@instructure/ui-view": "8.17.1-snapshot.82+96244a097",
27
+ "@instructure/console": "8.18.1-snapshot.1+669aa5892",
28
+ "@instructure/emotion": "8.18.1-snapshot.1+669aa5892",
29
+ "@instructure/shared-types": "8.18.1-snapshot.1+669aa5892",
30
+ "@instructure/ui-a11y-utils": "8.18.1-snapshot.1+669aa5892",
31
+ "@instructure/ui-color-utils": "8.18.1-snapshot.1+669aa5892",
32
+ "@instructure/ui-dom-utils": "8.18.1-snapshot.1+669aa5892",
33
+ "@instructure/ui-icons": "8.18.1-snapshot.1+669aa5892",
34
+ "@instructure/ui-prop-types": "8.18.1-snapshot.1+669aa5892",
35
+ "@instructure/ui-react-utils": "8.18.1-snapshot.1+669aa5892",
36
+ "@instructure/ui-testable": "8.18.1-snapshot.1+669aa5892",
37
+ "@instructure/ui-view": "8.18.1-snapshot.1+669aa5892",
38
38
  "prop-types": "^15"
39
39
  },
40
40
  "devDependencies": {
41
- "@instructure/ui-babel-preset": "8.17.1-snapshot.82+96244a097",
42
- "@instructure/ui-test-locator": "8.17.1-snapshot.82+96244a097",
43
- "@instructure/ui-test-queries": "8.17.1-snapshot.82+96244a097",
44
- "@instructure/ui-test-utils": "8.17.1-snapshot.82+96244a097",
45
- "@instructure/ui-themes": "8.17.1-snapshot.82+96244a097"
41
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.1+669aa5892",
42
+ "@instructure/ui-test-locator": "8.18.1-snapshot.1+669aa5892",
43
+ "@instructure/ui-test-queries": "8.18.1-snapshot.1+669aa5892",
44
+ "@instructure/ui-test-utils": "8.18.1-snapshot.1+669aa5892",
45
+ "@instructure/ui-themes": "8.18.1-snapshot.1+669aa5892"
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": "96244a097dffef5f10bbe7979c580581c787083e"
54
+ "gitHead": "669aa58926b123028bcb9e39427d36910b78b0d1"
55
55
  }