@norges-domstoler/dds-components 13.7.0 → 13.8.1

package/dist/components/AppShell/AppShell.d.ts

@@ -1,13 +1,38 @@
 import { PropsWithChildren, ReactElement } from 'react';
+import { User } from './Navigation/TopBar';
+import { OverflowMenuProps } from '../OverflowMenu';
+import { Environment } from '@norges-domstoler/development-utils';
 export type AppShellProps = PropsWithChildren<{
-    /**Versjon på appen på formatet 0.0.0 */
+    /**
+     * Versjon på appen på formatet 0.0.0
+     */
     version?: string;
     navigation: AppShellNavigationProps;
+    /**
+     * Den innloggede brukeren.
+     */
+    user: User;
+    /**
+     * Menyvalg som skal vises i OverflowMenu knyttet til "bruker"-knappen.
+     */
+    userMenuItems?: OverflowMenuProps['items'];
+    /**
+     * `environment` brukes for å  vise en banner øverst i appen som viser hvilket miljø du er i.
+     * Når environment er undefined eller `"PROD"` så vises ikke banneret.
+     */
+    environment?: Environment;
 }>;
 export type AppShellNavigationProps = {
-    /**Interne lenker i navigasjonen. */
+    /**
+     * Interne lenker i navigasjonen.
+     */
     internal?: ReactElement[];
-    /**Eksterne lenker i navigasjonen. */
+    /**
+     * Eksterne lenker i navigasjonen.
+     */
     external?: ReactElement[];
 };
