Socket
Socket
Sign inDemoInstall

@khanacademy/wonder-blocks-icon-button

Package Overview
Dependencies
Maintainers
1
Versions
383
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@khanacademy/wonder-blocks-icon-button - npm Package Compare versions

Comparing version 2.0.4 to 3.0.0

37

components/icon-button-core.js

@@ -12,3 +12,3 @@ // @flow

} from "@khanacademy/wonder-blocks-color";
import {addStyle} from "@khanacademy/wonder-blocks-core";
import {addStyle, View} from "@khanacademy/wonder-blocks-core";
import type {ClickableHandlers} from "@khanacademy/wonder-blocks-core";

@@ -106,3 +106,3 @@ import Icon from "@khanacademy/wonder-blocks-icon";

"data-test-id": testId,
style: [defaultStyle, style],
style: defaultStyle,
...handlers,

@@ -113,19 +113,25 @@ };

return router && !skipClientNav ? (
<StyledLink {...commonProps} to={href}>
{child}
</StyledLink>
<View style={style}>
<StyledLink {...commonProps} to={href}>
{child}
</StyledLink>
</View>
) : (
<StyledAnchor {...commonProps} href={href}>
{child}
</StyledAnchor>
<View>
<StyledAnchor {...commonProps} href={href}>
{child}
</StyledAnchor>
</View>
);
} else {
return (
<StyledButton
type="button"
{...commonProps}
disabled={disabled}
>
{child}
</StyledButton>
<View style={style}>
<StyledButton
type="button"
{...commonProps}
disabled={disabled}
>
{child}
</StyledButton>
</View>
);

@@ -151,2 +157,3 @@ }

background: "none",
margin: -8,
},

