@atlaskit/onboarding 10.8.5 → 10.8.7

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/onboarding
 
+## 10.8.7
+
+### Patch Changes
+
+- [`fd6bb9c9184`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd6bb9c9184) - Delete version.json
+- Updated dependencies
+
+## 10.8.6
+
+### Patch Changes
+
+- [`36e3e86da5d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/36e3e86da5d) - SpotlightCard width prop now accepts either a number or the string `'100%'` and refactors how our range of 160px – 600px works via css `min-width` and `max-width` instead of raw math.
+
 ## 10.8.5
 
 ### Patch Changes

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

@@ -117,7 +117,9 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       container],
       style: {
-        width: "".concat(Math.min(Math.max(width, 160), 600), "px")
+        minWidth: '160px',
+        maxWidth: '600px',
+        width: typeof width === 'string' ? width : "".concat(width, "px")
       },
       ref: ref || innerRef,
       "data-testid": testId

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

@@ -27,7 +27,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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() { 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.8.5";
+var packageVersion = "10.8.7";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/cjs/styled/modal.js

@@ -34,6 +34,8 @@ var modalImageStyles = (0, _react.css)({
   height: 'auto',
   borderTopLeftRadius: "var(--ds-border-radius, 3px)",
   borderTopRightRadius: "var(--ds-border-radius, 3px)",
+  // TODO: Use new breakpoints
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '@media (min-width: 320px) and (max-width: 480px)': {
     borderRadius: 0
   }

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

@@ -101,7 +101,9 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       container],
       style: {
-        width: `${Math.min(Math.max(width, 160), 600)}px`
+        minWidth: '160px',
+        maxWidth: '600px',
+        width: typeof width === 'string' ? width : `${width}px`
       },
       ref: ref || innerRef,
       "data-testid": testId

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

package/dist/es2019/styled/modal.js

@@ -28,6 +28,8 @@ const modalImageStyles = css({
   height: 'auto',
   borderTopLeftRadius: "var(--ds-border-radius, 3px)",
   borderTopRightRadius: "var(--ds-border-radius, 3px)",
+  // TODO: Use new breakpoints
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '@media (min-width: 320px) and (max-width: 480px)': {
     borderRadius: 0
   }

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

@@ -107,7 +107,9 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       container],
       style: {
-        width: "".concat(Math.min(Math.max(width, 160), 600), "px")
+        minWidth: '160px',
+        maxWidth: '600px',
+        width: typeof width === 'string' ? width : "".concat(width, "px")
       },
       ref: ref || innerRef,
       "data-testid": testId

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 = "10.8.5";
+var packageVersion = "10.8.7";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

package/dist/esm/styled/modal.js

@@ -28,6 +28,8 @@ var modalImageStyles = css({
   height: 'auto',
   borderTopLeftRadius: "var(--ds-border-radius, 3px)",
   borderTopRightRadius: "var(--ds-border-radius, 3px)",
+  // TODO: Use new breakpoints
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '@media (min-width: 320px) and (max-width: 480px)': {
     borderRadius: 0
   }

package/dist/types/components/spotlight-card.d.ts

@@ -53,9 +53,12 @@ interface SpotlightCardProps {
      */
     theme?: ThemeProp<CardTokens, {}>;
     /**
-     * Width of the card in pixels.
+     * Specifies the width of the card component. Accepts either a number or the string '100%'.
+     * When a number is provided, the width is set in pixels. When '100%' is provided, the width
+     * is set to occupy 100% of the parent container's width. Regardless of whether `width` is set,
+     * the width is constrained to a minimum width of 160px and a maximum width of 600px.
      */
-    width?: number;
+    width?: number | '100%';
     /**
      * @deprecated
      * Use `ref` instead.

package/dist/types-ts4.5/components/spotlight-card.d.ts

@@ -53,9 +53,12 @@ interface SpotlightCardProps {
      */
     theme?: ThemeProp<CardTokens, {}>;
     /**
-     * Width of the card in pixels.
+     * Specifies the width of the card component. Accepts either a number or the string '100%'.
+     * When a number is provided, the width is set in pixels. When '100%' is provided, the width
+     * is set to occupy 100% of the parent container's width. Regardless of whether `width` is set,
+     * the width is constrained to a minimum width of 160px and a maximum width of 600px.
      */
-    width?: number;
+    width?: number | '100%';
     /**
      * @deprecated
      * Use `ref` instead.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.8.5",
+  "version": "10.8.7",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,14 +34,14 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.8.0",
+    "@atlaskit/button": "^16.9.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/heading": "^1.3.0",
     "@atlaskit/modal-dialog": "^12.6.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.3.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.15.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -58,10 +58,7 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^21.3.0",
-    "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/progress-indicator": "^9.5.0",
+    "@af/accessibility-testing": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",

package/report.api.md

@@ -131,7 +131,7 @@ interface SpotlightCardProps {
   testId?: string;
   // @deprecated (undocumented)
   theme?: ThemeProp<CardTokens, {}>;
-  width?: number;
+  width?: '100%' | number;
 }
 
 // @public

package/tmp/api-report-tmp.d.ts

@@ -101,7 +101,7 @@ interface SpotlightCardProps {
     testId?: string;
     // @deprecated (undocumented)
     theme?: ThemeProp<CardTokens, {}>;
-    width?: number;
+    width?: '100%' | number;
 }
 
 // @public

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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