@cbinsights/fds
Version:
Form: A design system by CB Insights
188 lines (160 loc) • 10.4 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _classcat = _interopRequireDefault(require("classcat"));
var _ActionsArrowDownIcon = _interopRequireDefault(require("../../icons/react/ActionsArrowDownIcon"));
var _ActionsArrowUpIcon = _interopRequireDefault(require("../../icons/react/ActionsArrowUpIcon"));
var _ = require("./..");
var _HamburgerBarsIcon = _interopRequireDefault(require("../../icons/react/HamburgerBarsIcon"));
var _DenyIcon = _interopRequireDefault(require("../../icons/react/DenyIcon"));
var _CBI_Logo_White = _interopRequireDefault(require("../../assets/images/CBI_Logo_White.svg"));
var _constants = require("./constants");
var _NavbarDropdown = _interopRequireDefault(require("./NavbarDropdown"));
var _DEFAULT_STATE;
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
var NAV_LIST = 'navList';
var WHO_WE_SERVE = 'whoWeServe';
var HOW_WE_HELP = 'howWeHelp';
var WHAT_WE_OFFER = 'whatWeOffer';
var ABOUT_US = 'aboutUs';
var DEFAULT_STATE = (_DEFAULT_STATE = {}, (0, _defineProperty2.default)(_DEFAULT_STATE, NAV_LIST, false), (0, _defineProperty2.default)(_DEFAULT_STATE, WHO_WE_SERVE, false), (0, _defineProperty2.default)(_DEFAULT_STATE, HOW_WE_HELP, false), (0, _defineProperty2.default)(_DEFAULT_STATE, WHAT_WE_OFFER, false), (0, _defineProperty2.default)(_DEFAULT_STATE, ABOUT_US, false), _DEFAULT_STATE);
var DefaultLogo = function DefaultLogo() {
return /*#__PURE__*/_react.default.createElement("img", {
className: "fdsNavbar-navLogo",
width: "168",
height: "20",
alt: "CB Insights",
src: _CBI_Logo_White.default
});
};
var NavBar = function NavBar(_ref) {
var site = _ref.site,
utmContext = _ref.utmContext,
SearchComponent = _ref.SearchComponent,
_ref$LogoComponent = _ref.LogoComponent,
LogoComponent = _ref$LogoComponent === void 0 ? DefaultLogo : _ref$LogoComponent;
var _useState = (0, _react.useState)(DEFAULT_STATE),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
showClass = _useState2[0],
setShowClass = _useState2[1];
var handleClick = function handleClick(sectionName) {
setShowClass(function (prevState) {
return _objectSpread(_objectSpread({}, prevState), {}, (0, _defineProperty2.default)({}, sectionName, !showClass[sectionName]));
});
};
var getArrowUpOrDown = (0, _react.useCallback)(function (isOpen, sectionName) {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: 'fdsNavbar-mobileIconButton'
}, /*#__PURE__*/_react.default.createElement(_.IconButton, {
Icon: isOpen ? _ActionsArrowUpIcon.default : _ActionsArrowDownIcon.default,
onClick: function onClick() {
return handleClick(sectionName);
},
label: "dropdown"
})), /*#__PURE__*/_react.default.createElement("div", {
className: 'fdsNavbar-iconButton'
}, /*#__PURE__*/_react.default.createElement(_ActionsArrowDownIcon.default, null)));
}, [showClass]);
return /*#__PURE__*/_react.default.createElement("header", {
id: "masthead",
className: "fdsNavbar-nav",
role: "navigation"
}, /*#__PURE__*/_react.default.createElement("div", {
className: 'fdsNavbar-topContainer'
}, /*#__PURE__*/_react.default.createElement("ul", {
id: "utility-menu",
className: 'fdsNavbar-utilityBar'
}, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
href: "".concat(site, "/what-we-offer/technology-vendors/"),
className: 'fdsNavbar-utilityBarLink'
}, "Technology Vendors")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
href: "".concat(site, "/research/"),
className: 'fdsNavbar-utilityBarLink'
}, "Recent Research")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
href: "".concat(site, "/newsletter/"),
className: 'fdsNavbar-utilityBarLink'
}, "Newsletter")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
href: "".concat(site, "/media-support/"),
className: 'fdsNavbar-utilityBarLink'
}, "Media Support")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("a", {
href: "".concat(site, "/login"),
className: 'fdsNavbar-utilityBarLink'
}, "Login")))), /*#__PURE__*/_react.default.createElement("div", {
className: 'fdsNavbar-container'
}, /*#__PURE__*/_react.default.createElement("div", {
className: 'fdsNavbar-siteBranding'
}, /*#__PURE__*/_react.default.createElement("a", {
href: site
}, /*#__PURE__*/_react.default.createElement(LogoComponent, null))), SearchComponent, /*#__PURE__*/_react.default.createElement("nav", {
id: "site-navigation",
className: 'fdsNavbar-navigation'
}, /*#__PURE__*/_react.default.createElement("div", {
className: 'fdsNavbar-navMenuButton'
}, /*#__PURE__*/_react.default.createElement(_.IconButton, {
size: "m",
Icon: showClass.navList ? _DenyIcon.default : _HamburgerBarsIcon.default,
onClick: function onClick() {
return handleClick(NAV_LIST);
},
theme: "ghost",
label: "Menu"
})), /*#__PURE__*/_react.default.createElement("div", {
className: 'fdsNavbar-navigationWrap'
}, /*#__PURE__*/_react.default.createElement("ul", {
id: "site-menu",
className: (0, _classcat.default)([{
'fdsNavbar-navShow': showClass.navList
}, 'fdsNavbar-navBar'])
}, /*#__PURE__*/_react.default.createElement("li", {
className: 'fdsNavbar-navBarListItem'
}, /*#__PURE__*/_react.default.createElement("div", {
className: 'fdsNavbar-dropdownItemLink'
}, "Who We Serve"), /*#__PURE__*/_react.default.createElement("span", {
className: 'fdsNavbar-dropdownButton'
}, getArrowUpOrDown(showClass.whoWeServe, WHO_WE_SERVE)), /*#__PURE__*/_react.default.createElement(_NavbarDropdown.default, {
content: (0, _constants.whoWeServeDropdown)(site),
showDropdown: showClass.whoWeServe
})), /*#__PURE__*/_react.default.createElement("li", {
className: 'fdsNavbar-navBarListItem'
}, /*#__PURE__*/_react.default.createElement("div", {
className: 'fdsNavbar-dropdownItemLink'
}, "How We Help"), /*#__PURE__*/_react.default.createElement("span", {
className: 'fdsNavbar-dropdownButton'
}, getArrowUpOrDown(showClass.howWeHelp, HOW_WE_HELP)), /*#__PURE__*/_react.default.createElement(_NavbarDropdown.default, {
content: (0, _constants.howWeHelpDropdown)(site),
showDropdown: showClass.howWeHelp
})), /*#__PURE__*/_react.default.createElement("li", {
className: 'fdsNavbar-navBarListItem'
}, /*#__PURE__*/_react.default.createElement("div", {
className: 'fdsNavbar-dropdownItemLink'
}, "What We Offer"), /*#__PURE__*/_react.default.createElement("span", {
className: 'fdsNavbar-dropdownButton'
}, getArrowUpOrDown(showClass.whatWeOffer, WHAT_WE_OFFER)), /*#__PURE__*/_react.default.createElement(_NavbarDropdown.default, {
content: (0, _constants.whatWeOfferDropdown)(site),
showDropdown: showClass.whatWeOffer
})), /*#__PURE__*/_react.default.createElement("li", {
className: 'fdsNavbar-navBarListItem'
}, /*#__PURE__*/_react.default.createElement("div", {
className: 'fdsNavbar-dropdownItemLink'
}, "About Us"), /*#__PURE__*/_react.default.createElement("span", {
className: 'fdsNavbar-dropdownButton'
}, getArrowUpOrDown(showClass.aboutUs, ABOUT_US)), /*#__PURE__*/_react.default.createElement(_NavbarDropdown.default, {
content: (0, _constants.aboutUsDropdown)(site),
showDropdown: showClass.aboutUs
}))), /*#__PURE__*/_react.default.createElement("a", {
href: "https://www.cbinsights.com/research-request-a-demo?".concat(utmContext),
className: 'fdsNavbar-requestDemoButton'
}, "Request a Demo")))));
};
var _default = /*#__PURE__*/(0, _react.memo)(NavBar);
exports.default = _default;