dibk-design 2.0.4 → 2.0.5

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/CheckBoxInput.js +5 -2
  2. package/dist/components/CheckBoxListItem.js +5 -1
  3. package/dist/components/ErrorMessage.js +10 -4
  4. package/dist/components/InputField.js +7 -2
  5. package/dist/components/RadioButtonInput.js +5 -2
  6. package/dist/components/RadioButtonListItem.js +5 -1
  7. package/dist/components/Select.js +7 -2
  8. package/dist/components/Textarea.js +7 -2
  9. package/package.json +1 -1
package/dist/components/CheckBoxInput.js CHANGED
@@ -32,7 +32,9 @@ var CheckBoxInput = function CheckBoxInput(props) {
32
32
  required: props.required || props.requiredGroup,
33
33
  onChange: props.onChange,
34
34
  tabIndex: props.tabIndex || null,
35
- "aria-controls": props["aria-controls"]
35
+ "aria-controls": props["aria-controls"],
36
+ "aria-invalid": props.hasErrors ? "true" : null,
37
+ "aria-describedby": props["aria-describedby"]
36
38
  };
37
39
  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("input", inputProps)) : _react.default.createElement(_CheckBoxIcon.default, iconProps), _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("span", {
38
40
  className: _CheckBoxInputModule.default.requiredSymbol
@@ -50,7 +52,8 @@ CheckBoxInput.propTypes = {
50
52
  hasErrors: _propTypes.default.bool,
51
53
  theme: _propTypes.default.object,
52
54
  checkmarkCharacter: _propTypes.default.string,
53
- "aria-controls": _propTypes.default.string
55
+ "aria-controls": _propTypes.default.string,
56
+ "aria-describedby": _propTypes.default.string
54
57
  };
55
58
  CheckBoxInput.defaultProps = {
56
59
  checked: false,
package/dist/components/CheckBoxListItem.js CHANGED
@@ -22,6 +22,8 @@ var CheckBoxListItem = function CheckBoxListItem(props) {
22
22
  requiredGroup: props.requiredGroup,
23
23
  contentOnly: props.contentOnly,
24
24
  hasErrors: props.hasErrors,
25
+ "aria-controls": props["aria-controls"],
26
+ "aria-describedby": props["aria-describedby"],
25
27
  id: props.id,
26
28
  theme: props.theme,
27
29
  checkmarkCharacter: props.checkmarkCharacter
@@ -42,7 +44,9 @@ CheckBoxListItem.propTypes = {
42
44
  theme: _propTypes.default.object,
43
45
  compact: _propTypes.default.bool,
44
46
  hasErrors: _propTypes.default.bool,
45
- checkmarkCharacter: _propTypes.default.string
47
+ checkmarkCharacter: _propTypes.default.string,
48
+ "aria-controls": _propTypes.default.string,
49
+ "aria-describedby": _propTypes.default.string
46
50
  };
47
51
  CheckBoxListItem.defaultProps = {
48
52
  checked: false,
package/dist/components/ErrorMessage.js CHANGED
@@ -16,12 +16,18 @@ var ErrorMessage = function ErrorMessage(props) {
16
16
  color: (0, _theme.getThemePaletteBackgroundColor)(theme, "warning")
17
17
  };
18
18
  };
19
- return _react.default.createElement("span", {
20
- className: _ErrorMessageModule.default.errorMessage,
21
- style: getThemeErrorMessageStyle(props.theme)
22
- }, props.content ? props.content : "");
19
+ var getErrorElementProps = function getErrorElementProps() {
20
+ var _props$id;
21
+ return {
22
+ id: !!((_props$id = props.id) !== null && _props$id !== void 0 && _props$id.length) ? props.id : null,
23
+ className: _ErrorMessageModule.default.errorMessage,
24
+ style: getThemeErrorMessageStyle(props.theme)
25
+ };
26
+ };
27
+ return _react.default.createElement("span", getErrorElementProps(), props.content ? props.content : "");
23
28
  };
24
29
  ErrorMessage.propTypes = {
30
+ id: _propTypes.default.string,
25
31
  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
26
32
  theme: _propTypes.default.object
27
33
  };
package/dist/components/InputField.js CHANGED
@@ -37,8 +37,11 @@ var InputField = function InputField(props) {
37
37
  var renderValueAsText = function renderValueAsText(value, defaultContent) {
38
38
  return props.type === "date" ? value ? formatDate(value) : defaultContent : value ? value : defaultContent;
39
39
  };
40
+ var getErrorElementId = function getErrorElementId() {
41
+ return "".concat(props.id, "-errorMessage");
42
+ };
40
43
  var getInputElementProps = function getInputElementProps(defaultValue, defaultKey, styleRules) {
41
- var _ref;
44
+ var _props$errorMessage, _props$ariaDescribed, _ref;
42
45
  return _ref = {
43
46
  name: props.name,
44
47
  readOnly: props.readOnly,
@@ -52,7 +55,7 @@ var InputField = function InputField(props) {
52
55
  max: props.max || null,
53
56
  onChange: props.onChange,
54
57
  onBlur: props.onBlur
55
- }, _defineProperty(_ref, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_ref, "placeholder", props.placeholder || null), _defineProperty(_ref, "className", props.hasErrors ? _InputFieldModule.default.hasErrors : null), _defineProperty(_ref, "aria-describedby", props["aria-describedby"] || null), _defineProperty(_ref, "style", styleRules), _ref;
58
+ }, _defineProperty(_ref, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_ref, "placeholder", props.placeholder || null), _defineProperty(_ref, "className", props.hasErrors ? _InputFieldModule.default.hasErrors : null), _defineProperty(_ref, "aria-describedby", props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null), _defineProperty(_ref, "aria-invalid", props.hasErrors ? "true" : null), _defineProperty(_ref, "style", styleRules), _ref;
56
59
  };
57
60
  var defaultValue = props.defaultValue ? props.defaultValue : props.value || null;
58
61
  var defaultKey = props.elementKey || null;
@@ -78,6 +81,7 @@ var InputField = function InputField(props) {
78
81
  type: "button",
79
82
  theme: props.theme
80
83
  }) : null) : null), !props.contentOnly ? _react.default.createElement("input", getInputElementProps(defaultValue, defaultKey, styleRules)) : _react.default.createElement("span", null, renderValueAsText(props.value || props.defaultValue, props.defaultContent)), _react.default.createElement(_ErrorMessage.default, {
84
+ id: getErrorElementId(),
81
85
  content: props.errorMessage,
82
86
  theme: props.theme
83
87
  }));
