@instructure/ui-link 8.18.0 → 8.18.1-snapshot.0

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/LICENSE.md +27 -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 +19 -18
package/LICENSE.md ADDED
@@ -0,0 +1,27 @@
1
+ ---
2
+ title: The MIT License (MIT)
3
+ category: Getting Started
4
+ order: 9
5
+ ---
6
+
7
+ # The MIT License (MIT)
8
+
9
+ Copyright (c) 2015 Instructure, Inc.
10
+
11
+ **Permission is hereby granted, free of charge, to any person obtaining a copy
12
+ of this software and associated documentation files (the "Software"), to deal
13
+ in the Software without restriction, including without limitation the rights
14
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15
+ copies of the Software, and to permit persons to whom the Software is
16
+ furnished to do so, subject to the following conditions.**
17
+
18
+ The above copyright notice and this permission notice shall be included in all
19
+ copies or substantial portions of the Software.
20
+
21
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
27
+ SOFTWARE.
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.18.0",
3
+ "version": "8.18.1-snapshot.0+435c9ae79",
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.18.0",
28
- "@instructure/emotion": "8.18.0",
29
- "@instructure/shared-types": "8.18.0",
30
- "@instructure/ui-a11y-utils": "8.18.0",
31
- "@instructure/ui-color-utils": "8.18.0",
32
- "@instructure/ui-dom-utils": "8.18.0",
33
- "@instructure/ui-icons": "8.18.0",
34
- "@instructure/ui-prop-types": "8.18.0",
35
- "@instructure/ui-react-utils": "8.18.0",
36
- "@instructure/ui-testable": "8.18.0",
37
- "@instructure/ui-view": "8.18.0",
27
+ "@instructure/console": "8.18.1-snapshot.0+435c9ae79",
28
+ "@instructure/emotion": "8.18.1-snapshot.0+435c9ae79",
29
+ "@instructure/shared-types": "8.18.1-snapshot.0+435c9ae79",
30
+ "@instructure/ui-a11y-utils": "8.18.1-snapshot.0+435c9ae79",
31
+ "@instructure/ui-color-utils": "8.18.1-snapshot.0+435c9ae79",
32
+ "@instructure/ui-dom-utils": "8.18.1-snapshot.0+435c9ae79",
33
+ "@instructure/ui-icons": "8.18.1-snapshot.0+435c9ae79",
34
+ "@instructure/ui-prop-types": "8.18.1-snapshot.0+435c9ae79",
35
+ "@instructure/ui-react-utils": "8.18.1-snapshot.0+435c9ae79",
36
+ "@instructure/ui-testable": "8.18.1-snapshot.0+435c9ae79",
37
+ "@instructure/ui-view": "8.18.1-snapshot.0+435c9ae79",
38
38
  "prop-types": "^15"
39
39
  },
40
40
  "devDependencies": {
41
- "@instructure/ui-babel-preset": "8.18.0",
42
- "@instructure/ui-test-locator": "8.18.0",
43
- "@instructure/ui-test-queries": "8.18.0",
44
- "@instructure/ui-test-utils": "8.18.0",
45
- "@instructure/ui-themes": "8.18.0"
41
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.0+435c9ae79",
42
+ "@instructure/ui-test-locator": "8.18.1-snapshot.0+435c9ae79",
43
+ "@instructure/ui-test-queries": "8.18.1-snapshot.0+435c9ae79",
44
+ "@instructure/ui-test-utils": "8.18.1-snapshot.0+435c9ae79",
45
+ "@instructure/ui-themes": "8.18.1-snapshot.0+435c9ae79"
46
46
  },
47
47
  "peerDependencies": {
48
48
  "react": ">=16.8 <=17"
@@ -50,5 +50,6 @@
50
50
  "publishConfig": {
51
51
  "access": "public"
52
52
  },
53
- "sideEffects": false
53
+ "sideEffects": false,
54
+ "gitHead": "435c9ae794c15e2bd103f700f8c4e946d91c1b59"
54
55
  }