@atlaskit/editor-plugin-extension/dist/es2019/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';
const iconWidth = 40;
const buttonWidth = 40;
const margin = 16;
const gapSizeForEllipsis = iconWidth + buttonWidth + margin * 2;
const itemStyles = css({
  display: 'flex',
  marginBottom: "var(--ds-space-300, 24px)"
});
const itemIconStyles = css({
  width: iconWidth,
  height: iconWidth,
  overflow: 'hidden',
  border: `${"var(--ds-border-width, 1px)"} 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
  }
});
const 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 ${"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% - ${gapSizeForEllipsis}px)`
});
const centeredItemTitleStyles = css({
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'center'
});
const 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'
  }
});
const descriptionStyles = xcss({
  marginBottom: 'space.300'
});
const helpLinkStyles = xcss({
  paddingTop: 'space.150'
});
const closeButtonWrapperStyles = css({
  width: buttonWidth,
  textAlign: 'right'
});
const Header = ({
  icon,
  title,
  description,
  summary,
  deprecation,
  documentationUrl,
  enableHelpCTA,
  onClose,
  intl
}) => {
  const ResolvedIcon = useMemo(() => {
    return /*#__PURE__*/lazy(() => icon().then(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)
  })))));
};
const _default_1 = injectIntl(Header);
export default _default_1;