@atlaskit/onboarding 10.8.11 → 10.8.12

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/onboarding
 
+## 10.8.12
+
+### Patch Changes
+
+- [#43073](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43073) [`2d760e89b53`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d760e89b53) - headingId is the id of heading in spotlightCard, which is used as the value of aria-labelledby attribute of <div> element containing the modal dialog heading for screen reader recognising the dialog
+
 ## 10.8.11
 
 ### Patch Changes

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

@@ -30,9 +30,9 @@ var imageStyles = (0, _react2.css)({
 });
 var defaultHeaderStyles = (0, _react2.css)({
   display: 'flex',
-  paddingBottom: "var(--ds-space-100, 8px)",
   alignItems: 'baseline',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockEnd: "var(--ds-space-100, 8px)"
 });
 var DefaultHeader = function DefaultHeader(_ref) {
   var children = _ref.children;
@@ -42,9 +42,9 @@ var DefaultHeader = function DefaultHeader(_ref) {
 };
 var defaultFooterStyles = (0, _react2.css)({
   display: 'flex',
-  paddingTop: "var(--ds-space-100, 8px)",
   alignItems: 'center',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockStart: "var(--ds-space-100, 8px)"
 });
 var DefaultFooter = function DefaultFooter(_ref2) {
   var children = _ref2.children;
@@ -101,7 +101,8 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     testId = props.testId,
     theme = props.theme,
     _props$width = props.width,
-    width = _props$width === void 0 ? 400 : _props$width;
+    width = _props$width === void 0 ? 400 : _props$width,
+    headingId = props.headingId;
   var _components$Header = components.Header,
     Header = _components$Header === void 0 ? DefaultHeader : _components$Header,
     _components$Footer = components.Footer,
@@ -130,6 +131,7 @@ var SpotlightCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }) : image, (0, _react2.jsx)("div", {
       css: bodyStyles
     }, heading || headingAfterElement ? (0, _react2.jsx)(Header, null, (0, _react2.jsx)(_heading.default, {
+      id: headingId,
       color: "inverse",
       level: "h600",
       as: "h4"

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 = "10.8.11";
+var packageVersion = "10.8.12";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(SpotlightDialog, _Component);
   var _super = _createSuper(SpotlightDialog);

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

@@ -18,9 +18,9 @@ const imageStyles = css({
 });
 const defaultHeaderStyles = css({
   display: 'flex',
-  paddingBottom: "var(--ds-space-100, 8px)",
   alignItems: 'baseline',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockEnd: "var(--ds-space-100, 8px)"
 });
 const DefaultHeader = ({
   children
@@ -29,9 +29,9 @@ const DefaultHeader = ({
 }, children);
 const defaultFooterStyles = css({
   display: 'flex',
-  paddingTop: "var(--ds-space-100, 8px)",
   alignItems: 'center',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockStart: "var(--ds-space-100, 8px)"
 });
 const DefaultFooter = ({
   children
@@ -83,7 +83,8 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
     isFlat,
     testId,
     theme,
-    width = 400
+    width = 400,
+    headingId
   } = props;
   const {
     Header = DefaultHeader,
@@ -114,6 +115,7 @@ const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
     }) : image, jsx("div", {
       css: bodyStyles
     }, heading || headingAfterElement ? jsx(Header, null, jsx(Heading, {
+      id: headingId,
       color: "inverse",
       level: "h600",
       as: "h4"

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

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

@@ -20,9 +20,9 @@ var imageStyles = css({
 });
 var defaultHeaderStyles = css({
   display: 'flex',
-  paddingBottom: "var(--ds-space-100, 8px)",
   alignItems: 'baseline',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockEnd: "var(--ds-space-100, 8px)"
 });
 var DefaultHeader = function DefaultHeader(_ref) {
   var children = _ref.children;
@@ -32,9 +32,9 @@ var DefaultHeader = function DefaultHeader(_ref) {
 };
 var defaultFooterStyles = css({
   display: 'flex',
-  paddingTop: "var(--ds-space-100, 8px)",
   alignItems: 'center',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockStart: "var(--ds-space-100, 8px)"
 });
 var DefaultFooter = function DefaultFooter(_ref2) {
   var children = _ref2.children;
@@ -91,7 +91,8 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
     testId = props.testId,
     theme = props.theme,
     _props$width = props.width,
-    width = _props$width === void 0 ? 400 : _props$width;
+    width = _props$width === void 0 ? 400 : _props$width,
+    headingId = props.headingId;
   var _components$Header = components.Header,
     Header = _components$Header === void 0 ? DefaultHeader : _components$Header,
     _components$Footer = components.Footer,
@@ -120,6 +121,7 @@ var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
     }) : image, jsx("div", {
       css: bodyStyles
     }, heading || headingAfterElement ? jsx(Header, null, jsx(Heading, {
+      id: headingId,
       color: "inverse",
       level: "h600",
       as: "h4"

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

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

@@ -70,6 +70,10 @@ interface SpotlightCardProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * The id of heading
+     */
+    headingId?: string;
 }
 /**
  * __Spotlight card__

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

@@ -70,6 +70,10 @@ interface SpotlightCardProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * The id of heading
+     */
+    headingId?: string;
 }
 /**
  * __Spotlight card__

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/onboarding",
-  "version": "10.8.11",
+  "version": "10.8.12",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,12 +34,12 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.10.0",
+    "@atlaskit/button": "^16.15.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/heading": "^1.4.0",
     "@atlaskit/modal-dialog": "^12.8.0",
     "@atlaskit/popper": "^5.5.0",
-    "@atlaskit/portal": "^4.3.0",
+    "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
@@ -67,6 +67,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/exenv": "^1.2.0",
     "@types/react-node-resolver": "^2.0.0",
+    "@types/react-transition-group": "^2.0.6",
     "raf-stub": "^2.0.1",
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",

package/report.api.md

@@ -124,6 +124,7 @@ interface SpotlightCardProps {
   };
   heading?: ReactNode;
   headingAfterElement?: ReactNode;
+  headingId?: string;
   image?: ReactNode | string;
   // @deprecated (undocumented)
   innerRef?: Ref<HTMLDivElement> | null;

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

@@ -94,6 +94,7 @@ interface SpotlightCardProps {
     };
     heading?: ReactNode;
     headingAfterElement?: ReactNode;
+    headingId?: string;
     image?: ReactNode | string;
     // @deprecated (undocumented)
     innerRef?: Ref<HTMLDivElement> | null;