@zohodesk/dot/lib/v1/form/fields/ValidationMessage/ValidationMessage.js

In this Library, we Provide Some Basic Components to Build Your Application

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _defaultProps = require("./props/defaultProps");

var _propTypes = require("./props/propTypes");

var _Label = _interopRequireDefault(require("@zohodesk/components/es/v1/Label/Label"));

var _LabelColorsModule = _interopRequireDefault(require("@zohodesk/components/es/Label/LabelColors.module.css"));

var _ValidationMessageModule = _interopRequireDefault(require("../../../../form/fields/ValidationMessage/ValidationMessage.module.css"));

var _icons = require("@zohodesk/icons");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var ValidationMessage = function ValidationMessage(props) {
  var palette = props.palette,
      text = props.text,
      htmlFor = props.htmlFor,
      onClick = props.onClick,
      type = props.type,
      size = props.size,
      dataId = props.dataId,
      clipped = props.clipped,
      a11y = props.a11y,
      tooltip = props.tooltip,
      dataSelectorId = props.dataSelectorId;
  var _a11y$role = a11y.role,
      role = _a11y$role === void 0 ? 'alert' : _a11y$role;
  return /*#__PURE__*/_react["default"].createElement("div", {
    role: role,
    onClick: onClick,
    className: "".concat(type === 'primary' ? _ValidationMessageModule["default"].primary : _ValidationMessageModule["default"].secondary),
    "data-id": "errorMsgContainer",
    "data-test-id": "errorMsgContainer",
    "data-selector-id": dataSelectorId
  }, /*#__PURE__*/_react["default"].createElement(_Label["default"], {
    text: text,
    htmlFor: htmlFor,
    palette: palette,
    size: size,
    dataId: dataId,
    clipped: clipped,
    title: clipped ? text : '',
    customClass: _ValidationMessageModule["default"].lable
  }), tooltip ? /*#__PURE__*/_react["default"].createElement("span", {
    className: "".concat(_ValidationMessageModule["default"].icon, " ").concat(_LabelColorsModule["default"][palette]),
    "data-title": tooltip
  }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
    name: "ZD-information57",
    size: "14"
  })) : null);
};

var _default = ValidationMessage;
exports["default"] = _default;
ValidationMessage.propTypes = _propTypes.propTypes;
ValidationMessage.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
//   ValidationMessage.docs = {
//     componentGroup: 'Form Fields',
//     folderName: 'Style Guide'
//   };
// }