@instructure/ui-link 8.13.1-snapshot.9 → 8.14.1-snapshot.6

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.14.0](https://github.com/instructure/instructure-ui/compare/v8.13.0...v8.14.0) (2021-12-16)
+
+**Note:** Version bump only for package @instructure/ui-link
+
 # [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
 
 **Note:** Version bump only for package @instructure/ui-link

package/es/Link/LinkLocator.js

@@ -23,7 +23,8 @@
  */
 import { locator } from '@instructure/ui-test-locator';
 import { find } from '@instructure/ui-test-queries';
-import { Link } from './index';
+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
+
 export const LinkLocator = locator(Link.selector, {
   click: async function (element) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

package/es/Link/__examples__/Link.examples.js

@@ -31,7 +31,7 @@ export default {
     iconPlacement: [null, 'start', 'end'],
     renderIcon: [null, IconTrashSolid]
   },
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       href: 'http://instructure.design'
     };
@@ -42,6 +42,6 @@ export default {
     };
   },
   filter: props => {
-    return props.ellipsis || props.iconPlacement && !props.renderIcon || !props.iconPlacement && props.renderIcon || props.disabled;
+    return props.iconPlacement && !props.renderIcon || !props.iconPlacement && !!props.renderIcon || props.disabled;
   }
 };

package/es/Link/index.js

