@khanacademy/wonder-blocks-icon 1.2.29 → 1.2.30

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @khanacademy/wonder-blocks-icon
 
+## 1.2.30
+
+### Patch Changes
+
+-   Updated dependencies [6ee20af9]
+    -   @khanacademy/wonder-blocks-core@4.4.0
+
 ## 1.2.29
 
 ### Patch Changes

package/dist/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 6);
+/******/ 	return __webpack_require__(__webpack_require__.s = 7);
 /******/ })
 /************************************************************************/
 /******/ ([
@@ -240,20 +240,21 @@ const getPathForIcon = (icon, size) => {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Icon; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
-/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
-/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _util_icon_util_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
+/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(5);
+/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(6);
+/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _util_icon_util_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
 
 
 
 
 
-const StyledSVG = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["addStyle"])("svg");
+const StyledSVG = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__["addStyle"])("svg");
 /**
  * An Icon displays a small informational or decorative image as an SVG.
  *
@@ -290,7 +291,7 @@ const StyledSVG = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODUL
  * respectively.
  */
 
-class Icon extends react__WEBPACK_IMPORTED_MODULE_0__["PureComponent"] {
+class Icon extends react__WEBPACK_IMPORTED_MODULE_1__["PureComponent"] {
   render() {
     const {
       color,
@@ -303,16 +304,16 @@ class Icon extends react__WEBPACK_IMPORTED_MODULE_0__["PureComponent"] {
     const {
       assetSize,
       path
-    } = Object(_util_icon_util_js__WEBPACK_IMPORTED_MODULE_3__[/* getPathForIcon */ "a"])(icon, size);
-    const pixelSize = Object(_util_icon_util_js__WEBPACK_IMPORTED_MODULE_3__[/* viewportPixelsForSize */ "b"])(size);
-    const viewboxPixelSize = Object(_util_icon_util_js__WEBPACK_IMPORTED_MODULE_3__[/* viewportPixelsForSize */ "b"])(assetSize);
-    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledSVG, _extends({}, sharedProps, {
+    } = Object(_util_icon_util_js__WEBPACK_IMPORTED_MODULE_4__[/* getPathForIcon */ "a"])(icon, size);
+    const pixelSize = Object(_util_icon_util_js__WEBPACK_IMPORTED_MODULE_4__[/* viewportPixelsForSize */ "b"])(size);
+    const viewboxPixelSize = Object(_util_icon_util_js__WEBPACK_IMPORTED_MODULE_4__[/* viewportPixelsForSize */ "b"])(assetSize);
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledSVG, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, sharedProps, {
       style: [styles.svg, style],
       width: pixelSize,
       height: pixelSize,
       viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`,
       "data-test-id": testId
-    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("path", {
+    }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("path", {
       fill: color,
       d: path
     }));
@@ -323,7 +324,7 @@ Icon.defaultProps = {
   color: "currentColor",
   size: "small"
 };
-const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
+const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
   svg: {
     display: "inline-block",
     verticalAlign: "text-bottom",
@@ -336,16 +337,39 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 /* 4 */
 /***/ (function(module, exports) {
 
-module.exports = require("aphrodite");
+function _extends() {
+  module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  return _extends.apply(this, arguments);
+}
+
+module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
 
 /***/ }),
 /* 5 */
 /***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-core");
+module.exports = require("aphrodite");
 
 /***/ }),
 /* 6 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-core");
+
+/***/ }),
+/* 7 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon",
-  "version": "1.2.29",
+  "version": "1.2.30",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,8 +15,8 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-core": "^4.3.2"
+    "@babel/runtime": "^7.18.6",
+    "@khanacademy/wonder-blocks-core": "^4.4.0"
   },
   "devDependencies": {
     "wb-dev-build-settings": "^0.4.0"

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -4,7 +4,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
 <table
   className=""
   style={
-    Object {
+    {
       "borderCollapse": "collapse",
     }
   }
@@ -43,7 +43,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -73,7 +73,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={16}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -96,7 +96,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -126,7 +126,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={16}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -149,7 +149,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -179,7 +179,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={16}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -202,7 +202,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -232,7 +232,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={16}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -255,7 +255,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -285,7 +285,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={16}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -318,7 +318,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={16}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -341,7 +341,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -371,7 +371,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={16}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -394,7 +394,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -424,7 +424,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={16}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -447,7 +447,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -480,7 +480,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -513,7 +513,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -543,7 +543,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={16}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -566,7 +566,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -599,7 +599,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -632,7 +632,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -662,7 +662,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={16}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -695,7 +695,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={16}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -718,7 +718,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -748,7 +748,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={16}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -781,7 +781,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={16}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -817,7 +817,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -850,7 +850,7 @@ exports[`wonder-blocks-icon example 1 1`] = `
           className=""
           height={24}
           style={
-            Object {
+            {
               "display": "inline-block",
               "flexGrow": 0,
               "flexShrink": 0,
@@ -876,7 +876,7 @@ exports[`wonder-blocks-icon example 2 1`] = `
   className=""
   height={16}
   style={
-    Object {
+    {
       "display": "inline-block",
       "flexGrow": 0,
       "flexShrink": 0,
@@ -897,7 +897,7 @@ exports[`wonder-blocks-icon example 3 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -917,7 +917,7 @@ exports[`wonder-blocks-icon example 3 1`] = `
     className=""
     height={16}
     style={
-      Object {
+      {
         "display": "inline-block",
         "flexGrow": 0,
         "flexShrink": 0,
@@ -936,7 +936,7 @@ exports[`wonder-blocks-icon example 3 1`] = `
     className=""
     height={24}
     style={
-      Object {
+      {
         "display": "inline-block",
         "flexGrow": 0,
         "flexShrink": 0,
@@ -955,7 +955,7 @@ exports[`wonder-blocks-icon example 3 1`] = `
     className=""
     height={48}
     style={
-      Object {
+      {
         "display": "inline-block",
         "flexGrow": 0,
         "flexShrink": 0,
@@ -974,7 +974,7 @@ exports[`wonder-blocks-icon example 3 1`] = `
     className=""
     height={96}
     style={
-      Object {
+      {
         "display": "inline-block",
         "flexGrow": 0,
         "flexShrink": 0,
@@ -996,7 +996,7 @@ exports[`wonder-blocks-icon example 4 1`] = `
 <div
   className=""
   style={
-    Object {
+    {
       "alignItems": "stretch",
       "borderStyle": "solid",
       "borderWidth": 0,
@@ -1017,7 +1017,7 @@ exports[`wonder-blocks-icon example 4 1`] = `
     className=""
     height={16}
     style={
-      Object {
+      {
         "display": "inline-block",
         "flexGrow": 0,
         "flexShrink": 0,

package/src/components/__docs__/icon.stories.js

@@ -0,0 +1,148 @@
+// @flow
+import * as React from "react";
+import type {StoryComponentType} from "@storybook/react";
+
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
+
+import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import {name, version} from "../../../package.json";
+
+export default {
+    title: "Icon / Icon",
+    component: Icon,
+    parameters: {
+        componentSubtitle: ((
+            <ComponentInfo name={name} version={version} />
+        ): any),
+    },
+    argTypes: {
+        icon: {
+            options: icons,
+        },
+        size: {
+            options: ["small", "medium", "large", "xlarge"],
+        },
+    },
+};
+
+export const Default: StoryComponentType = (args) => {
+    return <Icon {...args} />;
+};
+
+Default.args = {icon: icons.search, size: "small"};
+
+export const Basic: StoryComponentType = () => {
+    return <Icon icon={icons.search} />;
+};
+
+Basic.parameters = {
+    docs: {
+        storyDescription: `Minimal icon usage. This is a search icon.
+            Icons are size \`"small"\` by default.`,
+    },
+};
+
+export const Sizes: StoryComponentType = () => {
+    return (
+        <table>
+            <tr>
+                <td>
+                    <LabelMedium>{"small"}</LabelMedium>
+                </td>
+                <td>
+                    <Icon icon={icons.search} size="small" />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <LabelMedium>{"medium"}</LabelMedium>
+                </td>
+                <td>
+                    <Icon icon={icons.search} size="medium" />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <LabelMedium>{"large"}</LabelMedium>
+                </td>
+                <td>
+                    <Icon icon={icons.search} size="large" />
+                </td>
+            </tr>
+            <tr>
+                <td>
+                    <LabelMedium>{"xlarge"}</LabelMedium>
+                </td>
+                <td>
+                    <Icon icon={icons.search} size="xlarge" />
+                </td>
+            </tr>
+        </table>
+    );
+};
+
+Sizes.parameters = {
+    docs: {
+        storyDescription: `The size of an icon is determined by the \`Icon\`'s
+            \`size\` prop. While we don't currently have assets for sizes
+            larger than medium, we can still render any icon at any size
+            in a pinch. The available sizes are \`"small"\`, \`"medium"\`,
+            \`"large"\`, and \`"xlarge"\`. `,
+    },
+};
+
+export const Variants: StoryComponentType = () => {
+    const iconsWithLabels = Object.entries(icons).map(([iconName, _]) => {
+        return (
+            <tr>
+                <td>
+                    <Icon icon={icons[iconName]} />
+                </td>
+                <td>
+                    <LabelMedium>{iconName}</LabelMedium>
+                </td>
+            </tr>
+        );
+    });
+
+    return <table>{iconsWithLabels}</table>;
+};
+
+Variants.parameters = {
+    docs: {
+        storyDescription: `The actual icon is determined by the \`Icon\`'s
+            \`icon\` prop. Here are the icons that are already defined in
+            Wonder Blocks and ready to use. Just import \`{icons}\` from
+            \`"@khanacademy/wonder-blocks-icon"\`.`,
+    },
+};
+
+export const WithColor: StoryComponentType = () => {
+    return <Icon size="small" icon={icons.info} color={Color.red} />;
+};
+
+WithColor.parameters = {
+    docs: {
+        storyDescription:
+            "The color of an icon can be specified through its `color` prop.",
+    },
+};
+
+export const Inline: StoryComponentType = () => {
+    return (
+        <View>
+            Here is an icon
+            <Icon size="small" icon={icons.info} style={{margin: 2}} />
+            when it is inline.
+        </View>
+    );
+};
+
+Inline.parameters = {
+    docs: {
+        storyDescription: "Icons have `display: inline-block` by default.",
+    },
+};