@lote-design-system/marketing-blocks/main/components/marketing/navbars/NavBar4.js

marketing blocks

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.NavBar4 = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _polished = require("polished");

var _icons = require("@lote-design-system/icons");

var _core = require("@lote-design-system/core");

var _svg = require("../svg");

// => Dependent styled-components
// Our main component depends upon the following styled-components
var NavBar = _styledComponents["default"].nav.withConfig({
  displayName: "NavBar4__NavBar",
  componentId: "rwivqw-0"
})(["padding:", " 0;", ";", ";", ";"], (0, _polished.rem)(16), function (_ref) {
  var fixed = _ref.fixed;

  if (fixed === 'top') {
    return (0, _styledComponents.css)(["position:fixed;top:0;right:0;left:0;z-index:1030;"]);
  } else if (fixed === 'bottom') {
    return (0, _styledComponents.css)(["position:fixed;right:0;bottom:0;left:0;z-index:1030;"]);
  } else {
    return (0, _styledComponents.css)([""]);
  }
}, function (_ref2) {
  var sticky = _ref2.sticky;

  if (sticky) {
    return (0, _styledComponents.css)(["@supports ((position:-webkit-sticky) or (position:sticky)){position:sticky;top:0;z-index:1020;}"]);
  } else {
    return (0, _styledComponents.css)([""]);
  }
}, function (_ref3) {
  var styled = _ref3.styled;

  if (styled) {
    return (0, _styledComponents.css)(["&{", ";}"], styled);
  }
});

var NavBarContainer = (0, _styledComponents["default"])(_core.Container).withConfig({
  displayName: "NavBar4__NavBarContainer",
  componentId: "rwivqw-1"
})(["max-width:", ";position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;"], function (_ref4) {
  var theme = _ref4.theme;
  return theme.maxContainerWidth;
});

var NavBarBrand = _styledComponents["default"].a.withConfig({
  displayName: "NavBar4__NavBarBrand",
  componentId: "rwivqw-2"
})(["display:inline-flex;align-items:center;padding:", " 0;white-space:nowrap;margin-right:", ";> svg,> img{width:56px;height:56px;}"], (0, _polished.rem)(4), (0, _polished.rem)(64));

var NavBarButtonToggler = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "NavBar4__NavBarButtonToggler",
  componentId: "rwivqw-3"
})(["width:48px;height:48px;padding:", " ", ";display:inline-flex;justify-content:center;align-items:center;", "{display:none;}"], (0, _polished.rem)(4), (0, _polished.rem)(12), function (_ref5) {
  var theme = _ref5.theme;
  return theme.mediaQueries.lg;
});

var NavBarMenu = _styledComponents["default"].div.withConfig({
  displayName: "NavBar4__NavBarMenu",
  componentId: "rwivqw-4"
})(["flex-basis:100%;", " flex-grow:1;align-items:center;", "{display:flex;flex-basis:auto;flex-grow:1;}@media (max-width:991px){display:block;position:absolute;top:0;width:calc(100% - 64px);transform-origin:top right;background-color:#fff;box-shadow:", ";border-radius:4px;transform:scale(0.95);opacity:0;visibility:hidden;transition:visibility 0s,transform 0.1s cubic-bezier(0,0,0.2,1),opacity 0.1s cubic-bezier(0,0,0.2,1);", "}"], ''
/* breaks the justify-content: space-between property */
, function (_ref6) {
  var theme = _ref6.theme;
  return theme.mediaQueries.lg;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.boxShadows.md;
}, function (props) {
  return props.active ? (0, _styledComponents.css)(["opacity:1;visibility:visible;transform:scale(1);"]) : (0, _styledComponents.css)([""]);
});

var NavBarCloseWrapper = _styledComponents["default"].div.withConfig({
  displayName: "NavBar4__NavBarCloseWrapper",
  componentId: "rwivqw-5"
})(["display:none;@media (max-width:991px){display:flex;flex-wrap:wrap;align-items:center;padding:8px 12px;> div{display:flex;flex:1 0 0;}> div:last-child{justify-content:flex-end;}}"]);

