dibk-design 2.0.1 → 2.0.3

package/dist/components/Accordion.js

@@ -1,56 +1,38 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _AccordionModule = _interopRequireDefault(require("./Accordion.module.scss"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 var Accordion = function Accordion(props) {
   var _useState = (0, _react.useState)(props.expanded),
-      _useState2 = _slicedToArray(_useState, 2),
-      expanded = _useState2[0],
-      setExpanded = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    expanded = _useState2[0],
+    setExpanded = _useState2[1];
   var _useState3 = (0, _react.useState)(props.initialized),
-      _useState4 = _slicedToArray(_useState3, 2),
-      initialized = _useState4[0],
-      setInitialized = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    initialized = _useState4[0],
+    setInitialized = _useState4[1];
   var handleToggleExpand = function handleToggleExpand() {
     setExpanded(!expanded);
     setInitialized(true);
   };
-
   (0, _react.useEffect)(function () {
     setExpanded(props.expanded);
   }, [props.expanded]);
-
   var renderPanel = function renderPanel() {
     return _react.default.createElement("button", {
       className: _AccordionModule.default.panel,
@@ -62,7 +44,6 @@ var Accordion = function Accordion(props) {
       className: "".concat(_AccordionModule.default.panelChevron, " ").concat(expanded ? _AccordionModule.default.expanded : "")
     }));
   };
-
   var className = "".concat(_AccordionModule.default.accordion, " ").concat(props.color ? _AccordionModule.default[props.color] : "");
   return _react.default.createElement("div", {
     className: className
@@ -70,7 +51,6 @@ var Accordion = function Accordion(props) {
     className: "".concat(_AccordionModule.default.content, " ").concat(initialized ? _AccordionModule.default.initialized : "", " ").concat(expanded ? _AccordionModule.default.expanded : "")
   }, props.children));
 };
-
 Accordion.propTypes = {
   title: _propTypes.default.string,
   titleSize: _propTypes.default.oneOf(["regular", "large"]),

package/dist/components/Button.js

@@ -4,41 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _theme = require("../functions/theme");
-
 var _ButtonModule = _interopRequireDefault(require("./Button.module.scss"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var Button = function Button(props) {
   var _props$href;
-
   var getArrowClass = function getArrowClass(arrow) {
     switch (arrow) {
       case "left":
         return _ButtonModule.default.hasArrowLeft;
-
       case "right":
         return _ButtonModule.default.hasArrowRight;
-
       default:
         return "";
     }
   };
-
   var getThemeStyle = function getThemeStyle(theme, color) {
     return {
       backgroundColor: (0, _theme.getThemePaletteBackgroundColor)(theme, color),
@@ -47,9 +33,7 @@ var Button = function Button(props) {
       borderWidth: (0, _theme.getThemePaletteBorderColor)(theme, color) ? "1px" : "0"
     };
   };
-
   var buttonProps = _objectSpread({}, props);
-
   delete buttonProps.noHover;
   delete buttonProps.rounded;
   var themeStyle = props.theme ? getThemeStyle(props.theme, props.color) : null;
@@ -62,7 +46,6 @@ var Button = function Button(props) {
     style: themeStyle
   }), props.content || props.children);
 };
-
 Button.propTypes = {
   content: _propTypes.default.string,
   color: _propTypes.default.oneOf(["default", "primary"]),

package/dist/components/CheckBoxIcon.js

@@ -4,36 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _theme = require("../functions/theme");
-
 var _CheckBoxIconModule = _interopRequireDefault(require("./CheckBoxIcon.module.scss"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 var CheckBoxIcon = function CheckBoxIcon(props) {
   var inlineStyle = {
     height: props.size,
     width: props.size,
     fontSize: props.size
   };
-
   if (props.theme && props.checked) {
     var _objectSpread2;
-
     inlineStyle = _objectSpread(_objectSpread({}, inlineStyle), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, !props.hasErrors && "color", (0, _theme.getThemePaletteBackgroundColor)(props.theme, "primary")), _defineProperty(_objectSpread2, !props.hasErrors && props.showBox && "boxShadow", "0 0 0 1px ".concat((0, _theme.getThemePaletteBackgroundColor)(props.theme, "primary"))), _objectSpread2));
   }
-
   var checkBoxIconProps = {
     className: "".concat(_CheckBoxIconModule.default.checkBoxIcon, " ").concat(props.checked ? _CheckBoxIconModule.default.checked : "", " ").concat(props.disabled ? _CheckBoxIconModule.default.disabled : "", " ").concat(props.showBox ? _CheckBoxIconModule.default.showBox : "", " ").concat(props.hasErrors ? _CheckBoxIconModule.default.hasErrors : ""),
     style: inlineStyle
@@ -43,7 +31,6 @@ var CheckBoxIcon = function CheckBoxIcon(props) {
     className: _CheckBoxIconModule.default.checkmark
   }, props.checked ? props.checkmarkCharacter : ""));
 };
-
 CheckBoxIcon.propTypes = {
   size: _propTypes.default.string,
   checked: _propTypes.default.bool,

package/dist/components/CheckBoxInput.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _CheckBoxIcon = _interopRequireDefault(require("./CheckBoxIcon"));
-
 var _CheckBoxInputModule = _interopRequireDefault(require("./CheckBoxInput.module.scss"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var CheckBoxInput = function CheckBoxInput(props) {
@@ -34,16 +29,20 @@ var CheckBoxInput = function CheckBoxInput(props) {
     type: "checkbox",
     checked: props.checked,
     disabled: props.disabled,
+    required: props.required || props.requiredGroup,
     onChange: props.onChange,
     tabIndex: props.tabIndex || null,
     "aria-controls": props["aria-controls"]
   };
-  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("input", inputProps)) : _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("span", null, props.children));
+  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("input", inputProps)) : _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("span", {
+    className: _CheckBoxInputModule.default.requiredSymbol
+  }, "*")));
 };
-
 CheckBoxInput.propTypes = {
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
+  required: _propTypes.default.bool,
+  requiredGroup: _propTypes.default.bool,
   id: _propTypes.default.string.isRequired,
   name: _propTypes.default.string,
   onChange: _propTypes.default.func.isRequired,
@@ -56,6 +55,8 @@ CheckBoxInput.propTypes = {
 CheckBoxInput.defaultProps = {
   checked: false,
   disabled: false,
+  required: false,
+  requiredGroup: false,
   name: "",
   contentOnly: false,
   hasErrors: false,

package/dist/components/CheckBoxInput.module.scss

@@ -5,6 +5,12 @@
     margin-right: 1em;
     border: 1px solid transparent;
 
+    .requiredSymbol {
+        color: $color-error;
+        font-size: 0.8em;
+        vertical-align: top;
+    }
+
     &:not(.contentOnly):not(.disabled) {
         cursor: pointer;
         input {

package/dist/components/CheckBoxList.js

@@ -4,25 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _CheckBoxListModule = _interopRequireDefault(require("./CheckBoxList.module.scss"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var CheckBoxList = function CheckBoxList(props) {
   var _props$legend;
-
+  var renderChildElements = function renderChildElements(childElements) {
+    return childElements.map(function (childElement, index) {
+      var _childElement$type;
+      if ((childElement === null || childElement === void 0 ? void 0 : (_childElement$type = childElement.type) === null || _childElement$type === void 0 ? void 0 : _childElement$type.name) === "CheckBoxListItem" && props.required) {
+        var childElementCopy = _react.default.cloneElement(childElement, {
+          requiredGroup: true,
+          key: "checkboxListItem-".concat(index)
+        });
+        return childElementCopy;
+      } else {
+        var _childElementCopy = _react.default.cloneElement(childElement, {
+          key: "checkboxListChild-".concat(index)
+        });
+        return _childElementCopy;
+      }
+    });
+  };
   return _react.default.createElement("fieldset", {
     className: _CheckBoxListModule.default.checkBoxList
-  }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? _react.default.createElement("legend", null, props.legend) : null, props.children);
+  }, !!((_props$legend = props.legend) !== null && _props$legend !== void 0 && _props$legend.length) ? _react.default.createElement("legend", null, props.legend, props.required && _react.default.createElement("span", {
+    className: _CheckBoxListModule.default.requiredSymbol
+  }, "*")) : null, renderChildElements(props.children));
 };
-
 CheckBoxList.propTypes = {
-  legend: _propTypes.default.string
+  legend: _propTypes.default.string,
+  required: _propTypes.default.bool
 };
 var _default = CheckBoxList;
 exports.default = _default;

package/dist/components/CheckBoxList.module.scss

@@ -13,5 +13,10 @@ fieldset.checkBoxList {
         margin-bottom: 2px;
         font-family: $default-font;
         overflow-wrap: break-word;
+        .requiredSymbol {
+            color: $color-error;
+            font-size: 0.8em;
+            vertical-align: top;
+        }
     }
 }

package/dist/components/CheckBoxListItem.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _CheckBoxInput = _interopRequireDefault(require("./CheckBoxInput"));
-
 var _helpers = require("../functions/helpers");
-
 var _CheckBoxListItemModule = _interopRequireDefault(require("./CheckBoxListItem.module.scss"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var CheckBoxListItem = function CheckBoxListItem(props) {
@@ -24,6 +18,8 @@ var CheckBoxListItem = function CheckBoxListItem(props) {
     onChange: props.onChange,
     checked: props.checked,
     disabled: props.disabled,
+    required: props.required,
+    requiredGroup: props.requiredGroup,
     contentOnly: props.contentOnly,
     hasErrors: props.hasErrors,
     id: props.id,
@@ -34,10 +30,11 @@ var CheckBoxListItem = function CheckBoxListItem(props) {
     className: listItemClassNameString
   }, _react.default.createElement(_CheckBoxInput.default, inputProps, props.children));
 };
-
 CheckBoxListItem.propTypes = {
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
+  required: _propTypes.default.bool,
+  requiredGroup: _propTypes.default.bool,
   id: _propTypes.default.string.isRequired,
   name: _propTypes.default.string,
   onChange: _propTypes.default.func.isRequired,
@@ -50,6 +47,8 @@ CheckBoxListItem.propTypes = {
 CheckBoxListItem.defaultProps = {
   checked: false,
   disabled: false,
+  required: false,
+  requiredGroup: false,
   id: "",
   name: "",
   contentOnly: false,

package/dist/components/Container.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _ContainerModule = _interopRequireDefault(require("./Container.module.scss"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var Container = function Container(props) {
@@ -16,6 +13,5 @@ var Container = function Container(props) {
     className: _ContainerModule.default.container
   }, props.children);
 };
-
 var _default = Container;
 exports.default = _default;

package/dist/components/ContentBox.js

@@ -4,21 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _ContentBoxModule = _interopRequireDefault(require("./ContentBox.module.scss"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var ContentBox = function ContentBox(props) {
   var _props$content;
-
   var renderTitle = function renderTitle() {
     var className = _ContentBoxModule.default.title + " " + _ContentBoxModule.default[props.titleSize];
-
     if (props.title) {
       return _react.default.createElement("h2", {
         className: className
@@ -27,12 +21,10 @@ var ContentBox = function ContentBox(props) {
       return;
     }
   };
-
   var colorClass = " " + _ContentBoxModule.default[props.color];
   var linkClass = props.href ? " " + _ContentBoxModule.default.link : "";
   var className = _ContentBoxModule.default.contentBox + colorClass + linkClass;
   var bodyContent = (_props$content = props.content) !== null && _props$content !== void 0 && _props$content.length ? props.content : props.children;
-
   if (props.href) {
     return _react.default.createElement("a", {
       href: props.href,
@@ -48,7 +40,6 @@ var ContentBox = function ContentBox(props) {
     }, bodyContent));
   }
 };
-
 ContentBox.propTypes = {
   title: _propTypes.default.string,
   titleSize: _propTypes.default.oneOf(["regular", "large"]),

package/dist/components/Dialog.js

@@ -1,22 +1,15 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _DialogModule = _interopRequireDefault(require("./Dialog.module.scss"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var Dialog = function Dialog(props) {
@@ -28,18 +21,15 @@ var Dialog = function Dialog(props) {
         case 27:
           if (props.onClickOutside) props.onClickOutside();
           break;
-
         default:
           return null;
       }
     };
-
     var handleClickOutside = function handleClickOutside(event) {
       if (wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current && !wrapperRef.current.contains(event.target)) {
         props.onClickOutside();
       }
     };
-
     document.addEventListener("mousedown", handleClickOutside);
     document.addEventListener("keydown", keyDownFunction, false);
     hiddenInputWrapperRef.current.tabIndex = -1;
@@ -62,7 +52,6 @@ var Dialog = function Dialog(props) {
     autoFocus: true
   }), props.children));
 };
-
 Dialog.propTypes = {
   maxWidth: _propTypes.default.string,
   noPadding: _propTypes.default.bool,

package/dist/components/DragAndDropFileInput.js

@@ -1,97 +1,76 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Button = _interopRequireDefault(require("./Button"));
-
 var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
-
 var _DragAndDropFileInputModule = _interopRequireDefault(require("./DragAndDropFileInput.module.scss"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 var DragAndDropFileInput = function DragAndDropFileInput(props) {
   var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      highlight = _useState2[0],
-      setHighlight = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 2),
+    highlight = _useState2[0],
+    setHighlight = _useState2[1];
 
   var containerElementRef = (0, _react.useRef)();
   var fileInputElementRef = (0, _react.useRef)();
-
   var preventDefaults = function preventDefaults(e) {
     e.preventDefault();
     e.stopPropagation();
   };
-
   var renderValueAsText = function renderValueAsText(value, defaultContent) {
     return value ? value : defaultContent;
   };
-
   var handleAddButtonOnClick = function handleAddButtonOnClick() {
     fileInputElementRef.current.click();
   };
-
   var buttonContent;
-
   if (props.selectedFileName) {
     buttonContent = props.buttonContentWhenSelectedFile ? props.buttonContentWhenSelectedFile : props.buttonContent;
   } else {
     buttonContent = props.buttonContent;
   }
-
   (0, _react.useEffect)(function () {
     var handleFiles = function handleFiles(files) {
       props.onDragAndDropChange(files);
     };
-
     var handleDrop = function handleDrop(e) {
       var files = e.dataTransfer.files;
       handleFiles(files);
     };
-
     if (containerElementRef !== null && containerElementRef !== void 0 && containerElementRef.current) {
       containerElementRef.current.addEventListener("dragenter", preventDefaults, false);
       containerElementRef.current.addEventListener("dragover", preventDefaults, false);
       containerElementRef.current.addEventListener("dragleave", preventDefaults, false);
       containerElementRef.current.addEventListener("drop", preventDefaults, false);
+
       containerElementRef.current.addEventListener("dragenter", function () {
         setHighlight(true);
       }, false);
       containerElementRef.current.addEventListener("dragover", function () {
         setHighlight(true);
       }, false);
+
       containerElementRef.current.addEventListener("dragleave", function () {
         setHighlight(false);
       }, false);
       containerElementRef.current.addEventListener("drop", function () {
         setHighlight(false);
       }, false);
+
       containerElementRef.current.addEventListener("drop", handleDrop, false);
     }
   }, [props]);
@@ -99,7 +78,9 @@ var DragAndDropFileInput = function DragAndDropFileInput(props) {
     className: _DragAndDropFileInputModule.default.dragAndDropFileInput
   }, _react.default.createElement("label", {
     htmlFor: props.id
-  }, props.label, !props.contentOnly ? _react.default.createElement("div", {
+  }, props.label, props.required && _react.default.createElement("span", {
+    className: _DragAndDropFileInputModule.default.requiredSymbol
+  }, "*"), !props.contentOnly ? _react.default.createElement("div", {
     ref: containerElementRef,
     className: "".concat(_DragAndDropFileInputModule.default.dragAndDropContainer, " ").concat(highlight ? _DragAndDropFileInputModule.default.highlighted : "")
   }, props.selectedFileName ? _react.default.createElement("div", null, _react.default.createElement("span", null, _react.default.createElement("b", null, "Valgt fil:"), " ", props.selectedFileName)) : _react.default.createElement("div", null, "Slipp fil her"), _react.default.createElement("input", {
@@ -119,7 +100,6 @@ var DragAndDropFileInput = function DragAndDropFileInput(props) {
     theme: props.theme
   }));
 };
-
 DragAndDropFileInput.propTypes = {
   id: _propTypes.default.string.isRequired,
   onSelectChange: _propTypes.default.func.isRequired,

package/dist/components/DragAndDropFileInput.module.scss

@@ -10,6 +10,11 @@
         font-weight: bold;
         font-style: normal;
         display: block;
+        .requiredSymbol {
+            color: $color-error;
+            font-size: 0.8em;
+            vertical-align: top;
+        }
     }
 
     .dragAndDropContainer {

package/dist/components/ErrorBox.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _theme = require("../functions/theme");
-
 var _ErrorBoxModule = _interopRequireDefault(require("./ErrorBox.module.scss"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var ErrorBox = function ErrorBox(props) {
@@ -21,13 +16,11 @@ var ErrorBox = function ErrorBox(props) {
       borderColor: (0, _theme.getThemePaletteBackgroundColor)(props.theme, "warning")
     };
   };
-
   return _react.default.createElement("div", {
     className: _ErrorBoxModule.default.errorBox,
     style: getThemeErrorBoxStyle()
   }, props.children);
 };
-
 ErrorBox.propTypes = {
   theme: _propTypes.default.object
 };