@atlaskit/editor-common/dist/esm/extensibility/Extension/Lozenge/ExtensionLabel.js

A package that contains common classes and components for editor and renderer

/** @jsx jsx */

import { css, jsx } from '@emotion/react';
import classnames from 'classnames';
import { N300, N500 } from '@atlaskit/theme/colors';
var labelStyles = css({
  opacity: 0,
  display: 'inline-flex',
  width: 'max-content',
  justifyContent: 'left',
  position: 'absolute',
  // Unfortunately, these need to be these exact numbers - otherwise there will be a gap/noticeable overlap
  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
  top: '-18px',
  '&.inline-extension': {
    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
    top: '-17px',
    marginLeft: "var(--ds-space-150, 12px)"
  },
  '&.hovered': {
    background: "var(--ds-background-accent-gray-subtle-pressed, ".concat(N300, ")"),
    color: "var(--ds-text-subtle, ".concat(N500, ")"),
    opacity: 1
  },
  borderRadius: "var(--ds-border-radius, 3px)",
  lineHeight: 1
});
var textStyles = css({
  fontSize: '14px',
  fontWeight: 'normal',
  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
});
export var ExtensionLabel = function ExtensionLabel(_ref) {
  var text = _ref.text,
    extensionName = _ref.extensionName,
    isNodeHovered = _ref.isNodeHovered,
    customContainerStyles = _ref.customContainerStyles;
  var classNames = classnames('extension-title', 'extension-label', {
    'inline-extension': extensionName === 'inlineExtension',
    hovered: isNodeHovered
  });
  return jsx("div", {
    style: customContainerStyles
  }, jsx("span", {
    "data-testid": "new-lozenge",
    css: labelStyles,
    className: classNames
  }, jsx("span", {
    css: textStyles
  }, text)));
};