var NavBarMobileBrand = _styledComponents["default"].a.withConfig({
  displayName: "NavBar4__NavBarMobileBrand",
  componentId: "rwivqw-6"
})(["color:", ";display:inline-flex;align-items:center;padding:", " 0;white-space:nowrap;> svg,> img{width:56px;height:56px;}"], function (_ref8) {
  var colors = _ref8.theme.colors;
  return colors.primary;
}, (0, _polished.rem)(4));

var NavBarMobileCloseButton = (0, _styledComponents["default"])(_core.Button).withConfig({
  displayName: "NavBar4__NavBarMobileCloseButton",
  componentId: "rwivqw-7"
})(["width:46px;height:46px;padding:", ";border-radius:50%;font-size:18px;"], (0, _polished.rem)(4));

var NavBarStart = _styledComponents["default"].ul.withConfig({
  displayName: "NavBar4__NavBarStart",
  componentId: "rwivqw-8"
})(["", " display:flex;", " flex-direction:column;margin-bottom:0;padding-left:0;list-style:none;", "{flex-direction:row;}"], ''
/* Main properties */
, ''
/* Default it will always vertical */
, function (_ref9) {
  var theme = _ref9.theme;
  return theme.mediaQueries.lg;
});

var NavBarStartLink = _styledComponents["default"].a.withConfig({
  displayName: "NavBar4__NavBarStartLink",
  componentId: "rwivqw-9"
})(["font-size:14px;color:", ";display:block;font-weight:500;padding:8px 16px;transition:color 0.4s linear;:hover{color:", ";}@media (max-width:991px){padding:12px 16px;}"], function (_ref10) {
  var colors = _ref10.theme.colors;
  return colors.text.primary;
}, function (_ref11) {
  var colors = _ref11.theme.colors;
  return colors.primary;
});

var NavBarStartItem = _styledComponents["default"].li.withConfig({
  displayName: "NavBar4__NavBarStartItem",
  componentId: "rwivqw-10"
})(["", " @media (max-width:991px){:last-child > ", "{margin-top:12px;text-align:center;transition:background-color 0.4s linear,border-color 0.4s linear,color 0.4s linear;color:", ";background-color:#f8f9fa;border-color:#f8f9fa;&:hover{color:", ";background-color:#e2e6ea;border-color:#e2e6ea;}&:not(:disabled):active{color:", ";background-color:#dae0e5;border-color:#dae0e5;}}}"], function (props) {
  return props.active ? (0, _styledComponents.css)(["> ", "{color:", ";}"], NavBarStartLink, function (_ref12) {
    var colors = _ref12.theme.colors;
    return colors.primary;
  }) : (0, _styledComponents.css)([""]);
}, NavBarStartLink, function (props) {
  return props.theme.colors.text.primary;
}, function (props) {
  return props.theme.colors.text.primary;
}, function (props) {
  return props.theme.colors.text.primary;
}); // <= End Dependent styled-components


