@dnanpm/styleguide 2.3.0 → 3.1.0

package/build/es/components/MainNavigation/ChildComponents/MobileMenu.js

@@ -1,8 +1,9 @@
-import React, { useContext } from 'react';
+import React__default, { useContext } from 'react';
 import { useSpring, animated } from 'react-spring';
 import styled from '../../../themes/styled.js';
+import theme from '../../../themes/theme.js';
 import { menuLevelsAmount, mobileNavMaxHeight, ribbonHeight } from '../../../themes/themeComponents/navigation.js';
-import { media } from '../../../utils/styledUtils.js';
+import { media, getMultipliedSize } from '../../../utils/styledUtils.js';
 import Icon from '../../Icon/Icon.js';
 import 'tslib';
 import hlChevronLeft from '../../Icons/hlChevronLeft.js';
@@ -13,6 +14,7 @@ import { MenuLink, MenuList, MenuItem, MenuLinkWithChildren } from '../globalNav
 import BusinessMenu from './BusinessMenu.js';
 import LinkModifier, { isSelected } from './LinkModifier.js';
 
+// @ts-nocheck
 const MobileMenuWrapper = styled.div `
     width: ${100 * menuLevelsAmount}%;
 `;
@@ -22,25 +24,22 @@ const MobileMenuContainer = styled.div `
     width: 100%;
     position: absolute;
     top: ${mobileNavMaxHeight};
-    ${media.md `
-        top: calc(${mobileNavMaxHeight} + ${ribbonHeight});
-    `};
     left: 0;
     overflow: hidden;
     overflow-y: auto;
     transition: max-height 0.2s ease-in-out;
-    background: ${p => p.theme.color.white};
+    background: ${theme.color.background.white.default};
     max-height: ${mobileMenuNoRibbon};
     height: ${mobileMenuNoRibbon};
     ${media.md `
+        top: calc(${mobileNavMaxHeight} + ${ribbonHeight});
         max-height: ${mobileMenuWithRibbon};
         height: ${mobileMenuWithRibbon};
     `};
 `;
 const MenuLinkBackLink = styled(MenuLink) ``;
 const MobileMenu = styled.div `
-    width: 100%;
-    background: ${p => p.theme.color.white};
+    background: ${theme.color.background.white.default};
     ${MenuList} {
         display: block;
         float: left;
@@ -50,16 +49,15 @@ const MobileMenu = styled.div `
         ${media.md `
             min-height: ${mobileMenuWithRibbon};
         `};
