@atlaskit/onboarding 10.4.2 → 10.5.2

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

@@ -1,72 +1,129 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
-import { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
+/** @jsx jsx */
+import React, { forwardRef } from 'react';
+import { css, jsx } from '@emotion/core';
+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 Card from './card';
+import { createTheme } from '@atlaskit/theme/components';
+import { borderRadius, gridSize as getGridSize, 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`,
+  flexDirection: 'column'
+});
+const defaultHeaderStyles = css({
+  display: 'flex',
+  paddingBottom: `${gridSize}px`,
+  alignItems: 'baseline',
+  justifyContent: 'space-between'
+});
+
+const DefaultHeader = ({
+  children
+}) => jsx("div", {
+  css: defaultHeaderStyles
+}, children);
+
+const defaultFooterStyles = css({
+  display: 'flex',
+  paddingTop: `${gridSize}px`,
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
 
-class SpotlightCard extends React.Component {
-  render() {
-    const {
-      actions,
-      actionsBeforeElement,
-      children,
-      components,
-      isFlat,
-      heading,
-      headingAfterElement,
-      image,
-      innerRef,
-      theme,
-      width,
-      testId
-    } = this.props;
-    return /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
-      value: spotlightButtonTheme
-    }, /*#__PURE__*/React.createElement(Card, {
-      testId: testId,
-      ref: innerRef,
-      heading: heading,
-      headingAfterElement: headingAfterElement,
-      actions: actions,
-      actionsBeforeElement: actionsBeforeElement,
-      components: components,
-      image: image // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-      ,
-      theme: parent => {
-        const {
-          container,
-          ...others
-        } = parent({});
-        return theme(() => ({ ...others,
-          container: {
-            background: `var(--ds-background-discovery-bold, ${P300})`,
-            color: `var(--ds-text-inverse, ${N0})`,
-            width: `${Math.min(Math.max(width, 160), 600)}px`,
-            boxShadow: isFlat ? undefined : `var(--ds-shadow-raised, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
-            ...container
-          }
-        }), {});
-      }
-    }, children));
-  }
+const DefaultFooter = ({
+  children
+}) => jsx("div", {
+  css: defaultFooterStyles
+}, children);
 
-}
+const containerStyles = css({
+  height: 'fit-content',
+  zIndex: layers.spotlight() + 1,
+  background: `var(--ds-background-discovery-bold, ${P300})`,
+  borderRadius: `${borderRadius()}px`,
+  color: `var(--ds-text-inverse, ${N0})`,
+  overflow: 'auto'
+});
+const containerShadowStyles = css({
+  boxShadow: `var(--ds-shadow-raised, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`
+});
 /**
- * __Spotlight card__
- *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * @deprecated
  */
 
+const Theme = createTheme(() => ({
+  container: {}
+}));
+/**
+ * @deprecated
+ */
 
-_defineProperty(SpotlightCard, "defaultProps", {
-  width: 400,
-  isFlat: false,
-  components: {},
-  theme: themeFn => themeFn()
+/**
+ * __Spotlight card__
+ *
+ * A spotlight card is for onboarding messages that need a more flexible layout, or don't require a dialog.
+ *
+ * - [Examples](https://atlassian.design/components/onboarding/spotlight-card/examples)
+ * - [Code](https://atlassian.design/components/onboarding/spotlight-card/code)
+ * - [Usage](https://atlassian.design/components/onboarding/spotlight-card/usage)
+ */
+const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    actions = [],
+    actionsBeforeElement,
+    children,
+    components = {},
+    heading,
+    headingAfterElement,
+    image,
+    innerRef,
+    isFlat,
+    testId,
+    theme,
+    width = 400
+  } = props;
+  const {
+    Header = DefaultHeader,
+    Footer = DefaultFooter
+  } = components;
+  return jsx(ButtonTheme.Provider, {
+    value: spotlightButtonTheme
+  }, jsx(Theme.Provider, {
+    value: theme
+  }, jsx(Theme.Consumer, null, ({
+    container
+  }) => {
+    return jsx("div", {
+      css: [containerStyles, !isFlat && containerShadowStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      container],
+      style: {
+        width: `${Math.min(Math.max(width, 160), 600)}px`
+      },
+      ref: ref || innerRef,
+      "data-testid": testId
+    }, typeof image === 'string' ? jsx("img", {
+      src: image,
+      alt: ""
+    }) : image, jsx("div", {
+      css: bodyStyles
+    }, heading || headingAfterElement ? jsx(Header, null, jsx(Heading, {
+      color: "inverse",
+      level: "h600",
+      as: "h4"
+    }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(({
+      text,
+      key,
+      ...rest
+    }, idx) => {
+      return jsx(DialogActionItem, {
+        key: key || (typeof text === 'string' ? text : `${idx}`)
+      }, jsx(Button, rest, text));
+    }))) : null));
+  })));
 });
