dibk-design 0.4.35 → 0.4.36

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 (9) hide show
  1. package/dist/components/CheckBoxIcon.module.scss +5 -0
  2. package/dist/components/RadioButtonIcon.js +5 -3
  3. package/dist/components/RadioButtonIcon.md +12 -0
  4. package/dist/components/RadioButtonIcon.module.scss +16 -2
  5. package/dist/components/RadioButtonInput.js +7 -4
  6. package/dist/components/RadioButtonInput.module.scss +7 -0
  7. package/dist/components/RadioButtonListItem.js +6 -3
  8. package/dist/components/RadioButtonListItem.md +17 -0
  9. package/package.json +1 -1
package/dist/components/CheckBoxIcon.module.scss CHANGED
@@ -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);
package/dist/components/RadioButtonIcon.js CHANGED
@@ -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;
package/dist/components/RadioButtonIcon.md CHANGED
@@ -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
  ```
package/dist/components/RadioButtonIcon.module.scss CHANGED
@@ -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;
package/dist/components/RadioButtonInput.js CHANGED
@@ -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;
package/dist/components/RadioButtonInput.module.scss CHANGED
@@ -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;
package/dist/components/RadioButtonListItem.js CHANGED
@@ -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;
package/dist/components/RadioButtonListItem.md CHANGED
@@ -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
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dibk-design",
3
- "version": "0.4.35",
3
+ "version": "0.4.36",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",