@atlaskit/onboarding 11.1.3 → 11.2.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/onboarding
 
+## 11.2.1
+
+### Patch Changes
+
+- [#67032](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67032) [`038e62a39d23`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/038e62a39d23) - [ux] Ensure spotlight dialog always uses heading level 2. This will eventually become heading level 1 once the dialog becomes a true modal.
+
+## 11.2.0
+
+### Minor Changes
+
+- [#64059](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/64059) [`d69cb4f14309`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d69cb4f14309) - [ux] Adds `headingLevel` to the SpotlightCard component. This will allow the usage of the correct heading level depending on context.
+
 ## 11.1.3
 
 ### Patch Changes

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

@@ -79,6 +79,8 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _props$components = props.components,
     components = _props$components === void 0 ? {} : _props$components,
     heading = props.heading,
+    _props$headingLevel = props.headingLevel,
+    headingLevel = _props$headingLevel === void 0 ? 4 : _props$headingLevel,
     headingAfterElement = props.headingAfterElement,
     image = props.image,
     innerRef = props.innerRef,
@@ -112,7 +114,7 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     id: headingId,
     color: "inverse",
     level: "h600",
-    as: "h4"
+    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) {
     var text = _ref3.text,
       key = _ref3.key,

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() { 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 = "11.1.3";
+var packageVersion = "11.2.1";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);
@@ -138,6 +138,10 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           },
           heading: heading,
           headingAfterElement: headingAfterElement
+          // This should be heading level 1 since this is technically a modal, including a focus lock on the modal window.
+          // But because it is not a _true_ modal, we are setting it to `2` until that is fixed.
+          ,
+          headingLevel: 2
         }, children))));
       });
     }

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

@@ -64,6 +64,7 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     components = {},
     heading,
+    headingLevel = 4,
     headingAfterElement,
     image,
     innerRef,
@@ -97,7 +98,7 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
     id: headingId,
     color: "inverse",
     level: "h600",
-    as: "h4"
+    as: `h${headingLevel}`
   }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(({
     text,
     key,

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.1.3";
+const packageVersion = "11.2.1";
 class SpotlightDialog extends Component {
   constructor(...args) {
     super(...args);
@@ -109,6 +109,10 @@ class SpotlightDialog extends Component {
       },
       heading: heading,
       headingAfterElement: headingAfterElement
+      // This should be heading level 1 since this is technically a modal, including a focus lock on the modal window.
+      // But because it is not a _true_ modal, we are setting it to `2` until that is fixed.
+      ,
+      headingLevel: 2
     }, children)))));
   }
 }

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

@@ -69,6 +69,8 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
     _props$components = props.components,
     components = _props$components === void 0 ? {} : _props$components,
     heading = props.heading,
+    _props$headingLevel = props.headingLevel,
+    headingLevel = _props$headingLevel === void 0 ? 4 : _props$headingLevel,
     headingAfterElement = props.headingAfterElement,
     image = props.image,
     innerRef = props.innerRef,
@@ -102,7 +104,7 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
     id: headingId,
     color: "inverse",
     level: "h600",
-    as: "h4"
+    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) {
     var text = _ref3.text,
       key = _ref3.key,

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.1.3";
+var packageVersion = "11.2.1";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   _inherits(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);
@@ -128,6 +128,10 @@ var SpotlightDialog = /*#__PURE__*/function (_Component) {
           },
           heading: heading,
           headingAfterElement: headingAfterElement
+          // This should be heading level 1 since this is technically a modal, including a focus lock on the modal window.
+          // But because it is not a _true_ modal, we are setting it to `2` until that is fixed.
+          ,
+          headingLevel: 2
         }, children))));
       });
     }

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

@@ -25,6 +25,11 @@ interface SpotlightCardProps {
      * The heading to be rendered above the body
      */
     heading?: ReactNode;
+    /**
+     * Specifies the heading level in the document structure.
+     * If not specified, level 4 will be applied by default.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /**
      * An optional element rendered to the right of the heading
      */

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

@@ -25,6 +25,11 @@ interface SpotlightCardProps {
      * The heading to be rendered above the body
      */
     heading?: ReactNode;
+    /**
+     * Specifies the heading level in the document structure.
+     * If not specified, level 4 will be applied by default.
+     */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /**
      * An optional element rendered to the right of the heading
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "11.1.3",
+  "version": "11.2.1",
   "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": "^17.0.0",
+    "@atlaskit/button": "^17.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/heading": "^1.4.0",
     "@atlaskit/modal-dialog": "^12.10.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.30.0",
+    "@atlaskit/tokens": "^1.33.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -63,7 +63,6 @@
     "@af/visual-regression": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",