@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
70 lines (68 loc) • 2.14 kB
JavaScript
/**
* @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
import { css, jsx } from '@emotion/react';
import { useIntl } from 'react-intl';
import ErrorIcon from '@atlaskit/icon/core/status-error';
import SuccessIcon from '@atlaskit/icon/core/status-success';
import commonMessages from '../../messages';
const errorColor = css({
color: "var(--ds-text-danger, #AE2E24)"
});
const validColor = css({
color: "var(--ds-text-success, #4C6B1F)"
});
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
const messageStyle = () =>
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
css({
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: `${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'
});
const iconWrapperStyle = css({
display: 'flex',
marginRight: "var(--ds-space-050, 4px)"
});
export const HelperMessage = ({
children
}) => jsx("div", {
css: messageStyle
}, children);
export const ErrorMessage = ({
children
}) => {
const intl = useIntl();
return jsx("div", {
css: () => {
return [messageStyle(), errorColor];
}
}, jsx("span", {
css: iconWrapperStyle
}, jsx(ErrorIcon, {
label: intl.formatMessage(commonMessages.error)
})), children);
};
export const ValidMessage = ({
children
}) => {
const intl = useIntl();
return jsx("div", {
css: () => {
return [messageStyle(), validColor];
}
}, jsx("span", {
css: iconWrapperStyle
}, jsx(SuccessIcon, {
label: intl.formatMessage(commonMessages.success)
})), children);
};