@carbon/ibm-products 1.69.0 → 1.70.0

package/lib/components/Datagrid/utils/filterPropsForTesting.js

@@ -0,0 +1,159 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateDummyCheckboxes = exports.filterProps = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _handleFilterTagLabelText = require("./handleFilterTagLabelText");
+/**
+ * Copyright IBM Corp. 2024, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var generateDummyCheckboxes = Array(25).fill(null).map(function (_, index) {
+  return {
+    id: "".concat(index),
+    labelText: "Dummy checkbox ".concat(index + 1),
+    value: 'dummy-checkbox',
+    disabled: true
+  };
+});
+exports.generateDummyCheckboxes = generateDummyCheckboxes;
+var filterProps = function filterProps() {
+  var _Dropdown;
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$includeManyCheck = _ref.includeManyCheckboxes,
+    includeManyCheckboxes = _ref$includeManyCheck === void 0 ? false : _ref$includeManyCheck,
+    _ref$dropdownOnChange = _ref.dropdownOnChange,
+    dropdownOnChange = _ref$dropdownOnChange === void 0 ? function () {} : _ref$dropdownOnChange;
+  var checkboxList = [{
+    id: 'normal',
+    labelText: 'Normal',
+    value: 'normal'
+  }, {
+    id: 'minor-warning',
+    labelText: 'Minor warning',
+    value: 'minor-warning'
+  }, {
+    id: 'critical',
+    labelText: 'Critical',
+    value: 'critical'
+  }].concat((0, _toConsumableArray2.default)(includeManyCheckboxes ? generateDummyCheckboxes : []));
+  return {
+    autoHideFilters: includeManyCheckboxes ? false : true,
+    variation: 'panel',
+    panelIconDescription: 'Open filters',
+    sections: [{
+      categoryTitle: 'Category title',
+      hasAccordion: true,
+      filters: [{
+        filterLabel: 'Joined',
+        filter: {
+          type: 'date',
+          column: 'joined',
+          props: {
+            DatePicker: {
+              datePickerType: 'range'
+            },
+            DatePickerInput: {
+              start: {
+                id: 'date-picker-input-id-start',
+                placeholder: 'mm/dd/yyyy',
+                labelText: 'Joined start date'
+              },
+              end: {
+                id: 'date-picker-input-id-end',
+                placeholder: 'mm/dd/yyyy',
+                labelText: 'Joined end date'
+              }
+            }
+          }
+        }
+      }, {
+        filterLabel: 'Status',
+        filter: {
+          type: 'dropdown',
+          column: 'status',
+          props: {
+            Dropdown: (_Dropdown = {
+              id: 'marital-status-dropdown'
+            }, (0, _defineProperty2.default)(_Dropdown, 'aria-label', 'Marital status dropdown'), (0, _defineProperty2.default)(_Dropdown, "items", ['relationship', 'complicated', 'single']), (0, _defineProperty2.default)(_Dropdown, "label", 'Marital status'), (0, _defineProperty2.default)(_Dropdown, "titleText", 'Marital status'), (0, _defineProperty2.default)(_Dropdown, "onChange", dropdownOnChange), _Dropdown)
+          }
+        }
+      }]
+    }, {
+      categoryTitle: 'Category title',
+      filters: [{
+        filterLabel: 'Role',
+        filter: {
+          type: 'radio',
+          column: 'role',
+          props: {
+            FormGroup: {
+              legendText: 'Role'
+            },
+            RadioButtonGroup: {
+              orientation: 'vertical',
+              legend: 'Role legend',
+              name: 'role-radio-button-group'
+            },
+            RadioButton: [{
+              id: 'developer',
+              labelText: 'Developer',
+              value: 'developer'
+            }, {
+              id: 'designer',
+              labelText: 'Designer',
+              value: 'designer'
+            }, {
+              id: 'researcher',
+              labelText: 'Researcher',
+              value: 'researcher'
+            }]
+          }
+        }
+      }, {
+        filterLabel: 'Visits',
+        filter: {
+          type: 'number',
+          column: 'visits',
+          props: {
+            NumberInput: {
+              min: 0,
+              id: 'visits-number-input',
+              invalidText: 'A valid value is required',
+              label: 'Visits',
+              placeholder: 'Type a number amount of visits'
+            }
+          }
+        }
+      }, {
+        filterLabel: 'Password strength',
+        filter: {
+          type: 'checkbox',
+          column: 'passwordStrength',
+          props: {
+            FormGroup: {
+              legendText: 'Password strength'
+            },
+            Checkbox: checkboxList
+          }
+        }
+      }]
+    }],
+    renderLabel: function renderLabel(key, value) {
+      return (0, _handleFilterTagLabelText.handleFilterTagLabelText)(key, value);
+    },
+    renderDateLabel: function renderDateLabel(start, end) {
+      var startDateObj = new Date(start);
+      var endDateObj = new Date(end);
+      return "".concat(startDateObj.toLocaleDateString(), " - ").concat(endDateObj.toLocaleDateString());
+    }
+  };
+};
+exports.filterProps = filterProps;

package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _ErrorIllustration = require("../assets/ErrorIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationDescription", "illustrationTheme", "link", "size", "subtitle", "title"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -26,6 +26,7 @@ var componentName = 'ErrorEmptyState';
 var ErrorEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var action = _ref.action,
     className = _ref.className,
+    illustrationDescription = _ref.illustrationDescription,
     illustrationTheme = _ref.illustrationTheme,
     link = _ref.link,
     _ref$size = _ref.size,
@@ -37,9 +38,9 @@ var ErrorEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "-type--error")),
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_ErrorIllustration.ErrorIllustration, {
-    title: title,
     theme: illustrationTheme,
-    size: size
+    size: size,
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -74,6 +75,11 @@ ErrorEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark

package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _NoDataIllustration = require("../assets/NoDataIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -27,6 +27,7 @@ var NoDataEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
   var action = _ref.action,
     className = _ref.className,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -37,9 +38,9 @@ var NoDataEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "-type--noData")),
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NoDataIllustration.NoDataIllustration, {
-    title: title,
     theme: illustrationTheme,
-    size: size
+    size: size,
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -74,6 +75,10 @@ NoDataEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images.If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark

package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _NoTagsIllustration = require("../assets/NoTagsIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -27,6 +27,7 @@ var NoTagsEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
   var action = _ref.action,
     className = _ref.className,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -37,9 +38,9 @@ var NoTagsEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "-type--noTags")),
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NoTagsIllustration.NoTagsIllustration, {
-    title: title,
     theme: illustrationTheme,
-    size: size
+    size: size,
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -74,6 +75,10 @@ NoTagsEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images.If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark

package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _NotFoundIllustration = require("../assets/NotFoundIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -27,6 +27,7 @@ var NotFoundEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref,
   var action = _ref.action,
     className = _ref.className,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -37,9 +38,9 @@ var NotFoundEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "-type--notFound")),
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NotFoundIllustration.NotFoundIllustration, {
-    title: title,
     theme: illustrationTheme,
-    size: size
+    size: size,
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -74,6 +75,10 @@ NotFoundEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images.If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _NotificationsIllustration = require("../assets/NotificationsIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -27,6 +27,7 @@ var NotificationsEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_
   var action = _ref.action,
     className = _ref.className,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -38,8 +39,8 @@ var NotificationsEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_NotificationsIllustration.NotificationsIllustration, {
     size: size,
-    title: title,
-    theme: illustrationTheme
+    theme: illustrationTheme,
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -74,6 +75,10 @@ NotificationsEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images.If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark

package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -17,7 +17,7 @@ var _settings = require("../../../settings");
 var _EmptyStateContent = require("../EmptyStateContent");
 var _UnauthorizedIllustration = require("../assets/UnauthorizedIllustration");
 var _EmptyState = require("../EmptyState");
-var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -27,6 +27,7 @@ var UnauthorizedEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_r
   var action = _ref.action,
     className = _ref.className,
     illustrationTheme = _ref.illustrationTheme,
+    illustrationDescription = _ref.illustrationDescription,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? _EmptyState.defaults.size : _ref$size,
@@ -38,8 +39,8 @@ var UnauthorizedEmptyState = /*#__PURE__*/_react.default.forwardRef(function (_r
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_UnauthorizedIllustration.UnauthorizedIllustration, {
     size: size,
-    title: title,
-    theme: illustrationTheme
+    theme: illustrationTheme,
+    alt: illustrationDescription || title
   }), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
     action: action,
     link: link,
@@ -74,6 +75,10 @@ UnauthorizedEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
+  /**
+   * The alt text for empty state svg images.If not provided , title will be used.
+   */
+  illustrationDescription: _propTypes.default.string,
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark

package/lib/components/EmptyStates/assets/ErrorIllustration.js

@@ -12,13 +12,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var ErrorIllustration = function ErrorIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     size = _ref.size,
+    alt = _ref.alt,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
@@ -28,7 +28,7 @@ var ErrorIllustration = function ErrorIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-error"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 38.9,
     y1: 77.08,
@@ -206,7 +206,7 @@ var ErrorIllustration = function ErrorIllustration(_ref) {
 };
 exports.ErrorIllustration = ErrorIllustration;
 ErrorIllustration.propTypes = {
+  alt: _propTypes.default.string.isRequired,
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark']),
-  title: _propTypes.default.string
+  theme: _propTypes.default.oneOf(['light', 'dark'])
 };

package/lib/components/EmptyStates/assets/NoDataIllustration.js

@@ -12,13 +12,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NoDataIllustration = function NoDataIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     size = _ref.size,
+    alt = _ref.alt,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
@@ -28,7 +28,7 @@ var NoDataIllustration = function NoDataIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noData"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 11.12,
     y1: 43.34,
@@ -169,7 +169,7 @@ var NoDataIllustration = function NoDataIllustration(_ref) {
 };
 exports.NoDataIllustration = NoDataIllustration;
 NoDataIllustration.propTypes = {
+  alt: _propTypes.default.string.isRequired,
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark']),
-  title: _propTypes.default.string
+  theme: _propTypes.default.oneOf(['light', 'dark'])
 };

package/lib/components/EmptyStates/assets/NoTagsIllustration.js

@@ -12,13 +12,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NoTagsIllustration = function NoTagsIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     size = _ref.size,
+    alt = _ref.alt,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
@@ -29,7 +29,7 @@ var NoTagsIllustration = function NoTagsIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noTags"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__c_dark_".concat(svgId),
     x1: 34.96,
     y1: 5.37,
@@ -476,7 +476,7 @@ var NoTagsIllustration = function NoTagsIllustration(_ref) {
 };
 exports.NoTagsIllustration = NoTagsIllustration;
 NoTagsIllustration.propTypes = {
+  alt: _propTypes.default.string.isRequired,
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark']),
-  title: _propTypes.default.string
+  theme: _propTypes.default.oneOf(['light', 'dark'])
 };

package/lib/components/EmptyStates/assets/NotFoundIllustration.js

@@ -12,13 +12,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NotFoundIllustration = function NotFoundIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     size = _ref.size,
+    alt = _ref.alt,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
@@ -28,7 +28,7 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notFound"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 2.6,
     y1: -12.81,
@@ -353,7 +353,7 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
 };
 exports.NotFoundIllustration = NotFoundIllustration;
 NotFoundIllustration.propTypes = {
+  alt: _propTypes.default.string.isRequired,
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark']),
-  title: _propTypes.default.string
+  theme: _propTypes.default.oneOf(['light', 'dark'])
 };

