@dnanpm/styleguide 4.0.8 → 4.0.10

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

@@ -9,171 +9,199 @@ import NavContext from '../context/NavContext.js';
 import { MenuLink, MenuList, MenuItem, MenuLinkWithChildren, FeaturedBlock } from '../globalNavStyles.js';
 import LinkModifier, { isSelected } from './LinkModifier.js';
 
-const MobileMenuWrapper = styled(animated.div) `
-    width: ${100 * menuLevelsAmount}%;
-    display: flex;
-    button {
-        border: 0;
-        background: transparent;
-    }
-`;
+const MobileMenuWrapper = styled(animated.div).withConfig({
+  displayName: "MobileMenu__MobileMenuWrapper",
+  componentId: "sc-kla3uv-0"
+})(["width:", "%;display:flex;button{border:0;background:transparent;}"], 100 * menuLevelsAmount);
 const mobileMenu = `calc(100vh - ${headerMaxHeight})`;
-const MenuLinkBackLink = styled(MenuLink) ``;
-const MobileMenuContainer = styled.nav `
-    width: 100%;
-    position: absolute;
-    top: ${navMaxHeight};
-    right: 0;
-    overflow: hidden;
-    overflow-y: auto;
-    transition: max-height 0.2s ease-in-out;
-    background-color: ${theme.color.background.sand.default};
-    max-height: ${mobileMenu};
-    height: ${mobileMenu};
-    max-width: ${mobileNavMaxWidth};
-    ${MenuList} {
-        display: block;
-        width: ${100 / menuLevelsAmount}%;
-        position: relative;
-        border-top: 4px solid ${theme.color.background.white.default};
-        &:first-of-type {
-            background: ${theme.color.background.white.default};
-            > ${MenuItem} > ${MenuLink} {
-                font-weight: ${theme.fontWeight.bold};
-                height: ${getMultipliedSize(theme.base.baseHeight, 6)};
-            }
-        }
-        &:not(:first-of-type) {
-            background: ${theme.color.background.sand.default};
-        }
-        ${MenuItem} {
-            border-bottom: 1px solid ${theme.color.line.L04};
-        }
-        margin-bottom: ${headerMaxHeight}; // make sure items are visible in different devices which might calculate vh differently
-    }
-    ${MenuLink}, ${MenuLinkWithChildren} {
-        line-height: ${theme.lineHeight.default};
-        padding: ${getMultipliedSize(theme.base.baseWidth, 2)};
-        font-size: ${theme.fontSize.default};
-        display: flex;
-        flex-grow: 1;
-        align-items: center;
-        height: ${getMultipliedSize(theme.base.baseHeight, 5)};
-        &:hover {
-            cursor: pointer;
-            text-decoration: none;
-        }
-    }
-    ${MenuLinkBackLink} {
-        font-weight: ${theme.fontWeight.bold};
-        background: ${theme.color.background.white.default};
-        color: ${theme.color.text.pink};
-        justify-content: flex-start;
-        gap: ${getMultipliedSize(theme.base.baseHeight, 1)};
-        height: ${getMultipliedSize(theme.base.baseHeight, 6)};
-    }
-    ${FeaturedBlock} {
-        border-bottom: 1px solid ${theme.color.line.L04};
-        section > a {
-            font-size: ${theme.fontSize.s};
-            line-height: ${theme.lineHeight.s};
-            padding: ${getMultipliedSize(theme.base.baseHeight, 1)};
-            height: auto;
-        }
-    }
-`;
-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`);
-    };
-    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 MenuLinkBackLink = styled(MenuLink).withConfig({
+  displayName: "MobileMenu__MenuLinkBackLink",
+  componentId: "sc-kla3uv-1"
+})([""]);
+const MobileMenuContainer = styled.nav.withConfig({
+  displayName: "MobileMenu__MobileMenuContainer",
+  componentId: "sc-kla3uv-2"
+})(["width:100%;position:absolute;top:", ";right:0;overflow:hidden;overflow-y:auto;transition:max-height 0.2s ease-in-out;background-color:", ";max-height:", ";height:", ";max-width:", ";", "{display:block;width:", "%;position:relative;border-top:4px solid ", ";&:first-of-type{background:", ";> ", " > ", "{font-weight:", ";height:", ";}}&:not(:first-of-type){background:", ";}", "{border-bottom:1px solid ", ";}margin-bottom:", ";}", ",", "{line-height:", ";padding:", ";font-size:", ";display:flex;flex-grow:1;align-items:center;height:", ";&:hover{cursor:pointer;text-decoration:none;}}", "{font-weight:", ";background:", ";color:", ";justify-content:flex-start;gap:", ";height:", ";}", "{border-bottom:1px solid ", ";section > a{font-size:", ";line-height:", ";padding:", ";height:auto;}}"], navMaxHeight, theme.color.background.sand.default, mobileMenu, mobileMenu, mobileNavMaxWidth, MenuList, 100 / menuLevelsAmount, theme.color.background.white.default, theme.color.background.white.default, MenuItem, MenuLink, theme.fontWeight.bold, getMultipliedSize(theme.base.baseHeight, 6), theme.color.background.sand.default, MenuItem, theme.color.line.L04, headerMaxHeight, MenuLink, MenuLinkWithChildren, theme.lineHeight.default, getMultipliedSize(theme.base.baseWidth, 2), theme.fontSize.default, getMultipliedSize(theme.base.baseHeight, 5), MenuLinkBackLink, theme.fontWeight.bold, theme.color.background.white.default, theme.color.text.pink, getMultipliedSize(theme.base.baseHeight, 1), getMultipliedSize(theme.base.baseHeight, 6), FeaturedBlock, theme.color.line.L04, theme.fontSize.s, theme.lineHeight.s, getMultipliedSize(theme.base.baseHeight, 1));
+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`);
+  };
+  return /*#__PURE__*/React__default.createElement(MenuItem, {
+    "data-testid": `mobile-nav-menu-backlink-level-${currentLevel}`
+  }, /*#__PURE__*/React__default.createElement(MenuLinkBackLink, {
+    as: "button",
+    ref: backRef,
+    onClick: mobileMenuBackClick,
+    tabIndex: tabNavigationDisabled ? -1 : undefined,
+    "aria-label": `${backToPreviousCategoryLabel} ${backLink.titles[lang]}`
+  }, /*#__PURE__*/React__default.createElement(ChevronLeft, {
+    size: "1.5rem"
+  }), backLink.titles[lang]));
 };
