@khanacademy/wonder-blocks-icon 1.2.21 → 1.2.25
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/CHANGELOG.md +6 -0
- package/dist/es/index.js +5 -6
- package/dist/index.js +128 -173
- package/package.json +6 -7
- package/src/components/__tests__/icon.test.js +3 -4
- package/src/util/icon-assets.js +29 -58
- package/LICENSE +0 -21
package/CHANGELOG.md
ADDED
package/dist/es/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from '@babel/runtime/helpers/extends';
|
|
2
2
|
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
|
|
3
|
-
import
|
|
3
|
+
import * as React from 'react';
|
|
4
4
|
import { StyleSheet } from 'aphrodite';
|
|
5
5
|
import { addStyle } from '@khanacademy/wonder-blocks-core';
|
|
6
6
|
|
|
@@ -98,7 +98,7 @@ const StyledSVG = addStyle("svg");
|
|
|
98
98
|
* respectively.
|
|
99
99
|
*/
|
|
100
100
|
|
|
101
|
-
class Icon extends PureComponent {
|
|
101
|
+
class Icon extends React.PureComponent {
|
|
102
102
|
render() {
|
|
103
103
|
const _this$props = this.props,
|
|
104
104
|
{
|
|
@@ -115,12 +115,12 @@ class Icon extends PureComponent {
|
|
|
115
115
|
} = getPathForIcon(icon, size);
|
|
116
116
|
const pixelSize = viewportPixelsForSize(size);
|
|
117
117
|
const viewboxPixelSize = viewportPixelsForSize(assetSize);
|
|
118
|
-
return /*#__PURE__*/createElement(StyledSVG, _extends({}, sharedProps, {
|
|
118
|
+
return /*#__PURE__*/React.createElement(StyledSVG, _extends({}, sharedProps, {
|
|
119
119
|
style: [styles.svg, style],
|
|
120
120
|
width: pixelSize,
|
|
121
121
|
height: pixelSize,
|
|
122
122
|
viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`
|
|
123
|
-
}), /*#__PURE__*/createElement("path", {
|
|
123
|
+
}), /*#__PURE__*/React.createElement("path", {
|
|
124
124
|
fill: color,
|
|
125
125
|
d: path
|
|
126
126
|
}));
|
|
@@ -215,5 +215,4 @@ var iconAssets = {
|
|
|
215
215
|
}
|
|
216
216
|
};
|
|
217
217
|
|
|
218
|
-
export default
|
|
219
|
-
export { iconAssets as icons };
|
|
218
|
+
export { Icon as default, iconAssets as icons };
|
package/dist/index.js
CHANGED
|
@@ -82,7 +82,7 @@ module.exports =
|
|
|
82
82
|
/******/
|
|
83
83
|
/******/
|
|
84
84
|
/******/ // Load entry module and return exports
|
|
85
|
-
/******/ return __webpack_require__(__webpack_require__.s =
|
|
85
|
+
/******/ return __webpack_require__(__webpack_require__.s = 6);
|
|
86
86
|
/******/ })
|
|
87
87
|
/************************************************************************/
|
|
88
88
|
/******/ ([
|
|
@@ -93,93 +93,11 @@ module.exports = require("react");
|
|
|
93
93
|
|
|
94
94
|
/***/ }),
|
|
95
95
|
/* 1 */
|
|
96
|
-
/***/ (function(module, exports) {
|
|
97
|
-
|
|
98
|
-
function _extends() {
|
|
99
|
-
module.exports = _extends = Object.assign || function (target) {
|
|
100
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
101
|
-
var source = arguments[i];
|
|
102
|
-
|
|
103
|
-
for (var key in source) {
|
|
104
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
105
|
-
target[key] = source[key];
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
return target;
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
module.exports["default"] = module.exports, module.exports.__esModule = true;
|
|
114
|
-
return _extends.apply(this, arguments);
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
module.exports = _extends;
|
|
118
|
-
module.exports["default"] = module.exports, module.exports.__esModule = true;
|
|
119
|
-
|
|
120
|
-
/***/ }),
|
|
121
|
-
/* 2 */
|
|
122
|
-
/***/ (function(module, exports) {
|
|
123
|
-
|
|
124
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
125
|
-
if (source == null) return {};
|
|
126
|
-
var target = {};
|
|
127
|
-
var sourceKeys = Object.keys(source);
|
|
128
|
-
var key, i;
|
|
129
|
-
|
|
130
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
131
|
-
key = sourceKeys[i];
|
|
132
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
133
|
-
target[key] = source[key];
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
return target;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
module.exports = _objectWithoutPropertiesLoose;
|
|
140
|
-
module.exports["default"] = module.exports, module.exports.__esModule = true;
|
|
141
|
-
|
|
142
|
-
/***/ }),
|
|
143
|
-
/* 3 */
|
|
144
|
-
/***/ (function(module, exports) {
|
|
145
|
-
|
|
146
|
-
module.exports = require("aphrodite");
|
|
147
|
-
|
|
148
|
-
/***/ }),
|
|
149
|
-
/* 4 */
|
|
150
|
-
/***/ (function(module, exports) {
|
|
151
|
-
|
|
152
|
-
module.exports = require("@khanacademy/wonder-blocks-core");
|
|
153
|
-
|
|
154
|
-
/***/ }),
|
|
155
|
-
/* 5 */
|
|
156
96
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
157
97
|
|
|
158
98
|
"use strict";
|
|
159
|
-
|
|
160
|
-
__webpack_require__.
|
|
161
|
-
|
|
162
|
-
// EXPORTS
|
|
163
|
-
__webpack_require__.d(__webpack_exports__, "icons", function() { return /* reexport */ icon_assets; });
|
|
164
|
-
|
|
165
|
-
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
|
|
166
|
-
var helpers_extends = __webpack_require__(1);
|
|
167
|
-
var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
|
|
168
|
-
|
|
169
|
-
// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
|
|
170
|
-
var objectWithoutPropertiesLoose = __webpack_require__(2);
|
|
171
|
-
var objectWithoutPropertiesLoose_default = /*#__PURE__*/__webpack_require__.n(objectWithoutPropertiesLoose);
|
|
172
|
-
|
|
173
|
-
// EXTERNAL MODULE: external "react"
|
|
174
|
-
var external_react_ = __webpack_require__(0);
|
|
175
|
-
|
|
176
|
-
// EXTERNAL MODULE: external "aphrodite"
|
|
177
|
-
var external_aphrodite_ = __webpack_require__(3);
|
|
178
|
-
|
|
179
|
-
// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
|
|
180
|
-
var wonder_blocks_core_ = __webpack_require__(4);
|
|
181
|
-
|
|
182
|
-
// CONCATENATED MODULE: ./packages/wonder-blocks-icon/src/util/icon-util.js
|
|
99
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return viewportPixelsForSize; });
|
|
100
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return getPathForIcon; });
|
|
183
101
|
/**
|
|
184
102
|
* A simple function that tells us how many viewport pixels each icon size
|
|
185
103
|
* corresponds to.
|
|
@@ -235,97 +153,16 @@ const getPathForIcon = (icon, size) => {
|
|
|
235
153
|
}
|
|
236
154
|
}
|
|
237
155
|
};
|
|
238
|
-
// CONCATENATED MODULE: ./packages/wonder-blocks-icon/src/components/icon.js
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
const _excluded = ["color", "icon", "size", "style"];
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
const StyledSVG = Object(wonder_blocks_core_["addStyle"])("svg");
|
|
247
|
-
/**
|
|
248
|
-
* An Icon displays a small informational or decorative image as an SVG.
|
|
249
|
-
*
|
|
250
|
-
* ```js
|
|
251
|
-
* import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
|
|
252
|
-
*
|
|
253
|
-
* <Icon
|
|
254
|
-
* icon={icons.search}
|
|
255
|
-
* color={Color.white}
|
|
256
|
-
* size="medium"
|
|
257
|
-
* style={{margin: 4}}
|
|
258
|
-
* />
|
|
259
|
-
* ```
|
|
260
|
-
*
|
|
261
|
-
* Wonder Blocks comes with a fixed set of icons available by importing `icons`,
|
|
262
|
-
* but you can also provide your own `IconAsset`.
|
|
263
|
-
*
|
|
264
|
-
* ```js
|
|
265
|
-
* import Icon from "@khanacademy/wonder-blocks-icon";
|
|
266
|
-
* import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
|
|
267
|
-
*
|
|
268
|
-
* // Easter egg: what shape am I?
|
|
269
|
-
* const customIcon: IconAsset = {
|
|
270
|
-
* small: "M6.92820 0L13.85640 4L13.85640 12L6.92820 16L0 12L0 4Z",
|
|
271
|
-
* };
|
|
272
|
-
* ```
|
|
273
|
-
*
|
|
274
|
-
* `IconAsset` should be in the following format:
|
|
275
|
-
* ```js
|
|
276
|
-
* {small?: string, medium?: string, large?: string, xlarge?: string}
|
|
277
|
-
* ```
|
|
278
|
-
*
|
|
279
|
-
* These icons should fit into a viewport of 16, 24, 48, and 96 pixels,
|
|
280
|
-
* respectively.
|
|
281
|
-
*/
|
|
282
156
|
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
{
|
|
287
|
-
color,
|
|
288
|
-
icon,
|
|
289
|
-
size,
|
|
290
|
-
style
|
|
291
|
-
} = _this$props,
|
|
292
|
-
sharedProps = objectWithoutPropertiesLoose_default()(_this$props, _excluded);
|
|
293
|
-
|
|
294
|
-
const {
|
|
295
|
-
assetSize,
|
|
296
|
-
path
|
|
297
|
-
} = getPathForIcon(icon, size);
|
|
298
|
-
const pixelSize = viewportPixelsForSize(size);
|
|
299
|
-
const viewboxPixelSize = viewportPixelsForSize(assetSize);
|
|
300
|
-
return /*#__PURE__*/external_react_["createElement"](StyledSVG, extends_default()({}, sharedProps, {
|
|
301
|
-
style: [styles.svg, style],
|
|
302
|
-
width: pixelSize,
|
|
303
|
-
height: pixelSize,
|
|
304
|
-
viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`
|
|
305
|
-
}), /*#__PURE__*/external_react_["createElement"]("path", {
|
|
306
|
-
fill: color,
|
|
307
|
-
d: path
|
|
308
|
-
}));
|
|
309
|
-
}
|
|
157
|
+
/***/ }),
|
|
158
|
+
/* 2 */
|
|
159
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
310
160
|
|
|
311
|
-
|
|
312
|
-
icon_Icon.defaultProps = {
|
|
313
|
-
color: "currentColor",
|
|
314
|
-
size: "small"
|
|
315
|
-
};
|
|
316
|
-
const styles = external_aphrodite_["StyleSheet"].create({
|
|
317
|
-
svg: {
|
|
318
|
-
display: "inline-block",
|
|
319
|
-
verticalAlign: "text-bottom",
|
|
320
|
-
flexShrink: 0,
|
|
321
|
-
flexGrow: 0
|
|
322
|
-
}
|
|
323
|
-
});
|
|
324
|
-
// CONCATENATED MODULE: ./packages/wonder-blocks-icon/src/util/icon-assets.js
|
|
161
|
+
"use strict";
|
|
325
162
|
/**
|
|
326
163
|
* The source SVG paths for our icons at various sizes
|
|
327
164
|
*/
|
|
328
|
-
/* harmony default export */
|
|
165
|
+
/* harmony default export */ __webpack_exports__["a"] = ({
|
|
329
166
|
add: {
|
|
330
167
|
medium: "M11 11V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4zm1 13C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
|
|
331
168
|
},
|
|
@@ -396,11 +233,129 @@ const styles = external_aphrodite_["StyleSheet"].create({
|
|
|
396
233
|
medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm-3-5a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2H8z"
|
|
397
234
|
}
|
|
398
235
|
});
|
|
399
|
-
|
|
236
|
+
|
|
237
|
+
/***/ }),
|
|
238
|
+
/* 3 */
|
|
239
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
240
|
+
|
|
241
|
+
"use strict";
|
|
242
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Icon; });
|
|
243
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
|
|
244
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
245
|
+
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
|
|
246
|
+
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
|
|
247
|
+
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
|
|
248
|
+
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
|
|
249
|
+
/* harmony import */ var _util_icon_util_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
|
|
250
|
+
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); }
|
|
251
|
+
|
|
252
|
+
|
|
253
|
+
|
|
254
|
+
|
|
255
|
+
|
|
256
|
+
const StyledSVG = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["addStyle"])("svg");
|
|
257
|
+
/**
|
|
258
|
+
* An Icon displays a small informational or decorative image as an SVG.
|
|
259
|
+
*
|
|
260
|
+
* ```js
|
|
261
|
+
* import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
|
|
262
|
+
*
|
|
263
|
+
* <Icon
|
|
264
|
+
* icon={icons.search}
|
|
265
|
+
* color={Color.white}
|
|
266
|
+
* size="medium"
|
|
267
|
+
* style={{margin: 4}}
|
|
268
|
+
* />
|
|
269
|
+
* ```
|
|
270
|
+
*
|
|
271
|
+
* Wonder Blocks comes with a fixed set of icons available by importing `icons`,
|
|
272
|
+
* but you can also provide your own `IconAsset`.
|
|
273
|
+
*
|
|
274
|
+
* ```js
|
|
275
|
+
* import Icon from "@khanacademy/wonder-blocks-icon";
|
|
276
|
+
* import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
|
|
277
|
+
*
|
|
278
|
+
* // Easter egg: what shape am I?
|
|
279
|
+
* const customIcon: IconAsset = {
|
|
280
|
+
* small: "M6.92820 0L13.85640 4L13.85640 12L6.92820 16L0 12L0 4Z",
|
|
281
|
+
* };
|
|
282
|
+
* ```
|
|
283
|
+
*
|
|
284
|
+
* `IconAsset` should be in the following format:
|
|
285
|
+
* ```js
|
|
286
|
+
* {small?: string, medium?: string, large?: string, xlarge?: string}
|
|
287
|
+
* ```
|
|
288
|
+
*
|
|
289
|
+
* These icons should fit into a viewport of 16, 24, 48, and 96 pixels,
|
|
290
|
+
* respectively.
|
|
291
|
+
*/
|
|
292
|
+
|
|
293
|
+
class Icon extends react__WEBPACK_IMPORTED_MODULE_0__["PureComponent"] {
|
|
294
|
+
render() {
|
|
295
|
+
const {
|
|
296
|
+
color,
|
|
297
|
+
icon,
|
|
298
|
+
size,
|
|
299
|
+
style,
|
|
300
|
+
...sharedProps
|
|
301
|
+
} = this.props;
|
|
302
|
+
const {
|
|
303
|
+
assetSize,
|
|
304
|
+
path
|
|
305
|
+
} = Object(_util_icon_util_js__WEBPACK_IMPORTED_MODULE_3__[/* getPathForIcon */ "a"])(icon, size);
|
|
306
|
+
const pixelSize = Object(_util_icon_util_js__WEBPACK_IMPORTED_MODULE_3__[/* viewportPixelsForSize */ "b"])(size);
|
|
307
|
+
const viewboxPixelSize = Object(_util_icon_util_js__WEBPACK_IMPORTED_MODULE_3__[/* viewportPixelsForSize */ "b"])(assetSize);
|
|
308
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledSVG, _extends({}, sharedProps, {
|
|
309
|
+
style: [styles.svg, style],
|
|
310
|
+
width: pixelSize,
|
|
311
|
+
height: pixelSize,
|
|
312
|
+
viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`
|
|
313
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("path", {
|
|
314
|
+
fill: color,
|
|
315
|
+
d: path
|
|
316
|
+
}));
|
|
317
|
+
}
|
|
318
|
+
|
|
319
|
+
}
|
|
320
|
+
Icon.defaultProps = {
|
|
321
|
+
color: "currentColor",
|
|
322
|
+
size: "small"
|
|
323
|
+
};
|
|
324
|
+
const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
|
|
325
|
+
svg: {
|
|
326
|
+
display: "inline-block",
|
|
327
|
+
verticalAlign: "text-bottom",
|
|
328
|
+
flexShrink: 0,
|
|
329
|
+
flexGrow: 0
|
|
330
|
+
}
|
|
331
|
+
});
|
|
332
|
+
|
|
333
|
+
/***/ }),
|
|
334
|
+
/* 4 */
|
|
335
|
+
/***/ (function(module, exports) {
|
|
336
|
+
|
|
337
|
+
module.exports = require("aphrodite");
|
|
338
|
+
|
|
339
|
+
/***/ }),
|
|
340
|
+
/* 5 */
|
|
341
|
+
/***/ (function(module, exports) {
|
|
342
|
+
|
|
343
|
+
module.exports = require("@khanacademy/wonder-blocks-core");
|
|
344
|
+
|
|
345
|
+
/***/ }),
|
|
346
|
+
/* 6 */
|
|
347
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
348
|
+
|
|
349
|
+
"use strict";
|
|
350
|
+
__webpack_require__.r(__webpack_exports__);
|
|
351
|
+
/* harmony import */ var _components_icon_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
|
|
352
|
+
/* harmony import */ var _util_icon_assets_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
|
|
353
|
+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "icons", function() { return _util_icon_assets_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
|
|
354
|
+
|
|
400
355
|
|
|
401
356
|
|
|
402
357
|
|
|
403
|
-
/* harmony default export */
|
|
358
|
+
/* harmony default export */ __webpack_exports__["default"] = (_components_icon_js__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
|
|
404
359
|
|
|
405
360
|
/***/ })
|
|
406
361
|
/******/ ]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-icon",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.25",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -15,15 +15,14 @@
|
|
|
15
15
|
"author": "",
|
|
16
16
|
"license": "MIT",
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@babel/runtime": "^7.
|
|
19
|
-
"@khanacademy/wonder-blocks-core": "^
|
|
18
|
+
"@babel/runtime": "^7.16.3",
|
|
19
|
+
"@khanacademy/wonder-blocks-core": "^4.2.1"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"wb-dev-build-settings": "^0.
|
|
22
|
+
"wb-dev-build-settings": "^0.3.0"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"aphrodite": "^1.2.5",
|
|
26
|
-
"react": "
|
|
27
|
-
}
|
|
28
|
-
"gitHead": "8022bb419eed74be37f71f71c7621854794a731c"
|
|
26
|
+
"react": "16.14.0"
|
|
27
|
+
}
|
|
29
28
|
}
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import * as Core from "@khanacademy/wonder-blocks-core";
|
|
4
4
|
import {mount} from "enzyme";
|
|
5
|
+
import "jest-enzyme";
|
|
5
6
|
|
|
6
7
|
import icons from "../../util/icon-assets.js";
|
|
7
8
|
import {getPathForIcon, viewportPixelsForSize} from "../../util/icon-util.js";
|
|
@@ -24,10 +25,8 @@ const mockStyledSVGComponent: JestMockFn<any, any> = (Core: any)
|
|
|
24
25
|
|
|
25
26
|
// Also, let's type up a couple of other mocks to shut flow up.
|
|
26
27
|
const mockGetPathForIcon: JestMockFn<any, any> = (getPathForIcon: any);
|
|
27
|
-
const mockViewportPixelsForSize: JestMockFn<
|
|
28
|
-
any
|
|
29
|
-
any,
|
|
30
|
-
> = (viewportPixelsForSize: any);
|
|
28
|
+
const mockViewportPixelsForSize: JestMockFn<any, any> =
|
|
29
|
+
(viewportPixelsForSize: any);
|
|
31
30
|
|
|
32
31
|
jest.mock("../../util/icon-util.js", () => ({
|
|
33
32
|
getPathForIcon: jest.fn(() => ({})),
|
package/src/util/icon-assets.js
CHANGED
|
@@ -14,101 +14,72 @@ export type IconSize = $Keys<IconAsset>;
|
|
|
14
14
|
|
|
15
15
|
export default ({
|
|
16
16
|
add: {
|
|
17
|
-
medium:
|
|
18
|
-
"M11 11V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4zm1 13C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z",
|
|
17
|
+
medium: "M11 11V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4zm1 13C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z",
|
|
19
18
|
},
|
|
20
19
|
caretDown: {
|
|
21
|
-
small:
|
|
22
|
-
|
|
23
|
-
medium:
|
|
24
|
-
"M17.293 8.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 1.414-1.414L12 13.586l5.293-5.293z",
|
|
20
|
+
small: "M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z",
|
|
21
|
+
medium: "M17.293 8.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 1.414-1.414L12 13.586l5.293-5.293z",
|
|
25
22
|
},
|
|
26
23
|
caretLeft: {
|
|
27
|
-
small:
|
|
28
|
-
|
|
29
|
-
medium:
|
|
30
|
-
"M15.707 17.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L10.414 12l5.293 5.293z",
|
|
24
|
+
small: "M7.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 1.414L7.414 8z",
|
|
25
|
+
medium: "M15.707 17.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L10.414 12l5.293 5.293z",
|
|
31
26
|
},
|
|
32
27
|
caretRight: {
|
|
33
|
-
small:
|
|
34
|
-
|
|
35
|
-
medium:
|
|
36
|
-
"M8.293 17.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6a1 1 0 0 0-1.414 1.414L13.586 12l-5.293 5.293z",
|
|
28
|
+
small: "M8.586 8L5.293 4.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L8.586 8z",
|
|
29
|
+
medium: "M8.293 17.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6a1 1 0 0 0-1.414 1.414L13.586 12l-5.293 5.293z",
|
|
37
30
|
},
|
|
38
31
|
caretUp: {
|
|
39
|
-
small:
|
|
40
|
-
|
|
41
|
-
medium:
|
|
42
|
-
"M17.293 15.707a1 1 0 0 0 1.414-1.414l-6-6a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L12 10.414l5.293 5.293z",
|
|
32
|
+
small: "M8 7.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L8 7.414z",
|
|
33
|
+
medium: "M17.293 15.707a1 1 0 0 0 1.414-1.414l-6-6a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L12 10.414l5.293 5.293z",
|
|
43
34
|
},
|
|
44
35
|
check: {
|
|
45
|
-
small:
|
|
46
|
-
"M6.072 10.4l6.175-7.058a1 1 0 1 1 1.506 1.317L6.769 12.64a1 1 0 0 1-1.55-.054L2.203 8.604a1 1 0 1 1 1.594-1.208L6.072 10.4z",
|
|
36
|
+
small: "M6.072 10.4l6.175-7.058a1 1 0 1 1 1.506 1.317L6.769 12.64a1 1 0 0 1-1.55-.054L2.203 8.604a1 1 0 1 1 1.594-1.208L6.072 10.4z",
|
|
47
37
|
},
|
|
48
38
|
contentArticle: {
|
|
49
|
-
small:
|
|
50
|
-
|
|
51
|
-
medium:
|
|
52
|
-
"M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm3-6v-4h2v5a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3v2H9v8h6zm-1.5-6a.5.5 0 0 1-.5-.5V6l4 4h-3.5z",
|
|
39
|
+
small: "M11 12V8h2v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3v2H5v8h6zM9.5 6a.5.5 0 0 1-.5-.5V2l4 4H9.5z",
|
|
40
|
+
medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm3-6v-4h2v5a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3v2H9v8h6zm-1.5-6a.5.5 0 0 1-.5-.5V6l4 4h-3.5z",
|
|
53
41
|
},
|
|
54
42
|
contentExercise: {
|
|
55
|
-
small:
|
|
56
|
-
|
|
57
|
-
medium:
|
|
58
|
-
"M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-.5-11.086l1.586 1.586-2.5 2.5H9v-1.586l2.5-2.5zM12.914 9.5L14 8.414 15.586 10 14.5 11.086 12.914 9.5zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zM7 13v3a1 1 0 0 0 1 1h3a1 1 0 0 0 .707-.293l6-6a1 1 0 0 0 0-1.414l-3-3a1 1 0 0 0-1.414 0l-6 6A1 1 0 0 0 7 13z",
|
|
43
|
+
small: "M7.5 6.914L5 9.414V11h1.586l2.5-2.5L7.5 6.914zM8.914 5.5L10.5 7.086 11.586 6 10 4.414 8.914 5.5zM3 9a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-6 6A1 1 0 0 1 7 13H4a1 1 0 0 1-1-1V9z",
|
|
44
|
+
medium: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-.5-11.086l1.586 1.586-2.5 2.5H9v-1.586l2.5-2.5zM12.914 9.5L14 8.414 15.586 10 14.5 11.086 12.914 9.5zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zM7 13v3a1 1 0 0 0 1 1h3a1 1 0 0 0 .707-.293l6-6a1 1 0 0 0 0-1.414l-3-3a1 1 0 0 0-1.414 0l-6 6A1 1 0 0 0 7 13z",
|
|
59
45
|
},
|
|
60
46
|
contentVideo: {
|
|
61
|
-
small:
|
|
62
|
-
|
|
63
|
-
medium:
|
|
64
|
-
"M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM10.555 7.17l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 9 16.002v-8a1 1 0 0 1 1.555-.832zM11 14.133l3.197-2.131L11 9.87v4.263z",
|
|
47
|
+
small: "M6 5.87v4.263l3.197-2.131L6 5.87zm-.445-2.7l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 4 12.002v-8a1 1 0 0 1 1.555-.832z",
|
|
48
|
+
medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM10.555 7.17l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 9 16.002v-8a1 1 0 0 1 1.555-.832zM11 14.133l3.197-2.131L11 9.87v4.263z",
|
|
65
49
|
},
|
|
66
50
|
correct: {
|
|
67
|
-
medium:
|
|
68
|
-
"M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.928-7.6l6.175-7.058a1 1 0 1 1 1.506 1.317l-6.984 7.981a1 1 0 0 1-1.55-.054l-3.016-3.982a1 1 0 0 1 1.594-1.208l2.275 3.003z",
|
|
51
|
+
medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.928-7.6l6.175-7.058a1 1 0 1 1 1.506 1.317l-6.984 7.981a1 1 0 0 1-1.55-.054l-3.016-3.982a1 1 0 0 1 1.594-1.208l2.275 3.003z",
|
|
69
52
|
},
|
|
70
53
|
delete: {
|
|
71
|
-
medium:
|
|
72
|
-
"M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-5-9a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2H7z",
|
|
54
|
+
medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-5-9a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2H7z",
|
|
73
55
|
},
|
|
74
56
|
dismiss: {
|
|
75
|
-
small:
|
|
76
|
-
|
|
77
|
-
medium:
|
|
78
|
-
"M12 10.586L7.706 6.293a1 1 0 1 0-1.413 1.413L10.586 12l-4.293 4.294a1 1 0 0 0 1.413 1.413L12 13.414l4.294 4.293a1 1 0 0 0 1.413-1.413L13.414 12l4.293-4.294a1 1 0 1 0-1.413-1.413L12 10.586z",
|
|
57
|
+
small: "M8 6.586l3.293-3.293a1 1 0 0 1 1.414 1.414L9.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L6.586 8 3.293 4.707a1 1 0 0 1 1.414-1.414L8 6.586z",
|
|
58
|
+
medium: "M12 10.586L7.706 6.293a1 1 0 1 0-1.413 1.413L10.586 12l-4.293 4.294a1 1 0 0 0 1.413 1.413L12 13.414l4.294 4.293a1 1 0 0 0 1.413-1.413L13.414 12l4.293-4.294a1 1 0 1 0-1.413-1.413L12 10.586z",
|
|
79
59
|
},
|
|
80
60
|
hint: {
|
|
81
|
-
medium:
|
|
82
|
-
"M10.835 15.993a1 1 0 0 1 1.008-.247 5.5 5.5 0 1 0-3.59-3.59 1 1 0 0 1-.246 1.009L6.172 15 9 17.828l1.835-1.835zm-.78 3.61a1.496 1.496 0 0 1-2.11 0l-3.548-3.549a1.496 1.496 0 0 1 0-2.108l1.787-1.787a7.5 7.5 0 1 1 5.657 5.657l-1.787 1.787zm-6.762.104a1 1 0 0 1 1.414-1.414l1 1a1 1 0 0 1-1.414 1.414l-1-1z",
|
|
61
|
+
medium: "M10.835 15.993a1 1 0 0 1 1.008-.247 5.5 5.5 0 1 0-3.59-3.59 1 1 0 0 1-.246 1.009L6.172 15 9 17.828l1.835-1.835zm-.78 3.61a1.496 1.496 0 0 1-2.11 0l-3.548-3.549a1.496 1.496 0 0 1 0-2.108l1.787-1.787a7.5 7.5 0 1 1 5.657 5.657l-1.787 1.787zm-6.762.104a1 1 0 0 1 1.414-1.414l1 1a1 1 0 0 1-1.414 1.414l-1-1z",
|
|
83
62
|
},
|
|
84
63
|
incorrect: {
|
|
85
|
-
medium:
|
|
86
|
-
"M12 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414L13.414 12l3.293 3.293a1 1 0 0 1-1.414 1.414L12 13.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L10.586 12 7.293 8.707a1 1 0 0 1 1.414-1.414L12 10.586zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z",
|
|
64
|
+
medium: "M12 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414L13.414 12l3.293 3.293a1 1 0 0 1-1.414 1.414L12 13.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L10.586 12 7.293 8.707a1 1 0 0 1 1.414-1.414L12 10.586zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z",
|
|
87
65
|
},
|
|
88
66
|
info: {
|
|
89
|
-
small:
|
|
90
|
-
"M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-2A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7 8a1 1 0 1 1 2 0v3a1 1 0 0 1-2 0V8zm1-2a1 1 0 1 1 0-2 1 1 0 0 1 0 2z",
|
|
67
|
+
small: "M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-2A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7 8a1 1 0 1 1 2 0v3a1 1 0 0 1-2 0V8zm1-2a1 1 0 1 1 0-2 1 1 0 0 1 0 2z",
|
|
91
68
|
},
|
|
92
69
|
search: {
|
|
93
|
-
small:
|
|
94
|
-
|
|
95
|
-
medium:
|
|
96
|
-
"M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z",
|
|
70
|
+
small: "M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
|
|
71
|
+
medium: "M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z",
|
|
97
72
|
},
|
|
98
73
|
sortableArrowDown: {
|
|
99
|
-
small:
|
|
100
|
-
"M7 9.586V4a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L7 9.586z",
|
|
74
|
+
small: "M7 9.586V4a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L7 9.586z",
|
|
101
75
|
},
|
|
102
76
|
sortableArrowUp: {
|
|
103
|
-
small:
|
|
104
|
-
"M9 6.414l2.293 2.293a1 1 0 0 0 1.414-1.414l-4-4a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414L7 6.414V12a1 1 0 1 0 2 0V6.414z",
|
|
77
|
+
small: "M9 6.414l2.293 2.293a1 1 0 0 0 1.414-1.414l-4-4a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414L7 6.414V12a1 1 0 1 0 2 0V6.414z",
|
|
105
78
|
},
|
|
106
79
|
zoomIn: {
|
|
107
|
-
medium:
|
|
108
|
-
"M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM12 10h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H8a1 1 0 0 1 0-2h2V8a1 1 0 0 1 2 0v2zm-1 7a6 6 0 1 0 0-12 6 6 0 0 0 0 12z",
|
|
80
|
+
medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM12 10h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H8a1 1 0 0 1 0-2h2V8a1 1 0 0 1 2 0v2zm-1 7a6 6 0 1 0 0-12 6 6 0 0 0 0 12z",
|
|
109
81
|
},
|
|
110
82
|
zoomOut: {
|
|
111
|
-
medium:
|
|
112
|
-
"M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm-3-5a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2H8z",
|
|
83
|
+
medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm-3-5a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2H8z",
|
|
113
84
|
},
|
|
114
85
|
}: {[string]: IconAsset, ...});
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2018 Khan Academy
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|