vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
56 lines (54 loc) • 1.95 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import { oneOf, string } from 'prop-types';
import React from 'react';
import { useTheme } from '../../styling/use-theme';
import { Inline } from '../inline';
import { Text } from '../text';
// TODO: move to icons once they're ready
const ErrorIcon = () => {
return /*#__PURE__*/React.createElement(Inline, {
as: "svg",
width: "16",
height: "16",
viewBox: "0 0 16 16",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
extend: {
boxSizing: 'content-box',
transform: 'translateX(-2px) translateY(4px)',
paddingRight: 2
}
}, /*#__PURE__*/React.createElement("path", {
fillRule: "evenodd",
clipRule: "evenodd",
d: "M8 13C10.7614 13 13 10.7614 13 8C13 5.23858 10.7614 3 8 3C5.23858 3 3 5.23858 3 8C3 10.7614 5.23858 13 8 13ZM8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14ZM7.5 9.9V4.5H8.5V9.9H7.5ZM7.5 10.5V11.7H8.5V10.5H7.5Z",
fill: "#BF2012"
}));
};
/**
* @deprecated Use `import { FormMessage } from '@volvo-cars/react-forms'` instead. See [FormMessage](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-checkbox--docs)
*/
export function Message(_ref) {
let {
children,
id,
type = 'default'
} = _ref;
const theme = useTheme();
return /*#__PURE__*/React.createElement(Text, _extends({
variant: "bates",
id: id,
extend: {
color: type === 'error' ? theme.color.foreground.alert : theme.color.foreground.secondary
}
}, type === 'error' && {
role: 'alert'
}), type === 'error' ? /*#__PURE__*/React.createElement(ErrorIcon, null) : null, children);
}
Message.propTypes = {
id: string,
/** The message text that is displayed */
children: string,
/** Sets the type of the message, e.g. an error is displayed in red with an error icon */
type: oneOf(['error', 'description'])
};