var linkShape = {
  id: _propTypes["default"].number.isRequired,
  href: _propTypes["default"].string.isRequired,
  text: _propTypes["default"].string.isRequired,
  active: _propTypes["default"].bool
};
var linkSchema = [{
  id: 1,
  href: '/',
  text: 'Home',
  active: true
}, {
  id: 2,
  href: '/',
  text: 'Features'
}, {
  id: 3,
  href: '/',
  text: 'Pricing'
}, {
  id: 4,
  href: '/',
  text: 'Services'
}, {
  id: 5,
  href: '/',
  text: 'About Us'
}];
var propTypes = {
  /** Render new styles on the NavBar Container. */
  styledCSS: _propTypes["default"].string,

  /** Position an element at the top/bottom of the viewport, from edge to edge. Fixed NavBars use
   position: fixed, meaning they’re pulled from the normal flow of the DOM and may require
   custom CSS (e.g., padding-top on the <body>) to prevent overlap with other elements. */
  fixed: _propTypes["default"].oneOf(['top', 'bottom']),

  /** Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. */
  sticky: _propTypes["default"].bool,

  /** The logo appear on the NavBar, default it will be ui-kit logo. */
  logo: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),

  /** Links appear on the NavBar, same links also render on the Drawer. */
  links: _propTypes["default"].arrayOf(_propTypes["default"].shape(linkShape)).isRequired
};
var defaultProps = {
  logo: /*#__PURE__*/_react["default"].createElement(_svg.LogoDefault, {
    fill: "#01a1ff"
  }),
  links: linkSchema
};
/**
 * Returns the JSX or null for the logo.
 * @param logo {*} - The logo will React.element or a path
 * @return {null|*} - Returns the JSX or null
 */

var renderLogo = function renderLogo(logo) {
  if (_react["default"].isValidElement(logo)) {
    return logo;
  } else if (typeof logo === 'string' && logo.length > 0) {
    return /*#__PURE__*/_react["default"].createElement("img", {
      src: logo,
      alt: "Brand Logo"
    });
  } else {
    return null;
  }
};
/**
 * Render schema for the NavBar
 * @param data {Array} - Schema for the NavBar
 * @return {null|*} - Returns the JSX or null
 */


var renderBody = function renderBody(data) {
  if (Array.isArray(data) && data.length > 0) {
    return /*#__PURE__*/_react["default"].createElement(NavBarStart, null, data.map(function (_ref13) {
      var id = _ref13.id,
          href = _ref13.href,
          text = _ref13.text,
          active = _ref13.active;
      return /*#__PURE__*/_react["default"].createElement(NavBarStartItem, {
        key: id,
        active: active
      }, /*#__PURE__*/_react["default"].createElement(NavBarStartLink, {
        href: href
      }, text));
    }));
  } else {
    return null;
  }
};

var NavBar4 = function NavBar4(props) {
  var styledCSS = props.styledCSS,
      fixed = props.fixed,
      sticky = props.sticky,
      Logo = props.logo,
      links = props.links,
      attributes = (0, _objectWithoutProperties2["default"])(props, ["styledCSS", "fixed", "sticky", "logo", "links"]);

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      visibleMenu = _useState2[0],
      setVisibleMenu = _useState2[1];

  var showMenu = function showMenu() {
    setVisibleMenu(!visibleMenu);
  };

  var onClose = function onClose() {
    setVisibleMenu(false);
  };

  return /*#__PURE__*/_react["default"].createElement(NavBar, (0, _extends2["default"])({
    styled: styledCSS,
    fixed: fixed,
    sticky: sticky
  }, attributes), /*#__PURE__*/_react["default"].createElement(NavBarContainer, {
    fluid: true
  }, /*#__PURE__*/_react["default"].createElement(NavBarBrand, {
    href: "/"
  }, renderLogo(Logo)), /*#__PURE__*/_react["default"].createElement(NavBarButtonToggler, {
    basic: true,
    variation: "fill",
    color: "primary",
    active: visibleMenu,
    onClick: showMenu
  }, visibleMenu ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
    name: "x"
  }) : /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
    name: "menu"
  })), /*#__PURE__*/_react["default"].createElement(NavBarMenu, {
    active: visibleMenu
  }, /*#__PURE__*/_react["default"].createElement(NavBarCloseWrapper, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(NavBarMobileBrand, {
    href: "/"
  }, renderLogo(Logo))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(NavBarMobileCloseButton, {
    basic: true,
    variation: "lightTransparent",
    onClick: onClose
  }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
    name: "x"
  })))), renderBody(links))));
};

exports.NavBar4 = NavBar4;
NavBar4.propTypes = propTypes;
NavBar4.defaultProps = defaultProps;