@khanacademy/wonder-blocks-clickable 6.1.0 → 6.1.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 6.1.2
+
+### Patch Changes
+
+- 5655b9f: Switch to use `focus.outer` semanticColor token
+- 8fc65a9: Migrate Clickable to `semanticColor`
+- 051f0f8: Rework action.disabled tokens to include properties per kind (border, background, foreground).
+- Updated dependencies [ed26d66]
+- Updated dependencies [5655b9f]
+- Updated dependencies [5655b9f]
+- Updated dependencies [8f53293]
+- Updated dependencies [051f0f8]
+- Updated dependencies [e1b78db]
+- Updated dependencies [051f0f8]
+    - @khanacademy/wonder-blocks-core@12.2.0
+    - @khanacademy/wonder-blocks-tokens@5.0.0
+
+## 6.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-tokens@4.2.1
+
 ## 6.1.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -5,7 +5,7 @@ import { StyleSheet } from 'aphrodite';
 import { withRouter, Link } from 'react-router-dom';
 import { __RouterContext } from 'react-router';
 import { keys, addStyle } from '@khanacademy/wonder-blocks-core';
-import { color } from '@khanacademy/wonder-blocks-tokens';
+import { border, semanticColor } from '@khanacademy/wonder-blocks-tokens';
 
 const getAppropriateTriggersForRole = role => {
   switch (role) {
@@ -33,16 +33,16 @@ const getAppropriateTriggersForRole = role => {
   }
 };
 const disabledHandlers = {
-  onClick: () => undefined,
-  onMouseEnter: () => undefined,
-  onMouseLeave: () => undefined,
-  onMouseDown: () => undefined,
-  onMouseUp: () => undefined,
-  onTouchStart: () => undefined,
-  onTouchEnd: () => undefined,
-  onTouchCancel: () => undefined,
-  onKeyDown: () => undefined,
-  onKeyUp: () => undefined
+  onClick: () => void 0,
+  onMouseEnter: () => void 0,
+  onMouseLeave: () => void 0,
+  onMouseDown: () => void 0,
+  onMouseUp: () => void 0,
+  onTouchStart: () => void 0,
+  onTouchEnd: () => void 0,
+  onTouchCancel: () => void 0,
+  onKeyDown: () => void 0,
+  onKeyUp: () => void 0
 };
 const startState = {
   hovered: false,
@@ -62,8 +62,8 @@ class ClickableBehavior extends React.Component {
   }
   constructor(props) {
     super(props);
-    this.waitingForClick = undefined;
-    this.enterClick = undefined;
+    this.waitingForClick = void 0;
+    this.enterClick = void 0;
     this.handleClick = e => {
       const {
         onClick = undefined,
@@ -469,20 +469,20 @@ const styles = StyleSheet.create({
   },
   focused: {
     ":focus": {
-      outline: `solid 2px ${color.blue}`
+      outline: `solid ${border.width.thin}px ${semanticColor.focus.outer}`
     }
   },
   focusedLight: {
-    outline: `solid 2px ${color.white}`
+    outline: `solid ${border.width.thin}px ${semanticColor.border.inverse}`
   },
   disabled: {
-    color: color.offBlack32,
+    color: semanticColor.action.secondary.disabled.foreground,
     cursor: "not-allowed",
     ":focus": {
       outline: "none"
     },
     ":focus-visible": {
-      outline: `solid 2px ${color.blue}`
+      outline: `solid ${border.width.thin}px ${semanticColor.focus.outer}`
     }
   }
 });

package/dist/index.js

@@ -11,7 +11,10 @@ var reactRouter = require('react-router');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 
-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) {
@@ -24,11 +27,13 @@ function _interopNamespaceDefault(e) {
          }
       });
    }
-   n.default = e;
+   n["default"] = e;
    return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
+var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 const getAppropriateTriggersForRole = role => {
   switch (role) {
@@ -56,16 +61,16 @@ const getAppropriateTriggersForRole = role => {
   }
 };
 const disabledHandlers = {
-  onClick: () => undefined,
-  onMouseEnter: () => undefined,
-  onMouseLeave: () => undefined,
-  onMouseDown: () => undefined,
-  onMouseUp: () => undefined,
-  onTouchStart: () => undefined,
-  onTouchEnd: () => undefined,
-  onTouchCancel: () => undefined,
-  onKeyDown: () => undefined,
-  onKeyUp: () => undefined
+  onClick: () => void 0,
+  onMouseEnter: () => void 0,
+  onMouseLeave: () => void 0,
+  onMouseDown: () => void 0,
+  onMouseUp: () => void 0,
+  onTouchStart: () => void 0,
+  onTouchEnd: () => void 0,
+  onTouchCancel: () => void 0,
+  onKeyDown: () => void 0,
+  onKeyUp: () => void 0
 };
 const startState = {
   hovered: false,
@@ -76,7 +81,7 @@ const startState = {
 class ClickableBehavior extends React__namespace.Component {
   static getDerivedStateFromProps(props, state) {
     if (props.disabled) {
-      return _extends({}, startState, {
+      return _extends__default["default"]({}, startState, {
         focused: state.focused
       });
     } else {
@@ -85,8 +90,8 @@ class ClickableBehavior extends React__namespace.Component {
   }
   constructor(props) {
     super(props);
-    this.waitingForClick = undefined;
-    this.enterClick = undefined;
+    this.waitingForClick = void 0;
+    this.enterClick = void 0;
     this.handleClick = e => {
       const {
         onClick = undefined,
@@ -325,7 +330,7 @@ class ClickableBehavior extends React__namespace.Component {
   }
   render() {
     const rel = this.props.rel || (this.props.target === "_blank" ? "noopener noreferrer" : undefined);
-    const childrenProps = this.props.disabled ? _extends({}, disabledHandlers, {
+    const childrenProps = this.props.disabled ? _extends__default["default"]({}, disabledHandlers, {
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       tabIndex: this.props.tabIndex,
@@ -380,7 +385,7 @@ const Clickable = React__namespace.forwardRef(function Clickable(props, ref) {
     const activeHref = props.href && !props.disabled;
     const useClient = router && !props.skipClientNav && isClientSideUrl(props.href || "");
     if (activeHref && useClient && props.href) {
-      return React__namespace.createElement(StyledLink, _extends({}, commonProps, {
+      return React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
         to: props.href,
         role: props.role,
         target: props.target || undefined,
@@ -388,7 +393,7 @@ const Clickable = React__namespace.forwardRef(function Clickable(props, ref) {
         ref: ref
       }), props.children(clickableState));
     } else if (activeHref && !useClient) {
-      return React__namespace.createElement(StyledA, _extends({}, commonProps, {
+      return React__namespace.createElement(StyledA, _extends__default["default"]({}, commonProps, {
         href: props.href,
         role: props.role,
         target: props.target || undefined,
@@ -396,7 +401,7 @@ const Clickable = React__namespace.forwardRef(function Clickable(props, ref) {
         ref: ref
       }), props.children(clickableState));
     } else {
-      return React__namespace.createElement(StyledButton, _extends({}, commonProps, {
+      return React__namespace.createElement(StyledButton, _extends__default["default"]({}, commonProps, {
         type: "button",
         "aria-disabled": props.disabled,
         ref: ref
@@ -423,7 +428,7 @@ const Clickable = React__namespace.forwardRef(function Clickable(props, ref) {
         disabled,
         tabIndex
       } = props,
-      restProps = _objectWithoutPropertiesLoose(props, _excluded);
+      restProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
     const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
     const getStyle = state => [styles.reset, styles.link, !hideDefaultFocusRing && state.focused && (light ? styles.focusedLight : styles.focused), disabled && styles.disabled, style];
     if (beforeNav) {
@@ -439,7 +444,7 @@ const Clickable = React__namespace.forwardRef(function Clickable(props, ref) {
         onMouseUp: onMouseUp,
         disabled: disabled,
         tabIndex: tabIndex
-      }, (state, childrenProps) => getCorrectTag(state, router, _extends({}, restProps, {
+      }, (state, childrenProps) => getCorrectTag(state, router, _extends__default["default"]({}, restProps, {
         "data-testid": testId,
         style: getStyle(state)
       }, childrenProps)));
@@ -456,7 +461,7 @@ const Clickable = React__namespace.forwardRef(function Clickable(props, ref) {
         target: target,
         disabled: disabled,
         tabIndex: tabIndex
-      }, (state, childrenProps) => getCorrectTag(state, router, _extends({}, restProps, {
+      }, (state, childrenProps) => getCorrectTag(state, router, _extends__default["default"]({}, restProps, {
         "data-testid": testId,
         style: getStyle(state)
       }, childrenProps)));
@@ -492,25 +497,25 @@ const styles = aphrodite.StyleSheet.create({
   },
   focused: {
     ":focus": {
-      outline: `solid 2px ${wonderBlocksTokens.color.blue}`
+      outline: `solid ${wonderBlocksTokens.border.width.thin}px ${wonderBlocksTokens.semanticColor.focus.outer}`
     }
   },
   focusedLight: {
-    outline: `solid 2px ${wonderBlocksTokens.color.white}`
+    outline: `solid ${wonderBlocksTokens.border.width.thin}px ${wonderBlocksTokens.semanticColor.border.inverse}`
   },
   disabled: {
-    color: wonderBlocksTokens.color.offBlack32,
+    color: wonderBlocksTokens.semanticColor.action.secondary.disabled.foreground,
     cursor: "not-allowed",
     ":focus": {
       outline: "none"
     },
     ":focus-visible": {
-      outline: `solid 2px ${wonderBlocksTokens.color.blue}`
+      outline: `solid ${wonderBlocksTokens.border.width.thin}px ${wonderBlocksTokens.semanticColor.focus.outer}`
     }
   }
 });
 
 exports.ClickableBehavior = ClickableBehavior;
-exports.default = Clickable;
+exports["default"] = Clickable;
 exports.getClickableBehavior = getClickableBehavior;
 exports.isClientSideUrl = isClientSideUrl;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "6.1.0",
+  "version": "6.1.2",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -13,8 +13,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-core": "12.1.0",
-    "@khanacademy/wonder-blocks-tokens": "4.2.0"
+    "@khanacademy/wonder-blocks-core": "12.2.0",
+    "@khanacademy/wonder-blocks-tokens": "5.0.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -24,7 +24,7 @@
     "react-router-dom": "5.3.4"
   },
   "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"