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

Comparing version 0.0.0-PR2242-20240612011924 to 0.0.0-PR2268-20240710220053

CHANGELOG.md

 # @khanacademy/wonder-blocks-icon
 
-## 0.0.0-PR2242-20240612011924
+## 0.0.0-PR2268-20240710220053
 
-### Major Changes
-
--   f92b0d08: Migrate PhosphorIcon to Panda CSS
-
 ### Patch Changes
 
--   Updated dependencies [48a65fb3]
-    -   @khanacademy/wonder-blocks-core@0.0.0-PR2242-20240612011924
+-   Updated dependencies [e31ec88b]
+    -   @khanacademy/wonder-blocks-core@0.0.0-PR2268-20240710220053
 
@@ -14,0 +10,0 @@ ## 4.1.1

dist/components/phosphor-icon.d.ts

@@ -29,3 +29,3 @@ import * as React from "react";
  */
-export declare const PhosphorIcon: React.ForwardRefExoticComponent<Pick<AriaProps, "aria-hidden" | "aria-label" | "role"> & {
+export declare const PhosphorIcon: React.ForwardRefExoticComponent<Pick<AriaProps, "role" | "aria-hidden" | "aria-label"> & {
     /**
@@ -32,0 +32,0 @@ * The color of the icon. Will default to `currentColor`, which means that

dist/es/index.js

 import * as React from 'react';
-import { css, cx } from '@/styled-system/css';
+import { StyleSheet } from 'aphrodite';
+import { addStyle } from '@khanacademy/wonder-blocks-core';
 
@@ -40,3 +41,3 @@ function _extends() {
 const _excluded = ["color", "icon", "size", "style", "testId", "className"];
-const StyledIcon = "span";
+const StyledIcon = addStyle("span");
 const PhosphorIcon = React.forwardRef(function PhosphorIcon(props, ref) {
@@ -53,10 +54,9 @@ const {
   const pixelSize = viewportPixelsForSize(size);
-  const rawStyle = Array.isArray(style) ? css(...style) : typeof style === "object" ? css(style) : undefined;
+  const classNames = `${className != null ? className : ""}`;
+  const iconStyles = _generateStyles(color, pixelSize);
   return React.createElement(StyledIcon, _extends({}, sharedProps, {
-    className: cx(styles.svg, styles.icon, rawStyle, className),
-    style: {
-      "--icon-color": color,
-      "--icon-size": `${pixelSize}px`,
-      "--icon-path": `url(${icon})`
-    },
+    className: classNames,
+    style: [styles.svg, iconStyles.icon, {
+      maskImage: `url(${icon})`
+    }, style],
     "data-testid": testId,
@@ -66,4 +66,20 @@ ref: ref
 });
-const styles = {
-  svg: css({
+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({
+  svg: {
     display: "inline-block",
@@ -76,12 +92,6 @@ verticalAlign: "text-bottom",
     maskPosition: "center"
-  }),
-  icon: css({
-    backgroundColor: "var(--icon-color)",
-    width: "var(--icon-size)",
-    height: "var(--icon-size)",
-    maskImage: "var(--icon-path)"
-  })
-};
+  }
+});
 PhosphorIcon.displayName = "PhosphorIcon";
 
 export { PhosphorIcon };

dist/index.js

@@ -6,3 +6,4 @@ 'use strict';
 var React = require('react');
-var css = require('@/styled-system/css');
+var aphrodite = require('aphrodite');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 
@@ -65,3 +66,3 @@ function _interopNamespace(e) {
 const _excluded = ["color", "icon", "size", "style", "testId", "className"];
-const StyledIcon = "span";
+const StyledIcon = wonderBlocksCore.addStyle("span");
 const PhosphorIcon = React__namespace.forwardRef(function PhosphorIcon(props, ref) {
@@ -78,10 +79,9 @@ const {
   const pixelSize = viewportPixelsForSize(size);
-  const rawStyle = Array.isArray(style) ? css.css(...style) : typeof style === "object" ? css.css(style) : undefined;
+  const classNames = `${className != null ? className : ""}`;
+  const iconStyles = _generateStyles(color, pixelSize);
   return React__namespace.createElement(StyledIcon, _extends({}, sharedProps, {
-    className: css.cx(styles.svg, styles.icon, rawStyle, className),
-    style: {
-      "--icon-color": color,
-      "--icon-size": `${pixelSize}px`,
-      "--icon-path": `url(${icon})`
-    },
+    className: classNames,
+    style: [styles.svg, iconStyles.icon, {
+      maskImage: `url(${icon})`
+    }, style],
     "data-testid": testId,
@@ -91,4 +91,20 @@ ref: ref
 });
-const styles = {
-  svg: css.css({
+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({
+  svg: {
     display: "inline-block",
@@ -101,12 +117,6 @@ verticalAlign: "text-bottom",
     maskPosition: "center"
-  }),
-  icon: css.css({
-    backgroundColor: "var(--icon-color)",
-    width: "var(--icon-size)",
-    height: "var(--icon-size)",
-    maskImage: "var(--icon-path)"
-  })
-};
+  }
+});
 PhosphorIcon.displayName = "PhosphorIcon";
 
 exports.PhosphorIcon = PhosphorIcon;

package.json

 {
   "name": "@khanacademy/wonder-blocks-icon",
-  "version": "0.0.0-PR2242-20240612011924",
+  "version": "0.0.0-PR2268-20240710220053",
   "design": "v1",
@@ -19,3 +19,3 @@ "publishConfig": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "0.0.0-PR2242-20240612011924"
+    "@khanacademy/wonder-blocks-core": "0.0.0-PR2268-20240710220053"
   },
@@ -22,0 +22,0 @@ "devDependencies": {

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

Lines of code

580

increased by5.65%

Worsened metrics

Total package byte prevSize

80543

decreased by-11.08%

Dependency changes

• + Added@khanacademy/wonder-blocks-core@0.0.0-PR2268-20240710220053(transitive)

• - Removed@khanacademy/wonder-blocks-core@0.0.0-PR2242-20240612011924(transitive)

• Updated@khanacademy/wonder-blocks-core@0.0.0-PR2268-20240710220053