@dnanpm/styleguide 3.9.13 → 3.9.14

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

@@ -30,6 +30,10 @@ interface Props extends Omit<ButtonProps, 'fullWidth'> {
      * Screen reader label describing the purpose of the ButtonIcon,
      */
     ariaLabel?: string;
+    /**
+     * Show the element with link color (pink)
+     */
+    isLinkStyle?: boolean;
 }
 /** @visibleName Button Icon */
 declare const ButtonIcon: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/build/cjs/components/ButtonIcon/ButtonIcon.js

@@ -16,6 +16,47 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
+const getStandardStyle = ({ isLinkStyle }) => {
+    const colorValue = isLinkStyle ? theme.default.color.default.pink : theme.default.color.text.black;
+    const colorHoverValue = isLinkStyle ? theme.default.color.hover.pink : theme.default.color.text.black;
+    return `
+        color: ${colorValue};
+        &:focus-visible {
+            border: 2px solid ${theme.default.color.focus.light};
+            box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.dark};
+        }
+        &:hover {
+            color: ${colorHoverValue};
+        }
+        &:active {
+            color: ${theme.default.color.text.black + theme.default.color.transparency.T80};
+        }
+        &:disabled,
+        &[disabled] {
+            color: ${theme.default.color.text.gray};
+        }
+    `;
+};
+const getDarkBgStyle = () => {
+    const colorValue = theme.default.color.text.white;
+    return `
+        color: ${colorValue};
+        &:focus-visible {
+            border: 2px solid ${theme.default.color.focus.dark};
+            box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light};
+        }
+        &:hover {
+            color: ${colorValue};
+        }   
+        &:active {
+            color: ${colorValue + theme.default.color.transparency.T90};
+        }
+        &:disabled,
+        &[disabled] {
+            color: ${colorValue + theme.default.color.transparency.T70};
+        }
+    `;
+};
 const ButtonElement = styled__default.default.button `
     display: inline-flex;
     align-items: center;
@@ -24,10 +65,11 @@ const ButtonElement = styled__default.default.button `
     font-size: ${({ small }) => (small ? theme.default.fontSize.s : theme.default.fontSize.default)};
     line-height: ${({ small }) => (small ? theme.default.lineHeight.xs : theme.default.lineHeight.default)};
     cursor: pointer;
-    color: ${({ darkBg }) => (darkBg ? theme.default.color.text.white : theme.default.color.text.black)};
     background-color: transparent;
     border: 2px solid transparent;
     padding: ${styledUtils.getDividedSize(theme.default.base.baseWidth, 5)} 0;
+    text-align: left;
+    transition: all 0.2s ease-in-out;
 
     & svg {
         pointer-events: none;
@@ -35,29 +77,23 @@ const ButtonElement = styled__default.default.button `
 
     ${({ isReversed }) => isReversed && `flex-direction: row-reverse;`}
 
+    ${({ darkBg, isLinkStyle }) => (darkBg ? getDarkBgStyle() : getStandardStyle({ isLinkStyle }))}
+
     &:focus-visible {
         border-radius: ${theme.default.radius.s};
         text-decoration: underline;
-        border: 2px solid
-            ${({ darkBg }) => (darkBg ? theme.default.color.focus.dark : theme.default.color.focus.light)};
-        box-shadow: 0px 0px 0px 2px
-            ${({ darkBg }) => (darkBg ? theme.default.color.focus.light : theme.default.color.focus.dark)};
         outline: none;
     }
 
     &:hover {
         text-decoration: underline;
-    }
-
-    &:active {
-        color: ${({ darkBg }) => darkBg
-    ? theme.default.color.text.white + theme.default.color.transparency.T90
-    : theme.default.color.text.black + theme.default.color.transparency.T80};
+        text-underline-offset: 0.2em;
+        text-decoration-skip-ink: auto;
+        text-decoration-thickness: from-font;
     }
 
     &:disabled,
     &[disabled] {
-        color: ${({ darkBg }) => darkBg ? theme.default.color.text.white + theme.default.color.transparency.T70 : theme.default.color.text.gray};
         pointer-events: none;
     }
 
@@ -92,7 +128,7 @@ const ButtonElement = styled__default.default.button `
 const ButtonIcon = React.forwardRef((_a, ref) => {
     var { icon = icons.EditUnderline, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue } = _a, props = tslib.__rest(_a, ["icon", 'data-testid', 'data-no-close', 'data-track-value']);
     const position = props.isReversed ? 'right' : 'left';
-    return (React__default.default.createElement(ButtonElement, Object.assign({ ref: ref, id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-expanded": props.ariaExpanded, "aria-label": props.ariaLabel }, props.dataAttributes), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black, label: props.loadingLabel })) : (React__default.default.createElement(React__default.default.Fragment, null,
+    return (React__default.default.createElement(ButtonElement, Object.assign({ ref: ref, id: props.id, name: props.name, type: props.type, onClick: props.onClick, onMouseDown: props.onMouseDown, small: props.small, darkBg: props.darkBg, "$loading": props.loading, tabIndex: props.loading ? -1 : 0, "data-loading": props.loading, disabled: props.disabled, hideChildrenMobile: props.hideChildrenMobile, isReversed: props.isReversed, className: props.className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, "aria-expanded": props.ariaExpanded, "aria-label": props.ariaLabel, isLinkStyle: props.isLinkStyle }, props.dataAttributes), props.loading ? (React__default.default.createElement(PixelLoader.default, { color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.black, label: props.loadingLabel })) : (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(Icon.default, { icon: icon, color: props.darkBg ? theme.default.color.default.white : theme.default.color.default.pink, size: props.small ? '1.25rem' : '1.5rem', position: props.children ? position : undefined, "aria-hidden": true }),
         props.children && (React__default.default.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, props.children))))));
 });

package/build/cjs/components/Checkbox/Checkbox.js

@@ -118,7 +118,7 @@ const Checkbox = (_a) => {
     };
     return (React__default.default.createElement(React__default.default.Fragment, null,
         React__default.default.createElement(Container, null,
-            React__default.default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId, "aria-required": props.required, "aria-invalid": props.error ? 'true' : undefined, "aria-errormessage": props.error && props.errorMessage ? errorId : undefined }),
+            React__default.default.createElement(Input, { id: props.id, name: props.name, type: "checkbox", className: props.className, checked: Boolean(props.value), onChange: handleChange, disabled: props.disabled, "data-testid": dataTestId, "aria-required": props.required, "aria-invalid": props.error ? 'true' : undefined, "aria-errormessage": props.error && props.errorMessage ? errorId : undefined, "data-checked": Boolean(props.value) }),
             React__default.default.createElement("label", { htmlFor: props.id, "data-testid": dataTestId && `${dataTestId}-label` },
                 props.label,
                 props.required && React__default.default.createElement(Mandatory, null, "*"))),

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

@@ -47,8 +47,7 @@ const BusinessMenuLink = styled.default.a `
 const BusinessMenuList = styled.default.nav `
     display: flex;
     gap: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
-    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)}
-        ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
+    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 0.5)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     ${styledUtils.media.md `
         padding: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1)} ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
     `};
