dibk-design 0.4.32 → 0.4.36

package/dist/components/CheckBoxIcon.module.scss

@@ -29,6 +29,11 @@
 
   &:local(.checked) {
     color: $color-primary;
+    &:local(.hasErrors) {
+      span {
+        color: #9d2024;
+      }
+    }
     &:local(.showBox) {
       &:not(:local(.hasErrors)) {
         @include box-shadow(0 0 0 1px #afaba8);

package/dist/components/InputField.js

@@ -11,18 +11,20 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Button = _interopRequireDefault(require("./Button"));
-
-var _Label = _interopRequireDefault(require("./Label"));
-
 var _reactDatepicker = _interopRequireWildcard(require("react-datepicker"));
 
 var _dateFns = require("date-fns");
 
 var _nb = _interopRequireDefault(require("date-fns/locale/nb"));
 
+var _Button = _interopRequireDefault(require("./Button"));
+
+var _Label = _interopRequireDefault(require("./Label"));
+
 var _theme = require("../functions/theme");
 
+var _generators = require("../functions/generators");
+
 require("react-datepicker/dist/react-datepicker.css");
 
 var _InputFieldModule = _interopRequireDefault(require("./InputField.module.scss"));
@@ -100,64 +102,63 @@ var InputField = /*#__PURE__*/function (_React$Component) {
       return this.props.type === 'date' ? value ? this.convertDateToString(value) : defaultContent : value ? value : defaultContent;
     }
   }, {
-    key: "renderInputField",
-    value: function renderInputField(defaultValue) {
-      var _this$props$width,
-          _this = this;
-
-      var styleRules = _objectSpread(_objectSpread({}, this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null), ((_this$props$width = this.props.width) === null || _this$props$width === void 0 ? void 0 : _this$props$width.length) && {
-        maxWidth: this.props.width
-      });
+    key: "getInputElementProps",
+    value: function getInputElementProps(defaultValue, styleRules) {
+      var _ref;
+
+      return _ref = {
+        name: this.props.name,
+        readOnly: this.props.readOnly,
+        disabled: this.props.disabled,
+        type: this.props.type,
+        id: this.props.id,
+        key: "".concat(this.props.id, "-").concat((0, _generators.generateRandomString)(6)),
+        onChange: this.props.onChange,
+        onBlur: this.props.onBlur
+      }, _defineProperty(_ref, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_ref, "placeholder", this.props.placeholder), _defineProperty(_ref, "className", this.props.hasErrors ? _InputFieldModule.default.hasErrors : ''), _defineProperty(_ref, 'aria-required', this.props.mandatory), _defineProperty(_ref, "style", styleRules), _ref;
+    }
+  }, {
+    key: "getDatePickerElementProps",
+    value: function getDatePickerElementProps(defaultValue) {
+      var _this = this;
 
-      if (this.props.type === 'date') {
-        var props = {
-          name: this.props.name,
-          readOnly: this.props.readOnly,
-          disabled: this.props.disabled,
-          id: this.props.id,
-          dateFormat: this.props.dateFormat,
-          locale: 'nb',
-          selectsStart: this.props.selectsStart,
-          selectsEnd: this.props.selectsEnd,
-          startDate: this.props.startDate ? new Date(this.props.startDate) : null,
-          endDate: this.props.endDate ? new Date(this.props.endDate) : null,
-          minDate: this.props.minDate || null,
-          maxDate: this.props.maxDate || null,
-          onChange: this.props.onChange ? function (date) {
-            return _this.props.onChange(date);
-          } : console.log("Missing onChange handler for date picker with id: ".concat(this.props.id)),
-          onBlur: this.props.onBlur ? function (date) {
-            return _this.props.onBlur(date);
-          } : null,
-          selected: defaultValue ? new Date(defaultValue) : null,
-          placeholderText: this.props.placeholder,
-          className: this.props.hasErrors ? _InputFieldModule.default.hasErrors : ''
-        };
-        return /*#__PURE__*/_react.default.createElement("div", {
-          style: styleRules
-        }, /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, props));
-      } else {
-        var _props2;
-
-        var _props = (_props2 = {
-          name: this.props.name,
-          readOnly: this.props.readOnly,
-          disabled: this.props.disabled,
-          type: this.props.type,
-          id: this.props.id,
-          onChange: this.props.onChange,
-          onBlur: this.props.onBlur
-        }, _defineProperty(_props2, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_props2, "placeholder", this.props.placeholder), _defineProperty(_props2, "className", this.props.hasErrors ? _InputFieldModule.default.hasErrors : ''), _defineProperty(_props2, 'aria-required', this.props.mandatory), _defineProperty(_props2, "style", styleRules), _props2);
-
-        return /*#__PURE__*/_react.default.createElement("input", _props);
-      }
+      return {
+        name: this.props.name,
+        readOnly: this.props.readOnly,
+        disabled: this.props.disabled,
+        id: this.props.id,
+        key: "".concat(this.props.id, "-").concat((0, _generators.generateRandomString)(6)),
+        dateFormat: this.props.dateFormat,
+        locale: 'nb',
+        selectsStart: this.props.selectsStart,
+        selectsEnd: this.props.selectsEnd,
+        startDate: this.props.startDate ? new Date(this.props.startDate) : null,
+        endDate: this.props.endDate ? new Date(this.props.endDate) : null,
+        minDate: this.props.minDate || null,
+        maxDate: this.props.maxDate || null,
+        onChange: this.props.onChange ? function (date) {
+          return _this.props.onChange(date);
+        } : console.log("Missing onChange handler for date picker with id: ".concat(this.props.id)),
+        onBlur: this.props.onBlur ? function (date) {
+          return _this.props.onBlur(date);
+        } : null,
+        selected: defaultValue ? new Date(defaultValue) : null,
+        placeholderText: this.props.placeholder,
+        className: this.props.hasErrors ? _InputFieldModule.default.hasErrors : ''
+      };
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this$props$width,
+          _this2 = this;
 
       var defaultValue = this.props.defaultValue ? this.props.defaultValue : this.props.value || null;
+
+      var styleRules = _objectSpread(_objectSpread({}, this.props.hasErrors ? this.getThemeErrorInputStyle(this.props.theme) : null), ((_this$props$width = this.props.width) === null || _this$props$width === void 0 ? void 0 : _this$props$width.length) && {
+        maxWidth: this.props.width
+      });
+
       return /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_InputFieldModule.default.inputField, " ").concat(_InputFieldModule.default[this.props.type])
       }, /*#__PURE__*/_react.default.createElement(_Label.default, {
@@ -173,7 +174,9 @@ var InputField = /*#__PURE__*/function (_React$Component) {
         },
         content: this.props.buttonContent,
         theme: this.props.theme
-      }) : '') : ''), !this.props.contentOnly ? this.renderInputField(defaultValue) : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
+      }) : '') : ''), !this.props.contentOnly ? this.props.type === 'date' ? /*#__PURE__*/_react.default.createElement("div", {
+        style: styleRules
+      }, /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, this.getDatePickerElementProps(defaultValue))) : /*#__PURE__*/_react.default.createElement("input", this.getInputElementProps(defaultValue, styleRules)) : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
         className: _InputFieldModule.default.errorMessage,
         style: this.getThemeErrorMessageStyle(this.props.theme)
       }, this.props.errorMessage ? this.props.errorMessage : ''));

