vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
62 lines (60 loc) • 2.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Message = Message;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = require("prop-types");
var _react = _interopRequireDefault(require("react"));
var _useTheme = require("../../styling/use-theme");
var _inline = require("../inline");
var _text = require("../text");
// TODO: move to icons once they're ready
const ErrorIcon = () => {
return /*#__PURE__*/_react.default.createElement(_inline.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.default.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)
*/
function Message(_ref) {
let {
children,
id,
type = 'default'
} = _ref;
const theme = (0, _useTheme.useTheme)();
return /*#__PURE__*/_react.default.createElement(_text.Text, (0, _extends2.default)({
variant: "bates",
id: id,
extend: {
color: type === 'error' ? theme.color.foreground.alert : theme.color.foreground.secondary
}
}, type === 'error' && {
role: 'alert'
}), type === 'error' ? /*#__PURE__*/_react.default.createElement(ErrorIcon, null) : null, children);
}
Message.propTypes = {
id: _propTypes.string,
/** The message text that is displayed */
children: _propTypes.string,
/** Sets the type of the message, e.g. an error is displayed in red with an error icon */
type: (0, _propTypes.oneOf)(['error', 'description'])
};