@dnanpm/styleguide 4.0.9 → 4.0.10

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

@@ -11,102 +11,107 @@ import ButtonPrimary from '../../ButtonPrimary/ButtonPrimary.js';
 import NavContext from '../context/NavContext.js';
 import TooltipWrapper from './MainNavTooltipMenuExportedStyles.js';
 
-const IconContainer = styled.div `
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    min-width: ${IconContainerMinWidth};
-    transition: color 0.2s ease-in-out;
-
-    > svg {
-        display: block;
-        height: ${navIconSize};
-        width: ${navIconSize};
-    }
-    > svg,
-    + span {
-        color: ${p => (p.$isActive ? theme.color.text.pink : 'inherit')};
-    }
-
-    @media (min-width: ${p => p.$collapseSize + 1}px) {
-        min-width: ${getMultipliedSize(theme.base.baseWidth, 6)};
-        + span {
-            display: block;
-        }
-    }
-`;
-const Tooltip = styled.div `
-    min-height: ${getMultipliedSize(theme.base.baseHeight, 5)};
-    // Ensure that the tooltip's content is always visible within the viewport. So, the max-height is the viewport height minus the header's height + some margin.
-    max-height: calc(var(--vh100, 100vh) - ${getMultipliedSize(theme.base.baseHeight, 12)});
-    position: absolute;
-    top: ${navMaxHeight};
-    z-index: ${p => p.$zIndex};
-    display: flex;
-    flex-direction: row;
-
-    @media (min-width: ${p => p.$fullWidthBreakpoint}px) {
-        width: ${p => p.$contentWidth};
-        right: ${p => (p.$fullWidthDesktop ? 0 : p.$tooltipRight)};
-    }
-`;
-const TooltipBox = styled(Box) `
-    border-top-left-radius: 0 !important;
-    border-top-right-radius: 0 !important;
-    min-height: inherit;
-    max-height: inherit;
-`;
-const Caret = styled.div `
-    position: absolute;
-    z-index: ${p => p.$zIndex + 1};
-    top: ${navMaxHeight};
-    transform: translate3d(50%, -50%, 0) rotate(-45deg);
-    width: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
-    height: ${getMultipliedSize(theme.base.baseWidth, 1.2)};
-    background-color: ${theme.color.default.white};
-    border: 1px solid ${theme.color.line.L03};
-    border-width: 1px 1px 0 0;
-    margin-left: -${getMultipliedSize(theme.base.baseWidth, 1)};
-
-    @media (min-width: ${p => p.$collapseSize + 1}px) {
-        max-height: calc(var(--vh100, 100vh) - ${navMaxHeight});
-    }
-`;
-const MainNavTooltipMenu = (_a) => {
-    var { ariaLabel, children, closeWhenTagClicked = [], contentComponent, contentWidth = '20rem', fullWidthBreakpoint = theme.breakpoints.xs, fullWidthDesktop = false, globalStateString, tooltipRight = '-1rem' } = _a, props = __rest(_a, ["ariaLabel", "children", "closeWhenTagClicked", "contentComponent", "contentWidth", "fullWidthBreakpoint", "fullWidthDesktop", "globalStateString", "tooltipRight"]);
-    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, navZIndex, } = useContext(NavContext);
-    const ref = useRef(null);
-    const globalStateKey = globalStateString;
-    const isLoginItemAndLoggedIn = globalStateKey === 'login' && isLoggedIn;
-    const ContentComponent = contentComponent;
-    useDocHeight();
-    useEffect(() => {
-        setTooltipItems({
-            minicart: showMinicart,
-            login: showLoginTooltip,
-            search: false,
-        });
-    }, [showMinicart, showLoginTooltip, setTooltipItems]);
-    const toggleState = () => {
-        resetMenuEvents();
-        setTimeout(() => {
-            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: !tooltipItems[globalStateKey] })));
-        });
-    };
-    useCloseOutsideOrElementClicked({ ref, closeWhenTagClicked }, () => {
-        if (tooltipItems[globalStateKey]) {
-            setTooltipItems(prevItems => (Object.assign(Object.assign({}, prevItems), { [globalStateKey]: false })));
-        }
+const IconContainer = styled.div.withConfig({
+  displayName: "MainNavTooltipMenu__IconContainer",
+  componentId: "sc-kb3peu-0"
+})(["margin:0;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:", ";transition:color 0.2s ease-in-out;> svg{display:block;height:", ";width:", ";}> svg,+ span{color:", ";}@media (min-width:", "px){min-width:", ";+ span{display:block;}}"], IconContainerMinWidth, navIconSize, navIconSize, p => p.$isActive ? theme.color.text.pink : 'inherit', p => p.$collapseSize + 1, getMultipliedSize(theme.base.baseWidth, 6));
+const Tooltip = styled.div.withConfig({
+  displayName: "MainNavTooltipMenu__Tooltip",
+  componentId: "sc-kb3peu-1"
+})(["min-height:", ";max-height:calc(var(--vh100,100vh) - ", ");position:absolute;top:", ";z-index:", ";display:flex;flex-direction:row;@media (min-width:", "px){width:", ";right:", ";}"], getMultipliedSize(theme.base.baseHeight, 5), getMultipliedSize(theme.base.baseHeight, 12), navMaxHeight, p => p.$zIndex, p => p.$fullWidthBreakpoint, p => p.$contentWidth, p => p.$fullWidthDesktop ? 0 : p.$tooltipRight);
+const TooltipBox = styled(Box).withConfig({
+  displayName: "MainNavTooltipMenu__TooltipBox",
+  componentId: "sc-kb3peu-2"
+})(["border-top-left-radius:0 !important;border-top-right-radius:0 !important;min-height:inherit;max-height:inherit;"]);
+const Caret = styled.div.withConfig({
+  displayName: "MainNavTooltipMenu__Caret",
+  componentId: "sc-kb3peu-3"
+})(["position:absolute;z-index:", ";top:", ";transform:translate3d(50%,-50%,0) rotate(-45deg);width:", ";height:", ";background-color:", ";border:1px solid ", ";border-width:1px 1px 0 0;margin-left:-", ";@media (min-width:", "px){max-height:calc(var(--vh100,100vh) - ", ");}"], p => p.$zIndex + 1, navMaxHeight, getMultipliedSize(theme.base.baseWidth, 1.2), getMultipliedSize(theme.base.baseWidth, 1.2), theme.color.default.white, theme.color.line.L03, getMultipliedSize(theme.base.baseWidth, 1), p => p.$collapseSize + 1, navMaxHeight);
+const MainNavTooltipMenu = _a => {
+  var {
+      ariaLabel,
+      children,
+      closeWhenTagClicked = [],
+      contentComponent,
+      contentWidth = '20rem',
+      fullWidthBreakpoint = theme.breakpoints.xs,
+      fullWidthDesktop = false,
+      globalStateString,
+      tooltipRight = '-1rem'
+    } = _a,
+    props = __rest(_a, ["ariaLabel", "children", "closeWhenTagClicked", "contentComponent", "contentWidth", "fullWidthBreakpoint", "fullWidthDesktop", "globalStateString", "tooltipRight"]);
+  const {
+    collapseSize,
+    isMobileMenu,
+    isLoggedIn,
+    resetMenuEvents,
+    setTooltipItems,
+    showLoginTooltip,
+    showMinicart,
+    tooltipItems,
+    navZIndex
+  } = useContext(NavContext);
+  const ref = useRef(null);
+  const globalStateKey = globalStateString;
+  const isLoginItemAndLoggedIn = globalStateKey === 'login' && isLoggedIn;
+  const ContentComponent = contentComponent;
+  useDocHeight();
+  useEffect(() => {
+    setTooltipItems({
+      minicart: showMinicart,
+      login: showLoginTooltip,
+      search: false
     });
-    return (React__default.createElement(IconContainer, { "data-testid": `header-${globalStateKey}-container`, "$collapseSize": collapseSize, ref: ref },
-        globalStateKey === 'login' && !isLoggedIn ? (React__default.createElement(ButtonPrimary, { onClick: ContentComponent ? toggleState : undefined, small: true }, children)) : (React__default.createElement(TooltipWrapper, { "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.createElement(React__default.Fragment, null,
-            React__default.createElement(Caret, { "$zIndex": navZIndex + 1, "$collapseSize": collapseSize }),
-            React__default.createElement(Tooltip, { "$zIndex": navZIndex + 1, "$tooltipRight": tooltipRight, "$contentWidth": contentWidth, "$collapseSize": collapseSize, "$fullWidthDesktop": fullWidthDesktop, "$fullWidthBreakpoint": fullWidthBreakpoint },
-                React__default.createElement(TooltipBox, { elevation: "high", padding: "0", width: "100%" },
-                    React__default.createElement(ContentComponent, { mobileView: isMobileMenu })))))));
+  }, [showMinicart, showLoginTooltip, setTooltipItems]);
+  const toggleState = () => {
+    resetMenuEvents();
+    setTimeout(() => {
+      setTooltipItems(prevItems => Object.assign(Object.assign({}, prevItems), {
+        [globalStateKey]: !tooltipItems[globalStateKey]
+      }));
+    });
+  };
+  useCloseOutsideOrElementClicked({
+    ref,
+    closeWhenTagClicked
+  }, () => {
+    if (tooltipItems[globalStateKey]) {
+      setTooltipItems(prevItems => Object.assign(Object.assign({}, prevItems), {
+        [globalStateKey]: false
+      }));
+    }
+  });
+  return /*#__PURE__*/React__default.createElement(IconContainer, {
+    "data-testid": `header-${globalStateKey}-container`,
+    "$collapseSize": collapseSize,
+    ref: ref
+  }, globalStateKey === 'login' && !isLoggedIn ? (/*#__PURE__*/React__default.createElement(ButtonPrimary, {
+    onClick: ContentComponent ? toggleState : undefined,
+    small: true
+  }, children)) : (/*#__PURE__*/React__default.createElement(TooltipWrapper, {
+    "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 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Caret, {
+    "$zIndex": navZIndex + 1,
+    "$collapseSize": collapseSize
+  }), /*#__PURE__*/React__default.createElement(Tooltip, {
+    "$zIndex": navZIndex + 1,
+    "$tooltipRight": tooltipRight,
+    "$contentWidth": contentWidth,
+    "$collapseSize": collapseSize,
+    "$fullWidthDesktop": fullWidthDesktop,
+    "$fullWidthBreakpoint": fullWidthBreakpoint
+  }, /*#__PURE__*/React__default.createElement(TooltipBox, {
+    elevation: "high",
+    padding: "0",
+    width: "100%"
+  }, /*#__PURE__*/React__default.createElement(ContentComponent, {
+    mobileView: isMobileMenu
+  }))))));
 };
 
 export { IconContainer, MainNavTooltipMenu as default };

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

@@ -1,7 +1,11 @@
-declare const TooltipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+declare const TooltipWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$collapseSize" | "$isHighlighted" | "$isLoggedIn"> & {
     $collapseSize: number;
     $isHighlighted?: boolean;
     $isLoggedIn?: boolean;
-}>> & string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$collapseSize" | "$isHighlighted" | "$isLoggedIn"> & {
+    $collapseSize: number;
+    $isHighlighted?: boolean;
+    $isLoggedIn?: boolean;
+}, never>>> & string;
 export default TooltipWrapper;
 export { TooltipWrapper };

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