@@ -101,6 +105,7 @@ InputField.propTypes = {
101
105
  dateFormat: _propTypes.default.string,
102
106
  placeholder: _propTypes.default.string,
103
107
  defaultContent: _propTypes.default.string,
108
+ "aria-describedby": _propTypes.default.string,
104
109
  hasErrors: _propTypes.default.bool,
105
110
  errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
106
111
  theme: _propTypes.default.object
package/dist/components/RadioButtonInput.js CHANGED
@@ -31,7 +31,9 @@ var RadioButtonInput = function RadioButtonInput(props) {
31
31
  required: props.required || props.requiredGroup,
32
32
  onChange: props.onChange,
33
33
  tabIndex: props.tabIndex || null,
34
- "aria-controls": props["aria-controls"]
34
+ "aria-controls": props["aria-controls"],
35
+ "aria-invalid": props.hasErrors ? "true" : null,
36
+ "aria-describedby": props["aria-describedby"]
35
37
  };
36
38
  return _react.default.createElement("label", labelProps, !props.contentOnly ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_RadioButtonIcon.default, iconProps), _react.default.createElement("input", inputProps)) : null, _react.default.createElement("span", null, props.children, props.required && _react.default.createElement("span", {
37
39
  className: _RadioButtonInputModule.default.requiredSymbol
@@ -49,7 +51,8 @@ RadioButtonInput.propTypes = {
49
51
  hasErrors: _propTypes.default.bool,
50
52
  theme: _propTypes.default.object,
51
53
  inputValue: _propTypes.default.string.isRequired,
52
- "aria-controls": _propTypes.default.string
54
+ "aria-controls": _propTypes.default.string,
55
+ "aria-describedby": _propTypes.default.string
53
56
  };
54
57
  RadioButtonInput.defaultProps = {
55
58
  name: "",
package/dist/components/RadioButtonListItem.js CHANGED
@@ -23,6 +23,8 @@ var RadioButtonListItem = function RadioButtonListItem(props) {
23
23
  requiredGroup: props.requiredGroup,
24
24
  contentOnly: props.contentOnly,
25
25
  hasErrors: props.hasErrors,
26
+ "aria-controls": props["aria-controls"],
27
+ "aria-describedby": props["aria-describedby"],
26
28
  id: props.id,
27
29
  name: props.name,
28
30
  theme: props.theme
@@ -43,7 +45,9 @@ RadioButtonListItem.propTypes = {
43
45
  contentOnly: _propTypes.default.bool,
44
46
  compact: _propTypes.default.bool,
45
47
  theme: _propTypes.default.object,
46
- hasErrors: _propTypes.default.bool
48
+ hasErrors: _propTypes.default.bool,
49
+ "aria-controls": _propTypes.default.string,
50
+ "aria-describedby": _propTypes.default.string
47
51
  };
48
52
  RadioButtonListItem.defaultProps = {
49
53
  name: "",
package/dist/components/Select.js CHANGED
@@ -70,6 +70,9 @@ var Select = function Select(props) {
70
70
  disabled: true
71
71
  }, placeholder) : "";
72
72
  };
73
+ var getErrorElementId = function getErrorElementId() {
74
+ return "".concat(props.id, "-errorMessage");
75
+ };
73
76
  if (props.contentOnly) {
74
77
  var value = props.defaultValue ? props.defaultValue : props.value || null;
75
78
  return _react.default.createElement("div", {
@@ -78,7 +81,7 @@ var Select = function Select(props) {
78
81
  htmlFor: props.id
79
82
  }, props.label), _react.default.createElement("span", null, value ? props.keyAsContent ? getKeyByValue(value, props.options) : value : props.defaultContent));
80
83
  } else {
81
- var _props$width, _selectElementProps, _props$width2;
84
+ var _props$width, _props$errorMessage, _props$ariaDescribed, _selectElementProps, _props$width2;
82
85
  var defaultValue = !props.value && props.defaultValue ? props.defaultValue : false;
83
86
  var styleRules = _objectSpread(_objectSpread({}, props.hasErrors ? getThemeErrorInputStyle(props.theme) : null), ((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
84
87
  maxWidth: props.width
@@ -88,7 +91,7 @@ var Select = function Select(props) {
88
91
  multiple: props.multiple,
89
92
  required: props.required,
90
93
  disabled: props.disabled
91
- }, _defineProperty(_selectElementProps, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_selectElementProps, "onChange", props.onChange), _defineProperty(_selectElementProps, "id", props.id), _defineProperty(_selectElementProps, "role", props.role), _defineProperty(_selectElementProps, "key", "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6))), _defineProperty(_selectElementProps, "className", props.hasErrors ? _SelectModule.default.hasErrors : ""), _defineProperty(_selectElementProps, "style", styleRules), _selectElementProps);
94
+ }, _defineProperty(_selectElementProps, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_selectElementProps, "onChange", props.onChange), _defineProperty(_selectElementProps, "id", props.id), _defineProperty(_selectElementProps, "role", props.role), _defineProperty(_selectElementProps, "key", "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6))), _defineProperty(_selectElementProps, "className", props.hasErrors ? _SelectModule.default.hasErrors : ""), _defineProperty(_selectElementProps, "aria-describedby", props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null), _defineProperty(_selectElementProps, "aria-invalid", props.hasErrors ? "true" : null), _defineProperty(_selectElementProps, "style", styleRules), _selectElementProps);
92
95
  return _react.default.createElement("div", {
93
96
  className: _SelectModule.default.select
94
97
  }, _react.default.createElement(_Label.default, {
@@ -104,6 +107,7 @@ var Select = function Select(props) {
104
107
  className: _SelectModule.default.selectListArrow,
105
108
  style: getThemeArrowStyle(props.theme)
106
109
  }), _react.default.createElement("select", selectElementProps, renderPlaceholderOption(props.placeholder, props.placeholderValue), renderOptionElements(props.options))), _react.default.createElement(_ErrorMessage.default, {
110
+ id: getErrorElementId(),
107
111
  content: props.errorMessage,
108
112
  theme: props.theme
109
113
  }));
@@ -129,6 +133,7 @@ Select.propTypes = {
129
133
  placeholder: _propTypes.default.string,
130
134
  placeholderValue: _propTypes.default.string,
131
135
  defaultContent: _propTypes.default.string,
136
+ "aria-describedby": _propTypes.default.string,
132
137
  hasErrors: _propTypes.default.bool,
133
138
  errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
134
139
  theme: _propTypes.default.object
package/dist/components/Textarea.js CHANGED
@@ -25,8 +25,11 @@ var Textarea = function Textarea(props) {
25
25
  var renderValueAsText = function renderValueAsText(value, defaultContent) {
26
26
  return value ? value : defaultContent;
27
27
  };
28
+ var getErrorElementId = function getErrorElementId() {
29
+ return "".concat(props.id, "-errorMessage");
30
+ };
28
31
  var renderInputField = function renderInputField() {
29
- var _props$value, _props$defaultValue, _props$width, _props$resize, _textareaElementProps;
32
+ var _props$value, _props$defaultValue, _props$width, _props$resize, _props$errorMessage, _props$ariaDescribed, _textareaElementProps;
30
33
  var defaultValue = !((_props$value = props.value) !== null && _props$value !== void 0 && _props$value.length) && (_props$defaultValue = props.defaultValue) !== null && _props$defaultValue !== void 0 && _props$defaultValue.length ? props.defaultValue : false;
31
34
  var defaultKey = props.elementKey || null;
32
35
  var styleRules = _objectSpread(_objectSpread(_objectSpread({}, props.hasErrors ? getThemeErrorInputStyle(props.theme) : null), ((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
@@ -44,7 +47,7 @@ var Textarea = function Textarea(props) {
44
47
  key: defaultKey || "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
45
48
  onChange: props.onChange,
46
49
  onBlur: props.onBlur
47
- }, _defineProperty(_textareaElementProps, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_textareaElementProps, "placeholder", props.placeholder), _defineProperty(_textareaElementProps, "rows", props.rows), _defineProperty(_textareaElementProps, "className", props.hasErrors ? _TextareaModule.default.hasErrors : ""), _defineProperty(_textareaElementProps, "style", styleRules), _textareaElementProps);
50
+ }, _defineProperty(_textareaElementProps, defaultValue ? "defaultValue" : "value", defaultValue || props.value), _defineProperty(_textareaElementProps, "placeholder", props.placeholder), _defineProperty(_textareaElementProps, "rows", props.rows), _defineProperty(_textareaElementProps, "className", props.hasErrors ? _TextareaModule.default.hasErrors : ""), _defineProperty(_textareaElementProps, "aria-describedby", props.hasErrors && !!((_props$errorMessage = props.errorMessage) !== null && _props$errorMessage !== void 0 && _props$errorMessage.length) ? getErrorElementId() : !!((_props$ariaDescribed = props["aria-describedby"]) !== null && _props$ariaDescribed !== void 0 && _props$ariaDescribed.length) ? props["aria-describedby"] : null), _defineProperty(_textareaElementProps, "aria-invalid", props.hasErrors ? "true" : null), _defineProperty(_textareaElementProps, "style", styleRules), _textareaElementProps);
48
51
  return _react.default.createElement("textarea", textareaElementProps);
49
52
  };
50
53
  return _react.default.createElement("div", {
@@ -54,6 +57,7 @@ var Textarea = function Textarea(props) {
54
57
  }, props.label, props.required && _react.default.createElement("span", {
55
58
  className: _TextareaModule.default.requiredSymbol
56
59
  }, "*")), !props.contentOnly ? renderInputField() : _react.default.createElement("span", null, renderValueAsText(props.value || props.defaultValue, props.defaultContent)), _react.default.createElement(_ErrorMessage.default, {
60
+ id: getErrorElementId(),
57
61
  content: props.errorMessage,
58
62
  theme: props.theme
59
63
  }));
@@ -75,6 +79,7 @@ Textarea.propTypes = {
75
79
  contentOnly: _propTypes.default.bool,
76
80
  placeholder: _propTypes.default.string,
77
81
  defaultContent: _propTypes.default.string,
82
+ "aria-describedby": _propTypes.default.string,
78
83
  hasErrors: _propTypes.default.bool,
79
84
  errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
80
85
  theme: _propTypes.default.object
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "dibk-design",
3
- "version": "2.0.4",
3
+ "version": "2.0.5",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",