@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;