package/dist/components/RadioButtonIcon.js

@@ -70,7 +70,7 @@ var RadioButtonIcon = /*#__PURE__*/function (_React$Component) {
       }
 
       return /*#__PURE__*/_react.default.createElement("span", {
-        className: "".concat(_RadioButtonIconModule.default.radioButtonIcon, " ").concat(this.props.checked ? _RadioButtonIconModule.default.checked : '', " ").concat(this.props.disabled ? _RadioButtonIconModule.default.disabled : ''),
+        className: "".concat(_RadioButtonIconModule.default.radioButtonIcon, " ").concat(this.props.checked ? _RadioButtonIconModule.default.checked : '', " ").concat(this.props.disabled ? _RadioButtonIconModule.default.disabled : '', " ").concat(this.props.hasErrors ? _RadioButtonIconModule.default.hasErrors : ''),
         style: inlineStyle
       });
     }
@@ -83,12 +83,14 @@ RadioButtonIcon.propTypes = {
   size: _propTypes.default.string,
   checked: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
-  theme: _propTypes.default.object
+  theme: _propTypes.default.object,
+  hasErrors: _propTypes.default.bool
 };
 RadioButtonIcon.defaultProps = {
   size: '10px',
   checked: false,
-  disabled: false
+  disabled: false,
+  hasErrors: false
 };
 var _default = RadioButtonIcon;
 exports.default = _default;

package/dist/components/RadioButtonIcon.md

@@ -5,6 +5,10 @@ Regular radio button icons example:
 <RadioButtonIcon checked={true} />
 <RadioButtonIcon disabled={true} />
 <RadioButtonIcon checked={true} disabled={true} />
+<RadioButtonIcon hasErrors={true} />
+<RadioButtonIcon hasErrors={true} disabled={true} />
+<RadioButtonIcon checked={true} hasErrors={true} />
+<RadioButtonIcon checked={true} hasErrors={true} disabled={true} />
 ```
 
 Themed Regular radio button icons example:
@@ -16,6 +20,10 @@ import customTheme from 'data/customTheme';
   <RadioButtonIcon checked={true} theme={customTheme} />
   <RadioButtonIcon theme={customTheme} disabled={true} />
   <RadioButtonIcon checked={true} theme={customTheme} disabled={true} />
+  <RadioButtonIcon hasErrors={true} theme={customTheme} />
+  <RadioButtonIcon hasErrors={true} disabled={true} theme={customTheme} />
+  <RadioButtonIcon checked={true} hasErrors={true} theme={customTheme} />
+  <RadioButtonIcon checked={true} hasErrors={true} disabled={true} theme={customTheme} />
 </React.Fragment>
 ```
 
