@nulogy/components 14.8.2 → 15.0.1

package/dist/src/BrandedNavBar/MobileMenu.js

@@ -0,0 +1,153 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+import { display } from "styled-system";
+import { Text } from "../Type";
+import { Flex } from "../Flex";
+import { BrandingText } from "../Branding";
+import { DropdownLink, DropdownText } from "../DropdownMenu";
+import { Icon } from "../Icon";
+import { Link } from "../Link";
+import { addStyledProps } from "../StyledProps";
+import NulogyLogo from "./NulogyLogo";
+import { useScrollLock } from "../utils/useScrollLock";
+const borderStyle = "1px solid #e4e7eb";
+const BrandingWrap = styled.div(({ theme }) => ({
+    marginLeft: theme.space.x3,
+    color: theme.colors.white,
+    marginBottom: theme.space.x1,
+}));
+// eslint-disable-next-line no-mixed-operators
+const getPaddingLeft = (layer) => `${24 * layer + 24}px`;
+const getSharedStyles = (theme) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.space.half,
+    textDecoration: "none",
+    border: "none",
+    backgroundColor: "transparent",
+    fontSize: theme.fontSizes.large,
+    fontWeight: theme.fontWeights.medium,
+    lineHeight: theme.lineHeights.heading3,
+    padding: `${theme.space.x1} ${theme.space.x3}`,
+});
+const TopLevelLink = styled(Link)(({ theme }) => (Object.assign(Object.assign({}, getSharedStyles(theme)), { color: theme.colors.darkBlue, "&:visited": {
+        color: theme.colors.darkBlue,
+    }, width: "100%", borderRadius: "0", transition: ".2s", "&:hover, &:focus": {
+        outline: "none",
+        color: theme.colors.blackBlue,
+        backgroundColor: theme.colors.whiteGrey,
+        cursor: "pointer",
+    }, "&:focus": {
+        boxShadow: theme.shadows.focus,
+    }, "&:disabled": {
+        opacity: ".5",
+    } })), addStyledProps);
+const TopLevelText = styled(Text)(({ theme }) => (Object.assign(Object.assign({}, getSharedStyles(theme)), { color: theme.colors.blackBlue })), addStyledProps);
+const SubMenuItemsList = styled.ul({
+    listStyle: "none",
+    paddingLeft: "0",
+    margin: "0",
+});
+const renderMenuLink = (menuItem, linkOnClick, themeColorObject, layer) => {
+    var _a;
+    const sharedLinkProps = {
+        onClick: linkOnClick,
+        href: menuItem.href,
+        as: menuItem.as,
+        to: menuItem.to,
+        // eslint-disable-next-line no-mixed-operators
+        pl: layer === 0 ? getPaddingLeft(layer) : `${24 * layer + 20}px`,
+        mb: "x1",
+        target: menuItem.openInNew ? "_blank" : undefined,
+    };
+    const topLevel = layer === 0;
+    return (React.createElement("li", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name }, topLevel ? (React.createElement(TopLevelLink, Object.assign({}, sharedLinkProps),
+        menuItem.name,
+        menuItem.openInNew && React.createElement(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" }))) : (React.createElement(DropdownLink, Object.assign({}, sharedLinkProps),
+        menuItem.name,
+        menuItem.openInNew && React.createElement(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" })))));
+};
+const renderCustom = (menuItem, linkOnClick, themeColorObject, layer) => {
+    var _a;
+    return (React.createElement("li", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name }, menuItem.render({ size: "small", onItemClick: linkOnClick, layer })));
+};
+const renderSubMenu = (menuItem, linkOnClick, themeColorObject, layer) => {
+    var _a;
+    return (React.createElement("li", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name, style: { display: "block" } },
+        React.createElement(SubMenu, { menuItem: menuItem, layer: layer, themeColorObject: themeColorObject, linkOnClick: linkOnClick })));
+};
+const renderText = (menuItem, linkOnClick, themeColorObject, layer) => {
+    var _a;
+    const MenuText = layer === 0 ? TopLevelText : DropdownText;
+    return (React.createElement("li", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name },
+        React.createElement(MenuText, { pl: getPaddingLeft(layer), mb: "x1" }, menuItem.name)));
+};
+const getRenderFunction = (menuItem) => {
+    if (menuItem.items) {
+        return renderSubMenu;
+    }
+    else if (menuItem.href || menuItem.to) {
+        return renderMenuLink;
+    }
+    else if (menuItem.render) {
+        return renderCustom;
+    }
+    else {
+        return renderText;
+    }
+};
+const renderMenuItems = (menuItems, linkOnClick, themeColorObject, layer) => menuItems.map((menuItem) => {
+    const render = getRenderFunction(menuItem);
+    return render(menuItem, linkOnClick, themeColorObject, layer);
+});
+const renderTopLayerMenuItems = (menuData, linkOnClick, themeColorObject) => renderMenuItems(menuData, linkOnClick, themeColorObject, 0);
+const getSubMenuHeading = (layer, name) => layer === 0 ? (React.createElement(TopLevelText, { as: "h3", mb: "x1" }, name)) : (React.createElement(DropdownText, { mb: "x1", pl: getPaddingLeft(layer) }, name));
+const SubMenu = ({ menuItem, linkOnClick, themeColorObject, layer }) => {
+    const defaultRender = () => getSubMenuHeading(layer, menuItem.name);
+    return (React.createElement(React.Fragment, null,
+        menuItem.trigger ? menuItem.trigger({ size: "small", defaultRender, layer }) : defaultRender(),
+        React.createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1))));
+};
+const Menu = styled.ul(({ theme }) => ({
+    listStyle: "none",
+    margin: "0",
+    padding: `${theme.space.x1} 0`,
+    zIndex: theme.zIndices.content,
+    width: "100%",
+    color: theme.colors.white,
+    [`${TopLevelText}`]: {
+        padding: `${theme.space.x1} 0 ${theme.space.x1} ${theme.space.x3}`,
+    },
+}));
+const Nav = styled.nav(({ backgroundColor }) => ({
+    backgroundColor,
+}), {
+    minHeight: "calc(100vh - 72px)",
+});
+const BaseMobileMenu = (_a) => {
+    var { menuData, closeMenu, subtext, themeColorObject, showNulogyLogo } = _a, props = __rest(_a, ["menuData", "closeMenu", "subtext", "themeColorObject", "showNulogyLogo"]);
+    useScrollLock();
+    return (React.createElement(Nav, Object.assign({ backgroundColor: themeColorObject && themeColorObject.background }, props),
+        React.createElement(BrandingWrap, null,
+            React.createElement(BrandingText, { logoColor: themeColorObject === null || themeColorObject === void 0 ? void 0 : themeColorObject.logoColor })),
+        React.createElement(Menu, null,
+            menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject),
+            menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)),
+        showNulogyLogo && (React.createElement(Flex, { textAlign: "center", borderTop: borderStyle, height: "40px", alignItems: "center", justifyContent: "center" },
+            React.createElement(NulogyLogo, null),
+            subtext && (React.createElement(Text, { fontSize: "8px", lineHeight: "0", color: "darkGrey", fontWeight: "medium", textTransform: "uppercase", letterSpacing: ".5px" }, subtext))))));
+};
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+const MobileMenu = styled(BaseMobileMenu)(display);
+export default MobileMenu;

