@khanacademy/wonder-blocks-icon 1.2.34 → 1.2.36

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-icon
 
+## 1.2.36
+
+### Patch Changes
+
+-   1a5624d4: Update wonder-stuff dependencies to use newly published packages after migrating wonder-stuff to TypeScript
+
+## 1.2.35
+
+### Patch Changes
+
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-core@4.6.2
+
 ## 1.2.34
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,5 +1,5 @@
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
@@ -180,6 +180,4 @@ var iconAssets = /*#__PURE__*/Object.freeze({
     zoomOut: zoomOut
 });
 
-const icons = _objectWithoutPropertiesLoose(iconAssets, ["__esModule"]);
-
-export { Icon as default, icons };
+export { Icon as default, iconAssets as icons };

package/dist/index.js

@@ -0,0 +1,212 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _extends = require('@babel/runtime/helpers/extends');
+var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
+var React = require('react');
+var aphrodite = require('aphrodite');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n["default"] = e;
+    return Object.freeze(n);
+}
+
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const viewportPixelsForSize = size => ({
+  small: 16,
+  medium: 24,
+  large: 48,
+  xlarge: 96
+})[size];
+const getPathForIcon = (icon, size) => {
+  if (icon[size]) {
+    return {
+      assetSize: size,
+      path: icon[size]
+    };
+  } else {
+    const desiredPixelSize = viewportPixelsForSize(size);
+    const availableSizes = Object.keys(icon);
+
+    const sortFn = availableSize => {
+      const availablePixelSize = viewportPixelsForSize(availableSize);
+      const tooLargeByPixels = availablePixelSize - desiredPixelSize;
+      return tooLargeByPixels > 0 ? Number.POSITIVE_INFINITY : Math.abs(tooLargeByPixels);
+    };
+
+    const assetSizes = availableSizes.sort((a, b) => sortFn(a) - sortFn(b));
+    const bestAssetSize = assetSizes[0];
+
+    if (bestAssetSize && icon[bestAssetSize]) {
+      return {
+        assetSize: bestAssetSize,
+        path: icon[bestAssetSize]
+      };
+    } else {
+      throw new Error("Icon does not contain any valid asset sizes!");
+    }
+  }
+};
+
+const _excluded = ["color", "icon", "size", "style", "testId"];
+const StyledSVG = wonderBlocksCore.addStyle("svg");
+class Icon extends React__namespace.PureComponent {
+  render() {
+    const _this$props = this.props,
+          {
+      color,
+      icon,
+      size,
+      style,
+      testId
+    } = _this$props,
+          sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded);
+
+    const {
+      assetSize,
+      path
+    } = getPathForIcon(icon, size);
+    const pixelSize = viewportPixelsForSize(size);
+    const viewboxPixelSize = viewportPixelsForSize(assetSize);
+    return React__namespace.createElement(StyledSVG, _extends__default["default"]({}, sharedProps, {
+      style: [styles.svg, style],
+      width: pixelSize,
+      height: pixelSize,
+      viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`,
+      "data-test-id": testId
+    }), React__namespace.createElement("path", {
+      fill: color,
+      d: path
+    }));
+  }
+
+}
+Icon.defaultProps = {
+  color: "currentColor",
+  size: "small"
+};
+const styles = aphrodite.StyleSheet.create({
+  svg: {
+    display: "inline-block",
+    verticalAlign: "text-bottom",
+    flexShrink: 0,
+    flexGrow: 0
+  }
+});
+
+const add = {
+  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"
+};
+const caretDown = {
+  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",
+  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"
+};
+const caretLeft = {
+  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",
+  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"
+};
+const caretRight = {
+  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",
+  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"
+};
+const caretUp = {
+  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",
+  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"
+};
+const check = {
+  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"
+};
+const contentArticle = {
+  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",
+  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"
+};
+const contentExercise = {
+  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",
+  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"
+};
+const contentVideo = {
+  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",
+  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"
+};
+const correct = {
+  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"
+};
+const _delete = {
+  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"
+};
+const dismiss = {
+  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",
+  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"
+};
+const hint = {
+  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"
+};
+const incorrect = {
+  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"
+};
+const info = {
+  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"
+};
+const search = {
+  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",
+  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"
+};
+const sortableArrowDown = {
+  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"
+};
+const sortableArrowUp = {
+  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"
+};
+const zoomIn = {
+  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"
+};
+const zoomOut = {
+  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"
+};
+
+var iconAssets = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    add: add,
+    caretDown: caretDown,
+    caretLeft: caretLeft,
+    caretRight: caretRight,
+    caretUp: caretUp,
+    check: check,
+    contentArticle: contentArticle,
+    contentExercise: contentExercise,
+    contentVideo: contentVideo,
+    correct: correct,
+    'delete': _delete,
+    dismiss: dismiss,
+    hint: hint,
+    incorrect: incorrect,
+    info: info,
+    search: search,
+    sortableArrowDown: sortableArrowDown,
+    sortableArrowUp: sortableArrowUp,
+    zoomIn: zoomIn,
+    zoomOut: zoomOut
+});
+
+exports["default"] = Icon;
+exports.icons = iconAssets;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon",
-  "version": "1.2.34",
+  "version": "1.2.36",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,14 +16,14 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^4.6.1"
+    "@khanacademy/wonder-blocks-core": "^4.6.2"
   },
   "devDependencies": {
-    "@khanacademy/wonder-stuff-core": "^1.0.1",
-    "wb-dev-build-settings": "^0.6.0"
+    "@khanacademy/wonder-stuff-core": "^1.2.0",
+    "wb-dev-build-settings": "^0.7.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   }
-}
+}

package/src/components/__docs__/icon.stories.js

@@ -5,8 +5,9 @@ import {entries} from "@khanacademy/wonder-stuff-core";
 
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
-import Icon, {icons, type IconAsset} from "@khanacademy/wonder-blocks-icon";
+import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
 
 import ComponentInfo from "../../../../../.storybook/components/component-info.js";
 import {name, version} from "../../../package.json";
@@ -96,18 +97,23 @@ Sizes.parameters = {
 };
 
 export const Variants: StoryComponentType = () => {
-    const iconsWithLabels = entries(icons).map(([name, icon]) => {
-        return (
-            <tr>
-                <td>
-                    <Icon icon={icon} />
-                </td>
-                <td>
-                    <LabelMedium>{name}</LabelMedium>
-                </td>
-            </tr>
-        );
-    });
+    // TODO(FEI-5018): Replace with Object.entries() after TS migration and get rid of
+    // `any` in callback.  We may need to specify `IconAsset` as a type param.  This
+    // doesn't work with Flow + Storybook for some reason.
+    const iconsWithLabels = entries(icons).map(
+        ([name, icon]: [string, any]) => {
+            return (
+                <tr>
+                    <td>
+                        <Icon icon={icon} />
+                    </td>
+                    <td>
+                        <LabelMedium>{name}</LabelMedium>
+                    </td>
+                </tr>
+            );
+        },
+    );
 
     return <table>{iconsWithLabels}</table>;
 };

package/src/index.js

@@ -1,11 +1,8 @@
 // @flow
 import Icon from "./components/icon.js";
-import * as iconAssets from "./util/icon-assets.js";
 import type {IconAsset, IconSize} from "./util/icon-assets.js";
 
-// $FlowIgnore[prop-missing]: Flow doesn't know about __esModule
-const {__esModule: _, ...icons} = iconAssets;
+export * as icons from "./util/icon-assets.js";
 
 export type {IconAsset, IconSize};
-export {icons};
 export default Icon;