@@ -153,0 +160,0 @@ disabled: {

16

components/icon-button.js

@@ -119,2 +119,18 @@ // @flow

*
* The size of an IconButton matches the size of icon it wraps which is 24x24
* pixels. The focus ring which is displayed on hover and focus is much
* larger but does not affect its size. This matches the behavior of Button.
*
* IconButtons require a certain amount of space between them to ensure the
* focus rings don't overlap. The minimum amount of spacing is 16px, but
* you should refer to the mocks provided by design. Using a Strut in between
* IconButtons is the preferred way to for adding this spacing.
*
* Many layouts require alignment of visual left (or right) side of an
* IconButton. This requires a little bit of pixel nudging since each icon
* as a different amount of internal padding.
*
* See the Toolbar documentation for examples of IconButton use that follow
* the best practices described above.
*
* ```js

@@ -121,0 +137,0 @@ * import {icons} from "@khanacademy/wonder-blocks-icon";

20

components/icon-button.md

@@ -5,14 +5,5 @@ Primary, secondary, and tertiary IconButton examples:

const {icons} = require("@khanacademy/wonder-blocks-icon");
const {StyleSheet} = require("aphrodite");
const {Strut} = require("@khanacademy/wonder-blocks-layout");
const styles = StyleSheet.create({
row: {
flexDirection: "row",
},
sideMargins: {
marginRight: 10,
}
});
<View style={[styles.row]}>
<View style={{flexDirection: "row"}}>
<IconButton

@@ -22,4 +13,4 @@ icon={icons.search}

onClick={(e) => console.log("hello")}
style={styles.sideMargins}
/>
<Strut size={16} />
<IconButton

@@ -30,4 +21,4 @@ icon={icons.search}

onClick={(e) => console.log("hello")}
style={styles.sideMargins}
/>
<Strut size={16} />
<IconButton

@@ -38,4 +29,4 @@ icon={icons.search}

onClick={(e) => console.log("hello")}
style={styles.sideMargins}
/>
<Strut size={16} />
<IconButton

@@ -46,3 +37,2 @@ disabled={true}

onClick={(e) => console.log("hello")}
style={styles.sideMargins}
/>

@@ -49,0 +39,0 @@ </View>

24

components/icon-button.test.js
// @flow
import React from "react";
import * as React from "react";
import {shallow} from "enzyme";

@@ -8,2 +8,3 @@ import {MemoryRouter, Route, Switch} from "react-router-dom";

import {mount, unmountAll} from "../../../utils/testing/mount.js";
import expectRenderError from "../../../utils/testing/expect-render-error.js";
import IconButton from "./icon-button.js";

@@ -28,13 +29,12 @@

test("throw an error for if light and not primary", () => {
expect(() =>
mount(
<IconButton
icon={icons.search}
aria-label="search"
kind="secondary"
light={true}
onClick={() => void 0}
/>,
),
).toThrowError("Light is only supported for primary IconButtons");
expectRenderError(
<IconButton
icon={icons.search}
aria-label="search"
kind="secondary"
light={true}
onClick={() => void 0}
/>,
"Light is only supported for primary IconButtons",
);
});

@@ -41,0 +41,0 @@

397

dist/es/index.js

@@ -6,157 +6,239 @@ import React from 'react';

import Color, { SemanticColor, mix, fade } from '@khanacademy/wonder-blocks-color';
import { addStyle, getClickableBehavior } from '@khanacademy/wonder-blocks-core';
import { addStyle, View, getClickableBehavior } from '@khanacademy/wonder-blocks-core';
import Icon from '@khanacademy/wonder-blocks-icon';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
return obj;
}
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _objectSpread(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
var ownKeys = Object.keys(source);
if (typeof Object.getOwnPropertySymbols === 'function') {
ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
return Object.getOwnPropertyDescriptor(source, sym).enumerable;
}));
}
ownKeys.forEach(function (key) {
_defineProperty(target, key, source[key]);
});
}
return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
const StyledAnchor = addStyle("a");
const StyledButton = addStyle("button");
const StyledLink = addStyle(Link);
class IconButtonCore extends React.Component {
render() {
const _this$props = this.props,
skipClientNav = _this$props.skipClientNav,
ariaLabel = _this$props["aria-label"],
color = _this$props.color,
disabled = _this$props.disabled,
focused = _this$props.focused,
hovered = _this$props.hovered,
href = _this$props.href,
icon = _this$props.icon,
kind = _this$props.kind,
light = _this$props.light,
pressed = _this$props.pressed,
style = _this$props.style,
testId = _this$props.testId,
handlers = _objectWithoutProperties(_this$props, ["skipClientNav", "aria-label", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId"]);
render() {
const _props = this.props,
{
skipClientNav,
"aria-label": ariaLabel,
color,
disabled,
focused,
hovered,
href,
icon,
kind,
light,
pressed,
style,
testId
} = _props,
handlers = _objectWithoutProperties(_props, ["skipClientNav", "aria-label", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId"]);
const { router } = this.context;
const router = this.context.router;
const buttonColor = color === "destructive" ? SemanticColor.controlDestructive : SemanticColor.controlDefault;
const buttonColor = color === "destructive" ? SemanticColor.controlDestructive : SemanticColor.controlDefault;
const buttonStyles = _generateStyles(buttonColor, kind, light);
const buttonStyles = _generateStyles(buttonColor, kind, light);
const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
const child = React.createElement(Icon, {
size: "medium",
color: "currentColor",
icon: icon
});
const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
const commonProps = _objectSpread({
// TODO(kevinb): figure out a better way of forward ARIA props
"aria-disabled": disabled ? "true" : undefined,
"aria-label": ariaLabel,
"data-test-id": testId,
style: defaultStyle
}, handlers);
const child = React.createElement(Icon, { size: "medium", color: "currentColor", icon: icon });
if (href) {
return router && !skipClientNav ? React.createElement(View, {
style: style
}, React.createElement(StyledLink, _extends({}, commonProps, {
to: href
}), child)) : React.createElement(View, null, React.createElement(StyledAnchor, _extends({}, commonProps, {
href: href
}), child));
} else {
return React.createElement(View, {
style: style
}, React.createElement(StyledButton, _extends({
type: "button"
}, commonProps, {
disabled: disabled
}), child));
}
}
const commonProps = _extends({
// TODO(kevinb): figure out a better way of forward ARIA props
"aria-disabled": disabled ? "true" : undefined,
"aria-label": ariaLabel,
"data-test-id": testId,
style: [defaultStyle, style]
}, handlers);
if (href) {
return router && !skipClientNav ? React.createElement(
StyledLink,
_extends({}, commonProps, { to: href }),
child
) : React.createElement(
StyledAnchor,
_extends({}, commonProps, { href: href }),
child
);
} else {
return React.createElement(
StyledButton,
_extends({
type: "button"
}, commonProps, {
disabled: disabled
}),
child
);
}
}
}
IconButtonCore.contextTypes = { router: PropTypes.any };
_defineProperty(IconButtonCore, "contextTypes", {
router: PropTypes.any
});
const sharedStyles = StyleSheet.create({
shared: {
position: "relative",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
boxSizing: "border-box",
height: 40,
width: 40,
padding: 0,
cursor: "pointer",
border: "none",
outline: "none",
textDecoration: "none",
background: "none"
},
disabled: {
cursor: "default"
}
shared: {
position: "relative",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
boxSizing: "border-box",
height: 40,
width: 40,
padding: 0,
cursor: "pointer",
border: "none",
outline: "none",
textDecoration: "none",
background: "none",
margin: -8
},
disabled: {
cursor: "default"
}
});
const styles = {};
const _generateStyles = (color, kind, light) => {
const buttonType = color + kind + light.toString();
if (styles[buttonType]) {
return styles[buttonType];
}
const buttonType = color + kind + light.toString();
if (light && kind !== "primary") {
throw new Error("Light is only supported for primary IconButtons");
}
if (styles[buttonType]) {
return styles[buttonType];
}
const { white, offBlack32, offBlack64, offBlack } = Color;
if (light && kind !== "primary") {
throw new Error("Light is only supported for primary IconButtons");
}
const newStyles = {
default: {},
focus: {
color: light ? white : color,
borderWidth: 2,
borderColor: light ? white : color,
borderStyle: "solid",
borderRadius: 4
},
active: {
color: light ? mix(fade(color, 0.32), white) : mix(offBlack32, color),
borderWidth: 2,
borderColor: light ? mix(fade(color, 0.32), white) : mix(offBlack32, color),
borderStyle: "solid",
borderRadius: 4
},
disabled: {
color: light ? mix(fade(white, 0.32), color) : offBlack32,
cursor: "default"
}
};
if (kind === "primary") {
newStyles["default"] = {
color: light ? white : color
};
} else if (kind === "secondary") {
newStyles["default"] = {
color: offBlack
};
} else if (kind === "tertiary") {
newStyles["default"] = {
color: offBlack64
};
} else {
throw new Error("IconButton kind not recognized");
const white = Color.white,
offBlack32 = Color.offBlack32,
offBlack64 = Color.offBlack64,
offBlack = Color.offBlack;
const newStyles = {
default: {},
focus: {
color: light ? white : color,
borderWidth: 2,
borderColor: light ? white : color,
borderStyle: "solid",
borderRadius: 4
},
active: {
color: light ? mix(fade(color, 0.32), white) : mix(offBlack32, color),
borderWidth: 2,
borderColor: light ? mix(fade(color, 0.32), white) : mix(offBlack32, color),
borderStyle: "solid",
borderRadius: 4
},
disabled: {
color: light ? mix(fade(white, 0.32), color) : offBlack32,
cursor: "default"
}
};
styles[buttonType] = StyleSheet.create(newStyles);
return styles[buttonType];
if (kind === "primary") {
newStyles["default"] = {
color: light ? white : color
};
} else if (kind === "secondary") {
newStyles["default"] = {
color: offBlack
};
} else if (kind === "tertiary") {
newStyles["default"] = {
color: offBlack64
};
} else {
throw new Error("IconButton kind not recognized");
}
styles[buttonType] = StyleSheet.create(newStyles);
return styles[buttonType];
};
var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
/**

@@ -172,2 +254,18 @@ * An IconButton is a button whose contents are an SVG image.

*
* The size of an IconButton matches the size of icon it wraps which is 24x24
* pixels. The focus ring which is displayed on hover and focus is much
* larger but does not affect its size. This matches the behavior of Button.
*
* IconButtons require a certain amount of space between them to ensure the
* focus rings don't overlap. The minimum amount of spacing is 16px, but
* you should refer to the mocks provided by design. Using a Strut in between
* IconButtons is the preferred way to for adding this spacing.
*
* Many layouts require alignment of visual left (or right) side of an
* IconButton. This requires a little bit of pixel nudging since each icon
* as a different amount of internal padding.
*
* See the Toolbar documentation for examples of IconButton use that follow
* the best practices described above.
*
* ```js

@@ -184,28 +282,26 @@ * import {icons} from "@khanacademy/wonder-blocks-icon";

class IconButton extends React.Component {
render() {
const _props = this.props,
{ onClick, href, skipClientNav } = _props,
sharedProps = _objectWithoutProperties$1(_props, ["onClick", "href", "skipClientNav"]);
const _this$props = this.props,
onClick = _this$props.onClick,
href = _this$props.href,
skipClientNav = _this$props.skipClientNav,
sharedProps = _objectWithoutProperties(_this$props, ["onClick", "href", "skipClientNav"]);
const ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
return React.createElement(ClickableBehavior, {
disabled: sharedProps.disabled,
href: href,
onClick: onClick,
role: "button"
}, (state, handlers) => {
return React.createElement(IconButtonCore, _extends({}, sharedProps, state, handlers, {
skipClientNav: skipClientNav,
href: href
}));
});
}
return React.createElement(
ClickableBehavior,
{
disabled: sharedProps.disabled,
href: href,
onClick: onClick,
role: "button"
},
(state, handlers) => {
return React.createElement(IconButtonCore, _extends$1({}, sharedProps, state, handlers, {
skipClientNav: skipClientNav,
href: href
}));
}
);
}
}
IconButton.defaultProps = {
_defineProperty(IconButton, "defaultProps", {
color: "default",

@@ -215,5 +311,8 @@ kind: "primary",

disabled: false
};
IconButton.contextTypes = { router: PropTypes.any };
});
_defineProperty(IconButton, "contextTypes", {
router: PropTypes.any
});
export default IconButton;

