@lote-design-system/marketing-blocks
Version:
259 lines (245 loc) • 9.33 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { rem } from 'polished';
import { Icon } from '@lote-design-system/icons';
import { Container, Button } from '@lote-design-system/core';
import { LogoDefault } from '../svg'; // => Dependent styled-components
// Our main component depends upon the following styled-components
const NavBar = styled.nav.withConfig({
displayName: "NavBar4__NavBar",
componentId: "rwivqw-0"
})(["padding:", " 0;", ";", ";", ";"], rem(16), ({
fixed
}) => {
if (fixed === 'top') {
return css(["position:fixed;top:0;right:0;left:0;z-index:1030;"]);
} else if (fixed === 'bottom') {
return css(["position:fixed;right:0;bottom:0;left:0;z-index:1030;"]);
} else {
return css([""]);
}
}, ({
sticky
}) => {
if (sticky) {
return css(["@supports ((position:-webkit-sticky) or (position:sticky)){position:sticky;top:0;z-index:1020;}"]);
} else {
return css([""]);
}
}, ({
styled
}) => {
if (styled) {
return css(["&{", ";}"], styled);
}
});
const NavBarContainer = styled(Container).withConfig({
displayName: "NavBar4__NavBarContainer",
componentId: "rwivqw-1"
})(["max-width:", ";position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;"], ({
theme
}) => theme.maxContainerWidth);
const NavBarBrand = styled.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;}"], rem(4), rem(64));
const NavBarButtonToggler = styled(Button).withConfig({
displayName: "NavBar4__NavBarButtonToggler",
componentId: "rwivqw-3"
})(["width:48px;height:48px;padding:", " ", ";display:inline-flex;justify-content:center;align-items:center;", "{display:none;}"], rem(4), rem(12), ({
theme
}) => theme.mediaQueries.lg);
const NavBarMenu = styled.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 */
, ({
theme
}) => theme.mediaQueries.lg, ({
theme
}) => theme.boxShadows.md, props => props.active ? css(["opacity:1;visibility:visible;transform:scale(1);"]) : css([""]));
const NavBarCloseWrapper = styled.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;}}"]);
const NavBarMobileBrand = styled.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;}"], ({
theme: {
colors
}
}) => colors.primary, rem(4));
const NavBarMobileCloseButton = styled(Button).withConfig({
displayName: "NavBar4__NavBarMobileCloseButton",
componentId: "rwivqw-7"
})(["width:46px;height:46px;padding:", ";border-radius:50%;font-size:18px;"], rem(4));
const NavBarStart = styled.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 */
, ({
theme
}) => theme.mediaQueries.lg);
const NavBarStartLink = styled.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;}"], ({
theme: {
colors
}
}) => colors.text.primary, ({
theme: {
colors
}
}) => colors.primary);
const NavBarStartItem = styled.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;}}}"], props => props.active ? css(["> ", "{color:", ";}"], NavBarStartLink, ({
theme: {
colors
}
}) => colors.primary) : css([""]), NavBarStartLink, props => props.theme.colors.text.primary, props => props.theme.colors.text.primary, props => props.theme.colors.text.primary); // <= End Dependent styled-components
const linkShape = {
id: PropTypes.number.isRequired,
href: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
active: PropTypes.bool
};
const 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'
}];
const propTypes = {
/** Render new styles on the NavBar Container. */
styledCSS: PropTypes.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.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.bool,
/** The logo appear on the NavBar, default it will be ui-kit logo. */
logo: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
/** Links appear on the NavBar, same links also render on the Drawer. */
links: PropTypes.arrayOf(PropTypes.shape(linkShape)).isRequired
};
const defaultProps = {
logo: /*#__PURE__*/React.createElement(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
*/
const renderLogo = logo => {
if (React.isValidElement(logo)) {
return logo;
} else if (typeof logo === 'string' && logo.length > 0) {
return /*#__PURE__*/React.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
*/
const renderBody = data => {
if (Array.isArray(data) && data.length > 0) {
return /*#__PURE__*/React.createElement(NavBarStart, null, data.map(({
id,
href,
text,
active
}) => /*#__PURE__*/React.createElement(NavBarStartItem, {
key: id,
active: active
}, /*#__PURE__*/React.createElement(NavBarStartLink, {
href: href
}, text))));
} else {
return null;
}
};
export const NavBar4 = props => {
const {
styledCSS,
fixed,
sticky,
logo: Logo,
links
} = props,
attributes = _objectWithoutProperties(props, ["styledCSS", "fixed", "sticky", "logo", "links"]);
const [visibleMenu, setVisibleMenu] = useState(false);
const showMenu = () => {
setVisibleMenu(!visibleMenu);
};
const onClose = () => {
setVisibleMenu(false);
};
return /*#__PURE__*/React.createElement(NavBar, _extends({
styled: styledCSS,
fixed: fixed,
sticky: sticky
}, attributes), /*#__PURE__*/React.createElement(NavBarContainer, {
fluid: true
}, /*#__PURE__*/React.createElement(NavBarBrand, {
href: "/"
}, renderLogo(Logo)), /*#__PURE__*/React.createElement(NavBarButtonToggler, {
basic: true,
variation: "fill",
color: "primary",
active: visibleMenu,
onClick: showMenu
}, visibleMenu ? /*#__PURE__*/React.createElement(Icon, {
name: "x"
}) : /*#__PURE__*/React.createElement(Icon, {
name: "menu"
})), /*#__PURE__*/React.createElement(NavBarMenu, {
active: visibleMenu
}, /*#__PURE__*/React.createElement(NavBarCloseWrapper, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NavBarMobileBrand, {
href: "/"
}, renderLogo(Logo))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NavBarMobileCloseButton, {
basic: true,
variation: "lightTransparent",
onClick: onClose
}, /*#__PURE__*/React.createElement(Icon, {
name: "x"
})))), renderBody(links))));
};
NavBar4.propTypes = propTypes;
NavBar4.defaultProps = defaultProps;