dibk-design 0.4.34 → 0.4.38

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/components/Accordion.js +1 -1
  2. package/dist/components/Button.js +1 -1
  3. package/dist/components/CheckBoxIcon.js +1 -1
  4. package/dist/components/CheckBoxIcon.module.scss +5 -0
  5. package/dist/components/CheckBoxInput.js +1 -1
  6. package/dist/components/CheckBoxListItem.js +1 -1
  7. package/dist/components/ContentBox.js +1 -1
  8. package/dist/components/Dialog.js +1 -1
  9. package/dist/components/DragAndDropFileInput.js +1 -1
  10. package/dist/components/Footer.js +1 -1
  11. package/dist/components/Header.js +10 -3
  12. package/dist/components/Header.md +2 -0
  13. package/dist/components/Header.module.scss +27 -27
  14. package/dist/components/InputField.js +14 -10
  15. package/dist/components/InputField.md +1 -0
  16. package/dist/components/Label.js +1 -1
  17. package/dist/components/List.js +1 -1
  18. package/dist/components/LoadingAnimation.js +1 -1
  19. package/dist/components/NavigationBar.js +1 -1
  20. package/dist/components/NavigationBarListItem.js +1 -1
  21. package/dist/components/Paper.js +1 -1
  22. package/dist/components/RadioButtonIcon.js +6 -4
  23. package/dist/components/RadioButtonIcon.md +12 -0
  24. package/dist/components/RadioButtonIcon.module.scss +16 -2
  25. package/dist/components/RadioButtonInput.js +8 -5
  26. package/dist/components/RadioButtonInput.module.scss +7 -0
  27. package/dist/components/RadioButtonListItem.js +7 -4
  28. package/dist/components/RadioButtonListItem.md +17 -0
  29. package/dist/components/Select.js +4 -2
  30. package/dist/components/Textarea.js +4 -1
  31. package/dist/components/Theme.js +1 -1
  32. package/dist/components/WizardNavigation/Step.js +1 -1
  33. package/dist/components/WizardNavigation.js +1 -1
  34. package/dist/functions/generators.js +20 -0
  35. package/package.json +1 -1
@@ -21,7 +21,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
21
21
 
22
22
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
23
23
 
24
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
24
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
25
25
 
26
26
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
27
27
 
@@ -31,7 +31,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
31
31
 
32
32
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
33
33
 
34
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
34
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
35
35
 
36
36
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
37
37
 
@@ -29,7 +29,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
29
29
 
30
30
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
31
31
 
32
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
32
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
33
33
 
34
34
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
35
35
 
@@ -29,6 +29,11 @@
29
29
 
