@norges-domstoler/dds-components 11.0.0 → 11.1.0

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

@@ -3,10 +3,18 @@ export type DescriptionListAppearance = 'small' | 'bold';
 export type DescriptionListProps = BaseComponentPropsWithChildren<HTMLDListElement, {
     /**Påvirker tekst styling. */
     appearance?: DescriptionListAppearance;
+    /**Setter flex-direction. NB! Fungerer kun ved bruk av `DescriptionListGroup` som barn av `DescriptionList`.
+     *  @default "column"
+     */
+    direction?: 'row' | 'column';
 }>;
 export declare const DescriptionList: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
     /**Påvirker tekst styling. */
     appearance?: DescriptionListAppearance | undefined;
+    /**Setter flex-direction. NB! Fungerer kun ved bruk av `DescriptionListGroup` som barn av `DescriptionList`.
+     *  @default "column"
+     */
+    direction?: "row" | "column" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

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

@@ -3,6 +3,7 @@ declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
         appearance?: import("./DescriptionList").DescriptionListAppearance | undefined;
+        direction?: "row" | "column" | undefined;
     } & {
         children?: import("react").ReactNode;
     } & {
@@ -14,4 +15,4 @@ export declare const Overview: () => JSX.Element;
 export declare const Default: (args: DescriptionListProps) => JSX.Element;
 export declare const Group: (args: DescriptionListProps) => JSX.Element;
 export declare const WithIcon: (args: DescriptionListProps) => JSX.Element;
-export declare const ColumnExample: (args: DescriptionListProps) => JSX.Element;
+export declare const RowDirectionExample: (args: DescriptionListProps) => JSX.Element;

package/dist/cjs/components/DescriptionList/DescriptionList.tokens.d.ts

@@ -31,6 +31,9 @@ export declare const descriptionListTokens: {
         beforeNextTerm: {
             marginTop: string;
         };
+        rowDirection: {
+            columnGap: string;
+        };
     };
     group: {
         base: {

package/dist/cjs/components/DescriptionList/DescriptionListGroup.d.ts

@@ -3,10 +3,18 @@ import { BaseComponentPropsWithChildren } from '../../types';
 export type DescriptionListGroupProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**Custom margin. */
     margin?: Property.Margin<string>;
+    /**Custom min-width. */
+    minWidth?: Property.MinWidth<string>;
+    /**Custom max-width. */
+    maxWidth?: Property.MaxWidth<string>;
 }>;
 export declare const DescriptionListGroup: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
     /**Custom margin. */
     margin?: Property.Margin<string> | undefined;
+    /**Custom min-width. */
+    minWidth?: Property.MinWidth<string> | undefined;
+    /**Custom max-width. */
+    maxWidth?: Property.MaxWidth<string> | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

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

@@ -12,5 +12,5 @@ export declare const InputMessage: import("react").ForwardRefExoticComponent<Pic
     /** Formålet med meldingen. Påvirker styling. */
     messageType: InputMessageType;
 } & {
-    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined; /** Meldingen som vises til brukeren. */
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/cjs/index.js

@@ -2069,7 +2069,7 @@ var InputMessageWrapper = styled__default.default.div.withConfig({
   componentId: "sc-c954fy-0"
 })(["display:flex;width:fit-content;word-break:break-word;max-width:100%;", " svg{margin-top:", ";}"], function (_ref) {
   var messageType = _ref.messageType;
-  return messageType === 'tip' ? styled.css(["background-color:", ";"], inputMessageTokens.message.tip.backgroundColor) : messageType === 'error' ? styled.css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
+  return messageType === 'error' ? styled.css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
 }, inputMessageTokens.icon.marginTop);
 var InputMessage = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var message = props.message,
@@ -6399,6 +6399,9 @@ var desc$1 = {
 var list$7 = {
   beforeNextTerm: {
     marginTop: spacing$n.SizesDdsSpacingLocalX2
+  },
+  rowDirection: {
+    columnGap: spacing$n.SizesDdsSpacingLocalX2
   }
 };
 var group$2 = {
@@ -6419,20 +6422,27 @@ var term = descriptionListTokens.term,
 var DList = styled__default.default.dl.withConfig({
   displayName: "DescriptionList__DList",
   componentId: "sc-1ob73hm-0"
-})(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
+})(["margin:0;*::selection{", "}", " display:flex;flex-direction:column;&:not(:has(> dt):has(> dd)){flex-direction:", ";}flex-wrap:wrap;column-gap:", ";row-gap:0;& > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
   var appearance = _ref.appearance;
   return appearance && styled.css(["dt{color:", ";", " ", "}"], term.appearance[appearance].color, getFontStyling(termTypographyTypes[appearance]), appearance === 'bold' && styled.css(["font-weight:600;"]));
-}, term.firstOfType.marginTop, desc.lastChild.marginBottom, list$6.beforeNextTerm.marginTop);
+}, function (_ref2) {
+  var _ref2$direction = _ref2.direction,
+    direction = _ref2$direction === void 0 ? 'column' : _ref2$direction;
+  return direction;
+}, list$6.rowDirection.columnGap, term.firstOfType.marginTop, desc.lastChild.marginBottom, list$6.beforeNextTerm.marginTop);
 var DescriptionList = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'bold' : _props$appearance,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'column' : _props$direction,
     children = props.children,
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["appearance", "children", "id", "className", "htmlProps"]);
+    rest = tslib.__rest(props, ["appearance", "direction", "children", "id", "className", "htmlProps"]);
   var dListProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     appearance: appearance,
