@massds/mayflower-react
Version:
React versions of Mayflower design system UI components
102 lines • 5.15 kB
JavaScript
/**
* 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
*/
import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import Image from "../Image/index.mjs";
import IconCaretDown from "../Icon/IconCaretDown.mjs";
import IconBuilding from "../Icon/IconBuilding.mjs";
import IconLock from "../Icon/IconLock.mjs";
const BrandBanner = _ref => {
var _classNames, _classNames2;
let _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;
const lightTheme = bgTheme === 'light';
const brandBannerClasses = classNames('ma__brand-banner', (_classNames = {}, _classNames["ma__brand-banner--" + bgColor + "-bg-" + bgTheme] = bgColor && bgTheme, _classNames));
const brandBannerToggleColor = bgTheme === 'light' ? bgColor : 'c-white';
const _React$useState = React.useState(false),
hovered = _React$useState[0],
setHovered = _React$useState[1];
const _React$useState2 = React.useState(false),
expanded = _React$useState2[0],
setExpanded = _React$useState2[1];
const brandBannerExpansionClasses = classNames('ma__brand-banner-expansion', {
'ma__brand-banner-expansion--expanded': expanded
});
const handleOnToggle = () => {
setExpanded(prevExpanded => !prevExpanded);
};
const brandBannerToggleClasses = classNames('ma__brand-banner-button ma__button-icon ma__button-icon--quaternary', (_classNames2 = {}, _classNames2["ma__button-icon--" + brandBannerToggleColor] = bgColor && bgTheme, _classNames2.active = hovered, _classNames2));
const contentId = 'ma__brand-banner-content';
return /*#__PURE__*/React.createElement("div", {
className: brandBannerClasses
}, /*#__PURE__*/React.createElement("button", {
type: "button",
className: "ma__brand-banner-container",
id: "ma__brand-banner-button",
onClick: handleOnToggle,
onMouseEnter: () => setHovered(true),
onMouseLeave: () => setHovered(false),
"aria-controls": contentId,
"aria-expanded": expanded
}, hasSeal && /*#__PURE__*/React.createElement(Image, {
className: "ma__brand-banner-logo",
src: seal,
alt: "Massachusetts State Seal"
}), /*#__PURE__*/React.createElement("span", {
className: "ma__brand-banner-text"
}, /*#__PURE__*/React.createElement("span", null, text), /*#__PURE__*/React.createElement("span", null, "\xA0\xA0\xA0"), /*#__PURE__*/React.createElement("span", {
className: brandBannerToggleClasses
}, /*#__PURE__*/React.createElement("span", null, "Here's how you know"), /*#__PURE__*/React.createElement(IconCaretDown, {
height: 16,
width: 16
})))), /*#__PURE__*/React.createElement("ul", {
className: brandBannerExpansionClasses,
id: contentId,
role: "region",
"aria-labelledby": "ma__brand-banner-button"
}, /*#__PURE__*/React.createElement("li", {
className: "ma__brand-banner-expansion-item"
}, /*#__PURE__*/React.createElement(IconBuilding, {
fill: lightTheme ? '#14558F' : '#fff',
bold: false
}), /*#__PURE__*/React.createElement("div", {
className: "ma__brand-banner-expansion-item-content"
}, /*#__PURE__*/React.createElement("p", null, "Official websites use .mass.gov"), /*#__PURE__*/React.createElement("p", null, "A .mass.gov website belongs to an official government organization in Massachusetts."))), /*#__PURE__*/React.createElement("li", {
className: "ma__brand-banner-expansion-item"
}, /*#__PURE__*/React.createElement(IconLock, {
fill: lightTheme ? '#388557' : '#fff',
bold: false
}), /*#__PURE__*/React.createElement("div", {
className: "ma__brand-banner-expansion-item-content"
}, /*#__PURE__*/React.createElement("p", null, "Secure websites use HTTPS certificate"), /*#__PURE__*/React.createElement("p", null, "A lock icon (", /*#__PURE__*/React.createElement(IconLock, {
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.string,
/** Banner text */
text: PropTypes.string,
/** Whether to include seal */
hasSeal: PropTypes.bool,
/** Background color option */
bgColor: PropTypes.oneOf(['', 'c-primary', 'c-primary-alt', 'c-gray']),
/** Background color theme */
bgTheme: PropTypes.oneOf(['', 'light', 'dark'])
} : {};
export default BrandBanner;