@norges-domstoler/dds-components 10.0.2 → 10.1.1

package/dist/components/FormGenerator/FormGenerator.js

@@ -0,0 +1,239 @@
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, createElement } from 'react';
+import { Button } from '../Button/Button.js';
+import { Card } from '../Card/Card.js';
+import '../Card/CardAccordion/CardAccordion.js';
+import '../Card/CardAccordion/CardAccordionHeader.js';
+import '../Card/CardAccordion/CardAccordionBody.js';
+import { Checkbox } from '../Checkbox/Checkbox.js';
+import { CheckboxGroup } from '../Checkbox/CheckboxGroup.js';
+import { Datepicker } from '../Datepicker/Datepicker.js';
+import { Divider } from '../Divider/Divider.js';
+import { GlobalMessage } from '../GlobalMessage/GlobalMessage.js';
+import { InputMessage } from '../InputMessage/InputMessage.js';
+import { List } from '../List/List.js';
+import { ListItem } from '../List/ListItem.js';
+import { LocalMessage } from '../LocalMessage/LocalMessage.js';
+import { RadioButton } from '../RadioButton/RadioButton.js';
+import { RadioButtonGroup } from '../RadioButton/RadioButtonGroup.js';
+import { Select } from '../Select/Select.js';
+import { Spinner } from '../Spinner/Spinner.js';
+import { TextInput } from '../TextInput/TextInput.js';
+import { ToggleButton } from '../ToggleButton/ToggleButton.js';
+import { ToggleButtonGroup } from '../ToggleButton/ToggleButtonGroup.js';
+import { Typography } from '../Typography/Typography/Typography.js';
+import { Label } from '../Typography/Label/Label.js';
+import { Paragraph } from '../Typography/Paragraph/Paragraph.js';
+import { Heading } from '../Typography/Heading/Heading.js';
+import { Link } from '../Typography/Link/Link.js';
+import 'tslib';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import { Grid } from '../Grid/Grid.js';
+import { GridChild } from '../Grid/GridChild.js';
+import { useScreenSize, ScreenSize } from '../../hooks/useScreenSize.js';
+import { ButtonRow, FormGeneratorFlexContainer, SubContainer } from './FormGenerator.styles.js';
+import { formGeneratorTokens } from './FormGenerator.tokens.js';
+
+var FormGenerator = function FormGenerator(props) {
+  var _props$fields = props.fields,
+    fields = _props$fields === void 0 ? [] : _props$fields,
+    stateOnChange = props.stateOnChange;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    myState = _useState2[0],
+    setState = _useState2[1];
+  var fieldOnChange = function fieldOnChange(event) {
+    var _event$target = event.target,
+      id = _event$target.id,
+      name = _event$target.name,
+      value = _event$target.value,
+      checked = _event$target.checked;
+    var newState = Object.assign(Object.assign({}, myState), _defineProperty({}, name || id, event.target.type === 'checkbox' ? checked : value));
+    setState(newState);
+    stateOnChange(newState);
+  };
+  var isMultiValue = function isMultiValue(obj) {
+    return (obj === null || obj === void 0 ? void 0 : obj.values) !== undefined;
+  };
+  var selectOnChange = function selectOnChange(chosen, name) {
+    var value = null;
+    if (isMultiValue(chosen)) {
+      value = Array.isArray(chosen) ? chosen === null || chosen === void 0 ? void 0 : chosen.map(function (test) {
+        return test.value;
+      }) : null;
+    } else {
+      value = (chosen === null || chosen === void 0 ? void 0 : chosen.value) || null;
+    }
+    var newState = Object.assign(Object.assign({}, myState), _defineProperty({}, name, value));
+    setState(newState);
+    stateOnChange(newState);
+  };
+  var GetComponent = function GetComponent(field, index) {
+    switch (field.component) {
+      case 'Button':
+        return /*#__PURE__*/createElement(Button, Object.assign({}, field.props, {
+          key: index
+        }));
+      case 'Card':
+        return /*#__PURE__*/createElement(Card, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'Checkbox':
+        return /*#__PURE__*/createElement(Checkbox, Object.assign({}, field.props, {
+          key: index,
+          onChange: fieldOnChange
+        }));
+      case 'CheckboxGroup':
+        return /*#__PURE__*/createElement(CheckboxGroup, Object.assign({}, field.props, {
+          key: index
+        }), field.children.map(function (child, childIndex) {
+          return !child.hide && GetComponent(child, childIndex);
+        }));
+      case 'Datepicker':
+        return /*#__PURE__*/createElement(Datepicker, Object.assign({}, field.props, {
+          key: index,
+          onChange: fieldOnChange
+        }));
+      case 'Divider':
+        return /*#__PURE__*/createElement(Divider, Object.assign({}, field.props, {
+          key: index
+        }));
+      case 'GlobalMessage':
+        return /*#__PURE__*/createElement(GlobalMessage, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'Heading':
+        return /*#__PURE__*/createElement(Heading, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'InputMessage':
+        return /*#__PURE__*/createElement(InputMessage, Object.assign({}, field.props, {
+          key: index
+        }));
+      case 'Label':
+        return /*#__PURE__*/createElement(Label, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'Link':
+        return /*#__PURE__*/createElement(Link, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'List':
+        return /*#__PURE__*/createElement(List, Object.assign({}, field.props, {
+          key: index
+        }), field.children.map(function (child, childIndex) {
+          return !child.hide && GetComponent(child, childIndex);
+        }));
+      case 'ListItem':
+        return /*#__PURE__*/createElement(ListItem, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'LocalMessage':
+        return /*#__PURE__*/createElement(LocalMessage, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'Paragraph':
+        return /*#__PURE__*/createElement(Paragraph, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'RadioButton':
+        return /*#__PURE__*/createElement(RadioButton, Object.assign({}, field.props, {
+          key: index,
+          onChange: fieldOnChange
+        }));
+      case 'RadioButtonGroup':
+        field.props.direction = screenSize > ScreenSize.XSmall ? 'row' : 'column';
+        return /*#__PURE__*/createElement(RadioButtonGroup, Object.assign({}, field.props, {
+          key: index
+        }), field.children.map(function (child, childIndex) {
+          return !child.hide && GetComponent(child, childIndex);
+        }));
+      case 'Select':
+        return /*#__PURE__*/createElement(Select, Object.assign({}, field.props, {
+          key: index,
+          onChange: function onChange(option) {
+            return selectOnChange(option, field.name);
+          }
+        }));
+      case 'Spinner':
+        return /*#__PURE__*/createElement(Spinner, Object.assign({}, field.props, {
+          key: index
+        }));
+      case 'TextInput':
+        return /*#__PURE__*/createElement(TextInput, Object.assign({}, field.props, {
+          key: index,
+          onChange: fieldOnChange
+        }));
+      case 'ToggleButton':
+        return /*#__PURE__*/createElement(ToggleButton, Object.assign({}, field.props, {
+          key: index,
+          onChange: fieldOnChange
+        }));
+      case 'ToggleButtonGroup':
+        return /*#__PURE__*/createElement(ToggleButtonGroup, Object.assign({}, field.props, {
+          key: index
+        }), field.children.map(function (child, childIndex) {
+          return !child.hide && GetComponent(child, childIndex);
+        }));
+      case 'Typography':
+        return /*#__PURE__*/createElement(Typography, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      case 'VisuallyHidden':
+        return /*#__PURE__*/createElement(VisuallyHidden, Object.assign({}, field.props, {
+          key: index
+        }), field.innerHTML);
+      default:
+        return jsx(Fragment, {});
+    }
+  };
+  var isFormGeneratorRow = function isFormGeneratorRow(obj) {
+    return obj.rowType !== undefined;
+  };
+  var screenSize = useScreenSize();
+  return jsx(Grid, Object.assign({
+    as: "form",
+    rowGap: formGeneratorTokens.rowGaps
+  }, {
+    children: fields.map(function (obj, index) {
+      if (isFormGeneratorRow(obj)) {
+        if (obj.rowType === 'button') {
+          return jsx(ButtonRow, Object.assign({
+            columnsOccupied: "all"
+          }, {
+            children: jsx(FormGeneratorFlexContainer, Object.assign({
+              screenSize: screenSize
+            }, {
+              children: obj.fields.map(function (field, groupedIndex) {
+                return !field.hide && GetComponent(field, groupedIndex);
+              })
+            }))
+          }));
+        } else {
+          return jsx(GridChild, Object.assign({
+            columnsOccupied: "all"
+          }, {
+            children: jsx(SubContainer, Object.assign({
+              screenSize: screenSize,
+              length: obj.fields.length,
+              breakpoint: obj.breakpoint
+            }, {
+              children: obj.fields.map(function (field, groupedIndex) {
+                return !field.hide && GetComponent(field, groupedIndex);
+              })
+            }))
+          }));
+        }
+      } else {
+        return !obj.hide && jsx(GridChild, Object.assign({
+          columnsOccupied: "all"
+        }, {
+          children: GetComponent(obj, index)
+        }));
+      }
+    })
+  }));
+};
+
+export { FormGenerator };

package/dist/components/FormGenerator/FormGenerator.styles.js

@@ -0,0 +1,39 @@
+import styled, { css } from 'styled-components';
+import { ScreenSize } from '../../hooks/useScreenSize.js';
+import '../Grid/Grid.js';
+import { GridChild } from '../Grid/GridChild.js';
+import { getLiteralScreenSize } from '../Grid/Grid.utils.js';
+import { formGeneratorTokens } from './FormGenerator.tokens.js';
+
+var FormGeneratorFlexContainer = styled.div.withConfig({
+  displayName: "FormGeneratorstyles__FormGeneratorFlexContainer",
+  componentId: "sc-1jlspa9-0"
+})(["", ""], function (_ref) {
+  var screenSize = _ref.screenSize;
+  return css(["display:flex;flex-wrap:wrap;gap:", ";"], formGeneratorTokens.columnGaps[screenSize]);
+});
+var SubContainer = styled.div.withConfig({
+  displayName: "FormGeneratorstyles__SubContainer",
+  componentId: "sc-1jlspa9-1"
+})(["", " ", " ", ""], function (_ref2) {
+  var screenSize = _ref2.screenSize,
+    length = _ref2.length;
+  return length === 2 ? css(["display:grid;"]) : css(["display:flex;flex-wrap:wrap;gap:", ";"], formGeneratorTokens.columnGaps[screenSize]);
+}, function (_ref3) {
+  var screenSize = _ref3.screenSize,
+    length = _ref3.length,
+    _ref3$breakpoint = _ref3.breakpoint,
+    breakpoint = _ref3$breakpoint === void 0 ? ScreenSize.XSmall : _ref3$breakpoint;
+  return length === 2 ? screenSize > breakpoint ? css(["grid-auto-flow:column;grid-template-columns:min-content auto;column-gap:", ";"], formGeneratorTokens.columnGaps[screenSize]) : css(["grid-auto-flow:row;row-gap:", ";"], formGeneratorTokens.rowGaps[getLiteralScreenSize(screenSize)]) : "";
+}, function (_ref4) {
+  var screenSize = _ref4.screenSize,
+    length = _ref4.length,
+    breakpoint = _ref4.breakpoint;
+  return length === 3 ? breakpoint !== undefined && screenSize >= breakpoint ? css(["flex-direction:row;"]) : css(["flex-direction:column;"]) : "";
+});
+var ButtonRow = styled(GridChild).withConfig({
+  displayName: "FormGeneratorstyles__ButtonRow",
+  componentId: "sc-1jlspa9-2"
+})(["margin-top:", ";"], formGeneratorTokens.buttonRow.marginTop);
+
+export { ButtonRow, FormGeneratorFlexContainer, SubContainer };

package/dist/components/FormGenerator/FormGenerator.tokens.js

@@ -0,0 +1,21 @@
+import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+import { ScreenSize } from '../../hooks/useScreenSize.js';
+
+var _columnGaps;
+var Spacing = ddsBaseTokens.spacing;
+var formGeneratorTokens = {
+  columnGaps: (_columnGaps = {}, _defineProperty(_columnGaps, ScreenSize.XSmall, Spacing.SizesDdsSpacingLocalX1), _defineProperty(_columnGaps, ScreenSize.Small, Spacing.SizesDdsSpacingLocalX1), _defineProperty(_columnGaps, ScreenSize.Medium, Spacing.SizesDdsSpacingLocalX1), _defineProperty(_columnGaps, ScreenSize.Large, Spacing.SizesDdsSpacingLocalX1), _defineProperty(_columnGaps, ScreenSize.XLarge, Spacing.SizesDdsSpacingLocalX15), _columnGaps),
+  rowGaps: {
+    xs: Spacing.SizesDdsSpacingLocalX1,
+    sm: Spacing.SizesDdsSpacingLocalX1,
+    md: Spacing.SizesDdsSpacingLocalX1,
+    lg: Spacing.SizesDdsSpacingLocalX1,
+    xl: Spacing.SizesDdsSpacingLocalX15
+  },
+  buttonRow: {
+    marginTop: Spacing.SizesDdsSpacingLocalX1
+  }
+};
+
+export { formGeneratorTokens };

package/dist/components/ProgressTracker/ProgressTracker.tokens.js

@@ -2,7 +2,6 @@ import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var colors = ddsBaseTokens.colors,
   spacing = ddsBaseTokens.spacing;
-  ddsBaseTokens.font;
 var typographyTypes = {
   number: 'bodySans01',
   label: 'bodySans03'

package/dist/components/Search/SearchSuggestions.js

@@ -38,7 +38,7 @@ var suggestionsContainer = searchTokens.suggestionsContainer,
 var SuggestionsContainer = styled(Paper).withConfig({
   displayName: "SearchSuggestions__SuggestionsContainer",
   componentId: "sc-nlwf4s-0"
-})(["", ";position:absolute;top:100%;width:100%;max-height:300px;margin-top:", ";border:", ";box-shadow:", ";z-index:100;overflow-y:scroll;", " ", ""], function (_ref) {
+})(["", ";position:absolute;top:100%;width:100%;max-height:300px;margin-top:", ";border:", ";box-shadow:", ";z-index:80;overflow-y:scroll;", " ", ""], function (_ref) {
   var isHidden = _ref.isHidden;
   return visibilityTransition(!isHidden);
 }, suggestionsContainer.marginTop, suggestionsContainer.border, suggestionsContainer.boxShadow, scrollbarStyling.firefox, scrollbarStyling.webkit);

package/dist/components/SkipToContent/SkipToContent.js

@@ -16,7 +16,7 @@ var wrapper = skipToContentTokens.wrapper,
 var Wrapper = styled.div.withConfig({
   displayName: "SkipToContent__Wrapper",
   componentId: "sc-57o1qv-0"
-})(["box-sizing:border-box;position:absolute;top:", ";text-align:center;overflow:hidden;clip:rect(1px,1px,1px,1px);height:1px;width:1px;white-space:nowrap;background-color:", ";padding:", ";opacity:0;@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}&:focus-within{clip:auto;height:auto;overflow:auto;width:100%;z-index:200;opacity:1;}"], function (_ref) {
+})(["box-sizing:border-box;position:absolute;top:", ";text-align:center;overflow:hidden;clip:rect(1px,1px,1px,1px);height:1px;width:1px;white-space:nowrap;background-color:", ";padding:", ";opacity:0;@media (prefers-reduced-motion:no-preference){transition:opacity 0.2s;}&:focus-within{clip:auto;height:auto;overflow:auto;width:100%;z-index:250;opacity:1;}"], function (_ref) {
   var top = _ref.top;
   return top;
 }, wrapper.backgroundColor, wrapper.padding);

package/dist/components/Stack/Stack.d.ts

@@ -0,0 +1,37 @@
+import { stackTokens } from './Stack.tokens';
+import { BaseComponentPropsWithChildren } from '../../types';
+declare type Align = 'stretch' | 'center' | 'flex-start' | 'flex-end';
+declare type Justify = 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
+export interface StackStyleProps {
+    /**
+     * Hvilken retning elementene skal plasseres i.
+     */
+    direction: 'horizontal' | 'vertical';
+    /**
+     * CSS `align-items`.
+     * @default 'center'
+     */
+    align?: Align;
+    /**
+     * CSS `justify-content`.
+     * @default 'flex-start'
+     */
+    justify?: Justify;
+    /**
+     * Hvilken spacing token som skal brukes som CSS `gap`.
+     * @default 0
+     */
+    gap?: keyof typeof stackTokens.gap | 0;
+}
+export declare type StackProps = BaseComponentPropsWithChildren<HTMLDivElement, Omit<StackStyleProps, 'direction'>>;
+export declare const HStack: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & Omit<StackStyleProps, "direction"> & {
+    children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const VStack: import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "className" | "id"> & Omit<StackStyleProps, "direction"> & {
+    children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Stack/Stack.js

@@ -0,0 +1,46 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { stackTokens } from './Stack.tokens.js';
+import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
+
+var Stack = styled.div.withConfig({
+  displayName: "Stack",
+  componentId: "sc-1a1z9ks-0"
+})(["display:flex;flex-direction:", ";align-items:", ";justify-content:", ";gap:", ";"], function (_ref) {
+  var direction = _ref.direction;
+  return direction === 'horizontal' ? 'row' : 'column';
+}, function (props) {
+  return props.align;
+}, function (props) {
+  return props.justify;
+}, function (props) {
+  return props.gap === undefined || props.gap === 0 ? '0' : stackTokens.gap[props.gap];
+});
+Stack.defaultProps = {
+  align: 'center',
+  justify: 'flex-start'
+};
+var HStack = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var id = _a.id,
+    className = _a.className,
+    htmlProps = _a.htmlProps,
+    rest = __rest(_a, ["id", "className", "htmlProps"]);
+  return jsx(Stack, Object.assign({
+    direction: "horizontal",
+    ref: ref
+  }, getBaseHTMLProps(id, className, htmlProps, rest)));
+});
+var VStack = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var id = _a.id,
+    className = _a.className,
+    htmlProps = _a.htmlProps,
+    rest = __rest(_a, ["id", "className", "htmlProps"]);
+  return jsx(Stack, Object.assign({
+    direction: "vertical",
+    ref: ref
+  }, getBaseHTMLProps(id, className, htmlProps, rest)));
+});
+
+export { HStack, VStack };

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

@@ -0,0 +1,10 @@
+import { ComponentMeta } from '@storybook/react';
+import { StackProps } from './Stack';
+declare const _default: ComponentMeta<import("react").ForwardRefExoticComponent<Pick<import("react").HTMLAttributes<HTMLDivElement>, "id" | "className"> & Omit<import("./Stack").StackStyleProps, "direction"> & {
+    children?: import("react").ReactNode;
+} & {
+    htmlProps?: import("react").HTMLAttributes<HTMLDivElement> | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>>;
+export default _default;
+export declare const VStackOverview: (args: StackProps) => JSX.Element;
+export declare const HStackOverview: (args: StackProps) => JSX.Element;

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

@@ -0,0 +1,20 @@
+export declare const stackTokens: {
+    gap: {
+        'local-x0.125': string;
+        'local-x0.25': string;
+        'local-x0.5': string;
+        'local-x0.75': string;
+        'local-x1': string;
+        'local-x1.5': string;
+        'local-x2': string;
+        'local-x2.5': string;
+        'local-x3': string;
+        'layout-x1': string;
+        'layout-x1.5': string;
+        'layout-x2': string;
+        'layout-x3': string;
+        'layout-x4': string;
+        'layout-x6': string;
+        'layout-x10': string;
+    };
+};

package/dist/components/Stack/Stack.tokens.js

@@ -0,0 +1,26 @@
+import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
+
+var spacing = ddsBaseTokens.spacing;
+var gapTokens = {
+  'local-x0.125': spacing.SizesDdsSpacingLocalX0125,
+  'local-x0.25': spacing.SizesDdsSpacingLocalX025,
+  'local-x0.5': spacing.SizesDdsSpacingLocalX05,
+  'local-x0.75': spacing.SizesDdsSpacingLocalX075,
+  'local-x1': spacing.SizesDdsSpacingLocalX1,
+  'local-x1.5': spacing.SizesDdsSpacingLocalX15,
+  'local-x2': spacing.SizesDdsSpacingLocalX2,
+  'local-x2.5': spacing.SizesDdsSpacingLocalX25,
+  'local-x3': spacing.SizesDdsSpacingLocalX3,
+  'layout-x1': spacing.SizesDdsSpacingLayoutX1,
+  'layout-x1.5': spacing.SizesDdsSpacingLayoutX15,
+  'layout-x2': spacing.SizesDdsSpacingLayoutX2,
+  'layout-x3': spacing.SizesDdsSpacingLayoutX3,
+  'layout-x4': spacing.SizesDdsSpacingLayoutX4,
+  'layout-x6': spacing.SizesDdsSpacingLayoutX6,
+  'layout-x10': spacing.SizesDdsSpacingLayoutX10
+};
+var stackTokens = {
+  gap: gapTokens
+};
+
+export { stackTokens };

package/dist/components/Stack/index.d.ts

@@ -0,0 +1 @@
+export * from './Stack';

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

@@ -1,10 +1,15 @@
 import { ThHTMLAttributes, TdHTMLAttributes } from 'react';
 export declare type TableCellType = 'data' | 'head';
 export declare type TableCellLayout = 'left' | 'right' | 'center' | 'text and icon';
+export declare type CollapsibleProps = {
+    isCollapsibleChild?: boolean;
+};
 export declare type TableCellProps = {
     /**Type celle. Returnerer enten `<td>` eller `<th>`. */
     type?: TableCellType;
     /**Layout av innholdet i cellen. 'tekst and icon' legger `gap` mellom barna og andre barnet i cellen.  */
     layout?: TableCellLayout;
+    /** Props ved bruk av `<CollapsibleRow>`. **OBS!** settes automatisk av forelder. */
+    collapsibleProps?: CollapsibleProps;
 } & (TdHTMLAttributes<HTMLTableCellElement> | ThHTMLAttributes<HTMLTableCellElement>);
 export declare const Cell: import("react").ForwardRefExoticComponent<TableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/Table/Cell.js

@@ -2,10 +2,14 @@ import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
+import '../DescriptionList/DescriptionList.js';
+import '../DescriptionList/DescriptionListTerm.js';
+import { DescriptionListDesc } from '../DescriptionList/DescriptionListDesc.js';
+import '../DescriptionList/DescriptionListGroup.js';
 import { tableTokens } from './Table.tokens.js';
 
 var cell = tableTokens.cell;
-var layoutStyle = function layoutStyle(layout) {
+var getLayoutStyle = function getLayoutStyle(layout) {
   switch (layout) {
     case 'center':
       return css(["justify-content:center;"]);
@@ -30,7 +34,7 @@ var InnerCell = styled.div.withConfig({
   componentId: "sc-ghfpfs-1"
 })(["display:flex;align-items:center;", ""], function (_ref2) {
   var layout = _ref2.layout;
-  return layoutStyle(layout);
+  return getLayoutStyle(layout);
 });
 var getTableCellType = function getTableCellType(type) {
   switch (type) {
@@ -47,8 +51,11 @@ var Cell = /*#__PURE__*/forwardRef(function (_a, ref) {
     type = _a$type === void 0 ? 'data' : _a$type,
     _a$layout = _a.layout,
     layout = _a$layout === void 0 ? 'left' : _a$layout,
-    rest = __rest(_a, ["children", "type", "layout"]);
+    collapsibleProps = _a.collapsibleProps,
+    rest = __rest(_a, ["children", "type", "layout", "collapsibleProps"]);
   var as = getTableCellType(type);
+  var _ref3 = collapsibleProps || {},
+    isCollapsibleChild = _ref3.isCollapsibleChild;
   var cellProps = Object.assign({
     as: as,
     type: type
@@ -56,7 +63,9 @@ var Cell = /*#__PURE__*/forwardRef(function (_a, ref) {
   var innerCellProps = {
     layout: layout
   };
-  return jsx(StyledCell, Object.assign({
+  return isCollapsibleChild ? jsx(DescriptionListDesc, {
+    children: children
+  }) : jsx(StyledCell, Object.assign({
     ref: ref
   }, cellProps, {
     children: jsx(InnerCell, Object.assign({}, innerCellProps, {

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

@@ -1,23 +1,6 @@
-import { HTMLAttributes } from 'react';
-export declare type TableRowType = 'body' | 'head';
-export declare type RowMode = 'normal' | 'sum';
-export declare type TableRowProps = {
-    /**Spesifiserer om raden skal brukes i `<head>` eller `<body>`-seksjonen. */
-    type?: TableRowType;
-    /**Custom modus for rader som har ytterligere semantisk betydning (f.eks. summeringsrad), definerer kun styling. Ved bruk av sum må `<Cell>` med tall i høyrestilles vha layout prop.  */
-    mode?: RowMode;
-    /**Spesifiserer om raden har blitt valgt/markert. */
-    selected?: boolean;
-    /**Spesifiserer om raden skal ha hover styling. Brukes hovedsakelig på klikkbare rader. */
-    hoverable?: boolean;
-} & HTMLAttributes<HTMLTableRowElement>;
 export declare const Row: import("react").ForwardRefExoticComponent<{
-    /**Spesifiserer om raden skal brukes i `<head>` eller `<body>`-seksjonen. */
-    type?: TableRowType | undefined;
-    /**Custom modus for rader som har ytterligere semantisk betydning (f.eks. summeringsrad), definerer kun styling. Ved bruk av sum må `<Cell>` med tall i høyrestilles vha layout prop.  */
-    mode?: RowMode | undefined;
-    /**Spesifiserer om raden har blitt valgt/markert. */
+    type?: import("./Table.types").TableRowType | undefined;
+    mode?: import("./Table.types").RowMode | undefined;
     selected?: boolean | undefined;
-    /**Spesifiserer om raden skal ha hover styling. Brukes hovedsakelig på klikkbare rader. */
     hoverable?: boolean | undefined;
-} & HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;
+} & import("react").HTMLAttributes<HTMLTableRowElement> & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/components/Table/Row.js

@@ -1,32 +1,8 @@
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { focusVisibleInset } from '../../helpers/styling/focusVisible.js';
-import '../../helpers/styling/hover.js';
-import '../../helpers/styling/focus.js';
-import '../../helpers/styling/danger.js';
-import '../../helpers/styling/selection.js';
-import { getFontStyling, defaultTypographyType } from '../Typography/Typography.utils.js';
-import { tableTokens } from './Table.tokens.js';
+import { StyledRow } from './Table.styles.js';
 
-var row = tableTokens.row;
-var bodyStyles = function bodyStyles(mode, selected) {
-  return css(["", " ", ""], mode === 'sum' && css(["font-weight:600;border-top:", ";border-bottom:", ";background-color:", ";"], row.body.mode.sum.borderTop, row.body.mode.sum.borderBottom, row.body.mode.sum.backgroundColor), selected && css(["background-color:", ";"], row.body.selected.backgroundColor));
-};
-var StyledRow = styled.tr.withConfig({
-  displayName: "Row__StyledRow",
-  componentId: "sc-15vvjkk-0"
-})(["@media (prefers-reduced-motion:no-preference){transition:background-color 0.2s,border-color 0.2s,box-shadow 0.2s;}", " ", " ", ""], getFontStyling(defaultTypographyType, true), function (_ref) {
-  var type = _ref.type;
-  return type === 'head' && css(["font-weight:600;text-align:left;"]);
-}, function (_ref2) {
-  var type = _ref2.type,
-    mode = _ref2.mode,
-    selected = _ref2.selected,
-    hoverable = _ref2.hoverable;
-  return type === 'body' && css(["&:nth-of-type(even){background-color:", ";", "}&:nth-of-type(odd){background-color:", ";", "}", " &:focus-visible,&.focus-visible{", "}"], row.body.even.backgroundColor, bodyStyles(mode, selected), row.body.odd.backgroundColor, bodyStyles(mode, selected), hoverable && css(["&:hover{background-color:", ";}"], row.body.hover.backgroundColor), focusVisibleInset);
-});
 var Row = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$type = _a.type,
     type = _a$type === void 0 ? 'body' : _a$type,

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

@@ -1,18 +1,6 @@
-import { HTMLAttributes } from 'react';
-export declare type TableDensity = 'normal' | 'compact';
-export declare type TableProps = {
-    /**Spesifiserer hvor romslige cellene i tabellen skal være. */
-    density?: TableDensity;
-    /**Spesifiserer om cellene i `<Head>` skal bli sticky ved scrolling. */
-    stickyHeader?: boolean;
-    /**Legger skillelinjer mellom radene. */
-    withDividers?: boolean;
-} & HTMLAttributes<HTMLTableElement>;
+import { TableDensity } from './Table.types';
 export declare const Table: import("react").ForwardRefExoticComponent<{
-    /**Spesifiserer hvor romslige cellene i tabellen skal være. */
     density?: TableDensity | undefined;
-    /**Spesifiserer om cellene i `<Head>` skal bli sticky ved scrolling. */
     stickyHeader?: boolean | undefined;
-    /**Legger skillelinjer mellom radene. */
     withDividers?: boolean | undefined;
-} & HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;
+} & import("react").HTMLAttributes<HTMLTableElement> & import("react").RefAttributes<HTMLTableElement>>;

package/dist/components/Table/Table.js

@@ -22,7 +22,7 @@ var StyledTable = styled.table.withConfig({
   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;}}"]);
+  return stickyHeader && css(["tr[type='head']{th[type='head']{position:sticky;top:0;z-index:50;}}"]);
 }, function (_ref3) {
   var withDividers = _ref3.withDividers;
   return withDividers && css(["tr[type='body']{border-bottom:", ";}"], row.body.withDividers.borderBottom);