468

dist/index.js

@@ -85,3 +85,3 @@ module.exports =

/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 9);
/******/ return __webpack_require__(__webpack_require__.s = 7);
/******/ })

@@ -93,3 +93,3 @@ /************************************************************************/

module.exports = require("@khanacademy/wonder-blocks-core");
module.exports = require("@khanacademy/wonder-blocks-color");

@@ -100,3 +100,3 @@ /***/ }),

module.exports = require("prop-types");
module.exports = require("react");

@@ -107,3 +107,3 @@ /***/ }),

module.exports = require("react");
module.exports = require("@khanacademy/wonder-blocks-core");

@@ -114,3 +114,3 @@ /***/ }),

module.exports = require("@khanacademy/wonder-blocks-icon");
module.exports = require("prop-types");

@@ -121,3 +121,3 @@ /***/ }),

module.exports = require("@khanacademy/wonder-blocks-color");
module.exports = require("aphrodite");

@@ -128,3 +128,3 @@ /***/ }),

module.exports = require("react-router-dom");
module.exports = require("@khanacademy/wonder-blocks-icon");

@@ -135,252 +135,213 @@ /***/ }),

module.exports = require("aphrodite");
module.exports = require("react-router-dom");
/***/ }),
/* 7 */
/***/ (function(module, exports, __webpack_require__) {
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
// EXTERNAL MODULE: external "react"
var external_react_ = __webpack_require__(1);
var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
Object.defineProperty(exports, "__esModule", {
value: true
});
// EXTERNAL MODULE: external "prop-types"
var external_prop_types_ = __webpack_require__(3);
var external_prop_types_default = /*#__PURE__*/__webpack_require__.n(external_prop_types_);
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
var wonder_blocks_core_ = __webpack_require__(2);
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
// EXTERNAL MODULE: external "aphrodite"
var external_aphrodite_ = __webpack_require__(4);
var _react = __webpack_require__(2);
// EXTERNAL MODULE: external "react-router-dom"
var external_react_router_dom_ = __webpack_require__(6);
var _react2 = _interopRequireDefault(_react);
// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
var wonder_blocks_color_ = __webpack_require__(0);
var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
var _aphrodite = __webpack_require__(6);
// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
var wonder_blocks_icon_ = __webpack_require__(5);
var wonder_blocks_icon_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_icon_);
var _reactRouterDom = __webpack_require__(5);
// CONCATENATED MODULE: ./packages/wonder-blocks-icon-button/components/icon-button-core.js
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
var _propTypes = __webpack_require__(1);
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
var _propTypes2 = _interopRequireDefault(_propTypes);
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
var _wonderBlocksColor = __webpack_require__(4);
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
var _wonderBlocksColor2 = _interopRequireDefault(_wonderBlocksColor);
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var _wonderBlocksCore = __webpack_require__(0);
var _wonderBlocksIcon = __webpack_require__(3);
var _wonderBlocksIcon2 = _interopRequireDefault(_wonderBlocksIcon);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
const StyledAnchor = Object(wonder_blocks_core_["addStyle"])("a");
const StyledButton = Object(wonder_blocks_core_["addStyle"])("button");
const StyledLink = Object(wonder_blocks_core_["addStyle"])(external_react_router_dom_["Link"]);
class icon_button_core_IconButtonCore extends external_react_default.a.Component {
render() {
const _this$props = this.props,
skipClientNav = _this$props.skipClientNav,
ariaLabel = _this$props["aria-label"],
color = _this$props.color,
disabled = _this$props.disabled,
focused = _this$props.focused,
hovered = _this$props.hovered,
href = _this$props.href,
icon = _this$props.icon,
kind = _this$props.kind,
light = _this$props.light,
pressed = _this$props.pressed,
style = _this$props.style,
testId = _this$props.testId,
handlers = _objectWithoutProperties(_this$props, ["skipClientNav", "aria-label", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId"]);
var StyledAnchor = (0, _wonderBlocksCore.addStyle)("a");
var StyledButton = (0, _wonderBlocksCore.addStyle)("button");
var StyledLink = (0, _wonderBlocksCore.addStyle)(_reactRouterDom.Link);
const router = this.context.router;
const buttonColor = color === "destructive" ? wonder_blocks_color_["SemanticColor"].controlDestructive : wonder_blocks_color_["SemanticColor"].controlDefault;
var IconButtonCore = function (_React$Component) {
_inherits(IconButtonCore, _React$Component);
const buttonStyles = _generateStyles(buttonColor, kind, light);
function IconButtonCore() {
_classCallCheck(this, IconButtonCore);
const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
const child = external_react_default.a.createElement(wonder_blocks_icon_default.a, {
size: "medium",
color: "currentColor",
icon: icon
});
return _possibleConstructorReturn(this, (IconButtonCore.__proto__ || Object.getPrototypeOf(IconButtonCore)).apply(this, arguments));
const commonProps = _objectSpread({
// TODO(kevinb): figure out a better way of forward ARIA props
"aria-disabled": disabled ? "true" : undefined,
"aria-label": ariaLabel,
"data-test-id": testId,
style: defaultStyle
}, handlers);
if (href) {
return router && !skipClientNav ? external_react_default.a.createElement(wonder_blocks_core_["View"], {
style: style
}, external_react_default.a.createElement(StyledLink, _extends({}, commonProps, {
to: href
}), child)) : external_react_default.a.createElement(wonder_blocks_core_["View"], null, external_react_default.a.createElement(StyledAnchor, _extends({}, commonProps, {
href: href
}), child));
} else {
return external_react_default.a.createElement(wonder_blocks_core_["View"], {
style: style
}, external_react_default.a.createElement(StyledButton, _extends({
type: "button"
}, commonProps, {
disabled: disabled
}), child));
}
}
_createClass(IconButtonCore, [{
key: "render",
value: function render() {
var _props = this.props,
skipClientNav = _props.skipClientNav,
ariaLabel = _props["aria-label"],
color = _props.color,
disabled = _props.disabled,
focused = _props.focused,
hovered = _props.hovered,
href = _props.href,
icon = _props.icon,
kind = _props.kind,
light = _props.light,
pressed = _props.pressed,
style = _props.style,
testId = _props.testId,
handlers = _objectWithoutProperties(_props, ["skipClientNav", "aria-label", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId"]);
}
var router = this.context.router;
_defineProperty(icon_button_core_IconButtonCore, "contextTypes", {
router: external_prop_types_default.a.any
});
const sharedStyles = external_aphrodite_["StyleSheet"].create({
shared: {
position: "relative",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
boxSizing: "border-box",
height: 40,
width: 40,
padding: 0,
cursor: "pointer",
border: "none",
outline: "none",
textDecoration: "none",
background: "none",
margin: -8
},
disabled: {
cursor: "default"
}
});
const styles = {};
var buttonColor = color === "destructive" ? _wonderBlocksColor.SemanticColor.controlDestructive : _wonderBlocksColor.SemanticColor.controlDefault;
const _generateStyles = (color, kind, light) => {
const buttonType = color + kind + light.toString();
var buttonStyles = _generateStyles(buttonColor, kind, light);
if (styles[buttonType]) {
return styles[buttonType];
}
var defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
if (light && kind !== "primary") {
throw new Error("Light is only supported for primary IconButtons");
}
var child = _react2.default.createElement(_wonderBlocksIcon2.default, { size: "medium", color: "currentColor", icon: icon });
var commonProps = _extends({
// TODO(kevinb): figure out a better way of forward ARIA props
"aria-disabled": disabled ? "true" : undefined,
"aria-label": ariaLabel,
"data-test-id": testId,
style: [defaultStyle, style]
}, handlers);
if (href) {
return router && !skipClientNav ? _react2.default.createElement(
StyledLink,
_extends({}, commonProps, { to: href }),
child
) : _react2.default.createElement(
StyledAnchor,
_extends({}, commonProps, { href: href }),
child
);
} else {
return _react2.default.createElement(
StyledButton,
_extends({
type: "button"
}, commonProps, {
disabled: disabled
}),
child
);
}
}
}]);
return IconButtonCore;
}(_react2.default.Component);
IconButtonCore.contextTypes = { router: _propTypes2.default.any };
exports.default = IconButtonCore;
var sharedStyles = _aphrodite.StyleSheet.create({
shared: {
position: "relative",
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
boxSizing: "border-box",
height: 40,
width: 40,
padding: 0,
cursor: "pointer",
border: "none",
outline: "none",
textDecoration: "none",
background: "none"
const white = wonder_blocks_color_default.a.white,
offBlack32 = wonder_blocks_color_default.a.offBlack32,
offBlack64 = wonder_blocks_color_default.a.offBlack64,
offBlack = wonder_blocks_color_default.a.offBlack;
const newStyles = {
default: {},
focus: {
color: light ? white : color,
borderWidth: 2,
borderColor: light ? white : color,
borderStyle: "solid",
borderRadius: 4
},
active: {
color: light ? Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(color, 0.32), white) : Object(wonder_blocks_color_["mix"])(offBlack32, color),
borderWidth: 2,
borderColor: light ? Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(color, 0.32), white) : Object(wonder_blocks_color_["mix"])(offBlack32, color),
borderStyle: "solid",
borderRadius: 4
},
disabled: {
cursor: "default"
color: light ? Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(white, 0.32), color) : offBlack32,
cursor: "default"
}
});
};
var styles = {};
var _generateStyles = function _generateStyles(color, kind, light) {
var buttonType = color + kind + light.toString();
if (styles[buttonType]) {
return styles[buttonType];
}
if (light && kind !== "primary") {
throw new Error("Light is only supported for primary IconButtons");
}
var white = _wonderBlocksColor2.default.white,
offBlack32 = _wonderBlocksColor2.default.offBlack32,
offBlack64 = _wonderBlocksColor2.default.offBlack64,
offBlack = _wonderBlocksColor2.default.offBlack;
var newStyles = {
default: {},
focus: {
color: light ? white : color,
borderWidth: 2,
borderColor: light ? white : color,
borderStyle: "solid",
borderRadius: 4
},
active: {
color: light ? (0, _wonderBlocksColor.mix)((0, _wonderBlocksColor.fade)(color, 0.32), white) : (0, _wonderBlocksColor.mix)(offBlack32, color),
borderWidth: 2,
borderColor: light ? (0, _wonderBlocksColor.mix)((0, _wonderBlocksColor.fade)(color, 0.32), white) : (0, _wonderBlocksColor.mix)(offBlack32, color),
borderStyle: "solid",
borderRadius: 4
},
disabled: {
color: light ? (0, _wonderBlocksColor.mix)((0, _wonderBlocksColor.fade)(white, 0.32), color) : offBlack32,
cursor: "default"
}
if (kind === "primary") {
newStyles["default"] = {
color: light ? white : color
};
if (kind === "primary") {
newStyles["default"] = {
color: light ? white : color
};
} else if (kind === "secondary") {
newStyles["default"] = {
color: offBlack
};
} else if (kind === "tertiary") {
newStyles["default"] = {
color: offBlack64
};
} else {
throw new Error("IconButton kind not recognized");
}
} else if (kind === "secondary") {
newStyles["default"] = {
color: offBlack
};
} else if (kind === "tertiary") {
newStyles["default"] = {
color: offBlack64
};
} else {
throw new Error("IconButton kind not recognized");
}
styles[buttonType] = _aphrodite.StyleSheet.create(newStyles);
return styles[buttonType];
styles[buttonType] = external_aphrodite_["StyleSheet"].create(newStyles);
return styles[buttonType];
};
// CONCATENATED MODULE: ./packages/wonder-blocks-icon-button/components/icon-button.js
function icon_button_extends() { icon_button_extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return icon_button_extends.apply(this, arguments); }
/***/ }),
/* 8 */
/***/ (function(module, exports, __webpack_require__) {
function icon_button_objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = icon_button_objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
"use strict";
function icon_button_objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
function icon_button_defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = __webpack_require__(2);
var _react2 = _interopRequireDefault(_react);
var _propTypes = __webpack_require__(1);
var _propTypes2 = _interopRequireDefault(_propTypes);
var _wonderBlocksCore = __webpack_require__(0);
var _iconButtonCore = __webpack_require__(7);
var _iconButtonCore2 = _interopRequireDefault(_iconButtonCore);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
/**

@@ -396,2 +357,18 @@ * An IconButton is a button whose contents are an SVG image.

*
* The size of an IconButton matches the size of icon it wraps which is 24x24
* pixels. The focus ring which is displayed on hover and focus is much
* larger but does not affect its size. This matches the behavior of Button.
*
* IconButtons require a certain amount of space between them to ensure the
* focus rings don't overlap. The minimum amount of spacing is 16px, but
* you should refer to the mocks provided by design. Using a Strut in between
* IconButtons is the preferred way to for adding this spacing.
*
* Many layouts require alignment of visual left (or right) side of an
* IconButton. This requires a little bit of pixel nudging since each icon
* as a different amount of internal padding.
*
* See the Toolbar documentation for examples of IconButton use that follow
* the best practices described above.
*
* ```js

@@ -407,44 +384,27 @@ * import {icons} from "@khanacademy/wonder-blocks-icon";

*/
var IconButton = function (_React$Component) {
_inherits(IconButton, _React$Component);
class icon_button_IconButton extends external_react_default.a.Component {
render() {
const _this$props = this.props,
onClick = _this$props.onClick,
href = _this$props.href,
skipClientNav = _this$props.skipClientNav,
sharedProps = icon_button_objectWithoutProperties(_this$props, ["onClick", "href", "skipClientNav"]);
function IconButton() {
_classCallCheck(this, IconButton);
return _possibleConstructorReturn(this, (IconButton.__proto__ || Object.getPrototypeOf(IconButton)).apply(this, arguments));
const ClickableBehavior = Object(wonder_blocks_core_["getClickableBehavior"])(href, skipClientNav, this.context.router);
return external_react_default.a.createElement(ClickableBehavior, {
disabled: sharedProps.disabled,
href: href,
onClick: onClick,
role: "button"
}, (state, handlers) => {
return external_react_default.a.createElement(icon_button_core_IconButtonCore, icon_button_extends({}, sharedProps, state, handlers, {
skipClientNav: skipClientNav,
href: href
}));
});
}
_createClass(IconButton, [{
key: "render",
value: function render() {
var _props = this.props,
onClick = _props.onClick,
href = _props.href,
skipClientNav = _props.skipClientNav,
sharedProps = _objectWithoutProperties(_props, ["onClick", "href", "skipClientNav"]);
}
var ClickableBehavior = (0, _wonderBlocksCore.getClickableBehavior)(href, skipClientNav, this.context.router);
return _react2.default.createElement(
ClickableBehavior,
{
disabled: sharedProps.disabled,
href: href,
onClick: onClick,
role: "button"
},
function (state, handlers) {
return _react2.default.createElement(_iconButtonCore2.default, _extends({}, sharedProps, state, handlers, {
skipClientNav: skipClientNav,
href: href
}));
}
);
}
}]);
return IconButton;
}(_react2.default.Component);
IconButton.defaultProps = {
icon_button_defineProperty(icon_button_IconButton, "defaultProps", {
color: "default",

@@ -454,27 +414,13 @@ kind: "primary",

disabled: false
};
IconButton.contextTypes = { router: _propTypes2.default.any };
exports.default = IconButton;
});
/***/ }),
/* 9 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
icon_button_defineProperty(icon_button_IconButton, "contextTypes", {
router: external_prop_types_default.a.any
});
exports.default = undefined;
// CONCATENATED MODULE: ./packages/wonder-blocks-icon-button/index.js
/* concated harmony reexport */__webpack_require__.d(__webpack_exports__, "default", function() { return icon_button_IconButton; });
var _iconButton = __webpack_require__(8);
var _iconButton2 = _interopRequireDefault(_iconButton);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.default = _iconButton2.default;
/***/ })
/******/ ]);

20

generated-snapshot.test.js

@@ -17,15 +17,6 @@ // This file is auto-generated by gen-snapshot-tests.js

const {icons} = require("@khanacademy/wonder-blocks-icon");
const {StyleSheet} = require("aphrodite");
const {Strut} = require("@khanacademy/wonder-blocks-layout");
const styles = StyleSheet.create({
row: {
flexDirection: "row",
},
sideMargins: {
marginRight: 10,
},
});
const example = (
<View style={[styles.row]}>
<View style={{flexDirection: "row"}}>
<IconButton

@@ -35,4 +26,4 @@ icon={icons.search}

onClick={(e) => console.log("hello")}
style={styles.sideMargins}
/>
<Strut size={16} />
<IconButton

@@ -43,4 +34,4 @@ icon={icons.search}

onClick={(e) => console.log("hello")}
style={styles.sideMargins}
/>
<Strut size={16} />
<IconButton

@@ -51,4 +42,4 @@ icon={icons.search}

onClick={(e) => console.log("hello")}
style={styles.sideMargins}
/>
<Strut size={16} />
<IconButton

@@ -59,3 +50,2 @@ disabled={true}

onClick={(e) => console.log("hello")}
style={styles.sideMargins}
/>

@@ -62,0 +52,0 @@ </View>

8

package.json
{
"name": "@khanacademy/wonder-blocks-icon-button",
"version": "2.0.4",
"version": "3.0.0",
"design": "v1",

@@ -18,5 +18,5 @@ "publishConfig": {

"dependencies": {
"@khanacademy/wonder-blocks-color": "^1.0.9",
"@khanacademy/wonder-blocks-core": "^1.2.2",
"@khanacademy/wonder-blocks-icon": "^1.0.6"
"@khanacademy/wonder-blocks-color": "^1.0.10",
"@khanacademy/wonder-blocks-core": "^1.2.3",
"@khanacademy/wonder-blocks-icon": "^1.0.7"
},

@@ -23,0 +23,0 @@ "peerDependencies": {

__snapshots__/custom-snapshot.test.js.snap

Sorry, the diff of this file is not supported yet

__snapshots__/generated-snapshot.test.js.snap

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc