@massds/mayflower-react/dist/ErrorMessage/index.mjs

React versions of Mayflower design system UI components

/**
 * ErrorMessage module.
 * @module @massds/mayflower-react/ErrorMessage
 * @requires module:@massds/mayflower-assets/scss/01-atoms/error-msg
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
 * @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
 */
import React from "react";
import PropTypes from "prop-types";
// eslint-disable-next-line import/no-unresolved
import IconInputSuccess from "../Icon/IconInputSuccess.mjs";
// eslint-disable-next-line import/no-unresolved
import IconInputError from "../Icon/IconInputError.mjs";
const ErrorMessage = _ref => {
  let inputId = _ref.inputId,
    error = _ref.error,
    success = _ref.success,
    status = _ref.status;
  const isSuccessful = status === 'success';
  return /*#__PURE__*/React.createElement("div", {
    htmlFor: inputId,
    "aria-labelledby": inputId,
    className: "ma__error-msg has-error " + (isSuccessful ? 'ma__error-msg--success' : ''),
    role: isSuccessful ? 'presentation' : 'alert'
  }, isSuccessful ? /*#__PURE__*/React.createElement(IconInputSuccess, {
    width: 16,
    height: 18
  }) : /*#__PURE__*/React.createElement(IconInputError, {
    width: 16,
    height: 18
  }), /*#__PURE__*/React.createElement("span", null, isSuccessful ? success : error));
};
ErrorMessage.propTypes = process.env.NODE_ENV !== "production" ? {
  /** The ID of the corresponding input field */
  inputId: PropTypes.string.isRequired,
  /** The error message for the corresponding input field */
  error: PropTypes.string.isRequired,
  /** The sucess message for the corresponding input field */
  success: PropTypes.string,
  /** Validation status */
  status: PropTypes.oneOf(['error', 'success'])
} : {};
ErrorMessage.defaultProps = {
  status: 'error',
  success: 'Success!'
};
export default ErrorMessage;