@norges-domstoler/dds-components 10.5.0 → 10.7.0

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

@@ -8,4 +8,5 @@ export declare const Overview: () => JSX.Element;
 export declare const Default: (args: CardProps) => JSX.Element;
 export declare const Accordion: (args: ExpandableCardProps) => JSX.Element;
 export declare const AccordionControlled: (args: ExpandableCardProps) => JSX.Element;
+export declare const AccordionCustom: (args: ExpandableCardProps) => JSX.Element;
 export declare const Examples: (args: CardProps) => JSX.Element;

package/dist/cjs/components/Card/CardAccordion/CardAccordionBody.d.ts

@@ -7,6 +7,8 @@ export type CardAccordionBodyProps = BaseComponentPropsWithChildren<HTMLDivEleme
     headerId?: string;
     /**Overskriver default padding på toppen. Brukes når barn har spacing på toppen, f.eks. en overskrift. */
     paddingTop?: Property.PaddingTop<string>;
+    /**Overskriver default padding. */
+    padding?: Property.Padding<string>;
 }>;
 export declare const CardAccordionBody: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller komponenten om den skal utvides.  */
@@ -15,6 +17,8 @@ export declare const CardAccordionBody: import("react").ForwardRefExoticComponen
     headerId?: string | undefined;
     /**Overskriver default padding på toppen. Brukes når barn har spacing på toppen, f.eks. en overskrift. */
     paddingTop?: Property.PaddingTop<string> | undefined;
+    /**Overskriver default padding. */
+    padding?: Property.Padding<string> | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

package/dist/cjs/components/Card/CardAccordion/CardAccordionHeader.d.ts

@@ -1,5 +1,7 @@
 import { ButtonHTMLAttributes } from 'react';
 import { BaseComponentPropsWithChildren } from '../../../types';
