@dnanpm/styleguide 3.11.0 → 3.11.2

package/build/es/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenuExportedStyles.js

@@ -9,15 +9,15 @@ const TooltipWrapper = styled.button `
     padding: 0;
     overflow: visible;
     background: transparent;
-    color: ${p => (p.isHighlighted ? theme.color.text.pink : 'inherit')};
+    color: ${p => (p.$isHighlighted ? theme.color.text.pink : 'inherit')};
     font: inherit;
     line-height: normal;
     -webkit-font-smoothing: inherit;
     -moz-osx-font-smoothing: inherit;
     -webkit-appearance: none;
     cursor: pointer;
-    width: ${p => (p.isLoggedIn ? '6.25rem' : '100%')};
-    border-left: ${p => (p.isLoggedIn ? `2px solid ${theme.color.line.L03}` : 'none')};
+    width: ${p => (p.$isLoggedIn ? '6.25rem' : '100%')};
+    border-left: ${p => (p.$isLoggedIn ? `2px solid ${theme.color.line.L03}` : 'none')};
     &:active,
     &:focus {
         > svg,
@@ -28,7 +28,8 @@ const TooltipWrapper = styled.button `
     &:focus-visible {
         outline: 0;
         border-radius: ${theme.radius.s};
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
         > svg,
         > span {
@@ -39,14 +40,14 @@ const TooltipWrapper = styled.button `
         align-content: center;
         display: flex;
         margin: 0 auto;
-        @media (min-width: ${p => p.collapseSize + 1}px) {
+        @media (min-width: ${p => p.$collapseSize + 1}px) {
             height: 1.625em;
             width: 1.625em;
         }
     }
     > span {
         display: none;
-        @media (min-width: ${p => p.collapseSize + 1}px) {
+        @media (min-width: ${p => p.$collapseSize + 1}px) {
             font-size: ${theme.fontSize.xs};
             font-weight: ${theme.fontWeight.medium};
             width: 100%;

package/build/es/components/MainHeaderNavigation/ChildComponents/MobileMenu.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
+import type { MobileMenuBackLink } from '../types/globalNavProps';
+export declare const MenuItemBackLink: ({ currentLevel, backRef, }: MobileMenuBackLink & {
+    backRef?: React.RefObject<HTMLButtonElement>;
+}) => React.JSX.Element;
 declare const RenderMobileMenu: () => React.JSX.Element | null;
 export default RenderMobileMenu;

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

@@ -1,11 +1,10 @@
 import { ChevronLeft, ChevronRight } from '@dnanpm/icons';
-import React__default, { useContext, useRef, useMemo } from 'react';
+import React__default, { useContext, useRef, useEffect } from 'react';
 import { animated, useSpring } from 'react-spring';
 import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { menuLevelsAmount, navMaxHeight, mobileNavMaxWidth, headerMaxHeight } from '../../../themes/themeComponents/navigation.js';
 import { getMultipliedSize } from '../../../utils/styledUtils.js';
-import MobileMenuContext from '../context/MobileMenuContext.js';
 import NavContext from '../context/NavContext.js';
 import { MenuLink, MenuList, MenuItem, MenuLinkWithChildren, FeaturedBlock } from '../globalNavStyles.js';
 import LinkModifier, { isSelected } from './LinkModifier.js';
@@ -20,7 +19,7 @@ const MobileMenuWrapper = styled(animated.div) `
 `;
 const mobileMenu = `calc(100vh - ${headerMaxHeight})`;
 const MenuLinkBackLink = styled(MenuLink) ``;
-const MobileMenuContainer = styled.div `
+const MobileMenuContainer = styled.nav `
     width: 100%;
     position: absolute;
     top: ${navMaxHeight};
@@ -75,7 +74,7 @@ const MobileMenuContainer = styled.div `
     }
     ${FeaturedBlock} {
         border-bottom: 1px solid ${theme.color.line.L04};
-        > a {
+        section > a {
             font-size: ${theme.fontSize.s};
             line-height: ${theme.lineHeight.s};
             padding: ${getMultipliedSize(theme.base.baseHeight, 1)};
@@ -83,31 +82,25 @@ const MobileMenuContainer = styled.div `
         }
     }
 `;
-const MenuItemBackLink = ({ currentLevel }) => {
-    const { handleNavMenuClick, lang, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = useContext(NavContext);
-    const levels = {
-        level1Items,
-        level2Items,
-    };
-    const menuElementLevel = `level${currentLevel - 1}Items`;
-    const menuElements = levels[menuElementLevel];
+const MenuItemBackLink = ({ currentLevel, backRef, }) => {
+    const { backToPreviousCategoryLabel, handleNavMenuClick, lang, menuLevel: { scrollPosition }, level1Items, level2Items, getBackLink, } = useContext(NavContext);
+    const menuElements = currentLevel === 2 ? level1Items : level2Items;
+    const tabNavigationDisabled = scrollPosition !== currentLevel - 1;
+    const backLink = getBackLink(menuElements, currentLevel - 1);
     const mobileMenuBackClick = () => {
         handleNavMenuClick(null, `level${currentLevel - 1}Mobile`);
     };
-    const tabNavigationDisabled = scrollPosition !== currentLevel - 1;
-    const backLink = getBackLink(menuElements, currentLevel - 1);
-    return (React__default.createElement(MenuItem, { key: `back-${backLink.id}`, "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
-        React__default.createElement(MenuLinkBackLink, { as: "button", onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined },
+    return (React__default.createElement(MenuItem, { "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}` },
+        React__default.createElement(MenuLinkBackLink, { as: "button", ref: backRef, onClick: mobileMenuBackClick, tabIndex: tabNavigationDisabled ? -1 : undefined, "aria-label": `${backToPreviousCategoryLabel} ${backLink.titles[lang]}` },
             React__default.createElement(ChevronLeft, { size: "1.5rem" }),
             backLink.titles[lang])));
 };
-const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
+const SubMenuItem = ({ menuItem, currentLevel, itemIndex, mobileMenuRef, firstItemRef, }) => {
     const { handleNavMenuClick, menuLevel, lang, currentUrl } = useContext(NavContext);
-    const { mobileMenuRef } = useContext(MobileMenuContext);
-    const hasChildren = menuItem.pages.length;
+    const hasChildren = !!menuItem.pages.length;
     const indexLevel = currentLevel - 1;
     const tabNavigationDisabled = menuLevel.scrollPosition !== indexLevel;
-    const menuUrl = menuItem.urls[lang] || '';
+    const menuUrl = menuItem.urls[lang];
     const mobileMenuClick = (element) => (e) => {
         var _a, _b;
         (_b = (_a = mobileMenuRef === null || mobileMenuRef === void 0 ? void 0 : mobileMenuRef.current) === null || _a === void 0 ? void 0 : _a.scroll) === null || _b === void 0 ? void 0 : _b.call(_a, {
@@ -118,37 +111,50 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
         e.preventDefault();
         handleNavMenuClick(element.id, `level${currentLevel}Mobile`);
     };
-    const renderMenuItem = (children) => (React__default.createElement(MenuItem, { key: menuItem.id, "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, isActive: isSelected(currentUrl, menuUrl, true) }, children));
+    const renderMenuItem = (children) => (React__default.createElement(MenuItem, { key: menuItem.id, "data-testid": `mobile-menu-level-${currentLevel}-link-${itemIndex + 1}`, "$isActive": isSelected(currentUrl, menuUrl, true) }, children));
     if (hasChildren && currentLevel < 3) {
-        return renderMenuItem(React__default.createElement(MenuLink, { as: "button", onClick: mobileMenuClick(menuItem), tabIndex: tabNavigationDisabled ? -1 : undefined },
+        return renderMenuItem(React__default.createElement(MenuLink, { as: "button", ref: firstItemRef, onClick: mobileMenuClick(menuItem), tabIndex: tabNavigationDisabled ? -1 : undefined },
             menuItem.titles[lang],
             React__default.createElement(ChevronRight, { color: theme.color.default.pink })));
     }
     return renderMenuItem(React__default.createElement(LinkModifier, { menuItem: menuItem, disabledTabIndex: tabNavigationDisabled }));
 };
-const SubMenuMobile = ({ currentLevel, menuItem }) => {
-    const featuredItems = menuItem.pages.filter(subMenuItem => !subMenuItem.pages.length && currentLevel === 2);
+const SubMenuMobile = ({ currentLevel, menuItem, mobileMenuRef }) => {
+    const { collapseSize, featuredItemsAriaLabel, menuLevel } = useContext(NavContext);
     const indexLevel = currentLevel - 1;
-    const { collapseSize, menuLevel: { scrollPosition }, } = useContext(NavContext);
-    const tabNavigationDisabled = scrollPosition !== indexLevel;
-    if (!menuItem.pages.length) {
+    const tabNavigationDisabled = menuLevel.scrollPosition !== indexLevel;
+    const backRef = useRef(null);
+    const firstItemRef = useRef(null);
+    useEffect(() => {
+        // Delay focus to allow animation to finish
+        const timer = setTimeout(() => {
+            if (currentLevel === 1 && firstItemRef.current) {
+                firstItemRef.current.focus();
+            }
+            if (currentLevel > 1 && backRef.current) {
+                backRef.current.focus();
+            }
+        }, 300);
+        return () => clearTimeout(timer);
+    }, [menuItem, currentLevel]);
+    if (!(menuItem === null || menuItem === void 0 ? void 0 : menuItem.pages.length)) {
         return null;
     }
+    const featuredItems = currentLevel === 2 ? menuItem.pages.filter(subMenuItem => !subMenuItem.pages.length) : [];
+    const menuItems = menuItem.pages.filter(subMenuItem => !featuredItems.includes(subMenuItem));
     return (React__default.createElement(React__default.Fragment, null,
-        currentLevel > 1 && React__default.createElement(MenuItemBackLink, { currentLevel: currentLevel }),
-        featuredItems.length > 0 && (React__default.createElement(FeaturedBlock, { collapseSize: collapseSize }, featuredItems.map(subMenuItem => (React__default.createElement(LinkModifier, { key: subMenuItem.id, menuItem: subMenuItem, showIcon: true, disabledTabIndex: tabNavigationDisabled }))))),
-        menuItem.pages
-            .filter(subMenuItem => !featuredItems.includes(subMenuItem))
-            .map((subMenuItem, index) => (React__default.createElement(CreateSubMenuItem, { currentLevel: currentLevel, itemIndex: index, key: subMenuItem.id, menuItem: subMenuItem })))));
+        currentLevel > 1 && React__default.createElement(MenuItemBackLink, { backRef: backRef, currentLevel: currentLevel }),
+        featuredItems.length > 0 && (React__default.createElement(FeaturedBlock, { "$collapseSize": collapseSize },
+            React__default.createElement("section", { "aria-label": featuredItemsAriaLabel }, featuredItems.map(subMenuItem => (React__default.createElement(LinkModifier, { key: subMenuItem.id, menuItem: subMenuItem, showIcon: true, disabledTabIndex: tabNavigationDisabled })))))),
+        menuItems.map((subMenuItem, index) => (React__default.createElement(SubMenuItem, { currentLevel: currentLevel, itemIndex: index, key: subMenuItem.id, menuItem: subMenuItem, mobileMenuRef: mobileMenuRef, firstItemRef: index === 0 ? firstItemRef : undefined })))));
 };
-const NavigationMenuMobile = () => {
+const NavigationMenuMobile = ({ mobileMenuRef }) => {
     const { items, menuLevel, level1Items, level2Items } = useContext(NavContext);
     const { mainNavigation } = items;
     if (!(mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.pages.length)) {
         return null;
     }
-    const renderMenuList = (scrollPosition, level, menuItem) => (React__default.createElement(MenuList, { "aria-hidden": menuLevel.scrollPosition !== scrollPosition, "aria-disabled": menuLevel.scrollPosition !== scrollPosition, "data-testid": `mobile-nav-menu-level-${level}`, isInView: menuLevel.scrollPosition === scrollPosition },
-        React__default.createElement(SubMenuMobile, { currentLevel: level, menuItem: menuItem })));
+    const renderMenuList = (scrollPosition, level, menuItem) => (React__default.createElement(MenuList, { "aria-hidden": menuLevel.scrollPosition !== scrollPosition, "aria-disabled": menuLevel.scrollPosition !== scrollPosition, "data-testid": `mobile-nav-menu-level-${level}`, "$isInView": menuLevel.scrollPosition === scrollPosition }, menuLevel.scrollPosition === scrollPosition && (React__default.createElement(SubMenuMobile, { currentLevel: level, menuItem: menuItem, mobileMenuRef: mobileMenuRef }))));
     return (React__default.createElement(React__default.Fragment, null,
         renderMenuList(0, 1, mainNavigation),
         menuLevel.level1Mobile !== null &&
@@ -162,16 +168,12 @@ const RenderMobileMenu = () => {
     const slidingMenuAnimation = useSpring({
         transform: `translateX(${(menuLevel.scrollPosition / menuLevelsAmount) * -100}%)`,
     });
-    const mobileMenuContext = useMemo(() => ({
-        mobileMenuRef,
-    }), [mobileMenuRef]);
     if (!isMobileMenuOpen) {
         return null;
     }
-    return (React__default.createElement(MobileMenuContainer, { ref: mobileMenuRef },
-        React__default.createElement(MobileMenuContext.Provider, { value: mobileMenuContext },
-            React__default.createElement(MobileMenuWrapper, { style: slidingMenuAnimation },
-                React__default.createElement(NavigationMenuMobile, null)))));
+    return (React__default.createElement(MobileMenuContainer, { ref: mobileMenuRef, role: "dialog", "aria-modal": "true" },
+        React__default.createElement(MobileMenuWrapper, { style: slidingMenuAnimation },
+            React__default.createElement(NavigationMenuMobile, { mobileMenuRef: mobileMenuRef }))));
 };
 
-export { RenderMobileMenu as default };
+export { MenuItemBackLink, RenderMobileMenu as default };

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

@@ -2,10 +2,12 @@ import type { ComponentType, MouseEvent, ReactNode } from 'react';
 import React from 'react';
 import type { GlobalNavItems } from './types/globalNavProps';
 export interface MainHeaderNavigationProps {
+    backToPreviousCategoryLabel?: string;
     businessMenuAriaLabel?: string;
     categoryCollectionText?: string;
     /** Allows to pass a custom className */
     className?: string;
+    featuredItemsAriaLabel?: string;
     items?: GlobalNavItems;
     language?: string;
     zIndex?: number;
@@ -44,6 +46,6 @@ export interface MainHeaderNavigationProps {
     notificationText?: string;
 }
 /** @visibleName MainHeaderNavigation */
-declare const MainHeaderNavigation: ({ businessMenuAriaLabel, categoryCollectionText, closeMainMenuAriaLabel, className, collapseSize, currentUrl, dnaLogoLinkAriaLabel, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartAmountLabel, minicartComponent, minicartText, nextJSLinkComponent, notificationText, openMainMenuAriaLabel, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
+declare const MainHeaderNavigation: ({ backToPreviousCategoryLabel, businessMenuAriaLabel, categoryCollectionText, closeMainMenuAriaLabel, className, collapseSize, currentUrl, dnaLogoLinkAriaLabel, featuredItemsAriaLabel, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartAmountLabel, minicartComponent, minicartText, nextJSLinkComponent, notificationText, openMainMenuAriaLabel, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
 /** @component */
 export default MainHeaderNavigation;

package/build/es/components/MainHeaderNavigation/MainHeaderNavigation.js

@@ -74,7 +74,7 @@ const PageOverlay = styled.div `
     width: 100%;
     height: 100%;
     background: ${theme.color.background.plum.default + theme.color.transparency.T10};
-    z-index: ${({ navZIndex }) => navZIndex - 1};
+    z-index: ${({ $navZIndex }) => $navZIndex - 1};
 `;
 const scrollThreshold = 82;
 const checkThreshold = (prevPos, currPos) => {
@@ -84,7 +84,7 @@ const checkThreshold = (prevPos, currPos) => {
     return currPos - prevPos > scrollThreshold;
 };
 const GlobalNavigationContainer = styled.header `
-    z-index: ${({ navZIndex }) => navZIndex};
+    z-index: ${({ $navZIndex }) => $navZIndex};
     position: sticky;
     top: 0;
     left: 0;
@@ -109,7 +109,7 @@ const NavigationWrapper = styled.div `
     gap: 0;
     background-color: ${theme.color.background.white.default};
     border-bottom: 1px solid ${theme.color.line.L04};
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${p => p.$collapseSize + 1}px) {
         flex-wrap: nowrap;
         gap: 0 ${getMultipliedSize(theme.base.baseWidth, 1.5)};
     }
@@ -126,7 +126,7 @@ const initiateScrollToHeader = (componentRef) => {
 /** @visibleName MainHeaderNavigation */
 const MainHeaderNavigation = (_a) => {
     var _b, _c, _d;
-    var { businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', closeMainMenuAriaLabel, className, collapseSize = 767, currentUrl = '', dnaLogoLinkAriaLabel, isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartAmountLabel, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', openMainMenuAriaLabel, search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = __rest(_a, ["businessMenuAriaLabel", "categoryCollectionText", "closeMainMenuAriaLabel", "className", "collapseSize", "currentUrl", "dnaLogoLinkAriaLabel", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartAmountLabel", "minicartComponent", "minicartText", "nextJSLinkComponent", "notificationText", "openMainMenuAriaLabel", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
+    var { backToPreviousCategoryLabel = '', businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', closeMainMenuAriaLabel, className, collapseSize = 767, currentUrl = '', dnaLogoLinkAriaLabel, featuredItemsAriaLabel = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartAmountLabel, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', openMainMenuAriaLabel, search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = __rest(_a, ["backToPreviousCategoryLabel", "businessMenuAriaLabel", "categoryCollectionText", "closeMainMenuAriaLabel", "className", "collapseSize", "currentUrl", "dnaLogoLinkAriaLabel", "featuredItemsAriaLabel", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartAmountLabel", "minicartComponent", "minicartText", "nextJSLinkComponent", "notificationText", "openMainMenuAriaLabel", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
     const { isMobile } = useWindowSize(collapseSize);
     const navigationEl = useRef(null);
     const key = prop('id');
@@ -230,10 +230,12 @@ const MainHeaderNavigation = (_a) => {
             previousValue = isMobile;
         }
         return {
+            backToPreviousCategoryLabel,
             categoryCollectionText,
             collapseSize,
             currentUrl,
             getBackLink,
+            featuredItemsAriaLabel,
             handleNavMenuClick,
             isLoggedIn,
             isMobileMenu: isMobile,
@@ -255,9 +257,11 @@ const MainHeaderNavigation = (_a) => {
             tooltipItems,
         };
     }, [
+        backToPreviousCategoryLabel,
         categoryCollectionText,
         collapseSize,
         currentUrl,
+        featuredItemsAriaLabel,
         isLoggedIn,
         isMobile,
         isMobileMenuOpen,
@@ -291,23 +295,23 @@ const MainHeaderNavigation = (_a) => {
         setIsMobileMenuOpen(!isMobileMenuOpen);
     };
     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, collapseSize: collapseSize, "data-testid": "dna-main-header", navZIndex: zIndex, ref: navigationEl },
+        isPageOverlay && React__default.createElement(PageOverlay, { "data-testid": "navigation-overlay", "$navZIndex": zIndex }),
+        React__default.createElement(GlobalNavigationContainer, { className: className, "$collapseSize": collapseSize, "data-testid": "dna-main-header", "$navZIndex": zIndex, ref: navigationEl },
             React__default.createElement(NavContext.Provider, { value: navigationContext },
                 React__default.createElement(GlobalStyle, null),
                 !items.mainNavigation && notificationText && (React__default.createElement(Notification, { type: "info" }, notificationText)),
                 React__default.createElement(BusinessMenu, { ariaLabel: businessMenuAriaLabel, currentBusinessId: items.businessId, items: (_d = items.businessSelector) === null || _d === void 0 ? void 0 : _d.items, lang: language }),
-                React__default.createElement(NavigationWrapper, { collapseSize: collapseSize },
+                React__default.createElement(NavigationWrapper, { "$collapseSize": collapseSize },
                     React__default.createElement(LogoLink, { "data-testid": "dna-logo-link", href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], "aria-label": dnaLogoLinkAriaLabel },
                         React__default.createElement(DnaLogo, { size: headerLogoSize })),
-                    React__default.createElement(DesktopMenuContainer, { "aria-label": mainMenuAriaLabel, collapseSize: collapseSize },
+                    React__default.createElement(DesktopMenuContainer, { "aria-label": mainMenuAriaLabel, "$collapseSize": collapseSize },
                         React__default.createElement(DesktopMenu, null)),
-                    React__default.createElement(HeaderIconContainer, { collapseSize: collapseSize },
+                    React__default.createElement(HeaderIconContainer, { "$collapseSize": collapseSize },
                         languagesObject && languageSelector && (React__default.createElement(LanguageSelector, { currentLanguage: language, languagesObject: languagesObject, languageSelectorLabel: languageSelectorText })),
                         search && React__default.createElement(PageSearch, { searchLabel: searchText }),
                         minicart && (React__default.createElement(MinicartTooltip, { minicartAmount: minicartAmount, minicartAmountLabel: minicartAmountLabel !== null && minicartAmountLabel !== void 0 ? minicartAmountLabel : '', minicartLabel: minicartText, onCartButtonClick: props.onCartButtonClick })),
                         login && React__default.createElement(LoginTooltip, { loginLabel: loginText, isLogged: isLoggedIn }),
-                        React__default.createElement(IconContainer, { collapseSize: collapseSize, "data-testid": "header-mobile-menu-container" },
+                        React__default.createElement(IconContainer, { "$collapseSize": collapseSize, "data-testid": "header-mobile-menu-container" },
                             React__default.createElement(MobileMenuButton, { "aria-expanded": isMobileMenuOpen, "aria-label": isMobileMenuOpen
                                     ? closeMainMenuAriaLabel
                                     : openMainMenuAriaLabel, "data-testid": "header-mobile-menu-toggle", onClick: handleToggleClick }, isMobileMenuOpen ? React__default.createElement(Close, null) : React__default.createElement(Menu, null)))),

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

@@ -1,9 +1,11 @@
 import type { ComponentType, Dispatch, ReactNode, SetStateAction } from 'react';
 import type { GlobalNavItems, MenuLevelItem, MenuStates, MenuTooltipItems, MobileMenuLevel } from '../types/globalNavProps';
 export interface NavContextProps {
+    backToPreviousCategoryLabel: string;
     categoryCollectionText: string;
     collapseSize: number;
     currentUrl: string;
+    featuredItemsAriaLabel: string;
     getBackLink: (menuElements: MobileMenuLevel, i: number) => MenuLevelItem;
     handleNavMenuClick: (id: string | null, level: string) => void;
     isLoggedIn: boolean;

package/build/es/components/MainHeaderNavigation/context/NavContext.js

@@ -1,9 +1,11 @@
 import { createContext } from 'react';
 
 const NavContext = createContext({
-    categoryCollectionText: 'Muut kategoriat',
+    backToPreviousCategoryLabel: '',
+    categoryCollectionText: '',
     collapseSize: 767,
     currentUrl: '',
+    featuredItemsAriaLabel: '',
     getBackLink: () => ({
         id: '',
         pageIsLinkInDesktopNavigation: false,
@@ -16,7 +18,7 @@ const NavContext = createContext({
     isMobileMenu: false,
     isMobileMenuOpen: false,
     items: {},
-    lang: 'fi',
+    lang: '',
     level1Items: {
         level1: { id: '', pageIsLinkInDesktopNavigation: false, pages: [], titles: {}, urls: {} },
     },

package/build/es/components/MainHeaderNavigation/globalNavStyles.d.ts

@@ -1,24 +1,24 @@
 export declare const LogoLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 export declare const DesktopMenuContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
-    collapseSize: number;
+    $collapseSize: number;
 }>> & string;
 export declare const MobileMenuButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const HeaderIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    collapseSize: number;
+    $collapseSize: number;
 }>> & string;
 export declare const MenuItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
-    isActive?: boolean;
-    isFeaturedItem?: boolean;
+    $isActive?: boolean;
+    $isFeaturedItem?: boolean;
 }>> & string;
 export declare const MenuLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
-    isActive?: boolean;
+    $isActive?: boolean;
 }>> & string;
 export declare const MenuLinkWithChildren: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
-    isOpen?: boolean;
+    $isOpen?: boolean;
 }>> & string;
 export declare const MenuList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {
-    isInView?: boolean;
+    $isInView?: boolean;
 }>> & string;
 export declare const FeaturedBlock: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
-    collapseSize: number;
+    $collapseSize: number;
 }>> & string;

package/build/es/components/MainHeaderNavigation/globalNavStyles.js

@@ -12,7 +12,7 @@ const DesktopMenuContainer = styled.nav `
     display: none;
     flex-direction: column;
     position: absolute;
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${p => p.$collapseSize + 1}px) {
         position: initial;
         width: auto;
         max-width: unset;
@@ -36,7 +36,8 @@ const MobileMenuButton = styled.button `
     &:focus-visible {
         outline: 0;
         border-radius: ${theme.radius.s};
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
         color: ${theme.color.text.black};
     }
@@ -56,31 +57,32 @@ const HeaderIconContainer = styled.div `
         }
     }
     > div:last-child {
-        @media (min-width: ${p => p.collapseSize + 1}px) {
+        @media (min-width: ${p => p.$collapseSize + 1}px) {
             display: none;
         }
     }
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    @media (min-width: ${p => p.$collapseSize + 1}px) {
         gap: ${getMultipliedSize(theme.base.baseWidth, 2)};
     }
 `;
 const MenuItem = styled.li `
-    display: ${p => (p.isFeaturedItem ? 'grid' : 'flex')};
+    display: ${p => (p.$isFeaturedItem ? 'grid' : 'flex')};
     align-items: center;
-    grid-template-columns: ${p => (p.isFeaturedItem ? '1fr 1fr' : '1fr')};
+    grid-template-columns: ${p => (p.$isFeaturedItem ? '1fr 1fr' : '1fr')};
     & > a {
         padding: ${getMultipliedSize(theme.base.baseHeight, 0.5)}
             ${getMultipliedSize(theme.base.baseWidth, 3)};
     }
     > button,
     > a {
-        color: ${p => (p.isActive ? theme.color.text.pink : theme.color.text.black)};
-        justify-content: ${p => (p.isFeaturedItem ? 'flex-start' : 'space-between')};
+        color: ${p => (p.$isActive ? theme.color.text.pink : theme.color.text.black)};
+        justify-content: ${p => (p.$isFeaturedItem ? 'flex-start' : 'space-between')};
         font-size: ${theme.fontSize.s};
         &:focus-visible {
             outline: 0;
             border-radius: ${theme.radius.s};
-            box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+            box-shadow:
+                0px 0px 0px 2px ${theme.color.focus.light},
                 0px 0px 0px 4px ${theme.color.focus.dark};
         }
         ${media.xl `
@@ -91,7 +93,7 @@ const MenuItem = styled.li `
 const MenuLink = styled.a `
     overflow: visible;
     text-decoration: none;
-    color: ${p => (p.isActive ? theme.color.text.pink : theme.color.text.black)};
+    color: ${p => (p.$isActive ? theme.color.text.pink : theme.color.text.black)};
     > svg {
             fill: ${theme.color.text.pink};
             height: ${getMultipliedSize(theme.base.baseHeight, 2)};
@@ -104,9 +106,9 @@ const MenuLinkWithChildren = styled.a `
     display: block;
     font-family: inherit;
     white-space: normal;
-    color: ${p => (p.isOpen ? theme.color.text.pink : theme.color.default.black)};
+    color: ${p => (p.$isOpen ? theme.color.text.pink : theme.color.default.black)};
     > svg {
-            transform: rotate( ${p => (p.isOpen ? '270deg' : '90deg')});
+            transform: rotate( ${p => (p.$isOpen ? '270deg' : '90deg')});
             transition: transform .2s ease-in-out;
         }
     }
@@ -116,7 +118,7 @@ const MenuList = styled.ul `
     display: flex;
     flex-direction: row;
     gap: ${getMultipliedSize(theme.base.baseHeight, 1.5)};
-    max-height: ${p => (typeof p.isInView !== 'boolean' || p.isInView ? 'auto' : '5px')};
+    max-height: ${p => (typeof p.$isInView !== 'boolean' || p.$isInView ? 'auto' : '5px')};
     margin: 0;
     padding: 0;
     background-color: ${theme.color.background.white};
@@ -141,12 +143,9 @@ const MenuList = styled.ul `
 const FeaturedBlock = styled.li `
     background-color: ${theme.color.background.sand.E01};
     padding: ${getMultipliedSize(theme.base.baseHeight, 1)};
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    font-weight: ${theme.fontWeight.bold};
-    grid-column: 4;
-    grid-row: 1/4;
-    @media (min-width: ${p => p.collapseSize + 1}px) {
+    list-style: none;
+
+    @media (min-width: ${p => p.$collapseSize + 1}px) {
         ${getElevationShadow({ elevation: 'high' })};
         border-radius: 0
         border-width: 0 0 0 1px;
@@ -155,11 +154,17 @@ const FeaturedBlock = styled.li `
             ${getMultipliedSize(theme.base.baseWidth, 2)}
             ${getMultipliedSize(theme.base.baseHeight, 2)}
             ${getMultipliedSize(theme.base.baseWidth, 3)};
-        display: flex;
-        flex-direction: column;
-        gap: ${getMultipliedSize(theme.base.baseHeight, 1.5)};
-        align-items: stretch;
-        justify-content: flex-start;
+    }
+    section {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        @media (min-width: ${p => p.$collapseSize + 1}px) {
+            display: flex;
+            flex-direction: column;
+            gap: ${getMultipliedSize(theme.base.baseHeight, 1.5)};
+            align-items: stretch;
+            justify-content: flex-start;
+        }
     }
     a {
         font-weight: ${theme.fontWeight.bold};

package/build/es/components/Notification/Notification.js

@@ -45,7 +45,8 @@ const ButtonCloseStyled = styled(ButtonClose) `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
     }
 `;

package/build/es/components/Pill/Pill.js

@@ -68,7 +68,8 @@ const Label = styled.label `
 
     &:focus-within, *:focus > & {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
     }
 

package/build/es/components/RadioButton/RadioButton.js

@@ -71,7 +71,8 @@ const Input = styled.input `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
     }
 `;
@@ -79,7 +80,7 @@ const Input = styled.input `
 const RadioButtonComponent = (_a) => {
     var { 'data-testid': dataTestId } = _a, props = __rest(_a, ['data-testid']);
     return (React__default.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React__default.createElement(Input, { id: props.id, name: props.name, type: "radio", checked: props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }),
+        React__default.createElement(Input, { id: props.id, name: props.name, type: "radio", checked: props.checked, value: props.value, disabled: props.disabled, onChange: props.onChange, "data-checked": Boolean(props.checked), "data-testid": dataTestId && `${dataTestId}-input` }),
         props.label && (React__default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` }, props.label))));
 };
 const StyledFieldset = styled.fieldset `
@@ -96,7 +97,7 @@ const RadioButtonGroup = ({ label, description, groupName, value, onChange, id,
     const descriptionId = `${baseId}-description`;
     const combinedDescribedBy = [description ? descriptionId : undefined].filter(Boolean).join(' ');
     const content = children ||
-        (options === null || options === void 0 ? void 0 : options.map(option => (React__default.createElement(RadioButtonComponent, { key: option.id, id: option.id, name: groupName, value: option.value, label: option.label, disabled: option.disabled, checked: value === option.value, onChange: onChange, className: option.className, "data-testid": option['data-testid'], "data-checked": value === option.value }))));
+        (options === null || options === void 0 ? void 0 : options.map(option => (React__default.createElement(RadioButtonComponent, { key: option.id, id: option.id, name: groupName, value: option.value, label: option.label, disabled: option.disabled, checked: value === option.value, onChange: onChange, className: option.className, "data-testid": option['data-testid'] }))));
     const Wrapper = isFieldset ? StyledFieldset : 'div';
     const renderLabel = () => {
         if (!label)

package/build/es/components/SecondaryNavigation/SecondaryNavigation.js

@@ -68,7 +68,9 @@ const SecondaryNavigationList = styled.ul `
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    transition: max-height 0.2s ease-in-out, border-bottom 0.2s linear;
+    transition:
+        max-height 0.2s ease-in-out,
+        border-bottom 0.2s linear;
     background-color: ${({ isOpen }) => isOpen ? theme.color.background.white.default : 'transparent'};
     max-height: ${({ isOpen }) => (isOpen ? '500vh' : '0')};
     border-bottom: ${({ isOpen }) => (isOpen ? `1px solid ${theme.color.line.L03}` : 'none')};

package/build/es/components/Switch/Switch.js

@@ -89,9 +89,8 @@ const Switch = (_a) => {
             onChange(!props.isChecked);
         }
     };
-    const accessibleLabel = props.label ? undefined : ariaLabel || 'Toggle switch';
     return (React.createElement(Container, { className: props.className, "data-testid": dataTestId },
-        React.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-label": accessibleLabel, disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox", "data-checked": Boolean(props.isChecked) }),
+        React.createElement(Checkbox, { id: props.id, name: props.name, checked: Boolean(props.isChecked), "aria-label": ariaLabel, disabled: props.disabled, onChange: handleChange, role: "switch", type: "checkbox", "data-checked": Boolean(props.isChecked) }),
         React.createElement(LabelWrapper, { htmlFor: props.id },
             React.createElement(Rail, { "$isChecked": props.isChecked },
                 React.createElement(Button, { "$isChecked": props.isChecked })),

package/build/es/components/Tooltip/Tooltip.js

@@ -25,7 +25,8 @@ const Helper = styled.button `
 
     &:focus-visible {
         outline: none;
-        box-shadow: 0px 0px 0px 2px ${theme.color.focus.light},
+        box-shadow:
+            0px 0px 0px 2px ${theme.color.focus.light},
             0px 0px 0px 4px ${theme.color.focus.dark};
         border-radius: 100%;
     }