@norges-domstoler/dds-components 10.1.0 → 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/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/Tooltip/Tooltip.styles.js

@@ -33,7 +33,7 @@ var Container = styled.div.withConfig({
 var TooltipWrapper = styled(Paper).withConfig({
   displayName: "Tooltipstyles__TooltipWrapper",
   componentId: "sc-1cna5tc-3"
-})(["", " width:fit-content;position:absolute;z-index:100;text-align:center;padding:", ";", ";"], function (_ref) {
+})(["", " width:fit-content;position:absolute;z-index:80;text-align:center;padding:", ";", ";"], function (_ref) {
   var open = _ref.open;
   return visibilityTransition(open);
 }, wrapper.padding, getFontStyling(defaultTypographyType));

package/dist/index.d.ts

@@ -43,3 +43,5 @@ export * from './components/InlineEdit';
 export * from './components/TextArea';
 export * from './components/SplitButton';
 export * from './components/Stack';
+export * from './components/FormGenerator';
+export * from './components/FileUploader';

package/dist/index.js

@@ -214,3 +214,5 @@ export { InlineEditInput } from './components/InlineEdit/InlineEditInput.js';
 export { StyledTextArea, TextArea } from './components/TextArea/TextArea.js';
 export { SplitButton } from './components/SplitButton/SplitButton.js';
 export { HStack, VStack } from './components/Stack/Stack.js';
+export { FormGenerator } from './components/FormGenerator/FormGenerator.js';
+export { FileUploader } from './components/FileUploader/FileUploader.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "10.1.0",
+  "version": "10.1.1",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -90,7 +90,7 @@
     "typescript": "^4.8.3"
   },
   "peerDependencies": {
-    "@norges-domstoler/dds-design-tokens": "^3.0.0",
+    "@norges-domstoler/dds-design-tokens": "^3.0.1",
     "react": "^16 || ^17 || ^18",
     "react-dom": "^16 || ^17 || ^18",
     "styled-components": "^5"