+import { Property } from 'csstype';
+import { StaticTypographyType } from '../../Typography';
 export type CardAccordionHeaderProps = BaseComponentPropsWithChildren<HTMLButtonElement, {
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller body er utvidet.  */
     isExpanded?: boolean;
@@ -7,6 +9,12 @@ export type CardAccordionHeaderProps = BaseComponentPropsWithChildren<HTMLButton
     toggleExpanded?: () => void;
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller `id` til `<CardAccordionBody />`.  */
     bodyId?: string;
+    /**Overskriver default padding. */
+    padding?: Property.Padding<string>;
+    /**Overskriver default teksttype. */
+    typographyType?: StaticTypographyType;
+    /**Angir om teksten skal være i "bold"-format. */
+    bold?: boolean;
 }, ButtonHTMLAttributes<HTMLButtonElement>>;
 export declare const CardAccordionHeader: import("react").ForwardRefExoticComponent<Pick<ButtonHTMLAttributes<HTMLButtonElement>, "className" | "id"> & {
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller body er utvidet.  */
@@ -15,6 +23,12 @@ export declare const CardAccordionHeader: import("react").ForwardRefExoticCompon
     toggleExpanded?: (() => void) | undefined;
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller `id` til `<CardAccordionBody />`.  */
     bodyId?: string | undefined;
+    /**Overskriver default padding. */
+    padding?: Property.Padding<string> | undefined;
+    /**Overskriver default teksttype. */
+    typographyType?: StaticTypographyType | undefined;
+    /**Angir om teksten skal være i "bold"-format. */
+    bold?: boolean | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

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

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+export type EmptyContentProps = {
+    title?: string;
+    message: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function EmptyContent({ title, message, ...rest }: EmptyContentProps): JSX.Element;

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

@@ -0,0 +1,16 @@
+import { EmptyContent, EmptyContentProps } from './EmptyContent';
+declare const _default: {
+    title: string;
+    component: typeof EmptyContent;
+    argTypes: {
+        title: {
+            name: string;
+            type: {
+                name: string;
+                required: boolean;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: EmptyContentProps) => JSX.Element;

package/dist/cjs/index.js

@@ -7445,10 +7445,22 @@ var ContentWrapper = styled__default.default.div.withConfig({
   displayName: "CardAccordionHeader__ContentWrapper",
   componentId: "sc-1qs6bkj-0"
 })(["text-align:left;"]);
+function getPadding$1(props) {
+  var padding = props.padding;
+  return padding || header.padding;
+}
+function getTypographyType(props) {
+  var typographyType = props.typographyType;
+  return typographyType || typographyTypes$3.header;
+}
 var HeaderContainer$2 = styled__default.default.div.withConfig({
   displayName: "CardAccordionHeader__HeaderContainer",
   componentId: "sc-1qs6bkj-1"
-})(["display:flex;justify-content:space-between;align-items:center;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}padding:", ";", ""], header.padding, getFontStyling(typographyTypes$3.header));
+})(["display:flex;justify-content:space-between;align-items:center;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}padding:", ";", " ", ""], getPadding$1, function (props) {
+  return getFontStyling(getTypographyType(props));
+}, function (props) {
+  return props.bold && styled.css(["font-weight:600;"]);
+});
 var HeaderWrapper = styled__default.default.button.withConfig({
   displayName: "CardAccordionHeader__HeaderWrapper",
   componentId: "sc-1qs6bkj-2"
@@ -7466,7 +7478,10 @@ var CardAccordionHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["children", "isExpanded", "toggleExpanded", "bodyId", "id", "className", "htmlProps"]);
+    padding = props.padding,
+    typographyType = props.typographyType,
+    bold = props.bold,
+    rest = tslib.__rest(props, ["children", "isExpanded", "toggleExpanded", "bodyId", "id", "className", "htmlProps", "padding", "typographyType", "bold"]);
   var handleClick = function handleClick() {
     if (toggleExpanded) {
       toggleExpanded();
@@ -7484,13 +7499,17 @@ var CardAccordionHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     height: cardAccordionTokens.chevron.height
   };
   return jsxRuntime.jsx(HeaderWrapper, Object.assign({}, headerWrapperProps, {
-    children: jsxRuntime.jsxs(HeaderContainer$2, {
-      children: [jsxRuntime.jsxs(ContentWrapper, {
-        children: [" ", children, " "]
+    children: jsxRuntime.jsxs(HeaderContainer$2, Object.assign({
+      typographyType: typographyType,
+      padding: padding,
+      bold: bold
+    }, {
+      children: [jsxRuntime.jsx(ContentWrapper, {
+        children: children
       }), jsxRuntime.jsx(ChevronWrapper, {
         children: jsxRuntime.jsx(AnimatedChevronUpDown, Object.assign({}, chevronProps))
       })]
-    })
+    }))
   }));
 });
 
@@ -7508,13 +7527,17 @@ var useIsMounted = function useIsMounted() {
 };
 
 var expandingAnimation = styled.css(["@media (prefers-reduced-motion:no-preference){transition:padding 0.2s,visibility 0.3s,max-height 0.2s cubic-bezier(0.4,0,0.2,1);}"]);
+function getPadding(props) {
+  var padding = props.padding;
+  return padding || cardAccordionTokens.body.padding;
+}
 var Body = styled__default.default.div.withConfig({
   displayName: "CardAccordionBody__Body",
   componentId: "sc-igsnpx-0"
 })(["@media (prefers-reduced-motion:no-preference){", "}padding:", ";", " ", " ", ""], function (_ref) {
   var animate = _ref.animate;
   return animate && expandingAnimation;
-}, cardAccordionTokens.body.padding, getFontStyling(typographyTypes$3.body), function (_ref2) {
+}, getPadding, getFontStyling(typographyTypes$3.body), function (_ref2) {
   var paddingTop = _ref2.paddingTop;
   return paddingTop && styled.css(["padding-top:", ";"], paddingTop);
 }, function (_ref3) {

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

@@ -8,4 +8,5 @@ export declare const Overview: () => JSX.Element;
 export declare const Default: (args: CardProps) => JSX.Element;
 export declare const Accordion: (args: ExpandableCardProps) => JSX.Element;
 export declare const AccordionControlled: (args: ExpandableCardProps) => JSX.Element;
+export declare const AccordionCustom: (args: ExpandableCardProps) => JSX.Element;
 export declare const Examples: (args: CardProps) => JSX.Element;

package/dist/components/Card/CardAccordion/CardAccordionBody.d.ts

@@ -7,6 +7,8 @@ export type CardAccordionBodyProps = BaseComponentPropsWithChildren<HTMLDivEleme
     headerId?: string;
     /**Overskriver default padding på toppen. Brukes når barn har spacing på toppen, f.eks. en overskrift. */
     paddingTop?: Property.PaddingTop<string>;
+    /**Overskriver default padding. */
+    padding?: Property.Padding<string>;
 }>;
 export declare const CardAccordionBody: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & {
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller komponenten om den skal utvides.  */
@@ -15,6 +17,8 @@ export declare const CardAccordionBody: import("react").ForwardRefExoticComponen
     headerId?: string | undefined;
     /**Overskriver default padding på toppen. Brukes når barn har spacing på toppen, f.eks. en overskrift. */
     paddingTop?: Property.PaddingTop<string> | undefined;
+    /**Overskriver default padding. */
+    padding?: Property.Padding<string> | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

package/dist/components/Card/CardAccordion/CardAccordionBody.js

@@ -3,19 +3,23 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useState, useLayoutEffect, useEffect } from 'react';
 import styled, { css } from 'styled-components';
-import { cardAccordionTokens, typographyTypes } from './CardAccordion.tokens.js';
-import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
 import useIsMounted from '../../../hooks/useIsMounted.js';
+import { getBaseHTMLProps } from '../../../types/BaseComponentProps.js';
 import { getFontStyling } from '../../Typography/Typography.utils.js';
+import { cardAccordionTokens, typographyTypes } from './CardAccordion.tokens.js';
 
 var expandingAnimation = css(["@media (prefers-reduced-motion:no-preference){transition:padding 0.2s,visibility 0.3s,max-height 0.2s cubic-bezier(0.4,0,0.2,1);}"]);
+function getPadding(props) {
+  var padding = props.padding;
+  return padding || cardAccordionTokens.body.padding;
+}
 var Body = styled.div.withConfig({
   displayName: "CardAccordionBody__Body",
   componentId: "sc-igsnpx-0"
 })(["@media (prefers-reduced-motion:no-preference){", "}padding:", ";", " ", " ", ""], function (_ref) {
   var animate = _ref.animate;
   return animate && expandingAnimation;
-}, cardAccordionTokens.body.padding, getFontStyling(typographyTypes.body), function (_ref2) {
+}, getPadding, getFontStyling(typographyTypes.body), function (_ref2) {
   var paddingTop = _ref2.paddingTop;
   return paddingTop && css(["padding-top:", ";"], paddingTop);
 }, function (_ref3) {

package/dist/components/Card/CardAccordion/CardAccordionHeader.d.ts

@@ -1,5 +1,7 @@
 import { ButtonHTMLAttributes } from 'react';
 import { BaseComponentPropsWithChildren } from '../../../types';
+import { Property } from 'csstype';
+import { StaticTypographyType } from '../../Typography';
 export type CardAccordionHeaderProps = BaseComponentPropsWithChildren<HTMLButtonElement, {
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller body er utvidet.  */
     isExpanded?: boolean;
@@ -7,6 +9,12 @@ export type CardAccordionHeaderProps = BaseComponentPropsWithChildren<HTMLButton
     toggleExpanded?: () => void;
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller `id` til `<CardAccordionBody />`.  */
     bodyId?: string;
+    /**Overskriver default padding. */
+    padding?: Property.Padding<string>;
+    /**Overskriver default teksttype. */
+    typographyType?: StaticTypographyType;
+    /**Angir om teksten skal være i "bold"-format. */
+    bold?: boolean;
 }, ButtonHTMLAttributes<HTMLButtonElement>>;
 export declare const CardAccordionHeader: import("react").ForwardRefExoticComponent<Pick<ButtonHTMLAttributes<HTMLButtonElement>, "className" | "id"> & {
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller body er utvidet.  */
@@ -15,6 +23,12 @@ export declare const CardAccordionHeader: import("react").ForwardRefExoticCompon
     toggleExpanded?: (() => void) | undefined;
     /** **OBS!** denne propen blir satt automatisk av forelder. Forteller `id` til `<CardAccordionBody />`.  */
     bodyId?: string | undefined;
+    /**Overskriver default padding. */
+    padding?: Property.Padding<string> | undefined;
+    /**Overskriver default teksttype. */
+    typographyType?: StaticTypographyType | undefined;
+    /**Angir om teksten skal være i "bold"-format. */
+    bold?: boolean | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

package/dist/components/Card/CardAccordion/CardAccordionHeader.js

@@ -1,7 +1,7 @@
 import { __rest } from 'tslib';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { cardAccordionTokens, typographyTypes } from './CardAccordion.tokens.js';
 import '../../../helpers/Backdrop/Backdrop.js';
 import { AnimatedChevronUpDown } from '../../../helpers/Chevron/AnimatedChevronUpDown.js';
@@ -27,10 +27,22 @@ var ContentWrapper = styled.div.withConfig({
   displayName: "CardAccordionHeader__ContentWrapper",
   componentId: "sc-1qs6bkj-0"
 })(["text-align:left;"]);
+function getPadding(props) {
+  var padding = props.padding;
+  return padding || header.padding;
+}
+function getTypographyType(props) {
+  var typographyType = props.typographyType;
+  return typographyType || typographyTypes.header;
+}
 var HeaderContainer = styled.div.withConfig({
   displayName: "CardAccordionHeader__HeaderContainer",
   componentId: "sc-1qs6bkj-1"
-})(["display:flex;justify-content:space-between;align-items:center;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}padding:", ";", ""], header.padding, getFontStyling(typographyTypes.header));
+})(["display:flex;justify-content:space-between;align-items:center;@media (prefers-reduced-motion:no-preference){transition:box-shadow 0.2s;}padding:", ";", " ", ""], getPadding, function (props) {
+  return getFontStyling(getTypographyType(props));
+}, function (props) {
+  return props.bold && css(["font-weight:600;"]);
+});
 var HeaderWrapper = styled.button.withConfig({
   displayName: "CardAccordionHeader__HeaderWrapper",
   componentId: "sc-1qs6bkj-2"
@@ -48,7 +60,10 @@ var CardAccordionHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     id = props.id,
     className = props.className,
     htmlProps = props.htmlProps,
-    rest = __rest(props, ["children", "isExpanded", "toggleExpanded", "bodyId", "id", "className", "htmlProps"]);
+    padding = props.padding,
+    typographyType = props.typographyType,
+    bold = props.bold,
+    rest = __rest(props, ["children", "isExpanded", "toggleExpanded", "bodyId", "id", "className", "htmlProps", "padding", "typographyType", "bold"]);
   var handleClick = function handleClick() {
     if (toggleExpanded) {
       toggleExpanded();
@@ -66,13 +81,17 @@ var CardAccordionHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     height: cardAccordionTokens.chevron.height
   };
   return jsx(HeaderWrapper, Object.assign({}, headerWrapperProps, {
-    children: jsxs(HeaderContainer, {
-      children: [jsxs(ContentWrapper, {
-        children: [" ", children, " "]
+    children: jsxs(HeaderContainer, Object.assign({
+      typographyType: typographyType,
+      padding: padding,
+      bold: bold
+    }, {
+      children: [jsx(ContentWrapper, {
+        children: children
       }), jsx(ChevronWrapper, {
         children: jsx(AnimatedChevronUpDown, Object.assign({}, chevronProps))
       })]
-    })
+    }))
   }));
 });
 

package/dist/components/EmptyContent/EmptyContent.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+export type EmptyContentProps = {
+    title?: string;
+    message: string;
+} & HTMLAttributes<HTMLDivElement>;
+export declare function EmptyContent({ title, message, ...rest }: EmptyContentProps): JSX.Element;

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

@@ -0,0 +1,16 @@
+import { EmptyContent, EmptyContentProps } from './EmptyContent';
+declare const _default: {
+    title: string;
+    component: typeof EmptyContent;
+    argTypes: {
+        title: {
+            name: string;
+            type: {
+                name: string;
+                required: boolean;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Overview: (args: EmptyContentProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "10.5.0",
+  "version": "10.7.0",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -67,7 +67,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^29.0.3",
+    "@types/jest": "^29.4.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.26",
@@ -81,7 +81,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.8",
     "eslint-plugin-storybook": "^0.6.4",
-    "jest": "^29.0.3",
+    "jest": "^29.4.2",
     "jest-environment-jsdom": "^29.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",