@atlaskit/onboarding 10.6.0 → 10.6.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/onboarding
 
+## 10.6.1
+
+### Patch Changes
+
+- [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
+
 ## 10.6.0
 
 ### Minor Changes

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

@@ -35,15 +35,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var gridSize = (0, _constants.gridSize)();
 var bodyStyles = (0, _react2.css)({
   display: 'flex',
-  padding: "".concat(gridSize * 2, "px ").concat(gridSize * 2.5, "px"),
+  padding: "var(--ds-scale-200, 16px)".concat(" ", "var(--ds-scale-250, 20px)"),
   flexDirection: 'column'
 });
 var defaultHeaderStyles = (0, _react2.css)({
   display: 'flex',
-  paddingBottom: "".concat(gridSize, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  paddingBottom: "var(--ds-scale-100, 8px)",
   alignItems: 'baseline',
   justifyContent: 'space-between'
 });
@@ -57,7 +57,8 @@ var DefaultHeader = function DefaultHeader(_ref) {
 
 var defaultFooterStyles = (0, _react2.css)({
   display: 'flex',
-  paddingTop: "".concat(gridSize, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  paddingTop: "var(--ds-scale-100, 8px)",
   alignItems: 'center',
   justifyContent: 'space-between'
 });

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

@@ -50,7 +50,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.6.0";
+var packageVersion = "10.6.1";
 
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);

package/dist/cjs/styled/dialog.js

@@ -13,24 +13,21 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = require("@emotion/react");
 
-var _constants = require("@atlaskit/theme/constants");
-
 var _excluded = ["alt"];
-var gridSize = (0, _constants.gridSize)();
 var imageStyles = (0, _react.css)({
   maxWidth: '100%',
   height: 'auto'
 });
 var actionItemContainerStyles = (0, _react.css)({
   display: 'flex',
-  margin: "0 -".concat(gridSize / 2, "px"),
+  margin: "var(--ds-scale-0, 0px)".concat(" -4px"),
 
   /* When there is more than one action, place primary action visually on the
   right, but keep it's position as the first focusable element in the DOM */
   flexDirection: 'row-reverse'
 });
 var actionItemStyles = (0, _react.css)({
-  margin: "0 ".concat(gridSize / 2, "px")
+  margin: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)")
 });
 /**
  * __Dialog image__

package/dist/cjs/styled/modal.js

@@ -14,9 +14,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _typography = require("@atlaskit/theme/typography");
 
 /** @jsx jsx */
-var gridSize = (0, _constants.gridSize)();
-var borderRadius = (0, _constants.borderRadius)();
-var actionItemBottomMargin = gridSize / 2; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var borderRadius = (0, _constants.borderRadius)(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
 var lightH600Styles = (0, _react.css)((0, _typography.h600)({
   theme: {
@@ -30,12 +28,13 @@ var darkH600Styles = (0, _react.css)((0, _typography.h600)({
   }
 }));
 var modalBodyStyles = (0, _react.css)({
-  padding: '40px 20px',
+  padding: "var(--ds-scale-500, 40px)".concat(" ", "var(--ds-scale-250, 20px)"),
   textAlign: 'center'
 }); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
 var modalHeadingStyles = (0, _react.css)({
-  marginBottom: "".concat(gridSize, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  marginBottom: "var(--ds-scale-100, 8px)",
   color: 'inherit'
 });
 var modalImageStyles = (0, _react.css)({
@@ -49,7 +48,7 @@ var modalImageStyles = (0, _react.css)({
 });
 var modalActionContainerStyles = (0, _react.css)({
   display: 'flex',
-  padding: "0 40px ".concat(40 - actionItemBottomMargin, "px"),
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-500, 40px)", " 36px"),
   justifyContent: 'center',
   flexDirection: 'row',
   flexFlow: 'wrap'
@@ -58,7 +57,7 @@ var modalActionContainerReversedStyles = (0, _react.css)({
   flexDirection: 'row-reverse'
 });
 var modalActionItemStyles = (0, _react.css)({
-  margin: "0 ".concat(gridSize / 2, "px ").concat(actionItemBottomMargin, "px")
+  margin: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)", " ", "var(--ds-scale-050, 4px)")
 });
 /**
  * __Modal body__

package/dist/cjs/version.json

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

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

@@ -5,18 +5,18 @@ import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-butt
 import Heading from '@atlaskit/heading';
 import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
 import { createTheme } from '@atlaskit/theme/components';
-import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
+import { borderRadius, layers } from '@atlaskit/theme/constants';
 import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
-const gridSize = getGridSize();
 const bodyStyles = css({
   display: 'flex',
-  padding: `${gridSize * 2}px ${gridSize * 2.5}px`,
+  padding: `${"var(--ds-scale-200, 16px)"} ${"var(--ds-scale-250, 20px)"}`,
   flexDirection: 'column'
 });
 const defaultHeaderStyles = css({
   display: 'flex',
-  paddingBottom: `${gridSize}px`,
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  paddingBottom: "var(--ds-scale-100, 8px)",
   alignItems: 'baseline',
   justifyContent: 'space-between'
 });
@@ -29,7 +29,8 @@ const DefaultHeader = ({
 
 const defaultFooterStyles = css({
   display: 'flex',
-  paddingTop: `${gridSize}px`,
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  paddingTop: "var(--ds-scale-100, 8px)",
   alignItems: 'center',
   justifyContent: 'space-between'
 });

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

package/dist/es2019/styled/dialog.js

@@ -2,22 +2,20 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-const gridSize = getGridSize();
 const imageStyles = css({
   maxWidth: '100%',
   height: 'auto'
 });
 const actionItemContainerStyles = css({
   display: 'flex',
-  margin: `0 -${gridSize / 2}px`,
+  margin: `${"var(--ds-scale-0, 0px)"} -4px`,
 
   /* When there is more than one action, place primary action visually on the
   right, but keep it's position as the first focusable element in the DOM */
   flexDirection: 'row-reverse'
 });
 const actionItemStyles = css({
-  margin: `0 ${gridSize / 2}px`
+  margin: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"}`
 });
 /**
  * __Dialog image__

package/dist/es2019/styled/modal.js

@@ -1,11 +1,9 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { borderRadius as getBorderRadius } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';
-const gridSize = getGridSize();
-const borderRadius = getBorderRadius();
-const actionItemBottomMargin = gridSize / 2; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+const borderRadius = getBorderRadius(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
 const lightH600Styles = css(h600({
   theme: {
@@ -19,12 +17,13 @@ const darkH600Styles = css(h600({
   }
 }));
 const modalBodyStyles = css({
-  padding: '40px 20px',
+  padding: `${"var(--ds-scale-500, 40px)"} ${"var(--ds-scale-250, 20px)"}`,
   textAlign: 'center'
 }); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
 const modalHeadingStyles = css({
-  marginBottom: `${gridSize}px`,
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  marginBottom: "var(--ds-scale-100, 8px)",
   color: 'inherit'
 });
 const modalImageStyles = css({
@@ -38,7 +37,7 @@ const modalImageStyles = css({
 });
 const modalActionContainerStyles = css({
   display: 'flex',
-  padding: `0 40px ${40 - actionItemBottomMargin}px`,
+  padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-500, 40px)"} 36px`,
   justifyContent: 'center',
   flexDirection: 'row',
   flexFlow: 'wrap'
@@ -47,7 +46,7 @@ const modalActionContainerReversedStyles = css({
   flexDirection: 'row-reverse'
 });
 const modalActionItemStyles = css({
-  margin: `0 ${gridSize / 2}px ${actionItemBottomMargin}px`
+  margin: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"} ${"var(--ds-scale-050, 4px)"}`
 });
 /**
  * __Modal body__

package/dist/es2019/version.json

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

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

@@ -8,18 +8,18 @@ import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-butt
 import Heading from '@atlaskit/heading';
 import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
 import { createTheme } from '@atlaskit/theme/components';
-import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
+import { borderRadius, layers } from '@atlaskit/theme/constants';
 import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
 import { spotlightButtonTheme } from './theme';
-var gridSize = getGridSize();
 var bodyStyles = css({
   display: 'flex',
-  padding: "".concat(gridSize * 2, "px ").concat(gridSize * 2.5, "px"),
+  padding: "var(--ds-scale-200, 16px)".concat(" ", "var(--ds-scale-250, 20px)"),
   flexDirection: 'column'
 });
 var defaultHeaderStyles = css({
   display: 'flex',
-  paddingBottom: "".concat(gridSize, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  paddingBottom: "var(--ds-scale-100, 8px)",
   alignItems: 'baseline',
   justifyContent: 'space-between'
 });
@@ -33,7 +33,8 @@ var DefaultHeader = function DefaultHeader(_ref) {
 
 var defaultFooterStyles = css({
   display: 'flex',
-  paddingTop: "".concat(gridSize, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  paddingTop: "var(--ds-scale-100, 8px)",
   alignItems: 'center',
   justifyContent: 'space-between'
 });

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

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

package/dist/esm/styled/dialog.js

@@ -4,22 +4,20 @@ var _excluded = ["alt"];
 
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
-var gridSize = getGridSize();
 var imageStyles = css({
   maxWidth: '100%',
   height: 'auto'
 });
 var actionItemContainerStyles = css({
   display: 'flex',
-  margin: "0 -".concat(gridSize / 2, "px"),
+  margin: "var(--ds-scale-0, 0px)".concat(" -4px"),
 
   /* When there is more than one action, place primary action visually on the
   right, but keep it's position as the first focusable element in the DOM */
   flexDirection: 'row-reverse'
 });
 var actionItemStyles = css({
-  margin: "0 ".concat(gridSize / 2, "px")
+  margin: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)")
 });
 /**
  * __Dialog image__

package/dist/esm/styled/modal.js

@@ -1,11 +1,9 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
-import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { borderRadius as getBorderRadius } from '@atlaskit/theme/constants';
 import { h600 } from '@atlaskit/theme/typography';
-var gridSize = getGridSize();
-var borderRadius = getBorderRadius();
-var actionItemBottomMargin = gridSize / 2; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+var borderRadius = getBorderRadius(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
 var lightH600Styles = css(h600({
   theme: {
@@ -19,12 +17,13 @@ var darkH600Styles = css(h600({
   }
 }));
 var modalBodyStyles = css({
-  padding: '40px 20px',
+  padding: "var(--ds-scale-500, 40px)".concat(" ", "var(--ds-scale-250, 20px)"),
   textAlign: 'center'
 }); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
 
 var modalHeadingStyles = css({
-  marginBottom: "".concat(gridSize, "px"),
+  // TODO Delete this comment after verifying spacing token -> previous value ``${gridSize}px``
+  marginBottom: "var(--ds-scale-100, 8px)",
   color: 'inherit'
 });
 var modalImageStyles = css({
@@ -38,7 +37,7 @@ var modalImageStyles = css({
 });
 var modalActionContainerStyles = css({
   display: 'flex',
-  padding: "0 40px ".concat(40 - actionItemBottomMargin, "px"),
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-500, 40px)", " 36px"),
   justifyContent: 'center',
   flexDirection: 'row',
   flexFlow: 'wrap'
@@ -47,7 +46,7 @@ var modalActionContainerReversedStyles = css({
   flexDirection: 'row-reverse'
 });
 var modalActionItemStyles = css({
-  margin: "0 ".concat(gridSize / 2, "px ").concat(actionItemBottomMargin, "px")
+  margin: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)", " ", "var(--ds-scale-050, 4px)")
 });
 /**
  * __Modal body__

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.6.0",
+  "version": "10.6.1",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,8 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
@@ -23,6 +24,7 @@
   "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/onboarding/",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
@@ -80,6 +82,7 @@
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "styling": [
         "static",