@atlaskit/editor-plugin-extension/dist/esm/ui/ConfigPanel/Header.js

editor-plugin-extension plugin for @atlaskit/editor-core

/**
 * @jsxRuntime classic
 * @jsx jsx
 */
import { Fragment, lazy, Suspense, useMemo } from 'react';

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import { injectIntl } from 'react-intl';
import { IconButton } from '@atlaskit/button/new';
import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
import CrossIcon from '@atlaskit/icon/core/cross';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Box, Text, xcss } from '@atlaskit/primitives';
import { HelpLink } from './HelpLink';
var iconWidth = 40;
var buttonWidth = 40;
var margin = 16;
var gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
var itemStyles = css({
  display: 'flex',
  marginBottom: "var(--ds-space-300, 24px)"
});
var itemIconStyles = css({
  width: iconWidth,
  height: iconWidth,
  overflow: 'hidden',
  border: "var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border, #0B120E24)"),
  borderRadius: "var(--ds-radius-small, 3px)",
  boxSizing: 'border-box',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  div: {
    width: iconWidth,
    height: iconWidth
  }
});
var itemBodyStyles = css({
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'nowrap',
  justifyContent: 'space-between',
  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
  lineHeight: 1.4,
  margin: "0 ".concat("var(--ds-space-200, 16px)"),
  flexGrow: 3,
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
  maxWidth: "calc(100% - ".concat(gapSizeForEllipsis, "px)")
});
var centeredItemTitleStyles = css({
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center'
});
var itemTextStyles = css({
  maxWidth: '100%',
  whiteSpace: 'initial',
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  itemSummary: {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    fontSize: relativeFontSizeToBase16(11.67),
    color: "var(--ds-text-subtlest, #6B6E76)",
    marginTop: "var(--ds-space-050, 4px)",
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis'
  }
});
var descriptionStyles = xcss({
  marginBottom: 'space.300'
});
var helpLinkStyles = xcss({
  paddingTop: 'space.150'
});
var closeButtonWrapperStyles = css({
  width: buttonWidth,
  textAlign: 'right'
});
var Header = function Header(_ref) {
  var icon = _ref.icon,
    title = _ref.title,
    description = _ref.description,
    summary = _ref.summary,
    deprecation = _ref.deprecation,
    documentationUrl = _ref.documentationUrl,
    enableHelpCTA = _ref.enableHelpCTA,
    onClose = _ref.onClose,
    intl = _ref.intl;
  var ResolvedIcon = useMemo(function () {
    return /*#__PURE__*/lazy(function () {
      return icon().then(function (Cmp) {
        if ('default' in Cmp) {
          return Cmp;
        }
        return {
          default: Cmp
        };
      });
    });
  }, [icon]);
  return jsx(Fragment, null, jsx("div", {
    css: itemStyles
  }, jsx("div", {
    css: itemIconStyles
  }, jsx(Suspense, {
    fallback: null
  }, jsx(ResolvedIcon, {
    label: title
  }))), jsx("div", {
    css: itemBodyStyles
  }, summary ? jsx("div", {
    css: itemTextStyles
  }, jsx("div", {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
    className: "item-title",
    id: "context-panel-title",
    "data-testid": "context-panel-title"
  }, title), jsx("div", {
    className: "item-summary"
  }, summary)) : jsx("div", {
    css: centeredItemTitleStyles,
    id: "context-panel-title",
    "data-testid": "context-panel-title"
  }, title)), jsx("div", {
    css: closeButtonWrapperStyles
  }, jsx(IconButton, {
    appearance: "subtle",
    testId: "config-panel-header-close-button",
    label: intl.formatMessage(messages.close),
    icon: CrossIcon,
    onClick: onClose
  }))), (description || documentationUrl) && jsx(Box, {
    xcss: descriptionStyles
  }, jsx(Text, {
    as: "p",
    testId: "config-panel-header-description"
  }, description && jsx(Fragment, null,
  // Ignored via go/ees005
  // eslint-disable-next-line require-unicode-regexp
  description.replace(/([^.])$/, '$1.'), ' '), (deprecation === null || deprecation === void 0 ? void 0 : deprecation.isDeprecated) && (deprecation === null || deprecation === void 0 ? void 0 : deprecation.message) && jsx(Box, {
    paddingBlockStart: "space.150"
  }, deprecation.message), documentationUrl && (enableHelpCTA ? jsx(Box, {
    xcss: helpLinkStyles
  }, jsx(Text, {
    as: "p"
  }, jsx(HelpLink, {
    documentationUrl: documentationUrl,
    label: intl.formatMessage(messages.help)
  }))) : jsx(HelpLink, {
    documentationUrl: documentationUrl,
    label: intl.formatMessage(messages.documentation)
  })))));
};
var _default_1 = injectIntl(Header);
export default _default_1;