@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
80 lines (76 loc) • 2.95 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ValidMessage = exports.HelperMessage = exports.ErrorMessage = void 0;
var _react = require("@emotion/react");
var _reactIntl = require("react-intl");
var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
var _messages = _interopRequireDefault(require("../../messages"));
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
var errorColor = (0, _react.css)({
color: "var(--ds-text-danger, #AE2E24)"
});
var validColor = (0, _react.css)({
color: "var(--ds-text-success, #4C6B1F)"
});
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
var messageStyle = function messageStyle() {
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
(0, _react.css)({
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: "".concat(12 / 14, "em"),
fontStyle: 'inherit',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 16 / 12,
fontWeight: "var(--ds-font-weight-regular, 400)",
color: "var(--ds-text-subtlest, #6B6E76)",
marginTop: "var(--ds-space-050, 4px)",
display: 'flex',
justifyContent: 'baseline'
})
);
};
var iconWrapperStyle = (0, _react.css)({
display: 'flex',
marginRight: "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;
var intl = (0, _reactIntl.useIntl)();
return (0, _react.jsx)("div", {
css: function css() {
return [messageStyle(), errorColor];
}
}, (0, _react.jsx)("span", {
css: iconWrapperStyle
}, (0, _react.jsx)(_statusError.default, {
label: intl.formatMessage(_messages.default.error)
})), children);
};
var ValidMessage = exports.ValidMessage = function ValidMessage(_ref3) {
var children = _ref3.children;
var intl = (0, _reactIntl.useIntl)();
return (0, _react.jsx)("div", {
css: function css() {
return [messageStyle(), validColor];
}
}, (0, _react.jsx)("span", {
css: iconWrapperStyle
}, (0, _react.jsx)(_statusSuccess.default, {
label: intl.formatMessage(_messages.default.success)
})), children);
};