@khanacademy/wonder-blocks-icon-button
Advanced tools
@khanacademy/wonder-blocks-icon-button - npm Package Compare versions
Comparing version 3.2.3 to 3.3.0
@@ -14,3 +14,3 @@ // @flow | ||
| import type { | ||
| ClickableHandlers, | ||
| ChildrenProps, | ||
| ClickableState, | ||
@@ -23,3 +23,3 @@ } from "@khanacademy/wonder-blocks-clickable"; | ||
| ...SharedProps, | ||
| ...ClickableHandlers, | ||
| ...ChildrenProps, | ||
| ...ClickableState, | ||
@@ -58,3 +58,3 @@ | ||
| waiting: _, | ||
| ...handlers | ||
| ...restProps | ||
| } = this.props; | ||
@@ -86,3 +86,3 @@ const {router} = this.context; | ||
| style: [defaultStyle, style], | ||
| ...handlers, | ||
| ...restProps, | ||
| }; | ||
@@ -89,0 +89,0 @@ |
@@ -85,22 +85,11 @@ // @flow | ||
| */ | ||
| target?: string, | ||
| target?: "_blank", | ||
| /** | ||
| * Specifies the type of relationship between the current document and the | ||
| * linked document. Should only be used when `href` is specified. | ||
| * linked document. Should only be used when `href` is specified. This | ||
| * defaults to "noopener noreferrer" when `target="_blank"`, but can be | ||
| * overridden by setting this prop to something else. | ||
| */ | ||
| rel?: | ||
| | "alternate" | ||
| | "author" | ||
| | "bookmark" | ||
| | "external" | ||
| | "help" | ||
| | "license" | ||
| | "next" | ||
| | "nofollow" | ||
| | "noreferrer" | ||
| | "noopener" | ||
| | "prev" | ||
| | "search" | ||
| | "tag", | ||
| rel?: string, | ||
@@ -210,3 +199,3 @@ /** | ||
| > | ||
| {(state, {tabIndex: clickableTabIndex, ...handlers}) => { | ||
| {(state, {tabIndex: clickableTabIndex, ...childrenProps}) => { | ||
| return ( | ||
@@ -216,3 +205,3 @@ <IconButtonCore | ||
| {...state} | ||
| {...handlers} | ||
| {...childrenProps} | ||
| skipClientNav={skipClientNav} | ||
@@ -219,0 +208,0 @@ href={href} |
@@ -246,3 +246,3 @@ import React from 'react'; | ||
| _ = _this$props.waiting, | ||
| handlers = _objectWithoutProperties(_this$props, ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"]); | ||
| restProps = _objectWithoutProperties(_this$props, ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"]); | ||
@@ -264,3 +264,3 @@ var router = this.context.router; | ||
| style: [defaultStyle, style] | ||
| }, handlers); | ||
| }, restProps); | ||
@@ -443,5 +443,5 @@ if (href && !disabled) { | ||
| var clickableTabIndex = _ref.tabIndex, | ||
| handlers = _objectWithoutProperties(_ref, ["tabIndex"]); | ||
| childrenProps = _objectWithoutProperties(_ref, ["tabIndex"]); | ||
| return /*#__PURE__*/React.createElement(IconButtonCore, _extends({}, sharedProps, state, handlers, { | ||
| return /*#__PURE__*/React.createElement(IconButtonCore, _extends({}, sharedProps, state, childrenProps, { | ||
| skipClientNav: skipClientNav, | ||
@@ -448,0 +448,0 @@ href: href, |
@@ -158,2 +158,6 @@ module.exports = | ||
| // EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color" | ||
| var wonder_blocks_color_ = __webpack_require__(1); | ||
| var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_); | ||
| // CONCATENATED MODULE: ./packages/wonder-blocks-clickable/dist/es/index.js | ||
@@ -168,2 +172,3 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
| function _classCallCheck(instance, Constructor) { | ||
@@ -492,4 +497,4 @@ if (!(instance instanceof Constructor)) { | ||
| * `ClickableBehavior` accepts a function as `children` which is passed state | ||
| * and an object containing event handlers. The `children` function should | ||
| * return a clickable React Element of some sort. | ||
| * and an object containing event handlers and some other props. The `children` | ||
| * function should return a clickable React Element of some sort. | ||
| * | ||
@@ -506,7 +511,7 @@ * Example: | ||
| * > | ||
| * {({hovered}, handlers) => | ||
| * {({hovered}, childrenProps) => | ||
| * <RoundRect | ||
| * textcolor='white' | ||
| * backgroundColor={hovered ? 'red' : 'blue'}} | ||
| * {...handlers} | ||
| * {...childrenProps} | ||
| * > | ||
@@ -748,6 +753,12 @@ * {this.props.children} | ||
| skipClientNav = _this$props4.skipClientNav, | ||
| target = _this$props4.target; | ||
| _this$props4$target = _this$props4.target, | ||
| target = _this$props4$target === void 0 ? undefined : _this$props4$target; | ||
| if (href) { | ||
| if (history && !skipClientNav) { | ||
| if (target === "_blank") { | ||
| window.open(href, "_blank"); | ||
| this.setState({ | ||
| waiting: false | ||
| }); | ||
| } else if (history && !skipClientNav) { | ||
| history.push(href); | ||
@@ -758,9 +769,4 @@ this.setState({ | ||
| } else { | ||
| if (target === "_blank") { | ||
| window.open(href, "_blank"); | ||
| } else { | ||
| window.location.assign(href); | ||
| } // We don't bother clearing the waiting state, the full page | ||
| window.location.assign(href); // We don't bother clearing the waiting state, the full page | ||
| // load navigation will do that for us by loading a new page. | ||
| } | ||
@@ -783,3 +789,3 @@ } | ||
| if (history && !skipClientNav) { | ||
| if (history && !skipClientNav || this.props.target === "_blank") { | ||
| // client-side nav | ||
@@ -885,3 +891,3 @@ safeWithNav(); | ||
| value: function render() { | ||
| var handlers = this.props.disabled ? disabledHandlers : { | ||
| var childrenProps = this.props.disabled ? disabledHandlers : { | ||
| onClick: this.handleClick, | ||
@@ -903,5 +909,10 @@ onMouseEnter: this.handleMouseEnter, | ||
| tabIndex: 0 | ||
| }; | ||
| }; // When the link is set to open in a new window, we want to append some | ||
| // `rel` attributes. This is to ensure that the links we're sending folks | ||
| // to can't hijack the existing page. | ||
| // More info: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/ | ||
| childrenProps.rel = this.props.rel || (this.props.target === "_blank" ? "noopener noreferrer" : undefined); | ||
| var children = this.props.children; | ||
| return children && children(this.state, handlers); | ||
| return children && children(this.state, childrenProps); | ||
| } | ||
@@ -1012,3 +1023,3 @@ }]); | ||
| role: _this.props.role, | ||
| target: _this.props.target, | ||
| target: _this.props.target || undefined, | ||
| "aria-disabled": _this.props.disabled ? "true" : undefined | ||
@@ -1020,3 +1031,3 @@ }), _this.props.children(clickableState)); | ||
| role: _this.props.role, | ||
| target: _this.props.target, | ||
| target: _this.props.target || undefined, | ||
| "aria-disabled": _this.props.disabled ? "true" : undefined | ||
@@ -1049,23 +1060,45 @@ }), _this.props.children(clickableState)); | ||
| style = _this$props.style, | ||
| target = _this$props.target, | ||
| _this$props$target = _this$props.target, | ||
| target = _this$props$target === void 0 ? undefined : _this$props$target, | ||
| testId = _this$props.testId, | ||
| onKeyDown = _this$props.onKeyDown, | ||
| onKeyUp = _this$props.onKeyUp, | ||
| restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp"]); | ||
| hideDefaultFocusRing = _this$props.hideDefaultFocusRing, | ||
| restProps = _objectWithoutProperties(_this$props, ["href", "onClick", "skipClientNav", "beforeNav", "safeWithNav", "style", "target", "testId", "onKeyDown", "onKeyUp", "hideDefaultFocusRing"]); | ||
| var ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router); | ||
| return /*#__PURE__*/Object(external_react_["createElement"])(ClickableBehavior, { | ||
| href: href, | ||
| onClick: onClick, | ||
| beforeNav: beforeNav, | ||
| safeWithNav: safeWithNav, | ||
| target: target, | ||
| onKeyDown: onKeyDown, | ||
| onKeyUp: onKeyUp | ||
| }, function (state, handlers) { | ||
| return _this2.getCorrectTag(state, _objectSpread2(_objectSpread2({}, restProps), {}, { | ||
| "data-test-id": testId, | ||
| style: [styles.reset, style] | ||
| }, handlers)); | ||
| }); | ||
| var getStyle = function getStyle(state) { | ||
| return [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && styles.focused, style]; | ||
| }; | ||
| if (beforeNav) { | ||
| return /*#__PURE__*/Object(external_react_["createElement"])(ClickableBehavior, { | ||
| href: href, | ||
| onClick: onClick, | ||
| beforeNav: beforeNav, | ||
| safeWithNav: safeWithNav, | ||
| onKeyDown: onKeyDown, | ||
| onKeyUp: onKeyUp | ||
| }, function (state, childrenProps) { | ||
| return _this2.getCorrectTag(state, _objectSpread2(_objectSpread2({}, restProps), {}, { | ||
| "data-test-id": testId, | ||
| style: getStyle(state) | ||
| }, childrenProps)); | ||
| }); | ||
| } else { | ||
| return /*#__PURE__*/Object(external_react_["createElement"])(ClickableBehavior, { | ||
| href: href, | ||
| onClick: onClick, | ||
| safeWithNav: safeWithNav, | ||
| onKeyDown: onKeyDown, | ||
| onKeyUp: onKeyUp, | ||
| target: target | ||
| }, function (state, childrenProps) { | ||
| return _this2.getCorrectTag(state, _objectSpread2(_objectSpread2({}, restProps), {}, { | ||
| "data-test-id": testId, | ||
| style: getStyle(state) | ||
| }, childrenProps)); | ||
| }); | ||
| } | ||
| } | ||
@@ -1115,2 +1148,8 @@ }]); | ||
| MozOsxFontSmoothing: "inherit" | ||
| }, | ||
| link: { | ||
| cursor: "pointer" | ||
| }, | ||
| focused: { | ||
| outline: "solid 2px ".concat(wonder_blocks_color_default.a.blue) | ||
| } | ||
@@ -1120,6 +1159,2 @@ }); | ||
| // EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color" | ||
| var wonder_blocks_color_ = __webpack_require__(1); | ||
| var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_); | ||
| // EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon" | ||
@@ -1203,3 +1238,3 @@ var wonder_blocks_icon_ = __webpack_require__(6); | ||
| _ = _this$props.waiting, | ||
| handlers = icon_button_core_objectWithoutProperties(_this$props, ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"]); | ||
| restProps = icon_button_core_objectWithoutProperties(_this$props, ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"]); | ||
@@ -1221,3 +1256,3 @@ var router = this.context.router; | ||
| style: [defaultStyle, style] | ||
| }, handlers); | ||
| }, restProps); | ||
@@ -1437,5 +1472,5 @@ if (href && !disabled) { | ||
| var clickableTabIndex = _ref.tabIndex, | ||
| handlers = icon_button_objectWithoutProperties(_ref, ["tabIndex"]); | ||
| childrenProps = icon_button_objectWithoutProperties(_ref, ["tabIndex"]); | ||
| return /*#__PURE__*/external_react_default.a.createElement(icon_button_core_IconButtonCore, icon_button_extends({}, sharedProps, state, handlers, { | ||
| return /*#__PURE__*/external_react_default.a.createElement(icon_button_core_IconButtonCore, icon_button_extends({}, sharedProps, state, childrenProps, { | ||
| skipClientNav: skipClientNav, | ||
@@ -1442,0 +1477,0 @@ href: href, |
| { | ||
| "name": "@khanacademy/wonder-blocks-icon-button", | ||
| "version": "3.2.3", | ||
| "version": "3.3.0", | ||
| "design": "v1", | ||
@@ -19,4 +19,4 @@ "publishConfig": { | ||
| "@khanacademy/wonder-blocks-color": "^1.1.15", | ||
| "@khanacademy/wonder-blocks-core": "^3.0.0", | ||
| "@khanacademy/wonder-blocks-icon": "^1.2.14" | ||
| "@khanacademy/wonder-blocks-core": "^3.0.1", | ||
| "@khanacademy/wonder-blocks-icon": "^1.2.15" | ||
| }, | ||
@@ -32,3 +32,3 @@ "peerDependencies": { | ||
| }, | ||
| "gitHead": "7aa04017e8c20479e33c5c0d6b59f8bd3f6379e9" | ||
| "gitHead": "a8993049a08b602a0309155e4a1f4d969ef51c54" | ||
| } |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.76%
216998
- Lines of code
- increased by0.9%
2346