package/lib/components/EmptyStates/assets/NotificationsIllustration.js

@@ -12,13 +12,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var NotificationsIllustration = function NotificationsIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     size = _ref.size,
+    alt = _ref.alt,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
@@ -28,7 +28,7 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 30.05,
     y1: 54.31,
@@ -324,7 +324,7 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
 };
 exports.NotificationsIllustration = NotificationsIllustration;
 NotificationsIllustration.propTypes = {
+  alt: _propTypes.default.string.isRequired,
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark']),
-  title: _propTypes.default.string
+  theme: _propTypes.default.oneOf(['light', 'dark'])
 };

package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js

@@ -12,13 +12,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../../settings");
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-var _excluded = ["title", "theme", "size"];
+var _excluded = ["theme", "size", "alt"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
 var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
-  var title = _ref.title,
-    theme = _ref.theme,
+  var theme = _ref.theme,
     size = _ref.size,
+    alt = _ref.alt,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
@@ -29,7 +29,7 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
     viewBox: "0 0 80 80",
     className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-unauthorized"), "".concat(blockClass, "__illustration--").concat(size)]),
     role: "img"
-  }), /*#__PURE__*/_react.default.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  }), /*#__PURE__*/_react.default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__b_dark_".concat(svgId),
     x1: 17.33,
     y1: 40.68,
@@ -297,7 +297,7 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
 };
 exports.UnauthorizedIllustration = UnauthorizedIllustration;
 UnauthorizedIllustration.propTypes = {
+  alt: _propTypes.default.string.isRequired,
   size: _propTypes.default.oneOf(['lg', 'sm']),
-  theme: _propTypes.default.oneOf(['light', 'dark']),
-  title: _propTypes.default.string
+  theme: _propTypes.default.oneOf(['light', 'dark'])
 };