@@ -44,6 +44,7 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Link extends Component {
   constructor() {
@@ -107,11 +108,15 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   }
 
   componentDidMount() {
-    this.props.makeStyles(this.makeStyleProps());
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles(this.makeStyleProps());
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
 
   get containsTruncateText() {
@@ -180,22 +185,22 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tes
   render() {
     var _this$props$styles2;
 
-    const _this$props = this.props,
-          children = _this$props.children,
-          onClick = _this$props.onClick,
-          color = _this$props.color,
-          href = _this$props.href,
-          margin = _this$props.margin,
-          renderIcon = _this$props.renderIcon,
-          iconPlacement = _this$props.iconPlacement,
-          isWithinText = _this$props.isWithinText,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          onClick = _this$props3.onClick,
+          color = _this$props3.color,
+          href = _this$props3.href,
+          margin = _this$props3.margin,
+          renderIcon = _this$props3.renderIcon,
+          iconPlacement = _this$props3.iconPlacement,
+          isWithinText = _this$props3.isWithinText,
+          props = _objectWithoutProperties(_this$props3, _excluded);
 
     const interaction = this.interaction;
     const isDisabled = interaction === 'disabled';
     const role = onClick && this.element !== 'button' ? 'button' : void 0;
     const type = this.element === 'button' || this.element === 'input' ? 'button' : void 0;
-    const tabIndex = role === 'button' && !isDisabled ? '0' : void 0;
+    const tabIndex = role === 'button' && !isDisabled ? 0 : void 0;
     return jsx(View, Object.assign({}, passthroughProps(props), {
       elementRef: this.handleElementRef,
       as: this.element,

package/es/Link/props.js

@@ -24,77 +24,19 @@
 import PropTypes from 'prop-types';
 import { ThemeablePropTypes } from '@instructure/emotion';
 const propTypes = {
-  /**
-   * The text and/or icon displayed by the link
-   */
   children: PropTypes.node.isRequired,
-
-  /**
-   * Sets the link's `href` attribute
-   */
   href: PropTypes.string,
-
-  /**
-   * Designates Link's text color to accommodate light and dark backgrounds
-   */
   color: PropTypes.oneOf(['link', 'link-inverse']),
-
-  /**
-   * Provides a reference to the underlying HTML element
-   */
   elementRef: PropTypes.func,
-
-  /**
-   * The element type to render as (will default to `<a>` if href is provided)
-   */
   as: PropTypes.elementType,
-
-  /**
-   * Determines if the link is enabled or disabled
-   */
   interaction: PropTypes.oneOf(['enabled', 'disabled']),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: ThemeablePropTypes.spacing,
-
-  /**
-   * Add an SVG icon to the Link. Do not add icons directly as
-   * children.
-   */
   renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-
-  /**
-   * Place the icon before or after the text in the Link.
-   */
   iconPlacement: PropTypes.oneOf(['start', 'end']),
-
-  /**
-   * Set the CSS display property of the Link element. 'auto' sets no display property.
-   */
   display: PropTypes.oneOf(['auto', 'block', 'inline-block', 'flex', 'inline-flex']),
-
-  /**
-   * Set `false` to remove default underline if Link does not appear inline with text
-   */
   isWithinText: PropTypes.bool,
-
-  /**
-   * Fires when the Link is clicked
-   */
   onClick: PropTypes.func,
-
-  /**
-   * Fires when the Link gains focus
-   */
   onFocus: PropTypes.func,
-
-  /**
-   * Fires when the Link loses focus
-   */
   onBlur: PropTypes.func
 };
 const allowedProps = ['children', 'href', 'color', 'elementRef', 'as', 'interaction', 'margin', 'renderIcon', 'iconPlacement', 'display', 'isWithinText', 'onClick', 'onFocus', 'onBlur'];

package/lib/Link/LinkLocator.js

@@ -34,6 +34,7 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const LinkLocator = (0, _locator.locator)(_index.Link.selector, {
   click: async function (element) {
     for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {

package/lib/Link/__examples__/Link.examples.js

@@ -39,7 +39,7 @@ var _default = {
     iconPlacement: [null, 'start', 'end'],
     renderIcon: [null, _IconTrashSolid.IconTrashSolid]
   },
-  getComponentProps: props => {
+  getComponentProps: () => {
     return {
       href: 'http://instructure.design'
     };
@@ -50,7 +50,7 @@ var _default = {
     };
   },
   filter: props => {
-    return props.ellipsis || props.iconPlacement && !props.renderIcon || !props.iconPlacement && props.renderIcon || props.disabled;
+    return props.iconPlacement && !props.renderIcon || !props.iconPlacement && !!props.renderIcon || props.disabled;
   }
 };
 exports.default = _default;

package/lib/Link/index.js

@@ -51,6 +51,7 @@ var _dec, _dec2, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 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 {
   constructor() {
@@ -114,11 +115,15 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
   componentDidMount() {
-    this.props.makeStyles(this.makeStyleProps());
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
   }
 
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    this.props.makeStyles(this.makeStyleProps());
+  componentDidUpdate() {
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
 
   get containsTruncateText() {
@@ -189,21 +194,21 @@ let Link = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   render() {
     var _this$props$styles2;
 
-    const _this$props = this.props,
-          children = _this$props.children,
-          onClick = _this$props.onClick,
-          color = _this$props.color,
-          href = _this$props.href,
-          margin = _this$props.margin,
-          renderIcon = _this$props.renderIcon,
-          iconPlacement = _this$props.iconPlacement,
-          isWithinText = _this$props.isWithinText,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          onClick = _this$props3.onClick,
+          color = _this$props3.color,
+          href = _this$props3.href,
+          margin = _this$props3.margin,
+          renderIcon = _this$props3.renderIcon,
+          iconPlacement = _this$props3.iconPlacement,
+          isWithinText = _this$props3.isWithinText,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const interaction = this.interaction;
     const isDisabled = interaction === 'disabled';
     const role = onClick && this.element !== 'button' ? 'button' : void 0;
     const type = this.element === 'button' || this.element === 'input' ? 'button' : void 0;
-    const tabIndex = role === 'button' && !isDisabled ? '0' : void 0;
+    const tabIndex = role === 'button' && !isDisabled ? 0 : void 0;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
       elementRef: this.handleElementRef,
       as: this.element,

package/lib/Link/props.js

@@ -35,77 +35,19 @@ var _emotion = require("@instructure/emotion");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * The text and/or icon displayed by the link
-   */
   children: _propTypes.default.node.isRequired,
-
-  /**
-   * Sets the link's `href` attribute
-   */
   href: _propTypes.default.string,
-
-  /**
-   * Designates Link's text color to accommodate light and dark backgrounds
-   */
   color: _propTypes.default.oneOf(['link', 'link-inverse']),
-
-  /**
-   * Provides a reference to the underlying HTML element
-   */
   elementRef: _propTypes.default.func,
-
-  /**
-   * The element type to render as (will default to `<a>` if href is provided)
-   */
   as: _propTypes.default.elementType,
-
-  /**
-   * Determines if the link is enabled or disabled
-   */
   interaction: _propTypes.default.oneOf(['enabled', 'disabled']),
-
-  /**
-   * Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
-   * `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
-   * familiar CSS-like shorthand. For example: `margin="small auto large"`.
-   */
   margin: _emotion.ThemeablePropTypes.spacing,
-
-  /**
-   * Add an SVG icon to the Link. Do not add icons directly as
-   * children.
-   */
   renderIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
-
-  /**
-   * Place the icon before or after the text in the Link.
-   */
   iconPlacement: _propTypes.default.oneOf(['start', 'end']),
-
-  /**
-   * Set the CSS display property of the Link element. 'auto' sets no display property.
-   */
   display: _propTypes.default.oneOf(['auto', 'block', 'inline-block', 'flex', 'inline-flex']),
-
-  /**
-   * Set `false` to remove default underline if Link does not appear inline with text
-   */
   isWithinText: _propTypes.default.bool,
-
-  /**
-   * Fires when the Link is clicked
-   */
   onClick: _propTypes.default.func,
-
-  /**
-   * Fires when the Link gains focus
-   */
   onFocus: _propTypes.default.func,
-
-  /**
-   * Fires when the Link loses focus
-   */
   onBlur: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-link",
-  "version": "8.13.1-snapshot.9+f32ba918e",
+  "version": "8.14.1-snapshot.6+44559fbd7",
   "description": "A component for creating links",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,25 +25,25 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/emotion": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/shared-types": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-a11y-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-color-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-dom-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-icons": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-prop-types": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-react-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-testable": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-view": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/console": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/emotion": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/shared-types": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-a11y-utils": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-color-utils": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-dom-utils": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-icons": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-prop-types": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-react-utils": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-testable": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-view": "8.14.1-snapshot.6+44559fbd7",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-locator": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-queries": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-themes": "8.13.1-snapshot.9+f32ba918e"
+    "@instructure/ui-babel-preset": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-test-locator": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-test-queries": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-test-utils": "8.14.1-snapshot.6+44559fbd7",
+    "@instructure/ui-themes": "8.14.1-snapshot.6+44559fbd7"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -52,5 +52,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "f32ba918e4d3ce76c6ee95c856584d00a9d80958"
+  "gitHead": "44559fbd71344c571d339f20cf74491c6fd1dd2f"
 }

package/src/Link/__examples__/Link.examples.ts

@@ -21,8 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { IconTrashSolid } from '@instructure/ui-icons'
 
+import type { StoryConfig } from '@instructure/ui-test-utils'
+import type { LinkProps } from '../props'
+
 const longString =
   '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'
 const shortString = 'Delete'
@@ -34,25 +38,21 @@ export default {
     iconPlacement: [null, 'start', 'end'],
     renderIcon: [null, IconTrashSolid]
   },
-  // @ts-expect-error ts-migrate(6133) FIXME: 'props' is declared but its value is never read.
-  getComponentProps: (props) => {
+  getComponentProps: () => {
     return {
       href: 'http://instructure.design'
     }
   },
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
   getExampleProps: (props) => {
     return {
       background: props.color === 'link' ? 'primary' : 'primary-inverse'
     }
   },
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
   filter: (props) => {
     return (
-      props.ellipsis ||
       (props.iconPlacement && !props.renderIcon) ||
-      (!props.iconPlacement && props.renderIcon) ||
+      (!props.iconPlacement && !!props.renderIcon) ||
       props.disabled
     )
   }
-}
+} as StoryConfig<LinkProps>

package/src/Link/index.tsx

@@ -43,16 +43,19 @@ import generateStyle from './styles'
 import generateComponentTheme from './theme'
 
 import { propTypes, allowedProps } from './props'
-import type { LinkProps, LinkStyleProps } from './props'
+import type { LinkProps, LinkState, LinkStyleProps } from './props'
+
+import type { ViewOwnProps } from '@instructure/ui-view'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
-class Link extends Component<LinkProps> {
+class Link extends Component<LinkProps, LinkState> {
   static readonly componentId = 'Link'
 
   static propTypes = propTypes
@@ -74,17 +77,14 @@ class Link extends Component<LinkProps> {
 
     return this.ref
   }
-  ref: HTMLElement | null = null
+  ref: Element | null = null
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles(this.makeStyleProps())
+    this.props.makeStyles?.(this.makeStyleProps())
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles(this.makeStyleProps())
+  componentDidUpdate() {
+    this.props.makeStyles?.(this.makeStyleProps())
   }
 
   makeStyleProps = (): LinkStyleProps => {
@@ -94,8 +94,7 @@ class Link extends Component<LinkProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'el' implicitly has an 'any' type.
-  handleElementRef = (el) => {
+  handleElementRef = (el: Element | null) => {
     const { elementRef } = this.props
 
     this.ref = el
@@ -105,8 +104,7 @@ class Link extends Component<LinkProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleClick = (event) => {
+  handleClick: React.MouseEventHandler<ViewOwnProps> = (event) => {
     const { onClick } = this.props
     const { interaction } = this
 
@@ -118,16 +116,14 @@ class Link extends Component<LinkProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleFocus = (event) => {
+  handleFocus: React.FocusEventHandler<ViewOwnProps> = (event) => {
     this.setState({ hasFocus: true })
     if (typeof this.props.onFocus === 'function') {
       this.props.onFocus(event)
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleBlur = (event) => {
+  handleBlur: React.FocusEventHandler<ViewOwnProps> = (event) => {
     this.setState({ hasFocus: false })
     if (typeof this.props.onBlur === 'function') {
       this.props.onBlur(event)
@@ -187,7 +183,7 @@ class Link extends Component<LinkProps> {
   }
 
   focus() {
-    this.ref && this.ref.focus()
+    this.ref && (this.ref as HTMLElement).focus()
   }
 
   renderIcon() {
@@ -223,7 +219,7 @@ class Link extends Component<LinkProps> {
       this.element === 'button' || this.element === 'input'
         ? 'button'
         : undefined
-    const tabIndex = role === 'button' && !isDisabled ? '0' : undefined
+    const tabIndex = role === 'button' && !isDisabled ? 0 : undefined
 
     return (
       <View
@@ -239,7 +235,6 @@ class Link extends Component<LinkProps> {
         aria-disabled={isDisabled ? 'true' : undefined}
         role={role}
         type={type}
-        //@ts-expect-error fix to be number
         tabIndex={tabIndex}
         css={this.props.styles?.link}
       >