@atlaskit/onboarding 11.3.2 → 11.5.0

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

@@ -11,8 +11,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _customThemeButton = _interopRequireWildcard(require("@atlaskit/button/custom-theme-button"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
+var _primitives = require("@atlaskit/primitives");
 var _dialog = require("../styled/dialog");
 var _theme = require("./theme");
 var _excluded = ["text", "key"];
@@ -51,16 +50,17 @@ var DefaultFooter = function DefaultFooter(_ref2) {
     css: defaultFooterStyles
   }, children);
 };
-var containerStyles = (0, _react2.css)({
+var containerStyles = (0, _primitives.xcss)({
   height: 'fit-content',
-  zIndex: _constants.layers.spotlight() + 1,
-  background: "var(--ds-background-discovery-bold, ".concat(_colors.P300, ")"),
-  borderRadius: "var(--ds-border-radius, 3px)",
-  color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-  overflow: 'auto'
+  zIndex: 'spotlight',
+  borderRadius: 'border.radius',
+  color: 'color.text.inverse',
+  overflow: 'auto',
+  minWidth: '160px',
+  maxWidth: '600px'
 });
-var containerShadowStyles = (0, _react2.css)({
-  boxShadow: "var(--ds-shadow-raised, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
+var containerShadowStyles = (0, _primitives.xcss)({
+  boxShadow: 'elevation.shadow.raised'
 });
 /**
  * __Spotlight card__
@@ -95,15 +95,14 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     Footer = _components$Footer === void 0 ? DefaultFooter : _components$Footer;
   return (0, _react2.jsx)(_customThemeButton.Theme.Provider, {
     value: _theme.spotlightButtonTheme
-  }, (0, _react2.jsx)("div", {
-    css: [containerStyles, !isFlat && containerShadowStyles],
+  }, (0, _react2.jsx)(_primitives.Box, {
+    backgroundColor: "color.background.discovery.bold",
+    xcss: [containerStyles, !isFlat && containerShadowStyles],
     style: {
-      minWidth: '160px',
-      maxWidth: '600px',
-      width: typeof width === 'string' ? width : "".concat(width, "px")
+      width: width
     },
     ref: ref || innerRef,
-    "data-testid": testId
+    testId: testId
   }, typeof image === 'string' ? (0, _react2.jsx)("img", {
     css: imageStyles,
     src: image,
@@ -113,9 +112,9 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, heading || headingAfterElement ? (0, _react2.jsx)(Header, null, (0, _react2.jsx)(_heading.default, {
     id: headingId,
     color: "inverse",
-    level: "h600",
+    size: "medium",
     as: "h".concat(headingLevel)
-  }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? (0, _react2.jsx)(Footer, null, actionsBeforeElement || (0, _react2.jsx)("span", null), (0, _react2.jsx)(_dialog.DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
+  }, heading), headingAfterElement) : null, (0, _react2.jsx)(_primitives.Text, null, children), actions.length > 0 || actionsBeforeElement ? (0, _react2.jsx)(Footer, null, actionsBeforeElement || (0, _react2.jsx)("span", null), (0, _react2.jsx)(_dialog.DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
     var text = _ref3.text,
       key = _ref3.key,
       rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);

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

@@ -27,7 +27,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.3.2";
+var packageVersion = "11.5.0";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/cjs/components/theme.js

@@ -19,12 +19,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var spotlightTheme = {
   default: {
     background: {
-      default: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")"),
+      default: "var(--ds-background-inverse-subtle, ".concat(colors.P500, ")"),
       hover: "var(--ds-background-inverse-subtle-hovered, ".concat(colors.P200, ")"),
       active: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.P500, ")"),
       disabled: "var(--ds-background-disabled, ".concat(colors.P400, ")"),
       selected: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.R500, ")"),
-      focus: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")")
+      focus: "var(--ds-background-inverse-subtle, ".concat(colors.P500, ")")
     },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),

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

@@ -3,8 +3,7 @@ import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Heading from '@atlaskit/heading';
-import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
+import { Box, Text, xcss } from '@atlaskit/primitives';
 import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
 const bodyStyles = css({
@@ -37,16 +36,17 @@ const DefaultFooter = ({
 }) => jsx("div", {
   css: defaultFooterStyles
 }, children);
-const containerStyles = css({
+const containerStyles = xcss({
   height: 'fit-content',
-  zIndex: layers.spotlight() + 1,
-  background: `var(--ds-background-discovery-bold, ${P300})`,
-  borderRadius: "var(--ds-border-radius, 3px)",
-  color: `var(--ds-text-inverse, ${N0})`,
-  overflow: 'auto'
+  zIndex: 'spotlight',
+  borderRadius: 'border.radius',
+  color: 'color.text.inverse',
+  overflow: 'auto',
+  minWidth: '160px',
+  maxWidth: '600px'
 });
-const containerShadowStyles = css({
-  boxShadow: `var(--ds-shadow-raised, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`
+const containerShadowStyles = xcss({
+  boxShadow: 'elevation.shadow.raised'
 });
 /**
  * __Spotlight card__
@@ -79,15 +79,14 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
   } = components;
   return jsx(ButtonTheme.Provider, {
     value: spotlightButtonTheme
-  }, jsx("div", {
-    css: [containerStyles, !isFlat && containerShadowStyles],
+  }, jsx(Box, {
+    backgroundColor: "color.background.discovery.bold",
+    xcss: [containerStyles, !isFlat && containerShadowStyles],
     style: {
-      minWidth: '160px',
-      maxWidth: '600px',
-      width: typeof width === 'string' ? width : `${width}px`
+      width
     },
     ref: ref || innerRef,
-    "data-testid": testId
+    testId: testId
   }, typeof image === 'string' ? jsx("img", {
     css: imageStyles,
     src: image,
@@ -97,9 +96,9 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
   }, heading || headingAfterElement ? jsx(Header, null, jsx(Heading, {
     id: headingId,
     color: "inverse",
-    level: "h600",
+    size: "medium",
     as: `h${headingLevel}`
-  }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(({
+  }, heading), headingAfterElement) : null, jsx(Text, null, children), actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(({
     text,
     key,
     ...rest

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

package/dist/es2019/components/theme.js

@@ -2,12 +2,12 @@ import * as colors from '@atlaskit/theme/colors';
 const spotlightTheme = {
   default: {
     background: {
-      default: `var(--ds-background-inverse-subtle, ${colors.P400})`,
+      default: `var(--ds-background-inverse-subtle, ${colors.P500})`,
       hover: `var(--ds-background-inverse-subtle-hovered, ${colors.P200})`,
       active: `var(--ds-background-inverse-subtle-pressed, ${colors.P500})`,
       disabled: `var(--ds-background-disabled, ${colors.P400})`,
       selected: `var(--ds-background-inverse-subtle-pressed, ${colors.R500})`,
-      focus: `var(--ds-background-inverse-subtle, ${colors.P400})`
+      focus: `var(--ds-background-inverse-subtle, ${colors.P500})`
     },
     color: {
       default: `var(--ds-text-inverse, ${colors.N0})`,

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

@@ -5,8 +5,7 @@ import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import Heading from '@atlaskit/heading';
-import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
+import { Box, Text, xcss } from '@atlaskit/primitives';
 import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
 var bodyStyles = css({
@@ -41,16 +40,17 @@ var DefaultFooter = function DefaultFooter(_ref2) {
     css: defaultFooterStyles
   }, children);
 };
-var containerStyles = css({
+var containerStyles = xcss({
   height: 'fit-content',
-  zIndex: layers.spotlight() + 1,
-  background: "var(--ds-background-discovery-bold, ".concat(P300, ")"),
-  borderRadius: "var(--ds-border-radius, 3px)",
-  color: "var(--ds-text-inverse, ".concat(N0, ")"),
-  overflow: 'auto'
+  zIndex: 'spotlight',
+  borderRadius: 'border.radius',
+  color: 'color.text.inverse',
+  overflow: 'auto',
+  minWidth: '160px',
+  maxWidth: '600px'
 });
-var containerShadowStyles = css({
-  boxShadow: "var(--ds-shadow-raised, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
+var containerShadowStyles = xcss({
+  boxShadow: 'elevation.shadow.raised'
 });
 /**
  * __Spotlight card__
@@ -85,15 +85,14 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
     Footer = _components$Footer === void 0 ? DefaultFooter : _components$Footer;
   return jsx(ButtonTheme.Provider, {
     value: spotlightButtonTheme
-  }, jsx("div", {
-    css: [containerStyles, !isFlat && containerShadowStyles],
+  }, jsx(Box, {
+    backgroundColor: "color.background.discovery.bold",
+    xcss: [containerStyles, !isFlat && containerShadowStyles],
     style: {
-      minWidth: '160px',
-      maxWidth: '600px',
-      width: typeof width === 'string' ? width : "".concat(width, "px")
+      width: width
     },
     ref: ref || innerRef,
-    "data-testid": testId
+    testId: testId
   }, typeof image === 'string' ? jsx("img", {
     css: imageStyles,
     src: image,
@@ -103,9 +102,9 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
   }, heading || headingAfterElement ? jsx(Header, null, jsx(Heading, {
     id: headingId,
     color: "inverse",
-    level: "h600",
+    size: "medium",
     as: "h".concat(headingLevel)
-  }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
+  }, heading), headingAfterElement) : null, jsx(Text, null, children), actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
     var text = _ref3.text,
       key = _ref3.key,
       rest = _objectWithoutProperties(_ref3, _excluded);

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

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

package/dist/esm/components/theme.js

@@ -9,12 +9,12 @@ import * as colors from '@atlaskit/theme/colors';
 var spotlightTheme = {
   default: {
     background: {
-      default: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")"),
+      default: "var(--ds-background-inverse-subtle, ".concat(colors.P500, ")"),
       hover: "var(--ds-background-inverse-subtle-hovered, ".concat(colors.P200, ")"),
       active: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.P500, ")"),
       disabled: "var(--ds-background-disabled, ".concat(colors.P400, ")"),
       selected: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.R500, ")"),
-      focus: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")")
+      focus: "var(--ds-background-inverse-subtle, ".concat(colors.P500, ")")
     },
     color: {
       default: "var(--ds-text-inverse, ".concat(colors.N0, ")"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "11.3.2",
+  "version": "11.5.0",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -36,19 +36,21 @@
     "website": {
       "name": "Onboarding (spotlight)",
       "category": "Components"
-    }
+    },
+    "runReact18": true
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/button": "^17.14.0",
     "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/heading": "^2.2.0",
-    "@atlaskit/modal-dialog": "^12.11.0",
+    "@atlaskit/modal-dialog": "^12.13.0",
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
+    "@atlaskit/primitives": "^5.7.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tokens": "^1.44.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^3.0.0",
@@ -61,7 +63,7 @@
     "scroll-into-view-if-needed": "^2.2.20"
   },
   "peerDependencies": {
-    "react": "^16.8.0",
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0",
     "react-dom": "^16.8.0"
   },
   "devDependencies": {