-        background: ${p => p.theme.color.grayBg};
         &:first-of-type {
-            background: ${p => p.theme.color.white};
+            background: ${theme.color.background.white.default};
             > ${MenuItem} > ${MenuLink} {
-                font-weight: ${p => p.theme.fontWeight.bold};
-                border-bottom: 1px solid ${p => p.theme.color.grayWhite};
+                font-weight: ${theme.fontWeight.medium};
+                border-bottom: 1px solid ${theme.color.line.L04};
             }
         }
         &:not(:first-of-type) {
-            background: ${p => p.theme.color.grayBg};
+            background: ${theme.color.background.sand.default};
         }
 
         ${MenuItem} {
@@ -70,21 +68,24 @@ const MobileMenu = styled.div `
         }
     }
     ${MenuLink}, ${MenuLinkWithChildren} {
-        line-height: 1.4rem;
-        padding: 1.25rem 1rem 1.25rem 1.25rem;
-        font-size: ${p => p.theme.fontSize.l};
+        line-height: ${theme.lineHeight.default};
+        padding: ${getMultipliedSize(theme.base.baseHeight, 1.75)}
+            ${getMultipliedSize(theme.base.baseWidth, 1.5)}
+            ${getMultipliedSize(theme.base.baseHeight, 1.75)}
+            ${getMultipliedSize(theme.base.baseWidth, 2)};
+        font-size: ${theme.fontSize.default};
         display: flex;
         flex-grow: 1;
         align-items: center;
         justify-content: space-between;
     }
     ${MenuLinkBackLink} {
-        font-weight: ${p => p.theme.fontWeight.bold};
-        background: ${p => p.theme.color.white};
-        color: ${p => p.theme.color.hotPink};
+        font-weight: ${theme.fontWeight.medium};
+        background: ${theme.color.background.white.default};
+        color: ${theme.color.text.pink};
         justify-content: flex-start;
         span.dnasg-icon {
-            margin-left: -0.5rem;
+            margin-right: ${getMultipliedSize(theme.base.baseWidth, 4)};
         }
     }
     ${MenuLink}:hover {
@@ -105,9 +106,9 @@ const MenuItemBackLink = ({ currentLevel }) => {
     };
     const tabNavigationDisabled = scrollPosition !== currentLevel - 1;
     const backLink = getBackLink(menuElements, currentLevel - 1);
-    return (React.createElement(MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
-        React.createElement(MenuLinkBackLink, { role: "menu-item", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
-            React.createElement(Icon, { icon: hlChevronLeft, position: "left" }),
+    return (React__default.createElement(MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
+        React__default.createElement(MenuLinkBackLink, { role: "menu-item", as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
+            React__default.createElement(Icon, { icon: hlChevronLeft, size: "1rem" }),
             backLink.titles[language])));
 };
 const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
@@ -129,54 +130,54 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
         handleNavMenuClick(element.id, `level${currentLevel}Mobile`);
     };
     if (hasChildren && currentLevel < 3) {
-        return (React.createElement(MenuItem, { key: menuItem.id, "aria-haspopup": "true", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: isSelected(currentUrl, menuUrl) },
-            React.createElement(MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled() ? -1 : undefined },
+        return (React__default.createElement(MenuItem, { key: menuItem.id, "aria-haspopup": "true", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: isSelected(currentUrl, menuUrl) },
+            React__default.createElement(MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), role: "menuitem", tabIndex: tabNavigationDisabled() ? -1 : undefined },
                 menuItem.titles[language],
-                React.createElement(Icon, { icon: hlChevronRight }))));
+                React__default.createElement(Icon, { icon: hlChevronRight, size: "1rem" }))));
     }
-    return (React.createElement(MenuItem, { key: menuItem.id, role: "menuitem", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: isSelected(currentUrl, menuUrl, true) },
-        React.createElement(LinkModifier, { menuItem: menuItem, tabIndex: tabNavigationDisabled() })));
+    return (React__default.createElement(MenuItem, { key: menuItem.id, role: "menuitem", "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: isSelected(currentUrl, menuUrl, true) },
+        React__default.createElement(LinkModifier, { menuItem: menuItem, tabIndex: tabNavigationDisabled() })));
 };
 const SubMenuMobile = ({ currentLevel, menuItem }) => {
     const navElements = menuItem.pages;
     if (!navElements.length) {
-        return React.createElement(React.Fragment, null);
+        return null;
     }
-    return (React.createElement(React.Fragment, null,
-        currentLevel > 1 && React.createElement(MenuItemBackLink, { currentLevel: currentLevel }),
-        navElements.map((subMenuItem, index) => (React.createElement(CreateSubMenuItem, { menuItem: subMenuItem, currentLevel: currentLevel, key: subMenuItem.id, itemIndex: index })))));
+    return (React__default.createElement(React__default.Fragment, null,
+        currentLevel > 1 && React__default.createElement(MenuItemBackLink, { currentLevel: currentLevel }),
+        navElements.map((subMenuItem, index) => (React__default.createElement(CreateSubMenuItem, { menuItem: subMenuItem, currentLevel: currentLevel, key: subMenuItem.id, itemIndex: index })))));
 };
 const NavigationMenuMobile = () => {
     const { items: data, menuLevel, level1Items, level2Items } = useContext(NavContext);
     const { mainNavigation } = data;
     if (!mainNavigation.pages.length) {
-        return React.createElement(React.Fragment, null);
+        return null;
     }
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 0, "aria-disabled": menuLevel.scrollPosition !== 0, "data-testid": "mobile-nav-menu-level-1", isInView: menuLevel.scrollPosition === 0 },
-            React.createElement(SubMenuMobile, { currentLevel: 1, menuItem: mainNavigation }),
-            React.createElement(MenuItem, { key: "business-item", "aria-hidden": menuLevel.scrollPosition !== 0, role: "menuitem" },
-                React.createElement(BusinessMenu, null))),
-        menuLevel.level1Mobile !== null && (React.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 1, "aria-disabled": menuLevel.scrollPosition !== 1, "data-testid": "mobile-nav-menu-level-2", isInView: menuLevel.scrollPosition === 1 },
-            React.createElement(SubMenuMobile, { currentLevel: 2, menuItem: level1Items[menuLevel.level1Mobile] }))),
-        menuLevel.level2Mobile !== null && (React.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 2, "aria-disabled": menuLevel.scrollPosition !== 2, "data-testid": "mobile-nav-menu-level-3", isInView: menuLevel.scrollPosition === 2 },
-            React.createElement(SubMenuMobile, { currentLevel: 3, menuItem: level2Items[menuLevel.level2Mobile] })))));
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 0, "aria-disabled": menuLevel.scrollPosition !== 0, "data-testid": "mobile-nav-menu-level-1", isInView: menuLevel.scrollPosition === 0 },
+            React__default.createElement(SubMenuMobile, { currentLevel: 1, menuItem: mainNavigation }),
+            React__default.createElement(MenuItem, { key: "business-item", "aria-hidden": menuLevel.scrollPosition !== 0, role: "menuitem" },
+                React__default.createElement(BusinessMenu, null))),
+        menuLevel.level1Mobile !== null && (React__default.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 1, "aria-disabled": menuLevel.scrollPosition !== 1, "data-testid": "mobile-nav-menu-level-2", isInView: menuLevel.scrollPosition === 1 },
+            React__default.createElement(SubMenuMobile, { currentLevel: 2, menuItem: level1Items[menuLevel.level1Mobile] }))),
+        menuLevel.level2Mobile !== null && (React__default.createElement(MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== 2, "aria-disabled": menuLevel.scrollPosition !== 2, "data-testid": "mobile-nav-menu-level-3", isInView: menuLevel.scrollPosition === 2 },
+            React__default.createElement(SubMenuMobile, { currentLevel: 3, menuItem: level2Items[menuLevel.level2Mobile] })))));
 };
 const RenderMobileMenu = () => {
     const { menuLevel, isMobileMenuOpen } = useContext(NavContext);
-    const mobileMenuRef = React.useRef(null);
+    const mobileMenuRef = React__default.useRef(null);
     const slidingMenuAnimation = useSpring({
         transform: `translateX(${(menuLevel.scrollPosition / menuLevelsAmount) * -100}%)`,
     });
     const mobileMenuContext = {
         mobileMenuRef,
     };
-    return (React.createElement(React.Fragment, null, isMobileMenuOpen && (React.createElement(MobileMenuContainer, { ref: mobileMenuRef },
-        React.createElement(MobileMenuContext.Provider, { value: mobileMenuContext },
-            React.createElement(MobileMenu, null,
-                React.createElement(MobileMenuWrapper, null,
-                    React.createElement(animated.div, { style: slidingMenuAnimation },
-                        React.createElement(NavigationMenuMobile, null)))))))));
+    return (React__default.createElement(React__default.Fragment, null, isMobileMenuOpen && (React__default.createElement(MobileMenuContainer, { ref: mobileMenuRef },
+        React__default.createElement(MobileMenuContext.Provider, { value: mobileMenuContext },
+            React__default.createElement(MobileMenu, null,
+                React__default.createElement(MobileMenuWrapper, null,
+                    React__default.createElement(animated.div, { style: slidingMenuAnimation },
+                        React__default.createElement(NavigationMenuMobile, null)))))))));
 };
 
-export default RenderMobileMenu;
+export { RenderMobileMenu as default };

package/build/es/components/MainNavigation/ChildComponents/PageSearch.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 interface PageSearchProps {
-    searchLabel: string;
+    searchLabel?: string;
 }
-declare const PageSearch: ({ searchLabel }: PageSearchProps) => JSX.Element;
+declare const PageSearch: ({ searchLabel }: PageSearchProps) => React.JSX.Element;
 export default PageSearch;

package/build/es/components/MainNavigation/ChildComponents/PageSearch.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import colors from '../../../themes/themeComponents/colors.js';
+import React__default from 'react';
 import Icon from '../../Icon/Icon.js';
 import 'tslib';
 import hlMagnifyingGlass from '../../Icons/hlMagnifyingGlass.js';
@@ -8,11 +7,12 @@ import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 import { TooltipWrapper } from './MainNavTooltipMenuExportedStyles.js';
 
 const PageSearch = ({ searchLabel }) => {
-    const { navZIndex, isMobileMenu, searchComponent: SearchComponent, collapseSize, } = React.useContext(NavContext);
-    return (React.createElement(MainNavTooltipMenu, { zIndex: (navZIndex + 1).toString(), activeColor: colors.hotPink, tooltipRight: "0", contentComponent: SearchComponent, contentWidth: "100%", overflowY: isMobileMenu, globalStateString: "search", fullWidthDesktop: true, closeWhenTagClicked: ['a'] },
-        React.createElement(TooltipWrapper, { collapseSize: collapseSize, isComponent: Boolean(SearchComponent) },
-            React.createElement(Icon, { icon: hlMagnifyingGlass, size: "2rem" }),
-            React.createElement("span", null, searchLabel))));
+    const globalStateString = 'search';
+    const { navZIndex, searchComponent: SearchComponent, collapseSize, tooltipItems, } = React__default.useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { zIndex: navZIndex + 1, tooltipRight: "0", contentComponent: SearchComponent, contentWidth: "100%", globalStateString: globalStateString, fullWidthDesktop: true, closeWhenTagClicked: ['a'] },
+        React__default.createElement(TooltipWrapper, { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateString] },
+            React__default.createElement(Icon, { icon: hlMagnifyingGlass, size: "2rem" }),
+            React__default.createElement("span", null, searchLabel))));
 };
 
-export default PageSearch;
+export { PageSearch as default };

package/build/es/components/MainNavigation/ChildComponents/Ribbon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { LangProps } from '../../../types/language';
 export interface RibbonDataProps {
     ribbonLink: LangProps;
@@ -8,7 +8,6 @@ export interface RibbonDataProps {
 interface Ribbon {
     ribbonData: RibbonDataProps[];
     lang?: string;
-    navZIndex: number;
 }
-declare const Ribbon: ({ ribbonData, lang, navZIndex }: Ribbon) => JSX.Element;
+declare const Ribbon: ({ ribbonData, lang }: Ribbon) => React.JSX.Element;
 export default Ribbon;

package/build/es/components/MainNavigation/ChildComponents/Ribbon.js

@@ -1,23 +1,21 @@
-import React from 'react';
+import React__default from 'react';
 import styled from '../../../themes/styled.js';
+import theme from '../../../themes/theme.js';
 import { ribbonHeight } from '../../../themes/themeComponents/navigation.js';
 import { media, getMultipliedSize } from '../../../utils/styledUtils.js';
 import Icon from '../../Icon/Icon.js';
 
 const RibbonContainer = styled.div `
-    position: relative;
-    z-index: ${({ navZIndex }) => navZIndex};
-    width: 100%;
     display: none;
-    height: ${ribbonHeight};
-    background: ${props => props.theme.color.gray5};
     ${media.md `
+        background: ${theme.color.background.sand.E01};
         display: block;
     `};
 `;
 const RibbonItems = styled.div `
     max-width: 1290px;
-    padding: 0 ${p => getMultipliedSize(p.theme.base.baseHeight, 2)};
+    height: ${ribbonHeight};
+    padding: 0 ${getMultipliedSize(theme.base.baseHeight, 2)};
     margin: 0 auto;
     display: flex;
     justify-content: center;
@@ -28,24 +26,26 @@ const RibbonColumn = styled.div `
     display: flex;
     justify-content: center;
     align-items: center;
-    margin: 0.125rem 0;
-    padding: 0.125rem 0;
-    color: ${p => p.theme.color.gray55};
-    font-size: ${p => p.theme.fontSize.xs};
-    border-right: 2px solid white;
+    color: ${theme.color.text.gray};
+    font-size: ${theme.fontSize.xs};
+    border-right: 2px solid ${theme.color.line.L03};
     &:last-of-type {
         border: none;
     }
 
+    span.dnasg-icon {
+        margin-right: ${getMultipliedSize(theme.base.baseWidth, 0.5)};
+    }
+
     a {
         display: flex;
         align-items: center;
-        color: ${p => p.theme.color.gray55};
+        color: ${theme.color.text.gray};
         &:hover,
         &:focus,
         &:active {
             text-decoration: none;
-            color: ${p => p.theme.color.hotPink};
+            color: ${theme.color.text.pink};
             border: none;
             outline: none;
         }
@@ -54,13 +54,13 @@ const RibbonColumn = styled.div `
         }
     }
 `;
-const Ribbon = ({ ribbonData, lang = 'fi', navZIndex }) => (React.createElement(RibbonContainer, { navZIndex: navZIndex },
-    React.createElement(RibbonItems, null, ribbonData.map(ribbon => (React.createElement(RibbonColumn, { key: `ribbon-${ribbon.ribbonIcon}` },
-        ribbon.ribbonLink[lang] && (React.createElement("a", { href: ribbon.ribbonLink[lang] },
-            React.createElement(Icon, { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
-            React.createElement("span", null, ribbon.ribbonTexts[lang]))),
-        !ribbon.ribbonLink[lang] && (React.createElement(React.Fragment, null,
-            React.createElement(Icon, { name: ribbon.ribbonIcon, size: "1rem", position: "left" }),
-            React.createElement("span", null, ribbon.ribbonTexts[lang])))))))));
+const Ribbon = ({ ribbonData, lang = 'fi' }) => (React__default.createElement(RibbonContainer, null,
+    React__default.createElement(RibbonItems, null, ribbonData.map(ribbon => (React__default.createElement(RibbonColumn, { key: `ribbon-${ribbon.ribbonIcon}` },
+        ribbon.ribbonLink[lang] && (React__default.createElement("a", { href: ribbon.ribbonLink[lang] },
+            React__default.createElement(Icon, { name: ribbon.ribbonIcon, size: "1rem" }),
+            React__default.createElement("span", null, ribbon.ribbonTexts[lang]))),
+        !ribbon.ribbonLink[lang] && (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Icon, { name: ribbon.ribbonIcon, size: "1rem" }),
+            React__default.createElement("span", null, ribbon.ribbonTexts[lang])))))))));
 
-export default Ribbon;
+export { Ribbon as default };

package/build/es/components/MainNavigation/MainNavigation.d.ts

@@ -8,28 +8,28 @@ export interface MainNavigationProps {
     items?: GlobalNavItems;
     language?: string;
     zIndex?: number;
-    isMobileMenu?: boolean;
     search?: boolean;
     searchText?: string;
-    searchComponent?: React.FC | boolean;
+    searchComponent?: React.ReactNode | boolean;
     minicart?: boolean;
     minicartText?: string;
     minicartAmount?: number;
-    minicartComponent?: React.FC | boolean;
+    minicartComponent?: React.ReactNode | boolean;
     showMinicart?: boolean;
     showLoginTooltip?: boolean;
     login?: boolean;
     loginText?: string;
-    loginComponent?: React.FC | boolean;
+    loginComponent?: React.ReactNode | boolean;
     isLoggedIn?: boolean;
     collapseSize?: number;
     languageSelector?: boolean;
-    nextJSLinkComponent: React.FC | boolean;
+    nextJSLinkComponent: React.ReactNode | boolean;
     ribbon?: boolean;
     ribbonData?: RibbonDataProps[];
-    currentUrl?: string | false;
+    currentUrl?: string;
     notificationText?: string;
 }
-declare const _default: React.ComponentType<any>;
+/** @visibleName Main Navigation */
+declare const MainNavigation: ({ items, language, zIndex, languageSelector, search, searchText, searchComponent, minicart, minicartText, minicartComponent, minicartAmount, showMinicart, showLoginTooltip, login, loginText, loginComponent, isLoggedIn, collapseSize, nextJSLinkComponent, ribbon, ribbonData, className, currentUrl, notificationText, }: MainNavigationProps) => React.JSX.Element;
 /** @component */
-export default _default;
+export default MainNavigation;

package/build/es/components/MainNavigation/MainNavigation.js

@@ -1,9 +1,10 @@
 import { prop, indexBy } from 'ramda';
-import React, { useRef, useMemo, useState } from 'react';
-import withSizes from 'react-sizes';
+import React__default, { useRef, useMemo, useState } from 'react';
 import useBodyClass from '../../hooks/modifyBodyClass.js';
 import useScrollPosition from '../../hooks/useScrollPosition.js';
+import useWindowSize from '../../hooks/useWindowSize.js';
 import styled, { createGlobalStyle, keyframes } from '../../themes/styled.js';
+import theme from '../../themes/theme.js';
 import { desktopNavMaxHeight, ribbonHeight, mobileNavMaxHeight } from '../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
 import Notification from '../Notification/Notification.js';
@@ -12,10 +13,6 @@ import RenderMobileMenu from './ChildComponents/MobileMenu.js';
 import Ribbon from './ChildComponents/Ribbon.js';
 import NavContext from './context/NavContext.js';
 
-// TODO: Use proper props after https://jira.dna.fi/browse/STYLE-232 is done
-const mapSizesToProps = ({ width }, { collapseSize }) => ({
-    isMobileMenu: width && width <= collapseSize,
-});
 const GlobalStyle = createGlobalStyle `
     body.overflow-hidden {
         overflow: hidden;
@@ -25,7 +22,8 @@ const GlobalStyle = createGlobalStyle `
 const isIosDevice = () => {
     const validate = new RegExp(/iPad|iPhone|iPod|iPad Simulator|iPhone Simulator/i);
     if (typeof navigator !== 'undefined' && typeof window !== 'undefined') {
-        return validate.test(navigator.userAgent) && !window.MSStream;
+        return (validate.test(navigator.userAgent) &&
+            !window.MSStream);
     }
     return false;
 };
@@ -45,7 +43,7 @@ const fadeIn = keyframes `
     }
 `;
 const preventBodyScroll = () => {
-    const scrollY = window.pageYOffset;
+    const scrollY = window.scrollY;
     document.body.style.position = 'fixed';
     document.body.style.top = `-${scrollY}px`;
 };
@@ -67,7 +65,7 @@ const PageOverlay = styled.div `
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(1, 1, 1, 0.1);
+    background: ${theme.color.background.plum.default + theme.color.transparency.T10};
     z-index: ${({ navZIndex }) => navZIndex - 1};
 `;
 const scrollThreshold = 82;
@@ -85,9 +83,9 @@ const GlobalNavigationContainer = styled.nav `
     top: 0;
     left: 0;
     width: 100%;
