@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
115 lines (113 loc) • 6.13 kB
JavaScript
"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 _index = _interopRequireDefault(require("../Image/index.js"));
var _IconCaretDown = _interopRequireDefault(require("../Icon/IconCaretDown.js"));
var _IconBuilding = _interopRequireDefault(require("../Icon/IconBuilding.js"));
var _IconLock = _interopRequireDefault(require("../Icon/IconLock.js"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
/**
* BrandBanner module.
* @module @massds/mayflower-react/BrandBanner
* @requires module:@massds/mayflower-assets/scss/02-molecules/brand-banner
* @requires module:@massds/mayflower-assets/scss/01-atoms/button-with-icon
*/
var BrandBanner = function BrandBanner(_ref) {
var _classNames, _classNames2;
var _ref$hasSeal = _ref.hasSeal,
hasSeal = _ref$hasSeal === void 0 ? true : _ref$hasSeal,
_ref$bgTheme = _ref.bgTheme,
bgTheme = _ref$bgTheme === void 0 ? 'light' : _ref$bgTheme,
_ref$bgColor = _ref.bgColor,
bgColor = _ref$bgColor === void 0 ? 'c-primary' : _ref$bgColor,
_ref$seal = _ref.seal,
seal = _ref$seal === void 0 ? null : _ref$seal,
_ref$text = _ref.text,
text = _ref$text === void 0 ? 'An official website of the Commonwealth of Massachusetts' : _ref$text;
var lightTheme = bgTheme === 'light';
var brandBannerClasses = (0, _classnames["default"])('ma__brand-banner', (_classNames = {}, _classNames["ma__brand-banner--" + bgColor + "-bg-" + bgTheme] = bgColor && bgTheme, _classNames));
var brandBannerToggleColor = bgTheme === 'light' ? bgColor : 'c-white';
var _React$useState = _react["default"].useState(false),
hovered = _React$useState[0],
setHovered = _React$useState[1];
var _React$useState2 = _react["default"].useState(false),
expanded = _React$useState2[0],
setExpanded = _React$useState2[1];
var brandBannerExpansionClasses = (0, _classnames["default"])('ma__brand-banner-expansion', {
'ma__brand-banner-expansion--expanded': expanded
});
var handleOnToggle = function handleOnToggle() {
setExpanded(function (prevExpanded) {
return !prevExpanded;
});
};
var brandBannerToggleClasses = (0, _classnames["default"])('ma__brand-banner-button ma__button-icon ma__button-icon--quaternary', (_classNames2 = {}, _classNames2["ma__button-icon--" + brandBannerToggleColor] = bgColor && bgTheme, _classNames2.active = hovered, _classNames2));
var contentId = 'ma__brand-banner-content';
return /*#__PURE__*/_react["default"].createElement("div", {
className: brandBannerClasses
}, /*#__PURE__*/_react["default"].createElement("button", {
type: "button",
className: "ma__brand-banner-container",
id: "ma__brand-banner-button",
onClick: handleOnToggle,
onMouseEnter: function onMouseEnter() {
return setHovered(true);
},
onMouseLeave: function onMouseLeave() {
return setHovered(false);
},
"aria-controls": contentId,
"aria-expanded": expanded
}, hasSeal && /*#__PURE__*/_react["default"].createElement(_index["default"], {
className: "ma__brand-banner-logo",
src: seal,
alt: "Massachusetts State Seal"
}), /*#__PURE__*/_react["default"].createElement("span", {
className: "ma__brand-banner-text"
}, /*#__PURE__*/_react["default"].createElement("span", null, text), /*#__PURE__*/_react["default"].createElement("span", null, "\xA0\xA0\xA0"), /*#__PURE__*/_react["default"].createElement("span", {
className: brandBannerToggleClasses
}, /*#__PURE__*/_react["default"].createElement("span", null, "Here's how you know"), /*#__PURE__*/_react["default"].createElement(_IconCaretDown["default"], {
height: 16,
width: 16
})))), /*#__PURE__*/_react["default"].createElement("ul", {
className: brandBannerExpansionClasses,
id: contentId,
role: "region",
"aria-labelledby": "ma__brand-banner-button"
}, /*#__PURE__*/_react["default"].createElement("li", {
className: "ma__brand-banner-expansion-item"
}, /*#__PURE__*/_react["default"].createElement(_IconBuilding["default"], {
fill: lightTheme ? '#14558F' : '#fff',
bold: false
}), /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__brand-banner-expansion-item-content"
}, /*#__PURE__*/_react["default"].createElement("p", null, "Official websites use .mass.gov"), /*#__PURE__*/_react["default"].createElement("p", null, "A .mass.gov website belongs to an official government organization in Massachusetts."))), /*#__PURE__*/_react["default"].createElement("li", {
className: "ma__brand-banner-expansion-item"
}, /*#__PURE__*/_react["default"].createElement(_IconLock["default"], {
fill: lightTheme ? '#388557' : '#fff',
bold: false
}), /*#__PURE__*/_react["default"].createElement("div", {
className: "ma__brand-banner-expansion-item-content"
}, /*#__PURE__*/_react["default"].createElement("p", null, "Secure websites use HTTPS certificate"), /*#__PURE__*/_react["default"].createElement("p", null, "A lock icon (", /*#__PURE__*/_react["default"].createElement(_IconLock["default"], {
width: 12,
height: 12
}), ") or https:// means you've safely connected to the official website. Share sensitive information only on official, secure websites.")))));
};
BrandBanner.propTypes = process.env.NODE_ENV !== "production" ? {
/** Banner state seal src.
* To ensure sufficient color contrast, pass in the gray seal for light bgTheme and the white seal for dark bgTheme. */
seal: _propTypes["default"].string,
/** Banner text */
text: _propTypes["default"].string,
/** Whether to include seal */
hasSeal: _propTypes["default"].bool,
/** Background color option */
bgColor: _propTypes["default"].oneOf(['', 'c-primary', 'c-primary-alt', 'c-gray']),
/** Background color theme */
bgTheme: _propTypes["default"].oneOf(['', 'light', 'dark'])
} : {};
var _default = exports["default"] = BrandBanner;
module.exports = exports.default;