@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
48 lines (47 loc) • 2.06 kB
JavaScript
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
/** @jsx jsx */
import { css, jsx } from '@emotion/react';
import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
import ErrorIcon from '@atlaskit/icon/glyph/error';
import { G400, N200, R400 } from '@atlaskit/theme/colors';
import { h200 } from '@atlaskit/theme/typography';
var errorColor = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n"])), "var(--ds-text-danger, ".concat(R400, ")"));
var validColor = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n color: ", ";\n"])), "var(--ds-text-success, ".concat(G400, ")"));
var messageStyle = function messageStyle() {
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", " font-weight: normal;\n color: ", ";\n margin-top: ", ";\n display: flex;\n justify-content: baseline;\n"])), h200(), "var(--ds-text-subtlest, ".concat(N200, ")"), "var(--ds-space-050, 4px)");
};
var iconWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
export var HelperMessage = function HelperMessage(_ref) {
var children = _ref.children;
return jsx("div", {
css: messageStyle
}, children);
};
export var ErrorMessage = function ErrorMessage(_ref2) {
var children = _ref2.children;
return jsx("div", {
css: function css() {
return [messageStyle(), errorColor];
}
}, jsx("span", {
css: iconWrapperStyle
}, jsx(ErrorIcon, {
size: "small",
label: "error",
"aria-label": "error"
})), children);
};
export var ValidMessage = function ValidMessage(_ref3) {
var children = _ref3.children;
return jsx("div", {
css: function css() {
return [messageStyle(), validColor];
}
}, jsx("span", {
css: iconWrapperStyle
}, jsx(SuccessIcon, {
size: "small",
label: "success"
})), children);
};