@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
58 lines (57 loc) • 3.22 kB
JavaScript
;
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(e) { return e && e.__esModule ? e : { "default": e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /**
* EmergencyHeader module.
* @module @massds/mayflower-react/EmergencyHeader
* @requires module:@massds/mayflower-assets/scss/02-molecules/emergency-header
* @requires module:@massds/mayflower-assets/scss/01-atoms/svg-icons
* @requires module:@massds/mayflower-assets/scss/01-atoms/svg-loc-icons
*/ // eslint-disable-next-line import/no-unresolved
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 = exports["default"] = EmergencyHeader;
module.exports = exports.default;