dibk-design 0.4.18 → 0.4.22

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 (16) hide show
  1. package/dist/components/Accordion.module.scss +3 -2
  2. package/dist/components/CheckBoxIcon.js +7 -4
  3. package/dist/components/CheckBoxIcon.module.scss +12 -2
  4. package/dist/components/CheckBoxInput.js +6 -3
  5. package/dist/components/CheckBoxInput.module.scss +8 -5
  6. package/dist/components/CheckBoxListItem.js +6 -3
  7. package/dist/components/CheckBoxListItem.md +6 -0
  8. package/dist/components/CheckBoxListItem.module.scss +3 -3
  9. package/dist/components/Header.module.scss +3 -3
  10. package/dist/components/InputField.js +1 -1
  11. package/dist/components/InputField.module.scss +1 -0
  12. package/dist/components/RadioButtonInput.module.scss +1 -4
  13. package/dist/components/RadioButtonListItem.module.scss +2 -2
  14. package/dist/components/Textarea.js +1 -1
  15. package/dist/style/abstracts/variables/_typography.scss +2 -1
  16. package/package.json +1 -1
package/dist/components/Accordion.module.scss CHANGED
@@ -123,11 +123,12 @@
123
123
  position: relative;
124
124
  text-decoration: none;
125
125
  overflow-wrap: break-word;
126
- font-weight: 500;
127
- font-size: 20px;
128
126
  line-height: 1.7;
129
127
  cursor: pointer;
130
128
  :local(.panelText) {
129
+ font-family: $heading-font;
130
+ font-weight: bold;
131
+ font-size: 18px;
131
132
  flex: 1;
132
133
  }