@@ -57,7 +56,7 @@ const BusinessMenu = ({ ariaLabel, currentBusinessId, items, lang }) => {
     if (!(items === null || items === void 0 ? void 0 : items.length)) {
         return null;
     }
-    return (React__default.default.createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu", role: "navigation" }, items.map(item => (React__default.default.createElement(BusinessMenuLink, { className: `menu-link ${item.businessId === currentBusinessId ? 'active-site' : ''}`, href: item.urls[lang], isActive: item.businessId === currentBusinessId, key: item.businessId }, item.titles[lang])))));
+    return (React__default.default.createElement(BusinessMenuList, { "aria-label": ariaLabel, "data-testid": "business-menu" }, items.map(item => (React__default.default.createElement(BusinessMenuLink, { className: `menu-link ${item.businessId === currentBusinessId ? 'active-site' : ''}`, href: item.urls[lang], isActive: item.businessId === currentBusinessId, key: item.businessId }, item.titles[lang])))));
 };
 
 exports.default = BusinessMenu;

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

@@ -36,13 +36,12 @@ const noAnimation = styled.css `
 const MegaMenuContent = styled.default.ul `
     display: grid;
     grid-template-columns: 25% 25% 25% 25%;
-    padding-left: 0;
 `;
-const CategoryTitle = styled.default.span `
+const CategoryTitle = styled.default.h2 `
     display: flex;
     font-size: ${theme.default.fontSize.default};
     line-height: ${theme.default.lineHeight.default};
-    font-weight: ${theme.default.fontWeight.bold};
+    margin: 0;
     padding: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)}
         ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
     ${styledUtils.media.xl `
@@ -129,21 +128,21 @@ const SubMenuLevel1 = ({ menuItem }) => {
     const pagesWithSubItems = menuItem.pages.filter(element => element.pages.length > 0);
     // Helper function to render a sub menu item
     const renderSubMenuItem = (element, index, currUrl) => (React__default.default.createElement(SubMenuItem, { key: element.id, isHighlighted: LinkModifier.isSelected(currUrl, element.urls[lang], true), "data-testid": `desktop-nav-item-level-2-${index + 1}` },
-        React__default.default.createElement(LinkModifier.default, { menuItem: element, tabIndex: false })));
+        React__default.default.createElement(LinkModifier.default, { menuItem: element, disabledTabIndex: false })));
     if (!level1HasElements) {
         return null;
     }
     return (React__default.default.createElement(SubMenuList, { "aria-hidden": false, menuStates: menuLevel, navItemId: menuItem.id, navZIndex: navZIndex },
-        React__default.default.createElement(MegaMenuContent, null,
+        React__default.default.createElement(MegaMenuContent, { "aria-labelledby": `menu-id-${menuItem.id}` },
             pagesWithSubItems.slice(0, 5).map(element => (React__default.default.createElement(CategoryBlock, { key: element.id },
-                React__default.default.createElement(CategoryTitle, null, element.titles[lang]),
-                React__default.default.createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, element.pages.map((subElement, index) => renderSubMenuItem(subElement, index, currentUrl)))))),
+                React__default.default.createElement(CategoryTitle, { id: `menu-id-${element.id}` }, element.titles[lang]),
+                React__default.default.createElement("ul", { "aria-labelledby": `menu-id-${element.id}`, "data-testid": "desktop-nav-menu-ul-level-2" }, element.pages.map((subElement, index) => renderSubMenuItem(subElement, index, currentUrl)))))),
             pagesWithSubItems.length > 5 && (React__default.default.createElement(CategoryCollectionBlock, null,
-                React__default.default.createElement(CategoryTitle, null, categoryCollectionText),
-                React__default.default.createElement("ul", { "data-testid": "desktop-nav-menu-ul-level-2" }, pagesWithSubItems
+                React__default.default.createElement(CategoryTitle, { id: "misc-categories" }, categoryCollectionText),
+                React__default.default.createElement("ul", { "aria-labelledby": "misc-categories", "data-testid": "desktop-nav-menu-ul-level-2" }, pagesWithSubItems
                     .slice(5)
                     .map((element, index) => renderSubMenuItem(element, index, currentUrl))))),
-            React__default.default.createElement(globalNavStyles.FeaturedBlock, { collapseSize: collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.map(element => element.pages.length ? null : (React__default.default.createElement(LinkModifier.default, { key: element.id, showIcon: true, menuItem: element, tabIndex: false })))))));
+            React__default.default.createElement(globalNavStyles.FeaturedBlock, { collapseSize: collapseSize, "data-testid": "desktop-nav-menu-level-2-featured" }, menuItem.pages.map(element => element.pages.length ? null : (React__default.default.createElement(LinkModifier.default, { key: element.id, showIcon: true, menuItem: element, disabledTabIndex: false })))))));
 };
 const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
     const { lang, handleNavMenuClick, currentUrl, menuLevel } = React.useContext(NavContext.default);