@@ -26,4 +34,8 @@ Radio button icons with custom size example:
 <RadioButtonIcon size='36px' checked={true} />
 <RadioButtonIcon size='36px' disabled={true} />
 <RadioButtonIcon size='36px' checked={true} disabled={true} />
+<RadioButtonIcon size='36px' hasErrors={true} />
+<RadioButtonIcon size='36px' hasErrors={true} disabled={true} />
+<RadioButtonIcon size='36px' checked={true} hasErrors={true} />
+<RadioButtonIcon size='36px' checked={true} hasErrors={true} disabled={true} />
 ```

package/dist/components/RadioButtonIcon.module.scss

@@ -2,7 +2,6 @@
 
 :local(.radioButtonIcon) {
   @include border-radius(50%);
-  @include box-shadow(0 0 0 1px #afaba8);
   @include transition(all 0.1s ease-in-out);
   @include box-sizing(content-box);
   display: inline-block;
@@ -16,9 +15,24 @@
   border: 0.3em solid white;
   cursor: pointer;
 
+  &:not(:local(.hasErrors)) {
+    @include box-shadow(0 0 0 1px #afaba8);
+  }
+  &:local(.hasErrors) {
+    @include box-shadow(0 0 2px 1px #9d2024);
+  }
+
   &:local(.checked) {
-    @include box-shadow(0 0 0 1px $color-dark-blue);
     background: $color-primary;
+    &:local(.hasErrors) {
+      background: #9d2024;
+    }
+    &:not(:local(.hasErrors)) {
+      @include box-shadow(0 0 0 1px $color-dark-blue);
+    }
+    &:local(.hasErrors) {
+      @include box-shadow(0 0 2px 1px #9d2024);
+    }
   }
   &:local(.disabled) {
     opacity: 0.5;

package/dist/components/RadioButtonInput.js

@@ -53,11 +53,12 @@ var RadioButtonInput = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       return /*#__PURE__*/_react.default.createElement("label", {
         htmlFor: this.props.id,
-        className: "".concat(_RadioButtonInputModule.default.radioButtonInput, " ").concat(this.props.checked ? _RadioButtonInputModule.default.checked : '', " ").concat(this.props.disabled ? _RadioButtonInputModule.default.disabled : '')
+        className: "".concat(_RadioButtonInputModule.default.radioButtonInput, " ").concat(this.props.checked ? _RadioButtonInputModule.default.checked : '', " ").concat(this.props.disabled ? _RadioButtonInputModule.default.disabled : '', " ").concat(this.props.hasErrors ? _RadioButtonInputModule.default.hasErrors : '')
       }, !this.props.contentOnly ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_RadioButtonIcon.default, {
         checked: this.props.checked,
         disabled: this.props.disabled,
-        theme: this.props.theme
+        theme: this.props.theme,
+        hasErrors: this.props.hasErrors
       }), /*#__PURE__*/_react.default.createElement("input", {
         type: "radio",
         onChange: this.props.onChange,
@@ -80,13 +81,15 @@ RadioButtonInput.propTypes = {
   id: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func,
   contentOnly: _propTypes.default.bool,
-  theme: _propTypes.default.object
+  theme: _propTypes.default.object,
+  hasErrors: _propTypes.default.bool
 };
 RadioButtonInput.defaultProps = {
   name: '',
   checked: false,
   disabled: false,
-  contentOnly: false
+  contentOnly: false,
+  hasErrors: false
 };
 var _default = RadioButtonInput;
 exports.default = _default;

package/dist/components/RadioButtonInput.module.scss

@@ -12,6 +12,13 @@
     }
   }
 
+
+  &:local(.hasErrors) {
+    span {
+      color: #9d2024;
+    }
+  }
+
   input[type="radio"] {
     opacity: 0;
     position: absolute;

package/dist/components/RadioButtonListItem.js

@@ -52,13 +52,14 @@ var RadioButtonListItem = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "".concat(_RadioButtonListItemModule.default.radioButtonListItem, " ").concat(this.props.disabled ? _RadioButtonListItemModule.default.disabled : '', " ").concat(this.props.compact ? _RadioButtonListItemModule.default.compact : '', " ").concat(this.props.contentOnly ? _RadioButtonListItemModule.default.contentOnly : '')
+        className: "".concat(_RadioButtonListItemModule.default.radioButtonListItem, " ").concat(this.props.disabled ? _RadioButtonListItemModule.default.disabled : '', " ").concat(this.props.compact ? _RadioButtonListItemModule.default.compact : '', " ").concat(this.props.contentOnly ? _RadioButtonListItemModule.default.contentOnly : '', " ").concat(this.props.hasErrors ? _RadioButtonListItemModule.default.hasErrors : '')
       }, /*#__PURE__*/_react.default.createElement(_RadioButtonInput.default, {
         onChange: this.props.onChange,
         inputValue: this.props.inputValue,
         checked: this.props.checked,
         disabled: this.props.disabled,
         contentOnly: this.props.contentOnly,
+        hasErrors: this.props.hasErrors,
         id: this.props.id,
         theme: this.props.theme
       }, this.props.children));
@@ -77,13 +78,15 @@ RadioButtonListItem.propTypes = {
   id: _propTypes.default.string.isRequired,
   onChange: _propTypes.default.func,
   contentOnly: _propTypes.default.bool,
-  theme: _propTypes.default.object
+  theme: _propTypes.default.object,
+  hasErrors: _propTypes.default.bool
 };
 RadioButtonListItem.defaultProps = {
   name: '',
   checked: false,
   disabled: false,
-  contentOnly: false
+  contentOnly: false,
+  hasErrors: false
 };
 var _default = RadioButtonListItem;
 exports.default = _default;

package/dist/components/RadioButtonListItem.md

@@ -15,6 +15,23 @@ Radio button list item example:
 </RadioButtonListItem>
 ```
 
