@atlaskit/onboarding/dist/es2019/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 "./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';
const bodyStyles = null;
const imageStyles = null;
const defaultHeaderStyles = null;
const DefaultHeader = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  className: ax(["_1e0c1txw _4cvr1q9y _1bah1yb4 _85i5u2gc"])
}, children);
const defaultFooterStyles = null;
const DefaultFooter = ({
  children
}) => /*#__PURE__*/React.createElement("div", {
  "data-testid": "spotlight--dialog-footer",
  className: ax(["_1e0c1txw _4cvr1h6o _1bah1yb4 _1q51u2gc"])
}, children);
const containerStyles = {
  root: "_2rko12b0 _1reo1wug _18m91wug _4t3i1ns9 _syaz15cr _1ul91lit _p12f1ogm"
};
const 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.
 */
const SpotlightCard = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    actions = [],
    actionsBeforeElement,
    children,
    components = {},
    heading,
    headingLevel = 4,
    headingAfterElement,
    image,
    innerRef,
    isFlat,
    testId,
    width = 400,
    headingId
  } = props;
  const {
    Header = DefaultHeader,
    Footer = DefaultFooter
  } = components;
  const {
    currentLevel
  } = useLayering();
  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
    },
    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${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(({
    text,
    key,
    ...rest
  }, idx) => {
    return /*#__PURE__*/React.createElement(DialogActionItem, {
      key: key || (typeof text === 'string' ? text : `${idx}`)
    }, /*#__PURE__*/React.createElement(Button, rest, text));
  }))) : null)));
});
SpotlightCard.displayName = 'SpotlightCard';
export default SpotlightCard;