@dnanpm/styleguide 3.7.1 → 3.7.2

package/build/es/components/MainNavigation/ChildComponents/MainNavTooltipMenu.d.ts

@@ -1,24 +1,24 @@
-import type { ReactNode } from 'react';
-import React from 'react';
-export interface MainNavTooltipMenuProps {
-    /** Tooltip menu content */
-    children?: ReactNode;
-    /** Overlap other elements */
-    zIndex?: number;
-    /** Tooltip position from right. Default: 1.25rem */
-    tooltipRight?: string;
-    /** Component provided for tooltip content */
-    contentComponent?: ReactNode | boolean | undefined;
-    /** Array of tags (lowercase) that will close menu if they are inside the dropdown tooltip menu. default []. THIS CAN BE OVERRIDEN WITH data-no-close="true" in element */
-    closeWhenTagClicked?: string[];
-    /** Width of the opened menu content. default 20rem. */
-    contentWidth?: string;
-    /** This will define the global state object string. mandatory */
-    globalStateString: string;
-    /** Adjust menu margin so that it will not overflow if fullWidth. optional. default false. */
-    fullWidthDesktop?: boolean;
-    /** Adjust menu to be full width after this number. default xs (480). */
-    fullWidthBreakpoint?: number;
-}
-declare const MainNavTooltipMenu: ({ children, zIndex, tooltipRight, contentWidth, contentComponent, closeWhenTagClicked, globalStateString, fullWidthDesktop, fullWidthBreakpoint, }: MainNavTooltipMenuProps) => React.JSX.Element;
-export default MainNavTooltipMenu;
+import type { ReactNode } from 'react';
+import React from 'react';
+export interface MainNavTooltipMenuProps {
+    /** Tooltip menu content */
+    children?: ReactNode;
+    /** Overlap other elements */
+    zIndex?: number;
+    /** Tooltip position from right. Default: 1.25rem */
+    tooltipRight?: string;
+    /** Component provided for tooltip content */
+    contentComponent?: ReactNode | boolean | undefined;
+    /** Array of tags (lowercase) that will close menu if they are inside the dropdown tooltip menu. default []. THIS CAN BE OVERRIDEN WITH data-no-close="true" in element */
+    closeWhenTagClicked?: string[];
+    /** Width of the opened menu content. default 20rem. */
+    contentWidth?: string;
+    /** This will define the global state object string. mandatory */
+    globalStateString: string;
+    /** Adjust menu margin so that it will not overflow if fullWidth. optional. default false. */
+    fullWidthDesktop?: boolean;
+    /** Adjust menu to be full width after this number. default xs (480). */
+    fullWidthBreakpoint?: number;
+}
+declare const MainNavTooltipMenu: ({ children, zIndex, tooltipRight, contentWidth, contentComponent, closeWhenTagClicked, globalStateString, fullWidthDesktop, fullWidthBreakpoint, }: MainNavTooltipMenuProps) => React.JSX.Element;
+export default MainNavTooltipMenu;

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

@@ -11,7 +11,7 @@ import TooltipWrapper from './MainNavTooltipMenuExportedStyles.js';
 
 const Container = styled.div `
     width: 100%;
-`;
+`;
 const Tooltip = styled.div `
     min-height: ${getMultipliedSize(theme.base.baseHeight, 5)};
     max-height: calc(var(--vh100, 100vh) - ${mobileNavMaxHeight});
@@ -35,13 +35,13 @@ const Tooltip = styled.div `
         max-height: calc(var(--vh100, 100vh) - (${desktopNavMaxHeight} + ${ribbonHeight}));
         top: calc(${desktopNavMaxHeight} + ${ribbonHeight});
     }
-`;
+`;
 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};
@@ -60,37 +60,37 @@ const Caret = styled.div `
         max-height: calc(var(--vh100, 100vh) - ${desktopNavMaxHeight});
         top: calc(${desktopNavMaxHeight} + ${ribbonHeight});
     }