@@ -152,9 +151,9 @@ const MenuItemWithChildren = ({ menuItem, currentLevel }) => {
         e.preventDefault();
         handleNavMenuClick(element.id, 'level1');
     };
-    return (React__default.default.createElement(DesktopMenuItem, { isActive: LinkModifier.isSelected(currentUrl, menuItem.urls[lang]), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}` },
-        React__default.default.createElement(globalNavStyles.MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), "data-testid": "menu-button-with-children", href: linkUrl },
-            React__default.default.createElement("span", null, menuItem.titles[lang]),
+    return (React__default.default.createElement(DesktopMenuItem, { isActive: LinkModifier.isSelected(currentUrl, linkUrl), "data-testid": `desktop-nav-item-level-1-${currentLevel + 1}` },
+        React__default.default.createElement(globalNavStyles.MenuLinkWithChildren, { isOpen: menuLevel.level1 === menuItem.id, onClick: menuClickMain(menuItem), "data-testid": "menu-button-with-children", "aria-current": LinkModifier.isSelected(currentUrl, linkUrl) ? 'true' : undefined, "aria-expanded": menuLevel.level1 === menuItem.id, href: linkUrl },
+            React__default.default.createElement("span", { id: `menu-id-${menuItem.id}` }, menuItem.titles[lang]),
             React__default.default.createElement(icons.ChevronRight, { size: "1rem" })),
         React__default.default.createElement(SubMenuLevel1, { menuItem: menuItem })));
 };
@@ -174,10 +173,10 @@ const DesktopMenu = () => {
     return (React__default.default.createElement(globalNavStyles.MenuList, { "aria-hidden": false, ref: ref, "data-testid": "desktop-nav-menu-ul" }, mainNavigation.map((navElement, index) => {
         const displaySubMenu = !navElement.pageIsLinkInDesktopNavigation && !!navElement.pages.length;
         if (displaySubMenu) {
-            return (React__default.default.createElement(MenuItemWithChildren, { menuItem: navElement, key: navElement.id, currentLevel: index }));
+            return (React__default.default.createElement(MenuItemWithChildren, { currentLevel: index, key: navElement.id, menuItem: navElement }));
         }
-        return (React__default.default.createElement(DesktopMenuItem, { key: navElement.id, "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: LinkModifier.isSelected(currentUrl, navElement.urls[lang]) },
-            React__default.default.createElement(LinkModifier.default, { menuItem: navElement, tabIndex: false })));
+        return (React__default.default.createElement(DesktopMenuItem, { "data-testid": `desktop-nav-item-level-1-${index + 1}`, isActive: LinkModifier.isSelected(currentUrl, navElement.urls[lang]), key: navElement.id },
+            React__default.default.createElement(LinkModifier.default, { menuItem: navElement, disabledTabIndex: false })));
     })));
 };
 

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

@@ -8,7 +8,6 @@ var styled = require('../../../themes/styled.js');
 var theme = require('../../../themes/theme.js');
 var navigation = require('../../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../../utils/styledUtils.js');
-var Icon = require('../../Icon/Icon.js');
 var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
@@ -32,7 +31,7 @@ const LanguageSelector = ({ currentLanguage, languagesObject, languageSelectorLa
         return null;
     }
     return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: languageSelectorLabel, closeWhenTagClicked: ['a'], contentComponent: LngComponent, contentWidth: "5rem", globalStateString: "lang", tooltipRight: isMobileMenu ? '13.8rem' : '11.8rem', zIndex: navZIndex + 1 },
-        React__default.default.createElement(Icon.default, { icon: icons.Globe, size: navigation.navIconSize }),
+        React__default.default.createElement(icons.Globe, { size: navigation.navIconSize }),
         React__default.default.createElement("span", { "data-testid": "header-lang-label" }, currentLanguage.toUpperCase())));
 };
 

package/build/cjs/components/MainHeaderNavigation/ChildComponents/LinkModifier.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 import type { MenuLevelItem } from '../types/globalNavProps';
 interface LinkModifierProps {
     menuItem: MenuLevelItem;
-    tabIndex: boolean;
+    disabledTabIndex?: boolean;
     showIcon?: boolean;
 }
 export declare const isSelected: (currentUrl: string, linkUrl: string, exactMatch?: boolean) => boolean;
-declare const LinkModifier: ({ menuItem, tabIndex, showIcon }: LinkModifierProps) => React.JSX.Element;
+declare const LinkModifier: ({ menuItem, disabledTabIndex, showIcon }: LinkModifierProps) => React.JSX.Element;
 export default LinkModifier;

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

@@ -4,8 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var icons = require('@dnanpm/icons');
 var React = require('react');
-var theme = require('../../../themes/theme.js');
-var Icon = require('../../Icon/Icon.js');
 var NavContext = require('../context/NavContext.js');
 var globalNavStyles = require('../globalNavStyles.js');
 
@@ -24,12 +22,12 @@ const isSelected = (currentUrl, linkUrl, exactMatch = false) => {
     return false;
 };
 const isMenuItemLinkAbsolute = (menuItemLink) => menuItemLink.includes('http');
-const LinkModifier = ({ menuItem, tabIndex, showIcon }) => {
-    const { lang, nextJSLinkComponent, resetMenuEvents } = React.useContext(NavContext.default);
-    const menuItemLink = menuItem.urls[lang] || '';
+const LinkModifier = ({ menuItem, disabledTabIndex, showIcon }) => {
+    const { lang, currentUrl, nextJSLinkComponent, resetMenuEvents } = React.useContext(NavContext.default);
+    const menuItemLink = menuItem.urls[lang];
     const isExternalLink = menuItem.target === '_blank';
-    const MenuLinkComponent = (React__default.default.createElement(globalNavStyles.MenuLink, { href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, tabIndex: tabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
-        showIcon && (React__default.default.createElement(Icon.default, { icon: isExternalLink ? icons.Open : icons.ArrowRight, size: "1.25rem", color: theme.default.color.default.pink })),
+    const MenuLinkComponent = (React__default.default.createElement(globalNavStyles.MenuLink, { "aria-current": isSelected(currentUrl, menuItemLink) ? 'page' : undefined, href: menuItemLink, id: menuItem.id, onClick: resetMenuEvents, tabIndex: disabledTabIndex ? -1 : undefined, target: isExternalLink ? '_blank' : '_self' },
+        showIcon && (isExternalLink ? React__default.default.createElement(icons.Open, null) : React__default.default.createElement(icons.ArrowRight, null)),
         React__default.default.createElement("span", null, menuItem.titles[lang])));
     if (nextJSLinkComponent && !isMenuItemLinkAbsolute(menuItemLink)) {
         const NextJSLinkComponent = nextJSLinkComponent;

package/build/cjs/components/MainHeaderNavigation/ChildComponents/LoginTooltip.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var icons = require('@dnanpm/icons');
 var React = require('react');
-var navigation = require('../../../themes/themeComponents/navigation.js');
-var Icon = require('../../Icon/Icon.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
 
@@ -14,9 +12,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const LoginTooltip = ({ isLogged, loginLabel }) => {
-    const { navZIndex, isMobileMenu, loginComponent: LoginComponent } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: LoginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default.default.createElement(React__default.default.Fragment, null,
-        React__default.default.createElement(Icon.default, { icon: icons.User, size: navigation.navIconSize }),
+    const { navZIndex, isMobileMenu, loginComponent } = React.useContext(NavContext.default);
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: loginLabel, closeWhenTagClicked: ['a', 'button'], contentComponent: loginComponent, globalStateString: "login", tooltipRight: isMobileMenu ? '3rem' : '1rem', zIndex: navZIndex + 1 }, !isLogged ? (loginLabel) : (React__default.default.createElement(React__default.default.Fragment, null,
+        React__default.default.createElement(icons.User, null),
         React__default.default.createElement("span", { "data-testid": "header-login-label" }, loginLabel)))));
 };
 

package/build/cjs/components/MainHeaderNavigation/ChildComponents/MainNavTooltipMenu.js

@@ -28,19 +28,19 @@ const IconContainer = styled.default.div `
     min-width: ${navigation.IconContainerMinWidth};
     transition: color 0.2s ease-in-out;
 
-    > span.dnasg-icon > svg {
+    > svg {
         display: block;
         height: ${navigation.navIconSize};
         width: ${navigation.navIconSize};
     }
-    > span.dnasg-icon > svg,
-    > span.dnasg-icon + span {
+    > svg,
+    + span {
         color: ${p => (p.isActive ? theme.default.color.text.pink : 'inherit')};
     }
 
     @media (min-width: ${p => p.collapseSize + 1}px) {
         min-width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 6)};
-        > span.dnasg-icon + span {
+        + span {
             display: block;
         }
     }
@@ -111,7 +111,7 @@ const MainNavTooltipMenu = (_a) => {
         }
     });
     return (React__default.default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, collapseSize: collapseSize, ref: ref },
-        globalStateKey === 'login' && !isLoggedIn ? (React__default.default.createElement(ButtonPrimary.default, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.default.createElement(MainNavTooltipMenuExportedStyles.default, { "aria-label": ariaLabel, isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
+        globalStateKey === 'login' && !isLoggedIn ? (React__default.default.createElement(ButtonPrimary.default, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.default.createElement(MainNavTooltipMenuExportedStyles.default, { "aria-label": ariaLabel, "aria-expanded": tooltipItems[globalStateKey], isLoggedIn: isLoginItemAndLoggedIn, collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || isLoginItemAndLoggedIn, onClick: props.onCartButtonClick || (ContentComponent ? toggleState : undefined) }, children)),
         tooltipItems[globalStateKey] && ContentComponent && (React__default.default.createElement(React__default.default.Fragment, null,
             React__default.default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
             React__default.default.createElement(Tooltip, { zIndex: zIndex, tooltipRight: tooltipRight, contentWidth: contentWidth, collapseSize: collapseSize, fullWidthDesktop: fullWidthDesktop, fullWidthBreakpoint: fullWidthBreakpoint },

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

@@ -24,7 +24,7 @@ const TooltipWrapper = styled.default.button `
     border-left: ${p => (p.isLoggedIn ? `2px solid ${theme.default.color.line.L03}` : 'none')};
     &:active,
     &:focus {
-        span.dnasg-icon > svg,
+        > svg,
         > span {
             color: ${theme.default.color.text.pink};
         }
@@ -34,12 +34,12 @@ const TooltipWrapper = styled.default.button `
         border-radius: ${theme.default.radius.s};
         box-shadow: 0px 0px 0px 2px ${theme.default.color.focus.light},
             0px 0px 0px 4px ${theme.default.color.focus.dark};
-        span.dnasg-icon > svg,
+        > svg,
         > span {
             color: ${theme.default.color.text.black};
         }
     }
-    span.dnasg-icon > svg {
+    > svg {
         align-content: center;
         display: flex;
         margin: 0 auto;
@@ -48,7 +48,7 @@ const TooltipWrapper = styled.default.button `
             width: 1.625em;
         }
     }
-    span.dnasg-icon + span {
+    > span {
         display: none;
         @media (min-width: ${p => p.collapseSize + 1}px) {
             font-size: ${theme.default.fontSize.xs};

package/build/cjs/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 import type { MainHeaderNavigationProps } from '../MainHeaderNavigation';
 interface MinicartTooltipProps extends Pick<MainHeaderNavigationProps, 'onCartButtonClick'> {
     minicartAmount: number;
-    minicartLabel?: string;
+    minicartLabel: string;
+    minicartAmountLabel: string;
 }
-declare const MinicartTooltip: ({ minicartAmount, minicartLabel, ...props }: MinicartTooltipProps) => React.JSX.Element;
+declare const MinicartTooltip: ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }: MinicartTooltipProps) => React.JSX.Element;
 export default MinicartTooltip;

package/build/cjs/components/MainHeaderNavigation/ChildComponents/MinicartTooltip.js

@@ -2,12 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib = require('tslib');
 var icons = require('@dnanpm/icons');
 var React = require('react');
 var theme = require('../../../themes/theme.js');
-var navigation = require('../../../themes/themeComponents/navigation.js');
-var Icon = require('../../Icon/Icon.js');
 var NotificationBadge = require('../../NotificationBadge/NotificationBadge.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
@@ -16,13 +13,12 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const MinicartTooltip = (_a) => {
-    var { minicartAmount, minicartLabel } = _a, props = tslib.__rest(_a, ["minicartAmount", "minicartLabel"]);
-    const { navZIndex, minicartComponent: MinicartComponent } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], onCartButtonClick: props.onCartButtonClick, contentComponent: MinicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.default.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
-        React__default.default.createElement(Icon.default, { icon: icons.Cart, size: navigation.navIconSize }),
-        React__default.default.createElement("span", null, minicartLabel),
-        minicartAmount > 0 && (React__default.default.createElement(NotificationBadge.default, { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
+const MinicartTooltip = ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }) => {
+    const { navZIndex, minicartComponent } = React.useContext(NavContext.default);
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: minicartLabel, closeWhenTagClicked: ['a', 'button'], onCartButtonClick: onCartButtonClick, contentComponent: minicartComponent, contentWidth: "35rem", fullWidthBreakpoint: theme.default.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem", zIndex: navZIndex + 1 },
+        React__default.default.createElement(icons.Cart, null),
+        React__default.default.createElement("span", { "aria-hidden": true }, minicartLabel),
+        minicartAmount > 0 && (React__default.default.createElement(NotificationBadge.default, { "data-testid": "header-minicart-amount", right: "5px", top: "-5px", visuallyHiddenText: minicartAmountLabel }, minicartAmount))));
 };
 
 exports.default = MinicartTooltip;

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

@@ -132,7 +132,7 @@ const CreateSubMenuItem = ({ menuItem, currentLevel, itemIndex }) => {
             menuItem.titles[lang],
             React__default.default.createElement(icons.ChevronRight, { color: theme.default.color.default.pink })));
     }
-    return renderMenuItem(React__default.default.createElement(LinkModifier.default, { menuItem: menuItem, tabIndex: tabNavigationDisabled }));
+    return renderMenuItem(React__default.default.createElement(LinkModifier.default, { menuItem: menuItem, disabledTabIndex: tabNavigationDisabled }));
 };
 const SubMenuMobile = ({ currentLevel, menuItem }) => {
     const featuredItems = menuItem.pages.filter(subMenuItem => !subMenuItem.pages.length && currentLevel === 2);
@@ -144,7 +144,7 @@ const SubMenuMobile = ({ currentLevel, menuItem }) => {
     }
     return (React__default.default.createElement(React__default.default.Fragment, null,
         currentLevel > 1 && React__default.default.createElement(MenuItemBackLink, { currentLevel: currentLevel }),
-        featuredItems.length > 0 && (React__default.default.createElement(globalNavStyles.FeaturedBlock, { collapseSize: collapseSize }, featuredItems.map(subMenuItem => (React__default.default.createElement(LinkModifier.default, { key: subMenuItem.id, menuItem: subMenuItem, showIcon: true, tabIndex: tabNavigationDisabled }))))),
+        featuredItems.length > 0 && (React__default.default.createElement(globalNavStyles.FeaturedBlock, { collapseSize: collapseSize }, featuredItems.map(subMenuItem => (React__default.default.createElement(LinkModifier.default, { key: subMenuItem.id, menuItem: subMenuItem, showIcon: true, disabledTabIndex: tabNavigationDisabled }))))),
         menuItem.pages
             .filter(subMenuItem => !featuredItems.includes(subMenuItem))
             .map((subMenuItem, index) => (React__default.default.createElement(CreateSubMenuItem, { currentLevel: currentLevel, itemIndex: index, key: subMenuItem.id, menuItem: subMenuItem })))));
@@ -155,7 +155,7 @@ const NavigationMenuMobile = () => {
     if (!(mainNavigation === null || mainNavigation === void 0 ? void 0 : mainNavigation.pages.length)) {
         return null;
     }
-    const renderMenuList = (scrollPosition, level, menuItem) => (React__default.default.createElement(globalNavStyles.MenuList, { role: "menu", "aria-hidden": menuLevel.scrollPosition !== scrollPosition, "aria-disabled": menuLevel.scrollPosition !== scrollPosition, "data-testid": `mobile-nav-menu-level-${level}`, isInView: menuLevel.scrollPosition === scrollPosition },
+    const renderMenuList = (scrollPosition, level, menuItem) => (React__default.default.createElement(globalNavStyles.MenuList, { "aria-hidden": menuLevel.scrollPosition !== scrollPosition, "aria-disabled": menuLevel.scrollPosition !== scrollPosition, "data-testid": `mobile-nav-menu-level-${level}`, isInView: menuLevel.scrollPosition === scrollPosition },
         React__default.default.createElement(SubMenuMobile, { currentLevel: level, menuItem: menuItem })));
     return (React__default.default.createElement(React__default.default.Fragment, null,
         renderMenuList(0, 1, mainNavigation),

package/build/cjs/components/MainHeaderNavigation/ChildComponents/PageSearch.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var icons = require('@dnanpm/icons');
 var React = require('react');
-var navigation = require('../../../themes/themeComponents/navigation.js');
-var Icon = require('../../Icon/Icon.js');
 var NavContext = require('../context/NavContext.js');
 var MainNavTooltipMenu = require('./MainNavTooltipMenu.js');
 
@@ -14,9 +12,9 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
 const PageSearch = ({ searchLabel }) => {
-    const { navZIndex, searchComponent: SearchComponent } = React.useContext(NavContext.default);
-    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: SearchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
-        React__default.default.createElement(Icon.default, { icon: icons.Search, size: navigation.navIconSize }),
+    const { navZIndex, searchComponent } = React.useContext(NavContext.default);
+    return (React__default.default.createElement(MainNavTooltipMenu.default, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: searchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0", zIndex: navZIndex + 1 },
+        React__default.default.createElement(icons.Search, null),
         React__default.default.createElement("span", null, searchLabel)));
 };
 

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

@@ -16,6 +16,7 @@ export interface MainHeaderNavigationProps {
     minicart?: boolean;
     minicartText?: string;
     minicartAmount?: number;
+    minicartAmountLabel?: string;
     /**
      * Defines MinicartComponent when used. If minicart is true but component is not provided, shown as disabled element.
      *
@@ -27,6 +28,9 @@ export interface MainHeaderNavigationProps {
      * On Cart button click callback
      */
     onCartButtonClick?: (e: MouseEvent<HTMLElement>) => void;
+    dnaLogoLinkAriaLabel?: string;
+    openMainMenuAriaLabel?: string;
+    closeMainMenuAriaLabel?: string;
     showLoginTooltip?: boolean;
     languageSelector?: boolean;
     languageSelectorText?: string;
@@ -40,6 +44,6 @@ export interface MainHeaderNavigationProps {
     notificationText?: string;
 }
 /** @visibleName MainHeaderNavigation */
-declare const MainHeaderNavigation: ({ businessMenuAriaLabel, categoryCollectionText, className, collapseSize, currentUrl, isLoggedIn, items, language, languageSelector, languageSelectorText, login, loginComponent, loginText, mainMenuAriaLabel, minicart, minicartAmount, minicartComponent, minicartText, nextJSLinkComponent, notificationText, search, searchComponent, searchText, showLoginTooltip, showMinicart, zIndex, ...props }: MainHeaderNavigationProps) => React.JSX.Element;
+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;
 /** @component */
 export default MainHeaderNavigation;

package/build/cjs/components/MainHeaderNavigation/MainHeaderNavigation.js

@@ -13,7 +13,6 @@ var theme = require('../../themes/theme.js');
 var navigation = require('../../themes/themeComponents/navigation.js');
 var styledUtils = require('../../utils/styledUtils.js');
 var DnaLogo = require('../DnaLogo/DnaLogo.js');
-var Icon = require('../Icon/Icon.js');
 var Notification = require('../Notification/Notification.js');
 var BusinessMenu = require('./ChildComponents/BusinessMenu.js');
 var DesktopMenu = require('./ChildComponents/DesktopMenu.js');
@@ -135,7 +134,7 @@ const initiateScrollToHeader = (componentRef) => {
 /** @visibleName MainHeaderNavigation */
 const MainHeaderNavigation = (_a) => {
     var _b, _c, _d;
-    var { businessMenuAriaLabel = 'Sivustot', categoryCollectionText = 'Muut kategoriat', className, collapseSize = 767, currentUrl = '', isLoggedIn = false, items = {}, language = 'fi', languageSelector = false, languageSelectorText = 'Vaihda kieltä', login = true, loginComponent, loginText = 'Kirjaudu', mainMenuAriaLabel = 'Päänavigaatio', minicart = true, minicartAmount = 0, minicartComponent = false, minicartText = 'Ostoskori', nextJSLinkComponent = false, notificationText = '', search = true, searchComponent = false, searchText = 'Haku', showLoginTooltip = false, showMinicart = false, zIndex = 1030 } = _a, props = tslib.__rest(_a, ["businessMenuAriaLabel", "categoryCollectionText", "className", "collapseSize", "currentUrl", "isLoggedIn", "items", "language", "languageSelector", "languageSelectorText", "login", "loginComponent", "loginText", "mainMenuAriaLabel", "minicart", "minicartAmount", "minicartComponent", "minicartText", "nextJSLinkComponent", "notificationText", "search", "searchComponent", "searchText", "showLoginTooltip", "showMinicart", "zIndex"]);
+    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 = tslib.__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"]);
     const { isMobile } = useWindowSize.default(collapseSize);
     const navigationEl = React.useRef(null);
     const key = ramda.prop('id');
@@ -301,24 +300,25 @@ const MainHeaderNavigation = (_a) => {
     };
     return (React__default.default.createElement(React__default.default.Fragment, null,
         isPageOverlay && React__default.default.createElement(PageOverlay, { "data-testid": "navigation-overlay", navZIndex: zIndex }),
-        React__default.default.createElement(GlobalNavigationContainer, { className: className, collapseSize: collapseSize, "data-testid": "dna-main-header", navZIndex: zIndex, ref: navigationEl, role: "banner" },
+        React__default.default.createElement(GlobalNavigationContainer, { className: className, collapseSize: collapseSize, "data-testid": "dna-main-header", navZIndex: zIndex, ref: navigationEl },
             React__default.default.createElement(NavContext.default.Provider, { value: navigationContext },
                 React__default.default.createElement(GlobalStyle, null),
                 !items.mainNavigation && notificationText && (React__default.default.createElement(Notification.default, { type: "info" }, notificationText)),
                 React__default.default.createElement(BusinessMenu.default, { ariaLabel: businessMenuAriaLabel, currentBusinessId: items.businessId, items: (_d = items.businessSelector) === null || _d === void 0 ? void 0 : _d.items, lang: language }),
                 React__default.default.createElement(NavigationWrapper, { collapseSize: collapseSize },
-                    React__default.default.createElement(globalNavStyles.LogoLink, { "data-testid": "dna-logo-link", href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], title: "DNA" },
+                    React__default.default.createElement(globalNavStyles.LogoLink, { "data-testid": "dna-logo-link", href: currentBusinessSite === null || currentBusinessSite === void 0 ? void 0 : currentBusinessSite.urls[language], "aria-label": dnaLogoLinkAriaLabel },
                         React__default.default.createElement(DnaLogo.default, { size: navigation.headerLogoSize })),
                     React__default.default.createElement(globalNavStyles.DesktopMenuContainer, { "aria-label": mainMenuAriaLabel, collapseSize: collapseSize },
                         React__default.default.createElement(DesktopMenu.default, null)),
                     React__default.default.createElement(globalNavStyles.HeaderIconContainer, { collapseSize: collapseSize },
                         languagesObject && languageSelector && (React__default.default.createElement(LanguageSelector.default, { currentLanguage: language, languagesObject: languagesObject, languageSelectorLabel: languageSelectorText })),
                         search && React__default.default.createElement(PageSearch.default, { searchLabel: searchText }),
-                        minicart && (React__default.default.createElement(MinicartTooltip.default, { minicartAmount: minicartAmount, minicartLabel: minicartText, onCartButtonClick: props.onCartButtonClick })),
+                        minicart && (React__default.default.createElement(MinicartTooltip.default, { minicartAmount: minicartAmount, minicartAmountLabel: minicartAmountLabel !== null && minicartAmountLabel !== void 0 ? minicartAmountLabel : '', minicartLabel: minicartText, onCartButtonClick: props.onCartButtonClick })),
                         login && React__default.default.createElement(LoginTooltip.default, { loginLabel: loginText, isLogged: isLoggedIn }),
                         React__default.default.createElement(MainNavTooltipMenu.IconContainer, { collapseSize: collapseSize, "data-testid": "header-mobile-menu-container" },
-                            React__default.default.createElement(globalNavStyles.MobileMenuButton, { "aria-expanded": isMobileMenuOpen, "aria-label": "menu toggle", "data-testid": "header-mobile-menu-toggle", onClick: handleToggleClick },
-                                React__default.default.createElement(Icon.default, { icon: isMobileMenuOpen ? icons.Close : icons.Menu, size: navigation.navIconSize })))),
+                            React__default.default.createElement(globalNavStyles.MobileMenuButton, { "aria-expanded": isMobileMenuOpen, "aria-label": isMobileMenuOpen
+                                    ? closeMainMenuAriaLabel
+                                    : openMainMenuAriaLabel, "data-testid": "header-mobile-menu-toggle", onClick: handleToggleClick }, isMobileMenuOpen ? React__default.default.createElement(icons.Close, null) : React__default.default.createElement(icons.Menu, null)))),
                     isMobile && React__default.default.createElement(MobileMenu.default, null))))));
 };
 

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

@@ -94,6 +94,12 @@ const MenuLink = styled.default.a `
     overflow: visible;
     text-decoration: none;
     color: ${p => (p.isActive ? theme.default.color.text.pink : theme.default.color.text.black)};
+    > svg {
+            fill: ${theme.default.color.text.pink};
+            height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 2)};
+            width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
+        }
+    }
 `;
 const MenuLinkWithChildren = styled.default.a `
     line-height: ${theme.default.lineHeight.xs};

package/build/cjs/components/Pill/Pill.js

@@ -124,7 +124,7 @@ const Pill = (_a) => {
     const isDefaultType = type === 'none';
     return (React__default.default.createElement(Label, { as: isDefaultType ? 'button' : 'label', id: isDefaultType ? props.id : undefined, htmlFor: !isDefaultType ? props.id : undefined, type: isDefaultType ? 'button' : undefined, position: props.position, isChecked: props.isChecked || props.isDefaultChecked, isDisabled: props.isDisabled, className: props.className, "data-testid": dataTestId, isDefaultButtonStyle: props.isDefaultButtonStyle, "aria-label": props.ariaLabel, disabled: isDefaultType ? props.isDisabled : undefined, onClick: isDefaultType && !props.isDisabled ? props.onClick : undefined },
         props.children,
-        !isDefaultType && (React__default.default.createElement(Input, { id: props.id, name: props.name, type: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange, "data-testid": dataTestId && `${dataTestId}-input` }))));
+        !isDefaultType && (React__default.default.createElement(Input, { id: props.id, name: props.name, type: type, defaultChecked: props.isDefaultChecked, checked: props.isChecked, value: props.value, onChange: props.onChange, disabled: props.isDisabled, readOnly: !props.onChange, "data-testid": dataTestId && `${dataTestId}-input`, "data-checked": props.isChecked }))));
 };
 
 exports.default = Pill;