dibk-design 2.0.3 → 2.0.5

package/dist/components/CheckBoxInput.js

@@ -32,7 +32,9 @@ var CheckBoxInput = function CheckBoxInput(props) {
     required: props.required || props.requiredGroup,
     onChange: props.onChange,
     tabIndex: props.tabIndex || null,
-    "aria-controls": props["aria-controls"]
+    "aria-controls": props["aria-controls"],
+    "aria-invalid": props.hasErrors ? "true" : null,
+    "aria-describedby": props["aria-describedby"]
   };
   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", {
     className: _CheckBoxInputModule.default.requiredSymbol
@@ -50,7 +52,8 @@ CheckBoxInput.propTypes = {
   hasErrors: _propTypes.default.bool,
   theme: _propTypes.default.object,
   checkmarkCharacter: _propTypes.default.string,
-  "aria-controls": _propTypes.default.string
+  "aria-controls": _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string
 };
 CheckBoxInput.defaultProps = {
   checked: false,

package/dist/components/CheckBoxList.js

@@ -14,9 +14,10 @@ var CheckBoxList = function CheckBoxList(props) {
   var renderChildElements = function renderChildElements(childElements) {
     return childElements.map(function (childElement, index) {
       var _childElement$type;
-      if ((childElement === null || childElement === void 0 ? void 0 : (_childElement$type = childElement.type) === null || _childElement$type === void 0 ? void 0 : _childElement$type.name) === "CheckBoxListItem" && props.required) {
+      if ((childElement === null || childElement === void 0 ? void 0 : (_childElement$type = childElement.type) === null || _childElement$type === void 0 ? void 0 : _childElement$type.name) === "CheckBoxListItem") {
         var childElementCopy = _react.default.cloneElement(childElement, {
-          requiredGroup: true,
+          requiredGroup: props.required,
+          compact: props.compact,
           key: "checkboxListItem-".concat(index)
         });
         return childElementCopy;
@@ -36,7 +37,8 @@ var CheckBoxList = function CheckBoxList(props) {
 };
 CheckBoxList.propTypes = {
   legend: _propTypes.default.string,
-  required: _propTypes.default.bool
+  required: _propTypes.default.bool,
+  compact: _propTypes.default.bool
 };
 var _default = CheckBoxList;
 exports.default = _default;

package/dist/components/CheckBoxListItem.js

@@ -22,6 +22,8 @@ var CheckBoxListItem = function CheckBoxListItem(props) {
     requiredGroup: props.requiredGroup,
     contentOnly: props.contentOnly,
     hasErrors: props.hasErrors,
+    "aria-controls": props["aria-controls"],
+    "aria-describedby": props["aria-describedby"],
     id: props.id,
     theme: props.theme,
     checkmarkCharacter: props.checkmarkCharacter
@@ -42,7 +44,9 @@ CheckBoxListItem.propTypes = {
   theme: _propTypes.default.object,
   compact: _propTypes.default.bool,
   hasErrors: _propTypes.default.bool,
-  checkmarkCharacter: _propTypes.default.string
+  checkmarkCharacter: _propTypes.default.string,
+  "aria-controls": _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string
 };
 CheckBoxListItem.defaultProps = {
   checked: false,

package/dist/components/ErrorMessage.js

@@ -16,12 +16,18 @@ var ErrorMessage = function ErrorMessage(props) {
       color: (0, _theme.getThemePaletteBackgroundColor)(theme, "warning")
     };
   };
-  return _react.default.createElement("span", {
-    className: _ErrorMessageModule.default.errorMessage,
-    style: getThemeErrorMessageStyle(props.theme)
-  }, props.content ? props.content : "");
+  var getErrorElementProps = function getErrorElementProps() {
+    var _props$id;
+    return {
+      id: !!((_props$id = props.id) !== null && _props$id !== void 0 && _props$id.length) ? props.id : null,
+      className: _ErrorMessageModule.default.errorMessage,
+      style: getThemeErrorMessageStyle(props.theme)
+    };
+  };
+  return _react.default.createElement("span", getErrorElementProps(), props.content ? props.content : "");
 };
 ErrorMessage.propTypes = {
+  id: _propTypes.default.string,
   content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
   theme: _propTypes.default.object
 };

package/dist/components/InputField.js

@@ -37,8 +37,11 @@ var InputField = function InputField(props) {
   var renderValueAsText = function renderValueAsText(value, defaultContent) {
     return props.type === "date" ? value ? formatDate(value) : defaultContent : value ? value : defaultContent;
   };
+  var getErrorElementId = function getErrorElementId() {
+    return "".concat(props.id, "-errorMessage");
+  };
   var getInputElementProps = function getInputElementProps(defaultValue, defaultKey, styleRules) {
-    var _ref;
+    var _props$errorMessage, _props$ariaDescribed, _ref;
     return _ref = {
       name: props.name,
       readOnly: props.readOnly,
@@ -52,7 +55,7 @@ var InputField = function InputField(props) {
       max: props.max || null,
       onChange: props.onChange,
       onBlur: props.onBlur
-    }, _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;
+    }, _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;
   };
   var defaultValue = props.defaultValue ? props.defaultValue : props.value || null;
   var defaultKey = props.elementKey || null;
@@ -78,6 +81,7 @@ var InputField = function InputField(props) {
     type: "button",
     theme: props.theme
   }) : 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, {
+    id: getErrorElementId(),
     content: props.errorMessage,
     theme: props.theme
   }));
@@ -101,6 +105,7 @@ InputField.propTypes = {
   dateFormat: _propTypes.default.string,
   placeholder: _propTypes.default.string,
   defaultContent: _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string,
   hasErrors: _propTypes.default.bool,
   errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
   theme: _propTypes.default.object

package/dist/components/RadioButtonInput.js

@@ -31,7 +31,9 @@ var RadioButtonInput = function RadioButtonInput(props) {
     required: props.required || props.requiredGroup,
     onChange: props.onChange,
     tabIndex: props.tabIndex || null,
-    "aria-controls": props["aria-controls"]
+    "aria-controls": props["aria-controls"],
+    "aria-invalid": props.hasErrors ? "true" : null,
+    "aria-describedby": props["aria-describedby"]
   };
   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", {
     className: _RadioButtonInputModule.default.requiredSymbol
@@ -49,7 +51,8 @@ RadioButtonInput.propTypes = {
   hasErrors: _propTypes.default.bool,
   theme: _propTypes.default.object,
   inputValue: _propTypes.default.string.isRequired,
-  "aria-controls": _propTypes.default.string
+  "aria-controls": _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string
 };
 RadioButtonInput.defaultProps = {
   name: "",

package/dist/components/RadioButtonList.js

@@ -14,9 +14,10 @@ var RadioButtonList = function RadioButtonList(props) {
   var renderChildElements = function renderChildElements(childElements) {
     return childElements.map(function (childElement, index) {
       var _childElement$type;
-      if ((childElement === null || childElement === void 0 ? void 0 : (_childElement$type = childElement.type) === null || _childElement$type === void 0 ? void 0 : _childElement$type.name) === "RadioButtonListItem" && props.required) {
+      if ((childElement === null || childElement === void 0 ? void 0 : (_childElement$type = childElement.type) === null || _childElement$type === void 0 ? void 0 : _childElement$type.name) === "RadioButtonListItem") {
         var childElementCopy = _react.default.cloneElement(childElement, {
-          requiredGroup: true,
+          requiredGroup: props.required,
+          compact: props.compact,
           key: "radioButtonListItem-".concat(index)
         });
         return childElementCopy;
@@ -36,7 +37,8 @@ var RadioButtonList = function RadioButtonList(props) {
 };
 RadioButtonList.propTypes = {
   legend: _propTypes.default.string,
-  required: _propTypes.default.bool
+  required: _propTypes.default.bool,
+  compact: _propTypes.default.bool
 };
 var _default = RadioButtonList;
 exports.default = _default;

package/dist/components/RadioButtonListItem.js

@@ -23,6 +23,8 @@ var RadioButtonListItem = function RadioButtonListItem(props) {
     requiredGroup: props.requiredGroup,
     contentOnly: props.contentOnly,
     hasErrors: props.hasErrors,
+    "aria-controls": props["aria-controls"],
+    "aria-describedby": props["aria-describedby"],
     id: props.id,
     name: props.name,
     theme: props.theme
@@ -43,7 +45,9 @@ RadioButtonListItem.propTypes = {
   contentOnly: _propTypes.default.bool,
   compact: _propTypes.default.bool,
   theme: _propTypes.default.object,
-  hasErrors: _propTypes.default.bool
+  hasErrors: _propTypes.default.bool,
+  "aria-controls": _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string
 };
 RadioButtonListItem.defaultProps = {
   name: "",

package/dist/components/Select.js

@@ -70,6 +70,9 @@ var Select = function Select(props) {
       disabled: true
     }, placeholder) : "";
   };
+  var getErrorElementId = function getErrorElementId() {
+    return "".concat(props.id, "-errorMessage");
+  };
   if (props.contentOnly) {
     var value = props.defaultValue ? props.defaultValue : props.value || null;
     return _react.default.createElement("div", {
@@ -78,7 +81,7 @@ var Select = function Select(props) {
       htmlFor: props.id
     }, props.label), _react.default.createElement("span", null, value ? props.keyAsContent ? getKeyByValue(value, props.options) : value : props.defaultContent));
   } else {
-    var _props$width, _selectElementProps, _props$width2;
+    var _props$width, _props$errorMessage, _props$ariaDescribed, _selectElementProps, _props$width2;
     var defaultValue = !props.value && props.defaultValue ? props.defaultValue : false;
     var styleRules = _objectSpread(_objectSpread({}, props.hasErrors ? getThemeErrorInputStyle(props.theme) : null), ((_props$width = props.width) === null || _props$width === void 0 ? void 0 : _props$width.length) && {
       maxWidth: props.width
@@ -88,7 +91,7 @@ var Select = function Select(props) {
       multiple: props.multiple,
       required: props.required,
       disabled: props.disabled
-    }, _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);
+    }, _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);
     return _react.default.createElement("div", {
       className: _SelectModule.default.select
     }, _react.default.createElement(_Label.default, {
@@ -104,6 +107,7 @@ var Select = function Select(props) {
       className: _SelectModule.default.selectListArrow,
       style: getThemeArrowStyle(props.theme)
     }), _react.default.createElement("select", selectElementProps, renderPlaceholderOption(props.placeholder, props.placeholderValue), renderOptionElements(props.options))), _react.default.createElement(_ErrorMessage.default, {
+      id: getErrorElementId(),
       content: props.errorMessage,
       theme: props.theme
     }));
@@ -129,6 +133,7 @@ Select.propTypes = {
   placeholder: _propTypes.default.string,
   placeholderValue: _propTypes.default.string,
   defaultContent: _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string,
   hasErrors: _propTypes.default.bool,
   errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
   theme: _propTypes.default.object

package/dist/components/Textarea.js

@@ -25,8 +25,11 @@ var Textarea = function Textarea(props) {
   var renderValueAsText = function renderValueAsText(value, defaultContent) {
     return value ? value : defaultContent;
   };
+  var getErrorElementId = function getErrorElementId() {
+    return "".concat(props.id, "-errorMessage");
+  };
   var renderInputField = function renderInputField() {
-    var _props$value, _props$defaultValue, _props$width, _props$resize, _textareaElementProps;
+    var _props$value, _props$defaultValue, _props$width, _props$resize, _props$errorMessage, _props$ariaDescribed, _textareaElementProps;
     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;
     var defaultKey = props.elementKey || null;
     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) {
       key: defaultKey || "".concat(props.id, "-").concat((0, _generators.generateRandomString)(6)),
       onChange: props.onChange,
       onBlur: props.onBlur
-    }, _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);
+    }, _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);
     return _react.default.createElement("textarea", textareaElementProps);
   };
   return _react.default.createElement("div", {
@@ -54,6 +57,7 @@ var Textarea = function Textarea(props) {
   }, props.label, props.required && _react.default.createElement("span", {
     className: _TextareaModule.default.requiredSymbol
   }, "*")), !props.contentOnly ? renderInputField() : _react.default.createElement("span", null, renderValueAsText(props.value || props.defaultValue, props.defaultContent)), _react.default.createElement(_ErrorMessage.default, {
+    id: getErrorElementId(),
     content: props.errorMessage,
     theme: props.theme
   }));
@@ -75,6 +79,7 @@ Textarea.propTypes = {
   contentOnly: _propTypes.default.bool,
   placeholder: _propTypes.default.string,
   defaultContent: _propTypes.default.string,
+  "aria-describedby": _propTypes.default.string,
   hasErrors: _propTypes.default.bool,
   errorMessage: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]))]),
   theme: _propTypes.default.object

package/package.json

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