@@ -2,63 +2,9 @@ import { styled } from 'styled-components';
 import theme from '../../../themes/theme.js';
 import { IconContainerWidth } from '../../../themes/themeComponents/navigation.js';
 
-const TooltipWrapper = styled.button `
-    position: relative;
-    border: none;
-    margin: 0;
-    padding: 0;
-    overflow: visible;
-    background: transparent;
-    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')};
-    &:active,
-    &:focus {
-        > svg,
-        > span {
-            color: ${theme.color.text.pink};
-        }
-    }
-    &:focus-visible {
-        outline: 0;
-        border-radius: ${theme.radius.s};
-        box-shadow:
-            0px 0px 0px 2px ${theme.color.focus.light},
-            0px 0px 0px 4px ${theme.color.focus.dark};
-        > svg,
-        > span {
-            color: ${theme.color.text.black};
-        }
-    }
-    > svg {
-        align-content: center;
-        display: flex;
-        margin: 0 auto;
-        @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) {
-            font-size: ${theme.fontSize.xs};
-            font-weight: ${theme.fontWeight.medium};
-            width: 100%;
-            display: block;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            overflow: hidden;
-            max-width: ${IconContainerWidth};
-            margin: auto;
-        }
-    }
-`;
+const TooltipWrapper = styled.button.withConfig({
+  displayName: "MainNavTooltipMenuExportedStyles__TooltipWrapper",
+  componentId: "sc-5ows69-0"
+})(["position:relative;border:none;margin:0;padding:0;overflow:visible;background:transparent;color:", ";font:inherit;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;cursor:pointer;width:", ";border-left:", ";&:active,&:focus{> svg,> span{color:", ";}}&:focus-visible{outline:0;border-radius:", ";box-shadow:0px 0px 0px 2px ", ",0px 0px 0px 4px ", ";> svg,> span{color:", ";}}> svg{align-content:center;display:flex;margin:0 auto;@media (min-width:", "px){height:1.625em;width:1.625em;}}> span{display:none;@media (min-width:", "px){font-size:", ";font-weight:", ";width:100%;display:block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:", ";margin:auto;}}"], p => p.$isHighlighted ? theme.color.text.pink : 'inherit', p => p.$isLoggedIn ? '6.25rem' : '100%', p => p.$isLoggedIn ? `2px solid ${theme.color.line.L03}` : 'none', theme.color.text.pink, theme.radius.s, theme.color.focus.light, theme.color.focus.dark, theme.color.text.black, p => p.$collapseSize + 1, p => p.$collapseSize + 1, theme.fontSize.xs, theme.fontWeight.medium, IconContainerWidth);
 
 export { TooltipWrapper, TooltipWrapper as default };

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

