@dnanpm/styleguide 1.8.1 → 2.0.1

package/build/cjs/components/LabelText/LabelText.d.ts

@@ -12,12 +12,7 @@ export declare const LabelText: import("styled-components").StyledComponent<"lab
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -48,22 +43,27 @@ export declare const LabelText: import("styled-components").StyledComponent<"lab
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string; /** @visibleName Label Text */
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -79,16 +79,24 @@ export declare const LabelText: import("styled-components").StyledComponent<"lab
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        default: string;
+        xl: string;
+        s: string;
+        /** @visibleName Label Text */
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, {}, never>;

package/build/cjs/components/LabelText/LabelText.js

@@ -7,7 +7,7 @@ var styledUtils = require('../../utils/styledUtils.js');
 
 /** @visibleName Label Text */
 const LabelText = styled['default'].label(({ theme, htmlFor }) => ({
-    fontSize: theme.fontSize.defaultFontSize,
+    fontSize: theme.fontSize.default,
     display: 'block',
     marginBottom: styledUtils.getDividedSize(theme.base.baseWidth, 2),
     cursor: htmlFor ? 'pointer' : 'default',

package/build/cjs/components/MainNavigation/ChildComponents/BusinessMenu.js

@@ -35,29 +35,23 @@ const BusinessMenuList = styled['default'].ul `
     margin: ${({ isMobileMenu }) => (isMobileMenu ? '1rem 0' : '0 0.325rem')};
     padding: 0;
     background-color: ${p => p.theme.color.white};
-    font-size: ${p => p.theme.fontSize.smallFontSize};
+    font-size: ${p => p.theme.fontSize.s};
     height: 100%;
 `;
 const BusinessMenu = () => {
-    const { items: data, lang: language, isMobileMenu, resetMenuEvents, menuLevel: { scrollPosition }, } = React.useContext(NavContext['default']);
+    const { items: data, lang: language, isMobileMenu, resetMenuEvents } = React.useContext(NavContext['default']);
     const ref = React.useRef(null);
     if (!data.businessId || (!data.businessSelector && data.businessSelector.items.length > 0)) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     const currentBusinessId = data.businessId;
     const businessMenuItems = data.businessSelector.items;
-    const getTabIndex = () => {
-        if ((scrollPosition && scrollPosition > 0) || !isMobileMenu) {
-            return -1;
-        }
-        return undefined;
-    };
     if (!businessMenuItems.length) {
         return React__default['default'].createElement(React__default['default'].Fragment, null);
     }
     return (React__default['default'].createElement(BusinessMenuList, { isMobileMenu: isMobileMenu, ref: ref, role: "menubar", "aria-hidden": "false", "data-testid": "business-menu-ul" }, businessMenuItems.map((item, index) => {
-        return (React__default['default'].createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}` },
-            React__default['default'].createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[language], onClick: resetMenuEvents, tabIndex: getTabIndex(), isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu }, item.titles[language])));
+        return (React__default['default'].createElement(BusinessMenuItem, { className: "menu-item", key: item.businessId, "data-testid": `business-menu-selection-item-${index + 1}`, role: "none" },
+            React__default['default'].createElement(BusinessMenuLink, { className: "menu-link", href: item.urls[language], onClick: resetMenuEvents, isActive: item.businessId === currentBusinessId, isMobileMenu: isMobileMenu, role: "menuitem" }, item.titles[language])));
     })));
 };
 

package/build/cjs/components/MainNavigation/ChildComponents/DesktopMenu.js

@@ -43,7 +43,7 @@ const SubMenuListRight = styled['default'].ul `
     : 'none'};
     ${({ menuStates }) => menuStates.level2 && menuStates.animate2 ? fadeRightAnimation : noAnimation};
     top: -${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
-    margin: 0px;
+    margin: 0;
     margin-top: -2px;
     margin-left: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
     padding: ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
@@ -95,9 +95,9 @@ const DesktopMenuList = styled['default'](globalNavStyles.MenuList) `
     }
     a,
     button {
-        font-size: ${theme['default'].fontSize.smallFontSize};
+        font-size: ${theme['default'].fontSize.s};
         ${() => styledUtils.media.xl `
-            font-size: ${theme['default'].fontSize.defaultFontSize};
+            font-size: ${theme['default'].fontSize.default};
         `};
     }
     margin-top: -2px;
@@ -117,6 +117,7 @@ const DesktopMenuItem = styled['default'](globalNavStyles.MenuItem) `
     }
     > a,
     > button {
+        width: auto;
         display: flex;
         line-height: 1rem;
         padding: 0.75rem 0;
@@ -135,6 +136,10 @@ const DesktopMenuItem = styled['default'](globalNavStyles.MenuItem) `
             border-bottom: 1px solid
                 ${p => (p && p.isActive ? p.theme.color.hotPink : 'transparent')};
         }
+        &:hover,
+        &:focus {
+            border-bottom: 3px solid ${p => p.theme.color.white};
+        }
     }
     &:hover,
     &:focus {
@@ -167,7 +172,7 @@ const SubMenuList = styled['default'].ul `
         width: ${navigation.subMenuWidthXl};
     `};
     li {
-        margin: 0px;
+        margin: 0;
         padding: 0;
         a,
         button {
@@ -201,13 +206,13 @@ const SubMenuLevel1 = ({ menuItem }) => {
     return (React__default['default'].createElement(SubMenuList, { role: "menu", "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-2", navZIndex: navZIndex }, menuItem.pages.map((element, index) => {
         const menuUrl = element.urls[language];
         if (element.pages.length) {
-            return (React__default['default'].createElement(SubMenuItem, { key: element.id, role: "menuitem", "aria-haspopup": "true", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
-                React__default['default'].createElement(globalNavStyles.MenuLinkWithChildren, { isActive: menuLevel.level2 === element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl), onClick: menuClick(element), role: "menuitem", "data-testid": "menu-button-with-children" },
+            return (React__default['default'].createElement(SubMenuItem, { key: element.id, role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
+                React__default['default'].createElement(globalNavStyles.MenuLinkWithChildren, { isActive: menuLevel.level2 === element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl), onClick: menuClick(element), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
                     React__default['default'].createElement("span", null, element.titles[language]),
                     React__default['default'].createElement(Icon['default'], { name: "chevronRight", size: "0.625rem" })),
                 React__default['default'].createElement(SubMenuLevel2, { menuItem: element })));
         }
-        return (React__default['default'].createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "menuitem", "aria-haspopup": "false", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
+        return (React__default['default'].createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-2-link-${index + 1}` },
             React__default['default'].createElement(LinkModifier['default'], { menuItem: element, tabIndex: false })));
     })));
 };
