@atlaskit/editor-plugin-text-color/dist/cjs/ui/ColorAccessibilityMenuItem.js

Text color plugin for @atlaskit/editor-core

/* ColorAccessibilityMenuItem.tsx generated by @compiled/babel-plugin v0.39.1 */
"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ColorAccessibilityMenuItem = void 0;
require("./ColorAccessibilityMenuItem.compiled.css");
var _runtime = require("@compiled/react/runtime");
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _new = require("@atlaskit/button/new");
var _hooks = require("@atlaskit/editor-common/hooks");
var _messages = require("@atlaskit/editor-common/messages");
var _uiColor = require("@atlaskit/editor-common/ui-color");
var _editorPalette = require("@atlaskit/editor-palette");
var _accessibility = _interopRequireDefault(require("@atlaskit/icon/core/accessibility"));
var _questionCircle = _interopRequireDefault(require("@atlaskit/icon/core/question-circle"));
var _compiled = require("@atlaskit/primitives/compiled");
var _tokens = require("@atlaskit/tokens");
var _colorContrast = require("../pm-plugins/utils/color-contrast");
var _constants = require("../pm-plugins/utils/constants");
var resolveColorValue = function resolveColorValue(color, fallback) {
  return (0, _uiColor.getTokenCSSVariableValue)(color) || (color.startsWith('var(') ? fallback : color);
};
var getForegroundColor = function getForegroundColor(textColor, defaultColor) {
  if (!textColor || defaultColor && textColor === defaultColor) {
    return (0, _tokens.getTokenValue)('color.text', defaultColor || _constants.DEFAULT_COLOR.color);
  }
  var colorValue = (0, _editorPalette.hexToEditorTextPaletteColor)(textColor) || textColor;
  return resolveColorValue(colorValue, textColor);
};
var getBackgroundColor = function getBackgroundColor(highlightColor) {
  if (!highlightColor || highlightColor === _constants.TRANSPARENT_HIGHLIGHT_COLOR) {
    return (0, _tokens.getTokenValue)('elevation.surface', _constants.DEFAULT_BACKGROUND_COLOR);
  }
  var colorValue = (0, _editorPalette.hexToEditorTextBackgroundPaletteColor)(highlightColor) || highlightColor;
  return resolveColorValue(colorValue, highlightColor);
};
var useColorAccessibilityState = function useColorAccessibilityState(api) {
  return (0, _hooks.useSharedPluginStateWithSelector)(api, ['textColor', 'highlight'], function (states) {
    var _states$textColorStat, _states$highlightStat, _states$textColorStat2;
    return {
      defaultColor: (_states$textColorStat = states.textColorState) === null || _states$textColorStat === void 0 ? void 0 : _states$textColorStat.defaultColor,
      highlightColor: (_states$highlightStat = states.highlightState) === null || _states$highlightStat === void 0 ? void 0 : _states$highlightStat.activeColor,
      textColor: (_states$textColorStat2 = states.textColorState) === null || _states$textColorStat2 === void 0 ? void 0 : _states$textColorStat2.color
    };
  });
};
var getContrastRatio = function getContrastRatio(defaultColor, highlightColor, textColor) {
  try {
    var contrastRatio = (0, _colorContrast.getContrastRatio)(getForegroundColor(textColor, defaultColor), getBackgroundColor(highlightColor));
    return contrastRatio;
  } catch (_unused) {
    // if we failed to calculate the contrast ratio, return null
    return null;
  }
};
var getAccessibilityStatus = function getAccessibilityStatus(contrastRatio) {
  if (contrastRatio >= _constants.ACCESSIBLE_CONTRAST_RATIO) {
    return 'accessible';
  } else if (contrastRatio >= _constants.DIFFICULT_CONTRAST_RATIO) {
    return 'difficultToRead';
  } else {
    return 'inaccessible';
  }
};
var AccessibilityStatus = function AccessibilityStatus(_ref) {
  var accessibilityStatus = _ref.accessibilityStatus,
    formatMessage = _ref.formatMessage;
  if (accessibilityStatus === 'accessible') {
    return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
      as: "span",
      size: "small",
      color: "color.text.success"
    }, formatMessage(_messages.colorAccessibilityMessages.accessibleLabel));
  } else if (accessibilityStatus === 'difficultToRead') {
    return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
      as: "span",
      size: "small",
      color: "color.text.warning"
    }, formatMessage(_messages.colorAccessibilityMessages.difficultToReadLabel));
  } else {
    return /*#__PURE__*/_react.default.createElement(_compiled.Text, {
      as: "span",
      size: "small",
      color: "color.text.danger"
    }, formatMessage(_messages.colorAccessibilityMessages.inaccessibleLabel));
  }
};
var styles = {
  container: "_19itglyw _19pku2gc _ca0q1b66 _n3td1b66 _19bvu2gc _u5f31b66 _1e0c1txw _4cvr1h6o _1bah1yb4"
};
var ColorAccessibilityMenuItem = exports.ColorAccessibilityMenuItem = function ColorAccessibilityMenuItem(_ref2) {
  var api = _ref2.api;
  var _useIntl = (0, _reactIntl.useIntl)(),
    formatMessage = _useIntl.formatMessage;
  var _useColorAccessibilit = useColorAccessibilityState(api),
    defaultColor = _useColorAccessibilit.defaultColor,
    highlightColor = _useColorAccessibilit.highlightColor,
    textColor = _useColorAccessibilit.textColor;
  var contrastRatio = getContrastRatio(defaultColor, highlightColor, textColor);
  if (contrastRatio === null) {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
  }
  var accessibilityStatus = getAccessibilityStatus(contrastRatio);
  var tooltipContent = function tooltipContent(accessibilityStatus) {
    if (accessibilityStatus === 'accessible') {
      return formatMessage(_messages.colorAccessibilityMessages.accessibleTooltip);
    } else if (accessibilityStatus === 'difficultToRead') {
      return formatMessage(_messages.colorAccessibilityMessages.difficultToReadTooltip);
    } else {
      return formatMessage(_messages.colorAccessibilityMessages.inaccessibleTooltip);
    }
  };
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
    xcss: styles.container
  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
    alignBlock: "center",
    space: "space.050"
  }, /*#__PURE__*/_react.default.createElement(_accessibility.default, {
    label: "",
    size: "medium"
  }), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
    as: "span",
    size: "small",
    color: "color.text.subtle"
  }, formatMessage(_messages.colorAccessibilityMessages.accessibility)), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
    as: "span",
    size: "small",
    color: "color.text.subtle",
    "aria-hidden": "true"
  }, "\u2022"), /*#__PURE__*/_react.default.createElement(AccessibilityStatus, {
    accessibilityStatus: accessibilityStatus,
    formatMessage: formatMessage
  })), /*#__PURE__*/_react.default.createElement(_new.IconButton, {
    icon: _questionCircle.default,
    shape: "circle",
    label: tooltipContent(accessibilityStatus),
    isTooltipDisabled: false,
    spacing: "compact",
    appearance: "subtle"
  }));
};