@norges-domstoler/dds-components 13.2.0 → 13.3.0

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

@@ -41,6 +41,7 @@ export declare const Default: (args: TableProps) => JSX.Element;
 export declare const WithDividers: (args: TableProps) => JSX.Element;
 export declare const Focusable: (args: TableProps) => JSX.Element;
 export declare const Compact: (args: TableProps) => JSX.Element;
+export declare const ExtraCompact: (args: TableProps) => JSX.Element;
 export declare const StickyHeader: (args: TableProps) => JSX.Element;
 export declare const Hoverable: (args: TableProps) => JSX.Element;
 export declare const WithButtonAndIcons: (args: TableProps) => JSX.Element;

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

@@ -24,6 +24,12 @@ export declare const tableTokens: {
                 borderBottom: string;
             };
         };
+        head: {
+            extraCompact: {
+                backgroundColor: string;
+                fontSize: string;
+            };
+        };
     };
     cell: {
         density: {
@@ -33,6 +39,9 @@ export declare const tableTokens: {
             compact: {
                 padding: string;
             };
+            extraCompact: {
+                padding: string;
+            };
         };
         head: {
             backgroundColor: string;

package/dist/cjs/components/Table/Table.types.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type TableDensity = 'normal' | 'compact';
+export type TableDensity = 'normal' | 'compact' | 'extraCompact';
 export type TableProps = {
     /**Spesifiserer hvor romslige cellene i tabellen skal være. */
     density?: TableDensity;

package/dist/cjs/index.js

@@ -2228,11 +2228,11 @@ var renderInputMessage = function renderInputMessage(tip, tipId, errorMessage, e
 
 var colors$r = ddsDesignTokens.ddsBaseTokens.colors,
   borderRadius$9 = ddsDesignTokens.ddsBaseTokens.borderRadius,
-  font = ddsDesignTokens.ddsBaseTokens.font;
+  font$1 = ddsDesignTokens.ddsBaseTokens.font;
 var paper = {
   backgroundColor: colors$r.DdsColorNeutralsWhite,
   borderRadius: borderRadius$9.RadiiDdsBorderRadius1Radius,
-  fontFamily: font.DdsFontBodySans01FontFamily
+  fontFamily: font$1.DdsFontBodySans01FontFamily
 };
 var paperTokens = {
   paper: paper
@@ -6370,7 +6370,8 @@ var Search = Search$1;
 Search.AutocompleteWrapper = SearchAutocompleteWrapper;
 Search.Suggestions = SearchSuggestions;
 
-var colors$h = ddsDesignTokens.ddsBaseTokens.colors,
+var font = ddsDesignTokens.ddsBaseTokens.font,
+  colors$h = ddsDesignTokens.ddsBaseTokens.colors,
   border$7 = ddsDesignTokens.ddsBaseTokens.border,
   spacing$q = ddsDesignTokens.ddsBaseTokens.spacing,
   iconSizes$2 = ddsDesignTokens.ddsBaseTokens.iconSizes,
@@ -6399,6 +6400,12 @@ var row$2 = {
     withDividers: {
       borderBottom: "1px solid ".concat(colors$h.DdsColorNeutralsGray4)
     }
+  },
+  head: {
+    extraCompact: {
+      backgroundColor: colors$h.DdsColorNeutralsWhite,
+      fontSize: font.DdsFontBodySans01FontSize
+    }
   }
 };
 var cell$3 = {
@@ -6408,6 +6415,9 @@ var cell$3 = {
     },
     compact: {
       padding: "".concat(spacing$q.SizesDdsSpacingLocalX075)
+    },
+    extraCompact: {
+      padding: "".concat(spacing$q.SizesDdsSpacingLocalX025, " ").concat(spacing$q.SizesDdsSpacingLocalX05)
     }
   },
   head: {
@@ -6442,14 +6452,17 @@ var cell$2 = tableTokens.cell,
 var StyledTable$1 = styled__default.default.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "sc-bw0w0a-0"
-})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", " ", ""], selection, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
+})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", " ", " ", ""], selection, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
   var density = _ref.density;
   return styled.css(["td,th{padding:", ";}"], cell$2.density[density].padding);
 }, function (_ref2) {
-  var stickyHeader = _ref2.stickyHeader;
-  return stickyHeader && styled.css(["tr[type='head']{th[type='head']{position:sticky;top:0;z-index:50;}}"]);
+  var density = _ref2.density;
+  return density === 'extraCompact' && styled.css(["th{background-color:", ";font-size:", ";}tr[type='body']{&:nth-of-type(even){background-color:", ";}&:nth-of-type(odd){background-color:", ";}}"], row$1.head.extraCompact.backgroundColor, row$1.head.extraCompact.fontSize, row$1.body.odd.backgroundColor, row$1.body.even.backgroundColor);
 }, function (_ref3) {
-  var withDividers = _ref3.withDividers;
+  var stickyHeader = _ref3.stickyHeader;
+  return stickyHeader && styled.css(["tr[type='head']{th[type='head']{position:sticky;top:0;z-index:50;}}"]);
+}, function (_ref4) {
+  var withDividers = _ref4.withDividers;
   return withDividers && styled.css(["tr[type='body']{border-bottom:", ";}"], row$1.body.withDividers.borderBottom);
 });
 var Table$1 = /*#__PURE__*/React.forwardRef(function (_a, ref) {

package/dist/components/Table/Table.js

@@ -17,14 +17,17 @@ var cell = tableTokens.cell,
 var StyledTable = styled.table.withConfig({
   displayName: "Table__StyledTable",
   componentId: "sc-bw0w0a-0"
-})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", " ", ""], selection, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
+})(["border-spacing:0;border-collapse:collapse;*::selection{", "}", " ", " ", " ", " ", " ", ""], selection, scrollbarStyling.webkit, scrollbarStyling.firefox, function (_ref) {
   var density = _ref.density;
   return css(["td,th{padding:", ";}"], cell.density[density].padding);
 }, function (_ref2) {
-  var stickyHeader = _ref2.stickyHeader;
-  return stickyHeader && css(["tr[type='head']{th[type='head']{position:sticky;top:0;z-index:50;}}"]);
+  var density = _ref2.density;
+  return density === 'extraCompact' && css(["th{background-color:", ";font-size:", ";}tr[type='body']{&:nth-of-type(even){background-color:", ";}&:nth-of-type(odd){background-color:", ";}}"], row.head.extraCompact.backgroundColor, row.head.extraCompact.fontSize, row.body.odd.backgroundColor, row.body.even.backgroundColor);
 }, function (_ref3) {
-  var withDividers = _ref3.withDividers;
+  var stickyHeader = _ref3.stickyHeader;
+  return stickyHeader && css(["tr[type='head']{th[type='head']{position:sticky;top:0;z-index:50;}}"]);
+}, function (_ref4) {
+  var withDividers = _ref4.withDividers;
   return withDividers && css(["tr[type='body']{border-bottom:", ";}"], row.body.withDividers.borderBottom);
 });
 var Table = /*#__PURE__*/forwardRef(function (_a, ref) {

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

@@ -41,6 +41,7 @@ export declare const Default: (args: TableProps) => JSX.Element;
 export declare const WithDividers: (args: TableProps) => JSX.Element;
 export declare const Focusable: (args: TableProps) => JSX.Element;
 export declare const Compact: (args: TableProps) => JSX.Element;
+export declare const ExtraCompact: (args: TableProps) => JSX.Element;
 export declare const StickyHeader: (args: TableProps) => JSX.Element;
 export declare const Hoverable: (args: TableProps) => JSX.Element;
 export declare const WithButtonAndIcons: (args: TableProps) => JSX.Element;

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

@@ -24,6 +24,12 @@ export declare const tableTokens: {
                 borderBottom: string;
             };
         };
+        head: {
+            extraCompact: {
+                backgroundColor: string;
+                fontSize: string;
+            };
+        };
     };
     cell: {
         density: {
@@ -33,6 +39,9 @@ export declare const tableTokens: {
             compact: {
                 padding: string;
             };
+            extraCompact: {
+                padding: string;
+            };
         };
         head: {
             backgroundColor: string;

package/dist/components/Table/Table.tokens.js

@@ -1,6 +1,7 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
-var colors = ddsBaseTokens.colors,
+var font = ddsBaseTokens.font,
+  colors = ddsBaseTokens.colors,
   border = ddsBaseTokens.border,
   spacing = ddsBaseTokens.spacing,
   iconSizes = ddsBaseTokens.iconSizes,
@@ -29,6 +30,12 @@ var row = {
     withDividers: {
       borderBottom: "1px solid ".concat(colors.DdsColorNeutralsGray4)
     }
+  },
+  head: {
+    extraCompact: {
+      backgroundColor: colors.DdsColorNeutralsWhite,
+      fontSize: font.DdsFontBodySans01FontSize
+    }
   }
 };
 var cell = {
@@ -38,6 +45,9 @@ var cell = {
     },
     compact: {
       padding: "".concat(spacing.SizesDdsSpacingLocalX075)
+    },
+    extraCompact: {
+      padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05)
     }
   },
   head: {

package/dist/components/Table/Table.types.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type TableDensity = 'normal' | 'compact';
+export type TableDensity = 'normal' | 'compact' | 'extraCompact';
 export type TableProps = {
     /**Spesifiserer hvor romslige cellene i tabellen skal være. */
     density?: TableDensity;

package/package.json

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