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

Comparing version 3.0.0 to 4.0.0

CHANGELOG.md

 # @khanacademy/wonder-blocks-icon
 
+## 4.0.0
+
+### Major Changes
+
+-   171e3b01: Delete Icon component in favor of PhosphorIcon
+
 ## 3.0.0
@@ -4,0 +10,0 @@

dist/components/phosphor-icon.d.ts

 import * as React from "react";
 import { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-import { PhosphorIconAsset } from "../types";
+import { IconSize, PhosphorIconAsset } from "../types";
 /**
@@ -47,4 +47,8 @@ * A `PhosphorIcon` displays a small informational or decorative image as an
     testId?: string | undefined;
-    size?: "medium" | "large" | "small" | "xlarge" | undefined;
     /**
+     * Size of the icon. One of `small` (16), `medium` (24), `large` (48), or
+     * `xlarge` (96). Defaults to `small`.
+     */
+    size?: IconSize | undefined;
+    /**
      * The icon to display. This is a reference to the icon asset (imported as a
@@ -51,0 +55,0 @@ * static SVG file).

dist/es/index.js

@@ -39,161 +39,3 @@ import * as React from 'react';
 })[size];
-const getPathForIcon = (icon, size) => {
-  if (typeof icon[size] === "number") {
-    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$1 = ["color", "icon", "size", "style", "testId"];
-const StyledSVG = addStyle("svg");
-const Icon = React.forwardRef(function Icon(props, ref) {
-  const {
-      color = "currentColor",
-      icon,
-      size = "small",
-      style,
-      testId
-    } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  const {
-    assetSize,
-    path
-  } = getPathForIcon(icon, size);
-  const pixelSize = viewportPixelsForSize(size);
-  const viewboxPixelSize = viewportPixelsForSize(assetSize);
-  return React.createElement(StyledSVG, _extends({}, sharedProps, {
-    style: [styles$1.svg, style],
-    width: pixelSize,
-    height: pixelSize,
-    viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`,
-    "data-test-id": testId,
-    ref: ref
-  }), React.createElement("path", {
-    fill: color,
-    d: path
-  }));
-});
-const styles$1 = 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
-});
-
 const _excluded = ["color", "icon", "size", "style", "testId", "className"];
@@ -252,2 +94,2 @@ const StyledIcon = addStyle("span");
 
-export { PhosphorIcon, Icon as default, iconAssets as icons };
+export { PhosphorIcon };

dist/index.d.ts

@@ -1,7 +0,2 @@
-import Icon from "./components/icon";
-import type { IconAsset, IconSize } from "./util/icon-assets";
-export * as icons from "./util/icon-assets";
 export { PhosphorIcon } from "./components/phosphor-icon";
-export type { PhosphorIconAsset } from "./types";
-export type { IconAsset, IconSize };
-export default Icon;
+export type { IconSize, PhosphorIconAsset } from "./types";

dist/index.js

@@ -63,161 +63,3 @@ 'use strict';
 })[size];
-const getPathForIcon = (icon, size) => {
-  if (typeof icon[size] === "number") {
-    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$1 = ["color", "icon", "size", "style", "testId"];
-const StyledSVG = wonderBlocksCore.addStyle("svg");
-const Icon = React__namespace.forwardRef(function Icon(props, ref) {
-  const {
-      color = "currentColor",
-      icon,
-      size = "small",
-      style,
-      testId
-    } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  const {
-    assetSize,
-    path
-  } = getPathForIcon(icon, size);
-  const pixelSize = viewportPixelsForSize(size);
-  const viewboxPixelSize = viewportPixelsForSize(assetSize);
-  return React__namespace.createElement(StyledSVG, _extends({}, sharedProps, {
-    style: [styles$1.svg, style],
-    width: pixelSize,
-    height: pixelSize,
-    viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`,
-    "data-test-id": testId,
-    ref: ref
-  }), React__namespace.createElement("path", {
-    fill: color,
-    d: path
-  }));
-});
-const styles$1 = 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
-});
-
 const _excluded = ["color", "icon", "size", "style", "testId", "className"];
@@ -277,3 +119,1 @@ const StyledIcon = wonderBlocksCore.addStyle("span");
 exports.PhosphorIcon = PhosphorIcon;
-exports["default"] = Icon;
-exports.icons = iconAssets;

dist/types.d.ts

@@ -5,1 +5,5 @@ /**
 export type PhosphorIconAsset = PhosphorRegular | PhosphorBold | PhosphorFill;
+/**
+ * All the possible icon weights.
+ */
+export type IconSize = "small" | "medium" | "large" | "xlarge";

dist/util/icon-util.d.ts

@@ -1,2 +0,2 @@
-import type { IconAsset, IconSize } from "./icon-assets";
+import { IconSize } from "../types";
 /**
@@ -7,16 +7,1 @@ * A simple function that tells us how many viewport pixels each icon size
 export declare const viewportPixelsForSize: (size: IconSize) => number;
-/**
- * A utility to find the right asset from an IconAsset to display in an icon
- * at a given IconSize. We're looking for, in the following order:
- *   1. The path for the IconSize (e.g. small, medium) requested
- *   2. A path that's _smaller_ than the size we requested
- *   3. Any path (what remains is one for a larger IconSize)
- *
- * The goal here is to provide a path that looks good at the given size...
- * obviously, if the size that we want is provided, we'll use it. Otherwise we'd
- * rather blow up a smaller, simpler icon than scrunch down a more complex one.
- */
-export declare const getPathForIcon: (icon: IconAsset, size: IconSize) => {
-    assetSize: IconSize;
-    path: string;
-};

package.json

 {
   "name": "@khanacademy/wonder-blocks-icon",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "design": "v1",
@@ -5,0 +5,0 @@ "publishConfig": {

src/index.ts

@@ -1,8 +0,2 @@
-import Icon from "./components/icon";
-import type {IconAsset, IconSize} from "./util/icon-assets";
-
-export * as icons from "./util/icon-assets";
 export {PhosphorIcon} from "./components/phosphor-icon";
-export type {PhosphorIconAsset} from "./types";
-export type {IconAsset, IconSize};
-export default Icon;
+export type {IconSize, PhosphorIconAsset} from "./types";

src/types.ts

@@ -5,1 +5,6 @@ /**
 export type PhosphorIconAsset = PhosphorRegular | PhosphorBold | PhosphorFill;
+
+/**
+ * All the possible icon weights.
+ */
+export type IconSize = "small" | "medium" | "large" | "xlarge";

src/util/icon-util.test.ts

@@ -1,82 +0,3 @@
-import {getPathForIcon, viewportPixelsForSize} from "./icon-util";
+import {viewportPixelsForSize} from "./icon-util";
 
-import type {IconSize, IconAsset} from "./icon-assets";
-
-const SIZES = ["small", "medium", "large", "xlarge"];
-
-const DUMMY_ICON_MEDIUM_ONLY = {
-    medium: "[MEDIUM SVG PATH]",
-} as const;
-
-const DUMMY_ICON_WITH_EVERYTHING_ON_IT: IconAsset = {
-    small: "[SMALL SVG PATH]",
-    medium: "[MEDIUM SVG PATH]",
-    large: "[LARGE SVG PATH]",
-    xlarge: "[XLARGE SVG PATH]",
-};
-
-describe("getPathForIcon", () => {
-    test("return the path for the correct size, if available", () => {
-        SIZES.forEach((size: any) => {
-            const {path, assetSize} = getPathForIcon(
-                DUMMY_ICON_WITH_EVERYTHING_ON_IT,
-                size,
-            );
-            expect(
-                // @ts-expect-error [FEI-5019] - TS7053 - Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'IconAsset'.
-                path === DUMMY_ICON_WITH_EVERYTHING_ON_IT[size] &&
-                    assetSize === size,
-            ).toBeTruthy();
-        });
-    });
-
-    test("scale up a small asset rather than scaling down a large one", () => {
-        const expectValueForSize = (
-            requestedSize: IconSize,
-            returnedSize: IconSize,
-        ) => {
-            const iconMissingRequestedSize = {
-                ...DUMMY_ICON_WITH_EVERYTHING_ON_IT,
-            } as const;
-            delete iconMissingRequestedSize[requestedSize];
-            expect(
-                getPathForIcon(iconMissingRequestedSize, requestedSize),
-            ).toMatchObject({
-                assetSize: returnedSize,
-                path: DUMMY_ICON_WITH_EVERYTHING_ON_IT[returnedSize],
-            });
-        };
-        expectValueForSize("small", "medium");
-        expectValueForSize("medium", "small");
-        expectValueForSize("large", "medium");
-        expectValueForSize("xlarge", "large");
-    });
-
-    test("return a path as long as at least one size is available", () => {
-        SIZES.forEach((size: any) => {
-            const {path, assetSize} = getPathForIcon(
-                DUMMY_ICON_MEDIUM_ONLY,
-                size,
-            );
-            expect(
-                path === DUMMY_ICON_MEDIUM_ONLY["medium"] &&
-                    assetSize === "medium",
-            ).toBeTruthy();
-        });
-    });
-
-    test("no valid asset sizes, throws", () => {
-        // Arrange
-        const iconAsset: IconAsset = {} as any;
-
-        // Act
-        const underTest = () => getPathForIcon(iconAsset, "medium");
-
-        // Assert
-        expect(underTest).toThrowErrorMatchingInlineSnapshot(
-            `"Icon does not contain any valid asset sizes!"`,
-        );
-    });
-});
-
 describe("viewportPixelsForSize", () => {
@@ -83,0 +4,0 @@ test("return the correct values", () => {

src/util/icon-util.ts

@@ -1,2 +0,2 @@
-import type {IconAsset, IconSize} from "./icon-assets";
+import {IconSize} from "../types";
 
@@ -14,49 +14,1 @@ /**
     }[size]);
-
-/**
- * A utility to find the right asset from an IconAsset to display in an icon
- * at a given IconSize. We're looking for, in the following order:
- *   1. The path for the IconSize (e.g. small, medium) requested
- *   2. A path that's _smaller_ than the size we requested
- *   3. Any path (what remains is one for a larger IconSize)
- *
- * The goal here is to provide a path that looks good at the given size...
- * obviously, if the size that we want is provided, we'll use it. Otherwise we'd
- * rather blow up a smaller, simpler icon than scrunch down a more complex one.
- */
-export const getPathForIcon = (
-    icon: IconAsset,
-    size: IconSize,
-): {
-    assetSize: IconSize;
-    path: string;
-} => {
-    if (typeof icon[size] === "number") {
-        // Great, we have the IconSize we actually requested
-        // @ts-expect-error [FEI-5019] - TS2322 - Type 'string | undefined' is not assignable to type 'string'.
-        return {assetSize: size, path: icon[size]};
-    } else {
-        // Oh, no, we don't have the right IconSize! Let's find the next best
-        // one...we prefer to find a smaller icon and blow it up instead of
-        // using a larger icon and shrinking it such that detail may be lost.
-        const desiredPixelSize = viewportPixelsForSize(size);
-        const availableSizes = Object.keys(icon);
-        const sortFn = (availableSize: IconSize) => {
-            const availablePixelSize = viewportPixelsForSize(availableSize);
-            const tooLargeByPixels = availablePixelSize - desiredPixelSize;
-            return tooLargeByPixels > 0
-                ? Number.POSITIVE_INFINITY
-                : Math.abs(tooLargeByPixels);
-        };
-        // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'string' is not assignable to parameter of type 'keyof IconAsset'. | TS2345 - Argument of type 'string' is not assignable to parameter of type 'keyof IconAsset'.
-        const assetSizes = availableSizes.sort((a, b) => sortFn(a) - sortFn(b));
-        const bestAssetSize = assetSizes[0];
-        // @ts-expect-error [FEI-5019] - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IconAsset'.
-        if (bestAssetSize && icon[bestAssetSize]) {
-            // @ts-expect-error [FEI-5019] - TS2322 - Type 'string' is not assignable to type 'keyof IconAsset'. | TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IconAsset'.
-            return {assetSize: bestAssetSize, path: icon[bestAssetSize]};
-        } else {
-            throw new Error("Icon does not contain any valid asset sizes!");
-        }
-    }
-};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

75435

decreased by-35.77%

Number of package files

18

decreased by-25%

Lines of code

569

decreased by-61.13%

No dependency changes