@khanacademy/wonder-blocks-icon 1.2.32 → 1.2.34

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 CHANGED
@@ -1,5 +1,20 @@
1
1
  # @khanacademy/wonder-blocks-icon
2
2
 
3
+ ## 1.2.34
4
+
5
+ ### Patch Changes
6
+
7
+ - @khanacademy/wonder-blocks-core@4.6.1
8
+
9
+ ## 1.2.33
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies [b561425a]
14
+ - Updated dependencies [a566e232]
15
+ - Updated dependencies [d2b21a6e]
16
+ - @khanacademy/wonder-blocks-core@4.6.0
17
+
3
18
  ## 1.2.32
4
19
 
5
20
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-icon",
3
- "version": "1.2.32",
3
+ "version": "1.2.34",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -16,11 +16,11 @@
16
16
  "license": "MIT",
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.18.6",
19
- "@khanacademy/wonder-blocks-core": "^4.5.0"
19
+ "@khanacademy/wonder-blocks-core": "^4.6.1"
20
20
  },
21
21
  "devDependencies": {
22
22
  "@khanacademy/wonder-stuff-core": "^1.0.1",
23
- "wb-dev-build-settings": "^0.4.0"
23
+ "wb-dev-build-settings": "^0.6.0"
24
24
  },
25
25
  "peerDependencies": {
26
26
  "aphrodite": "^1.2.5",
@@ -5,7 +5,7 @@ import {entries} from "@khanacademy/wonder-stuff-core";
5
5
 
6
6
  import Color from "@khanacademy/wonder-blocks-color";
7
7
  import {View} from "@khanacademy/wonder-blocks-core";
8
- import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
8
+ import Icon, {icons, type IconAsset} from "@khanacademy/wonder-blocks-icon";
9
9
  import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
10
10
 
11
11
  import ComponentInfo from "../../../../../.storybook/components/component-info.js";
@@ -147,3 +147,28 @@ Inline.parameters = {
147
147
  storyDescription: "Icons have `display: inline-block` by default.",
148
148
  },
149
149
  };
150
+
151
+ export const CustomIcon: StoryComponentType = () => {
152
+ const share: IconAsset = {
153
+ medium: "M12.5 4.25C12.5 3.14543 13.3954 2.25 14.5 2.25C15.6046 2.25 16.5 3.14543 16.5 4.25C16.5 5.35457 15.6046 6.25 14.5 6.25C13.8117 6.25 13.2046 5.90228 12.8447 5.37291C12.8367 5.3589 12.8282 5.34502 12.8194 5.33126C12.8102 5.31696 12.8007 5.30297 12.7909 5.28929C12.6063 4.98641 12.5 4.63062 12.5 4.25ZM14.5 8.25C13.4511 8.25 12.4966 7.8463 11.7832 7.18581L7.79943 9.7458C7.92958 10.1403 8 10.5619 8 11C8 11.4381 7.92958 11.8597 7.79943 12.2542L11.7832 14.8142C12.4966 14.1537 13.4511 13.75 14.5 13.75C16.7091 13.75 18.5 15.5409 18.5 17.75C18.5 19.9591 16.7091 21.75 14.5 21.75C12.2909 21.75 10.5 19.9591 10.5 17.75C10.5 17.3119 10.5704 16.8903 10.7006 16.4958L6.71681 13.9358C6.00342 14.5963 5.04885 15 4 15C1.79086 15 0 13.2091 0 11C0 8.79086 1.79086 7 4 7C5.04885 7 6.00342 7.40369 6.71681 8.06417L10.7006 5.50416C10.5704 5.10969 10.5 4.68807 10.5 4.25C10.5 2.04086 12.2909 0.25 14.5 0.25C16.7091 0.25 18.5 2.04086 18.5 4.25C18.5 6.45914 16.7091 8.25 14.5 8.25ZM5.70939 12.0388C5.69949 12.0526 5.68988 12.0668 5.68058 12.0813C5.67164 12.0952 5.6631 12.1092 5.65493 12.1234C5.29508 12.6525 4.68812 13 4 13C2.89543 13 2 12.1046 2 11C2 9.8954 2.89543 9 4 9C4.68812 9 5.29507 9.3475 5.65493 9.8766C5.66309 9.8908 5.67164 9.9048 5.68058 9.9187C5.68988 9.9332 5.69949 9.9474 5.7094 9.9612C5.89379 10.264 6 10.6196 6 11C6 11.3804 5.89379 11.736 5.70939 12.0388ZM12.7909 16.7107C12.6063 17.0136 12.5 17.3694 12.5 17.75C12.5 18.8546 13.3954 19.75 14.5 19.75C15.6046 19.75 16.5 18.8546 16.5 17.75C16.5 16.6454 15.6046 15.75 14.5 15.75C13.8117 15.75 13.2046 16.0977 12.8447 16.6271C12.8367 16.6411 12.8282 16.655 12.8194 16.6687C12.8102 16.683 12.8007 16.697 12.7909 16.7107Z",
154
+ };
155
+
156
+ return (
157
+ <Icon
158
+ icon={share}
159
+ style={{
160
+ fillRule: "evenodd",
161
+ clipRule: "evenodd",
162
+ }}
163
+ />
164
+ );
165
+ };
166
+
167
+ CustomIcon.parameters = {
168
+ docs: {
169
+ storyDescription:
170
+ "Icons can be customized by passing in a custom icon." +
171
+ "The icon should be an object with a size-related property (`small | medium | large | xlarge`) that is a string containing the path data for the icon.\n\n" +
172
+ "NOTE: Sometimes the icon will need some custom SVG attributes to render correctly. For example, the `fillRule` and `clipRule` attributes are needed for the share icon. This can be set using the `style` prop.",
173
+ },
174
+ };
@@ -1,8 +1,7 @@
1
1
  // @flow
