UNPKG

vcc-ui

Version:

A React library for building user interfaces at Volvo Cars

56 lines (54 loc) 1.95 kB
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']) };