133
134
  :local(.panelChevron) {
package/dist/components/CheckBoxIcon.js CHANGED
@@ -66,12 +66,13 @@ var CheckBoxIcon = /*#__PURE__*/function (_React$Component) {
66
66
  if (this.props.theme && this.props.checked) {
67
67
  inlineStyle = _objectSpread(_objectSpread({}, inlineStyle), {}, {
68
68
  color: (0, _theme.getThemePaletteBackgroundColor)(this.props.theme, 'primary'),
69
- boxShadow: "0 0 0 1px ".concat((0, _theme.getThemePaletteBackgroundColor)(this.props.theme, 'primary'))
69
+ boxShadow: "0 0 0 1px ".concat((0, _theme.getThemePaletteBackgroundColor)(this.props.theme, 'primary')) // TODO: support theme error color
70
+
70
71
  });
71
72
  }
72
73
 
73
74
  return /*#__PURE__*/_react.default.createElement("span", {
74
- className: "".concat(_CheckBoxIconModule.default.checkBoxIcon, " ").concat(this.props.checked ? _CheckBoxIconModule.default.checked : '', " ").concat(this.props.showBox ? _CheckBoxIconModule.default.showBox : ''),
75
+ className: "".concat(_CheckBoxIconModule.default.checkBoxIcon, " ").concat(this.props.checked ? _CheckBoxIconModule.default.checked : '', " ").concat(this.props.showBox ? _CheckBoxIconModule.default.showBox : '', " ").concat(this.props.hasErrors ? _CheckBoxIconModule.default.hasErrors : ''),
75
76
  style: inlineStyle
76
77
  }, /*#__PURE__*/_react.default.createElement("span", {
77
78
  className: _CheckBoxIconModule.default.checkmark
@@ -86,12 +87,14 @@ CheckBoxIcon.propTypes = {
86
87
  size: _propTypes.default.string,
87
88
  checked: _propTypes.default.bool,
88
89
  showBox: _propTypes.default.bool,
89
- theme: _propTypes.default.object
90
+ theme: _propTypes.default.object,
91
+ hasErrors: _propTypes.default.bool
90
92
  };
91
93
  CheckBoxIcon.defaultProps = {
92
94
  size: '20px',
93
95
  checked: false,
94
- showBox: true
96
+ showBox: true,
97
+ hasErrors: false
95
98
  };
96
99
  var _default = CheckBoxIcon;
97
100
  exports.default = _default;
package/dist/components/CheckBoxIcon.module.scss CHANGED
@@ -15,16 +15,26 @@
15
15
  text-align: center;
16
16
 
17
17
  &:local(.showBox) {
18
- @include box-shadow(0 0 0 1px #afaba8);
19
18
  margin-right: 0.4em;
20
19
  margin-top: 2px;
21
20
  background: white;
21
+ &:not(:local(.hasErrors)) {
22
+ @include box-shadow(0 0 0 1px #afaba8);
23
+ }
24
+ &:local(.hasErrors) {
25
+ @include box-shadow(0 0 2px 1px #9d2024);
26
+ }
22
27
  }
23
28
 
24
29
  &:local(.checked) {
25
30
  color: $color-primary;
26
31
  &:local(.showBox) {
27
- @include box-shadow(0 0 0 1px $color-dark-blue);
32
+ &:not(:local(.hasErrors)) {
33
+ @include box-shadow(0 0 0 1px #afaba8);
34
+ }
35
+ &:local(.hasErrors) {
36
+ @include box-shadow(0 0 2px 1px #9d2024);
37
+ }
28
38
  }
29
39
  }
30
40
 
package/dist/components/CheckBoxInput.js CHANGED
@@ -52,11 +52,12 @@ var CheckBoxInput = /*#__PURE__*/function (_React$Component) {
52
52
  key: "render",
53
53
  value: function render() {
54
54
  return /*#__PURE__*/_react.default.createElement("label", {
55
- className: "".concat(_CheckBoxInputModule.default.checkBoxInput, " ").concat(this.props.contentOnly ? _CheckBoxInputModule.default.contentOnly : ''),
55
+ className: "".concat(_CheckBoxInputModule.default.checkBoxInput, " ").concat(this.props.contentOnly ? _CheckBoxInputModule.default.contentOnly : '', " ").concat(this.props.hasErrors ? _CheckBoxInputModule.default.hasErrors : ''),
56
56
  htmlFor: this.props.id
57
57
  }, !this.props.contentOnly ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CheckBoxIcon.default, {
58
58
  checked: this.props.checked,
59
- theme: this.props.theme
59
+ theme: this.props.theme,
60
+ hasErrors: this.props.hasErrors
60
61
  }), /*#__PURE__*/_react.default.createElement("input", {
61
62
  onChange: this.props.onChange,
62
63
  type: "checkbox",
@@ -80,12 +81,14 @@ CheckBoxInput.propTypes = {
80
81
  name: _propTypes.default.string,
81
82
  onChange: _propTypes.default.func.isRequired,
82
83
  contentOnly: _propTypes.default.bool,
84
+ hasErrors: _propTypes.default.bool,
83
85
  theme: _propTypes.default.object
84
86
  };
85
87
  CheckBoxInput.defaultProps = {
86
88
  checked: false,
87
89
  name: '',
88
- contentOnly: false
90
+ contentOnly: false,
91
+ hasErrors: false
89
92
  };
90
93
  var _default = CheckBoxInput;
91
94
  exports.default = _default;
package/dist/components/CheckBoxInput.module.scss CHANGED
@@ -2,17 +2,20 @@
2
2
 
3
3
  :local(.checkBoxInput) {
4
4
  display: flex;
5
+ margin-right: 1em;
5
6
 
6
- &:not(:local(.contentOnly)){
7
+ &:not(:local(.contentOnly)) {
7
8
  cursor: pointer;
8
9
  }
9
10
 
11
+ &:local(.hasErrors) {
12
+ span {
13
+ color: #9d2024;
14
+ }
15
+ }
16
+
10
17
  input[type="checkbox"] {
11
18
  opacity: 0;
12
19
  position: absolute;
13
20
  }
14
- span {
15
- font-weight: 300;
16
- }
17
- margin-right: 1em;
18
21
  }
package/dist/components/CheckBoxListItem.js CHANGED
@@ -52,11 +52,12 @@ var CheckBoxListItem = /*#__PURE__*/function (_React$Component) {
52
52
  key: "render",
53
53
  value: function render() {
54
54
  return /*#__PURE__*/_react.default.createElement("div", {
55
- className: "".concat(_CheckBoxListItemModule.default.checkBoxListItem, " ").concat(this.props.checked ? _CheckBoxListItemModule.default.checked : '', " ").concat(this.props.contentOnly ? _CheckBoxListItemModule.default.contentOnly : '', " ").concat(this.props.compact ? _CheckBoxListItemModule.default.compact : '')
55
+ className: "".concat(_CheckBoxListItemModule.default.checkBoxListItem, " ").concat(this.props.checked ? _CheckBoxListItemModule.default.checked : '', " ").concat(this.props.contentOnly ? _CheckBoxListItemModule.default.contentOnly : '', " ").concat(this.props.compact ? _CheckBoxListItemModule.default.compact : '', " ").concat(this.props.hasErrors ? _CheckBoxListItemModule.default.hasErrors : '')
56
56
  }, /*#__PURE__*/_react.default.createElement(_CheckBoxInput.default, {
57
57
  onChange: this.props.onChange,
58
58
  checked: this.props.checked,
59
59
  contentOnly: this.props.contentOnly,
60
+ hasErrors: this.props.hasErrors,
60
61
  id: this.props.id,
61
62
  theme: this.props.theme
62
63
  }, this.props.children));
@@ -74,13 +75,15 @@ CheckBoxListItem.propTypes = {
74
75
  onChange: _propTypes.default.func.isRequired,
75
76
  contentOnly: _propTypes.default.bool,
76
77
  theme: _propTypes.default.object,
77
- compact: _propTypes.default.bool
78
+ compact: _propTypes.default.bool,
79
+ hasErrors: _propTypes.default.bool
78
80
  };
79
81
  CheckBoxListItem.defaultProps = {
80
82
  checked: false,
81
83
  id: '',
82
84
  name: '',
83
- contentOnly: false
85
+ contentOnly: false,
86
+ hasErrors: false
84
87
  };
85
88
  var _default = CheckBoxListItem;
86
89
  exports.default = _default;
package/dist/components/CheckBoxListItem.md CHANGED
@@ -30,6 +30,12 @@ Compact check box list item example:
30
30
  <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-4" contentOnly={true} compact>
31
31
  Label for unchecked checkbox with content only
32
32
  </CheckBoxListItem>
33
+ <CheckBoxListItem onChange={()=>{console.log('onchange')}} checked={true} name="checkbox" id="compact-checkboxListItem-3" compact hasErrors>
34
+ Label for checked checkbox with content only
35
+ </CheckBoxListItem>
36
+ <CheckBoxListItem onChange={()=>{console.log('onchange')}} name="checkbox" id="compact-checkboxListItem-4" compact hasErrors>
37
+ Label for unchecked checkbox with content only
38
+ </CheckBoxListItem>
33
39
  ```
34
40
 
35
41
  Themed Check box list item example:
package/dist/components/CheckBoxListItem.module.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  cursor: pointer;
16
16
  font-family: $default-font;
17
17
  position: relative;
18
- font-size: 1rem;
18
+ font-size: 17px;
19
19
  color: #000;
20
20
 
21
21
  &:not(:local(.contentOnly)):not(:local(.compact)) {
@@ -51,10 +51,10 @@
51
51
  cursor: pointer;
52
52
  }
53
53
 
54
- &:local(.compact){
54
+ &:local(.compact) {
55
55
  display: table;
56
56
  label {
57
- padding: 4px;
57
+ padding: 6px 4px;
58
58
  }
59
59
  }
60
60
 
package/dist/components/Header.module.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  }
16
16
  :local(h1.header) {
17
17
  font-family: "Altis", sans-serif;
18
- font-size: 35px;
18
+ font-size: 38px;
19
19
  font-style: normal;
20
20
  font-weight: 500;
21
21
  line-height: 1.43;
@@ -29,14 +29,14 @@
29
29
  }
30
30
  :local(h2.header) {
31
31
  font-family: "Altis", sans-serif;
32
- font-size: 26px;
32
+ font-size: 30px;
33
33
  font-style: normal;
34
34
  font-weight: 500;
35
35
  line-height: 1.42;
36
36
  }
37
37
  :local(h3.header) {
38
38
  font-family: "Open Sans", arial, sans-serif;
39
- font-size: 19px;
39
+ font-size: 22px;
40
40
  font-style: normal;
41
41
  font-weight: bold;
42
42
  line-height: 1;
package/dist/components/InputField.js CHANGED
@@ -172,7 +172,7 @@ var InputField = /*#__PURE__*/function (_React$Component) {
172
172
  },
173
173
  content: this.props.buttonContent,
174
174
  theme: this.props.theme
175
- }) : '') : ''), !this.props.contentOnly ? this.renderInputField() : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
175
+ }) : '') : ''), !this.props.contentOnly ? this.renderInputField() : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
176
176
  className: _InputFieldModule.default.errorMessage,
177
177
  style: this.getThemeErrorMessageStyle(this.props.theme)
178
178
  }, this.props.errorMessage ? this.props.errorMessage : ''));
package/dist/components/InputField.module.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @import "../style/global.scss";
2
2
 
3
3
  :local(.inputField) {
4
+ font-size: 19px;
4
5
  > div {
5
6
  display: block;
6
7
  }
package/dist/components/RadioButtonInput.module.scss CHANGED
@@ -3,13 +3,10 @@
3
3
  :local(.radioButtonInput) {
4
4
  display: flex;
5
5
  cursor: pointer;
6
+ margin-right: 1em;
6
7
 
7
8
  input[type="radio"] {
8
9
  opacity: 0;
9
10
  position: absolute;
10
11
  }
11
- span {
12
- font-weight: 300;
13
- }
14
- margin-right: 1em;
15
12
  }
package/dist/components/RadioButtonListItem.module.scss CHANGED
@@ -15,7 +15,7 @@
15
15
  cursor: pointer;
16
16
  font-family: $default-font;
17
17
  position: relative;
18
- font-size: 1rem;
18
+ font-size: 17px;
19
19
  color: #000;
20
20
 
21
21
  &:not(:local(.contentOnly)):not(:local(.compact)) {
@@ -54,7 +54,7 @@
54
54
  &:local(.compact) {
55
55
  display: table;
56
56
  label {
57
- padding: 4px;
57
+ padding: 6px 4px;
58
58
  }
59
59
  }
60
60
 
package/dist/components/Textarea.js CHANGED
@@ -107,7 +107,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
107
107
  className: _TextareaModule.default.textarea
108
108
  }, /*#__PURE__*/_react.default.createElement(_Label.default, {
109
109
  htmlFor: this.props.id
110
- }, this.props.label), !this.props.contentOnly ? this.renderInputField() : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
110
+ }, this.props.label), !this.props.contentOnly ? this.renderInputField() : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
111
111
  className: _TextareaModule.default.errorMessage,
112
112
  style: this.getThemeErrorMessageStyle(this.props.theme)
113
113
  }, this.props.errorMessage ? this.props.errorMessage : ''));
package/dist/style/abstracts/variables/_typography.scss CHANGED
@@ -1 +1,2 @@
1
- $default-font: "Open Sans";
1
+ $default-font: "Open Sans";
2
+ $heading-font: "Altis"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dibk-design",
3
- "version": "0.4.18",
3
+ "version": "0.4.22",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",