@khanacademy/wonder-blocks-popover 5.1.0 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @khanacademy/wonder-blocks-popover
 
+## 5.2.0
+
+### Minor Changes
+
+- a42d9f3: PopoverContent: Add `iconAlt` prop so alt text can be set on the icon
+
+### Patch Changes
+
+- fff5da0: Migrate to semanticColor tokens
+- Updated dependencies [ed26d66]
+- Updated dependencies [5655b9f]
+- Updated dependencies [5655b9f]
+- Updated dependencies [8f53293]
+- Updated dependencies [fff5da0]
+- Updated dependencies [6d37702]
+- Updated dependencies [051f0f8]
+- Updated dependencies [e1b78db]
+- Updated dependencies [8f53293]
+- Updated dependencies [051f0f8]
+    - @khanacademy/wonder-blocks-core@12.2.0
+    - @khanacademy/wonder-blocks-tokens@5.0.0
+    - @khanacademy/wonder-blocks-icon-button@6.1.2
+    - @khanacademy/wonder-blocks-modal@7.1.2
+    - @khanacademy/wonder-blocks-tooltip@4.1.2
+    - @khanacademy/wonder-blocks-typography@3.1.2
+
+## 5.1.1
+
+### Patch Changes
+
+- ee8d95a: Rollback rollup version from v4 to v2 to prevent an issue with CJS builds in unit tests
+- Updated dependencies [ee8d95a]
+    - @khanacademy/wonder-blocks-core@12.1.1
+    - @khanacademy/wonder-blocks-icon-button@6.1.1
+    - @khanacademy/wonder-blocks-modal@7.1.1
+    - @khanacademy/wonder-blocks-tokens@4.2.1
+    - @khanacademy/wonder-blocks-tooltip@4.1.1
+    - @khanacademy/wonder-blocks-typography@3.1.1
+
 ## 5.1.0
 
 ### Minor Changes

package/dist/components/popover-content.d.ts

@@ -50,6 +50,11 @@ type Props = (CommonProps & {
      * same time with image.
      */
     icon?: string | React.ReactElement<React.ComponentProps<"img">> | React.ReactElement<React.ComponentProps<"svg">>;
+    /**
+     * Alt text for the icon. This prop is only used if the `icon` prop
+     * is passed a url (instead of a svg or img element).
+     */
+    iconAlt?: string;
     /**
      * Decorate the popover with a full-bleed illustration. It cannot be used at
      * the same time with icon.
@@ -64,6 +69,7 @@ type Props = (CommonProps & {
      */
     emphasized?: boolean;
     icon?: never;
+    iconAlt?: never;
     image?: never;
 });
 type DefaultProps = {

package/dist/es/index.js

@@ -5,7 +5,7 @@ import { View, Id, addStyle } from '@khanacademy/wonder-blocks-core';
 import { TooltipTail, TooltipPopper } from '@khanacademy/wonder-blocks-tooltip';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { StyleSheet } from 'aphrodite';
-import { spacing, color } from '@khanacademy/wonder-blocks-tokens';
+import { spacing, semanticColor, color } from '@khanacademy/wonder-blocks-tokens';
 import { HeadingSmall, Body } from '@khanacademy/wonder-blocks-typography';
 import xIcon from '@phosphor-icons/core/regular/x.svg';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
@@ -145,7 +145,7 @@ class PopoverEventListener extends React.Component {
         });
         return;
       }
