@khanacademy/wonder-blocks-icon 1.2.26 → 1.2.29

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @khanacademy/wonder-blocks-icon
 
+## 1.2.29
+
+### Patch Changes
+
+-   83486dba: Setting data-test-id attribute based on testId prop
+
+## 1.2.28
+
+### Patch Changes
+
+-   Updated dependencies [5f4a4297]
+-   Updated dependencies [2b96fd59]
+    -   @khanacademy/wonder-blocks-core@4.3.2
+
+## 1.2.27
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.3.1
+
 ## 1.2.26
 
 ### Patch Changes

package/dist/es/index.js

@@ -4,39 +4,19 @@ import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
 
-/**
- * A simple function that tells us how many viewport pixels each icon size
- * corresponds to.
- */
 const viewportPixelsForSize = size => ({
   small: 16,
   medium: 24,
   large: 48,
   xlarge: 96
 })[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.
- */
-
 const getPathForIcon = (icon, size) => {
   if (icon[size]) {
-    // Great, we have the IconSize we actually requested
     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);
 
@@ -60,44 +40,8 @@ const getPathForIcon = (icon, size) => {
   }
 };
 
-const _excluded = ["color", "icon", "size", "style"];
+const _excluded = ["color", "icon", "size", "style", "testId"];
 const StyledSVG = addStyle("svg");
-/**
- * An Icon displays a small informational or decorative image as an SVG.
- *
- * ```js
- * import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
- *
- * <Icon
- *     icon={icons.search}
- *     color={Color.white}
- *     size="medium"
- *     style={{margin: 4}}
- * />
- * ```
- *
- * Wonder Blocks comes with a fixed set of icons available by importing `icons`,
- * 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}
- * ```
- *
- * These icons should fit into a viewport of 16, 24, 48, and 96 pixels,
- * respectively.
- */
-
 class Icon extends React.PureComponent {
   render() {
     const _this$props = this.props,
@@ -105,7 +49,8 @@ class Icon extends React.PureComponent {
       color,
       icon,
       size,
-      style
+      style,
+      testId
     } = _this$props,
           sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
@@ -115,12 +60,13 @@ class Icon extends React.PureComponent {
     } = getPathForIcon(icon, size);
     const pixelSize = viewportPixelsForSize(size);
     const viewboxPixelSize = viewportPixelsForSize(assetSize);
-    return /*#__PURE__*/React.createElement(StyledSVG, _extends({}, sharedProps, {
+    return React.createElement(StyledSVG, _extends({}, sharedProps, {
       style: [styles.svg, style],
       width: pixelSize,
       height: pixelSize,
-      viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`
-    }), /*#__PURE__*/React.createElement("path", {
+      viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`,
+      "data-test-id": testId
+    }), React.createElement("path", {
       fill: color,
       d: path
     }));
@@ -140,9 +86,6 @@ const styles = StyleSheet.create({
   }
 });
 
-/**
- * The source SVG paths for our icons at various sizes
- */
 var iconAssets = {
   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"

package/dist/index.js

@@ -297,6 +297,7 @@ class Icon extends react__WEBPACK_IMPORTED_MODULE_0__["PureComponent"] {
       icon,
       size,
       style,
+      testId,
       ...sharedProps
     } = this.props;
     const {
@@ -309,7 +310,8 @@ class Icon extends react__WEBPACK_IMPORTED_MODULE_0__["PureComponent"] {
       style: [styles.svg, style],
       width: pixelSize,
       height: pixelSize,
-      viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`
+      viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`,
+      "data-test-id": testId
     }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("path", {
       fill: color,
       d: path

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon",
-  "version": "1.2.26",
+  "version": "1.2.29",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,10 +16,10 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-core": "^4.3.0"
+    "@khanacademy/wonder-blocks-core": "^4.3.2"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

package/src/components/icon.js

@@ -94,7 +94,7 @@ export default class Icon extends React.PureComponent<Props> {
     };
 
     render(): React.Node {
-        const {color, icon, size, style, ...sharedProps} = this.props;
+        const {color, icon, size, style, testId, ...sharedProps} = this.props;
 
         const {assetSize, path} = getPathForIcon(icon, size);
         const pixelSize = viewportPixelsForSize(size);
@@ -106,6 +106,7 @@ export default class Icon extends React.PureComponent<Props> {
                 width={pixelSize}
                 height={pixelSize}
                 viewBox={`0 0 ${viewboxPixelSize} ${viewboxPixelSize}`}
+                data-test-id={testId}
             >
                 <path fill={color} d={path} />
             </StyledSVG>