+Radio button with errors list item example:
+
+```js
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-1" checked={true} hasErrors={true}>
+  Checked radio button with errors
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-2" hasErrors={true}>
+  Unchecked radio button with errors
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 1" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-3" checked={true} disabled={true} hasErrors={true}>
+  Disabled checked radio button with errors
+</RadioButtonListItem>
+<RadioButtonListItem onChange={()=>{console.log('onchange')}} inputValue="value 2" name="radio-button-list-item-with-errors" id="radio-button-list-item-with-errors-4" disabled={true} hasErrors={true}>
+  Disabled Unchecked radio button with errors
+</RadioButtonListItem>
+```
+
 Compact radio button list item example:
 
 ```js

package/dist/components/Select.js

@@ -13,6 +13,8 @@ var _Label = _interopRequireDefault(require("./Label"));
 
 var _theme = require("../functions/theme");
 
+var _generators = require("../functions/generators");
+
 var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -151,7 +153,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
         var props = (_props = {
           name: this.props.name,
           multiple: this.props.multiple
-        }, _defineProperty(_props, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_props, "onChange", this.props.onChange), _defineProperty(_props, "id", this.props.id), _defineProperty(_props, "className", this.props.hasErrors ? _SelectModule.default.hasErrors : ''), _defineProperty(_props, "style", styleRules), _props);
+        }, _defineProperty(_props, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_props, "onChange", this.props.onChange), _defineProperty(_props, "id", this.props.id), _defineProperty(_props, "key", "".concat(this.props.id, "-").concat((0, _generators.generateRandomString)(6))), _defineProperty(_props, "className", this.props.hasErrors ? _SelectModule.default.hasErrors : ''), _defineProperty(_props, "style", styleRules), _props);
         return /*#__PURE__*/_react.default.createElement("div", {
           className: _SelectModule.default.select
         }, /*#__PURE__*/_react.default.createElement(_Label.default, {

package/dist/components/Textarea.js

@@ -15,6 +15,8 @@ var _Label = _interopRequireDefault(require("./Label"));
 
 var _theme = require("../functions/theme");
 
+var _generators = require("../functions/generators");
+
 var _TextareaModule = _interopRequireDefault(require("./Textarea.module.scss"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -95,6 +97,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         disabled: this.props.disabled,
         type: this.props.type,
         id: this.props.id,
+        key: "".concat(this.props.id, "-").concat((0, _generators.generateRandomString)(6)),
         onChange: this.props.onChange,
         onBlur: this.props.onBlur
       }, _defineProperty(_props, defaultValue ? 'defaultValue' : 'value', defaultValue || this.props.value), _defineProperty(_props, "placeholder", this.props.placeholder), _defineProperty(_props, "rows", this.props.rows), _defineProperty(_props, "className", this.props.hasErrors ? _TextareaModule.default.hasErrors : ''), _defineProperty(_props, 'aria-required', this.props.mandatory), _defineProperty(_props, "style", styleRules), _props);

package/dist/functions/generators.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateRandomString = void 0;
+
+var generateRandomString = function generateRandomString(length) {
+  var result = '';
+  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  var charactersLength = characters.length;
+
+  for (var i = 0; i < length; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+
+  return result;
+};
+
+exports.generateRandomString = generateRandomString;

package/package.json

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