-const SubMenuItem = ({ menuItem, currentLevel, itemIndex, mobileMenuRef, firstItemRef, }) => {
-    const { handleNavMenuClick, menuLevel, lang, currentUrl } = useContext(NavContext);
-    const hasChildren = !!menuItem.pages.length;
-    const indexLevel = currentLevel - 1;
-    const tabNavigationDisabled = menuLevel.scrollPosition !== indexLevel;
-    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, {
-            top: 0,
-            left: 0,
-            behavior: 'smooth',
-        });
-        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));
-    if (hasChildren && currentLevel < 3) {
-        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 SubMenuItem = ({
+  menuItem,
+  currentLevel,
+  itemIndex,
+  mobileMenuRef,
+  firstItemRef
+}) => {
+  const {
+    handleNavMenuClick,
+    menuLevel,
+    lang,
+    currentUrl
+  } = useContext(NavContext);
+  const hasChildren = !!menuItem.pages.length;
+  const indexLevel = currentLevel - 1;
+  const tabNavigationDisabled = menuLevel.scrollPosition !== indexLevel;
+  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, {
+      top: 0,
+      left: 0,
+      behavior: 'smooth'
+    });
+    e.preventDefault();
+    handleNavMenuClick(element.id, `level${currentLevel}Mobile`);
+  };
+  const renderMenuItem = children => (/*#__PURE__*/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(/*#__PURE__*/React__default.createElement(MenuLink, {
+      as: "button",
+      ref: firstItemRef,
+      onClick: mobileMenuClick(menuItem),
+      tabIndex: tabNavigationDisabled ? -1 : undefined
+    }, menuItem.titles[lang], /*#__PURE__*/React__default.createElement(ChevronRight, {
+      color: theme.color.default.pink
+    })));
+  }
+  return renderMenuItem(/*#__PURE__*/React__default.createElement(LinkModifier, {
+    menuItem: menuItem,
+    disabledTabIndex: tabNavigationDisabled
+  }));
 };