@@ -4,9 +4,25 @@ import theme from '../../../themes/theme.js';
 import NotificationBadge from '../../NotificationBadge/NotificationBadge.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
-const MinicartTooltip = ({ minicartAmount, minicartAmountLabel, minicartLabel, onCartButtonClick, }) => (React__default.createElement(MainNavTooltipMenu, { closeWhenTagClicked: ['a', 'button'], onCartButtonClick: onCartButtonClick, contentWidth: "35rem", fullWidthBreakpoint: theme.breakpoints.md, globalStateString: "minicart", tooltipRight: "5rem" },
-    React__default.createElement(Cart, null),
-    React__default.createElement("span", { "aria-hidden": !!minicartAmountLabel }, minicartLabel),
-    minicartAmount > 0 && (React__default.createElement(NotificationBadge, { "data-testid": "header-minicart-amount", right: "5px", top: "-5px", visuallyHiddenText: minicartAmountLabel }, minicartAmount))));
+const MinicartTooltip = ({
+  minicartAmount,
+  minicartAmountLabel,
+  minicartLabel,
+  onCartButtonClick
+}) => (/*#__PURE__*/React__default.createElement(MainNavTooltipMenu, {
+  closeWhenTagClicked: ['a', 'button'],
+  onCartButtonClick: onCartButtonClick,
+  contentWidth: "35rem",
+  fullWidthBreakpoint: theme.breakpoints.md,
+  globalStateString: "minicart",
+  tooltipRight: "5rem"
+}, /*#__PURE__*/React__default.createElement(Cart, null), /*#__PURE__*/React__default.createElement("span", {
+  "aria-hidden": !!minicartAmountLabel
+}, minicartLabel), minicartAmount > 0 && (/*#__PURE__*/React__default.createElement(NotificationBadge, {
+  "data-testid": "header-minicart-amount",
+  right: "5px",
+  top: "-5px",
+  visuallyHiddenText: minicartAmountLabel
+}, minicartAmount))));
 
 export { MinicartTooltip as default };