+    direction: direction,
     ref: ref
   });
   return jsxRuntime.jsx(DList, Object.assign({}, dListProps, {
@@ -6480,21 +6490,31 @@ var DescriptionListDesc = /*#__PURE__*/React.forwardRef(function (props, ref) {
 var DListGroup = styled__default.default.div.withConfig({
   displayName: "DescriptionListGroup__DListGroup",
   componentId: "sc-jkdc0o-0"
-})(["margin:", ";"], function (_ref) {
+})(["margin:", ";", " ", ""], function (_ref) {
   var margin = _ref.margin;
   return margin ? margin : descriptionListTokens.group.base.margin;
+}, function (_ref2) {
+  var minWidth = _ref2.minWidth;
+  return minWidth && "min-width: ".concat(minWidth);
+}, function (_ref3) {
+  var maxWidth = _ref3.maxWidth;
+  return maxWidth && "max-width: ".concat(maxWidth);
 });
 var DescriptionListGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
     margin = props.margin,
+    minWidth = props.minWidth,
+    maxWidth = props.maxWidth,
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["children", "margin", "id", "className", "htmlProps"]);
+    rest = tslib.__rest(props, ["children", "margin", "minWidth", "maxWidth", "id", "className", "htmlProps"]);
   var dListGroupProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     children: children,
     ref: ref,
-    margin: margin
+    margin: margin,
+    minWidth: minWidth,
+    maxWidth: maxWidth
   });
   return jsxRuntime.jsx(DListGroup, Object.assign({}, dListGroupProps, {
     children: children

package/dist/components/DescriptionList/DescriptionList.d.ts

@@ -3,10 +3,18 @@ export type DescriptionListAppearance = 'small' | 'bold';
 export type DescriptionListProps = BaseComponentPropsWithChildren<HTMLDListElement, {
     /**Påvirker tekst styling. */
     appearance?: DescriptionListAppearance;
+    /**Setter flex-direction. NB! Fungerer kun ved bruk av `DescriptionListGroup` som barn av `DescriptionList`.
+     *  @default "column"
+     */
+    direction?: 'row' | 'column';
 }>;
 export declare const DescriptionList: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
     /**Påvirker tekst styling. */
     appearance?: DescriptionListAppearance | undefined;
+    /**Setter flex-direction. NB! Fungerer kun ved bruk av `DescriptionListGroup` som barn av `DescriptionList`.
+     *  @default "column"
+     */
+    direction?: "row" | "column" | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

package/dist/components/DescriptionList/DescriptionList.js

@@ -17,20 +17,27 @@ var term = descriptionListTokens.term,
 var DList = styled.dl.withConfig({
   displayName: "DescriptionList__DList",
   componentId: "sc-1ob73hm-0"
-})(["margin:0;*::selection{", "}", " & > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
+})(["margin:0;*::selection{", "}", " display:flex;flex-direction:column;&:not(:has(> dt):has(> dd)){flex-direction:", ";}flex-wrap:wrap;column-gap:", ";row-gap:0;& > dt:first-of-type{margin-top:", ";}& > dd:last-child{margin-bottom:", ";}dd + dt{margin-top:", ";}"], selection, function (_ref) {
   var appearance = _ref.appearance;
   return appearance && css(["dt{color:", ";", " ", "}"], term.appearance[appearance].color, getFontStyling(termTypographyTypes[appearance]), appearance === 'bold' && css(["font-weight:600;"]));
-}, term.firstOfType.marginTop, desc.lastChild.marginBottom, list.beforeNextTerm.marginTop);
+}, function (_ref2) {
+  var _ref2$direction = _ref2.direction,
+    direction = _ref2$direction === void 0 ? 'column' : _ref2$direction;
+  return direction;
+}, list.rowDirection.columnGap, term.firstOfType.marginTop, desc.lastChild.marginBottom, list.beforeNextTerm.marginTop);
 var DescriptionList = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$appearance = props.appearance,
     appearance = _props$appearance === void 0 ? 'bold' : _props$appearance,
+    _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'column' : _props$direction,
     children = props.children,
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = __rest(props, ["appearance", "children", "id", "className", "htmlProps"]);
+    rest = __rest(props, ["appearance", "direction", "children", "id", "className", "htmlProps"]);
   var dListProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     appearance: appearance,
+    direction: direction,
     ref: ref
   });
   return jsx(DList, Object.assign({}, dListProps, {

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

@@ -3,6 +3,7 @@ declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDListElement>, "id" | "className"> & {
         appearance?: import("./DescriptionList").DescriptionListAppearance | undefined;
+        direction?: "row" | "column" | undefined;
     } & {
         children?: import("react").ReactNode;
     } & {
@@ -14,4 +15,4 @@ export declare const Overview: () => JSX.Element;
 export declare const Default: (args: DescriptionListProps) => JSX.Element;
 export declare const Group: (args: DescriptionListProps) => JSX.Element;
 export declare const WithIcon: (args: DescriptionListProps) => JSX.Element;
-export declare const ColumnExample: (args: DescriptionListProps) => JSX.Element;
+export declare const RowDirectionExample: (args: DescriptionListProps) => JSX.Element;

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

@@ -31,6 +31,9 @@ export declare const descriptionListTokens: {
         beforeNextTerm: {
             marginTop: string;
         };
+        rowDirection: {
+            columnGap: string;
+        };
     };
     group: {
         base: {

package/dist/components/DescriptionList/DescriptionList.tokens.js

@@ -32,6 +32,9 @@ var desc = {
 var list = {
   beforeNextTerm: {
     marginTop: spacing.SizesDdsSpacingLocalX2
+  },
+  rowDirection: {
+    columnGap: spacing.SizesDdsSpacingLocalX2
   }
 };
 var group = {

package/dist/components/DescriptionList/DescriptionListGroup.d.ts

@@ -3,10 +3,18 @@ import { BaseComponentPropsWithChildren } from '../../types';
 export type DescriptionListGroupProps = BaseComponentPropsWithChildren<HTMLDivElement, {
     /**Custom margin. */
     margin?: Property.Margin<string>;
+    /**Custom min-width. */
+    minWidth?: Property.MinWidth<string>;
+    /**Custom max-width. */
+    maxWidth?: Property.MaxWidth<string>;
 }>;
 export declare const DescriptionListGroup: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & {
     /**Custom margin. */
     margin?: Property.Margin<string> | undefined;
+    /**Custom min-width. */
+    minWidth?: Property.MinWidth<string> | undefined;
+    /**Custom max-width. */
+    maxWidth?: Property.MaxWidth<string> | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

package/dist/components/DescriptionList/DescriptionListGroup.js

@@ -8,21 +8,31 @@ import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 var DListGroup = styled.div.withConfig({
   displayName: "DescriptionListGroup__DListGroup",
   componentId: "sc-jkdc0o-0"
-})(["margin:", ";"], function (_ref) {
+})(["margin:", ";", " ", ""], function (_ref) {
   var margin = _ref.margin;
   return margin ? margin : descriptionListTokens.group.base.margin;
+}, function (_ref2) {
+  var minWidth = _ref2.minWidth;
+  return minWidth && "min-width: ".concat(minWidth);
+}, function (_ref3) {
+  var maxWidth = _ref3.maxWidth;
+  return maxWidth && "max-width: ".concat(maxWidth);
 });
 var DescriptionListGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     margin = props.margin,
+    minWidth = props.minWidth,
+    maxWidth = props.maxWidth,
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = __rest(props, ["children", "margin", "id", "className", "htmlProps"]);
+    rest = __rest(props, ["children", "margin", "minWidth", "maxWidth", "id", "className", "htmlProps"]);
   var dListGroupProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     children: children,
     ref: ref,
-    margin: margin
+    margin: margin,
+    minWidth: minWidth,
+    maxWidth: maxWidth
   });
   return jsx(DListGroup, Object.assign({}, dListGroupProps, {
     children: children

package/dist/components/InputMessage/InputMessage.d.ts

@@ -12,5 +12,5 @@ export declare const InputMessage: import("react").ForwardRefExoticComponent<Pic
     /** Formålet med meldingen. Påvirker styling. */
     messageType: InputMessageType;
 } & {
-    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined; /** Meldingen som vises til brukeren. */
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/InputMessage/InputMessage.js

@@ -22,7 +22,7 @@ var InputMessageWrapper = styled.div.withConfig({
   componentId: "sc-c954fy-0"
 })(["display:flex;width:fit-content;word-break:break-word;max-width:100%;", " svg{margin-top:", ";}"], function (_ref) {
   var messageType = _ref.messageType;
-  return messageType === 'tip' ? css(["background-color:", ";"], inputMessageTokens.message.tip.backgroundColor) : messageType === 'error' ? css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
+  return messageType === 'error' ? css(["color:", ";background-color:", ";padding:", ";gap:", ";"], inputMessageTokens.message.error.color, inputMessageTokens.message.error.backgroundColor, inputMessageTokens.message.error.padding, inputMessageTokens.message.error.gap) : '';
 }, inputMessageTokens.icon.marginTop);
 var InputMessage = /*#__PURE__*/forwardRef(function (props, ref) {
   var message = props.message,

package/package.json

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