@norges-domstoler/dds-components 13.7.0 → 13.8.1

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

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { CloseIcon, MenuIcon } from '@norges-domstoler/dds-icons';
+import { ENVIRONMENT_BANNER_HEIGHT } from '@norges-domstoler/development-utils';
+import { EmbeteIcon } from './EmbeteIcon.js';
+import { appShellTokens } from '../AppShell.tokens.js';
+import { NavigationLogo } from './NavigationLogo.js';
+import { Button } from '../../Button/Button.js';
+import { OverflowMenu } from '../../OverflowMenu/OverflowMenu.js';
+import { OverflowMenuGroup } from '../../OverflowMenu/OverflowMenuGroup.js';
+
+var navTokens = appShellTokens.navigation,
+  floatingActionButtons = appShellTokens.floatingActionButtons;
+var LogoBurgerGroup = styled.div.withConfig({
+  displayName: "TopBar__LogoBurgerGroup",
+  componentId: "sc-1mmx14i-0"
+})(["display:flex;align-items:center;gap:", ";"], navTokens.topBar.gap);
+var ActionButtonGroup = styled.div.withConfig({
+  displayName: "TopBar__ActionButtonGroup",
+  componentId: "sc-1mmx14i-1"
+})(["display:flex;align-items:center;gap:", ";"], navTokens.topBar.gap);
+var IconButton = styled(Button).attrs({
+  appearance: 'borderless',
+  purpose: 'secondary'
+}).withConfig({
+  displayName: "TopBar__IconButton",
+  componentId: "sc-1mmx14i-2"
+})(["color:", ";> :first-child{font-size:1.65rem;}@media (max-width:", "){border:0;box-shadow:none;padding:12px;&:hover,&:active{color:", ";text-decoration-color:", ";box-shadow:none;}gap:0;}"], navTokens.topBar.buttonTextColor, navTokens.mobile.breakpoint, navTokens.topBar.buttonTextColor, navTokens.topBar.buttonTextColor);
+var IconButtonText = styled.span.withConfig({
+  displayName: "TopBar__IconButtonText",
+  componentId: "sc-1mmx14i-3"
+})(["display:none;width:0;"]);
+var Bar = styled.div.withConfig({
+  displayName: "TopBar__Bar",
+  componentId: "sc-1mmx14i-4"
+})(["display:flex;align-items:center;justify-content:space-between;gap:", ";width:100vw;height:", ";color:", ";background-color:", ";box-sizing:border-box;z-index:101;position:fixed;top:", ";left:0;right:0;@media (min-width:", "){justify-content:flex-end;background-color:transparent;margin-left:", ";width:calc(100vw - ", ");pointer-events:none;& > *{pointer-events:initial;}", "{display:none;}", "{padding-right:calc(2 * ", ");gap:", ";}", "{background-color:", ";color:", ";box-shadow:8px 16px 32px 0px rgba(0,0,0,0.1);border-radius:", ";", "{display:unset;}}}"], navTokens.topBar.gap, navTokens.topBar.height, navTokens.color, navTokens.backgroundColor, function (_ref) {
+  var environmentBannerActive = _ref.environmentBannerActive;
+  return environmentBannerActive ? ENVIRONMENT_BANNER_HEIGHT : '0';
+}, navTokens.mobile.breakpoint, navTokens.width, navTokens.width, LogoBurgerGroup, ActionButtonGroup, navTokens.topBar.gap, floatingActionButtons.gap, IconButton, floatingActionButtons.backgroundColor, floatingActionButtons.textColor, floatingActionButtons.borderRadius, IconButtonText);
+var TopBar = function TopBar(_ref2) {
+  var user = _ref2.user,
+    userMenuItems = _ref2.userMenuItems,
+    isNavigationOpen = _ref2.isNavigationOpen,
+    onNavigationOpenChange = _ref2.onNavigationOpenChange,
+    environmentBannerActive = _ref2.environmentBannerActive;
+  var Icon = function Icon(props) {
+    return jsx(EmbeteIcon, Object.assign({}, props, {
+      type: user.embete.type
+    }));
+  };
+  return jsxs(Bar, {
+    environmentBannerActive: environmentBannerActive,
+    children: [jsxs(LogoBurgerGroup, {
+      children: [jsx(IconButton, {
+        icon: isNavigationOpen ? CloseIcon : MenuIcon,
+        onClick: function onClick() {
+          return onNavigationOpenChange(!isNavigationOpen);
+        }
+      }), jsx(NavigationLogo, {
+        small: true,
+        children: "Lovisa"
+      })]
+    }), jsx(ActionButtonGroup, {
+      children: jsxs(OverflowMenuGroup, {
+        children: [jsx(IconButton, {
+          icon: Icon,
+          label: jsx(IconButtonText, {
+            children: user.name
+          })
+        }), jsx(OverflowMenu, {
+          items: userMenuItems
+        })]
+      })
+    })]
+  });
+};
+
+export { TopBar };

package/dist/components/Button/Button.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const Button: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "onFocus" | "onBlur" | "type">, "id" | "className"> & {
     size?: import("./Button.types").ButtonSize | undefined;
-    label?: string | undefined;
+    label?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     purpose?: import("./Button.types").ButtonPurpose | undefined;
     iconPosition?: import("./Button.types").IconPosition | undefined;
     appearance?: import("./Button.types").ButtonAppearance | undefined;

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

@@ -4,7 +4,7 @@ declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onFocus" | "onBlur" | "onClick">, "className" | "id"> & {
         size?: import("./Button.types").ButtonSize | undefined;
-        label?: string | undefined;
+        label?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
         purpose?: import("./Button.types").ButtonPurpose | undefined;
         iconPosition?: import("./Button.types").IconPosition | undefined;
         appearance?: import("./Button.types").ButtonAppearance | undefined;

package/dist/components/Button/Button.types.d.ts

@@ -1,4 +1,4 @@
-import { ButtonHTMLAttributes } from 'react';
+import { ButtonHTMLAttributes, ReactElement } from 'react';
 import { BaseComponentProps } from '@norges-domstoler/dds-core';
 import { SvgIcon } from '@norges-domstoler/dds-icons';
 export type ButtonPurpose = 'primary' | 'secondary' | 'danger';
@@ -10,7 +10,7 @@ export type ButtonProps = BaseComponentProps<HTMLButtonElement, {
     /**Størrelsen på knappen. */
     size?: ButtonSize;
     /**Tekst i knappen. */
-    label?: string;
+    label?: string | ReactElement;
     /**Bestemmer farger basert på formål. */
     purpose?: ButtonPurpose;
     /**	Posisjonen til ikonet i forhold til teksten.*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "13.7.0",
+  "version": "13.8.1",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -93,6 +93,7 @@
     "@norges-domstoler/dds-form": "*",
     "@norges-domstoler/dds-icons": "*",
     "@norges-domstoler/dds-typography": "*",
+    "@norges-domstoler/development-utils": "*",
     "attr-accept": "^2.2.2",
     "file-selector": "^0.6.0",
     "focus-visible": "^5.2.0",