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

Comparing version 2.2.1 to 3.0.0

CHANGELOG.md

 # @khanacademy/wonder-blocks-icon
 
+## 3.0.0
+
+### Major Changes
+
+-   96f675d2: Remove size/weight restriction from PhosphorIcon and remove some exported types from the package.
+
 ## 2.2.1
@@ -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, PhosphorIconMedium, PhosphorIconSmall } from "../types";
-type CommonProps = Pick<AriaProps, "aria-hidden" | "aria-label"> & {
-    /**
-     * The color of the icon. Will default to `currentColor`, which means that
-     * it will take on the CSS `color` value from the parent element.
-     */
-    color?: string;
-    /**
-     * Additional styles to apply to the icon.
-     */
-    style?: StyleType;
-    /**
-     * Adds CSS classes to the Icon.
-     */
-    className?: string;
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string;
-};
-type PropsForSmallIcon = CommonProps & {
-    /**
-     * The icon size (16px).
-     *
-     * __NOTE:__ small icons only support `bold` and `fill` weights. **Make sure
-     * you are not using a `regular` icon.**
-     */
-    size?: "small";
-    /**
-     * The icon to display. This is a reference to the icon asset
-     * (imported as a static SVG file).
-     * __NOTE:__ small icons only support `bold` and `fill` weights.
-     */
-    icon: PhosphorIconSmall;
-};
-type PropsForMediumIcon = CommonProps & {
-    /**
-     * The icon size (24px). Defaults to `medium`.
-     *
-     * __NOTE:__ medium icons only support `regular` and `fill` weights. **Make
-     * sure you are not using a `bold` icon.**
-     */
-    size?: "medium";
-    /**
-     * The icon to display. This is a reference to the icon asset
-     * (imported as a static SVG file).
-     * __NOTE:__ medium icons only support `regular` and `fill` weights.
-     */
-    icon: PhosphorIconMedium;
-};
-type PropsForOtherSizes = CommonProps & {
-    /**
-     * large: The icon size (48px).
-     * xlarge: The icon size (96px).
-     */
-    size?: "large" | "xlarge";
-    /**
-     * The icon to display. This is a reference to the icon asset
-     * (imported as a static SVG file).
-     */
-    icon: PhosphorIconAsset;
-};
-type Props = PropsForSmallIcon | PropsForMediumIcon | PropsForOtherSizes;
+import { PhosphorIconAsset } from "../types";
 /**
@@ -91,3 +29,30 @@ * A `PhosphorIcon` displays a small informational or decorative image as an
  */
-export declare const PhosphorIcon: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLSpanElement>>;
-export {};
+export declare const PhosphorIcon: React.ForwardRefExoticComponent<Pick<AriaProps, "role" | "aria-hidden" | "aria-label"> & {
+    /**
+     * The color of the icon. Will default to `currentColor`, which means that
+     * it will take on the CSS `color` value from the parent element.
+     */
+    color?: string | undefined;
+    /**
+     * Additional styles to apply to the icon.
+     */
+    style?: StyleType;
+    /**
+     * Adds CSS classes to the Icon.
+     */
+    className?: string | undefined;
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string | undefined;
+    size?: "medium" | "large" | "small" | "xlarge" | undefined;
+    /**
+     * The icon to display. This is a reference to the icon asset (imported as a
+     * static SVG file).
+     *
+     * It supports the following types:
+     * - `PhosphorIconAsset`: a reference to a Phosphor SVG asset.
+     * - `string`: an import referencing an arbitrary SVG file.
+     */
+    icon: PhosphorIconAsset | string;
+} & React.RefAttributes<HTMLSpanElement>>;

dist/es/index.js

@@ -212,12 +212,7 @@ import * as React from 'react';
   const classNames = `${className != null ? className : ""}`;
