@atlaskit/editor-common/dist/es2019/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';
import CommentIcon from '@atlaskit/icon/core/comment';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Pressable, xcss } from '@atlaskit/primitives';
import Tooltip from '@atlaskit/tooltip';
import { commentMessages as messages } from '../media';
const baseStyles = xcss({
  borderRadius: 'radius.small'
});
const mediumBadgeStyles = xcss({
  height: 'space.300',
  width: 'space.300'
});
export const CommentBadgeNext = ({
  status = 'default',
  onClick,
  onMouseEnter,
  onMouseLeave
}) => {
  const intl = useIntl();
  const title = intl.formatMessage(messages.viewCommentsOnMedia);
  const colourToken = useMemo(() => {
    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
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
  , {
    xcss: [baseStyles, mediumBadgeStyles],
    padding: "space.0",
    onClick: onClick,
    onMouseEnter: onMouseEnter,
    onMouseLeave: onMouseLeave,
    backgroundColor: colourToken
  }, /*#__PURE__*/React.createElement(CommentIcon, {
    label: title,
    spacing: "spacious",
    color: "currentColor"
  })));
};