@atlaskit/onboarding/dist/cjs/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 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("./spotlight-card.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button/custom-theme-button"));
var _theme = _interopRequireDefault(require("@atlaskit/button/theme"));
var _css = require("@atlaskit/css");
var _heading = _interopRequireDefault(require("@atlaskit/heading/heading"));
var _useLayering2 = require("@atlaskit/layering/use-layering");
var _compiled = require("@atlaskit/primitives/compiled");
var _dialog = require("../styled/dialog");
var _theme2 = require("./theme");
var _excluded = ["text", "key"];
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var bodyStyles = null;
var imageStyles = null;
var defaultHeaderStyles = null;
var DefaultHeader = function DefaultHeader(_ref) {
  var children = _ref.children;
  return /*#__PURE__*/React.createElement("div", {
    className: (0, _runtime.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: (0, _runtime.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__*/(0, _react.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 = (0, _useLayering2.useLayering)(),
    currentLevel = _useLayering.currentLevel;
  return /*#__PURE__*/React.createElement(_theme.default.Provider, {
    value: _theme2.spotlightButtonTheme
  }, /*#__PURE__*/React.createElement(_compiled.Box, {
    backgroundColor: "color.background.discovery.bold",
    xcss: (0, _css.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: (0, _runtime.ax)(["_1e0c1ule"])
  }) : image, /*#__PURE__*/React.createElement("div", {
    className: (0, _runtime.ax)(["_1e0c1txw _2lx21bp4 _85i5pxbi _1q51pxbi _y4tiv47k _bozgv47k"])
  }, heading || headingAfterElement ? /*#__PURE__*/React.createElement(Header, null, /*#__PURE__*/React.createElement(_heading.default, {
    id: headingId,
    size: "medium",
    as: "h".concat(headingLevel),
    color: "color.text.inverse"
  }, heading), headingAfterElement) : null, /*#__PURE__*/React.createElement(_compiled.Text, null, children), actions.length > 0 || actionsBeforeElement ? /*#__PURE__*/React.createElement(Footer, null, actionsBeforeElement || /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement(_dialog.DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
    var text = _ref3.text,
      key = _ref3.key,
      rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
    return /*#__PURE__*/React.createElement(_dialog.DialogActionItem, {
      key: key || (typeof text === 'string' ? text : "".concat(idx))
    }, /*#__PURE__*/React.createElement(_customThemeButton.default, rest, text));
  }))) : null)));
});
SpotlightCard.displayName = 'SpotlightCard';
var _default = exports.default = SpotlightCard;