@norges-domstoler/dds-components 13.6.3 → 13.7.0

package/dist/cjs/components/Search/Search.d.ts

@@ -1,10 +1,11 @@
-import { ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
 import { InputProps as BaseInputProps } from '@norges-domstoler/dds-form';
+import { ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
 export type SearchSize = 'small' | 'medium' | 'large';
 type ButtonProps = {
     onClick: (event: MouseEvent<HTMLButtonElement>) => void;
     label?: string;
     loading?: boolean;
+    purpose?: 'primary' | 'secondary';
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 export type SearchProps = Pick<BaseInputProps, 'tip' | 'label'> & {
     /**Størrelsen på komponenten. */

package/dist/cjs/components/Search/Search.stories.d.ts

@@ -8,6 +8,7 @@ declare const _default: {
             onClick: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
             label?: string | undefined;
             loading?: boolean | undefined;
+            purpose?: "secondary" | "primary" | undefined;
         } & import("react").ButtonHTMLAttributes<HTMLButtonElement>) | undefined;
     } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>> & {
         AutocompleteWrapper: {

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
+    })]
   });
 };
 
@@ -3242,6 +3248,40 @@ var searchTokens = {
   suggestionsHeader: suggestionsHeader$1
 };
 
+/**
+ * Lager en change-event som kan resette verdien i et input-felt.
+ * Dette vil resultere i en event som har: event.target.value = ''.
+ *
+ * @param inputElementId Id'en til et gitt input-felt
+ * @returns En change-event som har en tom streng som target value
+ */
+function createEmptyChangeEvent(inputElementId) {
+  var inputElement = document.getElementById(inputElementId);
+  inputElement.value = '';
+  var emptyChangeEvent = {
+    target: inputElement,
+    currentTarget: inputElement,
+    bubbles: true,
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    preventDefault: function preventDefault() {},
+    stopPropagation: function stopPropagation() {},
+    nativeEvent: new Event('input'),
+    persist: function persist() {},
+    type: 'change',
+    timeStamp: Date.now(),
+    isDefaultPrevented: function isDefaultPrevented() {
+      return false;
+    },
+    isPropagationStopped: function isPropagationStopped() {
+      return false;
+    }
+  };
+  return emptyChangeEvent;
+}
+
 var border$7 = ddsDesignTokens.ddsBaseTokens.border,
   borderRadius$4 = ddsDesignTokens.ddsBaseTokens.borderRadius,
   colors$i = ddsDesignTokens.ddsBaseTokens.colors,
@@ -3462,40 +3502,6 @@ var SearchSuggestions = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 SearchSuggestions.displayName = 'SearchSuggestions';
 
-/**
- * Lager en change-event som kan resette verdien i et input-felt.
- * Dette vil resultere i en event som har: event.target.value = ''.
- *
- * @param inputElementId Id'en til et gitt input-felt
- * @returns En change-event som har en tom streng som target value
- */
-function createEmptyChangeEvent(inputElementId) {
-  var inputElement = document.getElementById(inputElementId);
-  inputElement.value = '';
-  var emptyChangeEvent = {
-    target: inputElement,
-    currentTarget: inputElement,
-    bubbles: true,
-    cancelable: false,
-    defaultPrevented: false,
-    eventPhase: 0,
-    isTrusted: false,
-    preventDefault: function preventDefault() {},
-    stopPropagation: function stopPropagation() {},
-    nativeEvent: new Event('input'),
-    persist: function persist() {},
-    type: 'change',
-    timeStamp: Date.now(),
-    isDefaultPrevented: function isDefaultPrevented() {
-      return false;
-    },
-    isPropagationStopped: function isPropagationStopped() {
-      return false;
-    }
-  };
-  return emptyChangeEvent;
-}
-
 var input = searchTokens.input,
   outerContainer$5 = searchTokens.outerContainer,
   horisontalContainer = searchTokens.horisontalContainer,

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/dist/components/Search/Search.d.ts

@@ -1,10 +1,11 @@
-import { ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
 import { InputProps as BaseInputProps } from '@norges-domstoler/dds-form';
+import { ButtonHTMLAttributes, InputHTMLAttributes, MouseEvent } from 'react';
 export type SearchSize = 'small' | 'medium' | 'large';
 type ButtonProps = {
     onClick: (event: MouseEvent<HTMLButtonElement>) => void;
     label?: string;
     loading?: boolean;
+    purpose?: 'primary' | 'secondary';
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 export type SearchProps = Pick<BaseInputProps, 'tip' | 'label'> & {
     /**Størrelsen på komponenten. */

package/dist/components/Search/Search.js

@@ -1,19 +1,19 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useId, useState } from 'react';
-import styled, { css } from 'styled-components';
-import { Input as Input$1 } from '@norges-domstoler/dds-form';
 import { derivativeIdGenerator, useCombinedRef, spaceSeparatedIdListGenerator } from '@norges-domstoler/dds-core';
+import { Input as Input$1 } from '@norges-domstoler/dds-form';
 import { Icon, SearchIcon, CloseSmallIcon } from '@norges-domstoler/dds-icons';
-import { Button } from '../Button/Button.js';
 import { getFontStyling, Label } from '@norges-domstoler/dds-typography';
+import { forwardRef, useId, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { renderInputMessage } from '../../utils/renderInputMessage.js';
+import { Button } from '../Button/Button.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { useAutocompleteSearch } from './AutocompleteSearch.context.js';
 import { typographyTypes, searchTokens } from './Search.tokens.js';
-import { SearchSuggestions } from './SearchSuggestions.js';
 import { createEmptyChangeEvent } from './Search.utils.js';
-import { renderInputMessage } from '../../utils/renderInputMessage.js';
+import { SearchSuggestions } from './SearchSuggestions.js';
 
 var input = searchTokens.input,
   outerContainer = searchTokens.outerContainer,

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

@@ -8,6 +8,7 @@ declare const _default: {
             onClick: (event: import("react").MouseEvent<HTMLButtonElement, MouseEvent>) => void;
             label?: string | undefined;
             loading?: boolean | undefined;
+            purpose?: "secondary" | "primary" | undefined;
         } & import("react").ButtonHTMLAttributes<HTMLButtonElement>) | undefined;
     } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>> & {
         AutocompleteWrapper: {

package/package.json

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