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

Comparing version 0.0.0-PR2231-20240520192816 to 0.0.0-PR2242-20240610182012

CHANGELOG.md

 # @khanacademy/wonder-blocks-icon
 
-## 0.0.0-PR2231-20240520192816
+## 0.0.0-PR2242-20240610182012
 
+### Major Changes
+
+-   f92b0d08: Migrate PhosphorIcon to Panda CSS
+
 ### Patch Changes
 
--   Updated dependencies [e384dff4]
-    -   @khanacademy/wonder-blocks-core@0.0.0-PR2231-20240520192816
+-   Updated dependencies [48a65fb3]
+    -   @khanacademy/wonder-blocks-core@0.0.0-PR2242-20240610182012
 
+## 4.1.1
+
+### Patch Changes
+
+-   Updated dependencies [5dfac06e]
+    -   @khanacademy/wonder-blocks-core@6.4.1
+
 ## 4.1.0
@@ -11,0 +22,0 @@

dist/components/phosphor-icon.d.ts

@@ -29,3 +29,3 @@ import * as React from "react";
  */
-export declare const PhosphorIcon: React.ForwardRefExoticComponent<Pick<AriaProps, "role" | "aria-hidden" | "aria-label"> & {
+export declare const PhosphorIcon: React.ForwardRefExoticComponent<Pick<AriaProps, "aria-hidden" | "aria-label" | "role"> & {
     /**
@@ -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 { StyleSheet } from 'aphrodite';
-import { addStyle } from '@khanacademy/wonder-blocks-core';
+import { css, cx } from '@/styled-system/css';
 
@@ -41,3 +40,3 @@ function _extends() {
 const _excluded = ["color", "icon", "size", "style", "testId", "className"];
-const StyledIcon = addStyle("span");
+const StyledIcon = "span";
 const PhosphorIcon = React.forwardRef(function PhosphorIcon(props, ref) {
@@ -54,9 +53,10 @@ const {
   const pixelSize = viewportPixelsForSize(size);
-  const classNames = `${className != null ? className : ""}`;
-  const iconStyles = _generateStyles(color, pixelSize);
+  const rawStyle = Array.isArray(style) ? css(...style) : typeof style === "object" ? css(style) : undefined;
   return React.createElement(StyledIcon, _extends({}, sharedProps, {
-    className: classNames,
-    style: [styles.svg, iconStyles.icon, {
-      maskImage: `url(${icon})`
-    }, style],
+    className: cx(styles.svg, styles.icon, rawStyle, className),
+    style: {
+      "--icon-color": color,
+      "--icon-size": `${pixelSize}px`,
+      "--icon-path": `url(${icon})`
+    },
     "data-testid": testId,
@@ -66,20 +66,4 @@ ref: ref
 });
-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: {
+const styles = {
+  svg: css({
     display: "inline-block",
@@ -92,6 +76,12 @@ 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,4 +6,3 @@ 'use strict';
 var React = require('react');
-var aphrodite = require('aphrodite');
-var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var css = require('@/styled-system/css');
 
@@ -66,3 +65,3 @@ function _interopNamespace(e) {
 const _excluded = ["color", "icon", "size", "style", "testId", "className"];
-const StyledIcon = wonderBlocksCore.addStyle("span");
+const StyledIcon = "span";
 const PhosphorIcon = React__namespace.forwardRef(function PhosphorIcon(props, ref) {
@@ -79,9 +78,10 @@ const {
   const pixelSize = viewportPixelsForSize(size);
-  const classNames = `${className != null ? className : ""}`;
-  const iconStyles = _generateStyles(color, pixelSize);
+  const rawStyle = Array.isArray(style) ? css.css(...style) : typeof style === "object" ? css.css(style) : undefined;
   return React__namespace.createElement(StyledIcon, _extends({}, sharedProps, {
-    className: classNames,
-    style: [styles.svg, iconStyles.icon, {
-      maskImage: `url(${icon})`
-    }, style],
+    className: css.cx(styles.svg, styles.icon, rawStyle, className),
+    style: {
+      "--icon-color": color,
+      "--icon-size": `${pixelSize}px`,
+      "--icon-path": `url(${icon})`
+    },
     "data-testid": testId,
@@ -91,20 +91,4 @@ ref: ref
 });
-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: {
+const styles = {
+  svg: css.css({
     display: "inline-block",
@@ -117,6 +101,12 @@ 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-PR2231-20240520192816",
+  "version": "0.0.0-PR2242-20240610182012",
   "design": "v1",
@@ -19,3 +19,3 @@ "publishConfig": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "0.0.0-PR2231-20240520192816"
+    "@khanacademy/wonder-blocks-core": "0.0.0-PR2242-20240610182012"
   },
@@ -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

Total package byte prevSize

90740

increased by12.7%

Worsened metrics

Lines of code

549

decreased by-5.34%

Dependency changes

• + Added@khanacademy/wonder-blocks-core@0.0.0-PR2242-20240610182012(transitive)

• - Removed@khanacademy/wonder-blocks-core@0.0.0-PR2231-20240520192816(transitive)

• Updated@khanacademy/wonder-blocks-core@0.0.0-PR2242-20240610182012