dibk-design 2.0.2 → 2.0.4

package/dist/components/CheckBoxInput.js

@@ -29,15 +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,
@@ -50,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

@@ -11,12 +11,34 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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") {
+        var childElementCopy = _react.default.cloneElement(childElement, {
+          requiredGroup: props.required,
+          compact: props.compact,
+          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,
+  compact: _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

@@ -18,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,
@@ -31,6 +33,8 @@ var CheckBoxListItem = function CheckBoxListItem(props) {
 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,
@@ -43,6 +47,8 @@ CheckBoxListItem.propTypes = {
 CheckBoxListItem.defaultProps = {
   checked: false,
   disabled: false,
+  required: false,
+  requiredGroup: false,
   id: "",
   name: "",
   contentOnly: false,

package/dist/components/DragAndDropFileInput.js

@@ -78,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", {

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/InputField.js

@@ -52,7 +52,7 @@ var InputField = function InputField(props) {
       max: props.max || null,
       onChange: props.onChange,
       onBlur: props.onBlur
-    }, _defineProperty(_ref, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_ref, "placeholder", props.placeholder || null), _defineProperty(_ref, "className", props.hasErrors ? _InputFieldModule.default.hasErrors : null), _defineProperty(_ref, "aria-required", props.mandatory), _defineProperty(_ref, "aria-describedby", props["aria-describedby"] || null), _defineProperty(_ref, "style", styleRules), _ref;
+    }, _defineProperty(_ref, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_ref, "placeholder", props.placeholder || null), _defineProperty(_ref, "className", props.hasErrors ? _InputFieldModule.default.hasErrors : null), _defineProperty(_ref, "aria-describedby", props["aria-describedby"] || null), _defineProperty(_ref, "style", styleRules), _ref;
   };
   var defaultValue = props.defaultValue ? props.defaultValue : props.value || null;
   var defaultKey = props.elementKey || null;
@@ -63,7 +63,9 @@ var InputField = function InputField(props) {
     className: "".concat(_InputFieldModule.default.inputField, " ").concat(_InputFieldModule.default[props.type])
   }, _react.default.createElement(_Label.default, {
     htmlFor: props.id
-  }, props.label, props.type === "file" ? _react.default.createElement("div", {
+  }, props.label, props.required && _react.default.createElement("span", {
+    className: _InputFieldModule.default.requiredSymbol
+  }, "*"), props.type === "file" ? _react.default.createElement("div", {
     className: _InputFieldModule.default.fileInputContainer
   }, _react.default.createElement("span", {
     className: _InputFieldModule.default.input
@@ -86,25 +88,30 @@ InputField.propTypes = {
   onBlur: _propTypes.default.func,
   name: _propTypes.default.string,
   type: _propTypes.default.string,
+  required: _propTypes.default.bool,
   width: _propTypes.default.string,
   value: _propTypes.default.any,
   defaultValue: _propTypes.default.any,
   elementKey: _propTypes.default.string,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
   contentOnly: _propTypes.default.bool,
-  buttonColor: _propTypes.default.string,
+  buttonColor: _propTypes.default.oneOf(["default", "primary"]),
   buttonContent: _propTypes.default.string,
   selectedFileName: _propTypes.default.string,
+  dateFormat: _propTypes.default.string,
   placeholder: _propTypes.default.string,
   defaultContent: _propTypes.default.string,
   hasErrors: _propTypes.default.bool,
   errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
-  mandatory: _propTypes.default.bool,
   theme: _propTypes.default.object
 };
 InputField.defaultProps = {
+  onChange: function onChange() {
+    return false;
+  },
   name: "",
   type: "text",
+  required: false,
   label: "",
   contentOnly: false,
   buttonColor: "default",
@@ -112,11 +119,7 @@ InputField.defaultProps = {
   placeholder: "",
   defaultContent: "",
   hasErrors: false,
-  errorMessage: "",
-  mandatory: false,
-  onChange: function onChange() {
-    return false;
-  }
+  errorMessage: ""
 };
 var _default = InputField;
 exports.default = _default;

package/dist/components/InputField.module.scss

@@ -8,6 +8,11 @@
     > div {
         display: block;
     }
+    .requiredSymbol {
+        color: $color-error;
+        font-size: 0.8em;
+        vertical-align: top;
+    }
     input,
     &.file span.input {
         @include appearance(none);

package/dist/components/RadioButtonInput.js

@@ -28,15 +28,20 @@ var RadioButtonInput = function RadioButtonInput(props) {
     value: props.inputValue,
     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(_RadioButtonIcon.default, iconProps), _react.default.createElement("input", inputProps)) : null, _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(_RadioButtonIcon.default, iconProps), _react.default.createElement("input", inputProps)) : null, _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("span", {
+    className: _RadioButtonInputModule.default.requiredSymbol
+  }, "*")));
 };
 RadioButtonInput.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,
@@ -50,6 +55,8 @@ RadioButtonInput.defaultProps = {
   name: "",
   checked: false,
   disabled: false,
+  required: false,
+  requiredGroup: false,
   contentOnly: false,
   hasErrors: false
 };

package/dist/components/RadioButtonInput.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/RadioButtonList.js

@@ -11,12 +11,34 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var RadioButtonList = function RadioButtonList(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) === "RadioButtonListItem") {
+        var childElementCopy = _react.default.cloneElement(childElement, {
+          requiredGroup: props.required,
+          compact: props.compact,
+          key: "radioButtonListItem-".concat(index)
+        });
+        return childElementCopy;
+      } else {
+        var _childElementCopy = _react.default.cloneElement(childElement, {
+          key: "radiobuttonListChild-".concat(index)
+        });
+        return _childElementCopy;
+      }
+    });
+  };
   return _react.default.createElement("fieldset", {
     className: _RadioButtonListModule.default.radioButtonList
-  }, !!((_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: _RadioButtonListModule.default.requiredSymbol
+  }, "*")) : null, renderChildElements(props.children));
 };
 RadioButtonList.propTypes = {
-  legend: _propTypes.default.string
+  legend: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  compact: _propTypes.default.bool
 };
 var _default = RadioButtonList;
 exports.default = _default;