-const SubMenuMobile = ({ currentLevel, menuItem, mobileMenuRef }) => {
-    const { collapseSize, featuredItemsAriaLabel, menuLevel } = useContext(NavContext);
-    const indexLevel = currentLevel - 1;
-    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, { 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 SubMenuMobile = ({
+  currentLevel,
+  menuItem,
+  mobileMenuRef
+}) => {
+  const {
+    collapseSize,
+    featuredItemsAriaLabel,
+    menuLevel
+  } = useContext(NavContext);
+  const indexLevel = currentLevel - 1;
+  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 /*#__PURE__*/React__default.createElement(React__default.Fragment, null, currentLevel > 1 && /*#__PURE__*/React__default.createElement(MenuItemBackLink, {
+    backRef: backRef,
+    currentLevel: currentLevel
+  }), featuredItems.length > 0 && (/*#__PURE__*/React__default.createElement(FeaturedBlock, {
+    "$collapseSize": collapseSize
+  }, /*#__PURE__*/React__default.createElement("section", {
+    "aria-label": featuredItemsAriaLabel
+  }, featuredItems.map(subMenuItem => (/*#__PURE__*/React__default.createElement(LinkModifier, {
+    key: subMenuItem.id,
+    menuItem: subMenuItem,
+    showIcon: true,
+    disabledTabIndex: tabNavigationDisabled
+  })))))), menuItems.map((subMenuItem, index) => (/*#__PURE__*/React__default.createElement(SubMenuItem, {
+    currentLevel: currentLevel,
+    itemIndex: index,
+    key: subMenuItem.id,
+    menuItem: subMenuItem,
+    mobileMenuRef: mobileMenuRef,
+    firstItemRef: index === 0 ? firstItemRef : undefined
+  }))));
 };
-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 }, 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 &&
-            renderMenuList(1, 2, level1Items[menuLevel.level1Mobile]),
-        menuLevel.level2Mobile !== null &&
-            renderMenuList(2, 3, level2Items[menuLevel.level2Mobile])));
+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) => (/*#__PURE__*/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 && (/*#__PURE__*/React__default.createElement(SubMenuMobile, {
+    currentLevel: level,
+    menuItem: menuItem,
+    mobileMenuRef: mobileMenuRef
+  }))));
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderMenuList(0, 1, mainNavigation), menuLevel.level1Mobile !== null && renderMenuList(1, 2, level1Items[menuLevel.level1Mobile]), menuLevel.level2Mobile !== null && renderMenuList(2, 3, level2Items[menuLevel.level2Mobile]));
 };
 const RenderMobileMenu = () => {
-    const { menuLevel, isMobileMenuOpen } = useContext(NavContext);
-    const mobileMenuRef = useRef(null);
-    const slidingMenuAnimation = useSpring({
-        transform: `translateX(${(menuLevel.scrollPosition / menuLevelsAmount) * -100}%)`,
-    });
-    if (!isMobileMenuOpen) {
-        return 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 }))));
+  const {
+    menuLevel,
+    isMobileMenuOpen
+  } = useContext(NavContext);
+  const mobileMenuRef = useRef(null);
+  const slidingMenuAnimation = useSpring({
+    transform: `translateX(${menuLevel.scrollPosition / menuLevelsAmount * -100}%)`
+  });
+  if (!isMobileMenuOpen) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(MobileMenuContainer, {
+    ref: mobileMenuRef,
+    role: "dialog",
+    "aria-modal": "true"
+  }, /*#__PURE__*/React__default.createElement(MobileMenuWrapper, {
+    style: slidingMenuAnimation
+  }, /*#__PURE__*/React__default.createElement(NavigationMenuMobile, {
+    mobileMenuRef: mobileMenuRef
+  })));
 };
 
 export { MenuItemBackLink, RenderMobileMenu as default };

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

@@ -3,11 +3,22 @@ import React__default, { useContext } from 'react';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
-const PageSearch = ({ searchLabel }) => {
-    const { searchComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { ariaLabel: searchLabel, closeWhenTagClicked: ['a'], contentComponent: searchComponent, contentWidth: "100%", "data-testid": "header-search-container", fullWidthDesktop: true, globalStateString: "search", tooltipRight: "0" },
-        React__default.createElement(Search, null),
-        React__default.createElement("span", null, searchLabel)));
+const PageSearch = ({
+  searchLabel
+}) => {
+  const {
+    searchComponent
+  } = useContext(NavContext);
+  return /*#__PURE__*/React__default.createElement(MainNavTooltipMenu, {
+    ariaLabel: searchLabel,
+    closeWhenTagClicked: ['a'],
+    contentComponent: searchComponent,
+    contentWidth: "100%",
+    "data-testid": "header-search-container",
+    fullWidthDesktop: true,
+    globalStateString: "search",
+    tooltipRight: "0"
+  }, /*#__PURE__*/React__default.createElement(Search, null), /*#__PURE__*/React__default.createElement("span", null, searchLabel));
 };
 
 export { PageSearch as default };