@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
54 lines (53 loc) • 2.66 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ValidMessage = exports.HelperMessage = exports.ErrorMessage = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
var _colors = require("@atlaskit/theme/colors");
var _typography = require("@atlaskit/theme/typography");
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
/** @jsx jsx */
var errorColor = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n"])), "var(--ds-text-danger, ".concat(_colors.R400, ")"));
var validColor = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n"])), "var(--ds-text-success, ".concat(_colors.G400, ")"));
var messageStyle = function messageStyle() {
return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n ", " font-weight: normal;\n color: ", ";\n margin-top: ", ";\n display: flex;\n justify-content: baseline;\n"])), (0, _typography.h200)(), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
};
var iconWrapperStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
var HelperMessage = exports.HelperMessage = function HelperMessage(_ref) {
var children = _ref.children;
return (0, _react.jsx)("div", {
css: messageStyle
}, children);
};
var ErrorMessage = exports.ErrorMessage = function ErrorMessage(_ref2) {
var children = _ref2.children;
return (0, _react.jsx)("div", {
css: function css() {
return [messageStyle(), errorColor];
}
}, (0, _react.jsx)("span", {
css: iconWrapperStyle
}, (0, _react.jsx)(_error.default, {
size: "small",
label: "error",
"aria-label": "error"
})), children);
};
var ValidMessage = exports.ValidMessage = function ValidMessage(_ref3) {
var children = _ref3.children;
return (0, _react.jsx)("div", {
css: function css() {
return [messageStyle(), validColor];
}
}, (0, _react.jsx)("span", {
css: iconWrapperStyle
}, (0, _react.jsx)(_success.default, {
size: "small",
label: "success"
})), children);
};