@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
54 lines • 2.67 kB
JavaScript
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
*/
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import is from "is";
// eslint-disable-next-line import/no-unresolved
import IconAlert from "../Icon/IconAlert.mjs";
const EmergencyHeader = props => {
var _classNames;
const title = props.title,
icon = props.icon,
prefix = props.prefix,
theme = props.theme,
noWrap = props.noWrap;
const linkArgs = {
theme: theme,
linkClasses: 'ma__content-link'
};
const h2Classes = classNames((_classNames = {
'ma__emergency-header': true
}, _classNames["ma__emergency-header--" + theme] = theme, _classNames['ma__emergency-header--mobile-wrap'] = !noWrap, _classNames));
return /*#__PURE__*/React.createElement("h2", {
className: h2Classes
}, (icon || prefix) && /*#__PURE__*/React.createElement("span", {
className: "ma__emergency-header__label"
}, icon, /*#__PURE__*/React.createElement("span", null, prefix)), /*#__PURE__*/React.createElement("span", {
className: "ma__emergency-header__title"
}, is.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.oneOfType([PropTypes.func, PropTypes.string]).isRequired,
/** A string that controls different color themes for the component. */
theme: PropTypes.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.element,
/** An optional string displayed to the left of the divider bar. */
prefix: PropTypes.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.bool
} : {};
EmergencyHeader.defaultProps = {
theme: 'c-warning',
prefix: 'Emergency Alerts',
icon: /*#__PURE__*/React.createElement(IconAlert, null)
};
export default EmergencyHeader;