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

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

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { useCallback, useState } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import Button from '@atlaskit/button';
import InlineDialog from '@atlaskit/inline-dialog';
import { Inline, Text } from '@atlaskit/primitives';
import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
import MessageIcon from '../message-icon';
var rootStyles = 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(B300, ")");
    case 'confirmation':
      return "var(--ds-icon-success, ".concat(G200, ")");
    case 'info':
      return "var(--ds-icon-discovery, ".concat(P200, ")");
    case 'warning':
      return "var(--ds-icon-warning, ".concat(Y200, ")");
    case 'error':
      return "var(--ds-icon-danger, ".concat(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 = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    isOpen = _useState2[0],
    setIsOpen = _useState2[1];
  var toggleDialog = useCallback(function () {
    setIsOpen(function (oldState) {
      return !oldState;
    });
  }, [setIsOpen]);
  var onCloseDialog = useCallback(function () {
    return setIsOpen(false);
  }, [setIsOpen]);
  if (!appearance) {
    appearance = type;
  }
  return 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
  }, jsx(InlineDialog, {
    onClose: onCloseDialog,
    content: children,
    isOpen: isOpen,
    placement: placement,
    testId: testId && "".concat(testId, "--inline-dialog")
  }, jsx(Button, {
    "data-ds--inline-message--button": true,
    appearance: "subtle-link",
    onClick: toggleDialog,
    spacing: "none",
    testId: testId && "".concat(testId, "--button"),
    "aria-expanded": isOpen
  }, jsx(Inline, {
    space: "space.050",
    alignBlock: "center"
  }, jsx(MessageIcon, {
    isOpen: isOpen,
    appearance: appearance,
    label: iconLabel
  }), jsx(Inline, {
    space: "space.100"
  }, title && jsx(Text, {
    weight: "medium",
    testId: testId && "".concat(testId, "--title")
  }, title), secondaryText && jsx(Text, {
    weight: "medium",
    color: "color.text.subtlest",
    maxLines: 1,
    testId: testId && "".concat(testId, "--text")
  }, secondaryText))))));
};
export default InlineMessage;