package/dist/components/RadioButtonList.module.scss

@@ -13,5 +13,10 @@ fieldset.radioButtonList {
         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/RadioButtonListItem.js

@@ -19,6 +19,8 @@ var RadioButtonListItem = function RadioButtonListItem(props) {
     inputValue: props.inputValue,
     checked: props.checked,
     disabled: props.disabled,
+    required: props.required,
+    requiredGroup: props.requiredGroup,
     contentOnly: props.contentOnly,
     hasErrors: props.hasErrors,
     id: props.id,
@@ -33,6 +35,8 @@ RadioButtonListItem.propTypes = {
   inputValue: _propTypes.default.string.isRequired,
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
+  required: _propTypes.default.bool,
+  requiredGroup: _propTypes.default.bool,
   name: _propTypes.default.string,
   id: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func,
@@ -44,6 +48,8 @@ RadioButtonListItem.propTypes = {
 RadioButtonListItem.defaultProps = {
   name: "",
   checked: false,
+  required: false,
+  requiredGroup: false,
   disabled: false,
   contentOnly: false,
   hasErrors: false

package/dist/components/Select.js

@@ -85,13 +85,17 @@ var Select = function Select(props) {
     });
     var selectElementProps = (_selectElementProps = {
       name: props.name,
-      multiple: props.multiple
+      multiple: props.multiple,
+      required: props.required,
+      disabled: props.disabled
     }, _defineProperty(_selectElementProps, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_selectElementProps, "onChange", props.onChange), _defineProperty(_selectElementProps, "id", props.id), _defineProperty(_selectElementProps, "role", props.role), _defineProperty(_selectElementProps, "key", "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6))), _defineProperty(_selectElementProps, "className", props.hasErrors ? _SelectModule.default.hasErrors : ""), _defineProperty(_selectElementProps, "style", styleRules), _selectElementProps);
     return _react.default.createElement("div", {
       className: _SelectModule.default.select
     }, _react.default.createElement(_Label.default, {
       htmlFor: props.id
-    }, props.label), _react.default.createElement("div", {
+    }, props.label, props.required && _react.default.createElement("span", {
+      className: _SelectModule.default.requiredSymbol
+    }, "*")), _react.default.createElement("div", {
       className: _SelectModule.default.selectContainer,
       style: _objectSpread({}, ((_props$width2 = props.width) === null || _props$width2 === void 0 ? void 0 : _props$width2.length) && {
         maxWidth: props.width
@@ -109,6 +113,8 @@ Select.propTypes = {
   id: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func.isRequired,
   name: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
   multiple: _propTypes.default.bool,
   options: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), _propTypes.default.shape({
     key: _propTypes.default.string,
@@ -128,7 +134,12 @@ Select.propTypes = {
   theme: _propTypes.default.object
 };
 Select.defaultProps = {
+  onChange: function onChange() {
+    return false;
+  },
   name: "",
+  required: false,
+  disabled: false,
   options: [],
   label: "",
   contentOnly: false,
@@ -137,10 +148,7 @@ Select.defaultProps = {
   placeholderValue: "",
   defaultContent: null,
   hasErrors: false,
-  errorMessage: "",
-  onChange: function onChange() {
-    return false;
-  }
+  errorMessage: ""
 };
 var _default = Select;
 exports.default = _default;

package/dist/components/Select.module.scss

@@ -1,6 +1,11 @@
 @import "../style/global.scss";
 
 .select {
+    .requiredSymbol {
+        color: $color-error;
+        font-size: 0.8em;
+        vertical-align: top;
+    }
     .selectContainer {
         position: relative;
 

package/dist/components/Textarea.js

@@ -38,19 +38,22 @@ var Textarea = function Textarea(props) {
       name: props.name,
       readOnly: props.readOnly,
       disabled: props.disabled,
+      required: props.required,
       type: props.type,
       id: props.id,
       key: defaultKey || "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
       onChange: props.onChange,
       onBlur: props.onBlur
-    }, _defineProperty(_textareaElementProps, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_textareaElementProps, "placeholder", props.placeholder), _defineProperty(_textareaElementProps, "rows", props.rows), _defineProperty(_textareaElementProps, "className", props.hasErrors ? _TextareaModule.default.hasErrors : ""), _defineProperty(_textareaElementProps, "aria-required", props.mandatory), _defineProperty(_textareaElementProps, "style", styleRules), _textareaElementProps);
+    }, _defineProperty(_textareaElementProps, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_textareaElementProps, "placeholder", props.placeholder), _defineProperty(_textareaElementProps, "rows", props.rows), _defineProperty(_textareaElementProps, "className", props.hasErrors ? _TextareaModule.default.hasErrors : ""), _defineProperty(_textareaElementProps, "style", styleRules), _textareaElementProps);
     return _react.default.createElement("textarea", textareaElementProps);
   };
   return _react.default.createElement("div", {
     className: _TextareaModule.default.textarea
   }, _react.default.createElement(_Label.default, {
     htmlFor: props.id
-  }, props.label), !props.contentOnly ? renderInputField() : _react.default.createElement("span", null, renderValueAsText(props.value || props.defaultValue, props.defaultContent)), _react.default.createElement(_ErrorMessage.default, {
+  }, props.label, props.required && _react.default.createElement("span", {
+    className: _TextareaModule.default.requiredSymbol
+  }, "*")), !props.contentOnly ? renderInputField() : _react.default.createElement("span", null, renderValueAsText(props.value || props.defaultValue, props.defaultContent)), _react.default.createElement(_ErrorMessage.default, {
     content: props.errorMessage,
     theme: props.theme
   }));
@@ -61,8 +64,9 @@ Textarea.propTypes = {
   onBlur: _propTypes.default.func,
   name: _propTypes.default.string,
   type: _propTypes.default.string,
+  required: _propTypes.default.bool,
   width: _propTypes.default.string,
-  resize: _propTypes.default.oneOf(['both', 'horizontal', 'vertical', 'none']),
+  resize: _propTypes.default.oneOf(["both", "horizontal", "vertical", "none"]),
   value: _propTypes.default.string,
   defaultValue: _propTypes.default.string,
   elementKey: _propTypes.default.string,
@@ -73,23 +77,22 @@ Textarea.propTypes = {
   defaultContent: _propTypes.default.string,
   hasErrors: _propTypes.default.bool,
   errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
-  mandatory: _propTypes.default.bool,
   theme: _propTypes.default.object
 };
 Textarea.defaultProps = {
+  onChange: function onChange() {
+    return false;
+  },
   name: "",
   type: "text",
+  required: false,
   label: "",
   contentOnly: false,
-  resize: 'both',
+  resize: "both",
   placeholder: "",
   defaultContent: "",
   hasErrors: false,
-  errorMessage: "",
-  mandatory: false,
-  onChange: function onChange() {
-    return false;
-  }
+  errorMessage: ""
 };
 var _default = Textarea;
 exports.default = _default;

package/dist/components/Textarea.module.scss

@@ -4,6 +4,11 @@
     > div {
         display: block;
     }
+    .requiredSymbol {
+        color: $color-error;
+        font-size: 0.8em;
+        vertical-align: top;
+    }
     textarea {
         @include appearance(none);
         @include transition(border-color 0.15s linear, background 0.15s linear);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dibk-design",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",