-
-export default /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(SpotlightCard, _extends({}, props, {
-  innerRef: ref
-})));
+SpotlightCard.displayName = 'SpotlightCard';
+export default SpotlightCard;

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.4.2";
+const packageVersion = "10.5.2";
 
 class SpotlightDialog extends Component {
   constructor(...args) {
@@ -92,22 +92,13 @@ class SpotlightDialog extends Component {
       disabled: focusLockDisabled,
       returnFocus: false,
       autoFocus: true
-    }, /*#__PURE__*/React.createElement(SpotlightCard, {
+    }, /*#__PURE__*/React.createElement("div", {
       ref: ref,
-      testId: testId // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
-      ,
-      theme: parent => {
-        const {
-          container,
-          ...others
-        } = parent({});
-        return { ...others,
-          container: { ...container,
-            ...style,
-            ...animationStyles
-          }
-        };
-      },
+      style: { ...style,
+        ...animationStyles
+      }
+    }, /*#__PURE__*/React.createElement(SpotlightCard, {
+      testId: testId,
       width: dialogWidth,
       actions: actions,
       actionsBeforeElement: actionsBeforeElement,
@@ -121,7 +112,7 @@ class SpotlightDialog extends Component {
       },
       heading: heading,
       headingAfterElement: headingAfterElement
-    }, children))));
+    }, children)))));
   }
 
 }

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

@@ -1,13 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { createContext, PureComponent } from 'react';
 import memoizeOne from 'memoize-one';
+import noop from '@atlaskit/ds-lib/noop';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import Blanket from '../styled/blanket';
 import { Fade } from './animation';
