@nulogy/components 15.2.1 → 15.2.3

package/dist/src/BrandedNavBar/DesktopMenu.js

@@ -1,14 +1,3 @@
-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 { Icon } from "../Icon";
@@ -29,47 +18,47 @@ const getSharedStyles = (color, theme) => {
         borderRadius: theme.radii.medium,
     };
 };
-const MenuLink = styled.a(({ color, hoverColor, hoverBackground, theme }) => (Object.assign(Object.assign({}, getSharedStyles(color, theme)), { fontWeight: theme.fontWeights.medium, transition: ".2s", "&:hover, &:focus": {
+const MenuLink = styled.a(({ color, hoverColor, hoverBackground, theme }) => ({
+    ...getSharedStyles(color, theme),
+    fontWeight: theme.fontWeights.medium,
+    transition: ".2s",
+    "&:hover, &:focus": {
         outline: "none",
         color: theme.colors[hoverColor] || hoverColor,
         backgroundColor: theme.colors[hoverBackground] || hoverBackground,
         cursor: "pointer",
-    }, "&:disabled": {
+    },
+    "&:disabled": {
         opacity: ".5",
-    }, "&:focus": {
+    },
+    "&:focus": {
         boxShadow: theme.shadows.focus,
-    } })));
-const MenuText = styled.div(({ textColor, theme }) => (Object.assign(Object.assign({}, getSharedStyles(textColor, theme)), { fontWeight: theme.fontWeights.medium })));
+    },
+}));
+const MenuText = styled.div(({ textColor, theme }) => ({
+    ...getSharedStyles(textColor, theme),
+    fontWeight: theme.fontWeights.medium,
+}));
 const Nav = styled.nav({
     display: "flex",
     alignItems: "center",
 });
