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

Comparing version 1.0.3 to 1.0.4

components/icon.js

@@ -6,5 +6,7 @@ // @flow
 import {addStyle} from "@khanacademy/wonder-blocks-core";
-import type {IconAsset, IconSize} from "../util/icon-assets.js";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
 import {getPathForIcon, viewportPixelsForSize} from "../util/icon-util.js";
 
+import type {IconAsset, IconSize} from "../util/icon-assets.js";
+
 type Props = {|
@@ -34,3 +36,3 @@ /**
      */
-    style?: any,
+    style?: StyleType,
 |};
@@ -44,3 +46,3 @@
  * ```js
- * import Icon, {icons} from "@khanacademy/wonder-blocks-icon"
+ * import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
  *
@@ -56,5 +58,16 @@ * <Icon
  * Wonder Blocks comes with a fixed set of icons available by importing `icons`,
- * but you can provide your own `IconAsset` in the following format:
+ * but you can also provide your own `IconAsset`.
  *
  * ```js
+ * import Icon from "@khanacademy/wonder-blocks-icon";
+ * import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
+ *
+ * // Easter egg: what shape am I?
+ * const customIcon: IconAsset = {
+ *     small: "M6.92820 0L13.85640 4L13.85640 12L6.92820 16L0 12L0 4Z",
+ * };
+ * ```
+ *
+ * `IconAsset` should be in the following format:
+ * ```js
  * {small?: string, medium?: string, large?: string, xlarge?: string}
@@ -73,3 +86,10 @@ * ```
     render() {
+        // There is a weird thing where Flow will only recognize a string-quoted
+        // prop name if it's in single quotes, but our tooling normalizes it to
+        // double-quotes on commit. So the aria-label prop isn't included in
+        // props validation.
+        // eslint-disable-next-line react/prop-types
+        const {"aria-label": ariaLabel} = this.props;
         const {color, icon, size, style} = this.props;
+
         const {assetSize, path} = getPathForIcon(icon, size);
@@ -83,8 +103,3 @@ const pixelSize = viewportPixelsForSize(size);
                 height={pixelSize}
-                // There is a weird thing where Flow will only recognize a
-                // string-quoted prop name if it's in single quotes, but our
-                // tooling normalizes it to double-quotes on commit. So the
-                // aria-label prop isn't included in props validation.
-                // eslint-disable-next-line react/prop-types
-                aria-label={this.props["aria-label"]}
+                aria-label={ariaLabel}
                 viewBox={`0 0 ${viewboxPixelSize} ${viewboxPixelSize}`}
@@ -91,0 +106,0 @@ >

dist/index.js

@@ -294,3 +294,3 @@ module.exports =
  * ```js
- * import Icon, {icons} from "@khanacademy/wonder-blocks-icon"
+ * import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
  *
@@ -306,5 +306,16 @@ * <Icon
  * Wonder Blocks comes with a fixed set of icons available by importing `icons`,
- * but you can provide your own `IconAsset` in the following format:
+ * but you can also provide your own `IconAsset`.
  *
  * ```js
+ * import Icon from "@khanacademy/wonder-blocks-icon";
+ * import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
+ *
+ * // Easter egg: what shape am I?
+ * const customIcon: IconAsset = {
+ *     small: "M6.92820 0L13.85640 4L13.85640 12L6.92820 16L0 12L0 4Z",
+ * };
+ * ```
+ *
+ * `IconAsset` should be in the following format:
+ * ```js
  * {small?: string, medium?: string, large?: string, xlarge?: string}
@@ -329,2 +340,8 @@ * ```
         value: function render() {
+            // There is a weird thing where Flow will only recognize a string-quoted
+            // prop name if it's in single quotes, but our tooling normalizes it to
+            // double-quotes on commit. So the aria-label prop isn't included in
+            // props validation.
+            // eslint-disable-next-line react/prop-types
+            var ariaLabel = this.props["aria-label"];
             var _props = this.props,
@@ -347,9 +364,4 @@ color = _props.color,
                     width: pixelSize,
-                    height: pixelSize
-                    // There is a weird thing where Flow will only recognize a
-                    // string-quoted prop name if it's in single quotes, but our
-                    // tooling normalizes it to double-quotes on commit. So the
-                    // aria-label prop isn't included in props validation.
-                    // eslint-disable-next-line react/prop-types
-                    , "aria-label": this.props["aria-label"],
+                    height: pixelSize,
+                    "aria-label": ariaLabel,
                     viewBox: "0 0 " + viewboxPixelSize + " " + viewboxPixelSize
@@ -356,0 +368,0 @@ },

package.json

 {
   "name": "@khanacademy/wonder-blocks-icon",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "design": "v1",
@@ -10,2 +10,3 @@ "publishConfig": {
   "main": "dist/index.js",
+  "module": "dist/es/index.js",
   "source": "index.js",
@@ -18,6 +19,6 @@ "scripts": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-core": "^1.1.1"
+    "@khanacademy/wonder-blocks-core": "^1.2.0"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-color": "^1.0.6"
+    "@khanacademy/wonder-blocks-color": "^1.0.7"
   },
@@ -24,0 +25,0 @@ "peerDependencies": {

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

76689

increased by17.06%

Number of package files

13

increased by8.33%

Lines of code

1057

increased by26.74%

Dependency changes

• Updated@khanacademy/wonder-blocks-core@^1.2.0