@atlaskit/onboarding 10.2.2 → 10.2.6

package/dist/es2019/components/card.js

@@ -0,0 +1,131 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import React from 'react';
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import { createTheme, useGlobalTheme } from '@atlaskit/theme/components';
+import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
+import { h600 } from '@atlaskit/theme/typography';
+import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
+const gridSize = getGridSize(); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const lightH600Styles = css(h600({
+  theme: {
+    mode: 'light'
+  }
+})); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const darkH600Styles = css(h600({
+  theme: {
+    mode: 'dark'
+  }
+}));
+const Container = /*#__PURE__*/React.forwardRef(({
+  children,
+  theme,
+  ...props
+}, ref) => // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+jsx("div", _extends({
+  css: theme,
+  ref: ref
+}, props), children));
+const bodyStyles = css({
+  display: 'flex',
+  padding: `${gridSize * 2}px ${gridSize * 2.5}px`,
+  flexDirection: 'column'
+}); // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+
+const headingStyles = css({
+  color: 'inherit'
+});
+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'
+});
+
+const DefaultFooter = ({
+  children
+}) => jsx("div", {
+  css: defaultFooterStyles
+}, children);
+
+const Theme = createTheme(() => ({
+  container: {
+    overflow: 'auto',
+    borderRadius: `${borderRadius()}px`,
+    height: 'fit-content',
+    zIndex: `${layers.spotlight() + 1}`
+  }
+}));
+/**
+ * __Card__
+ *
+ * A card base for the spotlight card. The external `SpotlightCard` wraps this component.
+ *
+ * @internal
+ */
+
+const Card = /*#__PURE__*/React.forwardRef(({
+  actions = [],
+  actionsBeforeElement,
+  children,
+  components = {},
+  image,
+  heading,
+  headingAfterElement,
+  theme,
+  testId
+}, ref) => {
+  const {
+    Header = DefaultHeader,
+    Footer = DefaultFooter
+  } = components;
+  const {
+    mode
+  } = useGlobalTheme();
+  return jsx(Theme.Provider, {
+    value: theme
+  }, jsx(Theme.Consumer, null, ({
+    container
+  }) => {
+    return (// eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+      jsx(Container, {
+        theme: container,
+        ref: ref,
+        "data-testid": testId
+      }, typeof image === 'string' ? jsx("img", {
+        src: image,
+        alt: ""
+      }) : image, jsx("div", {
+        css: bodyStyles
+      }, heading || headingAfterElement ? jsx(Header, null, jsx("h4", {
+        css: [mode === 'light' ? lightH600Styles : darkH600Styles, headingStyles]
+      }, 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 Card;

package/dist/es2019/components/{Clone.js → clone.js}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TargetInner, TargetOverlay } from '../styled/Target';
+import { TargetInner, TargetOverlay } from '../styled/target';
 
 function cloneAndOverrideStyles(node) {
   const shouldCloneChildren = true;
@@ -11,6 +11,15 @@ function cloneAndOverrideStyles(node) {
   clonedNode.style.transform = 'translate(0, 0) translate3d(0, 0, 0)';
   return clonedNode;
 }
+/**
+ * __Clone__
+ *
+ * Used for cloning spotlight targets. The clone is positioned on top of the spotlight target with
+ * a pulsing animation.
+ *
+ * @internal
+ */
+
 
 const Clone = props => {
   const {

package/dist/es2019/components/index.js

@@ -1,9 +1,9 @@
-import Modal from './Modal';
-import Spotlight from './Spotlight';
-import SpotlightCard from './SpotlightCard';
-import SpotlightManager from './SpotlightManager';
-import SpotlightTarget from './SpotlightTarget';
-import SpotlightTransition from './SpotlightTransition';
-import useSpotlight from './useSpotlight';
+import Modal from './modal';
+import Spotlight from './spotlight';
+import SpotlightCard from './spotlight-card';
+import SpotlightManager from './spotlight-manager';
+import SpotlightTarget from './spotlight-target';
+import SpotlightTransition from './spotlight-transition';
+import useSpotlight from './use-spotlight';
 export { spotlightButtonTheme, modalButtonTheme } from './theme';
 export { Modal, Spotlight, SpotlightCard, SpotlightManager, SpotlightTarget, SpotlightTransition, useSpotlight };

package/dist/es2019/components/{Modal.js → modal.js}

@@ -1,12 +1,24 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
+
+/** @jsx jsx */
+import { Component } from 'react';
+import { jsx } from '@emotion/core';
 import Button, { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
-import Modal from '@atlaskit/modal-dialog';
-import { ActionItem, Body, Heading, Image, Actions as ModalActions } from '../styled/Modal';
-import { modalButtonTheme } from './theme';
+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__
+ *
+ * If the product change is large enough,
+ * this component can be used to outline the benefits of the change to the user.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+
 
 export default class OnboardingModal extends Component {
   constructor(...args) {
@@ -18,9 +30,9 @@ export default class OnboardingModal extends Component {
         image: src
       } = props;
 
-      const ImageElement = () => /*#__PURE__*/React.createElement(Image, {
-        alt: "",
-        src: src
+      const ImageElement = () => jsx(ModalImage, {
+        src: src,
+        alt: ""
       });
 
       return HeaderElement || ImageElement;
@@ -33,9 +45,9 @@ export default class OnboardingModal extends Component {
         experimental_shouldShowPrimaryButtonOnRight = false
       } = props;
 
-      const ActionsElement = () => actionList ? /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
+      const ActionsElement = () => actionList ? jsx(ButtonTheme.Provider, {
         value: modalButtonTheme
-      }, /*#__PURE__*/React.createElement(ModalActions, {
+      }, jsx(ModalActionContainer, {
         shouldReverseButtonOrder: experimental_shouldShowPrimaryButtonOnRight
       }, actionList.map(({
         text,
@@ -43,9 +55,9 @@ export default class OnboardingModal extends Component {
         ...rest
       }, idx) => {
         const variant = idx ? 'subtle-link' : 'primary';
-        return /*#__PURE__*/React.createElement(ActionItem, {
+        return jsx(ModalActionItem, {
           key: key || (typeof text === 'string' ? text : `${idx}`)
-        }, /*#__PURE__*/React.createElement(Button, _extends({
+        }, jsx(Button, _extends({
           appearance: variant,
           autoFocus: !idx
         }, rest), text));
@@ -62,17 +74,15 @@ export default class OnboardingModal extends Component {
       heading,
       ...props
     } = this.props;
-    return /*#__PURE__*/React.createElement(Modal, _extends({
+    const Header = this.headerComponent(this.props);
+    const Footer = this.footerComponent(this.props);
+    return jsx(Modal, _extends({
       autoFocus: true,
-      components: {
-        Header: this.headerComponent(this.props),
-        Footer: this.footerComponent(this.props)
-      },
       onClose: noop,
-      scrollBehavior: "outside",
+      shouldScrollInViewport: true,
       shouldCloseOnOverlayClick: false,
       shouldCloseOnEscapePress: false
-    }, props), /*#__PURE__*/React.createElement(Body, null, heading && /*#__PURE__*/React.createElement(Heading, null, heading), children));
+    }, props), jsx(Header, null), jsx(ModalBody, null, jsx(Body, null, heading && jsx(Heading, null, heading), children)), jsx(Footer, null));
   }
 
 }

package/dist/es2019/components/{SpotlightCard.js → spotlight-card.js}

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import { Theme as ButtonTheme } from '@atlaskit/button/custom-theme-button';
 import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
-import Card from './Card';
+import Card from './card';
 import { spotlightButtonTheme } from './theme';
 
 class SpotlightCard extends React.Component {
@@ -32,7 +32,8 @@ class SpotlightCard extends React.Component {
       actions: actions,
       actionsBeforeElement: actionsBeforeElement,
       components: components,
-      image: image,
+      image: image // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+      ,
       theme: parent => {
         const {
           container,
@@ -53,6 +54,12 @@ class SpotlightCard extends React.Component {
   }
 
 }
+/**
+ * __Spotlight card__
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+
 
 _defineProperty(SpotlightCard, "defaultProps", {
   width: 400,

package/dist/es2019/components/{SpotlightDialog.js → spotlight-dialog.js}

@@ -3,11 +3,11 @@ import React, { Component } from 'react';
 import FocusLock from 'react-focus-lock';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { Popper } from '@atlaskit/popper';
-import { Image } from '../styled/Dialog';
-import SpotlightCard from './SpotlightCard';
-import ValueChanged from './ValueChanged';
+import { DialogImage } from '../styled/dialog';
+import SpotlightCard from './spotlight-card';
+import ValueChanged from './value-changed';
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "10.2.2";
+const packageVersion = "10.2.6";
 
 class SpotlightDialog extends Component {
   constructor(...args) {
@@ -94,7 +94,8 @@ class SpotlightDialog extends Component {
       autoFocus: true
     }, /*#__PURE__*/React.createElement(SpotlightCard, {
       ref: ref,
-      testId: testId,
+      testId: testId // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
+      ,
       theme: parent => {
         const {
           container,
@@ -110,7 +111,7 @@ class SpotlightDialog extends Component {
       width: dialogWidth,
       actions: actions,
       actionsBeforeElement: actionsBeforeElement,
-      image: image && /*#__PURE__*/React.createElement(Image, {
+      image: image && /*#__PURE__*/React.createElement(DialogImage, {
         alt: heading,
         src: image
       }),

package/dist/es2019/components/{SpotlightInner.js → spotlight-inner.js}

@@ -8,11 +8,18 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import { ElementBox } from '../utils/use-element-box';
-import { Fade } from './Animation';
-import Clone from './Clone';
-import SpotlightDialog from './SpotlightDialog';
-import { SpotlightTransitionConsumer } from './SpotlightTransition';
+import { Fade } from './animation';
+import Clone from './clone';
+import SpotlightDialog from './spotlight-dialog';
+import { SpotlightTransitionConsumer } from './spotlight-transition';
 
+/**
+ * __Spotlight inner__
+ *
+ * Renders the spotlight target clone and dialog.
+ *
+ * @internal
+ */
 class SpotlightInner extends React.Component {
   constructor(...args) {
     super(...args);
@@ -94,7 +101,7 @@ class SpotlightInner extends React.Component {
       targetOnClick: targetOnClick,
       targetRadius: targetRadius
     })), TargetReplacement && !replacementElement ? null : /*#__PURE__*/React.createElement(Fade, {
-      in: isOpen,
+      hasEntered: isOpen,
       onExited: onExited
     }, animationStyles => /*#__PURE__*/React.createElement(SpotlightDialog, {
       testId: `${testId}--dialog`,

package/dist/es2019/components/{SpotlightManager.js → spotlight-manager.js}

@@ -3,8 +3,8 @@ import React, { createContext, PureComponent } from 'react';
 import memoizeOne from 'memoize-one';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
-import Blanket from '../styled/Blanket';
-import { Fade } from './Animation';
+import Blanket from '../styled/blanket';
+import { Fade } from './animation';
 
 const noop = () => {};
 
@@ -28,6 +28,14 @@ const Container = ({
   component: Wrapper,
   children
 }) => /*#__PURE__*/React.createElement(Wrapper, null, children);
+/**
+ * __Spotlight manager__
+ *
+ * Wraps usage of spotlight and manages progression through multiple spotlights.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+
 
 export default class SpotlightManager extends PureComponent {
   constructor(...args) {
@@ -87,7 +95,7 @@ export default class SpotlightManager extends PureComponent {
     }, /*#__PURE__*/React.createElement(Container, {
       component: Tag || React.Fragment
     }, /*#__PURE__*/React.createElement(Fade, {
-      in: this.state.spotlightCount > 0
+      hasEntered: this.state.spotlightCount > 0
     }, animationStyles => /*#__PURE__*/React.createElement(Portal, {
       zIndex: layers.spotlight()
     }, /*#__PURE__*/React.createElement(Blanket, {

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import NodeResolver from 'react-node-resolver';
+import { TargetConsumer } from './spotlight-manager';
+
+/**
+ * __Spotlight target__
+ *
+ * Wraps an element, allowing it to be targeted by a spotlight.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+const SpotlightTarget = ({
+  children,
+  name
+}) => /*#__PURE__*/React.createElement(TargetConsumer, null, targetRef => targetRef ? /*#__PURE__*/React.createElement(NodeResolver, {
+  innerRef: targetRef(name)
+}, children) : children);
+
+export default SpotlightTarget;

package/dist/es2019/components/{SpotlightTransition.js → spotlight-transition.js}

@@ -1,13 +1,21 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { createContext } from 'react';
-const TransitionContext = /*#__PURE__*/createContext({
+const SpotlightTransitionContext = /*#__PURE__*/createContext({
   isOpen: true,
   onExited: () => {}
 }); // 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.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
 
-class Transition extends React.Component {
+
+class SpotlightTransition extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -33,7 +41,7 @@ class Transition extends React.Component {
   }
 
   render() {
-    return /*#__PURE__*/React.createElement(TransitionContext.Provider, {
+    return /*#__PURE__*/React.createElement(SpotlightTransitionContext.Provider, {
       value: {
         onExited: this.onExited,
         isOpen: hasChildren(this.props.children)
@@ -42,6 +50,14 @@ class Transition extends React.Component {
   }
 
 }
+/**
+ * __Spotlight transition consumer__
+ *
+ * Used to consume the spotlight transition context through render props.
+ *
+ * @internal
+ */
+
 
-export const SpotlightTransitionConsumer = TransitionContext.Consumer;
-export default Transition;
+export const SpotlightTransitionConsumer = SpotlightTransitionContext.Consumer;
+export default SpotlightTransition;

package/dist/es2019/components/spotlight.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import SpotlightInner from './spotlight-inner';
+import { SpotlightConsumer } from './spotlight-manager';
+
+/**
+ * __Spotlight__
+ *
+ * A spotlight gives visual focus to an element and is paired with a dialog.
+ *
+ * Spotlights are used for onboarding and can be connected to create a tour.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/onboarding)
+ */
+const Spotlight = ({
+  dialogWidth = 400,
+  pulse = true,
+  testId = 'spotlight',
+  targetNode,
+  target,
+  ...rest
+}) => /*#__PURE__*/React.createElement(SpotlightConsumer, null, ({
+  opened,
+  closed,
+  targets
+}) => {
+  // use the targetNode prop or try get the target from context targets using name
+  const actualTargetNode = targetNode || (typeof target === 'string' ? targets[target] : undefined);
+  return actualTargetNode ? /*#__PURE__*/React.createElement(SpotlightInner, _extends({}, rest, {
+    targetNode: actualTargetNode,
+    target: target,
+    onOpened: opened,
+    onClosed: closed,
+    testId: testId,
+    dialogWidth: dialogWidth,
+    pulse: pulse
+  })) : null;
+});
+
+export default Spotlight;

package/dist/es2019/components/{useSpotlight.js → use-spotlight.js}

@@ -1,5 +1,15 @@
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
-import { SpotlightContext } from './SpotlightManager';
+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.
+ */
+
 export default function useSpotlight() {
   const {
     targets

package/dist/es2019/index.js

@@ -1,2 +1,2 @@
 export { Modal, Spotlight, SpotlightCard, SpotlightManager, SpotlightTarget, SpotlightTransition, modalButtonTheme, spotlightButtonTheme, useSpotlight } from './components';
-export { Pulse as SpotlightPulse } from './styled/Target';
+export { Pulse as SpotlightPulse } from './styled/target';

package/dist/es2019/styled/blanket.js

@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { DN90A, N100A } from '@atlaskit/theme/colors';
+import { themed, useGlobalTheme } from '@atlaskit/theme/components';
+import { layers } from '@atlaskit/theme/constants';
+const backgroundColor = themed({
+  light: N100A,
+  dark: DN90A
+}); // IE11 and Edge: z-index needed because fixed position calculates z-index relative
+// to body instead of nearest stacking context (Portal in our case).
+
+const blanketStyles = css({
+  position: 'fixed',
+  zIndex: layers.spotlight(),
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  transition: 'opacity 220ms'
+});
+
+/**
+ * __Blanket__
+ *
+ * A replacement for `@atlaskit/blanket`.
+ *
+ * We use this for spotlights instead of `@atlaskit/blanket`
+ * because spotlights must sit on top of other layered elements,
+ * such as modals, which have their own blankets.
+ *
+ * @internal
+ */
+const Blanket = props => {
+  const theme = useGlobalTheme();
+  return jsx("div", {
+    css: blanketStyles,
+    style: { ...props.style,
+      backgroundColor: props.isTinted ? backgroundColor({
+        theme
+      }) : 'transparent'
+    }
+  });
+};
+
+export default Blanket;

package/dist/es2019/styled/dialog.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+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`,
+
+  /* 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`
+});
+/**
+ * __Dialog image__
+ *
+ * An optional header image in spotlight dialogs.
+ *
+ * @internal
+ */
+
+export const DialogImage = ({
+  alt,
+  ...props
+}) => jsx("img", _extends({
+  css: imageStyles,
+  alt: alt
+}, props));
+/**
+ * __Dialog action item container__
+ *
+ * Flex wrapper around dialog action items.
+ *
+ * @internal
+ */
+
+export const DialogActionItemContainer = ({
+  children
+}) => jsx("div", {
+  css: actionItemContainerStyles
+}, children);
+/**
+ * __Dialog action item__
+ *
+ * Action items shown inside of the dialog.
+ *
+ * @internal
+ */
+
+export const DialogActionItem = ({
+  children
+}) => jsx("div", {
+  css: actionItemStyles
+}, children);