-const renderMenuTrigger = (menuItem, themeColorObject, layer, menuType) => {
-    var _a;
-    return (React.createElement("div", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name },
-        React.createElement(MenuTrigger, Object.assign({ menuType: menuType, name: menuItem.name, "aria-label": menuItem.ariaLabel, menuData: menuItem.items, trigger: menuItem.trigger, layer: layer }, themeColorObject))));
-};
+const renderMenuTrigger = (menuItem, themeColorObject, layer, menuType) => (React.createElement("div", { key: menuItem.key ?? menuItem.name },
+    React.createElement(MenuTrigger, { menuType: menuType, name: menuItem.name, "aria-label": menuItem.ariaLabel, menuData: menuItem.items, trigger: menuItem.trigger, layer: layer, ...themeColorObject })));
 const renderMenuLink = (menuItem, themeColorObject) => {
-    var _a;
     const linkProps = {
         href: menuItem.href,
         to: menuItem.to,
         as: menuItem.as,
         target: menuItem.openInNew ? "_blank" : undefined,
     };
-    return (React.createElement("div", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name },
-        React.createElement(MenuLink, Object.assign({}, linkProps, themeColorObject),
+    return (React.createElement("div", { key: menuItem.key ?? menuItem.name },
+        React.createElement(MenuLink, { ...linkProps, ...themeColorObject },
             menuItem.name,
             menuItem.openInNew && React.createElement(Icon, { size: "x2", icon: "openInNew" }))));
 };
-const renderCustom = (menuItem, _themeColorObject, layer) => {
-    var _a;
-    return (React.createElement("div", { key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name }, menuItem.render({ size: "medium", layer })));
-};
-const renderText = (menuItem, themeColorObject) => {
-    var _a;
-    return (React.createElement(MenuText, Object.assign({ key: (_a = menuItem.key) !== null && _a !== void 0 ? _a : menuItem.name }, themeColorObject), menuItem.name));
-};
+const renderCustom = (menuItem, _themeColorObject, layer) => (React.createElement("div", { key: menuItem.key ?? menuItem.name }, menuItem.render({ size: "medium", layer })));
+const renderText = (menuItem, themeColorObject) => (React.createElement(MenuText, { key: menuItem.key ?? menuItem.name, ...themeColorObject }, menuItem.name));
 const getRenderFunction = (menuItem) => {
     if (menuItem.items) {
         return renderMenuTrigger;
@@ -83,10 +72,7 @@ const getRenderFunction = (menuItem) => {
     return renderText;
 };
 const renderMenuItem = (menuItem, themeColorObject, layer, menuType) => getRenderFunction(menuItem)(menuItem, themeColorObject, layer, menuType);
-const BaseDesktopMenu = React.forwardRef((_a, ref) => {
-    var { menuData, menuType, themeColorObject } = _a, props = __rest(_a, ["menuData", "menuType", "themeColorObject"]);
-    return (React.createElement(Nav, Object.assign({}, props, { ref: ref }), menuData.map((menuItem) => renderMenuItem(menuItem, themeColorObject, 0, menuType))));
-});
+const BaseDesktopMenu = React.forwardRef(({ menuData, menuType, themeColorObject, ...props }, ref) => (React.createElement(Nav, { ...props, ref: ref }, menuData.map((menuItem) => renderMenuItem(menuItem, themeColorObject, 0, menuType)))));
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 const DesktopMenu = styled(BaseDesktopMenu)({
     "& > div": {

package/dist/src/BrandedNavBar/MenuTrigger.js

@@ -1,21 +1,9 @@
-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 NavBarDropdownMenu from "./NavBarDropdownMenu";
 import SubMenuTrigger from "./SubMenuTrigger";
 import renderSubMenuItems from "./renderSubMenuItems";
 import MenuTriggerButton from "./MenuTriggerButton";
-const MenuTrigger = (_a) => {
-    var { menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, menuType } = _a, props = __rest(_a, ["menuData", "name", "color", "hoverColor", "hoverBackground", "aria-label", "trigger", "layer", "menuType"]);
+const MenuTrigger = ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, menuType, ...props }) => {
     let dropdownMinWidth = "auto";
     const setDropdownMinWidth = (popperData) => {
         // Popper.js throws an error if popperData is not returned from this fn
@@ -31,7 +19,7 @@ const MenuTrigger = (_a) => {
     };
     return (
     // @ts-ignore
-    React.createElement(NavBarDropdownMenu, Object.assign({}, props, { placement: "bottom-start", modifiers: {
+    React.createElement(NavBarDropdownMenu, { ...props, placement: "bottom-start", modifiers: {
             flip: { behavior: ["bottom"] },
             setPopperWidth: {
                 enabled: true,
@@ -43,9 +31,9 @@ const MenuTrigger = (_a) => {
                 boundariesElement: "viewport",
             },
         }, trigger: () => {
-            const defaultRender = () => React.createElement(MenuTriggerButton, Object.assign({}, triggerProps));
+            const defaultRender = () => React.createElement(MenuTriggerButton, { ...triggerProps });
             return trigger ? trigger({ size: "medium", defaultRender, layer }) : defaultRender();
-        } }), ({ closeMenu }) => (React.createElement("ul", { style: {
+        } }, ({ closeMenu }) => (React.createElement("ul", { style: {
             listStyle: "none",
             margin: "0",
             padding: "0",

package/dist/src/BrandedNavBar/MenuTriggerButton.js

@@ -1,14 +1,3 @@
-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 { themeGet } from "@styled-system/theme-get";
@@ -40,17 +29,14 @@ const StyledButton = styled.button(({ color = "white", hoverColor = "lightBlue",
         opacity: ".5",
     },
 }));
-const MenuTriggerButton = React.forwardRef((_a, ref) => {
-    var { name, color, hoverColor, hoverBackground } = _a, props = __rest(_a, ["name", "color", "hoverColor", "hoverBackground"]);
-    return (React.createElement(StyledButton, Object.assign({ color: color, hoverColor: hoverColor, hoverBackground: hoverBackground, ref: ref }, props),
-        name,
-        React.createElement(Icon, { style: {
-                position: "absolute",
-                top: "52%",
-                transform: "translateY(-50%)",
-                right: "8px",
-            }, icon: "downArrow", color: themeGet(`colors.${color}`, color)(color), size: "20px", p: "2px" })));
-});
+const MenuTriggerButton = React.forwardRef(({ name, color, hoverColor, hoverBackground, ...props }, ref) => (React.createElement(StyledButton, { color: color, hoverColor: hoverColor, hoverBackground: hoverBackground, ref: ref, ...props },
+    name,
+    React.createElement(Icon, { style: {
+            position: "absolute",
+            top: "52%",
+            transform: "translateY(-50%)",
+            right: "8px",
+        }, icon: "downArrow", color: themeGet(`colors.${color}`, color)(color), size: "20px", p: "2px" }))));
 MenuTriggerButton.displayName = "MenuTriggerButton";
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default MenuTriggerButton;

package/dist/src/BrandedNavBar/MobileMenu.js

@@ -1,14 +1,3 @@
-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";
@@ -41,26 +30,38 @@ const getSharedStyles = (theme) => ({
     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": {
+const TopLevelLink = styled(Link)(({ theme }) => ({
+    ...getSharedStyles(theme),
+    color: theme.colors.darkBlue,
+    "&:visited": {
         color: theme.colors.darkBlue,
-    }, width: "100%", borderRadius: "0", transition: ".2s", "&:hover, &:focus": {
+    },
+    width: "100%",
+    borderRadius: "0",
+    transition: ".2s",
+    "&:hover, &:focus": {
         outline: "none",
         color: theme.colors.blackBlue,
         backgroundColor: theme.colors.whiteGrey,
         cursor: "pointer",
-    }, "&:focus": {
+    },
+    "&:focus": {
         boxShadow: theme.shadows.focus,
-    }, "&:disabled": {
+    },
+    "&:disabled": {
         opacity: ".5",
-    } })), addStyledProps);
-const TopLevelText = styled(Text)(({ theme }) => (Object.assign(Object.assign({}, getSharedStyles(theme)), { color: theme.colors.blackBlue })), addStyledProps);
+    },
+}), addStyledProps);
+const TopLevelText = styled(Text)(({ theme }) => ({
+    ...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,
@@ -72,25 +73,18 @@ const renderMenuLink = (menuItem, linkOnClick, themeColorObject, layer) => {
         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),
+    return (React.createElement("li", { key: menuItem.key ?? menuItem.name }, topLevel ? (React.createElement(TopLevelLink, { ...sharedLinkProps },
         menuItem.name,
-        menuItem.openInNew && React.createElement(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" }))) : (React.createElement(DropdownLink, Object.assign({}, sharedLinkProps),
+        menuItem.openInNew && React.createElement(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" }))) : (React.createElement(DropdownLink, { ...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 renderCustom = (menuItem, linkOnClick, themeColorObject, layer) => (React.createElement("li", { key: menuItem.key ?? menuItem.name }, menuItem.render({ size: "small", onItemClick: linkOnClick, layer })));
+const renderSubMenu = (menuItem, linkOnClick, themeColorObject, layer) => (React.createElement("li", { key: menuItem.key ?? 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 },
+    return (React.createElement("li", { key: menuItem.key ?? menuItem.name },
         React.createElement(MenuText, { pl: getPaddingLeft(layer), mb: "x1" }, menuItem.name)));
 };
 const getRenderFunction = (menuItem) => {
@@ -135,12 +129,11 @@ const Nav = styled.nav(({ backgroundColor }) => ({
 }), {
     minHeight: "calc(100vh - 72px)",
 });
-const BaseMobileMenu = (_a) => {
-    var { menuData, closeMenu, subtext, themeColorObject, showNulogyLogo } = _a, props = __rest(_a, ["menuData", "closeMenu", "subtext", "themeColorObject", "showNulogyLogo"]);
+const BaseMobileMenu = ({ menuData, closeMenu, subtext, themeColorObject, showNulogyLogo, ...props }) => {
     useScrollLock();
-    return (React.createElement(Nav, Object.assign({ backgroundColor: themeColorObject && themeColorObject.background }, props),
+    return (React.createElement(Nav, { backgroundColor: themeColorObject && themeColorObject.background, ...props },
         React.createElement(BrandingWrap, null,
-            React.createElement(BrandingText, { logoColor: themeColorObject === null || themeColorObject === void 0 ? void 0 : themeColorObject.logoColor })),
+            React.createElement(BrandingText, { logoColor: themeColorObject?.logoColor })),
         React.createElement(Menu, null,
             menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject),
             menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)),

package/dist/src/BrandedNavBar/NavBar.js

@@ -1,14 +1,3 @@
-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";
@@ -33,12 +22,11 @@ const themeColorObject = {
     textColor: "blackBlue",
     logoColor: "blue",
 };
-const MediumNavBar = (_a) => {
-    var { menuData, environment, logo, showNulogyLogo, subtext } = _a, props = __rest(_a, ["menuData", "environment", "logo", "showNulogyLogo", "subtext"]);
+const MediumNavBar = ({ menuData, environment, logo, showNulogyLogo, subtext, ...props }) => {
     const { t } = useTranslation();
     return (React.createElement(React.Fragment, null,
         environment && React.createElement(EnvironmentBanner, null, environment),
-        React.createElement("header", Object.assign({}, props),
+        React.createElement("header", { ...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" },
@@ -48,21 +36,19 @@ const MediumNavBar = (_a) => {
                         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 SelectNavBarBasedOnWidth = ({ width, defaultOpen, breakpointUpper, brandingLinkHref = "/", brandingLinkTo, brandingLinkComponent, logoSrc, ...props }) => {
     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));
+        return React.createElement(MediumNavBar, { 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)));
+        return (React.createElement(SmallNavBar, { 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 BaseNavBar = ({ environment, breakpointUpper = "medium", ...props }) => {
     const { breakpoints } = useTheme();
-    return (React.createElement(ReactResizeDetector, { handleWidth: true }, ({ width }) => (React.createElement(SelectNavBarBasedOnWidth, Object.assign({ breakpointUpper: breakpoints[breakpointUpper] || breakpointUpper, width: width, environment: environment }, props)))));
+    return (React.createElement(ReactResizeDetector, { handleWidth: true }, ({ width }) => (React.createElement(SelectNavBarBasedOnWidth, { breakpointUpper: breakpoints[breakpointUpper] || breakpointUpper, width: width, environment: environment, ...props }))));
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 const NavBar = styled(BaseNavBar)({});

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

@@ -1,8 +1,11 @@
 import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { BrandedNavBar as NDSBrandedNavBar } from "./index";
 declare const _default: {
     title: string;
 };
 export default _default;
+type Story = StoryObj<typeof NDSBrandedNavBar>;
 export declare const _BrandedNavBar: {
     (): React.JSX.Element;
     story: {
@@ -27,12 +30,7 @@ export declare const WithACompanyLogoAndAppName: {
         name: string;
     };
 };
-export declare const WithEnvironmentBanner: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+export declare const WithEnvironmentBanner: Story;
 export declare const WithIcon: {
     (): React.JSX.Element;
     story: {

package/dist/src/BrandedNavBar/NavBar.story.js

@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import { select } from "@storybook/addon-knobs";
 import { BrowserRouter, Link as ReactRouterLink } from "react-router-dom";
 import { Heading1 } from "../Type";
 import { Icon } from "../Icon";
@@ -18,7 +17,7 @@ const ResetStorybookView = styled.div({
     height: "100vh",
 });
 const BrandedNavBar = (props) => (React.createElement(ResetStorybookView, null,
-    React.createElement(NDSBrandedNavBar, Object.assign({}, props)),
+    React.createElement(NDSBrandedNavBar, { ...props }),
     React.createElement(Heading1, { mt: "x3", ml: "x1" }, "Some content")));
 const primaryMenu = [
     {
@@ -139,8 +138,17 @@ export const WithACompanyLogoAndAppName = () => (React.createElement(BrandedNavB
 WithACompanyLogoAndAppName.story = {
     name: "With a company logo and app name",
 };
-export const WithEnvironmentBanner = () => (React.createElement(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, subtext: "Quality control", logoSrc: sampleLogo, environment: select("environment", ["training", "development"], "training") }));
-WithEnvironmentBanner.story = {
+export const WithEnvironmentBanner = {
+    render: (args) => (React.createElement(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, subtext: "Quality control", logoSrc: sampleLogo, environment: args.environment })),
+    args: {
+        environment: "training",
+    },
+    argTypes: {
+        environment: {
+            control: { type: "select" },
+            options: ["training", "development"],
+        },
+    },
     name: "with environment banner",
 };
 export const WithIcon = () => (React.createElement(BrandedNavBar, { menuData: {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DefaultNDSThemeType } from "../theme";
 import { StyledProps } from "../StyledProps";
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */

package/dist/src/BrandedNavBar/NavBarDropdownMenu.js

@@ -50,12 +50,18 @@ class StatelessNavBarDropdownMenu extends StatelessNavBarDropdownMenuClass {
                 closeMenu,
                 openMenu,
                 isOpen,
-            }), Object.assign(Object.assign({ "aria-haspopup": true, "aria-expanded": isOpen, type: "button" }, this.menuTriggerEventHandlers()), { ref: (node) => {
+            }), {
+                "aria-haspopup": true,
+                "aria-expanded": isOpen,
+                type: "button",
+                ...this.menuTriggerEventHandlers(),
+                ref: (node) => {
                     ref(node);
                     this.setTriggerRef(node);
-                } }))),
+                },
+            })),
             isOpen && (React.createElement(Popper, { placement: placement, modifiers: modifiers }, (popperProps) => (React.createElement(React.Fragment, null,
-                React.createElement(DropdownMenuContainer, Object.assign({}, popperProps, { placement: placement, showArrow: showArrow }, this.menuEventHandlers(), { ref: (node) => {
+                React.createElement(DropdownMenuContainer, { ...popperProps, placement: placement, showArrow: showArrow, ...this.menuEventHandlers(), ref: (node) => {
                         if (typeof popperProps.ref === "function") {
                             popperProps.ref(node);
                         }
@@ -63,11 +69,11 @@ class StatelessNavBarDropdownMenu extends StatelessNavBarDropdownMenuClass {
                     }, onMouseDown: (e) => {
                         e.preventDefault();
                         e.target.focus();
-                    } }, dropdownMenuContainerEventHandlers({
-                    openMenu,
-                    closeMenu,
-                })),
-                    React.createElement(PopperArrow, Object.assign({}, popperProps.arrowProps, { placement: placement, ref: popperProps.arrowProps.ref, backgroundColor: "white", borderColor: "white" })),
+                    }, ...dropdownMenuContainerEventHandlers({
+                        openMenu,
+                        closeMenu,
+                    }) },
+                    React.createElement(PopperArrow, { ...popperProps.arrowProps, placement: placement, ref: popperProps.arrowProps.ref, backgroundColor: "white", borderColor: "white" }),
                     React.createElement(DetectOutsideClick, { onClick: this.handleOutsideClick, clickRef: [this.menuRef, this.triggerRef] }),
                     childrenFnc({
                         closeMenu,

package/dist/src/BrandedNavBar/SmallNavBar.js

@@ -1,14 +1,3 @@
-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 styled, { useTheme } from "styled-components";
 import { useTranslation } from "react-i18next";
 import React, { useEffect } from "react";
@@ -59,8 +48,7 @@ const MenuIcon = ({ isOpen }) => {
     return React.createElement(Icon, { icon: icon, title: title });
 };
 /* eslint-disable react/destructuring-assignment */
-const SmallNavBarNoState = (_a) => {
-    var { menuData, menuState: { isOpen, toggleMenu, closeMenu }, subtext, environment, showNulogyLogo, breakpointLower = "small", themeColorObject, navBarHeight, logo, renderMenuButton } = _a, props = __rest(_a, ["menuData", "menuState", "subtext", "environment", "showNulogyLogo", "breakpointLower", "themeColorObject", "navBarHeight", "logo", "renderMenuButton"]);
+const SmallNavBarNoState = ({ menuData, menuState: { isOpen, toggleMenu, closeMenu }, subtext, environment, showNulogyLogo, breakpointLower = "small", themeColorObject, navBarHeight, logo, renderMenuButton, ...props }) => {
     const navRef = React.useRef(null);
     useEffect(() => {
         if (navRef && navRef.current) {
@@ -69,20 +57,20 @@ const SmallNavBarNoState = (_a) => {
     }, [isOpen]);
     const { breakpoints } = useTheme();
     const ariaExpanded = isOpen ? true : null;
-    return (React.createElement(SmallHeader, Object.assign({ ref: navRef, isOpen: isOpen, breakpointLower: breakpoints ? breakpoints[breakpointLower] : breakpointLower }, props),
+    return (React.createElement(SmallHeader, { ref: navRef, isOpen: isOpen, breakpointLower: breakpoints ? breakpoints[breakpointLower] : breakpointLower, ...props },
         environment && React.createElement(EnvironmentBanner, null, environment),
         React.createElement(NavBarBackground, { backgroundColor: "white", height: navBarHeight },
             logo,
             React.createElement(Flex, { justifyContent: "flex-end", ml: "x3", flexGrow: 1 },
                 menuData.search && (React.createElement(Flex, { maxWidth: "18em", alignItems: "center", px: "0" },
-                    React.createElement(NavBarSearch, Object.assign({}, menuData.search)))),
+                    React.createElement(NavBarSearch, { ...menuData.search }))),
                 (menuData.primaryMenu || menuData.secondaryMenu) &&
                     (renderMenuButton ? (renderMenuButton({
                         themeColorObject: themeColorObject,
                         onClick: toggleMenu,
                         ariaExpanded,
                         isOpen,
-                    })) : (React.createElement(MobileMenuTrigger, Object.assign({}, themeColorObject, { onClick: toggleMenu, "aria-expanded": ariaExpanded }),
+                    })) : (React.createElement(MobileMenuTrigger, { ...themeColorObject, onClick: toggleMenu, "aria-expanded": ariaExpanded },
                         React.createElement(MenuIcon, { isOpen: isOpen })))))),
         isOpen && (React.createElement(MobileMenu, { themeColorObject: themeColorObject, subtext: subtext, menuData: menuData, closeMenu: closeMenu, showNulogyLogo: showNulogyLogo }))));
 };

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

@@ -1,4 +1,6 @@
+import type { StoryObj } from "@storybook/react";
 import React from "react";
+import { SmallNavBar } from "./index";
 declare const _default: {
     title: string;
     parameters: {
@@ -11,11 +13,12 @@ declare const _default: {
     };
 };
 export default _default;
+type Story = StoryObj<typeof SmallNavBar>;
 export declare const _SmallNavBar: () => React.JSX.Element;
 export declare const SmallNavBarOpen: () => React.JSX.Element;
 export declare const WithALogo: () => React.JSX.Element;
 export declare const WithALogoOpen: () => React.JSX.Element;
 export declare const WithABrandLogoContainerLogo: () => React.JSX.Element;
 export declare const WithANulogyLogoAndAppName: () => React.JSX.Element;
-export declare const WithEnvironmentBanner: () => React.JSX.Element;
-export declare const WithCustomMenuButton: () => React.JSX.Element;
+export declare const WithEnvironmentBanner: Story;
+export declare const WithCustomMenuButton: Story;

package/dist/src/BrandedNavBar/SmallNavBar.story.js

@@ -1,4 +1,3 @@
-import { select } from "@storybook/addon-knobs";
 import React from "react";
 import styled from "styled-components";
 import { Branding } from "../Branding";
@@ -16,7 +15,7 @@ const ResetStorybookView = styled.div({
     height: "100vh",
 });
 const WrappedSmallNavBar = (props) => (React.createElement(ResetStorybookView, null,
-    React.createElement(SmallNavBar, Object.assign({ navBarHeight: "56px" }, props)),
+    React.createElement(SmallNavBar, { navBarHeight: "56px", ...props }),
     React.createElement(Heading1, { mt: "x3", ml: "x1" }, "Some content")));
 const primaryMenu = [
     {
@@ -83,7 +82,29 @@ export const WithALogoOpen = () => (React.createElement(WrappedSmallNavBar, { me
         React.createElement(Branding, { size: "medium", logoType: "wordmark", logoColor: "blue" })) }));
 export const WithABrandLogoContainerLogo = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, logo: React.createElement(BrandLogoContainer, { brandingLinkHref: "/" }) }));
 export const WithANulogyLogoAndAppName = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, subtext: "Quality control", showNulogyLogo: true, defaultOpen: true }));
-export const WithEnvironmentBanner = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, environment: select("environment", ["training", "development"], "training") }));
-export const WithCustomMenuButton = () => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, environment: select("environment", ["training", "development"], "training"), renderMenuButton: ({ onClick, ariaExpanded, isOpen }) => (React.createElement(Button, { onClick: onClick, "aria-expanded": ariaExpanded },
-        "Click to ",
-        isOpen ? "close" : "open")) }));
+export const WithEnvironmentBanner = {
+    render: (args) => React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, environment: args.environment }),
+    args: {
+        environment: "training",
+    },
+    argTypes: {
+        environment: {
+            control: { type: "select" },
+            options: ["training", "development"],
+        },
+    },
+};
+export const WithCustomMenuButton = {
+    render: (args) => (React.createElement(WrappedSmallNavBar, { menuData: { primaryMenu, secondaryMenu }, environment: args.environment, renderMenuButton: ({ onClick, ariaExpanded, isOpen }) => (React.createElement(Button, { onClick: onClick, "aria-expanded": ariaExpanded },
+            "Click to ",
+            isOpen ? "close" : "open")) })),
+    args: {
+        environment: "training",
+    },
+    argTypes: {
+        environment: {
+            control: { type: "select" },
+            options: ["training", "development"],
+        },
+    },
+};

package/dist/src/BrandedNavBar/SubMenuTrigger.js

@@ -1,14 +1,3 @@
-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, { useTheme } from "styled-components";
 import { addStyledProps } from "../StyledProps";
@@ -16,16 +5,15 @@ import NavBarDropdownMenu from "./NavBarDropdownMenu";
 import renderSubMenuItems from "./renderSubMenuItems";
 import SubMenuTriggerButton from "./SubMenuTriggerButton";
 import { NAVBAR_HEIGHT } from "./NavBar";
-const SubMenuTrigger = (_a) => {
-    var { menuData, name, onItemClick, trigger, layer, menuType } = _a, props = __rest(_a, ["menuData", "name", "onItemClick", "trigger", "layer", "menuType"]);
+const SubMenuTrigger = ({ menuData, name, onItemClick, trigger, layer, menuType, ...props }) => {
     const theme = useTheme();
-    return (React.createElement(NavBarDropdownMenu, Object.assign({ placement: getPlacement(menuType), modifiers: {
+    return (React.createElement(NavBarDropdownMenu, { placement: getPlacement(menuType), modifiers: {
             preventOverflow: {
                 enabled: true,
                 padding: theme.space.x1,
                 boundariesElement: "viewport",
             },
-        }, showArrow: true, triggerTogglesMenuState: false }, props, { dropdownMenuContainerEventHandlers: ({ openMenu, closeMenu }) => ({
+        }, showArrow: true, triggerTogglesMenuState: false, ...props, dropdownMenuContainerEventHandlers: ({ openMenu, closeMenu }) => ({
             onMouseEnter: openMenu,
             onMouseLeave: closeMenu,
         }), trigger: ({ closeMenu, openMenu, isOpen }) => {
@@ -39,7 +27,7 @@ const SubMenuTrigger = (_a) => {
                 layer,
             };
             return trigger ? trigger(triggerProps) : defaultRender();
-        } }),
+        } },
         React.createElement(SubMenuItemsList, null, renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1, menuType))));
 };
 const SubMenuItemsList = styled("ul")(({ theme }) => ({