-    background-color: ${p => p.theme.color.white};
-    color: ${p => p.theme.color.text};
-    top: ${({ menuLevel, tooltipMenuActive }) => menuLevel && menuLevel.hideOnScroll && !menuLevel.level1 && !tooltipMenuActive
+    background-color: ${theme.color.background.white.default};
+    color: ${theme.color.text.black};
+    top: ${({ menuLevel, tooltipMenuActive }) => (menuLevel === null || menuLevel === void 0 ? void 0 : menuLevel.hideOnScroll) && !(menuLevel === null || menuLevel === void 0 ? void 0 : menuLevel.level1) && !tooltipMenuActive
     ? `calc(-${desktopNavMaxHeight} - ${ribbonHeight})`
     : '0px'} !important;
     transition: top 0.2s ease-in-out;
@@ -96,7 +94,7 @@ const GlobalNavigationContainer = styled.nav `
 const NavigationWrapper = styled.div `
     display: flex;
     width: 100%;
-    max-width: ${props => getMultipliedSize(props.theme.base.baseHeight, 256)};
+    max-width: ${getMultipliedSize(theme.base.baseHeight, 256)};
     margin: 0 auto;
     height: ${mobileNavMaxHeight};
     @media (min-width: ${p => p.collapseSize + 1}px) {
@@ -108,22 +106,18 @@ const isStickySupported = typeof CSS !== 'undefined' &&
     typeof CSS.supports !== 'undefined' &&
     (CSS.supports('position', 'sticky') || CSS.supports('position', '-webkit-sticky'));
 const initiateScrollToHeader = (componentRef) => {
-    if (componentRef &&
-        componentRef.current &&
-        isStickySupported &&
-        typeof window !== 'undefined') {
+    if ((componentRef === null || componentRef === void 0 ? void 0 : componentRef.current) && isStickySupported && typeof window !== 'undefined') {
         window.scrollTo({ top: componentRef.current.offsetTop, left: 0 });
     }
 };
 /** @visibleName Main Navigation */
-const MainNavigation = ({ 
-// TODO: Define types for MainNavigation component (https://jira.dna.fi/browse/STYLE-233)
-items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMenu = false, search = true, searchText = 'Haku', searchComponent = false, minicart = true, minicartText = 'Ostoskori', minicartComponent = false, minicartAmount = 0, showMinicart = false, showLoginTooltip = false, login = true, loginText = 'Kirjaudu', loginComponent = false, isLoggedIn = false, collapseSize = 767, nextJSLinkComponent = false, ribbon = true, ribbonData, className, currentUrl = false, notificationText = '', }) => {
+const MainNavigation = ({ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, search = true, searchText = 'Haku', searchComponent = false, minicart = true, minicartText = 'Ostoskori', minicartComponent = false, minicartAmount = 0, showMinicart = false, showLoginTooltip = false, login = true, loginText = 'Kirjaudu', loginComponent, isLoggedIn = false, collapseSize = 767, nextJSLinkComponent = false, ribbon = true, ribbonData, className, currentUrl = '', notificationText = '', }) => {
+    var _a, _b;
+    const { isMobile } = useWindowSize(collapseSize);
     const props = {
         items,
         language,
         zIndex,
-        isMobileMenu,
         search,
         searchText,
         minicart,
@@ -145,14 +139,14 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
     };
     const navigationEl = useRef(null);
     const key = prop('id');
-    const level1 = items.mainNavigation && items.mainNavigation.pages ? items.mainNavigation.pages : [];
+    const level1 = (_b = (_a = items.mainNavigation) === null || _a === void 0 ? void 0 : _a.pages) !== null && _b !== void 0 ? _b : [];
     // Index & memoize menu levels
     const level1Items = useMemo(() => indexBy(key, level1), [level1, key]);
-    const level2 = useMemo(() => level1.map((item) => indexBy(key, item.pages)), [level1, key]);
+    const level2 = useMemo(() => level1.map(item => indexBy(key, item.pages)), [level1, key]);
     const level2Items = Object.assign({}, ...level2);
     // All states to for handling menus
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-    const [menuLevel, setMenuLevel] = React.useState({
+    const [menuLevel, setMenuLevel] = React__default.useState({
         level1: null,
         animate1: true,
         level2: null,
@@ -182,7 +176,7 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
                 break;
         }
     };
-    React.useEffect(() => {
+    React__default.useEffect(() => {
         if (iosDevice && isMobileMenuOpen) {
             window.addEventListener('orientationchange', initRotation, false);
             preventBodyScroll();
@@ -212,7 +206,7 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
     };
     const [tooltipItems, setTooltipItems] = useState(initialTooltipItems);
     const tooltipMenuActive = tooltipItems.minicart || tooltipItems.login || tooltipItems.search;
-    const freezeOverflow = isMobileMenuOpen || (tooltipMenuActive && isMobileMenu);
+    const freezeOverflow = isMobileMenuOpen || (tooltipMenuActive && isMobile);
     const isPageOverlay = tooltipMenuActive || menuLevel.level1 || menuLevel.level2;
     useBodyClass(freezeOverflow ? 'overflow-hidden' : 'overflow-shown');
     const resetMenuEvents = () => {
@@ -241,7 +235,7 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         menuLevel,
         handleNavMenuClick,
         getBackLink,
-        isMobileMenu,
+        isMobileMenu: isMobile,
         items,
         level1Items,
         level2Items,
@@ -261,10 +255,10 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         currentUrl,
     };
     // Resets menu states when menu content alters between mobile and desktop
-    const menuChanged = previousValue !== isMobileMenu;
+    const menuChanged = previousValue !== isMobile;
     if (menuChanged) {
         resetMenuEvents();
-        previousValue = isMobileMenu;
+        previousValue = isMobile;
     }
     useScrollPosition(({ prevPos, currPos }) => {
         const overThreshold = checkThreshold(prevPos.y, currPos.y);
@@ -273,20 +267,16 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
             setMenuLevel(Object.assign(Object.assign({}, menuLevel), { animate1: false, animate2: false, hideOnScroll: isShow }));
         }
     }, [menuLevel], undefined, false, 200);
-    return (React.createElement(React.Fragment, null,
-        isPageOverlay && React.createElement(PageOverlay, { "data-testid": "navigation-overlay", navZIndex: zIndex }),
-        React.createElement(GlobalNavigationContainer, { className: className, ref: navigationEl, collapseSize: collapseSize, menuLevel: menuLevel, "data-testid": "main-navigation", navZIndex: zIndex, tooltipMenuActive: tooltipMenuActive },
-            React.createElement(NavContext.Provider, { value: navigationContext },
-                React.createElement(GlobalStyle, null),
-                !items.mainNavigation && notificationText && (React.createElement(Notification, { type: "info", showIcon: true, closeButton: false }, notificationText)),
-                ribbon && ribbonData && (React.createElement(Ribbon, { ribbonData: ribbonData, lang: language, navZIndex: zIndex })),
-                React.createElement(NavigationWrapper, { collapseSize: collapseSize },
-                    React.createElement(HeaderNavigationElements, { navElementProps: props }),
-                    isMobileMenu && React.createElement(RenderMobileMenu, null))))));
-};
-/** @component */
-// TODO: Remove ts-ignore after https://jira.dna.fi/browse/STYLE-232 is done
-// @ts-ignore
-var MainNavigation$1 = withSizes(mapSizesToProps)(MainNavigation);
+    return (React__default.createElement(React__default.Fragment, null,
+        isPageOverlay && React__default.createElement(PageOverlay, { "data-testid": "navigation-overlay", navZIndex: zIndex }),
+        React__default.createElement(GlobalNavigationContainer, { className: className, ref: navigationEl, collapseSize: collapseSize, menuLevel: menuLevel, "data-testid": "main-navigation", navZIndex: zIndex, tooltipMenuActive: tooltipMenuActive },
+            React__default.createElement(NavContext.Provider, { value: navigationContext },
+                React__default.createElement(GlobalStyle, null),
+                !items.mainNavigation && notificationText && (React__default.createElement(Notification, { type: "info" }, notificationText)),
+                ribbon && ribbonData && React__default.createElement(Ribbon, { ribbonData: ribbonData, lang: language }),
+                React__default.createElement(NavigationWrapper, { collapseSize: collapseSize },
+                    React__default.createElement(HeaderNavigationElements, { navElementProps: props }),
+                    isMobile && React__default.createElement(RenderMobileMenu, null))))));
+};
 
-export default MainNavigation$1;
+export { MainNavigation as default };

package/build/es/components/MainNavigation/context/MobileMenuContext.d.ts

@@ -1,2 +1,6 @@
-declare const MobileMenuContext: any;
+import React from 'react';
+interface MobileMenuContextProps {
+    mobileMenuRef: HTMLElement | null;
+}
+declare const MobileMenuContext: React.Context<MobileMenuContextProps>;
 export default MobileMenuContext;

package/build/es/components/MainNavigation/context/MobileMenuContext.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import React__default from 'react';
 
-const MobileMenuContext = React.createContext({
+const MobileMenuContext = React__default.createContext({
     mobileMenuRef: null,
 });
 
-export default MobileMenuContext;
+export { MobileMenuContext as default };

package/build/es/components/MainNavigation/context/NavContext.d.ts

@@ -1,2 +1,30 @@
-declare const NavContext: any;
+import React from 'react';
+import { GlobalNavItems, MenuLevelItem, MenuStates } from '../types/globalNavProps';
+export interface NavContextProps {
+    collapseSize: number;
+    currentUrl: string;
+    getBackLink: (menuElements: {
+        [key: string]: MenuLevelItem;
+    }, i: number) => MenuLevelItem;
+    handleNavMenuClick: (id: string | null, level: string) => void;
+    handleToggleClick: () => void;
+    isLoggedIn: boolean;
+    isMobileMenu: boolean;
+    isMobileMenuOpen: boolean;
+    items: GlobalNavItems;
+    lang: string;
+    loginComponent?: React.ReactNode | boolean | undefined;
+    menuLevel: MenuStates;
+    minicartComponent?: React.ReactNode | boolean | undefined;
+    navZIndex: number;
+    nextJSLinkComponent: React.ReactNode | boolean;
+    resetMenuEvents: () => void;
+    searchComponent?: React.ReactNode | boolean | undefined;
+    tooltipItems: {
+        minicart: boolean;
+        login: boolean;
+        search: boolean;
+    };
+}
+declare const NavContext: React.Context<NavContextProps>;
 export default NavContext;