@dnanpm/styleguide
Version:
DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
169 lines (160 loc) • 8.31 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var icons = require('@dnanpm/icons');
var React = require('react');
var styledComponents = require('styled-components');
var theme = require('../../../themes/theme.js');
var breakpoints = require('../../../themes/themeComponents/breakpoints.js');
var navigation = require('../../../themes/themeComponents/navigation.js');
var styledUtils = require('../../../utils/styledUtils.js');
var DnaLogo = require('../../DnaLogo/DnaLogo.js');
var Icon = require('../../Icon/Icon.js');
var NavContext = require('../context/NavContext.js');
var BusinessMenu = require('./BusinessMenu.js');
var DesktopMenu = require('./DesktopMenu.js');
var LanguageSelector = require('./LanguageSelector.js');
var LoginTooltip = require('./LoginTooltip.js');
var MinicartTooltip = require('./MinicartTooltip.js');
var PageSearch = require('./PageSearch.js');
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
const DesktopMenuContainer = styledComponents.styled.div `
height: 100%;
display: none;
border-bottom: 1px solid ${theme.default.color.line.L03};
@media (min-width: ${p => p.collapseSize + 1}px) {
display: block;
padding-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.5)};
}
`;
const IconContainer = styledComponents.styled.div `
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: ${navigation.IconContainerWidth};
transition: color 0.2s ease-in-out;
> span.dnasg-icon > svg {
display: block;
height: ${navigation.navIconSizeMobile};
width: ${navigation.navIconSizeMobile};
}
> span.dnasg-icon > svg,
> span.dnasg-icon + span {
color: ${p => (p.isActive ? theme.default.color.text.pink : 'inherit')};
}
@media (min-width: ${p => p.collapseSize + 1}px) {
> span.dnasg-icon > svg {
height: ${navigation.navIconSize};
width: ${navigation.navIconSize};
}
> span.dnasg-icon + span {
display: block;
}
}
@media (min-width: ${navigation.wideMenuBreakpoint}px) {
margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.4)} 0
${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
}
`;
const HeaderIconContainer = styledComponents.styled.div `
display: flex;
justify-content: flex-end;
border-bottom: 1px solid ${theme.default.color.line.L03};
padding-right: 0;
flex: 1 1 100%;
@media (min-width: ${p => p.collapseSize + 1}px) {
padding-right: 1rem;
}
button {
&:focus {
outline: none;
}
}
`;
const HeaderIconWrapper = styledComponents.styled.div `
display: flex;
flex: 1 1 100%;
justify-content: space-between;
max-width: 18.75rem;
@media (min-width: ${p => p.collapseSize + 1}px) {
justify-content: flex-end;
flex: 0 0 100%;
}
`;
const MobileMenuButton = styledComponents.styled.button `
display: block;
@media (min-width: ${p => p.collapseSize + 1}px) {
display: none;
}
div > span.dnasg-icon > svg {
height: ${navigation.navIconSizeMobile};
width: ${navigation.navIconSizeMobile};
margin: 0 auto;
}
&:focus,
&:active {
color: ${theme.default.color.text.pink};
}
font-size: 100%;
font-family: inherit;
border: 0;
padding: 0;
background: transparent;
`;
const MenuWrapper = styledComponents.styled.div `
height: 50%;
white-space: nowrap;
align-self: flex-end;
`;
const LogoContainer = styledComponents.styled.div `
margin: 0;
width: ${navigation.mobileLogoSize};
height: ${navigation.mobileLogoSize};
@media (min-width: ${p => p.collapseSize + 1}px) {
width: ${navigation.desktopLogoSize};
height: ${navigation.desktopLogoSize};
}
`;
const HeaderIconWrapperNoMargin = styledComponents.styled.div `
margin: 0;
`;
const RenderDesktopMenu = ({ collapseSize }) => (React__default.default.createElement(DesktopMenuContainer, { collapseSize: collapseSize },
React__default.default.createElement(MenuWrapper, null,
React__default.default.createElement(BusinessMenu.default, null)),
React__default.default.createElement(MenuWrapper, null,
React__default.default.createElement(DesktopMenu.default, null))));
const MenuFunctionality = ({ menuProps }) => {
var _a;
const { collapseSize = breakpoints.default.md, search: isSearch, searchText: searchLabel, minicart: isMinicart, minicartText: minicartLabel, minicartAmount = 0, login: isLogin, loginText: loginLabel, language = 'fi', languageSelector: languageSelectorActive, items, } = menuProps;
const languagesObject = (_a = items === null || items === void 0 ? void 0 : items.languageSelector) === null || _a === void 0 ? void 0 : _a.urls;
const { handleToggleClick, isMobileMenuOpen } = React.useContext(NavContext.default);
return (React__default.default.createElement(HeaderIconContainer, { collapseSize: collapseSize },
React__default.default.createElement(HeaderIconWrapper, { collapseSize: collapseSize },
languagesObject && languageSelectorActive && (React__default.default.createElement(IconContainer, { "data-testid": "language-selector-container", collapseSize: collapseSize },
React__default.default.createElement(LanguageSelector.default, { currentLanguage: language, languagesObject: languagesObject }))),
isSearch && (React__default.default.createElement(IconContainer, { "data-testid": "header-search-container", collapseSize: collapseSize },
React__default.default.createElement(PageSearch.default, { searchLabel: searchLabel }))),
isMinicart && (React__default.default.createElement(IconContainer, { "data-testid": "header-minicart-container", collapseSize: collapseSize },
React__default.default.createElement(MinicartTooltip.default, { minicartAmount: minicartAmount, minicartLabel: minicartLabel }))),
isLogin && (React__default.default.createElement(IconContainer, { "data-testid": "header-login-container", collapseSize: collapseSize },
React__default.default.createElement(LoginTooltip.default, { loginLabel: loginLabel }))),
React__default.default.createElement(MobileMenuButton, { onClick: handleToggleClick, "aria-label": "menu toggle", role: "button", "aria-expanded": isMobileMenuOpen, collapseSize: collapseSize, "data-testid": "header-mobile-menu-toggle" },
React__default.default.createElement(IconContainer, { isActive: isMobileMenuOpen, collapseSize: collapseSize },
React__default.default.createElement(Icon.default, { icon: isMobileMenuOpen ? icons.Close : icons.Menu, size: "2rem" }))))));
};
const HeaderNavigationElements = ({ navElementProps, }) => {
var _a;
const { collapseSize = breakpoints.default.md, items, language = 'fi' } = navElementProps;
const currentBusinessSite = (_a = items === null || items === void 0 ? void 0 : items.businessSelector) === null || _a === void 0 ? void 0 : _a.items.find(item => item.businessId === items.businessId);
return (React__default.default.createElement(React__default.default.Fragment, null,
React__default.default.createElement(HeaderIconWrapperNoMargin, null,
React__default.default.createElement("a", { href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA", "aria-label": "DNA", "data-testid": "dna-logo-link" },
React__default.default.createElement(LogoContainer, { collapseSize: collapseSize },
React__default.default.createElement(DnaLogo.default, { size: "100%" })))),
React__default.default.createElement(RenderDesktopMenu, { collapseSize: collapseSize }),
React__default.default.createElement(MenuFunctionality, { menuProps: navElementProps })));
};
exports.IconContainer = IconContainer;
exports.default = HeaderNavigationElements;