@instructure/ui-link 8.13.1-snapshot.10 → 8.13.1-snapshot.14
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.
- package/es/Link/LinkLocator.js +2 -1
- package/es/Link/__examples__/Link.examples.js +2 -2
- package/es/Link/index.js +19 -14
- package/es/Link/props.js +0 -58
- package/lib/Link/LinkLocator.js +1 -0
- package/lib/Link/__examples__/Link.examples.js +2 -2
- package/lib/Link/index.js +19 -14
- package/lib/Link/props.js +0 -58
- package/package.json +18 -18
- package/src/Link/__examples__/Link.examples.ts +6 -7
- package/src/Link/index.tsx +15 -20
- package/src/Link/props.ts +72 -51
- package/types/Link/__examples__/Link.examples.d.ts +4 -3
- package/types/Link/__examples__/Link.examples.d.ts.map +1 -1
- package/types/Link/index.d.ts +19 -17
- package/types/Link/index.d.ts.map +1 -1
- package/types/Link/props.d.ts +57 -6
- package/types/Link/props.d.ts.map +1 -1
package/es/Link/LinkLocator.js
CHANGED
|
@@ -23,7 +23,8 @@
|
|
|
23
23
|
*/
|
|
24
24
|
import { locator } from '@instructure/ui-test-locator';
|
|
25
25
|
import { find } from '@instructure/ui-test-queries';
|
|
26
|
-
import { Link } from './index';
|
|
26
|
+
import { Link } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
27
|
+
|
|
27
28
|
export const LinkLocator = locator(Link.selector, {
|
|
28
29
|
click: async function (element) {
|
|
29
30
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
@@ -31,7 +31,7 @@ export default {
|
|
|
31
31
|
iconPlacement: [null, 'start', 'end'],
|
|
32
32
|
renderIcon: [null, IconTrashSolid]
|
|
33
33
|
},
|
|
34
|
-
getComponentProps:
|
|
34
|
+
getComponentProps: () => {
|
|
35
35
|
return {
|
|
36
36
|
href: 'http://instructure.design'
|
|
37
37
|
};
|
|
@@ -42,6 +42,6 @@ export default {
|
|
|
42
42
|
};
|
|
43
43
|
},
|
|
44
44
|
filter: props => {
|
|
45
|
-
return props.
|
|
45
|
+
return props.iconPlacement && !props.renderIcon || !props.iconPlacement && props.renderIcon || props.disabled;
|
|
46
46
|
}
|
|
47
47
|
};
|
package/es/Link/index.js
CHANGED
|
@@ -44,6 +44,7 @@ import { propTypes, allowedProps } from './props';
|
|
|
44
44
|
---
|
|
45
45
|
category: components
|
|
46
46
|
---
|
|
47
|
+
@tsProps
|
|
47
48
|
**/
|
|
48
49
|
let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Link extends Component {
|
|
49
50
|
constructor() {
|
|
@@ -107,11 +108,15 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
107
108
|
}
|
|
108
109
|
|
|
109
110
|
componentDidMount() {
|
|
110
|
-
|
|
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
114
|
}
|
|
112
115
|
|
|
113
|
-
componentDidUpdate(
|
|
114
|
-
|
|
116
|
+
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
120
|
}
|
|
116
121
|
|
|
117
122
|
get containsTruncateText() {
|
|
@@ -180,22 +185,22 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
|
|
|
180
185
|
render() {
|
|
181
186
|
var _this$props$styles2;
|
|
182
187
|
|
|
183
|
-
const _this$
|
|
184
|
-
children = _this$
|
|
185
|
-
onClick = _this$
|
|
186
|
-
color = _this$
|
|
187
|
-
href = _this$
|
|
188
|
-
margin = _this$
|
|
189
|
-
renderIcon = _this$
|
|
190
|
-
iconPlacement = _this$
|
|
191
|
-
isWithinText = _this$
|
|
192
|
-
props = _objectWithoutProperties(_this$
|
|
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);
|
|
193
198
|
|
|
194
199
|
const interaction = this.interaction;
|
|
195
200
|
const isDisabled = interaction === 'disabled';
|
|
196
201
|
const role = onClick && this.element !== 'button' ? 'button' : void 0;
|
|
197
202
|
const type = this.element === 'button' || this.element === 'input' ? 'button' : void 0;
|
|
198
|
-
const tabIndex = role === 'button' && !isDisabled ?
|
|
203
|
+
const tabIndex = role === 'button' && !isDisabled ? 0 : void 0;
|
|
199
204
|
return jsx(View, Object.assign({}, passthroughProps(props), {
|
|
200
205
|
elementRef: this.handleElementRef,
|
|
201
206
|
as: this.element,
|
package/es/Link/props.js
CHANGED
|
@@ -24,77 +24,19 @@
|
|
|
24
24
|
import PropTypes from 'prop-types';
|
|
25
25
|
import { ThemeablePropTypes } from '@instructure/emotion';
|
|
26
26
|
const propTypes = {
|
|
27
|
-
/**
|
|
28
|
-
* The text and/or icon displayed by the link
|
|
29
|
-
*/
|
|
30
27
|
children: PropTypes.node.isRequired,
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Sets the link's `href` attribute
|
|
34
|
-
*/
|
|
35
28
|
href: PropTypes.string,
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* Designates Link's text color to accommodate light and dark backgrounds
|
|
39
|
-
*/
|
|
40
29
|
color: PropTypes.oneOf(['link', 'link-inverse']),
|
|
41
|
-
|
|
42
|
-
/**
|
|
43
|
-
* Provides a reference to the underlying HTML element
|
|
44
|
-
*/
|
|
45
30
|
elementRef: PropTypes.func,
|
|
46
|
-
|
|
47
|
-
/**
|
|
48
|
-
* The element type to render as (will default to `<a>` if href is provided)
|
|
49
|
-
*/
|
|
50
31
|
as: PropTypes.elementType,
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* Determines if the link is enabled or disabled
|
|
54
|
-
*/
|
|
55
32
|
interaction: PropTypes.oneOf(['enabled', 'disabled']),
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
|
|
59
|
-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
|
|
60
|
-
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
|
|
61
|
-
*/
|
|
62
33
|
margin: ThemeablePropTypes.spacing,
|
|
63
|
-
|
|
64
|
-
/**
|
|
65
|
-
* Add an SVG icon to the Link. Do not add icons directly as
|
|
66
|
-
* children.
|
|
67
|
-
*/
|
|
68
34
|
renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
|
|
69
|
-
|
|
70
|
-
/**
|
|
71
|
-
* Place the icon before or after the text in the Link.
|
|
72
|
-
*/
|
|
73
35
|
iconPlacement: PropTypes.oneOf(['start', 'end']),
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
* Set the CSS display property of the Link element. 'auto' sets no display property.
|
|
77
|
-
*/
|
|
78
36
|
display: PropTypes.oneOf(['auto', 'block', 'inline-block', 'flex', 'inline-flex']),
|
|
79
|
-
|
|
80
|
-
/**
|
|
81
|
-
* Set `false` to remove default underline if Link does not appear inline with text
|
|
82
|
-
*/
|
|
83
37
|
isWithinText: PropTypes.bool,
|
|
84
|
-
|
|
85
|
-
/**
|
|
86
|
-
* Fires when the Link is clicked
|
|
87
|
-
*/
|
|
88
38
|
onClick: PropTypes.func,
|
|
89
|
-
|
|
90
|
-
/**
|
|
91
|
-
* Fires when the Link gains focus
|
|
92
|
-
*/
|
|
93
39
|
onFocus: PropTypes.func,
|
|
94
|
-
|
|
95
|
-
/**
|
|
96
|
-
* Fires when the Link loses focus
|
|
97
|
-
*/
|
|
98
40
|
onBlur: PropTypes.func
|
|
99
41
|
};
|
|
100
42
|
const allowedProps = ['children', 'href', 'color', 'elementRef', 'as', 'interaction', 'margin', 'renderIcon', 'iconPlacement', 'display', 'isWithinText', 'onClick', 'onFocus', 'onBlur'];
|
package/lib/Link/LinkLocator.js
CHANGED
|
@@ -34,6 +34,7 @@ var _index = require("./index");
|
|
|
34
34
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
35
35
|
* SOFTWARE.
|
|
36
36
|
*/
|
|
37
|
+
// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
|
|
37
38
|
const LinkLocator = (0, _locator.locator)(_index.Link.selector, {
|
|
38
39
|
click: async function (element) {
|
|
39
40
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
@@ -39,7 +39,7 @@ var _default = {
|
|
|
39
39
|
iconPlacement: [null, 'start', 'end'],
|
|
40
40
|
renderIcon: [null, _IconTrashSolid.IconTrashSolid]
|
|
41
41
|
},
|
|
42
|
-
getComponentProps:
|
|
42
|
+
getComponentProps: () => {
|
|
43
43
|
return {
|
|
44
44
|
href: 'http://instructure.design'
|
|
45
45
|
};
|
|
@@ -50,7 +50,7 @@ var _default = {
|
|
|
50
50
|
};
|
|
51
51
|
},
|
|
52
52
|
filter: props => {
|
|
53
|
-
return props.
|
|
53
|
+
return props.iconPlacement && !props.renderIcon || !props.iconPlacement && props.renderIcon || props.disabled;
|
|
54
54
|
}
|
|
55
55
|
};
|
|
56
56
|
exports.default = _default;
|
package/lib/Link/index.js
CHANGED
|
@@ -51,6 +51,7 @@ var _dec, _dec2, _class, _class2, _temp;
|
|
|
51
51
|
---
|
|
52
52
|
category: components
|
|
53
53
|
---
|
|
54
|
+
@tsProps
|
|
54
55
|
**/
|
|
55
56
|
let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Link extends _react.Component {
|
|
56
57
|
constructor() {
|
|
@@ -114,11 +115,15 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
|
114
115
|
}
|
|
115
116
|
|
|
116
117
|
componentDidMount() {
|
|
117
|
-
|
|
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
121
|
}
|
|
119
122
|
|
|
120
|
-
componentDidUpdate(
|
|
121
|
-
|
|
123
|
+
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
127
|
}
|
|
123
128
|
|
|
124
129
|
get containsTruncateText() {
|
|
@@ -189,21 +194,21 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
|
|
|
189
194
|
render() {
|
|
190
195
|
var _this$props$styles2;
|
|
191
196
|
|
|
192
|
-
const _this$
|
|
193
|
-
children = _this$
|
|
194
|
-
onClick = _this$
|
|
195
|
-
color = _this$
|
|
196
|
-
href = _this$
|
|
197
|
-
margin = _this$
|
|
198
|
-
renderIcon = _this$
|
|
199
|
-
iconPlacement = _this$
|
|
200
|
-
isWithinText = _this$
|
|
201
|
-
props = (0, _objectWithoutProperties2.default)(_this$
|
|
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);
|
|
202
207
|
const interaction = this.interaction;
|
|
203
208
|
const isDisabled = interaction === 'disabled';
|
|
204
209
|
const role = onClick && this.element !== 'button' ? 'button' : void 0;
|
|
205
210
|
const type = this.element === 'button' || this.element === 'input' ? 'button' : void 0;
|
|
206
|
-
const tabIndex = role === 'button' && !isDisabled ?
|
|
211
|
+
const tabIndex = role === 'button' && !isDisabled ? 0 : void 0;
|
|
207
212
|
return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
|
|
208
213
|
elementRef: this.handleElementRef,
|
|
209
214
|
as: this.element,
|
package/lib/Link/props.js
CHANGED
|
@@ -35,77 +35,19 @@ var _emotion = require("@instructure/emotion");
|
|
|
35
35
|
* SOFTWARE.
|
|
36
36
|
*/
|
|
37
37
|
const propTypes = {
|
|
38
|
-
/**
|
|
39
|
-
* The text and/or icon displayed by the link
|
|
40
|
-
*/
|
|
41
38
|
children: _propTypes.default.node.isRequired,
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Sets the link's `href` attribute
|
|
45
|
-
*/
|
|
46
39
|
href: _propTypes.default.string,
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* Designates Link's text color to accommodate light and dark backgrounds
|
|
50
|
-
*/
|
|
51
40
|
color: _propTypes.default.oneOf(['link', 'link-inverse']),
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* Provides a reference to the underlying HTML element
|
|
55
|
-
*/
|
|
56
41
|
elementRef: _propTypes.default.func,
|
|
57
|
-
|
|
58
|
-
/**
|
|
59
|
-
* The element type to render as (will default to `<a>` if href is provided)
|
|
60
|
-
*/
|
|
61
42
|
as: _propTypes.default.elementType,
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
* Determines if the link is enabled or disabled
|
|
65
|
-
*/
|
|
66
43
|
interaction: _propTypes.default.oneOf(['enabled', 'disabled']),
|
|
67
|
-
|
|
68
|
-
/**
|
|
69
|
-
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
|
|
70
|
-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
|
|
71
|
-
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
|
|
72
|
-
*/
|
|
73
44
|
margin: _emotion.ThemeablePropTypes.spacing,
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
* Add an SVG icon to the Link. Do not add icons directly as
|
|
77
|
-
* children.
|
|
78
|
-
*/
|
|
79
45
|
renderIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
|
|
80
|
-
|
|
81
|
-
/**
|
|
82
|
-
* Place the icon before or after the text in the Link.
|
|
83
|
-
*/
|
|
84
46
|
iconPlacement: _propTypes.default.oneOf(['start', 'end']),
|
|
85
|
-
|
|
86
|
-
/**
|
|
87
|
-
* Set the CSS display property of the Link element. 'auto' sets no display property.
|
|
88
|
-
*/
|
|
89
47
|
display: _propTypes.default.oneOf(['auto', 'block', 'inline-block', 'flex', 'inline-flex']),
|
|
90
|
-
|
|
91
|
-
/**
|
|
92
|
-
* Set `false` to remove default underline if Link does not appear inline with text
|
|
93
|
-
*/
|
|
94
48
|
isWithinText: _propTypes.default.bool,
|
|
95
|
-
|
|
96
|
-
/**
|
|
97
|
-
* Fires when the Link is clicked
|
|
98
|
-
*/
|
|
99
49
|
onClick: _propTypes.default.func,
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* Fires when the Link gains focus
|
|
103
|
-
*/
|
|
104
50
|
onFocus: _propTypes.default.func,
|
|
105
|
-
|
|
106
|
-
/**
|
|
107
|
-
* Fires when the Link loses focus
|
|
108
|
-
*/
|
|
109
51
|
onBlur: _propTypes.default.func
|
|
110
52
|
};
|
|
111
53
|
exports.propTypes = propTypes;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-link",
|
|
3
|
-
"version": "8.13.1-snapshot.
|
|
3
|
+
"version": "8.13.1-snapshot.14+7f86f2894",
|
|
4
4
|
"description": "A component for creating links",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -25,25 +25,25 @@
|
|
|
25
25
|
"license": "MIT",
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@babel/runtime": "^7.13.10",
|
|
28
|
-
"@instructure/console": "8.13.1-snapshot.
|
|
29
|
-
"@instructure/emotion": "8.13.1-snapshot.
|
|
30
|
-
"@instructure/shared-types": "8.13.1-snapshot.
|
|
31
|
-
"@instructure/ui-a11y-utils": "8.13.1-snapshot.
|
|
32
|
-
"@instructure/ui-color-utils": "8.13.1-snapshot.
|
|
33
|
-
"@instructure/ui-dom-utils": "8.13.1-snapshot.
|
|
34
|
-
"@instructure/ui-icons": "8.13.1-snapshot.
|
|
35
|
-
"@instructure/ui-prop-types": "8.13.1-snapshot.
|
|
36
|
-
"@instructure/ui-react-utils": "8.13.1-snapshot.
|
|
37
|
-
"@instructure/ui-testable": "8.13.1-snapshot.
|
|
38
|
-
"@instructure/ui-view": "8.13.1-snapshot.
|
|
28
|
+
"@instructure/console": "8.13.1-snapshot.14+7f86f2894",
|
|
29
|
+
"@instructure/emotion": "8.13.1-snapshot.14+7f86f2894",
|
|
30
|
+
"@instructure/shared-types": "8.13.1-snapshot.14+7f86f2894",
|
|
31
|
+
"@instructure/ui-a11y-utils": "8.13.1-snapshot.14+7f86f2894",
|
|
32
|
+
"@instructure/ui-color-utils": "8.13.1-snapshot.14+7f86f2894",
|
|
33
|
+
"@instructure/ui-dom-utils": "8.13.1-snapshot.14+7f86f2894",
|
|
34
|
+
"@instructure/ui-icons": "8.13.1-snapshot.14+7f86f2894",
|
|
35
|
+
"@instructure/ui-prop-types": "8.13.1-snapshot.14+7f86f2894",
|
|
36
|
+
"@instructure/ui-react-utils": "8.13.1-snapshot.14+7f86f2894",
|
|
37
|
+
"@instructure/ui-testable": "8.13.1-snapshot.14+7f86f2894",
|
|
38
|
+
"@instructure/ui-view": "8.13.1-snapshot.14+7f86f2894",
|
|
39
39
|
"prop-types": "^15"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@instructure/ui-babel-preset": "8.13.1-snapshot.
|
|
43
|
-
"@instructure/ui-test-locator": "8.13.1-snapshot.
|
|
44
|
-
"@instructure/ui-test-queries": "8.13.1-snapshot.
|
|
45
|
-
"@instructure/ui-test-utils": "8.13.1-snapshot.
|
|
46
|
-
"@instructure/ui-themes": "8.13.1-snapshot.
|
|
42
|
+
"@instructure/ui-babel-preset": "8.13.1-snapshot.14+7f86f2894",
|
|
43
|
+
"@instructure/ui-test-locator": "8.13.1-snapshot.14+7f86f2894",
|
|
44
|
+
"@instructure/ui-test-queries": "8.13.1-snapshot.14+7f86f2894",
|
|
45
|
+
"@instructure/ui-test-utils": "8.13.1-snapshot.14+7f86f2894",
|
|
46
|
+
"@instructure/ui-themes": "8.13.1-snapshot.14+7f86f2894"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
49
|
"react": ">=16.8 <=17"
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"access": "public"
|
|
53
53
|
},
|
|
54
54
|
"sideEffects": false,
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "7f86f28942ab56c7d2167bb4fb65502fc0a74d48"
|
|
56
56
|
}
|
|
@@ -21,8 +21,11 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
+
|
|
24
25
|
import { IconTrashSolid } from '@instructure/ui-icons'
|
|
25
26
|
|
|
27
|
+
import type { LinkProps } from '../props'
|
|
28
|
+
|
|
26
29
|
const longString =
|
|
27
30
|
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat'
|
|
28
31
|
const shortString = 'Delete'
|
|
@@ -34,22 +37,18 @@ export default {
|
|
|
34
37
|
iconPlacement: [null, 'start', 'end'],
|
|
35
38
|
renderIcon: [null, IconTrashSolid]
|
|
36
39
|
},
|
|
37
|
-
|
|
38
|
-
getComponentProps: (props) => {
|
|
40
|
+
getComponentProps: () => {
|
|
39
41
|
return {
|
|
40
42
|
href: 'http://instructure.design'
|
|
41
43
|
}
|
|
42
44
|
},
|
|
43
|
-
|
|
44
|
-
getExampleProps: (props) => {
|
|
45
|
+
getExampleProps: (props: LinkProps) => {
|
|
45
46
|
return {
|
|
46
47
|
background: props.color === 'link' ? 'primary' : 'primary-inverse'
|
|
47
48
|
}
|
|
48
49
|
},
|
|
49
|
-
|
|
50
|
-
filter: (props) => {
|
|
50
|
+
filter: (props: LinkProps) => {
|
|
51
51
|
return (
|
|
52
|
-
props.ellipsis ||
|
|
53
52
|
(props.iconPlacement && !props.renderIcon) ||
|
|
54
53
|
(!props.iconPlacement && props.renderIcon) ||
|
|
55
54
|
props.disabled
|
package/src/Link/index.tsx
CHANGED
|
@@ -43,16 +43,19 @@ import generateStyle from './styles'
|
|
|
43
43
|
import generateComponentTheme from './theme'
|
|
44
44
|
|
|
45
45
|
import { propTypes, allowedProps } from './props'
|
|
46
|
-
import type { LinkProps, LinkStyleProps } from './props'
|
|
46
|
+
import type { LinkProps, LinkState, LinkStyleProps } from './props'
|
|
47
|
+
|
|
48
|
+
import type { ViewOwnProps } from '@instructure/ui-view'
|
|
47
49
|
|
|
48
50
|
/**
|
|
49
51
|
---
|
|
50
52
|
category: components
|
|
51
53
|
---
|
|
54
|
+
@tsProps
|
|
52
55
|
**/
|
|
53
56
|
@withStyle(generateStyle, generateComponentTheme)
|
|
54
57
|
@testable()
|
|
55
|
-
class Link extends Component<LinkProps> {
|
|
58
|
+
class Link extends Component<LinkProps, LinkState> {
|
|
56
59
|
static readonly componentId = 'Link'
|
|
57
60
|
|
|
58
61
|
static propTypes = propTypes
|
|
@@ -74,17 +77,14 @@ class Link extends Component<LinkProps> {
|
|
|
74
77
|
|
|
75
78
|
return this.ref
|
|
76
79
|
}
|
|
77
|
-
ref:
|
|
80
|
+
ref: Element | null = null
|
|
78
81
|
|
|
79
82
|
componentDidMount() {
|
|
80
|
-
|
|
81
|
-
this.props.makeStyles(this.makeStyleProps())
|
|
83
|
+
this.props.makeStyles?.(this.makeStyleProps())
|
|
82
84
|
}
|
|
83
85
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
// @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
|
|
87
|
-
this.props.makeStyles(this.makeStyleProps())
|
|
86
|
+
componentDidUpdate() {
|
|
87
|
+
this.props.makeStyles?.(this.makeStyleProps())
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
makeStyleProps = (): LinkStyleProps => {
|
|
@@ -94,8 +94,7 @@ class Link extends Component<LinkProps> {
|
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
|
|
98
|
-
handleElementRef = (el) => {
|
|
97
|
+
handleElementRef = (el: Element | null) => {
|
|
99
98
|
const { elementRef } = this.props
|
|
100
99
|
|
|
101
100
|
this.ref = el
|
|
@@ -105,8 +104,7 @@ class Link extends Component<LinkProps> {
|
|
|
105
104
|
}
|
|
106
105
|
}
|
|
107
106
|
|
|
108
|
-
|
|
109
|
-
handleClick = (event) => {
|
|
107
|
+
handleClick: React.MouseEventHandler<ViewOwnProps> = (event) => {
|
|
110
108
|
const { onClick } = this.props
|
|
111
109
|
const { interaction } = this
|
|
112
110
|
|
|
@@ -118,16 +116,14 @@ class Link extends Component<LinkProps> {
|
|
|
118
116
|
}
|
|
119
117
|
}
|
|
120
118
|
|
|
121
|
-
|
|
122
|
-
handleFocus = (event) => {
|
|
119
|
+
handleFocus: React.FocusEventHandler<ViewOwnProps> = (event) => {
|
|
123
120
|
this.setState({ hasFocus: true })
|
|
124
121
|
if (typeof this.props.onFocus === 'function') {
|
|
125
122
|
this.props.onFocus(event)
|
|
126
123
|
}
|
|
127
124
|
}
|
|
128
125
|
|
|
129
|
-
|
|
130
|
-
handleBlur = (event) => {
|
|
126
|
+
handleBlur: React.FocusEventHandler<ViewOwnProps> = (event) => {
|
|
131
127
|
this.setState({ hasFocus: false })
|
|
132
128
|
if (typeof this.props.onBlur === 'function') {
|
|
133
129
|
this.props.onBlur(event)
|
|
@@ -187,7 +183,7 @@ class Link extends Component<LinkProps> {
|
|
|
187
183
|
}
|
|
188
184
|
|
|
189
185
|
focus() {
|
|
190
|
-
this.ref && this.ref.focus()
|
|
186
|
+
this.ref && (this.ref as HTMLElement).focus()
|
|
191
187
|
}
|
|
192
188
|
|
|
193
189
|
renderIcon() {
|
|
@@ -223,7 +219,7 @@ class Link extends Component<LinkProps> {
|
|
|
223
219
|
this.element === 'button' || this.element === 'input'
|
|
224
220
|
? 'button'
|
|
225
221
|
: undefined
|
|
226
|
-
const tabIndex = role === 'button' && !isDisabled ?
|
|
222
|
+
const tabIndex = role === 'button' && !isDisabled ? 0 : undefined
|
|
227
223
|
|
|
228
224
|
return (
|
|
229
225
|
<View
|
|
@@ -239,7 +235,6 @@ class Link extends Component<LinkProps> {
|
|
|
239
235
|
aria-disabled={isDisabled ? 'true' : undefined}
|
|
240
236
|
role={role}
|
|
241
237
|
type={type}
|
|
242
|
-
//@ts-expect-error fix to be number
|
|
243
238
|
tabIndex={tabIndex}
|
|
244
239
|
css={this.props.styles?.link}
|
|
245
240
|
>
|
package/src/Link/props.ts
CHANGED
|
@@ -38,22 +38,81 @@ import type {
|
|
|
38
38
|
WithStyleProps,
|
|
39
39
|
ComponentStyle
|
|
40
40
|
} from '@instructure/emotion'
|
|
41
|
+
import type { ViewOwnProps } from '@instructure/ui-view'
|
|
41
42
|
|
|
42
43
|
type LinkOwnProps = {
|
|
44
|
+
/**
|
|
45
|
+
* The text and/or icon displayed by the link
|
|
46
|
+
*/
|
|
43
47
|
children: React.ReactNode
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Sets the link's `href` attribute
|
|
51
|
+
*/
|
|
44
52
|
href?: string
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* Designates Link's text color to accommodate light and dark backgrounds
|
|
56
|
+
*/
|
|
45
57
|
color?: 'link' | 'link-inverse'
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Provides a reference to the underlying HTML element
|
|
61
|
+
*/
|
|
46
62
|
elementRef?: (element: Element | null) => void
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* The element type to render as (will default to `<a>` if href is provided)
|
|
66
|
+
*/
|
|
47
67
|
as?: AsElementType
|
|
68
|
+
|
|
69
|
+
/**
|
|
70
|
+
* Determines if the link is enabled or disabled
|
|
71
|
+
*/
|
|
48
72
|
interaction?: 'enabled' | 'disabled'
|
|
73
|
+
|
|
74
|
+
/**
|
|
75
|
+
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
|
|
76
|
+
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
|
|
77
|
+
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
|
|
78
|
+
*/
|
|
49
79
|
margin?: Spacing
|
|
50
|
-
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* Add an SVG icon to the Link. Do not add icons directly as
|
|
83
|
+
* children.
|
|
84
|
+
*/
|
|
85
|
+
renderIcon?: (() => React.ReactNode) | React.ReactNode
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* Place the icon before or after the text in the Link.
|
|
89
|
+
*/
|
|
51
90
|
iconPlacement?: 'start' | 'end'
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* Set the CSS display property of the Link element. 'auto' sets no display property.
|
|
94
|
+
*/
|
|
52
95
|
display?: 'auto' | 'block' | 'inline-block' | 'flex' | 'inline-flex'
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* Set `false` to remove default underline if Link does not appear inline with text
|
|
99
|
+
*/
|
|
53
100
|
isWithinText?: boolean
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* Fires when the Link is clicked
|
|
104
|
+
*/
|
|
105
|
+
onClick?: (event: React.MouseEvent<ViewOwnProps>) => void
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* Fires when the Link gains focus
|
|
109
|
+
*/
|
|
110
|
+
onFocus?: (event: React.FocusEvent<ViewOwnProps>) => void
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* Fires when the Link loses focus
|
|
114
|
+
*/
|
|
115
|
+
onBlur?: (event: React.FocusEvent<ViewOwnProps>) => void
|
|
57
116
|
}
|
|
58
117
|
|
|
59
118
|
export type LinkStyleProps = {
|
|
@@ -65,55 +124,29 @@ type PropKeys = keyof LinkOwnProps
|
|
|
65
124
|
|
|
66
125
|
type AllowedPropKeys = Readonly<Array<PropKeys>>
|
|
67
126
|
|
|
127
|
+
type LinkState = {
|
|
128
|
+
hasFocus: boolean
|
|
129
|
+
}
|
|
130
|
+
|
|
68
131
|
type LinkProps = LinkOwnProps &
|
|
69
132
|
WithStyleProps<LinkTheme, LinkStyle> &
|
|
70
|
-
OtherHTMLAttributes<LinkOwnProps>
|
|
133
|
+
OtherHTMLAttributes<LinkOwnProps> & {
|
|
134
|
+
// React Router might add a `to` prop
|
|
135
|
+
to?: string
|
|
136
|
+
}
|
|
71
137
|
|
|
72
138
|
type LinkStyle = ComponentStyle<'link' | 'icon'>
|
|
73
139
|
|
|
74
140
|
const propTypes: PropValidators<PropKeys> = {
|
|
75
|
-
/**
|
|
76
|
-
* The text and/or icon displayed by the link
|
|
77
|
-
*/
|
|
78
141
|
children: PropTypes.node.isRequired,
|
|
79
|
-
/**
|
|
80
|
-
* Sets the link's `href` attribute
|
|
81
|
-
*/
|
|
82
142
|
href: PropTypes.string,
|
|
83
|
-
/**
|
|
84
|
-
* Designates Link's text color to accommodate light and dark backgrounds
|
|
85
|
-
*/
|
|
86
143
|
color: PropTypes.oneOf(['link', 'link-inverse']),
|
|
87
|
-
/**
|
|
88
|
-
* Provides a reference to the underlying HTML element
|
|
89
|
-
*/
|
|
90
144
|
elementRef: PropTypes.func,
|
|
91
|
-
/**
|
|
92
|
-
* The element type to render as (will default to `<a>` if href is provided)
|
|
93
|
-
*/
|
|
94
145
|
as: PropTypes.elementType,
|
|
95
|
-
/**
|
|
96
|
-
* Determines if the link is enabled or disabled
|
|
97
|
-
*/
|
|
98
146
|
interaction: PropTypes.oneOf(['enabled', 'disabled']),
|
|
99
|
-
/**
|
|
100
|
-
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
|
|
101
|
-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
|
|
102
|
-
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
|
|
103
|
-
*/
|
|
104
147
|
margin: ThemeablePropTypes.spacing,
|
|
105
|
-
/**
|
|
106
|
-
* Add an SVG icon to the Link. Do not add icons directly as
|
|
107
|
-
* children.
|
|
108
|
-
*/
|
|
109
148
|
renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
|
|
110
|
-
/**
|
|
111
|
-
* Place the icon before or after the text in the Link.
|
|
112
|
-
*/
|
|
113
149
|
iconPlacement: PropTypes.oneOf(['start', 'end']),
|
|
114
|
-
/**
|
|
115
|
-
* Set the CSS display property of the Link element. 'auto' sets no display property.
|
|
116
|
-
*/
|
|
117
150
|
display: PropTypes.oneOf([
|
|
118
151
|
'auto',
|
|
119
152
|
'block',
|
|
@@ -121,21 +154,9 @@ const propTypes: PropValidators<PropKeys> = {
|
|
|
121
154
|
'flex',
|
|
122
155
|
'inline-flex'
|
|
123
156
|
]),
|
|
124
|
-
/**
|
|
125
|
-
* Set `false` to remove default underline if Link does not appear inline with text
|
|
126
|
-
*/
|
|
127
157
|
isWithinText: PropTypes.bool,
|
|
128
|
-
/**
|
|
129
|
-
* Fires when the Link is clicked
|
|
130
|
-
*/
|
|
131
158
|
onClick: PropTypes.func,
|
|
132
|
-
/**
|
|
133
|
-
* Fires when the Link gains focus
|
|
134
|
-
*/
|
|
135
159
|
onFocus: PropTypes.func,
|
|
136
|
-
/**
|
|
137
|
-
* Fires when the Link loses focus
|
|
138
|
-
*/
|
|
139
160
|
onBlur: PropTypes.func
|
|
140
161
|
}
|
|
141
162
|
|
|
@@ -156,5 +177,5 @@ const allowedProps: AllowedPropKeys = [
|
|
|
156
177
|
'onBlur'
|
|
157
178
|
]
|
|
158
179
|
|
|
159
|
-
export type { LinkProps, LinkStyle }
|
|
180
|
+
export type { LinkProps, LinkState, LinkStyle }
|
|
160
181
|
export { propTypes, allowedProps }
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { IconTrashSolid } from '@instructure/ui-icons';
|
|
2
|
+
import type { LinkProps } from '../props';
|
|
2
3
|
declare const _default: {
|
|
3
4
|
sectionProp: string;
|
|
4
5
|
propValues: {
|
|
@@ -6,13 +7,13 @@ declare const _default: {
|
|
|
6
7
|
iconPlacement: (string | null)[];
|
|
7
8
|
renderIcon: (typeof IconTrashSolid | null)[];
|
|
8
9
|
};
|
|
9
|
-
getComponentProps: (
|
|
10
|
+
getComponentProps: () => {
|
|
10
11
|
href: string;
|
|
11
12
|
};
|
|
12
|
-
getExampleProps: (props:
|
|
13
|
+
getExampleProps: (props: LinkProps) => {
|
|
13
14
|
background: string;
|
|
14
15
|
};
|
|
15
|
-
filter: (props:
|
|
16
|
+
filter: (props: LinkProps) => {} | undefined;
|
|
16
17
|
};
|
|
17
18
|
export default _default;
|
|
18
19
|
//# sourceMappingURL=Link.examples.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.examples.d.ts","sourceRoot":"","sources":["../../../src/Link/__examples__/Link.examples.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Link.examples.d.ts","sourceRoot":"","sources":["../../../src/Link/__examples__/Link.examples.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAEtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;;;;;;;;;;;6BAkBd,SAAS;;;oBAKlB,SAAS;;AAjB3B,wBAwBC"}
|
package/types/Link/index.d.ts
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
/** @jsx jsx */
|
|
2
2
|
import React, { Component } from 'react';
|
|
3
3
|
import { jsx } from '@instructure/emotion';
|
|
4
|
-
import type { LinkProps, LinkStyleProps } from './props';
|
|
4
|
+
import type { LinkProps, LinkState, LinkStyleProps } from './props';
|
|
5
|
+
import type { ViewOwnProps } from '@instructure/ui-view';
|
|
5
6
|
/**
|
|
6
7
|
---
|
|
7
8
|
category: components
|
|
8
9
|
---
|
|
10
|
+
@tsProps
|
|
9
11
|
**/
|
|
10
|
-
declare class Link extends Component<LinkProps> {
|
|
12
|
+
declare class Link extends Component<LinkProps, LinkState> {
|
|
11
13
|
static readonly componentId = "Link";
|
|
12
14
|
static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
|
|
13
15
|
children: React.ReactNode;
|
|
@@ -17,13 +19,13 @@ declare class Link extends Component<LinkProps> {
|
|
|
17
19
|
as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
|
|
18
20
|
interaction?: "enabled" | "disabled" | undefined;
|
|
19
21
|
margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
|
|
20
|
-
renderIcon?: React.ReactNode | ((
|
|
22
|
+
renderIcon?: React.ReactNode | (() => React.ReactNode);
|
|
21
23
|
iconPlacement?: "start" | "end" | undefined;
|
|
22
24
|
display?: "auto" | "block" | "inline-block" | "flex" | "inline-flex" | undefined;
|
|
23
25
|
isWithinText?: boolean | undefined;
|
|
24
|
-
onClick?: ((
|
|
25
|
-
onFocus?: ((
|
|
26
|
-
onBlur?: ((
|
|
26
|
+
onClick?: ((event: React.MouseEvent<ViewOwnProps, MouseEvent>) => void) | undefined;
|
|
27
|
+
onFocus?: ((event: React.FocusEvent<ViewOwnProps, Element>) => void) | undefined;
|
|
28
|
+
onBlur?: ((event: React.FocusEvent<ViewOwnProps, Element>) => void) | undefined;
|
|
27
29
|
}>;
|
|
28
30
|
static allowedProps: readonly (keyof {
|
|
29
31
|
children: React.ReactNode;
|
|
@@ -33,13 +35,13 @@ declare class Link extends Component<LinkProps> {
|
|
|
33
35
|
as?: import("@instructure/shared-types/types/CommonProps").AsElementType | undefined;
|
|
34
36
|
interaction?: "enabled" | "disabled" | undefined;
|
|
35
37
|
margin?: import("@instructure/emotion/types/styleUtils/ThemeablePropValues").Spacing | undefined;
|
|
36
|
-
renderIcon?: React.ReactNode | ((
|
|
38
|
+
renderIcon?: React.ReactNode | (() => React.ReactNode);
|
|
37
39
|
iconPlacement?: "start" | "end" | undefined;
|
|
38
40
|
display?: "auto" | "block" | "inline-block" | "flex" | "inline-flex" | undefined;
|
|
39
41
|
isWithinText?: boolean | undefined;
|
|
40
|
-
onClick?: ((
|
|
41
|
-
onFocus?: ((
|
|
42
|
-
onBlur?: ((
|
|
42
|
+
onClick?: ((event: React.MouseEvent<ViewOwnProps, MouseEvent>) => void) | undefined;
|
|
43
|
+
onFocus?: ((event: React.FocusEvent<ViewOwnProps, Element>) => void) | undefined;
|
|
44
|
+
onBlur?: ((event: React.FocusEvent<ViewOwnProps, Element>) => void) | undefined;
|
|
43
45
|
})[];
|
|
44
46
|
static defaultProps: {
|
|
45
47
|
readonly interaction: undefined;
|
|
@@ -50,15 +52,15 @@ declare class Link extends Component<LinkProps> {
|
|
|
50
52
|
state: {
|
|
51
53
|
hasFocus: boolean;
|
|
52
54
|
};
|
|
53
|
-
get _link():
|
|
54
|
-
ref:
|
|
55
|
+
get _link(): Element | null;
|
|
56
|
+
ref: Element | null;
|
|
55
57
|
componentDidMount(): void;
|
|
56
|
-
componentDidUpdate(
|
|
58
|
+
componentDidUpdate(): void;
|
|
57
59
|
makeStyleProps: () => LinkStyleProps;
|
|
58
|
-
handleElementRef: (el:
|
|
59
|
-
handleClick:
|
|
60
|
-
handleFocus:
|
|
61
|
-
handleBlur:
|
|
60
|
+
handleElementRef: (el: Element | null) => void;
|
|
61
|
+
handleClick: React.MouseEventHandler<ViewOwnProps>;
|
|
62
|
+
handleFocus: React.FocusEventHandler<ViewOwnProps>;
|
|
63
|
+
handleBlur: React.FocusEventHandler<ViewOwnProps>;
|
|
62
64
|
get containsTruncateText(): boolean;
|
|
63
65
|
get display(): "auto" | "block" | "inline-block" | "flex" | "inline-flex";
|
|
64
66
|
get interaction(): import("@instructure/ui-react-utils").InteractionType;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Link/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAexC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAExD
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Link/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAexC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAKrD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAExD;;;;;GAKG;AACH,cAEM,IAAK,SAAQ,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IAChD,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;IAEpC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;MAMT;IAEV,KAAK;;MAAsB;IAE3B,IAAI,KAAK,mBAMR;IACD,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,iBAAiB;IAIjB,kBAAkB;IAIlB,cAAc,QAAO,cAAc,CAKlC;IAED,gBAAgB,OAAQ,OAAO,GAAG,IAAI,UAQrC;IAED,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAUjD;IAED,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAKjD;IAED,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAKhD;IAED,IAAI,oBAAoB,YAgBvB;IAED,IAAI,OAAO,+DAYV;IAED,IAAI,WAAW,0DAEd;IAED,IAAI,OAAO,wEAEV;IAED,IAAI,OAAO,YAEV;IAED,IAAI,SAAS,cAEZ;IAED,IAAI,kBAAkB,YAErB;IAED,KAAK;IAIL,UAAU;IAaV,MAAM;CA6CP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,CAAA"}
|
package/types/Link/props.d.ts
CHANGED
|
@@ -1,21 +1,67 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { AsElementType, PropValidators, LinkTheme, OtherHTMLAttributes } from '@instructure/shared-types';
|
|
3
3
|
import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
|
|
4
|
+
import type { ViewOwnProps } from '@instructure/ui-view';
|
|
4
5
|
declare type LinkOwnProps = {
|
|
6
|
+
/**
|
|
7
|
+
* The text and/or icon displayed by the link
|
|
8
|
+
*/
|
|
5
9
|
children: React.ReactNode;
|
|
10
|
+
/**
|
|
11
|
+
* Sets the link's `href` attribute
|
|
12
|
+
*/
|
|
6
13
|
href?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Designates Link's text color to accommodate light and dark backgrounds
|
|
16
|
+
*/
|
|
7
17
|
color?: 'link' | 'link-inverse';
|
|
18
|
+
/**
|
|
19
|
+
* Provides a reference to the underlying HTML element
|
|
20
|
+
*/
|
|
8
21
|
elementRef?: (element: Element | null) => void;
|
|
22
|
+
/**
|
|
23
|
+
* The element type to render as (will default to `<a>` if href is provided)
|
|
24
|
+
*/
|
|
9
25
|
as?: AsElementType;
|
|
26
|
+
/**
|
|
27
|
+
* Determines if the link is enabled or disabled
|
|
28
|
+
*/
|
|
10
29
|
interaction?: 'enabled' | 'disabled';
|
|
30
|
+
/**
|
|
31
|
+
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
|
|
32
|
+
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
|
|
33
|
+
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
|
|
34
|
+
*/
|
|
11
35
|
margin?: Spacing;
|
|
12
|
-
|
|
36
|
+
/**
|
|
37
|
+
* Add an SVG icon to the Link. Do not add icons directly as
|
|
38
|
+
* children.
|
|
39
|
+
*/
|
|
40
|
+
renderIcon?: (() => React.ReactNode) | React.ReactNode;
|
|
41
|
+
/**
|
|
42
|
+
* Place the icon before or after the text in the Link.
|
|
43
|
+
*/
|
|
13
44
|
iconPlacement?: 'start' | 'end';
|
|
45
|
+
/**
|
|
46
|
+
* Set the CSS display property of the Link element. 'auto' sets no display property.
|
|
47
|
+
*/
|
|
14
48
|
display?: 'auto' | 'block' | 'inline-block' | 'flex' | 'inline-flex';
|
|
49
|
+
/**
|
|
50
|
+
* Set `false` to remove default underline if Link does not appear inline with text
|
|
51
|
+
*/
|
|
15
52
|
isWithinText?: boolean;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
53
|
+
/**
|
|
54
|
+
* Fires when the Link is clicked
|
|
55
|
+
*/
|
|
56
|
+
onClick?: (event: React.MouseEvent<ViewOwnProps>) => void;
|
|
57
|
+
/**
|
|
58
|
+
* Fires when the Link gains focus
|
|
59
|
+
*/
|
|
60
|
+
onFocus?: (event: React.FocusEvent<ViewOwnProps>) => void;
|
|
61
|
+
/**
|
|
62
|
+
* Fires when the Link loses focus
|
|
63
|
+
*/
|
|
64
|
+
onBlur?: (event: React.FocusEvent<ViewOwnProps>) => void;
|
|
19
65
|
};
|
|
20
66
|
export declare type LinkStyleProps = {
|
|
21
67
|
containsTruncateText: boolean;
|
|
@@ -23,10 +69,15 @@ export declare type LinkStyleProps = {
|
|
|
23
69
|
};
|
|
24
70
|
declare type PropKeys = keyof LinkOwnProps;
|
|
25
71
|
declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
|
|
26
|
-
declare type
|
|
72
|
+
declare type LinkState = {
|
|
73
|
+
hasFocus: boolean;
|
|
74
|
+
};
|
|
75
|
+
declare type LinkProps = LinkOwnProps & WithStyleProps<LinkTheme, LinkStyle> & OtherHTMLAttributes<LinkOwnProps> & {
|
|
76
|
+
to?: string;
|
|
77
|
+
};
|
|
27
78
|
declare type LinkStyle = ComponentStyle<'link' | 'icon'>;
|
|
28
79
|
declare const propTypes: PropValidators<PropKeys>;
|
|
29
80
|
declare const allowedProps: AllowedPropKeys;
|
|
30
|
-
export type { LinkProps, LinkStyle };
|
|
81
|
+
export type { LinkProps, LinkState, LinkStyle };
|
|
31
82
|
export { propTypes, allowedProps };
|
|
32
83
|
//# sourceMappingURL=props.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Link/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACT,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Link/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,SAAS,EACT,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAExD,aAAK,YAAY,GAAG;IAClB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAEzB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,cAAc,CAAA;IAE/B;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;IAE9C;;OAEG;IACH,EAAE,CAAC,EAAE,aAAa,CAAA;IAElB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,UAAU,CAAA;IAEpC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAA;IAEtD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAE/B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,aAAa,CAAA;IAEpE;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAA;IAEzD;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAA;IAEzD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,KAAK,IAAI,CAAA;CACzD,CAAA;AAED,oBAAY,cAAc,GAAG;IAC3B,oBAAoB,EAAE,OAAO,CAAA;IAC7B,kBAAkB,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,SAAS,GAAG;IACf,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,aAAK,SAAS,GAAG,YAAY,GAC3B,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,GACpC,mBAAmB,CAAC,YAAY,CAAC,GAAG;IAElC,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAEH,aAAK,SAAS,GAAG,cAAc,CAAC,MAAM,GAAG,MAAM,CAAC,CAAA;AAEhD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAqBvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAenB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
|