-`;
-const MainNavTooltipMenu = ({ children, zIndex = 1, tooltipRight = '-1rem', contentWidth = '20rem', contentComponent, closeWhenTagClicked = [], globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = theme.breakpoints.xs, }) => {
-    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = useContext(NavContext);
-    const ref = useRef(null);
-    const globalStateKey = globalStateString;
-    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 })));
-        }
-    });
-    return (React__default.createElement(Container, { ref: ref },
-        React__default.createElement(TooltipWrapper, { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || (globalStateKey === 'login' && isLoggedIn), onClick: ContentComponent ? toggleState : undefined }, children),
-        tooltipItems[globalStateKey] && React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
-        tooltipItems[globalStateKey] && ContentComponent && (React__default.createElement(Tooltip, { zIndex: zIndex, 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 }))))));
+`;
+const MainNavTooltipMenu = ({ children, zIndex = 1, tooltipRight = '-1rem', contentWidth = '20rem', contentComponent, closeWhenTagClicked = [], globalStateString, fullWidthDesktop = false, fullWidthBreakpoint = theme.breakpoints.xs, }) => {
+    const { collapseSize, isMobileMenu, isLoggedIn, resetMenuEvents, setTooltipItems, showLoginTooltip, showMinicart, tooltipItems, } = useContext(NavContext);
+    const ref = useRef(null);
+    const globalStateKey = globalStateString;
+    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 })));
+        }
+    });
+    return (React__default.createElement(Container, { ref: ref },
+        React__default.createElement(TooltipWrapper, { collapseSize: collapseSize, isHighlighted: tooltipItems[globalStateKey] || (globalStateKey === 'login' && isLoggedIn), onClick: ContentComponent ? toggleState : undefined }, children),
+        tooltipItems[globalStateKey] && React__default.createElement(Caret, { zIndex: zIndex, collapseSize: collapseSize }),
+        tooltipItems[globalStateKey] && ContentComponent && (React__default.createElement(Tooltip, { zIndex: zIndex, 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 }))))));
 };
 
 export { MainNavTooltipMenu as default };

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

