@atlaskit/onboarding 10.2.5 → 10.3.2

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/onboarding
 
+## 10.3.2
+
+### Patch Changes
+
+- [`9a5740d1ec3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9a5740d1ec3) - [ux] The `pulse` prop now works correctly for `<SpotlightPulse />`. Previously, it was applying the pulse to the `SpotlightPulse` target regardless of the `pulse` value. Now it checks the value of `pulse` and applies the animation accordingly.
+
+## 10.3.1
+
+### Patch Changes
+
+- [`3fced6aa641`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fced6aa641) - Bumped `react-focus-lock` to version `^2.2.1`.
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 10.3.0
+
+### Minor Changes
+
+- [`50081f13de7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/50081f13de7) - Instrumented `@atlaskit/onboarding` with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.2.6
+
+### Patch Changes
+
+- [`b85e7ce12cd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b85e7ce12cd) - Internal upgrade of memoize-one to 6.0.0
+
 ## 10.2.5
 
 ### Patch Changes

package/dist/cjs/components/index.js

@@ -41,10 +41,10 @@ Object.defineProperty(exports, "SpotlightTransition", {
     return _spotlightTransition.default;
   }
 });
-Object.defineProperty(exports, "useSpotlight", {
+Object.defineProperty(exports, "modalButtonTheme", {
   enumerable: true,
   get: function get() {
-    return _useSpotlight.default;
+    return _theme.modalButtonTheme;
   }
 });
 Object.defineProperty(exports, "spotlightButtonTheme", {
@@ -53,10 +53,10 @@ Object.defineProperty(exports, "spotlightButtonTheme", {
     return _theme.spotlightButtonTheme;
   }
 });
-Object.defineProperty(exports, "modalButtonTheme", {
+Object.defineProperty(exports, "useSpotlight", {
   enumerable: true,
   get: function get() {
-    return _theme.modalButtonTheme;
+    return _useSpotlight.default;
   }
 });
 

package/dist/cjs/components/spotlight-card.js

@@ -87,10 +87,10 @@ var SpotlightCard = /*#__PURE__*/function (_React$Component) {
           return _theme(function () {
             return _objectSpread(_objectSpread({}, others), {}, {
               container: _objectSpread({
-                background: _colors.P300,
-                color: _colors.N0,
+                background: "var(--ds-background-boldDiscovery-resting, ".concat(_colors.P300, ")"),
+                color: "var(--ds-text-onBold, ".concat(_colors.N0, ")"),
                 width: "".concat(Math.min(Math.max(width, 160), 600), "px"),
-                boxShadow: isFlat ? undefined : "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)
+                boxShadow: isFlat ? undefined : "var(--ds-card, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
               }, container)
             });
           }, {});

package/dist/cjs/components/spotlight-dialog.js

@@ -52,7 +52,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.2.5";
+var packageVersion = "10.3.2";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);

package/dist/cjs/components/spotlight-manager.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.SpotlightConsumer = exports.SpotlightContext = exports.TargetConsumer = void 0;
+exports.default = exports.TargetConsumer = exports.SpotlightContext = exports.SpotlightConsumer = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 

package/dist/cjs/components/theme.js

@@ -7,7 +7,7 @@ var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.modalButtonTheme = exports.spotlightButtonTheme = void 0;
+exports.spotlightButtonTheme = exports.modalButtonTheme = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -28,234 +28,108 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var spotlightTheme = {
   default: {
     background: {
-      default: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      disabled: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      selected: {
-        light: colors.R500,
-        dark: colors.R500
-      },
-      focus: {
-        light: colors.P400,
-        dark: colors.P400
-      }
+      default: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")"),
+      hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
+      disabled: "var(--ds-background-disabled, ".concat(colors.P400, ")"),
+      selected: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.R500, ")"),
+      focus: "var(--ds-background-subtleNeutral-resting, ".concat(colors.P400, ")")
     },
     boxShadow: {
-      focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
-      }
+      focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      active: {
-        light: colors.N0,
-        dark: colors.N0
-      },
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
+        light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
+        dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
       },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     },
     outline: {
-      focus: {
-        light: 'none',
-        dark: 'none'
-      }
+      focus: 'none'
     }
   },
   subtle: {
     background: {
-      default: {
-        light: 'none',
-        dark: 'none'
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      disabled: {
-        light: 'none',
-        dark: 'none'
-      },
+      default: 'none',
+      hover: "var(--ds-background-subtleNeutral-hover, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-subtleNeutral-pressed, ".concat(colors.P500, ")"),
+      disabled: 'none',
       selected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
+        dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
       },
       focusSelected: {
-        light: colors.N700,
-        dark: colors.DN0
+        light: "var(--ds-background-selected-hover, ".concat(colors.N700, ")"),
+        dark: "var(--ds-background-selected-hover, ".concat(colors.DN0, ")")
       }
     },
     boxShadow: {
-      focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
-      }
+      focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      active: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      disabled: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      hover: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      active: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      disabled: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
+      selected: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     },
     outline: {
-      focus: {
-        light: 'none',
-        dark: 'none'
-      }
+      focus: 'none'
     }
   },
   'subtle-link': {
     textDecoration: {
-      hover: {
-        light: "underline ".concat(colors.P75),
-        dark: "underline ".concat(colors.P75)
-      }
+      hover: "underline ".concat("var(--ds-text-discovery, ".concat(colors.P75, ")"))
     },
     textDecorationLine: {
-      active: {
-        light: 'none',
-        dark: 'none'
-      }
+      active: 'none'
     },
     boxShadow: {
-      focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
-      }
+      focus: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      hover: {
-        light: colors.P75,
-        dark: colors.P75
-      },
-      active: {
-        light: colors.P100,
-        dark: colors.P100
-      },
-      disabled: {
-        light: colors.P500,
-        dark: colors.P500
-      },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
+      hover: "var(--ds-text-onBold, ".concat(colors.P75, ")"),
+      active: "var(--ds-text-onBold, ".concat(colors.P100, ")"),
+      disabled: "var(--ds-text-discovery, ".concat(colors.P500, ")"),
+      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     }
   }
 };
 var modalTheme = {
   primary: {
     background: {
-      default: {
-        light: colors.P400,
-        dark: colors.P400
-      },
-      hover: {
-        light: colors.P200,
-        dark: colors.P200
-      },
-      active: {
-        light: colors.P500,
-        dark: colors.P500
-      },
+      default: "var(--ds-background-boldDiscovery-resting, ".concat(colors.P400, ")"),
+      hover: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P200, ")"),
+      active: "var(--ds-background-boldDiscovery-pressed, ".concat(colors.P500, ")"),
       disabled: {
-        light: colors.N30,
-        dark: colors.DN70
-      },
-      selected: {
-        light: colors.R500,
-        dark: colors.R500
+        light: "var(--ds-background-disabled, ".concat(colors.N30, ")"),
+        dark: "var(--ds-background-disabled, ".concat(colors.DN70, ")")
       },
-      focus: {
-        light: colors.P400,
-        dark: colors.P400
-      }
+      selected: "var(--ds-background-selected-hover, ".concat(colors.R500, ")"),
+      focus: "var(--ds-background-boldDiscovery-hover, ".concat(colors.P400, ")")
     },
     boxShadow: {
       focus: {
-        light: "".concat(colors.P100, " 0 0 0 2px"),
-        dark: "".concat(colors.P100, " 0 0 0 2px")
+        light: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")")),
+        dark: "0 0 0 2px ".concat("var(--ds-iconBorder-discovery, ".concat(colors.P100, ")"))
       }
     },
     color: {
-      default: {
-        light: colors.N0,
-        dark: colors.N0
-      },
+      default: "var(--ds-text-onBold, ".concat(colors.N0, ")"),
       disabled: {
-        light: colors.N0,
-        dark: colors.DN30
+        light: "var(--ds-text-disabled, ".concat(colors.N0, ")"),
+        dark: "var(--ds-text-disabled, ".concat(colors.DN30, ")")
       },
-      selected: {
-        light: colors.N0,
-        dark: colors.N0
-      },
-      focus: {
-        light: colors.N0,
-        dark: colors.N0
-      }
+      selected: "var(--ds-text-selected, ".concat(colors.N0, ")"),
+      focus: "var(--ds-text-onBold, ".concat(colors.N0, ")")
     }
   }
 };

package/dist/cjs/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "SpotlightManager", {
     return _components.SpotlightManager;
   }
 });
+Object.defineProperty(exports, "SpotlightPulse", {
+  enumerable: true,
+  get: function get() {
+    return _target.Pulse;
+  }
+});
 Object.defineProperty(exports, "SpotlightTarget", {
   enumerable: true,
   get: function get() {
@@ -57,12 +63,6 @@ Object.defineProperty(exports, "useSpotlight", {
     return _components.useSpotlight;
   }
 });
-Object.defineProperty(exports, "SpotlightPulse", {
-  enumerable: true,
-  get: function get() {
-    return _target.Pulse;
-  }
-});
 
 var _components = require("./components");
 

package/dist/cjs/styled/blanket.js

@@ -22,8 +22,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 var backgroundColor = (0, _components.themed)({
-  light: _colors.N100A,
-  dark: _colors.DN90A
+  light: "var(--ds-background-blanket, ".concat(_colors.N100A, ")"),
+  dark: "var(--ds-background-blanket, ".concat(_colors.DN90A, ")")
 }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
 // to body instead of nearest stacking context (Portal in our case).
 

package/dist/cjs/styled/dialog.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DialogActionItem = exports.DialogActionItemContainer = exports.DialogImage = void 0;
+exports.DialogImage = exports.DialogActionItemContainer = exports.DialogActionItem = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 

package/dist/cjs/styled/modal.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ModalActionItem = exports.ModalActionContainer = exports.ModalImage = exports.ModalHeading = exports.ModalBody = void 0;
+exports.ModalImage = exports.ModalHeading = exports.ModalBody = exports.ModalActionItem = exports.ModalActionContainer = void 0;
 
 var _core = require("@emotion/core");
 

package/dist/cjs/styled/target.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Pulse = exports.TargetOverlay = exports.TargetInner = void 0;
+exports.pulseKeyframesName = exports.TargetOverlay = exports.TargetInner = exports.Pulse = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -25,7 +25,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 // NOTE:
 // Pulse color "rgb(101, 84, 192)" derived from "colors.P300"
-var baseShadow = "0 0 0 2px ".concat(_colors.P300);
+var baseShadow = "var(--ds-overlay, ".concat("0 0 0 2px ".concat(_colors.P300), ")");
 var easing = 'cubic-bezier(0.55, 0.055, 0.675, 0.19)';
 var pulseKeyframes = (0, _core.keyframes)({
   '0%, 33%': {
@@ -34,7 +34,10 @@ var pulseKeyframes = (0, _core.keyframes)({
   '66%, 100%': {
     boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")
   }
-});
+}); // This is needed for unit tests
+
+var pulseKeyframesName = pulseKeyframes.name;
+exports.pulseKeyframesName = pulseKeyframesName;
 var animationStyles = (0, _core.css)({
   animation: "".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite")
 }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
@@ -49,9 +52,11 @@ var Base = function Base(_ref) {
       bgColor = _ref.bgColor,
       radius = _ref.radius,
       style = _ref.style,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["children", "bgColor", "radius", "style"]);
+      testId = _ref.testId,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["children", "bgColor", "radius", "style", "testId"]);
   return (0, _core.jsx)("div", (0, _extends2.default)({
     css: baseStyles,
+    "data-testid": testId,
     style: _objectSpread(_objectSpread({}, style), {}, {
       backgroundColor: bgColor,
       borderRadius: radius ? "".concat(radius, "px") : undefined
@@ -114,9 +119,13 @@ exports.TargetOverlay = TargetOverlay;
 
 var Pulse = function Pulse(_ref3) {
   var children = _ref3.children,
-      props = (0, _objectWithoutProperties2.default)(_ref3, ["children"]);
+      _ref3$pulse = _ref3.pulse,
+      pulse = _ref3$pulse === void 0 ? true : _ref3$pulse,
+      testId = _ref3.testId,
+      props = (0, _objectWithoutProperties2.default)(_ref3, ["children", "pulse", "testId"]);
   return (0, _core.jsx)(Base, (0, _extends2.default)({}, props, {
-    css: animationStyles
+    css: [pulse && animationStyles],
+    testId: testId
   }), children);
 };
 

package/dist/cjs/utils/use-element-box.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ElementBox = exports.useElementBox = void 0;
+exports.useElementBox = exports.ElementBox = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/onboarding",
-	"version": "10.2.5",
+	"version": "10.3.2",
 	"sideEffects": false
 }

package/dist/es2019/components/spotlight-card.js

@@ -41,11 +41,10 @@ class SpotlightCard extends React.Component {
         } = parent({});
         return theme(() => ({ ...others,
           container: {
-            background: P300,
-            color: N0,
+            background: `var(--ds-background-boldDiscovery-resting, ${P300})`,
+            color: `var(--ds-text-onBold, ${N0})`,
             width: `${Math.min(Math.max(width, 160), 600)}px`,
-            boxShadow: isFlat ? undefined : `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`,
-            // AK-5598
+            boxShadow: isFlat ? undefined : `var(--ds-card, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
             ...container
           }
         }), {});

package/dist/es2019/components/spotlight-dialog.js

@@ -7,7 +7,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "10.2.5";
+const packageVersion = "10.3.2";
 
 class SpotlightDialog extends Component {
   constructor(...args) {