-export declare const AppShell: ({ children, version, navigation: { internal, external }, }: AppShellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AppShell: {
+    ({ children, version, navigation: { internal, external }, user, userMenuItems, environment, }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/AppShell/AppShell.js

@@ -1,34 +1,56 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import styled from 'styled-components';
 import { appShellTokens } from './AppShell.tokens.js';
 import { Navigation } from './Navigation/Navigation.js';
+import { ENVIRONMENT_BANNER_HEIGHT, EnvironmentBanner } from '@norges-domstoler/development-utils';
+import { AppShellContextProvider } from './AppShellContext.js';
 
 var AppShellContainer = styled.div.withConfig({
   displayName: "AppShell__AppShellContainer",
   componentId: "sc-1c8yu5p-0"
-})(["display:flex;flex-direction:row;"]);
+})(["display:flex;flex-direction:column;@media (min-width:", "){flex-direction:row;}"], appShellTokens.navigation.mobile.breakpoint);
 var MainContent = styled.main.withConfig({
   displayName: "AppShell__MainContent",
   componentId: "sc-1c8yu5p-1"
-})(["min-width:calc(100vw - ", ");max-width:calc(100vw - ", ");"], appShellTokens.navigation.width, appShellTokens.navigation.width);
-var AppShell = function AppShell(_ref) {
-  var children = _ref.children,
-    _ref$version = _ref.version,
-    version = _ref$version === void 0 ? '' : _ref$version,
-    _ref$navigation = _ref.navigation,
-    _ref$navigation$inter = _ref$navigation.internal,
-    internal = _ref$navigation$inter === void 0 ? [] : _ref$navigation$inter,
-    _ref$navigation$exter = _ref$navigation.external,
-    external = _ref$navigation$exter === void 0 ? [] : _ref$navigation$exter;
-  return jsxs(AppShellContainer, {
-    children: [jsx(Navigation, {
-      version: version,
-      internal: internal,
-      external: external
-    }), jsx(MainContent, {
-      children: children
-    })]
+})(["min-height:calc(100vh - ", ");margin-top:", ";@media (min-width:", "){min-height:unset;margin-top:", ";margin-left:", ";min-width:calc(100vw - ", ");max-width:calc(100vw - ", ");}"], appShellTokens.navigation.topBar.height, function (_ref) {
+  var environmentBannerActive = _ref.environmentBannerActive;
+  return environmentBannerActive ? "calc(".concat(ENVIRONMENT_BANNER_HEIGHT, " + ").concat(appShellTokens.navigation.topBar.height, ")") : appShellTokens.navigation.topBar.height;
+}, appShellTokens.navigation.mobile.breakpoint, function (_ref2) {
+  var environmentBannerActive = _ref2.environmentBannerActive;
+  return environmentBannerActive ? ENVIRONMENT_BANNER_HEIGHT : 0;
+}, appShellTokens.navigation.width, appShellTokens.navigation.width, appShellTokens.navigation.width);
+var AppShell = function AppShell(_ref3) {
+  var children = _ref3.children,
+    _ref3$version = _ref3.version,
+    version = _ref3$version === void 0 ? '' : _ref3$version,
+    _ref3$navigation = _ref3.navigation,
+    _ref3$navigation$inte = _ref3$navigation.internal,
+    internal = _ref3$navigation$inte === void 0 ? [] : _ref3$navigation$inte,
+    _ref3$navigation$exte = _ref3$navigation.external,
+    external = _ref3$navigation$exte === void 0 ? [] : _ref3$navigation$exte,
+    user = _ref3.user,
+    userMenuItems = _ref3.userMenuItems,
+    _ref3$environment = _ref3.environment,
+    environment = _ref3$environment === void 0 ? 'PROD' : _ref3$environment;
+  var environmentBannerActive = environment !== 'PROD';
+  return jsx(AppShellContextProvider, {
+    children: jsxs(AppShellContainer, {
+      children: [jsx(EnvironmentBanner, {
+        environment: environment
+      }), jsx(Navigation, {
+        user: user,
+        userMenuItems: userMenuItems,
+        version: version,
+        internal: internal,
+        external: external,
+        environmentBannerActive: environmentBannerActive
+      }), jsx(MainContent, {
+        environmentBannerActive: environmentBannerActive,
+        children: children
+      })]
+    })
   });
 };
+AppShell.displayName = 'AppShell';
 
 export { AppShell };

package/dist/components/AppShell/AppShell.stories.d.ts

@@ -2,11 +2,14 @@ import { ComponentProps } from 'react';
 import { AppShell } from '.';
 declare const _default: {
     title: string;
-    component: (({ children, version, navigation: { internal, external }, }: import("./AppShell").AppShellProps) => import("react/jsx-runtime").JSX.Element) & {
+    component: {
+        ({ children, version, navigation: { internal, external }, user, userMenuItems, environment, }: import("./AppShell").AppShellProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    } & {
         NavItem: {
-            <T extends import("@norges-domstoler/dds-core").As = "a">({ as: _as, active, icon, external, children, ...rest }: import("react").PropsWithoutRef<ComponentProps<T>> & {
+            <T extends import("@norges-domstoler/dds-core").As = "a">({ as: _as, active, icon, external, children, onClick: propOnClick, ...rest }: import("react").PropsWithoutRef<ComponentProps<T>> & {
                 as?: T | undefined;
-            } & ({
+            } & (({
                 icon: import("@norges-domstoler/dds-icons").SvgIcon;
                 active?: boolean | undefined;
                 external?: false | undefined;
@@ -14,10 +17,12 @@ declare const _default: {
                 external: true;
                 active?: false | undefined;
                 icon?: undefined;
+            }) & {
+                onClick?: import("react").MouseEventHandler | undefined;
             })): import("react/jsx-runtime").JSX.Element;
             displayName: string;
         };
     };
 };
 export default _default;
-export declare const Default: (args: ComponentProps<typeof AppShell>) => import("react/jsx-runtime").JSX.Element;
+export declare const Default: (args: Partial<ComponentProps<typeof AppShell>>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AppShell/AppShell.tokens.d.ts

@@ -35,6 +35,14 @@ export declare const appShellTokens: {
             color: string;
             logo: {
                 fontWeight: number;
+                small: {
+                    fontWeight: number;
+                    lineHeight: any;
+                    fontSize: string;
+                    letterSpacing: any;
+                    fontFamily: any;
+                    fontStyle: any;
+                };
                 lineHeight: any;
                 fontSize: string;
                 letterSpacing: any;
@@ -50,6 +58,12 @@ export declare const appShellTokens: {
                 fontStyle: any;
             };
         };
+        topBar: {
+            padding: string;
+            height: string;
+            buttonTextColor: string;
+            gap: string;
+        };
         color: string;
         backgroundColor: string;
         gap: string;
@@ -57,6 +71,7 @@ export declare const appShellTokens: {
         padding: string;
         width: string;
         mobile: {
+            breakpoint: string;
             iconColors: string;
         };
     };
@@ -64,5 +79,6 @@ export declare const appShellTokens: {
         gap: string;
         textColor: string;
         backgroundColor: string;
+        borderRadius: string;
     };
 };

package/dist/components/AppShell/AppShell.tokens.js

@@ -3,7 +3,8 @@ import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 var colors = ddsBaseTokens.colors,
   spacing = ddsBaseTokens.spacing,
   fontPackages = ddsBaseTokens.fontPackages,
-  borderRadius = ddsBaseTokens.borderRadius;
+  borderRadius = ddsBaseTokens.borderRadius,
+  breakpoints = ddsBaseTokens.breakpoints;
 var navigationItems = {
   gap: spacing.SizesDdsSpacingLocalX05,
   item: Object.assign(Object.assign({}, fontPackages.body_sans_02.base), {
@@ -25,13 +26,23 @@ var logoAndVersion = {
   padding: '36px 24px',
   color: colors.DdsColorNeutralsWhite,
   logo: Object.assign(Object.assign({}, fontPackages.heading_sans_05.base), {
-    fontWeight: 700
+    fontWeight: 700,
+    small: Object.assign(Object.assign({}, fontPackages.heading_sans_03.base), {
+      fontWeight: 600
+    })
   }),
   version: Object.assign({}, fontPackages.supportingStyle_tiny_01.base)
 };
+var topBar = {
+  padding: spacing.SizesDdsSpacingLocalX025,
+  height: "calc(".concat(spacing.SizesDdsSpacingLayoutX3, " + 2 * ").concat(spacing.SizesDdsSpacingLocalX025, ")"),
+  buttonTextColor: colors.DdsColorNeutralsGray3,
+  gap: spacing.SizesDdsSpacingLocalX025
+};
 var navigation = {
   navigationItems: navigationItems,
   logoAndVersion: logoAndVersion,
+  topBar: topBar,
   color: colors.DdsColorNeutralsGray1,
   backgroundColor: colors.DdsColorPrimaryBase,
   gap: spacing.SizesDdsSpacingLocalX05,
@@ -39,13 +50,15 @@ var navigation = {
   padding: spacing.SizesDdsSpacingLocalX1,
   width: '264px',
   mobile: {
+    breakpoint: breakpoints.DdsBreakpointSm,
     iconColors: colors.DdsColorNeutralsGray3
   }
 };
 var floatingActionButtons = {
   gap: spacing.SizesDdsSpacingLocalX1,
   textColor: colors.DdsColorNeutralsGray7,
-  backgroundColor: colors.DdsColorPrimaryDarker
+  backgroundColor: colors.DdsColorNeutralsWhite,
+  borderRadius: borderRadius.RadiiDdsBorderRadius3Radius
 };
 var appShellTokens = {
   navigation: navigation,

package/dist/components/AppShell/AppShellContext.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode, type SetStateAction, type Dispatch } from 'react';
+type AppShellContextValues = {
+    isOpen: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+};
+export declare const AppShellContextProvider: ({ children, }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useAppShellContext: () => AppShellContextValues;
+export {};

package/dist/components/AppShell/AppShellContext.js

@@ -0,0 +1,27 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useContext, createContext } from 'react';
+
+var AppShellContext = /*#__PURE__*/createContext({
+  isOpen: false,
+  setOpen: function setOpen() {}
+});
+var AppShellContextProvider = function AppShellContextProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setOpen = _useState2[1];
+  return jsx(AppShellContext.Provider, {
+    value: {
+      isOpen: isOpen,
+      setOpen: setOpen
+    },
+    children: children
+  });
+};
+var useAppShellContext = function useAppShellContext() {
+  return useContext(AppShellContext);
+};
+
+export { AppShellContextProvider, useAppShellContext };

package/dist/components/AppShell/Navigation/EmbeteIcon.d.ts

@@ -0,0 +1,7 @@
+import { SvgProps } from '@norges-domstoler/dds-icons';
+export type EmbeteType = 'jordskifterett' | 'tingrett' | 'lagmannsrett' | 'høyesterett';
+type EmbeteIconProps = {
+    type?: EmbeteType;
+} & SvgProps;
+export declare const EmbeteIcon: ({ type, ...rest }: EmbeteIconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/AppShell/Navigation/EmbeteIcon.js

@@ -0,0 +1,21 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { PersonIcon, LagmannsrettIcon, TingrettIcon, JordskifterettIcon } from '@norges-domstoler/dds-icons';
+
+var EmbeteIcon = function EmbeteIcon(_a) {
+  var type = _a.type,
+    rest = __rest(_a, ["type"]);
+  switch (type) {
+    case 'jordskifterett':
+      return jsx(JordskifterettIcon, Object.assign({}, rest));
+    case 'tingrett':
+      return jsx(TingrettIcon, Object.assign({}, rest));
+    case 'lagmannsrett':
+      return jsx(LagmannsrettIcon, Object.assign({}, rest));
+    case 'høyesterett':
+    case undefined:
+      return jsx(PersonIcon, Object.assign({}, rest));
+  }
+};
+
+export { EmbeteIcon };

package/dist/components/AppShell/Navigation/Navigation.d.ts

@@ -1,8 +1,13 @@
 import { ReactElement } from 'react';
+import { User } from './TopBar';
+import { OverflowMenuProps } from '../../OverflowMenu';
 export declare const NavigationItems: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export type NavigationProps = {
     version: string;
     internal: ReactElement[];
     external: ReactElement[];
+    user: User;
+    userMenuItems?: OverflowMenuProps['items'];
+    environmentBannerActive: boolean;
 };
-export declare const Navigation: ({ version, internal, external, }: NavigationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Navigation: ({ version, user, userMenuItems, internal, external, environmentBannerActive, }: NavigationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AppShell/Navigation/Navigation.js

@@ -1,65 +1,111 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Children } from 'react';
+import { useEffect, Children } from 'react';
 import styled from 'styled-components';
 import { appShellTokens } from '../AppShell.tokens.js';
 import { Divider } from '../../Divider/Divider.js';
 import { NavigationItem } from './NavigationItem.js';
+import { TopBar } from './TopBar.js';
+import { NavigationLogo } from './NavigationLogo.js';
+import { ENVIRONMENT_BANNER_HEIGHT } from '@norges-domstoler/development-utils';
+import { useAppShellContext } from '../AppShellContext.js';
 
 var navTokens = appShellTokens.navigation;
 var Sidebar = styled.div.withConfig({
   displayName: "Navigation__Sidebar",
   componentId: "sc-twhp5c-0"
-})(["display:flex;flex-direction:column;height:100vh;width:", ";padding:", ";color:", ";background-color:", ";box-sizing:border-box;position:sticky;top:0;left:0;"], navTokens.width, navTokens.padding, navTokens.color, navTokens.backgroundColor);
+})(["display:flex;flex-direction:column;height:calc(100vh - ", ");width:100vw;padding:", ";color:", ";background-color:", ";box-sizing:border-box;position:fixed;top:", ";left:0;right:0;bottom:0;z-index:100;transition:transform 0.2s ease-in-out,opacity 0.2s ease-in-out;transform:translateX(", ");opacity:", ";@media (min-width:", "){height:", ";top:", ";width:", ";position:fixed;transform:translateX(0);opacity:1;}"], navTokens.topBar.height, navTokens.padding, navTokens.color, navTokens.backgroundColor, function (_ref) {
+  var environmentBannerActive = _ref.environmentBannerActive;
+  return environmentBannerActive ? "calc(".concat(ENVIRONMENT_BANNER_HEIGHT, " + ").concat(navTokens.topBar.height, ")") : navTokens.topBar.height;
+}, function (_ref2) {
+  var isOpen = _ref2.isOpen;
+  return isOpen ? '0' : '-100%';
+}, function (_ref3) {
+  var isOpen = _ref3.isOpen;
+  return isOpen ? '1' : '0';
+}, navTokens.mobile.breakpoint, function (_ref4) {
+  var environmentBannerActive = _ref4.environmentBannerActive;
+  return environmentBannerActive ? "calc(100vh - ".concat(ENVIRONMENT_BANNER_HEIGHT, ")") : '100vh';
+}, function (_ref5) {
+  var environmentBannerActive = _ref5.environmentBannerActive;
+  return environmentBannerActive ? ENVIRONMENT_BANNER_HEIGHT : 0;
+}, navTokens.width);
 var LogoAndVersionContainer = styled.div.withConfig({
   displayName: "Navigation__LogoAndVersionContainer",
   componentId: "sc-twhp5c-1"
-})(["display:flex;flex-direction:column;color:", ";padding:", ";"], navTokens.logoAndVersion.color, navTokens.logoAndVersion.padding);
-var Logo = styled.a.withConfig({
-  displayName: "Navigation__Logo",
-  componentId: "sc-twhp5c-2"
-})(["font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";text-align:middle;"], navTokens.logoAndVersion.logo.fontSize, navTokens.logoAndVersion.logo.fontStyle, navTokens.logoAndVersion.logo.fontFamily, navTokens.logoAndVersion.logo.fontWeight, navTokens.logoAndVersion.logo.lineHeight, navTokens.logoAndVersion.logo.letterSpacing);
+})(["display:none;@media (min-width:", "){display:flex;flex-direction:column;color:", ";padding:", ";}"], navTokens.mobile.breakpoint, navTokens.logoAndVersion.color, navTokens.logoAndVersion.padding);
 var Version = styled.span.withConfig({
   displayName: "Navigation__Version",
-  componentId: "sc-twhp5c-3"
+  componentId: "sc-twhp5c-2"
 })(["font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";"], navTokens.logoAndVersion.version.fontSize, navTokens.logoAndVersion.version.fontStyle, navTokens.logoAndVersion.version.fontFamily, navTokens.logoAndVersion.version.fontWeight, navTokens.logoAndVersion.version.lineHeight, navTokens.logoAndVersion.version.letterSpacing);
 var NavigationItems = styled.nav.withConfig({
   displayName: "Navigation__NavigationItems",
-  componentId: "sc-twhp5c-4"
+  componentId: "sc-twhp5c-3"
 })(["display:flex;flex-direction:column;gap:", ";"], navTokens.navigationItems.gap);
 var DividerWrapper = styled.div.withConfig({
   displayName: "Navigation__DividerWrapper",
-  componentId: "sc-twhp5c-5"
+  componentId: "sc-twhp5c-4"
 })(["padding-left:", ";padding-right:", ";"], navTokens.navigationItems.item.padding, navTokens.navigationItems.item.padding);
 var StyledDivider = styled(Divider).withConfig({
   displayName: "Navigation__StyledDivider",
-  componentId: "sc-twhp5c-6"
+  componentId: "sc-twhp5c-5"
 })(["border-color:", ";"], navTokens.dividerColor);
-var Navigation = function Navigation(_ref) {
-  var version = _ref.version,
-    internal = _ref.internal,
-    external = _ref.external;
-  return jsxs(Sidebar, {
-    children: [jsxs(LogoAndVersionContainer, {
-      children: [jsx(Logo, {
-        children: "Lovisa"
-      }), version !== '' && jsxs(Version, {
-        children: ["v ", version]
-      })]
-    }), jsxs(NavigationItems, {
-      children: [Children.map(internal, function (item) {
-        if (item.type !== NavigationItem) {
-          console.warn("Du bruker en React-komponent som ikke er tillat i AppShell-internal. Du kan kun bruke AppShell.NavItem i AppShell-internal.");
-          return null;
-        }
-        return item;
-      }), external.length > 0 && jsx(DividerWrapper, {
-        children: jsx(StyledDivider, {})
-      }), Children.map(external, function (item) {
-        if (item.type !== NavigationItem) {
-          console.warn('Du bruker en React-komponent som ikke er tillat i AppShell-external. Du kan kun bruke AppShell.NavItem i AppShell-external.');
-          return null;
-        }
-        return item;
+var Navigation = function Navigation(_ref6) {
+  var version = _ref6.version,
+    user = _ref6.user,
+    userMenuItems = _ref6.userMenuItems,
+    internal = _ref6.internal,
+    external = _ref6.external,
+    environmentBannerActive = _ref6.environmentBannerActive;
+  var _useAppShellContext = useAppShellContext(),
+    isOpen = _useAppShellContext.isOpen,
+    setOpen = _useAppShellContext.setOpen;
+  useEffect(function () {
+    var listener = function listener(event) {
+      if (event.key === 'o') {
+        setOpen(function (prev) {
+          return !prev;
+        });
+      }
+    };
+    window.addEventListener('keypress', listener);
+    return function () {
+      return window.removeEventListener('keypress', listener);
+    };
+  });
+  return jsxs("div", {
+    children: [jsx(TopBar, {
+      user: user,
+      userMenuItems: userMenuItems,
+      isNavigationOpen: isOpen,
+      onNavigationOpenChange: function onNavigationOpenChange(newOpen) {
+        return setOpen(newOpen);
+      },
+      environmentBannerActive: environmentBannerActive
+    }), jsxs(Sidebar, {
+      isOpen: isOpen,
+      environmentBannerActive: environmentBannerActive,
+      children: [jsxs(LogoAndVersionContainer, {
+        children: [jsx(NavigationLogo, {
+          children: "Lovisa"
+        }), version !== '' && jsxs(Version, {
+          children: ["v ", version]
+        })]
+      }), jsxs(NavigationItems, {
+        children: [Children.map(internal, function (item) {
+          if (item.type !== NavigationItem) {
+            console.warn("Du bruker en React-komponent som ikke er tillat i AppShell-internal. Du kan kun bruke AppShell.NavItem i AppShell-internal.");
+            return null;
+          }
+          return item;
+        }), external.length > 0 && jsx(DividerWrapper, {
+          children: jsx(StyledDivider, {})
+        }), Children.map(external, function (item) {
+          if (item.type !== NavigationItem) {
+            console.warn('Du bruker en React-komponent som ikke er tillat i AppShell-external. Du kan kun bruke AppShell.NavItem i AppShell-external.');
+            return null;
+          }
+          return item;
+        })]
       })]
     })]
   });

package/dist/components/AppShell/Navigation/NavigationItem.d.ts

@@ -1,6 +1,7 @@
 import { type PropsOf, type As } from '@norges-domstoler/dds-core';
 import { SvgIcon } from '@norges-domstoler/dds-icons';
-type BaseNavigationItemProps = {
+import { type MouseEventHandler } from 'react';
+type BaseNavigationItemProps = ({
     icon: SvgIcon;
     active?: boolean;
     external?: undefined | false;
@@ -8,10 +9,12 @@ type BaseNavigationItemProps = {
     external: true;
     active?: undefined | false;
     icon?: undefined;
+}) & {
+    onClick?: MouseEventHandler;
 };
 type NavigationItemProps<T extends As = 'a'> = PropsOf<T> & BaseNavigationItemProps;
 export declare const NavigationItem: {
-    <T extends As = "a">({ as: _as, active, icon, external, children, ...rest }: NavigationItemProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends As = "a">({ as: _as, active, icon, external, children, onClick: propOnClick, ...rest }: NavigationItemProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/AppShell/Navigation/NavigationItem.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
 import { Icon, OpenExternalIcon, ChevronRightIcon } from '@norges-domstoler/dds-icons';
 import { appShellTokens } from '../AppShell.tokens.js';
+import { useAppShellContext } from '../AppShellContext.js';
 
 var navTokens = appShellTokens.navigation;
 var navItemTokens = navTokens.navigationItems.item;
@@ -25,7 +26,7 @@ var BaseLink = styled.a.withConfig({
 var InternalNavItem = styled(BaseLink).withConfig({
   displayName: "NavigationItem__InternalNavItem",
   componentId: "sc-8k2l5g-4"
-})(["display:grid;align-items:center;grid-template-areas:'icon text chevron';grid-template-columns:min-content 1fr min-content;:hover{", "{opacity:1;}}"], ChevronContainer);
+})(["display:grid;align-items:center;grid-template-areas:'icon text chevron';grid-template-columns:min-content 1fr min-content;&.active ", "{opacity:1;}"], ChevronContainer);
 var ExternalNavItem = styled(BaseLink).withConfig({
   displayName: "NavigationItem__ExternalNavItem",
   componentId: "sc-8k2l5g-5"
@@ -36,12 +37,20 @@ var NavigationItem = function NavigationItem(_a) {
     icon = _a.icon,
     external = _a.external,
     children = _a.children,
-    rest = __rest(_a, ["as", "active", "icon", "external", "children"]);
+    propOnClick = _a.onClick,
+    rest = __rest(_a, ["as", "active", "icon", "external", "children", "onClick"]);
+  var _useAppShellContext = useAppShellContext(),
+    setOpen = _useAppShellContext.setOpen;
   var Comp = _as !== null && _as !== void 0 ? _as : 'a';
+  var onClick = function onClick(e) {
+    propOnClick === null || propOnClick === void 0 ? void 0 : propOnClick(e);
+    setOpen(false);
+  };
   if (external) {
     return jsxs(ExternalNavItem, Object.assign({
       as: Comp
     }, rest, {
+      onClick: onClick,
       children: [children, jsx(Icon, {
         icon: OpenExternalIcon,
         iconSize: "inherit"
@@ -51,7 +60,8 @@ var NavigationItem = function NavigationItem(_a) {
   return jsxs(InternalNavItem, Object.assign({
     as: Comp
   }, rest, {
-    className: active ? 'active' : '',
+    onClick: onClick,
+    className: [active ? 'active' : '', rest.className].join(' '),
     children: [jsx(IconContainer, {
       children: icon && jsx(Icon, {
         icon: icon

package/dist/components/AppShell/Navigation/NavigationLogo.d.ts

@@ -0,0 +1,3 @@
+export declare const NavigationLogo: import("styled-components").StyledComponent<"a", any, {
+    small?: boolean | undefined;
+}, never>;

package/dist/components/AppShell/Navigation/NavigationLogo.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components';
+import { appShellTokens } from '../AppShell.tokens.js';
+
+var navTokens = appShellTokens.navigation;
+var fontPackage = function fontPackage(small) {
+  if (small) {
+    return navTokens.logoAndVersion.logo.small;
+  }
+  return navTokens.logoAndVersion.logo;
+};
+var NavigationLogo = styled.a.withConfig({
+  displayName: "NavigationLogo",
+  componentId: "sc-17higny-0"
+})(["font-size:", ";font-style:", ";font-family:", ";font-weight:", ";line-height:", ";letter-spacing:", ";text-align:middle;"], function (_ref) {
+  var small = _ref.small;
+  return fontPackage(small).fontSize;
+}, function (_ref2) {
+  var small = _ref2.small;
+  return fontPackage(small).fontStyle;
+}, function (_ref3) {
+  var small = _ref3.small;
+  return fontPackage(small).fontFamily;
+}, function (_ref4) {
+  var small = _ref4.small;
+  return fontPackage(small).fontWeight;
+}, function (_ref5) {
+  var small = _ref5.small;
+  return fontPackage(small).lineHeight;
+}, function (_ref6) {
+  var small = _ref6.small;
+  return fontPackage(small).letterSpacing;
+});
+
+export { NavigationLogo };

package/dist/components/AppShell/Navigation/TopBar.d.ts

@@ -0,0 +1,23 @@
+import { EmbeteType } from './EmbeteIcon';
+import { OverflowMenuProps } from '../../OverflowMenu';
+type TopBarProps = {
+    user: User;
+    userMenuItems?: OverflowMenuProps['items'];
+    isNavigationOpen: boolean;
+    onNavigationOpenChange: (isOpen: boolean) => void;
+    environmentBannerActive: boolean;
+};
+export type User = {
+    /**Brukerens fulle navn (for- og etternavn). */
+    name: string;
+    /**Det aktive embetet til brukeren. */
+    embete: Embete;
+};
+export type Embete = {
+    /**Navnet på embetet. */
+    name: string;
+    /**Hvilken instans embetet er. */
+    type: EmbeteType;
+};
+export declare const TopBar: ({ user, userMenuItems, isNavigationOpen, onNavigationOpenChange, environmentBannerActive, }: TopBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};