30
30
  &:local(.checked) {
31
31
  color: $color-primary;
32
+ &:local(.hasErrors) {
33
+ span {
34
+ color: #9d2024;
35
+ }
36
+ }
32
37
  &:local(.showBox) {
33
38
  &:not(:local(.hasErrors)) {
34
39
  @include box-shadow(0 0 0 1px #afaba8);
@@ -23,7 +23,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
23
23
 
24
24
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
25
25
 
26
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
26
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
27
27
 
28
28
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
29
29
 
@@ -23,7 +23,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
23
23
 
24
24
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
25
25
 
26
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
26
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
27
27
 
28
28
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
29
29
 
@@ -21,7 +21,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
21
21
 
22
22
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
23
23
 
24
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
24
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
25
25
 
26
26
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
27
27
 
@@ -21,7 +21,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
21
21
 
22
22
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
23
23
 
24
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
24
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
25
25
 
26
26
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
27
27
 
@@ -23,7 +23,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
23
23
 
24
24
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
25
25
 
26
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
26
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
27
27
 
28
28
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
29
29
 
@@ -19,7 +19,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
19
19
 
20
20
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
21
21
 
22
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
22
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
23
23
 
24
24
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
25
25
 
@@ -21,7 +21,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
21
21
 
22
22
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
23
23
 
24
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
24
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
25
25
 
26
26
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
27
27
 
@@ -49,11 +49,17 @@ var Header = /*#__PURE__*/function (_React$Component) {
49
49
  _createClass(Header, [{
50
50
  key: "render",
51
51
  value: function render() {
52
+ var _this$props$htmlTag;
53
+
52
54
  var bigClass = this.props.big ? _HeaderModule.default.bigHeader : '';
53
55
  var themeClass = this.props.theme ? _HeaderModule.default.hasTheme : '';
56
+ var htmlTag = (_this$props$htmlTag = this.props.htmlTag) !== null && _this$props$htmlTag !== void 0 && _this$props$htmlTag.length ? this.props.htmlTag : "h".concat(this.props.size);
57
+ var headerClass = _HeaderModule.default.header;
58
+
59
+ var headerSizeClass = _HeaderModule.default["size-".concat(this.props.size)];
54
60
 
55
- var headerElement = /*#__PURE__*/_react.default.createElement('h' + this.props.size, {
56
- className: "".concat(_HeaderModule.default.header, " ").concat(bigClass, " ").concat(themeClass)
61
+ var headerElement = /*#__PURE__*/_react.default.createElement(htmlTag, {
62
+ className: "".concat(headerClass, " ").concat(headerSizeClass, " ").concat(bigClass, " ").concat(themeClass)
57
63
  }, this.props.content);
58
64
 
59
65
  return /*#__PURE__*/_react.default.createElement("div", {
@@ -70,6 +76,7 @@ Header.propTypes = {
70
76
  content: _propTypes.default.string.isRequired,
71
77
  size: _propTypes.default.oneOf([1, 2, 3, 4, 5]),
72
78
  big: _propTypes.default.bool,
79
+ htmlTag: _propTypes.default.string,
73
80
  theme: _propTypes.default.object
74
81
  };
75
82
  Header.defaultProps = {
@@ -5,4 +5,6 @@ Title examples:
5
5
  <Header content="Title with size 2" size={2}/>
6
6
  <Header content="Title with size 3" size={3}/>
7
7
  <Header content="Big title with size 1" big/>
8
+ <Header content="Title with size 2 and htmlTag h1" size={2} htmlTag="h1"/>
9
+
8
10
  ```
@@ -12,33 +12,33 @@
12
12
  &:not(:local(.hasTheme)) {
13
13
  color: $color-primary;
14
14
  }
15
- }
16
- :local(h1.header) {
17
- font-family: "Altis", sans-serif;
18
- font-size: 38px;
19
- font-style: normal;
20
- font-weight: 500;
21
- line-height: 1.43;
22
- &:local(.bigHeader) {
23
- font-family: "Altis-Light", "Open Sans", arial, sans-serif;
24
- font-size: 50px;
25
- line-height: 1.2;
26
- overflow: hidden;
27
- text-overflow: ellipsis;
15
+ &:local(.size-1) {
16
+ font-family: "Altis", sans-serif;
17
+ font-size: 38px;
18
+ font-style: normal;
19
+ font-weight: 500;
20
+ line-height: 1.43;
21
+ &:local(.bigHeader) {
22
+ font-family: "Altis-Light", "Open Sans", arial, sans-serif;
23
+ font-size: 50px;
24
+ line-height: 1.2;
25
+ overflow: hidden;
26
+ text-overflow: ellipsis;
27
+ }
28
+ }
29
+ &:local(.size-2) {
30
+ font-family: "Altis", sans-serif;
31
+ font-size: 30px;
32
+ font-style: normal;
33
+ font-weight: 500;
34
+ line-height: 1.42;
35
+ }
36
+ &:local(.size-3) {
37
+ font-family: "Open Sans", arial, sans-serif;
38
+ font-size: 22px;
39
+ font-style: normal;
40
+ font-weight: bold;
41
+ line-height: 1;
28
42
  }
29
- }
30
- :local(h2.header) {
31
- font-family: "Altis", sans-serif;
32
- font-size: 30px;
33
- font-style: normal;
34
- font-weight: 500;
35
- line-height: 1.42;
36
- }
37
- :local(h3.header) {
38
- font-family: "Open Sans", arial, sans-serif;
39
- font-size: 22px;
40
- font-style: normal;
41
- font-weight: bold;
42
- line-height: 1;
43
43
  }
44
44
  }
@@ -11,18 +11,20 @@ var _react = _interopRequireDefault(require("react"));
11
11
 
12
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
13
13
 
14
- var _Button = _interopRequireDefault(require("./Button"));
15
-
16
- var _Label = _interopRequireDefault(require("./Label"));
17
-
18
14
  var _reactDatepicker = _interopRequireWildcard(require("react-datepicker"));
19
15
 
20
16
  var _dateFns = require("date-fns");
21
17
 
22
18
  var _nb = _interopRequireDefault(require("date-fns/locale/nb"));
23
19
 
20
+ var _Button = _interopRequireDefault(require("./Button"));
21
+
22
+ var _Label = _interopRequireDefault(require("./Label"));
23
+
24
24
  var _theme = require("../functions/theme");
25
25
 
26
+ var _generators = require("../functions/generators");
27
+
26
28
  require("react-datepicker/dist/react-datepicker.css");
27
29
 
28
30
  var _InputFieldModule = _interopRequireDefault(require("./InputField.module.scss"));
@@ -45,7 +47,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
45
47
 
46
48
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
47
49
 
48
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
50
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
49
51
 
50
52
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
51
53
 
@@ -101,7 +103,7 @@ var InputField = /*#__PURE__*/function (_React$Component) {
101
103
  }
102
104
  }, {
103
105
  key: "getInputElementProps",
104
- value: function getInputElementProps(defaultValue, styleRules) {
106
+ value: function getInputElementProps(defaultValue, defaultKey, styleRules) {
105
107
  var _ref;
106
108
 
107
109
  return _ref = {
@@ -110,14 +112,14 @@ var InputField = /*#__PURE__*/function (_React$Component) {
110
112
  disabled: this.props.disabled,
111
113
  type: this.props.type,
112
114
  id: this.props.id,
113
- key: "".concat(this.props.id).concat(defaultValue ? '-' + defaultValue : ''),
115
+ key: defaultKey || "".concat(this.props.id, "-").concat((0, _generators.generateRandomString)(6)),
114
116
  onChange: this.props.onChange,
115
117
  onBlur: this.props.onBlur
116
118
  }, _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;
117
119
  }
118
120
  }, {
119
121
  key: "getDatePickerElementProps",
120
- value: function getDatePickerElementProps(defaultValue) {
122
+ value: function getDatePickerElementProps(defaultValue, defaultKey) {
121
123
  var _this = this;
122
124
 
123
125
  return {
@@ -125,7 +127,7 @@ var InputField = /*#__PURE__*/function (_React$Component) {
125
127
  readOnly: this.props.readOnly,
126
128
  disabled: this.props.disabled,
127
129
  id: this.props.id,
128
- key: "".concat(this.props.id).concat(defaultValue ? '-' + defaultValue : ''),
130
+ key: defaultKey || "".concat(this.props.id, "-").concat((0, _generators.generateRandomString)(6)),
129
131
  dateFormat: this.props.dateFormat,
130
132
  locale: 'nb',
131
133
  selectsStart: this.props.selectsStart,
@@ -152,6 +154,7 @@ var InputField = /*#__PURE__*/function (_React$Component) {
152
154
  _this2 = this;
153
155
 
154
156
  var defaultValue = this.props.defaultValue ? this.props.defaultValue : this.props.value || null;
157
+ var defaultKey = this.props.elementKey || null;
155
158
 
156
159
  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) && {
157
160
  maxWidth: this.props.width
@@ -174,7 +177,7 @@ var InputField = /*#__PURE__*/function (_React$Component) {
174
177
  theme: this.props.theme
175
178
  }) : '') : ''), !this.props.contentOnly ? this.props.type === 'date' ? /*#__PURE__*/_react.default.createElement("div", {
176
179
  style: styleRules
177
- }, /*#__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", {
180
+ }, /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, this.getDatePickerElementProps(defaultValue, defaultKey))) : /*#__PURE__*/_react.default.createElement("input", this.getInputElementProps(defaultValue, defaultKey, styleRules)) : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
178
181
  className: _InputFieldModule.default.errorMessage,
179
182
  style: this.getThemeErrorMessageStyle(this.props.theme)
180
183
  }, this.props.errorMessage ? this.props.errorMessage : ''));
@@ -194,6 +197,7 @@ InputField.propTypes = {
194
197
  width: _propTypes.default.string,
195
198
  value: _propTypes.default.any,
196
199
  defaultValue: _propTypes.default.any,
200
+ elementKey: _propTypes.default.string,
197
201
  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
198
202
  contentOnly: _propTypes.default.bool,
199
203
  buttonColor: _propTypes.default.string,
@@ -23,6 +23,7 @@ Input field example:
23
23
  <InputField id="dateInput6" onChange={(date) => console.log("date", date)} type="date" label="Datepicker with value for end date" value="2020-05-19T13:12:04" selectsEnd startDate="2020-05-10T13:12:04" endDate="2020-05-19T13:12:04" />
24
24
  <InputField id="dateInput7" onChange={(date) => console.log("date", date)} type="date" label="Datepicker with defaultContent and contentOnly set to true" contentOnly={true} defaultContent="Please insert a value" />
25
25
  <InputField id="textInput9" value="InputField with value and custom width" width="400px" />
26
+ <InputField id="textInput10" value="InputField with a not auto generated key" elementKey="inputKeyHere" />
26
27
  ```
27
28
 
28
29
  Themed Input field example:
@@ -29,7 +29,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
29
29
 
30
30
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
31
31
 
32
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
32
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
33
33
 
34
34
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
35
35
 
@@ -21,7 +21,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
21
21
 
22
22
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
23
23
 
24
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
24
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
25
25
 
26
26
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
27
27
 
@@ -21,7 +21,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
21
21
 
22
22
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
23
23
 
24
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
24
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
25
25
 
26
26
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
27
27
 
@@ -29,7 +29,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
29
29
 
30
30
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
31
31
 
32
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
32
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
33
33
 
34
34
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
35
35
 
@@ -21,7 +21,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
21
21
 
22
22
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
23
23
 
24
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
24
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
25
25
 
26
26
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
27
27
 
@@ -21,7 +21,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
21
21
 
22
22
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
23
23
 
24
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
24
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
25
25
 
26
26
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
27
27
 
@@ -29,7 +29,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
29
29
 
30
30
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
31
31
 
32
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
32
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
33
33
 
34
34
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
35
35
 
@@ -70,7 +70,7 @@ var RadioButtonIcon = /*#__PURE__*/function (_React$Component) {
70
70
  }
71
71
 
72
72
  return /*#__PURE__*/_react.default.createElement("span", {
73
- className: "".concat(_RadioButtonIconModule.default.radioButtonIcon, " ").concat(this.props.checked ? _RadioButtonIconModule.default.checked : '', " ").concat(this.props.disabled ? _RadioButtonIconModule.default.disabled : ''),
73
+ 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 : ''),
74
74
  style: inlineStyle
75
75
  });
76
76
  }
@@ -83,12 +83,14 @@ RadioButtonIcon.propTypes = {
83
83
  size: _propTypes.default.string,
84
84
  checked: _propTypes.default.bool,
85
85
  disabled: _propTypes.default.bool,
86
- theme: _propTypes.default.object
86
+ theme: _propTypes.default.object,
87
+ hasErrors: _propTypes.default.bool
87
88
  };
88
89
  RadioButtonIcon.defaultProps = {
89
90
  size: '10px',
90
91
  checked: false,
91
- disabled: false
92
+ disabled: false,
93
+ hasErrors: false
92
94
  };
93
95
  var _default = RadioButtonIcon;
94
96
  exports.default = _default;
@@ -5,6 +5,10 @@ Regular radio button icons example:
5
5
  <RadioButtonIcon checked={true} />
6
6
  <RadioButtonIcon disabled={true} />
7
7
  <RadioButtonIcon checked={true} disabled={true} />
8
+ <RadioButtonIcon hasErrors={true} />
9
+ <RadioButtonIcon hasErrors={true} disabled={true} />
10
+ <RadioButtonIcon checked={true} hasErrors={true} />
11
+ <RadioButtonIcon checked={true} hasErrors={true} disabled={true} />
8
12
  ```
9
13
 
10
14
  Themed Regular radio button icons example:
@@ -16,6 +20,10 @@ import customTheme from 'data/customTheme';
16
20
  <RadioButtonIcon checked={true} theme={customTheme} />
17
21
  <RadioButtonIcon theme={customTheme} disabled={true} />
18
22
  <RadioButtonIcon checked={true} theme={customTheme} disabled={true} />
23
+ <RadioButtonIcon hasErrors={true} theme={customTheme} />
24
+ <RadioButtonIcon hasErrors={true} disabled={true} theme={customTheme} />
25
+ <RadioButtonIcon checked={true} hasErrors={true} theme={customTheme} />
26
+ <RadioButtonIcon checked={true} hasErrors={true} disabled={true} theme={customTheme} />
19
27
  </React.Fragment>
20
28
  ```
21
29
 
@@ -26,4 +34,8 @@ Radio button icons with custom size example:
26
34
  <RadioButtonIcon size='36px' checked={true} />
27
35
  <RadioButtonIcon size='36px' disabled={true} />
28
36
  <RadioButtonIcon size='36px' checked={true} disabled={true} />
37
+ <RadioButtonIcon size='36px' hasErrors={true} />
38
+ <RadioButtonIcon size='36px' hasErrors={true} disabled={true} />
39
+ <RadioButtonIcon size='36px' checked={true} hasErrors={true} />
40
+ <RadioButtonIcon size='36px' checked={true} hasErrors={true} disabled={true} />
29
41
  ```
@@ -2,7 +2,6 @@
2
2
 
3
3
  :local(.radioButtonIcon) {
4
4
  @include border-radius(50%);
5
- @include box-shadow(0 0 0 1px #afaba8);
6
5
  @include transition(all 0.1s ease-in-out);
7
6
  @include box-sizing(content-box);
8
7
  display: inline-block;
@@ -16,9 +15,24 @@
16
15
  border: 0.3em solid white;
17
16
  cursor: pointer;
18
17
 
18
+ &:not(:local(.hasErrors)) {
19
+ @include box-shadow(0 0 0 1px #afaba8);
20
+ }
21
+ &:local(.hasErrors) {
22
+ @include box-shadow(0 0 2px 1px #9d2024);
23
+ }
24
+
19
25
  &:local(.checked) {
20
- @include box-shadow(0 0 0 1px $color-dark-blue);
21
26
  background: $color-primary;
27
+ &:local(.hasErrors) {
28
+ background: #9d2024;
29
+ }
30
+ &:not(:local(.hasErrors)) {
31
+ @include box-shadow(0 0 0 1px $color-dark-blue);
32
+ }
33
+ &:local(.hasErrors) {
34
+ @include box-shadow(0 0 2px 1px #9d2024);
35
+ }
22
36
  }
23
37
  &:local(.disabled) {
24
38
  opacity: 0.5;
@@ -23,7 +23,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
23
23
 
24
24
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
25
25
 
26
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
26
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
27
27
 
28
28
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
29
29
 
@@ -53,11 +53,12 @@ var RadioButtonInput = /*#__PURE__*/function (_React$Component) {
53
53
  value: function render() {
54
54
  return /*#__PURE__*/_react.default.createElement("label", {
55
55
  htmlFor: this.props.id,
56
- className: "".concat(_RadioButtonInputModule.default.radioButtonInput, " ").concat(this.props.checked ? _RadioButtonInputModule.default.checked : '', " ").concat(this.props.disabled ? _RadioButtonInputModule.default.disabled : '')
56
+ 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 : '')
57
57
  }, !this.props.contentOnly ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_RadioButtonIcon.default, {
58
58
  checked: this.props.checked,
59
59
  disabled: this.props.disabled,
60
- theme: this.props.theme
60
+ theme: this.props.theme,
61
+ hasErrors: this.props.hasErrors
61
62
  }), /*#__PURE__*/_react.default.createElement("input", {
62
63
  type: "radio",
63
64
  onChange: this.props.onChange,
@@ -80,13 +81,15 @@ RadioButtonInput.propTypes = {
80
81
  id: _propTypes.default.string.isRequired,
81
82
  onChange: _propTypes.default.func,
82
83
  contentOnly: _propTypes.default.bool,
83
- theme: _propTypes.default.object
84
+ theme: _propTypes.default.object,
85
+ hasErrors: _propTypes.default.bool
84
86
  };
85
87
  RadioButtonInput.defaultProps = {
86
88
  name: '',
87
89
  checked: false,
88
90
  disabled: false,
89
- contentOnly: false
91
+ contentOnly: false,
92
+ hasErrors: false
90
93
  };
91
94
  var _default = RadioButtonInput;
92
95
  exports.default = _default;
@@ -12,6 +12,13 @@
12
12
  }
13
13
  }
14
14
 
15
+
16
+ &:local(.hasErrors) {
17
+ span {
18
+ color: #9d2024;
19
+ }
20
+ }
21
+
15
22
  input[type="radio"] {
16
23
  opacity: 0;
17
24
  position: absolute;
@@ -23,7 +23,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
23
23
 
24
24
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
25
25
 
26
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
26
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
27
27
 
28
28
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
29
29
 
@@ -52,13 +52,14 @@ var RadioButtonListItem = /*#__PURE__*/function (_React$Component) {
52
52
  key: "render",
53
53
  value: function render() {
54
54
  return /*#__PURE__*/_react.default.createElement("div", {
55
- 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 : '')
55
+ 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 : '')
56
56
  }, /*#__PURE__*/_react.default.createElement(_RadioButtonInput.default, {
57
57
  onChange: this.props.onChange,
58
58
  inputValue: this.props.inputValue,
59
59
  checked: this.props.checked,
60
60
  disabled: this.props.disabled,
61
61
  contentOnly: this.props.contentOnly,
62
+ hasErrors: this.props.hasErrors,
62
63
  id: this.props.id,
63
64
  theme: this.props.theme
64
65
  }, this.props.children));
@@ -77,13 +78,15 @@ RadioButtonListItem.propTypes = {
77
78
  id: _propTypes.default.string.isRequired,
78
79
  onChange: _propTypes.default.func,
79
80
  contentOnly: _propTypes.default.bool,
80
- theme: _propTypes.default.object
81
+ theme: _propTypes.default.object,
82
+ hasErrors: _propTypes.default.bool
81
83
  };
82
84
  RadioButtonListItem.defaultProps = {
83
85
  name: '',
84
86
  checked: false,
85
87
  disabled: false,
86
- contentOnly: false
88
+ contentOnly: false,
89
+ hasErrors: false
87
90
  };
88
91
  var _default = RadioButtonListItem;
89
92
  exports.default = _default;
@@ -15,6 +15,23 @@ Radio button list item example:
15
15
  </RadioButtonListItem>
16
16
  ```
17
17
 
18
+ Radio button with errors list item example:
19
+
20
+ ```js
21
+ <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}>
22
+ Checked radio button with errors
23
+ </RadioButtonListItem>
24
+ <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}>
25
+ Unchecked radio button with errors
26
+ </RadioButtonListItem>
27
+ <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}>
28
+ Disabled checked radio button with errors
29
+ </RadioButtonListItem>
30
+ <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}>
31
+ Disabled Unchecked radio button with errors
32
+ </RadioButtonListItem>
33
+ ```
34
+
18
35
  Compact radio button list item example:
19
36
 
20
37
  ```js
@@ -13,6 +13,8 @@ var _Label = _interopRequireDefault(require("./Label"));
13
13
 
14
14
  var _theme = require("../functions/theme");
15
15
 
16
+ var _generators = require("../functions/generators");
17
+
16
18
  var _SelectModule = _interopRequireDefault(require("./Select.module.scss"));
17
19
 
18
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,7 +33,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
31
33
 
32
34
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
33
35
 
34
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
36
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
35
37
 
36
38
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
37
39
 
@@ -151,7 +153,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
151
153
  var props = (_props = {
152
154
  name: this.props.name,
153
155
  multiple: this.props.multiple
154
- }, _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);
156
+ }, _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);
155
157
  return /*#__PURE__*/_react.default.createElement("div", {
156
158
  className: _SelectModule.default.select
157
159
  }, /*#__PURE__*/_react.default.createElement(_Label.default, {
@@ -15,6 +15,8 @@ var _Label = _interopRequireDefault(require("./Label"));
15
15
 
16
16
  var _theme = require("../functions/theme");
17
17
 
18
+ var _generators = require("../functions/generators");
19
+
18
20
  var _TextareaModule = _interopRequireDefault(require("./Textarea.module.scss"));
19
21
 
20
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -31,7 +33,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
31
33
 
32
34
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
33
35
 
34
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
36
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
35
37
 
36
38
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
37
39
 
@@ -95,6 +97,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
95
97
  disabled: this.props.disabled,
96
98
  type: this.props.type,
97
99
  id: this.props.id,
100
+ key: "".concat(this.props.id, "-").concat((0, _generators.generateRandomString)(6)),
98
101
  onChange: this.props.onChange,
99
102
  onBlur: this.props.onBlur
100
103
  }, _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);
@@ -25,7 +25,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
25
25
 
26
26
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
27
27
 
28
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
28
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
29
29
 
30
30
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
31
31
 
@@ -27,7 +27,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
27
27
 
28
28
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
29
29
 
30
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
30
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
31
31
 
32
32
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
33
33
 
@@ -27,7 +27,7 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+
27
27
 
28
28
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
29
29
 
30
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } Object.defineProperty(subClass, "prototype", { value: Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }), writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
30
+ function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
31
31
 
32
32
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
33
33
 
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.generateRandomString = void 0;
7
+
8
+ var generateRandomString = function generateRandomString(length) {
9
+ var result = '';
10
+ var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
11
+ var charactersLength = characters.length;
12
+
13
+ for (var i = 0; i < length; i++) {
14
+ result += characters.charAt(Math.floor(Math.random() * charactersLength));
15
+ }
16
+
17
+ return result;
18
+ };
19
+
20
+ exports.generateRandomString = generateRandomString;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dibk-design",
3
- "version": "0.4.34",
3
+ "version": "0.4.38",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",