@norges-domstoler/dds-components 9.2.0-beta.0 → 9.2.0

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

@@ -1,18 +1,13 @@
+import { StaticTypographyType } from '../Typography';
+export declare const typographyTypes: {
+    [k: string]: StaticTypographyType;
+};
 export declare const internalHeaderTokens: {
     navLink: {
         base: {
             color: string;
-            textDecoration: string;
             backgroundColor: string;
             padding: string;
-            font: {
-                lineHeight: any;
-                fontSize: string;
-                letterSpacing: any;
-                fontFamily: any;
-                fontWeight: any;
-                fontStyle: any;
-            };
         };
         hover: {
             color: string;

package/dist/components/InternalHeader/InternalHeader.tokens.js

@@ -2,16 +2,16 @@ import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var border = ddsBaseTokens.border,
     colors = ddsBaseTokens.colors,
-    spacing = ddsBaseTokens.spacing,
-    fontPackages = ddsBaseTokens.fontPackages;
+    spacing = ddsBaseTokens.spacing;
 var borderStyle = "".concat(border.BordersDdsBorderStyleLightStrokeWeight, " ").concat(border.BordersDdsBorderStyleLightStroke, " solid ");
+var typographyTypes = {
+  navLink: 'bodySans01'
+};
 var navLink = {
   base: {
     color: colors.DdsColorNeutralsGray9,
-    textDecoration: 'none',
     backgroundColor: colors.DdsColorNeutralsWhite,
-    padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX15),
-    font: fontPackages.body_sans_01.base
+    padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX15)
   },
   hover: {
     color: colors.DdsColorInteractiveDark
@@ -58,4 +58,4 @@ var internalHeaderTokens = {
   contextGroup: contextGroup
 };
 
-export { internalHeaderTokens };
+export { internalHeaderTokens, typographyTypes };

package/dist/components/InternalHeader/NavigationItem.js

@@ -7,13 +7,14 @@ import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import '../../helpers/styling/selection.js';
-import { internalHeaderTokens } from './InternalHeader.tokens.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
+import { internalHeaderTokens, typographyTypes } from './InternalHeader.tokens.js';
 
 var navLink = internalHeaderTokens.navLink;
 var Link = styled.a.withConfig({
   displayName: "NavigationItem__Link",
   componentId: "sc-1fua9kw-0"
-})(["display:flex;align-items:center;height:100%;box-sizing:border-box;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}color:", ";background-color:", ";padding:", ";text-decoration:", ";", ";&:hover{color:", ";}&:active{color:", ";}&:focus-visible,&.focus-visible{", ";}", ""], navLink.base.color, navLink.base.backgroundColor, navLink.base.padding, navLink.base.textDecoration, navLink.base.font, navLink.hover.color, navLink.active.color, focusVisible, function (_ref) {
+})(["display:flex;align-items:center;height:100%;box-sizing:border-box;text-decoration:none;@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s;}color:", ";background-color:", ";padding:", ";", " &:hover{color:", ";}&:active{color:", ";}&:focus-visible,&.focus-visible{", ";}", ""], navLink.base.color, navLink.base.backgroundColor, navLink.base.padding, getFontStyling(typographyTypes.navLink), navLink.hover.color, navLink.active.color, focusVisible, function (_ref) {
   var isCurrent = _ref.isCurrent;
   return isCurrent && css(["color:", ";background-color:", ";&:hover{color:", ";}"], navLink.current.color, navLink.current.backgroundColor, navLink.current.color);
 });

package/dist/components/List/List.d.ts

@@ -8,7 +8,7 @@ export declare type ListProps = BaseComponentPropsWithChildren<HTMLUListElement
     /**Spesifiserer typografi for listen. Komponenten arver i utgangspunktet fra forelder, men hvis forelder stiller ikke med relevant styling  må det velges `TypographyBodyType` som brukes i `<body>` ellers på siden. */
     typographyType?: ListTypographyType;
 }>;
-export declare const List: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLUListElement | HTMLOListElement>, "id" | "className"> & {
+export declare const List: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLUListElement | HTMLOListElement>, "className" | "id"> & {
     /**Spesifiserer om komponenten skal returnere `<ul />` (punktliste) eller `<ol />` (nummerert liste). */
     listType?: ListType | undefined;
     /**Spesifiserer typografi for listen. Komponenten arver i utgangspunktet fra forelder, men hvis forelder stiller ikke med relevant styling  må det velges `TypographyBodyType` som brukes i `<body>` ellers på siden. */

package/dist/components/List/List.js

@@ -2,10 +2,9 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import bullet from '../../assets/svg/bullets/jordskifterett_bullet1.svg.js';
+import bulletLvl1 from '../../assets/svg/bullets/jordskifterett_bullet1.svg.js';
 import bulletLvl2 from '../../assets/svg/bullets/lagmannsrett_bullet2.svg.js';
 import bulletLvl3 from '../../assets/svg/bullets/tingrett_bullet3.svg.js';
-import { listItemTokens } from './ListItem.tokens.js';
 import { listTokens } from './List.tokens.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../../helpers/styling/focusVisible.js';
@@ -13,18 +12,20 @@ import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import { selection } from '../../helpers/styling/selection.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
 
-var liTextPadding = "1em + ".concat(listItemTokens.bulletSpacing);
-var ulPaddingLeft = "".concat(listTokens.spaceLeft, " - (").concat(liTextPadding, ")");
+var list = listTokens.list,
+    listItem = listTokens.listItem,
+    bullet = listTokens.bullet;
 var StyledList = styled.ul.withConfig({
   displayName: "List__StyledList",
   componentId: "sc-1f1c7eb-0"
-})(["", " ul,ol{margin:0;}*::selection{", "}", " ", ""], listTokens.base, selection, function (_ref) {
+})(["margin:", ";color:", ";ul,ol{margin:0;}*::selection{", "}", " ", ""], list.base.margin, list.base.color, selection, function (_ref) {
   var typographyType = _ref.typographyType;
-  return typographyType && css(["", " ul,ol{", "}"], listTokens.sizes[typographyType], listTokens.sizes[typographyType]);
+  return typographyType === 'inherit' ? css(["font:inherit;"]) : css(["", ""], getFontStyling(typographyType));
 }, function (_ref2) {
   var listType = _ref2.listType;
-  return listType === 'unordered' ? css(["padding-left:", ";list-style:none;li{position:relative;padding-left:", ";&:before{content:'';display:inline-block;height:1em;width:1em;position:absolute;top:", ";left:0;background-size:contain;background-repeat:no-repeat;background-image:", ";}ul > li:before{background-image:", ";}ul > li > ul > li:before{background-image:", ";}}"], "calc(".concat(ulPaddingLeft, ")"), "calc(".concat(liTextPadding, ")"), "calc((".concat(listItemTokens.base.lineHeight, " / 2) - 0.5em )"), "url(\"".concat(bullet, "\")"), "url(\"".concat(bulletLvl2, "\")"), "url(\"".concat(bulletLvl3, "\")")) : css(["padding-left:", ";& > li > ol{list-style-type:lower-alpha;}& > li > ol > li > ol{list-style-type:lower-roman;}"], listTokens.spaceLeft);
+  return listType === 'unordered' ? css(["padding-left:", ";list-style:none;li{position:relative;padding-left:", ";&:before{content:'';display:inline-block;height:1em;width:1em;position:absolute;top:", ";left:0;background-size:contain;background-repeat:no-repeat;background-image:", ";}ul > li:before{background-image:", ";}ul > li > ul > li:before{background-image:", ";}}"], list.ul.paddingLeft, listItem.ul.paddingLeft, bullet.top, "url(\"".concat(bulletLvl1, "\")"), "url(\"".concat(bulletLvl2, "\")"), "url(\"".concat(bulletLvl3, "\")")) : css(["padding-left:", ";& > li > ol{list-style-type:lower-alpha;}& > li > ol > li > ol{list-style-type:lower-roman;}"], list.ol.paddingLeft);
 });
 var List = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$listType = props.listType,

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

@@ -1,12 +1,24 @@
-import { CSSObject } from 'styled-components';
 export declare const listTokens: {
-    base: CSSObject;
-    spaceLeft: string;
-    sizes: {
-        bodySans01: CSSObject;
-        bodySans02: CSSObject;
-        bodySans03: CSSObject;
-        bodySans04: CSSObject;
-        inherit: CSSObject;
+    list: {
+        base: {
+            margin: string;
+            color: string;
+        };
+        ol: {
+            paddingLeft: string;
+        };
+        ul: {
+            paddingLeft: string;
+        };
+    };
+    listItem: {
+        lineHeight: string;
+        ul: {
+            paddingLeft: string;
+        };
     };
+    bullet: {
+        top: string;
+    };
+    spaceLeft: string;
 };

package/dist/components/List/List.tokens.js

@@ -1,29 +1,35 @@
 import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
 
-var Spacing = ddsBaseTokens.spacing,
-    FontPackages = ddsBaseTokens.fontPackages;
+var spacing = ddsBaseTokens.spacing;
 var textDefault = ddsReferenceTokens.textDefault;
-var inheritBase = {
-  font: 'inherit'
+var ulLiPaddingLeft = "1em + ".concat(spacing.SizesDdsSpacingLocalX025);
+var ulPaddingLeft = "".concat(spacing.SizesDdsSpacingLocalX2, " - (").concat(ulLiPaddingLeft, ")");
+var list = {
+  base: {
+    margin: "".concat(spacing.SizesDdsSpacingLocalX1, " 0"),
+    color: textDefault.textColor
+  },
+  ol: {
+    paddingLeft: spacing.SizesDdsSpacingLocalX2
+  },
+  ul: {
+    paddingLeft: "calc(".concat(ulPaddingLeft, ")")
+  }
+};
+var listItem = {
+  lineHeight: '2.5em',
+  ul: {
+    paddingLeft: "calc(".concat(ulLiPaddingLeft, ")")
+  }
 };
-var bodySans01Base = Object.assign({}, FontPackages.body_sans_01.base);
-var bodySans02Base = Object.assign({}, FontPackages.body_sans_02.base);
-var bodySans03Base = Object.assign({}, FontPackages.body_sans_03.base);
-var bodySans04Base = Object.assign({}, FontPackages.body_sans_04.base);
-var base = {
-  margin: "".concat(Spacing.SizesDdsSpacingLocalX1, " 0"),
-  color: textDefault.textColor
+var bullet = {
+  top: "calc((".concat(listItem.lineHeight, " / 2) - 0.5em )")
 };
 var listTokens = {
-  base: base,
-  spaceLeft: Spacing.SizesDdsSpacingLocalX2,
-  sizes: {
-    bodySans01: bodySans01Base,
-    bodySans02: bodySans02Base,
-    bodySans03: bodySans03Base,
-    bodySans04: bodySans04Base,
-    inherit: inheritBase
-  }
+  list: list,
+  listItem: listItem,
+  bullet: bullet,
+  spaceLeft: spacing.SizesDdsSpacingLocalX2
 };
 
 export { listTokens };

package/dist/components/List/ListItem.js

@@ -2,12 +2,12 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { listItemTokens } from './ListItem.tokens.js';
+import { listTokens } from './List.tokens.js';
 
 var StyledListItem = styled.li.withConfig({
   displayName: "ListItem__StyledListItem",
   componentId: "sc-17s9l0b-0"
-})(["", ""], listItemTokens.base);
+})(["line-height:", ";"], listTokens.listItem.lineHeight);
 var ListItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);

package/dist/components/LocalMessage/LocalMessage.js

@@ -4,7 +4,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import styled, { css } from 'styled-components';
 import { Button } from '../Button/Button.js';
 import { forwardRef, useState } from 'react';
-import { localMessageTokens } from './LocalMessage.tokens.js';
+import { localMessageTokens, purposeVariants } from './LocalMessage.tokens.js';
 import { Icon } from '../Icon/Icon.js';
 import { Typography } from '../Typography/Typography/Typography.js';
 import '../../helpers/Backdrop/Backdrop.js';
@@ -24,19 +24,24 @@ import '../../helpers/styling/hover.js';
 import '../../helpers/styling/focus.js';
 import '../../helpers/styling/danger.js';
 import { selection } from '../../helpers/styling/selection.js';
+import { getFontStyling, defaultTypographyType } from '../Typography/Typography.utils.js';
 
+var defaultWidth = '400px';
+var container = localMessageTokens.container,
+    contentContainer = localMessageTokens.contentContainer,
+    topContainer = localMessageTokens.topContainer;
 var Container = styled.div.withConfig({
   displayName: "LocalMessage__Container",
   componentId: "sc-kmfp8w-0"
-})(["display:flex;flex-direction:", ";box-sizing:border-box;", ";*::selection{", "}", " width:", ";"], function (_ref) {
+})(["box-sizing:border-box;display:flex;flex-direction:", ";box-shadow:", ";border:", ";padding:", ";border-radius:", ";", " ", ";*::selection{", "}", " width:", ";"], function (_ref) {
   var layout = _ref.layout;
   return layout === 'vertical' ? 'column' : 'row';
-}, function (_ref2) {
+}, container.base.boxShadow, container.base.border, container.base.padding, container.base.borderRadius, getFontStyling(defaultTypographyType, true), function (_ref2) {
   var layout = _ref2.layout;
   return layout === 'horisontal' && css(["align-items:center;justify-content:space-between;"]);
 }, selection, function (_ref3) {
   var purpose = _ref3.purpose;
-  return purpose && css(["", " ", ""], localMessageTokens.container.base, localMessageTokens.container[purpose].base);
+  return purpose && css(["border-color:", ";background-color:", ";"], container.purpose[purpose].borderColor, container.purpose[purpose].backgroundColor);
 }, function (_ref4) {
   var width = _ref4.width;
   return width;
@@ -48,19 +53,19 @@ var MessageIconWrapper = styled(Icon).withConfig({
 var ContentContainer = styled.div.withConfig({
   displayName: "LocalMessage__ContentContainer",
   componentId: "sc-kmfp8w-2"
-})(["", " ", " ", ""], localMessageTokens.contentContainer.base, function (_ref5) {
-  var layout = _ref5.layout;
-  return layout === 'vertical' ? css(["", ""], localMessageTokens.contentContainer.vertical.base) : css(["display:flex;align-items:center;"]);
+})(["padding-top:", ";padding-right:", ";", ";"], contentContainer.paddingTop, function (_ref5) {
+  var closable = _ref5.closable;
+  return closable ? contentContainer.withClosable.paddingRight : contentContainer.paddingRight;
 }, function (_ref6) {
-  var closable = _ref6.closable;
-  return closable && css(["", ""], localMessageTokens.contentContainer.withClosable.base);
+  var layout = _ref6.layout;
+  return layout === 'vertical' ? css(["padding-bottom:", ";"], contentContainer.vertical.paddingBottom) : css(["display:flex;align-items:center;padding-bottom:", ";"], contentContainer.paddingBottom);
 });
 var TopContainer = styled.div.withConfig({
   displayName: "LocalMessage__TopContainer",
   componentId: "sc-kmfp8w-3"
-})(["width:100%;display:flex;justify-content:space-between;align-items:center;", " ", ""], localMessageTokens.topContainer.base, function (_ref7) {
+})(["width:100%;display:flex;justify-content:space-between;align-items:center;padding-top:", ";"], function (_ref7) {
   var closable = _ref7.closable;
-  return closable && css(["", ""], localMessageTokens.topContainer.withClosable.base);
+  return closable ? topContainer.withClosable.paddingTop : topContainer.paddingTop;
 });
 var LocalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
   var message = props.message,
@@ -69,7 +74,7 @@ var LocalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
       closable = props.closable,
       onClose = props.onClose,
       _props$width = props.width,
-      width = _props$width === void 0 ? localMessageTokens.container.defaultWidth : _props$width,
+      width = _props$width === void 0 ? defaultWidth : _props$width,
       _props$layout = props.layout,
       layout = _props$layout === void 0 ? 'horisontal' : _props$layout,
       children = props.children,
@@ -83,7 +88,6 @@ var LocalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
       isClosed = _useState2[0],
       setClosed = _useState2[1];
 
-  var buttonPurpose = localMessageTokens.button[purpose].purpose;
   var containerProps = Object.assign(Object.assign({}, getBaseHTMLProps(id, className, htmlProps, rest)), {
     purpose: purpose,
     width: width,
@@ -96,7 +100,7 @@ var LocalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   var messageIconWrapper = jsx(MessageIconWrapper, {
-    icon: localMessageTokens.icon[purpose].icon,
+    icon: purposeVariants[purpose].icon,
     color: localMessageTokens.icon[purpose].color
   });
 
@@ -108,7 +112,7 @@ var LocalMessage = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var closeButton = closable && jsx(Button, {
     icon: CloseIcon,
-    purpose: buttonPurpose,
+    purpose: purposeVariants[purpose].closeButtonPurpose,
     appearance: "borderless",
     onClick: function onClick() {
       setClosed(true);

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

@@ -1,89 +1,85 @@
-import { CSSObject } from 'styled-components';
-import { Property } from 'csstype';
-import { ErrorIcon, TipIcon, InfoIcon, WarningIcon, CheckCircledIcon } from '../../icons/tsx';
+import { SvgIcon } from '../../icons/utils';
+import { ButtonPurpose } from '../Button';
+import { StaticTypographyType } from '../Typography';
+import { LocalMessagePurpose } from './LocalMessage';
+export declare const typographyType: StaticTypographyType;
+export declare const purposeVariants: {
+    [k in LocalMessagePurpose]: {
+        icon: SvgIcon;
+        closeButtonPurpose: ButtonPurpose;
+    };
+};
 export declare const localMessageTokens: {
     container: {
-        base: CSSObject;
-        defaultWidth: Property.Width<string>;
-        info: {
-            base: CSSObject;
-        };
-        danger: {
-            base: CSSObject;
-        };
-        warning: {
-            base: CSSObject;
-        };
-        success: {
-            base: CSSObject;
-        };
-        tips: {
-            base: CSSObject;
-        };
-        confidential: {
-            base: CSSObject;
+        base: {
+            boxShadow: string;
+            borderRadius: string;
+            border: string;
+            padding: string;
+        };
+        purpose: {
+            info: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            warning: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            danger: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            success: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            tips: {
+                borderColor: string;
+                backgroundColor: string;
+            };
+            confidential: {
+                borderColor: string;
+                backgroundColor: string;
+            };
         };
     };
     contentContainer: {
-        base: CSSObject;
+        paddingRight: string;
+        paddingTop: string;
+        paddingBottom: string;
         withClosable: {
-            base: CSSObject;
+            paddingRight: string;
         };
         vertical: {
-            base: CSSObject;
+            paddingBottom: string;
         };
     };
     topContainer: {
-        base: CSSObject;
+        paddingTop: string;
         withClosable: {
-            base: CSSObject;
+            paddingTop: string;
         };
     };
     icon: {
         marginRight: string;
         info: {
-            icon: typeof InfoIcon;
             color: string;
         };
         danger: {
-            icon: typeof ErrorIcon;
             color: string;
         };
         warning: {
-            icon: typeof WarningIcon;
             color: string;
         };
         success: {
-            icon: typeof CheckCircledIcon;
             color: string;
         };
         tips: {
-            icon: typeof TipIcon;
             color: string;
         };
         confidential: {
-            icon: typeof ErrorIcon;
             color: string;
         };
     };
-    button: {
-        info: {
-            purpose: string;
-        };
-        danger: {
-            purpose: string;
-        };
-        warning: {
-            purpose: string;
-        };
-        success: {
-            purpose: string;
-        };
-        confidential: {
-            purpose: string;
-        };
-        tips: {
-            purpose: string;
-        };
-    };
 };