package/dist/src/BrandedNavBar/NavBar.d.ts

@@ -1,15 +1,15 @@
-import React from "react";
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-export declare const NAVBAR_HEIGHT = "56px";
-type BaseNavBarProps = {
-    menuData?: any;
-    className?: string;
-    breakpointUpper?: number | string;
-    environment?: "training" | "development" | undefined;
-    subtext?: string;
-    brandingLinkHref?: string;
-    logoSrc?: string;
-};
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-declare const NavBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseNavBarProps, never>> & string & Omit<({ environment, breakpointUpper, ...props }: BaseNavBarProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
-export default NavBar;
+import React from "react";
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export declare const NAVBAR_HEIGHT = "56px";
+type BaseNavBarProps = {
+    menuData?: any;
+    className?: string;
+    breakpointUpper?: number | string;
+    environment?: "training" | "development" | undefined;
+    subtext?: string;
+    brandingLinkHref?: string;
+    logoSrc?: string;
+};
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+declare const NavBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseNavBarProps, never>> & string & Omit<({ environment, breakpointUpper, ...props }: BaseNavBarProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+export default NavBar;

package/dist/src/BrandedNavBar/NavBar.js

@@ -0,0 +1,69 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled from "styled-components";
+import ReactResizeDetector from "react-resize-detector";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "styled-components";
+import { Flex } from "../Flex";
+import { Box } from "../Box";
+import numberFromDimension from "../utils/numberFromDimension";
+import DesktopMenu from "./DesktopMenu";
+import { NulogyLogoContainer } from "./NulogyLogoContainer";
+import EnvironmentBanner from "../Navigation/components/EnvironmentBanner/EnvironmentBanner";
+import BrandLogoContainer from "./BrandLogoContainer";
+import SmallNavBar from "./SmallNavBar";
+import NavBarBackground from "./NavBarBackground";
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export const NAVBAR_HEIGHT = "56px";
+const themeColorObject = {
+    color: "darkBlue",
+    hoverColor: "blackBlue",
+    background: "white",
+    hoverBackground: "whiteGrey",
+    textColor: "blackBlue",
+    logoColor: "blue",
+};
+const MediumNavBar = (_a) => {
+    var { menuData, environment, logo, showNulogyLogo, subtext } = _a, props = __rest(_a, ["menuData", "environment", "logo", "showNulogyLogo", "subtext"]);
+    const { t } = useTranslation();
+    return (React.createElement(React.Fragment, null,
+        environment && React.createElement(EnvironmentBanner, null, environment),
+        React.createElement("header", Object.assign({}, props),
+            React.createElement(NavBarBackground, { backgroundColor: "white", height: NAVBAR_HEIGHT },
+                logo,
+                React.createElement(Flex, { justifyContent: "space-between", alignContent: "flex-end", flexGrow: 1, ml: "x3", alignItems: "center" },
+                    menuData.primaryMenu && (React.createElement(DesktopMenu, { themeColorObject: themeColorObject, "aria-label": t("primary navigation"), menuType: "primary", menuData: menuData.primaryMenu })),
+                    React.createElement(Flex, { justifySelf: "flex-end", alignItems: "center" },
+                        menuData.secondaryMenu && (React.createElement(DesktopMenu, { themeColorObject: themeColorObject, "aria-label": t("secondary navigation"), menuType: "secondary", menuData: menuData.secondaryMenu })),
+                        showNulogyLogo && (React.createElement(Box, { pl: "x3" },
+                            React.createElement(NulogyLogoContainer, { height: NAVBAR_HEIGHT, subText: subtext })))))))));
+};
+const SelectNavBarBasedOnWidth = (_a) => {
+    var { width, defaultOpen, breakpointUpper, brandingLinkHref = "/", brandingLinkTo, brandingLinkComponent, logoSrc } = _a, props = __rest(_a, ["width", "defaultOpen", "breakpointUpper", "brandingLinkHref", "brandingLinkTo", "brandingLinkComponent", "logoSrc"]);
+    const currentWidth = width || (typeof window !== "undefined" && window.innerWidth);
+    const logo = (React.createElement(BrandLogoContainer, { logoSrc: logoSrc, brandingLinkHref: brandingLinkHref, brandingLinkTo: brandingLinkTo, brandingLinkComponent: brandingLinkComponent, subtext: props.subtext }));
+    if (currentWidth >= numberFromDimension(breakpointUpper)) {
+        return React.createElement(MediumNavBar, Object.assign({ logo: logo, showNulogyLogo: logoSrc }, props));
+    }
+    else {
+        return (React.createElement(SmallNavBar, Object.assign({ width: currentWidth, defaultOpen: defaultOpen, themeColorObject: themeColorObject, navBarHeight: NAVBAR_HEIGHT, logo: logo, showNulogyLogo: logoSrc }, props)));
+    }
+};
+const BaseNavBar = (_a) => {
+    var { environment, breakpointUpper = "medium" } = _a, props = __rest(_a, ["environment", "breakpointUpper"]);
+    const { breakpoints } = useTheme();
+    return (React.createElement(ReactResizeDetector, { handleWidth: true }, ({ width }) => (React.createElement(SelectNavBarBasedOnWidth, Object.assign({ breakpointUpper: breakpoints[breakpointUpper] || breakpointUpper, width: width, environment: environment }, props)))));
+};
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+const NavBar = styled(BaseNavBar)({});
+export default NavBar;

package/dist/src/BrandedNavBar/NavBar.story.d.ts

@@ -1,84 +1,84 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _BrandedNavBar: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithACompanyLogo: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithAppName: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithACompanyLogoAndAppName: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithEnvironmentBanner: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithIcon: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithPrimaryAndSecondarySubMenus: () => React.JSX.Element;
-export declare const WithExternalLinks: () => React.JSX.Element;
-export declare const WithReactRouter: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithHamburgerMenu: {
-    (): React.JSX.Element;
-    parameters: {
-        viewport: {
-            defaultViewport: string;
-        };
-        chromatic: {
-            viewports: number[];
-        };
-    };
-};
-export declare const CustomRendering: () => React.JSX.Element;
-export declare const CustomRenderingInHamburger: {
-    (): React.JSX.Element;
-    parameters: {
-        viewport: {
-            defaultViewport: string;
-        };
-        chromatic: {
-            viewports: number[];
-        };
-    };
-};
-export declare const CustomMenuTriggers: () => React.JSX.Element;
-export declare const CustomMenuTriggersInHamburger: {
-    (): React.JSX.Element;
-    parameters: {
-        viewport: {
-            defaultViewport: string;
-        };
-        chromatic: {
-            viewports: number[];
-        };
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _BrandedNavBar: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithACompanyLogo: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithAppName: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithACompanyLogoAndAppName: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithEnvironmentBanner: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithIcon: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithPrimaryAndSecondarySubMenus: () => React.JSX.Element;
+export declare const WithExternalLinks: () => React.JSX.Element;
+export declare const WithReactRouter: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithHamburgerMenu: {
+    (): React.JSX.Element;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
+        };
+        chromatic: {
+            viewports: number[];
+        };
+    };
+};
+export declare const CustomRendering: () => React.JSX.Element;
+export declare const CustomRenderingInHamburger: {
+    (): React.JSX.Element;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
+        };
+        chromatic: {
+            viewports: number[];
+        };
+    };
+};
+export declare const CustomMenuTriggers: () => React.JSX.Element;
+export declare const CustomMenuTriggersInHamburger: {
+    (): React.JSX.Element;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
+        };
+        chromatic: {
+            viewports: number[];
+        };
+    };
+};