-      const node = ReactDOM.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? undefined : _this$props$contentRe.current);
+      const node = ReactDOM.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
       if (node && !node.contains(e.target)) {
         e.preventDefault();
         e.stopPropagation();
@@ -211,8 +211,8 @@ class InitialFocus extends React.Component {
 class FocusManager extends React.Component {
   constructor(...args) {
     super(...args);
-    this.nextElementAfterPopover = undefined;
-    this.rootNode = undefined;
+    this.nextElementAfterPopover = void 0;
+    this.rootNode = void 0;
     this.elementsThatCanBeFocusableInsidePopover = [];
     this.firstFocusableElementInPopover = null;
     this.lastFocusableElementInPopover = null;
@@ -355,20 +355,21 @@ class FocusManager extends React.Component {
     const {
       children
     } = this.props;
-    return React.createElement("div", {
-      ref: this.getComponentRootNode,
-      onClick: () => {
-        this.changeFocusabilityInsidePopover(true);
-      },
-      onFocus: () => {
-        this.changeFocusabilityInsidePopover(true);
-      },
-      onBlur: () => {
-        this.changeFocusabilityInsidePopover(false);
-      }
-    }, React.createElement(InitialFocus, {
-      initialFocusId: this.props.initialFocusId
-    }, children));
+    return (React.createElement("div", {
+        ref: this.getComponentRootNode,
+        onClick: () => {
+          this.changeFocusabilityInsidePopover(true);
+        },
+        onFocus: () => {
+          this.changeFocusabilityInsidePopover(true);
+        },
+        onBlur: () => {
+          this.changeFocusabilityInsidePopover(false);
+        }
+      }, React.createElement(InitialFocus, {
+        initialFocusId: this.props.initialFocusId
+      }, children))
+    );
   }
 }
 
@@ -596,8 +597,8 @@ PopoverContentCore.defaultProps = {
 const styles$1 = StyleSheet.create({
   content: {
     borderRadius: spacing.xxxSmall_4,
-    border: `solid 1px ${color.offBlack16}`,
-    backgroundColor: color.white,
+    border: `solid 1px ${semanticColor.border.primary}`,
+    backgroundColor: semanticColor.surface.primary,
     boxShadow: `0 ${spacing.xSmall_8}px ${spacing.xSmall_8}px 0 ${color.offBlack8}`,
     margin: 0,
     maxWidth: spacing.medium_16 * 18,
@@ -606,12 +607,12 @@ const styles$1 = StyleSheet.create({
     justifyContent: "center"
   },
   blue: {
-    backgroundColor: color.blue,
-    color: color.white
+    backgroundColor: semanticColor.surface.emphasis,
+    color: semanticColor.text.inverse
   },
   darkBlue: {
-    backgroundColor: color.darkBlue,
-    color: color.white
+    backgroundColor: semanticColor.surface.inverse,
+    color: semanticColor.text.inverse
   },
   closeButton: {
     margin: 0,
@@ -641,7 +642,8 @@ class PopoverContent extends React.Component {
     };
     this.maybeRenderIcon = () => {
       const {
-        icon
+        icon,
+        iconAlt
       } = this.props;
       if (!icon) {
         return null;
@@ -650,7 +652,8 @@ class PopoverContent extends React.Component {
         style: styles.iconContainer
       }, typeof icon !== "string" ? icon : React.createElement(StyledImg, {
         src: icon,
-        style: styles.icon
+        style: styles.icon,
+        alt: iconAlt || ""
       }));
     };
     this.maybeRenderActions = close => {

package/dist/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var ReactDOM = require('react-dom');
@@ -12,7 +14,10 @@ var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var xIcon = require('@phosphor-icons/core/regular/x.svg');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 
-function _interopNamespaceDefault(e) {
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
     var n = Object.create(null);
     if (e) {
         Object.keys(e).forEach(function (k) {
@@ -25,12 +30,15 @@ function _interopNamespaceDefault(e) {
             }
         });
     }
-    n.default = e;
+    n["default"] = e;
     return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
+var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 
 const defaultContext = {
   close: undefined,
@@ -65,7 +73,7 @@ class PopoverAnchor extends React__namespace.Component {
       });
       return React__namespace.cloneElement(renderedChildren, sharedProps);
     } else {
-      return React__namespace.cloneElement(children, _extends({}, children.props, sharedProps, {
+      return React__namespace.cloneElement(children, _extends__default["default"]({}, children.props, sharedProps, {
         onClick: children.props.onClick ? e => {
           e.stopPropagation();
           children.props.onClick();
@@ -167,7 +175,7 @@ class PopoverEventListener extends React__namespace.Component {
         });
         return;
       }
-      const node = ReactDOM__namespace.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? undefined : _this$props$contentRe.current);
+      const node = ReactDOM__namespace.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
       if (node && !node.contains(e.target)) {
         e.preventDefault();
         e.stopPropagation();
@@ -233,8 +241,8 @@ class InitialFocus extends React__namespace.Component {
 class FocusManager extends React__namespace.Component {
   constructor(...args) {
     super(...args);
-    this.nextElementAfterPopover = undefined;
-    this.rootNode = undefined;
+    this.nextElementAfterPopover = void 0;
+    this.rootNode = void 0;
     this.elementsThatCanBeFocusableInsidePopover = [];
     this.firstFocusableElementInPopover = null;
     this.lastFocusableElementInPopover = null;
@@ -377,20 +385,21 @@ class FocusManager extends React__namespace.Component {
     const {
       children
     } = this.props;
-    return React__namespace.createElement("div", {
-      ref: this.getComponentRootNode,
-      onClick: () => {
-        this.changeFocusabilityInsidePopover(true);
-      },
-      onFocus: () => {
-        this.changeFocusabilityInsidePopover(true);
-      },
-      onBlur: () => {
-        this.changeFocusabilityInsidePopover(false);
-      }
-    }, React__namespace.createElement(InitialFocus, {
-      initialFocusId: this.props.initialFocusId
-    }, children));
+    return (React__namespace.createElement("div", {
+        ref: this.getComponentRootNode,
+        onClick: () => {
+          this.changeFocusabilityInsidePopover(true);
+        },
+        onFocus: () => {
+          this.changeFocusabilityInsidePopover(true);
+        },
+        onBlur: () => {
+          this.changeFocusabilityInsidePopover(false);
+        }
+      }, React__namespace.createElement(InitialFocus, {
+        initialFocusId: this.props.initialFocusId
+      }, children))
+    );
   }
 }
 
@@ -484,7 +493,7 @@ class Popover extends React__namespace.Component {
       placement: placement,
       rootBoundary: rootBoundary,
       viewportPadding: viewportPadding
-    }, props => React__namespace.createElement(PopoverDialog, _extends({}, props, {
+    }, props => React__namespace.createElement(PopoverDialog, _extends__default["default"]({}, props, {
       "aria-label": ariaLabel,
       "aria-describedby": describedBy,
       "aria-labelledby": ariaLabelledBy,
@@ -569,8 +578,8 @@ class CloseButton extends React__namespace.Component {
     return React__namespace.createElement(PopoverContext.Consumer, null, ({
       close
     }) => {
-      return React__namespace.createElement(IconButton, {
-        icon: xIcon,
+      return React__namespace.createElement(IconButton__default["default"], {
+        icon: xIcon__default["default"],
         "aria-label": ariaLabel,
         onClick: close,
         kind: light ? "primary" : "tertiary",
@@ -618,8 +627,8 @@ PopoverContentCore.defaultProps = {
 const styles$1 = aphrodite.StyleSheet.create({
   content: {
     borderRadius: wonderBlocksTokens.spacing.xxxSmall_4,
-    border: `solid 1px ${wonderBlocksTokens.color.offBlack16}`,
-    backgroundColor: wonderBlocksTokens.color.white,
+    border: `solid 1px ${wonderBlocksTokens.semanticColor.border.primary}`,
+    backgroundColor: wonderBlocksTokens.semanticColor.surface.primary,
     boxShadow: `0 ${wonderBlocksTokens.spacing.xSmall_8}px ${wonderBlocksTokens.spacing.xSmall_8}px 0 ${wonderBlocksTokens.color.offBlack8}`,
     margin: 0,
     maxWidth: wonderBlocksTokens.spacing.medium_16 * 18,
@@ -628,12 +637,12 @@ const styles$1 = aphrodite.StyleSheet.create({
     justifyContent: "center"
   },
   blue: {
-    backgroundColor: wonderBlocksTokens.color.blue,
-    color: wonderBlocksTokens.color.white
+    backgroundColor: wonderBlocksTokens.semanticColor.surface.emphasis,
+    color: wonderBlocksTokens.semanticColor.text.inverse
   },
   darkBlue: {
-    backgroundColor: wonderBlocksTokens.color.darkBlue,
-    color: wonderBlocksTokens.color.white
+    backgroundColor: wonderBlocksTokens.semanticColor.surface.inverse,
+    color: wonderBlocksTokens.semanticColor.text.inverse
   },
   closeButton: {
     margin: 0,
@@ -663,7 +672,8 @@ class PopoverContent extends React__namespace.Component {
     };
     this.maybeRenderIcon = () => {
       const {
-        icon
+        icon,
+        iconAlt
       } = this.props;
       if (!icon) {
         return null;
@@ -672,7 +682,8 @@ class PopoverContent extends React__namespace.Component {
         style: styles.iconContainer
       }, typeof icon !== "string" ? icon : React__namespace.createElement(StyledImg, {
         src: icon,
-        style: styles.icon
+        style: styles.icon,
+        alt: iconAlt || ""
       }));
     };
     this.maybeRenderActions = close => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-popover",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -13,12 +13,12 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-core": "12.1.0",
-    "@khanacademy/wonder-blocks-icon-button": "6.1.0",
-    "@khanacademy/wonder-blocks-modal": "7.1.0",
-    "@khanacademy/wonder-blocks-tokens": "4.2.0",
-    "@khanacademy/wonder-blocks-tooltip": "4.1.0",
-    "@khanacademy/wonder-blocks-typography": "3.1.0"
+    "@khanacademy/wonder-blocks-core": "12.2.0",
+    "@khanacademy/wonder-blocks-icon-button": "6.1.2",
+    "@khanacademy/wonder-blocks-modal": "7.1.2",
+    "@khanacademy/wonder-blocks-tokens": "5.0.0",
+    "@khanacademy/wonder-blocks-tooltip": "4.1.2",
+    "@khanacademy/wonder-blocks-typography": "3.1.2"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -29,7 +29,7 @@
     "react-popper": "^2.0.0"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "2.1.0"
+    "@khanacademy/wb-dev-build-settings": "2.1.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"