@@ -215,7 +220,7 @@ const SubMenuLevel2 = ({ menuItem }) => {
     const { lang, menuLevel, currentUrl } = React.useContext(NavContext['default']);
     return (React__default['default'].createElement(SubMenuListRight, { role: "menu", menuStates: menuLevel, navItemId: menuItem.id, "data-testid": "desktop-nav-menu-ul-level-3" }, menuItem.pages.map((item, index) => {
         const menuUrl = item.urls[lang];
-        return (React__default['default'].createElement(SubMenuItem, { key: item.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "menuitem", "data-testid": `desktop-nav-item-level-3-link-${index + 1}` },
+        return (React__default['default'].createElement(SubMenuItem, { key: item.id, isHighlighted: LinkModifier.isSelected(currentUrl, menuUrl, true), role: "none", "data-testid": `desktop-nav-item-level-3-link-${index + 1}` },
             React__default['default'].createElement(LinkModifier['default'], { menuItem: item, tabIndex: false })));
     })));
 };
@@ -226,13 +231,13 @@ const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
         handleNavMenuClick(element.id, 'level1');
     };
     const menuUrl = menuItem.urls[language];
-    return (React__default['default'].createElement(DesktopMenuItem, { isActive: menuLevel.level1 === menuItem.id || LinkModifier.isSelected(currentUrl, menuUrl), role: "menuitem", "aria-haspopup": "true", "data-testid": `desktop-nav-item-level-1-link-${currentLevel + 1}` },
-        React__default['default'].createElement(globalNavStyles.MenuLinkWithChildren, { onClick: menuClickMain(menuItem), role: "menuitem", "data-testid": "menu-button-with-children" },
+    return (React__default['default'].createElement(DesktopMenuItem, { isActive: menuLevel.level1 === menuItem.id || LinkModifier.isSelected(currentUrl, menuUrl), role: "none", "data-testid": `desktop-nav-item-level-1-link-${currentLevel + 1}` },
+        React__default['default'].createElement(globalNavStyles.MenuLinkWithChildren, { onClick: menuClickMain(menuItem), role: "menuitem", "aria-haspopup": "true", "data-testid": "menu-button-with-children" },
             React__default['default'].createElement("span", null, menuItem.titles[language])),
         React__default['default'].createElement(SubMenuLevel1, { menuItem: menuItem })));
 };
 const DesktopMenu = () => {
-    const { items: data, resetMenuEvents, menuLevel } = React.useContext(NavContext['default']);
+    const { items: data, lang: language, resetMenuEvents, menuLevel, currentUrl } = React.useContext(NavContext['default']);
     const mainNavigation = data.mainNavigation && data.mainNavigation.pages ? data.mainNavigation.pages : [];
     const ref = React.useRef(null);
     useOutsideClick['default'](ref, () => {
@@ -248,7 +253,8 @@ const DesktopMenu = () => {
         if (menuHasChildren) {
             return (React__default['default'].createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
         }
-        return (React__default['default'].createElement(globalNavStyles.MenuItem, { key: navElement.id, role: "menuitem", "data-testid": `desktop-nav-item-level-1-link-${index + 1}` },
+        return (React__default['default'].createElement(DesktopMenuItem, { key: navElement.id, role: "none", "data-testid": `desktop-nav-item-level-1-link-${index + 1}`, isActive: menuLevel.level1 === navElement.id ||
+                LinkModifier.isSelected(currentUrl, navElement.urls[language]) },
             React__default['default'].createElement(LinkModifier['default'], { menuItem: navElement, tabIndex: false })));
     })));
 };

package/build/cjs/components/MainNavigation/ChildComponents/HeaderNavigationElements.d.ts

@@ -12,12 +12,7 @@ export declare const IconContainer: import("styled-components").StyledComponent<
     };
     breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -48,22 +43,27 @@ export declare const IconContainer: import("styled-components").StyledComponent<
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -79,16 +79,23 @@ export declare const IconContainer: import("styled-components").StyledComponent<
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, {

package/build/cjs/components/MainNavigation/ChildComponents/LanguageSelector.js

@@ -16,7 +16,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const TooltipWrapper = styled['default'].div `
     font-weight: ${p => p.theme.fontWeight.bold};
-    font-size: ${p => p.theme.fontSize.h4FontSize};
+    font-size: ${p => p.theme.fontSize.l};
     margin: 0 ${p => styledUtils.getMultipliedSize(p.theme.base.baseHeight, 1)};
     display: flex;
     flex-direction: column;
@@ -47,7 +47,7 @@ const TooltipWrapper = styled['default'].div `
     }
     ${globalNavStyles.MenuLink} {
         font-weight: ${p => p.theme.fontWeight.bold};
-        font-size: ${p => p.theme.fontSize.defaultFontSize};
+        font-size: ${p => p.theme.fontSize.default};
         margin: 0rem 1.5rem;
         padding: 0.5rem 0;
         width: 1.5rem;

package/build/cjs/components/MainNavigation/ChildComponents/LinkModifier.js

@@ -25,10 +25,10 @@ const LinkModifier = ({ menuItem, tabIndex }) => {
     const menuItemLink = menuItem.urls[lang] || '';
     if (NextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
         return (React__default['default'].createElement(NextJSLinkComponent, { linkUrl: menuItem.urls[lang] },
-            React__default['default'].createElement(globalNavStyles.MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id },
+            React__default['default'].createElement(globalNavStyles.MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id, role: "menuitem" },
                 React__default['default'].createElement("span", null, menuItem.titles[lang]))));
     }
-    return (React__default['default'].createElement(globalNavStyles.MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id },
+    return (React__default['default'].createElement(globalNavStyles.MenuLink, { href: menuItem.urls[lang], onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, id: menuItem.id, role: "menuitem" },
         React__default['default'].createElement("span", null, menuItem.titles[lang])));
 };
 

package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.d.ts

@@ -11,12 +11,7 @@ export declare const TooltipWrapper: import("styled-components").StyledComponent
     };
     breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -47,22 +42,27 @@ export declare const TooltipWrapper: import("styled-components").StyledComponent
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -78,16 +78,23 @@ export declare const TooltipWrapper: import("styled-components").StyledComponent
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, {

package/build/cjs/components/MainNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js

@@ -54,11 +54,8 @@ const TooltipWrapper = styled['default'].button `
                 overflow: hidden;
                 max-width: ${navigation.IconContainerWidth};
             }
-            font-size: ${p => p.theme.fontSize.xxsFontSize};
+            font-size: ${p => p.theme.fontSize.xs};
             font-weight: ${p => p.theme.fontWeight.book};
-            @media (min-width: ${navigation.wideMenuBreakpoint}px) {
-                font-size: ${p => p.theme.fontSize.xsFontSize};
-            }
         }
     }
 `;

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

@@ -77,7 +77,7 @@ const MobileMenu = styled['default'].div `
     ${globalNavStyles.MenuLink}, ${globalNavStyles.MenuLinkWithChildren} {
         line-height: 1.4rem;
         padding: 1.25rem 1rem 1.25rem 1.25rem;
-        font-size: ${p => p.theme.fontSize.h4FontSize};
+        font-size: ${p => p.theme.fontSize.l};
         display: flex;
         flex-grow: 1;
         align-items: center;

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

@@ -38,7 +38,7 @@ const RibbonColumn = styled['default'].div `
     margin: 0.125rem 0;
     padding: 0.125rem 0;
     color: ${p => p.theme.color.gray55};
-    font-size: ${p => p.theme.fontSize.xsFontSize};
+    font-size: ${p => p.theme.fontSize.xs};
     border-right: 2px solid white;
     &:last-of-type {
         border: none;

package/build/cjs/components/MainNavigation/MainNavigation.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var ramda = require('ramda');
 var React = require('react');
 var withSizes = require('react-sizes');
-var stickybits = require('stickybits');
 var modifyBodyClass = require('../../hooks/modifyBodyClass.js');
 var useScrollPosition = require('../../hooks/useScrollPosition.js');
 var styled = require('../../themes/styled.js');
@@ -20,7 +19,6 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var withSizes__default = /*#__PURE__*/_interopDefaultLegacy(withSizes);
-var stickybits__default = /*#__PURE__*/_interopDefaultLegacy(stickybits);
 
 // TODO: Use proper props after https://jira.dna.fi/browse/STYLE-232 is done
 const mapSizesToProps = ({ width }, { collapseSize }) => ({
@@ -175,20 +173,6 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         hideOnScroll: false,
     });
     const [lang] = React.useState(language);
-    // polyfill for browser (e.g. IE11 and older Safari) that don't support CSS position: sticky
-    React.useEffect(() => {
-        if (!isStickySupported && typeof window !== 'undefined') {
-            const stickyElement = navigationEl.current;
-            if (stickyElement) {
-                const stickyBitsElement = stickybits__default['default'](stickyElement);
-                return function cleanUp() {
-                    if (stickyElement) {
-                        stickyBitsElement.cleanup();
-                    }
-                };
-            }
-        }
-    }, []);
     const handleNavMenuClick = (newValue, updatedLevel) => {
         let clickedItself = false;
         switch (updatedLevel) {
@@ -328,7 +312,7 @@ items = {}, language = 'fi', zIndex = 1030, languageSelector = false, isMobileMe
         React__default['default'].createElement(GlobalNavigationContainer, { className: className, ref: navigationEl, collapseSize: collapseSize, menuLevel: menuLevel, "data-testid": "main-navigation", navZIndex: zIndex, tooltipMenuActive: tooltipMenuActive },
             React__default['default'].createElement(NavContext['default'].Provider, { value: navigationContext },
                 React__default['default'].createElement(GlobalStyle, null),
-                !items.mainNavigation && notificationText && (React__default['default'].createElement(Notification['default'], { color: "info", showIcon: true, closeButton: false }, notificationText)),
+                !items.mainNavigation && notificationText && (React__default['default'].createElement(Notification['default'], { type: "info", showIcon: true, closeButton: false }, notificationText)),
                 ribbon && ribbonData && (React__default['default'].createElement(Ribbon['default'], { ribbonData: ribbonData, lang: language, navZIndex: zIndex })),
                 React__default['default'].createElement(NavigationWrapper, { collapseSize: collapseSize },
                     React__default['default'].createElement(HeaderNavigationElements['default'], { navElementProps: props }),