@atlaskit/inline-message/dist/cjs/components/inline-message/index.js

An inline message lets users know when important information is available or when an action is required.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _button = _interopRequireDefault(require("@atlaskit/button"));
var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
var _primitives = require("@atlaskit/primitives");
var _colors = require("@atlaskit/theme/colors");
var _messageIcon = _interopRequireDefault(require("../message-icon"));
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var rootStyles = (0, _react2.css)({
  display: 'inline-block',
  maxWidth: '100%',
  '&:focus': {
    outline: '1px solid'
  },
  '&:hover': {
    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    '[data-ds--inline-message--icon]': {
      // Legacy style
      color: 'var(--icon-accent-color)'
    },
    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
    '[data-ds--inline-message--button]': {
      textDecoration: 'underline'
    }
  }
});
var iconColor = function iconColor(appearance) {
  switch (appearance) {
    case 'connectivity':
      return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
    case 'confirmation':
      return "var(--ds-icon-success, ".concat(_colors.G200, ")");
    case 'info':
      return "var(--ds-icon-discovery, ".concat(_colors.P200, ")");
    case 'warning':
      return "var(--ds-icon-warning, ".concat(_colors.Y200, ")");
    case 'error':
      return "var(--ds-icon-danger, ".concat(_colors.R300, ")");
  }
};

/**
 * __Inline message__
 *
 * An inline message lets users know when important information is available or when an action is required.
 *
 * - [Examples](https://atlassian.design/components/inline-message/examples)
 * - [Code](https://atlassian.design/components/inline-message/code)
 * - [Usage](https://atlassian.design/components/inline-message/usage)
 *
 * @example
 *
 * ```jsx
 * const Component = () => (
 *   <InlineMessage
 *    title="Inline Message Title Example"
 *    secondaryText="Secondary Text"
 *   >
 *    <p>Some text that would be inside the open dialog and otherwise hidden.</p>
 *   </InlineMessage>
 * );
 * ```
 */
var InlineMessage = function InlineMessage(_ref) {
  var _ref$placement = _ref.placement,
    placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
    _ref$secondaryText = _ref.secondaryText,
    secondaryText = _ref$secondaryText === void 0 ? '' : _ref$secondaryText,
    _ref$title = _ref.title,
    title = _ref$title === void 0 ? '' : _ref$title,
    _ref$type = _ref.type,
    type = _ref$type === void 0 ? 'connectivity' : _ref$type,
    appearance = _ref.appearance,
    children = _ref.children,
    testId = _ref.testId,
    iconLabel = _ref.iconLabel;
  var _useState = (0, _react.useState)(false),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var toggleDialog = (0, _react.useCallback)(function () {
    setIsOpen(function (oldState) {
      return !oldState;
    });
  }, [setIsOpen]);
  var onCloseDialog = (0, _react.useCallback)(function () {
    return setIsOpen(false);
  }, [setIsOpen]);
  if (!appearance) {
    appearance = type;
  }
  return (0, _react2.jsx)("div", {
    css: rootStyles
    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
    ,
    style: {
      '--icon-accent-color': iconColor(appearance)
      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
    },
    "data-testid": testId
  }, (0, _react2.jsx)(_inlineDialog.default, {
    onClose: onCloseDialog,
    content: children,
    isOpen: isOpen,
    placement: placement,
    testId: testId && "".concat(testId, "--inline-dialog")
  }, (0, _react2.jsx)(_button.default, {
    "data-ds--inline-message--button": true,
    appearance: "subtle-link",
    onClick: toggleDialog,
    spacing: "none",
    testId: testId && "".concat(testId, "--button"),
    "aria-expanded": isOpen
  }, (0, _react2.jsx)(_primitives.Inline, {
    space: "space.050",
    alignBlock: "center"
  }, (0, _react2.jsx)(_messageIcon.default, {
    isOpen: isOpen,
    appearance: appearance,
    label: iconLabel
  }), (0, _react2.jsx)(_primitives.Inline, {
    space: "space.100"
  }, title && (0, _react2.jsx)(_primitives.Text, {
    weight: "medium",
    testId: testId && "".concat(testId, "--title")
  }, title), secondaryText && (0, _react2.jsx)(_primitives.Text, {
    weight: "medium",
    color: "color.text.subtlest",
    maxLines: 1,
    testId: testId && "".concat(testId, "--text")
  }, secondaryText))))));
};
var _default = exports.default = InlineMessage;