@norges-domstoler/dds-components 13.6.3 → 13.6.4

package/dist/cjs/index.js

@@ -7,8 +7,8 @@ var ddsIcons = require('@norges-domstoler/dds-icons');
 var ddsTypography = require('@norges-domstoler/dds-typography');
 var jsxRuntime = require('react/jsx-runtime');
 var styled = require('styled-components');
-var React = require('react');
 var ddsDesignTokens = require('@norges-domstoler/dds-design-tokens');
+var React = require('react');
 var tslib = require('tslib');
 var ReactSelect = require('react-select');
 var reactDom = require('react-dom');
@@ -181,7 +181,7 @@ var navTokens = appShellTokens.navigation;
 var Sidebar = styled__default.default.div.withConfig({
   displayName: "Navigation__Sidebar",
   componentId: "sc-twhp5c-0"
-})(["display:flex;flex-direction:column;height:100vh;width:", ";padding:", ";color:", ";background-color:", ";position:sticky;top:0;left:0;"], navTokens.width, navTokens.padding, navTokens.color, navTokens.backgroundColor);
+})(["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);
 var LogoAndVersionContainer = styled__default.default.div.withConfig({
   displayName: "Navigation__LogoAndVersionContainer",
   componentId: "sc-twhp5c-1"
@@ -226,7 +226,7 @@ var Navigation$1 = function Navigation(_ref) {
         return item;
       }), external.length > 0 && jsxRuntime.jsx(DividerWrapper, {
         children: jsxRuntime.jsx(StyledDivider$1, {})
-      }), React.Children.map(external, function (item, i) {
+      }), React.Children.map(external, function (item) {
         if (item.type !== NavigationItem$1) {
           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;
@@ -241,6 +241,10 @@ var AppShellContainer = styled__default.default.div.withConfig({
   displayName: "AppShell__AppShellContainer",
   componentId: "sc-1c8yu5p-0"
 })(["display:flex;flex-direction:row;"]);
+var MainContent = styled__default.default.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$1 = function AppShell(_ref) {
   var children = _ref.children,
     _ref$version = _ref.version,
@@ -255,7 +259,9 @@ var AppShell$1 = function AppShell(_ref) {
       version: version,
       internal: internal,
       external: external
-    }), children]
+    }), jsxRuntime.jsx(MainContent, {
+      children: children
+    })]
   });
 };
 

package/dist/components/AppShell/AppShell.js

@@ -1,11 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
+import { appShellTokens } from './AppShell.tokens.js';
 import { Navigation } from './Navigation/Navigation.js';
 
 var AppShellContainer = styled.div.withConfig({
   displayName: "AppShell__AppShellContainer",
   componentId: "sc-1c8yu5p-0"
 })(["display:flex;flex-direction:row;"]);
+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,
@@ -20,7 +25,9 @@ var AppShell = function AppShell(_ref) {
       version: version,
       internal: internal,
       external: external
-    }), children]
+    }), jsx(MainContent, {
+      children: children
+    })]
   });
 };
 

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

@@ -9,7 +9,7 @@ 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:", ";position:sticky;top:0;left:0;"], navTokens.width, navTokens.padding, navTokens.color, navTokens.backgroundColor);
+})(["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);
 var LogoAndVersionContainer = styled.div.withConfig({
   displayName: "Navigation__LogoAndVersionContainer",
   componentId: "sc-twhp5c-1"
@@ -54,7 +54,7 @@ var Navigation = function Navigation(_ref) {
         return item;
       }), external.length > 0 && jsx(DividerWrapper, {
         children: jsx(StyledDivider, {})
-      }), Children.map(external, function (item, i) {
+      }), 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "13.6.3",
+  "version": "13.6.4",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",