+  const iconStyles = _generateStyles(color, pixelSize);
   return React.createElement(StyledIcon, _extends({}, sharedProps, {
     className: classNames,
-    style: [styles.svg, {
-      maskImage: `url(${icon})`,
-      maskSize: "100%",
-      maskRepeat: "no-repeat",
-      maskPosition: "center",
-      backgroundColor: color,
-      width: pixelSize,
-      height: pixelSize
+    style: [styles.svg, iconStyles.icon, {
+      maskImage: `url(${icon})`
     }, style],
@@ -228,2 +223,18 @@ "data-test-id": testId,
 });
+const dynamicStyles = {};
+const _generateStyles = (color, size) => {
+  const iconStyle = `${color}-${size}`;
+  if (styles[iconStyle]) {
+    return styles[iconStyle];
+  }
+  const newStyles = {
+    icon: {
+      backgroundColor: color,
+      width: size,
+      height: size
+    }
+  };
+  dynamicStyles[iconStyle] = StyleSheet.create(newStyles);
+  return dynamicStyles[iconStyle];
+};
 const styles = StyleSheet.create({
@@ -234,3 +245,6 @@ svg: {
     flexShrink: 0,
-    flexGrow: 0
+    flexGrow: 0,
+    maskSize: "100%",
+    maskRepeat: "no-repeat",
+    maskPosition: "center"
   }
@@ -237,0 +251,0 @@ });

dist/index.d.ts

@@ -5,4 +5,4 @@ import Icon from "./components/icon";
 export { PhosphorIcon } from "./components/phosphor-icon";
-export type { PhosphorIconAsset, PhosphorIconMedium, PhosphorIconSmall, } from "./types";
+export type { PhosphorIconAsset } from "./types";
 export type { IconAsset, IconSize };
 export default Icon;

dist/index.js

@@ -236,12 +236,7 @@ 'use strict';
   const classNames = `${className != null ? className : ""}`;
+  const iconStyles = _generateStyles(color, pixelSize);
   return React__namespace.createElement(StyledIcon, _extends({}, sharedProps, {
     className: classNames,
-    style: [styles.svg, {
-      maskImage: `url(${icon})`,
-      maskSize: "100%",
-      maskRepeat: "no-repeat",
-      maskPosition: "center",
-      backgroundColor: color,
-      width: pixelSize,
-      height: pixelSize
+    style: [styles.svg, iconStyles.icon, {
+      maskImage: `url(${icon})`
     }, style],
@@ -252,2 +247,18 @@ "data-test-id": testId,
 });
+const dynamicStyles = {};
+const _generateStyles = (color, size) => {
+  const iconStyle = `${color}-${size}`;
+  if (styles[iconStyle]) {
+    return styles[iconStyle];
+  }
+  const newStyles = {
+    icon: {
+      backgroundColor: color,
+      width: size,
+      height: size
+    }
+  };
+  dynamicStyles[iconStyle] = aphrodite.StyleSheet.create(newStyles);
+  return dynamicStyles[iconStyle];
+};
 const styles = aphrodite.StyleSheet.create({
@@ -258,3 +269,6 @@ svg: {
     flexShrink: 0,
-    flexGrow: 0
+    flexGrow: 0,
+    maskSize: "100%",
+    maskRepeat: "no-repeat",
+    maskPosition: "center"
   }
@@ -261,0 +275,0 @@ });

dist/types.d.ts

@@ -5,9 +5,1 @@ /**
 export type PhosphorIconAsset = PhosphorRegular | PhosphorBold | PhosphorFill;
-/**
- * The different icon weights for small icons.
- */
-export type PhosphorIconSmall = PhosphorBold | PhosphorFill;
-/**
- * The different icon weights for medium icons.
- */
-export type PhosphorIconMedium = PhosphorRegular | PhosphorFill;

package.json

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

src/index.ts

@@ -6,8 +6,4 @@ import Icon from "./components/icon";
 export {PhosphorIcon} from "./components/phosphor-icon";
-export type {
-    PhosphorIconAsset,
-    PhosphorIconMedium,
-    PhosphorIconSmall,
-} from "./types";
+export type {PhosphorIconAsset} from "./types";
 export type {IconAsset, IconSize};
 export default Icon;

src/types.ts

@@ -5,9 +5,1 @@ /**
 export type PhosphorIconAsset = PhosphorRegular | PhosphorBold | PhosphorFill;
-/**
- * The different icon weights for small icons.
- */
-export type PhosphorIconSmall = PhosphorBold | PhosphorFill;
-/**
- * The different icon weights for medium icons.
- */
-export type PhosphorIconMedium = PhosphorRegular | PhosphorFill;

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

Improved metrics

Number of package files

24

increased by4.35%

Worsened metrics

Total package byte prevSize

117452

decreased by-0.75%

Lines of code

1464

decreased by-2.59%

No dependency changes