@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
54 lines (53 loc) • 1.32 kB
JavaScript
/** @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';
const errorColor = css`
color: ${`var(--ds-text-danger, ${R400})`};
`;
const validColor = css`
color: ${`var(--ds-text-success, ${G400})`};
`;
const messageStyle = () => css`
${h200()} font-weight: normal;
color: ${`var(--ds-text-subtlest, ${N200})`};
margin-top: ${"var(--ds-space-050, 4px)"};
display: flex;
justify-content: baseline;
`;
const iconWrapperStyle = css`
display: flex;
margin-right: ${"var(--ds-space-050, 4px)"};
`;
export const HelperMessage = ({
children
}) => jsx("div", {
css: messageStyle
}, children);
export const ErrorMessage = ({
children
}) => jsx("div", {
css: () => {
return [messageStyle(), errorColor];
}
}, jsx("span", {
css: iconWrapperStyle
}, jsx(ErrorIcon, {
size: "small",
label: "error",
"aria-label": "error"
})), children);
export const ValidMessage = ({
children
}) => jsx("div", {
css: () => {
return [messageStyle(), validColor];
}
}, jsx("span", {
css: iconWrapperStyle
}, jsx(SuccessIcon, {
size: "small",
label: "success"
})), children);