@financial-times/n-conversion-forms/dist/message.jsx

Containing jsx components and styles for forms included on Accounts and Acqusition apps (next-signup, next-profile, next-retention, etc).

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Message = Message;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
function Message(_ref) {
  var title = _ref.title,
    message = _ref.message,
    _ref$additional = _ref.additional,
    additional = _ref$additional === void 0 ? [] : _ref$additional,
    _ref$actions = _ref.actions,
    actions = _ref$actions === void 0 ? null : _ref$actions,
    name = _ref.name,
    target = _ref.target,
    isNotice = _ref.isNotice,
    isError = _ref.isError,
    isSuccess = _ref.isSuccess,
    isInform = _ref.isInform,
    isStaticMessage = _ref.isStaticMessage,
    isHidden = _ref.isHidden;
  var additionalMessages = additional.map(function (text, index) {
    return /*#__PURE__*/_react["default"].createElement("p", {
      className: "o-message__content--additional",
      key: index,
      dangerouslySetInnerHTML: {
        __html: text
      }
    });
  });
  var oMessageClassNames = (0, _classnames["default"])({
    'o-message': true,
    'o-message--inner': !isStaticMessage,
    'o-message--notice': isNotice && !isStaticMessage,
    'o-message--alert': !isNotice && !isStaticMessage,
    'o-message--error': isError,
    'o-message--success': !isError && isSuccess,
    'o-message--inform': !isError && !isSuccess && isInform,
    'o-message--neutral': !isError && !isSuccess && !isInform
  });
  var ncfClassNames = (0, _classnames["default"])('ncf__message', {
    ncf__hidden: isHidden
  });
  var callToActionsList = actions ? /*#__PURE__*/_react["default"].createElement("div", {
    className: "o-message__actions"
  }, actions.map(function (_ref2, index) {
    var link = _ref2.link,
      isSecondary = _ref2.isSecondary,
      text = _ref2.text;
    return /*#__PURE__*/_react["default"].createElement("a", {
      href: link,
      key: index,
      target: target,
      className: isSecondary ? 'o-message__actions__secondary' : 'o-message__actions__primary'
    }, text);
  })) : null;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: ncfClassNames,
    "data-message-name": name
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: oMessageClassNames,
    "data-o-component": "o-message"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "o-message__container"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "o-message__content"
  }, /*#__PURE__*/_react["default"].createElement("p", {
    className: "o-message__content-main"
  }, title ? /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-message__content-highlight"
  }, title) : null, /*#__PURE__*/_react["default"].createElement("span", {
    className: "o-message__content-detail",
    dangerouslySetInnerHTML: {
      __html: message
    }
  })), additionalMessages, callToActionsList))));
}
var actionType = _propTypes["default"].shape({
  link: _propTypes["default"].string.isRequired,
  isSecondary: _propTypes["default"].bool,
  text: _propTypes["default"].string,
  target: _propTypes["default"].oneOf(['_self'])
});
Message.propTypes = {
  title: _propTypes["default"].string,
  message: _propTypes["default"].string.isRequired,
  additional: _propTypes["default"].arrayOf(_propTypes["default"].string),
  actions: _propTypes["default"].arrayOf(actionType),
  name: _propTypes["default"].string,
  target: _propTypes["default"].string,
  isStaticMessage: _propTypes["default"].bool,
  isNotice: _propTypes["default"].bool,
  isError: _propTypes["default"].bool,
  isSuccess: _propTypes["default"].bool,
  isInform: _propTypes["default"].bool,
  isHidden: _propTypes["default"].bool
};