@atlaskit/editor-common/dist/esm/media-single/CommentBadgeNext.js

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

import React, { useMemo } from 'react';
import { useIntl } from 'react-intl-next';
import CommentIcon from '@atlaskit/icon/core/comment';
import LegacyCommentIcon from '@atlaskit/icon/glyph/comment';
import { Pressable, xcss } from '@atlaskit/primitives';
import Tooltip from '@atlaskit/tooltip';
import { commentMessages as messages } from '../media';
var baseStyles = xcss({
  borderRadius: 'border.radius'
});
var smallBadgeStyles = xcss({
  height: 'space.200',
  width: 'space.200'
});
var mediumBadgeStyles = xcss({
  height: 'space.300',
  width: 'space.300'
});
export var CommentBadgeNext = function CommentBadgeNext(_ref) {
  var _ref$status = _ref.status,
    status = _ref$status === void 0 ? 'default' : _ref$status,
    onClick = _ref.onClick,
    onMouseEnter = _ref.onMouseEnter,
    onMouseLeave = _ref.onMouseLeave,
    badgeSize = _ref.badgeSize;
  var intl = useIntl();
  var title = intl.formatMessage(messages.viewCommentsOnMedia);
  var colourToken = useMemo(function () {
    switch (status) {
      case 'active':
        return 'color.background.accent.yellow.subtlest.pressed';
      case 'entered':
        return 'color.background.accent.yellow.subtlest.hovered';
      default:
        return 'color.background.accent.yellow.subtlest';
    }
  }, [status]);
  return /*#__PURE__*/React.createElement(Tooltip, {
    position: "top",
    content: title
  }, /*#__PURE__*/React.createElement(Pressable, {
    xcss: [baseStyles, badgeSize === 'medium' ? mediumBadgeStyles : smallBadgeStyles],
    padding: "space.0",
    onClick: onClick,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    backgroundColor: colourToken
  }, /*#__PURE__*/React.createElement(CommentIcon, {
    label: title,
    spacing: "spacious",
    color: "currentColor",
    LEGACY_size: badgeSize,
    LEGACY_fallbackIcon: LegacyCommentIcon
  })));
};