@@ -1,168 +1,168 @@
-declare const TooltipWrapper: import("styled-components").StyledComponent<"button", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        default: {
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        accent: {
-            lemon: string;
-            sky: string;
-            orange: string;
-        };
-        hover: {
-            pink: string;
-        };
-        text: {
-            gray: string;
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        line: {
-            L01: string;
-            L02: string;
-            L03: string;
-            L04: string;
-        };
-        notification: {
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        background: {
-            sand: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            pink: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            plum: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            lemon: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            sky: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            orange: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            white: {
-                default: string;
-            };
-        };
-        focus: {
-            dark: string;
-            light: string;
-        };
-        transparency: {
-            T0: string;
-            T10: string;
-            T20: string;
-            T30: string;
-            T40: string;
-            T50: string;
-            T60: string;
-            T70: string;
-            T80: string;
-            T90: string;
-            T100: string;
-        };
-    };
-    fontFamily: {
-        default: string;
-        heading: string;
-        numerals: string;
-    };
-    fontSize: {
-        default: string;
-        xl: string;
-        l: string;
-        s: string;
-        xs: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    fontWeight: {
-        book: number;
-        medium: number;
-        bold: number;
-        black: number;
-    };
-    form: {
-        smallSelectWidth: string;
-        smallSelectHeight: string;
-    };
-    grid: {
-        gutter: string;
-    };
-    lineHeight: {
-        default: string;
-        xl: string;
-        s: string;
-        xs: string;
-        xxs: string;
-        auto: string;
-        h1XL: string;
-        h1L: string;
-        h1M: string;
-        h1S: string;
-        h2M: string;
-        h2S: string;
-        h3: string;
-        h4: string;
-        h5: string;
-        h1: string;
-        h2: string;
-    };
-    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}, {
-    collapseSize: number;
-    isHighlighted?: boolean | undefined;
-}, never>;
-export default TooltipWrapper;
-export { TooltipWrapper };
+declare const TooltipWrapper: import("styled-components").StyledComponent<"button", {
+    base: {
+        baseHeight: {
+            value: number;
+            unit: string;
+        };
+        baseWidth: {
+            value: number;
+            unit: string;
+        };
+    };
+    breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
+    color: {
+        default: {
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        accent: {
+            lemon: string;
+            sky: string;
+            orange: string;
+        };
+        hover: {
+            pink: string;
+        };
+        text: {
+            gray: string;
+            pink: string;
+            plum: string;
+            white: string;
+            black: string;
+        };
+        line: {
+            L01: string;
+            L02: string;
+            L03: string;
+            L04: string;
+        };
+        notification: {
+            info: string;
+            success: string;
+            warning: string;
+            error: string;
+        };
+        background: {
+            sand: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            pink: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            plum: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            lemon: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            sky: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            orange: {
+                default: string;
+                E01: string;
+                E02: string;
+            };
+            white: {
+                default: string;
+            };
+        };
+        focus: {
+            dark: string;
+            light: string;
+        };
+        transparency: {
+            T0: string;
+            T10: string;
+            T20: string;
+            T30: string;
+            T40: string;
+            T50: string;
+            T60: string;
+            T70: string;
+            T80: string;
+            T90: string;
+            T100: string;
+        };
+    };
+    fontFamily: {
+        default: string;
+        heading: string;
+        numerals: string;
+    };
+    fontSize: {
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    fontWeight: {
+        book: number;
+        medium: number;
+        bold: number;
+        black: number;
+    };
+    form: {
+        smallSelectWidth: string;
+        smallSelectHeight: string;
+    };
+    grid: {
+        gutter: string;
+    };
+    lineHeight: {
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
+    };
+    media: Record<string | number, (l: TemplateStringsArray, ...p: (string | number)[]) => string>;
+    radius: {
+        default: string;
+        s: string;
+        xs: string;
+        circle: string;
+        pill: string;
+    };
+}, {
+    collapseSize: number;
+    isHighlighted?: boolean | undefined;
+}, never>;
+export default TooltipWrapper;
+export { TooltipWrapper };

package/build/es/components/MainNavigation/ChildComponents/MinicartTooltip.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
-interface MinicartTooltipProps {
-    minicartAmount: number;
-    minicartLabel?: string;
-}
-declare const MinicartTooltip: ({ minicartAmount, minicartLabel }: MinicartTooltipProps) => React.JSX.Element;
-export default MinicartTooltip;
+import React from 'react';
+interface MinicartTooltipProps {
+    minicartAmount: number;
+    minicartLabel?: string;
+}
+declare const MinicartTooltip: ({ minicartAmount, minicartLabel }: MinicartTooltipProps) => React.JSX.Element;
+export default MinicartTooltip;

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

@@ -6,13 +6,13 @@ import NotificationBadge from '../../NotificationBadge/NotificationBadge.js';
 import NavContext from '../context/NavContext.js';
 import MainNavTooltipMenu from './MainNavTooltipMenu.js';
 
-const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
-    const globalStateString = 'minicart';
-    const { navZIndex, minicartComponent: MinicartComponent } = useContext(NavContext);
-    return (React__default.createElement(MainNavTooltipMenu, { zIndex: navZIndex + 1, contentWidth: "35rem", tooltipRight: "5rem", contentComponent: MinicartComponent, globalStateString: globalStateString, fullWidthBreakpoint: theme.breakpoints.md, closeWhenTagClicked: ['a', 'button'] },
-        React__default.createElement(Icon, { icon: Cart, size: "2rem" }),
-        React__default.createElement("span", null, minicartLabel),
-        minicartAmount > 0 && (React__default.createElement(NotificationBadge, { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
+const MinicartTooltip = ({ minicartAmount, minicartLabel }) => {
+    const globalStateString = 'minicart';
+    const { navZIndex, minicartComponent: MinicartComponent } = useContext(NavContext);
+    return (React__default.createElement(MainNavTooltipMenu, { zIndex: navZIndex + 1, contentWidth: "35rem", tooltipRight: "5rem", contentComponent: MinicartComponent, globalStateString: globalStateString, fullWidthBreakpoint: theme.breakpoints.md, closeWhenTagClicked: ['a', 'button'] },
+        React__default.createElement(Icon, { icon: Cart, size: "2rem" }),
+        React__default.createElement("span", null, minicartLabel),
+        minicartAmount > 0 && (React__default.createElement(NotificationBadge, { top: "-5px", right: "5px", "data-testid": "header-minicart-amount" }, minicartAmount))));
 };
 
 export { MinicartTooltip as default };

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

@@ -1,3 +1,3 @@
-import React from 'react';
-declare const RenderMobileMenu: () => React.JSX.Element | null;
-export default RenderMobileMenu;
+import React from 'react';
+declare const RenderMobileMenu: () => React.JSX.Element | null;
+export default RenderMobileMenu;