@atlaskit/onboarding 10.3.1 → 10.3.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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

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-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.3.1";
+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"));
 

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/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"));
 
@@ -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.3.1",
+	"version": "10.3.2",
 	"sideEffects": false
 }

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.3.1";
+const packageVersion = "10.3.2";
 
 class SpotlightDialog extends Component {
   constructor(...args) {

package/dist/es2019/styled/target.js

@@ -15,7 +15,9 @@ const pulseKeyframes = keyframes({
   '66%, 100%': {
     boxShadow: `${baseShadow}, 0 0 0 10px rgba(101, 84, 192, 0.01)`
   }
-});
+}); // This is needed for unit tests
+
+export const pulseKeyframesName = pulseKeyframes.name;
 const animationStyles = css({
   animation: `${pulseKeyframes} 3000ms ${easing} infinite`
 }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
@@ -30,9 +32,11 @@ const Base = ({
   bgColor,
   radius,
   style,
+  testId,
   ...props
 }) => jsx("div", _extends({
   css: baseStyles,
+  "data-testid": testId,
   style: { ...style,
     backgroundColor: bgColor,
     borderRadius: radius ? `${radius}px` : undefined
@@ -86,7 +90,10 @@ export const TargetOverlay = props => jsx("div", _extends({}, props, {
 
 export const Pulse = ({
   children,
+  pulse = true,
+  testId,
   ...props
 }) => jsx(Base, _extends({}, props, {
-  css: animationStyles
+  css: [pulse && animationStyles],
+  testId: testId
 }), children);

package/dist/es2019/version.json

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

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

@@ -23,7 +23,7 @@ import { DialogImage } from '../styled/dialog';
 import SpotlightCard from './spotlight-card';
 import ValueChanged from './value-changed';
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "10.3.1";
+var packageVersion = "10.3.2";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);

package/dist/esm/styled/target.js

@@ -21,7 +21,9 @@ var pulseKeyframes = keyframes({
   '66%, 100%': {
     boxShadow: "".concat(baseShadow, ", 0 0 0 10px rgba(101, 84, 192, 0.01)")
   }
-});
+}); // This is needed for unit tests
+
+export var pulseKeyframesName = pulseKeyframes.name;
 var animationStyles = css({
   animation: "".concat(pulseKeyframes, " 3000ms ").concat(easing, " infinite")
 }); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
@@ -36,10 +38,12 @@ var Base = function Base(_ref) {
       bgColor = _ref.bgColor,
       radius = _ref.radius,
       style = _ref.style,
-      props = _objectWithoutProperties(_ref, ["children", "bgColor", "radius", "style"]);
+      testId = _ref.testId,
+      props = _objectWithoutProperties(_ref, ["children", "bgColor", "radius", "style", "testId"]);
 
   return jsx("div", _extends({
     css: baseStyles,
+    "data-testid": testId,
     style: _objectSpread(_objectSpread({}, style), {}, {
       backgroundColor: bgColor,
       borderRadius: radius ? "".concat(radius, "px") : undefined
@@ -98,9 +102,13 @@ export var TargetOverlay = function TargetOverlay(props) {
 
 export var Pulse = function Pulse(_ref3) {
   var children = _ref3.children,
-      props = _objectWithoutProperties(_ref3, ["children"]);
+      _ref3$pulse = _ref3.pulse,
+      pulse = _ref3$pulse === void 0 ? true : _ref3$pulse,
+      testId = _ref3.testId,
+      props = _objectWithoutProperties(_ref3, ["children", "pulse", "testId"]);
 
   return jsx(Base, _extends({}, props, {
-    css: animationStyles
+    css: [pulse && animationStyles],
+    testId: testId
   }), children);
 };

package/dist/esm/version.json

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

package/dist/types/components/modal.d.ts

@@ -41,8 +41,8 @@ declare type ModalProps = {
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
  */
 export default class OnboardingModal extends Component<ModalProps> {
-    headerComponent: (props: ModalProps) => "symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "small" | "ruby" | "table" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "template" | import("react").ComponentClass<HeaderComponentProps, any> | import("react").FunctionComponent<HeaderComponentProps> | (() => JSX.Element);
-    footerComponent: (props: ModalProps) => "symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "small" | "ruby" | "table" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "template" | import("react").ComponentClass<FooterComponentProps, any> | import("react").FunctionComponent<FooterComponentProps> | (() => JSX.Element | null);
+    headerComponent: (props: ModalProps) => "symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "small" | "ruby" | "table" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<HeaderComponentProps, any> | import("react").FunctionComponent<HeaderComponentProps> | (() => JSX.Element);
+    footerComponent: (props: ModalProps) => "symbol" | "object" | "clipPath" | "filter" | "mask" | "marker" | "small" | "ruby" | "table" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<FooterComponentProps, any> | import("react").FunctionComponent<FooterComponentProps> | (() => JSX.Element | null);
     render(): JSX.Element;
 }
 export {};

package/dist/types/styled/target.d.ts

@@ -3,10 +3,13 @@ declare type BaseProps = React.HTMLAttributes<HTMLDivElement> & {
     bgColor?: string;
     radius?: number;
     className?: string;
+    testId?: string;
 };
 declare type TargetProps = Omit<BaseProps, 'css'> & {
     pulse?: boolean;
+    testId?: string;
 };
+export declare const pulseKeyframesName: string;
 /**
  * __Target inner__
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.3.1",
+  "version": "10.3.2",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -18,7 +18,6 @@
   "atlassian": {
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Onboarding (spotlight)"