@khanacademy/wonder-blocks-link - npm Package Compare versions

Comparing version 3.4.2 to 3.4.3

__tests__/custom-snapshot.test.js

@@ -6,2 +6,3 @@ // @flow
 import LinkCore from "../components/link-core.js";
+import Link from "../components/link.js";
 
@@ -25,2 +26,20 @@ const defaultHandlers = {
 
+describe("Link", () => {
+    test.each`
+        tabIndex
+        ${-1}
+        ${0}
+        ${1}
+    `("<Link tabIndex={$tabIndex}>", ({tabIndex}) => {
+        const tree = renderer
+            .create(
+                <Link href="#" tabIndex={tabIndex}>
+                    Click me
+                </Link>,
+            )
+            .toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});
+
 describe("LinkCore", () => {
@@ -48,3 +67,2 @@ for (const kind of ["primary", "secondary"]) {
                                         kind={kind}
-                                        caret={false}
                                         light={light}
@@ -51,0 +69,0 @@ visitable={visitable}

components/link-core.js

@@ -31,3 +31,2 @@ // @flow
         const {
-            caret, // eslint-disable-line no-unused-vars
             children,
@@ -45,3 +44,3 @@ skipClientNav,
             waiting: _,
-            ...handlers
+            ...restProps
         } = this.props;
@@ -63,3 +62,3 @@ const {router} = this.context;
             style: [defaultStyles, style],
-            ...handlers,
+            ...restProps,
         };
@@ -66,0 +65,0 @@

components/link.js

@@ -24,8 +24,2 @@ // @flow
     /**
-     * Whether to display a caret after the text.
-     */
-    // TODO(yejia): Add once we have an Icon component
-    caret: boolean,
-
-    /**
      * An optional id attribute.
@@ -76,2 +70,7 @@ */
     /**
+     * Set the tabindex attribute on the rendered element.
+     */
+    tabIndex?: number,
+
+    /**
      * Test ID used for e2e testing.
@@ -163,3 +162,2 @@ */
     static defaultProps = {
-        caret: false,
         kind: "primary",
@@ -178,2 +176,3 @@ light: false,
             children,
+            tabIndex,
             ...sharedProps
@@ -197,3 +196,3 @@ } = this.props;
             >
-                {(state, handlers) => {
+                {(state, {tabIndex: clickableTabIndex, ...handlers}) => {
                     return (
@@ -206,2 +205,6 @@ <LinkCore
                             href={href}
+                            // If tabIndex is provide to the component we allow
+                            // it to override the tabIndex provide to use by
+                            // ClickableBehavior.
+                            tabIndex={tabIndex || clickableTabIndex}
                         >
@@ -208,0 +211,0 @@ {children}

dist/es/index.js

@@ -230,3 +230,2 @@ import { createElement, Component } from 'react';
       var _this$props = this.props,
-          caret = _this$props.caret,
           children = _this$props.children,
@@ -244,3 +243,3 @@ skipClientNav = _this$props.skipClientNav,
           _ = _this$props.waiting,
-          handlers = _objectWithoutProperties(_this$props, ["caret", "children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"]);
+          restProps = _objectWithoutProperties(_this$props, ["children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"]);
 
@@ -256,3 +255,3 @@ var router = this.context.router;
         style: [defaultStyles, style]
-      }, handlers);
+      }, restProps);
 
@@ -371,3 +370,4 @@ return router && !skipClientNav ? /*#__PURE__*/createElement(StyledLink, _extends({}, commonProps, {
           children = _this$props.children,
-          sharedProps = _objectWithoutProperties(_this$props, ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children"]);
+          tabIndex = _this$props.tabIndex,
+          sharedProps = _objectWithoutProperties(_this$props, ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex"]);
 
@@ -382,6 +382,13 @@ var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
         safeWithNav: safeWithNav
-      }, function (state, handlers) {
+      }, function (state, _ref) {
+        var clickableTabIndex = _ref.tabIndex,
+            handlers = _objectWithoutProperties(_ref, ["tabIndex"]);
+
         return /*#__PURE__*/createElement(LinkCore, _extends({}, sharedProps, state, handlers, {
           skipClientNav: skipClientNav,
-          href: href
+          href: href // If tabIndex is provide to the component we allow
+          // it to override the tabIndex provide to use by
+          // ClickableBehavior.
+          ,
+          tabIndex: tabIndex || clickableTabIndex
         }), children);
@@ -400,3 +407,2 @@ });
 _defineProperty(Link, "defaultProps", {
-  caret: false,
   kind: "primary",
@@ -403,0 +409,0 @@ light: false,

dist/index.js

@@ -214,3 +214,2 @@ module.exports =
       var _this$props = this.props,
-          caret = _this$props.caret,
           children = _this$props.children,
@@ -228,3 +227,3 @@ skipClientNav = _this$props.skipClientNav,
           _ = _this$props.waiting,
-          handlers = _objectWithoutProperties(_this$props, ["caret", "children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"]);
+          restProps = _objectWithoutProperties(_this$props, ["children", "skipClientNav", "focused", "hovered", "href", "kind", "light", "visitable", "pressed", "style", "testId", "waiting"]);
 
@@ -240,3 +239,3 @@ var router = this.context.router;
         style: [defaultStyles, style]
-      }, handlers);
+      }, restProps);
 
@@ -392,3 +391,4 @@ return router && !skipClientNav ? /*#__PURE__*/external_react_["createElement"](StyledLink, _extends({}, commonProps, {
           children = _this$props.children,
-          sharedProps = link_objectWithoutProperties(_this$props, ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children"]);
+          tabIndex = _this$props.tabIndex,
+          sharedProps = link_objectWithoutProperties(_this$props, ["onClick", "beforeNav", "safeWithNav", "href", "skipClientNav", "children", "tabIndex"]);
 
@@ -403,6 +403,13 @@ var ClickableBehavior = Object(wonder_blocks_core_["getClickableBehavior"])(href, skipClientNav, this.context.router);
         safeWithNav: safeWithNav
-      }, function (state, handlers) {
+      }, function (state, _ref) {
+        var clickableTabIndex = _ref.tabIndex,
+            handlers = link_objectWithoutProperties(_ref, ["tabIndex"]);
+
         return /*#__PURE__*/external_react_["createElement"](link_core_LinkCore, link_extends({}, sharedProps, state, handlers, {
           skipClientNav: skipClientNav,
-          href: href
+          href: href // If tabIndex is provide to the component we allow
+          // it to override the tabIndex provide to use by
+          // ClickableBehavior.
+          ,
+          tabIndex: tabIndex || clickableTabIndex
         }), children);
@@ -421,3 +428,2 @@ });
 link_defineProperty(link_Link, "defaultProps", {
-  caret: false,
   kind: "primary",
@@ -424,0 +430,0 @@ light: false,

package.json

 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "3.4.2",
+  "version": "3.4.3",
   "design": "v1",
@@ -30,3 +30,3 @@ "publishConfig": {
   },
-  "gitHead": "56683c4c76becee78d40834acd354937e24e8781"
+  "gitHead": "3210dda697bd760a81c709beb6864d113f0c53e0"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

87841

increased by3.52%

Lines of code

1504

increased by1.97%

No dependency changes