@massds/mayflower-react/dist/EmergencyHeader/index.js

React versions of Mayflower design system UI components

"use strict";

exports.__esModule = true;
exports["default"] = void 0;

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var _is = _interopRequireDefault(require("is"));

var _IconAlert = _interopRequireDefault(require("../Icon/IconAlert.js"));

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

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var EmergencyHeader = function EmergencyHeader(props) {
  var _classNames;

  var title = props.title,
      icon = props.icon,
      prefix = props.prefix,
      theme = props.theme,
      noWrap = props.noWrap;
  var linkArgs = {
    theme: theme,
    linkClasses: 'ma__content-link'
  };
  var h2Classes = (0, _classnames["default"])((_classNames = {
    'ma__emergency-header': true
  }, _classNames["ma__emergency-header--" + theme] = theme, _classNames['ma__emergency-header--mobile-wrap'] = !noWrap, _classNames));
  return /*#__PURE__*/_react["default"].createElement("h2", {
    className: h2Classes
  }, (icon || prefix) && /*#__PURE__*/_react["default"].createElement("span", {
    className: "ma__emergency-header__label"
  }, icon, /*#__PURE__*/_react["default"].createElement("span", null, prefix)), /*#__PURE__*/_react["default"].createElement("span", {
    className: "ma__emergency-header__title"
  }, _is["default"].fn(title) ? title(_extends({}, linkArgs)) : title));
};

EmergencyHeader.propTypes = process.env.NODE_ENV !== "production" ? {
  /** A function whose return value is displayed in the text to the right of the divider bar. */
  title: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].string]).isRequired,

  /** A string that controls different color themes for the component. */
  theme: _propTypes["default"].oneOf(['c-warning', 'c-primary-alt', 'c-primary', 'c-gray', 'c-error']),

  /** A SVG icon to display to the left of the prefix text. */
  icon: _propTypes["default"].element,

  /** An optional string displayed to the left of the divider bar. */
  prefix: _propTypes["default"].string,

  /** Not to wrap alerts header prefix and text into two lines on mobile, this can save vertical space when the alert header is short and can fit in one line on mobible */
  noWrap: _propTypes["default"].bool
} : {};
EmergencyHeader.defaultProps = {
  theme: 'c-warning',
  prefix: 'Emergency Alerts',
  icon: /*#__PURE__*/_react["default"].createElement(_IconAlert["default"], null)
};
var _default = EmergencyHeader;
exports["default"] = _default;
module.exports = exports.default;