@norges-domstoler/dds-components 10.4.1 → 10.6.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/icons/tsx/doubleChevronLeft.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../utils/propTypes';
+export declare function DoubleChevronLeftIcon(props: SvgProps): JSX.Element;

package/dist/cjs/icons/tsx/doubleChevronRight.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../utils/propTypes';
+export declare function DoubleChevronRightIcon(props: SvgProps): JSX.Element;

package/dist/cjs/icons/tsx/index.d.ts

@@ -37,6 +37,8 @@ export * from './copy';
 export * from './court';
 export * from './dateRange';
 export * from './deaths';
+export * from './doubleChevronLeft';
+export * from './doubleChevronRight';
 export * from './download';
 export * from './downloadDone';
 export * from './dragHandle';

package/dist/cjs/index.js

@@ -1262,6 +1262,22 @@ function DeathsIcon(props) {
   }));
 }
 
+function DoubleChevronLeftIcon(props) {
+  return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsxRuntime.jsx("path", {
+      d: "M 18.414,7.41398L 17,6L 11,12L 17,18L 18.414,16.586L 13.828,12L 18.414,7.41398 Z M 12.414,7.41398L 11,6L 5.00001,12L 11,18L 12.414,16.586L 7.82801,12L 12.414,7.41398 Z "
+    })
+  }));
+}
+
+function DoubleChevronRightIcon(props) {
+  return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsxRuntime.jsx("path", {
+      d: "M 5.586,7.41398L 7,6L 13,12L 7,18L 5.586,16.586L 10.172,12L 5.586,7.41398 Z M 11.586,7.41399L 13,6.00001L 19,12L 13,18L 11.586,16.586L 16.172,12L 11.586,7.41399 Z "
+    })
+  }));
+}
+
 function DownloadIcon(props) {
   return jsxRuntime.jsx(SvgWrapper, Object.assign({}, props, {
     children: jsxRuntime.jsx("path", {
@@ -7429,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"
@@ -7450,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();
@@ -7468,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))
       })]
-    })
+    }))
   }));
 });
 
@@ -7492,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) {
@@ -11548,6 +11587,8 @@ exports.DescriptionListDesc = DescriptionListDesc;
 exports.DescriptionListGroup = DescriptionListGroup;
 exports.DescriptionListTerm = DescriptionListTerm;
 exports.Divider = Divider;
+exports.DoubleChevronLeftIcon = DoubleChevronLeftIcon;
+exports.DoubleChevronRightIcon = DoubleChevronRightIcon;
 exports.DownloadDoneIcon = DownloadDoneIcon;
 exports.DownloadIcon = DownloadIcon;
 exports.DragHandleIcon = DragHandleIcon;

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/icons/tsx/doubleChevronLeft.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../utils/propTypes';
+export declare function DoubleChevronLeftIcon(props: SvgProps): JSX.Element;

package/dist/icons/tsx/doubleChevronLeft.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { SvgWrapper } from '../utils/SvgWrapper.js';
+
+function DoubleChevronLeftIcon(props) {
+  return jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsx("path", {
+      d: "M 18.414,7.41398L 17,6L 11,12L 17,18L 18.414,16.586L 13.828,12L 18.414,7.41398 Z M 12.414,7.41398L 11,6L 5.00001,12L 11,18L 12.414,16.586L 7.82801,12L 12.414,7.41398 Z "
+    })
+  }));
+}
+
+export { DoubleChevronLeftIcon };

package/dist/icons/tsx/doubleChevronRight.d.ts

@@ -0,0 +1,2 @@
+import { SvgProps } from '../utils/propTypes';
+export declare function DoubleChevronRightIcon(props: SvgProps): JSX.Element;

package/dist/icons/tsx/doubleChevronRight.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { SvgWrapper } from '../utils/SvgWrapper.js';
+
+function DoubleChevronRightIcon(props) {
+  return jsx(SvgWrapper, Object.assign({}, props, {
+    children: jsx("path", {
+      d: "M 5.586,7.41398L 7,6L 13,12L 7,18L 5.586,16.586L 10.172,12L 5.586,7.41398 Z M 11.586,7.41399L 13,6.00001L 19,12L 13,18L 11.586,16.586L 16.172,12L 11.586,7.41399 Z "
+    })
+  }));
+}
+
+export { DoubleChevronRightIcon };

package/dist/icons/tsx/index.d.ts

@@ -37,6 +37,8 @@ export * from './copy';
 export * from './court';
 export * from './dateRange';
 export * from './deaths';
+export * from './doubleChevronLeft';
+export * from './doubleChevronRight';
 export * from './download';
 export * from './downloadDone';
 export * from './dragHandle';

package/dist/index.js

@@ -100,6 +100,8 @@ export { CopyIcon } from './icons/tsx/copy.js';
 export { CourtIcon } from './icons/tsx/court.js';
 export { DateRangeIcon } from './icons/tsx/dateRange.js';
 export { DeathsIcon } from './icons/tsx/deaths.js';
+export { DoubleChevronLeftIcon } from './icons/tsx/doubleChevronLeft.js';
+export { DoubleChevronRightIcon } from './icons/tsx/doubleChevronRight.js';
 export { DownloadIcon } from './icons/tsx/download.js';
 export { DownloadDoneIcon } from './icons/tsx/downloadDone.js';
 export { DragHandleIcon } from './icons/tsx/dragHandle.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "10.4.1",
+  "version": "10.6.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",