2
2
  import * as React from "react";
3
3
  import * as Core from "@khanacademy/wonder-blocks-core";
4
- import {mount} from "enzyme";
5
- import "jest-enzyme";
4
+ import {render} from "@testing-library/react";
6
5
 
7
6
  import * as icons from "../../util/icon-assets.js";
8
7
  import {getPathForIcon, viewportPixelsForSize} from "../../util/icon-util.js";
@@ -52,7 +51,7 @@ describe("Icon", () => {
52
51
  test("applies aria-label to svg", async () => {
53
52
  // Arrange
54
53
  const {default: Icon} = await import("../icon.js");
55
- const render = new Promise((resolve) => {
54
+ const underTest = new Promise((resolve) => {
56
55
  const nodes = (
57
56
  <div>
58
57
  <Icon
@@ -63,11 +62,11 @@ describe("Icon", () => {
63
62
  </div>
64
63
  );
65
64
 
66
- mount(nodes);
65
+ render(nodes);
67
66
  });
68
67
 
69
68
  // Act
70
- await render;
69
+ await underTest;
71
70
 
72
71
  // Assert
73
72
  expect(mockStyledSVGComponent).toHaveBeenCalledTimes(1);
@@ -79,7 +78,7 @@ describe("Icon", () => {
79
78
  test("calls getPathForIcon", async () => {
80
79
  // Arrange
81
80
  const {default: Icon} = await import("../icon.js");
82
- const render = new Promise((resolve) => {
81
+ const underTest = new Promise((resolve) => {
83
82
  const nodes = (
84
83
  <div>
85
84
  <Icon
@@ -90,11 +89,11 @@ describe("Icon", () => {
90
89
  </div>
91
90
  );
92
91
 
93
- mount(nodes);
92
+ render(nodes);
94
93
  });
95
94
 
96
95
  // Act
97
- await render;
96
+ await underTest;
98
97
 
99
98
  // Assert
100
99
  expect(mockGetPathForIcon).toHaveBeenCalledTimes(1);
@@ -108,18 +107,18 @@ describe("Icon", () => {
108
107
  assetSize: "large",
109
108
  path: "TESTPATH",
110
109
  }));
111
- const render = new Promise((resolve) => {
110
+ const underTest = new Promise((resolve) => {
112
111
  const nodes = (
113
112
  <div>
114
113
  <Icon ref={() => resolve()} icon={icons.add} size="small" />
115
114
  </div>
116
115
  );
117
116
 
118
- mount(nodes);
117
+ render(nodes);
119
118
  });
120
119
 
121
120
  // Act
122
- await render;
121
+ await underTest;
123
122
 
124
123
  // Assert
125
124
  expect(mockViewportPixelsForSize).toHaveBeenCalledTimes(2);
@@ -142,18 +141,18 @@ describe("Icon", () => {
142
141
  assetSize: "small",
143
142
  path: "TESTPATH",
144
143
  }));
145
- const render = new Promise((resolve) => {
144
+ const underTest = new Promise((resolve) => {
146
145
  const nodes = (
147
146
  <div>
148
147
  <Icon ref={() => resolve()} icon={icons.add} />
149
148
  </div>
150
149
  );
151
150
 
152
- mount(nodes);
151
+ render(nodes);
153
152
  });
154
153
 
155
154
  // Act
156
- await render;
155
+ await underTest;
157
156
 
158
157
  // Assert
159
158
  expect(mockStyledSVGComponent).toHaveBeenCalledTimes(1);
@@ -179,18 +178,18 @@ describe("Icon", () => {
179
178
  assetSize: "small",
180
179
  path: "TESTPATH",
181
180
  }));
182
- const render = new Promise((resolve) => {
181
+ const underTest = new Promise((resolve) => {
183
182
  const nodes = (
184
183
  <div>
185
184
  <Icon ref={() => resolve()} icon={icons.add} />
186
185
  </div>
187
186
  );
188
187
 
189
- mount(nodes);
188
+ render(nodes);
190
189
  });
191
190
 
192
191
  // Act
193
- await render;
192
+ await underTest;
194
193
 
195
194
  // Assert
196
195
  expect(mockStyledSVGComponent).toHaveBeenCalledTimes(1);
@@ -209,7 +208,7 @@ describe("Icon", () => {
209
208
  assetSize: "small",
210
209
  path: "TESTPATH",
211
210
  }));
212
- const render = new Promise((resolve) => {
211
+ const underTest = new Promise((resolve) => {
213
212
  const nodes = (
214
213
  <div>
215
214
  <Icon
@@ -220,14 +219,15 @@ describe("Icon", () => {
220
219
  </div>
221
220
  );
222
221
 
223
- mount(nodes);
222
+ render(nodes);
224
223
  });
225
224
 
226
225
  // Act
227
- await render;
226
+ await underTest;
228
227
 
229
228
  // Assert
230
229
  expect(mockStyledSVGComponent).toHaveBeenCalledTimes(1);
230
+ // eslint-disable-next-line testing-library/no-node-access
231
231
  expect(mockStyledSVGComponent.mock.calls[0][0].children)
232
232
  .toMatchInlineSnapshot(`
233
233
  <path
@@ -247,7 +247,7 @@ describe("Icon", () => {
247
247
  const expectedStyle = {
248
248
  display: "none",
249
249
  };
250
- const render = new Promise((resolve) => {
250
+ const underTest = new Promise((resolve) => {
251
251
  const nodes = (
252
252
  <div>
253
253
  <Icon
@@ -258,11 +258,11 @@ describe("Icon", () => {
258
258
  </div>
259
259
  );
260
260
 
261
- mount(nodes);
261
+ render(nodes);
262
262
  });
263
263
 
264
264
  // Act
265
- await render;
265
+ await underTest;
266
266
 
267
267
  // Assert
268
268
  expect(mockStyledSVGComponent).toHaveBeenCalledTimes(1);
package/dist/index.js DELETED
@@ -1,411 +0,0 @@
1
- module.exports =
2
- /******/ (function(modules) { // webpackBootstrap
3
- /******/ // The module cache
4
- /******/ var installedModules = {};
5
- /******/
6
- /******/ // The require function
7
- /******/ function __webpack_require__(moduleId) {
8
- /******/
9
- /******/ // Check if module is in cache
10
- /******/ if(installedModules[moduleId]) {
11
- /******/ return installedModules[moduleId].exports;
12
- /******/ }
13
- /******/ // Create a new module (and put it into the cache)
14
- /******/ var module = installedModules[moduleId] = {
15
- /******/ i: moduleId,
16
- /******/ l: false,
17
- /******/ exports: {}
18
- /******/ };
19
- /******/
20
- /******/ // Execute the module function
21
- /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
22
- /******/
23
- /******/ // Flag the module as loaded
24
- /******/ module.l = true;
25
- /******/
26
- /******/ // Return the exports of the module
27
- /******/ return module.exports;
28
- /******/ }
29
- /******/
30
- /******/
31
- /******/ // expose the modules object (__webpack_modules__)
32
- /******/ __webpack_require__.m = modules;
33
- /******/
34
- /******/ // expose the module cache
35
- /******/ __webpack_require__.c = installedModules;
36
- /******/
37
- /******/ // define getter function for harmony exports
38
- /******/ __webpack_require__.d = function(exports, name, getter) {
39
- /******/ if(!__webpack_require__.o(exports, name)) {
40
- /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
41
- /******/ }
42
- /******/ };
43
- /******/
44
- /******/ // define __esModule on exports
45
- /******/ __webpack_require__.r = function(exports) {
46
- /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
47
- /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
48
- /******/ }
49
- /******/ Object.defineProperty(exports, '__esModule', { value: true });
50
- /******/ };
51
- /******/
52
- /******/ // create a fake namespace object
53
- /******/ // mode & 1: value is a module id, require it
54
- /******/ // mode & 2: merge all properties of value into the ns
55
- /******/ // mode & 4: return value when already ns object
56
- /******/ // mode & 8|1: behave like require
57
- /******/ __webpack_require__.t = function(value, mode) {
58
- /******/ if(mode & 1) value = __webpack_require__(value);
59
- /******/ if(mode & 8) return value;
60
- /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
61
- /******/ var ns = Object.create(null);
62
- /******/ __webpack_require__.r(ns);
63
- /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
64
- /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
65
- /******/ return ns;
66
- /******/ };
67
- /******/
68
- /******/ // getDefaultExport function for compatibility with non-harmony modules
69
- /******/ __webpack_require__.n = function(module) {
70
- /******/ var getter = module && module.__esModule ?
71
- /******/ function getDefault() { return module['default']; } :
72
- /******/ function getModuleExports() { return module; };
73
- /******/ __webpack_require__.d(getter, 'a', getter);
74
- /******/ return getter;
75
- /******/ };
76
- /******/
77
- /******/ // Object.prototype.hasOwnProperty.call
78
- /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
79
- /******/
80
- /******/ // __webpack_public_path__
81
- /******/ __webpack_require__.p = "";
82
- /******/
83
- /******/
84
- /******/ // Load entry module and return exports
85
- /******/ return __webpack_require__(__webpack_require__.s = 7);
86
- /******/ })
87
- /************************************************************************/
88
- /******/ ([
89
- /* 0 */
90
- /***/ (function(module, exports) {
91
-
92
- module.exports = require("react");
93
-
94
- /***/ }),
95
- /* 1 */
96
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
97
-
98
- "use strict";
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; });
101
- /**
102
- * A simple function that tells us how many viewport pixels each icon size
103
- * corresponds to.
104
- */
105
- const viewportPixelsForSize = size => ({
106
- small: 16,
107
- medium: 24,
108
- large: 48,
109
- xlarge: 96
110
- })[size];
111
- /**
112
- * A utility to find the right asset from an IconAsset to display in an icon
113
- * at a given IconSize. We're looking for, in the following order:
114
- * 1. The path for the IconSize (e.g. small, medium) requested
115
- * 2. A path that's _smaller_ than the size we requested
116
- * 3. Any path (what remains is one for a larger IconSize)
117
- *
118
- * The goal here is to provide a path that looks good at the given size...
119
- * obviously, if the size that we want is provided, we'll use it. Otherwise we'd
120
- * rather blow up a smaller, simpler icon than scrunch down a more complex one.
121
- */
122
-
123
- const getPathForIcon = (icon, size) => {
124
- if (icon[size]) {
125
- // Great, we have the IconSize we actually requested
126
- return {
127
- assetSize: size,
128
- path: icon[size]
129
- };
130
- } else {
131
- // Oh, no, we don't have the right IconSize! Let's find the next best
132
- // one...we prefer to find a smaller icon and blow it up instead of
133
- // using a larger icon and shrinking it such that detail may be lost.
134
- const desiredPixelSize = viewportPixelsForSize(size);
135
- const availableSizes = Object.keys(icon);
136
-
137
- const sortFn = availableSize => {
138
- const availablePixelSize = viewportPixelsForSize(availableSize);
139
- const tooLargeByPixels = availablePixelSize - desiredPixelSize;
140
- return tooLargeByPixels > 0 ? Number.POSITIVE_INFINITY : Math.abs(tooLargeByPixels);
141
- };
142
-
143
- const assetSizes = availableSizes.sort((a, b) => sortFn(a) - sortFn(b));
144
- const bestAssetSize = assetSizes[0];
145
-
146
- if (bestAssetSize && icon[bestAssetSize]) {
147
- return {
148
- assetSize: bestAssetSize,
149
- path: icon[bestAssetSize]
150
- };
151
- } else {
152
- throw new Error("Icon does not contain any valid asset sizes!");
153
- }
154
- }
155
- };
156
-
157
- /***/ }),
158
- /* 2 */
159
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
160
-
161
- "use strict";
162
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Icon; });
163
- /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
164
- /* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
165
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
166
- /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
167
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
168
- /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
169
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
170
- /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
171
- /* harmony import */ var _util_icon_util_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
172
-
173
-
174
-
175
-
176
-
177
- const StyledSVG = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["addStyle"])("svg");
178
- /**
179
- * An Icon displays a small informational or decorative image as an SVG.
180
- *
181
- * ```js
182
- * import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
183
- *
184
- * <Icon
185
- * icon={icons.search}
186
- * color={Color.white}
187
- * size="medium"
188
- * style={{margin: 4}}
189
- * />
190
- * ```
191
- *
192
- * Wonder Blocks comes with a fixed set of icons available by importing `icons`,
193
- * but you can also provide your own `IconAsset`.
194
- *
195
- * ```js
196
- * import Icon from "@khanacademy/wonder-blocks-icon";
197
- * import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
198
- *
199
- * // Easter egg: what shape am I?
200
- * const customIcon: IconAsset = {
201
- * small: "M6.92820 0L13.85640 4L13.85640 12L6.92820 16L0 12L0 4Z",
202
- * };
203
- * ```
204
- *
205
- * `IconAsset` should be in the following format:
206
- * ```js
207
- * {small?: string, medium?: string, large?: string, xlarge?: string}
208
- * ```
209
- *
210
- * These icons should fit into a viewport of 16, 24, 48, and 96 pixels,
211
- * respectively.
212
- */
213
-
214
- class Icon extends react__WEBPACK_IMPORTED_MODULE_1__["PureComponent"] {
215
- render() {
216
- const {
217
- color,
218
- icon,
219
- size,
220
- style,
221
- testId,
222
- ...sharedProps
223
- } = this.props;
224
- const {
225
- assetSize,
226
- path
227
- } = Object(_util_icon_util_js__WEBPACK_IMPORTED_MODULE_4__[/* getPathForIcon */ "a"])(icon, size);
228
- const pixelSize = Object(_util_icon_util_js__WEBPACK_IMPORTED_MODULE_4__[/* viewportPixelsForSize */ "b"])(size);
229
- const viewboxPixelSize = Object(_util_icon_util_js__WEBPACK_IMPORTED_MODULE_4__[/* viewportPixelsForSize */ "b"])(assetSize);
230
- return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledSVG, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, sharedProps, {
231
- style: [styles.svg, style],
232
- width: pixelSize,
233
- height: pixelSize,
234
- viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`,
235
- "data-test-id": testId
236
- }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("path", {
237
- fill: color,
238
- d: path
239
- }));
240
- }
241
-
242
- }
243
- Icon.defaultProps = {
244
- color: "currentColor",
245
- size: "small"
246
- };
247
- const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
248
- svg: {
249
- display: "inline-block",
250
- verticalAlign: "text-bottom",
251
- flexShrink: 0,
252
- flexGrow: 0
253
- }
254
- });
255
-
256
- /***/ }),
257
- /* 3 */
258
- /***/ (function(module, exports) {
259
-
260
- function _extends() {
261
- module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
262
- for (var i = 1; i < arguments.length; i++) {
263
- var source = arguments[i];
264
-
265
- for (var key in source) {
266
- if (Object.prototype.hasOwnProperty.call(source, key)) {
267
- target[key] = source[key];
268
- }
269
- }
270
- }
271
-
272
- return target;
273
- }, module.exports.__esModule = true, module.exports["default"] = module.exports;
274
- return _extends.apply(this, arguments);
275
- }
276
-
277
- module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
278
-
279
- /***/ }),
280
- /* 4 */
281
- /***/ (function(module, exports) {
282
-
283
- module.exports = require("aphrodite");
284
-
285
- /***/ }),
286
- /* 5 */
287
- /***/ (function(module, exports) {
288
-
289
- module.exports = require("@khanacademy/wonder-blocks-core");
290
-
291
- /***/ }),
292
- /* 6 */
293
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
294
-
295
- "use strict";
296
- __webpack_require__.r(__webpack_exports__);
297
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; });
298
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "caretDown", function() { return caretDown; });
299
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "caretLeft", function() { return caretLeft; });
300
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "caretRight", function() { return caretRight; });
301
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "caretUp", function() { return caretUp; });
302
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "check", function() { return check; });
303
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "contentArticle", function() { return contentArticle; });
304
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "contentExercise", function() { return contentExercise; });
305
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "contentVideo", function() { return contentVideo; });
306
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "correct", function() { return correct; });
307
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "delete", function() { return _delete; });
308
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "dismiss", function() { return dismiss; });
309
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "hint", function() { return hint; });
310
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "incorrect", function() { return incorrect; });
311
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "info", function() { return info; });
312
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "search", function() { return search; });
313
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "sortableArrowDown", function() { return sortableArrowDown; });
314
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "sortableArrowUp", function() { return sortableArrowUp; });
315
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "zoomIn", function() { return zoomIn; });
316
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "zoomOut", function() { return zoomOut; });
317
- /**
318
- * The source SVG paths for our icons at various sizes
319
- */
320
- const add = {
321
- 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"
322
- };
323
- const caretDown = {
324
- 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",
325
- 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"
326
- };
327
- const caretLeft = {
328
- 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",
329
- 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"
330
- };
331
- const caretRight = {
332
- 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",
333
- 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"
334
- };
335
- const caretUp = {
336
- 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",
337
- 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"
338
- };
339
- const check = {
340
- 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"
341
- };
342
- const contentArticle = {
343
- 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",
344
- 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"
345
- };
346
- const contentExercise = {
347
- 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",
348
- 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"
349
- };
350
- const contentVideo = {
351
- 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",
352
- 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"
353
- };
354
- const correct = {
355
- 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"
356
- };
357
- const _delete = {
358
- 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"
359
- };
360
-
361
- const dismiss = {
362
- 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",
363
- 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"
364
- };
365
- const hint = {
366
- 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"
367
- };
368
- const incorrect = {
369
- 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"
370
- };
371
- const info = {
372
- 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"
373
- };
374
- const search = {
375
- 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",
376
- 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"
377
- };
378
- const sortableArrowDown = {
379
- 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"
380
- };
381
- const sortableArrowUp = {
382
- 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"
383
- };
384
- const zoomIn = {
385
- 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"
386
- };
387
- const zoomOut = {
388
- 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"
389
- };
390
-
391
- /***/ }),
392
- /* 7 */
393
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
394
-
395
- "use strict";
396
- __webpack_require__.r(__webpack_exports__);
397
- /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "icons", function() { return icons; });
398
- /* harmony import */ var _components_icon_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(2);
399
- /* harmony import */ var _util_icon_assets_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
400
-
401
-
402
- // $FlowIgnore[prop-missing]: Flow doesn't know about __esModule
403
- const {
404
- __esModule: _,
405
- ...icons
406
- } = _util_icon_assets_js__WEBPACK_IMPORTED_MODULE_1__;
407
-
408
- /* harmony default export */ __webpack_exports__["default"] = (_components_icon_js__WEBPACK_IMPORTED_MODULE_0__[/* default */ "a"]);
409
-
410
- /***/ })
411
- /******/ ]);
package/docs.md DELETED
@@ -1,5 +0,0 @@
1
- Documentation for `@khanacademy/wonder-blocks-icon` is now in Storybook.
2
-
3
- Visit the [Storybook
4
- Icon](https://khan.github.io/wonder-blocks/?path=/docs/icon) docs on GitHub
5
- Pages.