@atlaskit/onboarding/dist/esm/components/spotlight-card.js

An onboarding spotlight introduces new features to users through focused messages or multi-step tours.

/* spotlight-card.tsx generated by @compiled/babel-plugin v3.0.2 */
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["text", "key"];
import "./spotlight-card.compiled.css";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef } from 'react';
import Button from '@atlaskit/button/custom-theme-button/custom-theme-button';
import ButtonTheme from '@atlaskit/button/theme';
import { cx } from '@atlaskit/css';
import Heading from '@atlaskit/heading/heading';
import { useLayering } from '@atlaskit/layering/use-layering';
import { Box, Text } from '@atlaskit/primitives/compiled';
import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
import { spotlightButtonTheme } from './theme';
var bodyStyles = null;
var imageStyles = null;
var defaultHeaderStyles = null;
var DefaultHeader = function DefaultHeader(_ref) {
  var children = _ref.children;
  return /*#__PURE__*/React.createElement("div", {
    className: ax(["_1e0c1txw _4cvr1q9y _1bah1yb4 _85i5u2gc"])
  }, children);
};
var defaultFooterStyles = null;
var DefaultFooter = function DefaultFooter(_ref2) {
  var children = _ref2.children;
  return /*#__PURE__*/React.createElement("div", {
    "data-testid": "spotlight--dialog-footer",
    className: ax(["_1e0c1txw _4cvr1h6o _1bah1yb4 _1q51u2gc"])
  }, children);
};
var containerStyles = {
  root: "_2rko12b0 _1reo1wug _18m91wug _4t3i1ns9 _syaz15cr _1ul91lit _p12f1ogm"
};
var containerShadowStyles = {
  root: "_16qst7xp"
};

/**
 * __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)
 *
 * @deprecated Use `@atlaskit/spotlight` instead.
 */
var SpotlightCard = /*#__PURE__*/forwardRef(function (props, ref) {
  var _props$actions = props.actions,
    actions = _props$actions === void 0 ? [] : _props$actions,
    actionsBeforeElement = props.actionsBeforeElement,
    children = props.children,
    _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,
    isFlat = props.isFlat,
    testId = props.testId,
    _props$width = 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,
    Footer = _components$Footer === void 0 ? DefaultFooter : _components$Footer;
  var _useLayering = useLayering(),
    currentLevel = _useLayering.currentLevel;
  return /*#__PURE__*/React.createElement(ButtonTheme.Provider, {
    value: spotlightButtonTheme
  }, /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "color.background.discovery.bold",
    xcss: cx(containerStyles.root, !isFlat && containerShadowStyles.root),
    style: {
      width: width
    },
    ref: ref || innerRef,
    testId: testId,
    "data-ds--level": currentLevel
    // temporarily use this data attribute to prevent clicking outside won't close spotlight correctly issue
    ,
    "data-ds--close--type": "single"
  }, typeof image === 'string' ? /*#__PURE__*/React.createElement("img", {
    src: image,
    alt: "",
    className: ax(["_1e0c1ule"])
  }) : image, /*#__PURE__*/React.createElement("div", {
    className: ax(["_1e0c1txw _2lx21bp4 _85i5pxbi _1q51pxbi _y4tiv47k _bozgv47k"])
  }, heading || headingAfterElement ? /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(Heading, {
    id: headingId,
    size: "medium",
    as: "h".concat(headingLevel),
    color: "color.text.inverse"
  }, heading), headingAfterElement) : null, /*#__PURE__*/React.createElement(Text, null, children), actions.length > 0 || actionsBeforeElement ? /*#__PURE__*/React.createElement(Footer, null, actionsBeforeElement || /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
    var text = _ref3.text,
      key = _ref3.key,
      rest = _objectWithoutProperties(_ref3, _excluded);
    return /*#__PURE__*/React.createElement(DialogActionItem, {
      key: key || (typeof text === 'string' ? text : "".concat(idx))
    }, /*#__PURE__*/React.createElement(Button, rest, text));
  }))) : null)));
});
SpotlightCard.displayName = 'SpotlightCard';
export default SpotlightCard;