-
-const noop = () => {};
-
 const {
   Consumer: TargetConsumer,
   Provider: TargetProvider
@@ -31,9 +29,11 @@ const Container = ({
 /**
  * __Spotlight manager__
  *
- * Wraps usage of spotlight and manages progression through multiple spotlights.
+ * A spotlight manager manages the visibility of spotlights used to introduce new features to users through focused messages or multi-step tours.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 
 

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

@@ -5,9 +5,11 @@ import { TargetConsumer } from './spotlight-manager';
 /**
  * __Spotlight target__
  *
- * Wraps an element, allowing it to be targeted by a spotlight.
+ * A spotlight target marks a component to be used for introducing new features to users through focused messages or multi-step tours.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 const SpotlightTarget = ({
   children,

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

@@ -1,17 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { createContext } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
 const SpotlightTransitionContext = /*#__PURE__*/createContext({
   isOpen: true,
-  onExited: () => {}
+  onExited: noop
 }); // checks if children exist and are truthy
 
 const hasChildren = children => React.Children.count(children) > 0 && React.Children.map(children, child => !!child).filter(Boolean).length > 0;
 /**
  * __Spotlight transition__
  *
- * Provides context used for fading animations.
+ * A spotlight transition holds onto spotlights so they can fade out when exiting the viewport.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 
 

package/dist/es2019/components/spotlight.js

@@ -6,11 +6,11 @@ import { SpotlightConsumer } from './spotlight-manager';
 /**
  * __Spotlight__
  *
- * A spotlight gives visual focus to an element and is paired with a dialog.
+ * An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
  *
- * Spotlights are used for onboarding and can be connected to create a tour.
- *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 const Spotlight = ({
   dialogWidth = 400,

package/dist/es2019/components/theme.js

@@ -136,6 +136,11 @@ function extract(newTheme, {
     return acc;
   }, {});
 }
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
+
 
 export const spotlightButtonTheme = (current, themeProps) => {
   const {
@@ -149,6 +154,11 @@ export const spotlightButtonTheme = (current, themeProps) => {
     ...rest
   };
 };
+/**
+ * @deprecated
+ * Custom button themes are deprecated and will be removed in the future.
+ */
+
 export const modalButtonTheme = (current, themeProps) => {
   const {
     buttonStyles,

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

@@ -1,13 +1,7 @@
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { SpotlightContext } from './spotlight-manager';
 /**
- * Enables advanced usage of spotlights.
- *
- * Provides the following methods:
- * - `isTargetRendered`
- *
- *    Checks if the given spotlight target is currently
- *    being rendered.
+ * Use spotlight hook returns information about available spotlight targets.
  */
 
 export default function useSpotlight() {

package/dist/es2019/styled/target.js

@@ -83,11 +83,13 @@ export const TargetOverlay = props => jsx("div", _extends({}, props, {
   }
 }));
 /**
- * __Pulse__
+ * __Spotlight pulse__
  *
- * Allows consumers to apply the spotlight pulse effect in a custom way.
+ * A spotlight pulse draws attention to a new feature.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/examples)
+ * - [Code](https://atlassian.design/components/onboarding/code)
+ * - [Usage](https://atlassian.design/components/onboarding/usage)
  */
 
 export const Pulse = ({

package/dist/es2019/version.json

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

package/dist/esm/components/modal.js

@@ -22,26 +22,24 @@ import Modal, { ModalBody } from '@atlaskit/modal-dialog';
 import { ModalBody as Body, ModalHeading as Heading, ModalActionContainer, ModalActionItem, ModalImage } from '../styled/modal';
 import { modalButtonTheme } from './theme'; // TODO: DSP-1250 - use a composable API consistent with normal modal dialog
 
-function noop() {}
 /**
- * __Onboarding modal__
+ * __Benefits modal__
  *
- * If the product change is large enough,
- * this component can be used to outline the benefits of the change to the user.
+ * A benefits modal explains the benefits of a significant new feature or experience change.
  *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ * - [Examples](https://atlassian.design/components/onboarding/benefits-modal/examples)
+ * - [Code](https://atlassian.design/components/onboarding/benefits-modal/code)
+ * - [Usage](https://atlassian.design/components/onboarding/benefits-modal/usage)
  */
+var BenefitsModal = /*#__PURE__*/function (_Component) {
+  _inherits(BenefitsModal, _Component);
 
+  var _super = _createSuper(BenefitsModal);
 
-var OnboardingModal = /*#__PURE__*/function (_Component) {
-  _inherits(OnboardingModal, _Component);
-
-  var _super = _createSuper(OnboardingModal);
-
-  function OnboardingModal() {
+  function BenefitsModal() {
     var _this;
 
-    _classCallCheck(this, OnboardingModal);
+    _classCallCheck(this, BenefitsModal);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -95,7 +93,7 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  _createClass(OnboardingModal, [{
+  _createClass(BenefitsModal, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -108,7 +106,6 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
       var Footer = this.footerComponent(this.props);
       return jsx(Modal, _extends({
         autoFocus: true,
-        onClose: noop,
         shouldScrollInViewport: true,
         shouldCloseOnOverlayClick: false,
         shouldCloseOnEscapePress: false
@@ -116,7 +113,7 @@ var OnboardingModal = /*#__PURE__*/function (_Component) {
     }
   }]);
 
-  return OnboardingModal;
+  return BenefitsModal;
 }(Component);
 
-export { OnboardingModal as default };
+export { BenefitsModal as default };