antd-color-editor/es/Accessibility/W3cShield.js

An open-source color editor for designing color system

var _templateObject;
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
import { Tooltip } from 'antd';
import { memo } from 'react';
import styled from 'styled-components';
import { readable } from "./..";

/******************************************************
 *********************** Style *************************
 ******************************************************/
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Tag = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n\n  margin-left: 4px;\n  padding: 2px 4px;\n\n  font-size: 10px;\n  line-height: 1;\n\n  background: ", ";\n  border-radius: 4px;\n"])), function (_ref) {
  var theme = _ref.theme;
  return theme.colorPrimary;
});

/******************************************************
 ************************* Dom *************************
 ******************************************************/

var W3cShield = /*#__PURE__*/memo(function (_ref2) {
  var color1 = _ref2.color1,
    color2 = _ref2.color2;
  var readableData = readable(color1, color2);
  var url = readableData.shield;
  var resultText = function resultText(result) {
    return /*#__PURE__*/_jsx("span", {
      style: {
        color: result ? '#52c41a' : 'gray'
      },
      children: result ? 'pass' : 'fail'
    });
  };
  var text = /*#__PURE__*/_jsxs("div", {
    children: [/*#__PURE__*/_jsxs("div", {
      children: ["CTS \u21E2 ", readableData.cts]
    }), /*#__PURE__*/_jsxs("div", {
      children: ["AA", /*#__PURE__*/_jsx(Tag, {
        children: "large"
      }), " \u21E2 ", resultText(readableData.aaLarge)]
    }), /*#__PURE__*/_jsxs("div", {
      children: ["AA", /*#__PURE__*/_jsx(Tag, {
        children: "small"
      }), " \u21E2 ", resultText(readableData.aaaSmall)]
    }), /*#__PURE__*/_jsxs("div", {
      children: ["AAA", /*#__PURE__*/_jsx(Tag, {
        children: "large"
      }), " \u21E2 ", resultText(readableData.aaaLarge)]
    }), /*#__PURE__*/_jsxs("div", {
      children: ["AAA", /*#__PURE__*/_jsx(Tag, {
        children: "small"
      }), " \u21E2 ", resultText(readableData.aaaSmall)]
    })]
  });
  return /*#__PURE__*/_jsx(Tooltip, {
    title: text,
    children: /*#__PURE__*/_jsx("a", {
      href: "https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef",
      rel: "noreferrer",
      target: "_blank",
      children: /*#__PURE__*/_jsx("img", {
        src: url
      })
    })
  });
});
export default W3cShield;