@carbon/ibm-products 1.69.0 → 1.70.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (83) hide show
  1. package/css/index-full-carbon.css +17 -5
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +4 -4
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +16 -5
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +3 -3
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +17 -5
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +4 -4
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +17 -5
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +4 -4
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/ButtonMenu/ButtonMenu.js +11 -1
  18. package/es/components/Datagrid/Datagrid/DatagridContent.js +9 -8
  19. package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -1
  20. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -1
  21. package/es/components/Datagrid/Datagrid/DraggableElement.js +1 -1
  22. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +4 -1
  23. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
  24. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +14 -6
  25. package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +21 -10
  26. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +6 -8
  27. package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +2 -3
  28. package/es/components/Datagrid/Datagrid/addons/Filtering/utils.js +2 -6
  29. package/es/components/Datagrid/useActionsColumn.js +18 -14
  30. package/es/components/Datagrid/useFiltering.js +3 -1
  31. package/es/components/Datagrid/useNestedRowExpander.js +2 -2
  32. package/es/components/Datagrid/useRowIsMouseOver.js +3 -1
  33. package/es/components/Datagrid/utils/filterPropsForTesting.js +150 -0
  34. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +9 -3
  35. package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +8 -3
  36. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +8 -3
  37. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +8 -3
  38. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +8 -3
  39. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +8 -3
  40. package/es/components/EmptyStates/assets/ErrorIllustration.js +6 -6
  41. package/es/components/EmptyStates/assets/NoDataIllustration.js +6 -6
  42. package/es/components/EmptyStates/assets/NoTagsIllustration.js +6 -6
  43. package/es/components/EmptyStates/assets/NotFoundIllustration.js +6 -6
  44. package/es/components/EmptyStates/assets/NotificationsIllustration.js +6 -6
  45. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -6
  46. package/es/components/FilterSummary/FilterSummary.js +19 -15
  47. package/es/components/InterstitialScreen/InterstitialScreen.js +8 -7
  48. package/lib/components/ButtonMenu/ButtonMenu.js +11 -1
  49. package/lib/components/Datagrid/Datagrid/DatagridContent.js +9 -8
  50. package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -1
  51. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +4 -1
  52. package/lib/components/Datagrid/Datagrid/DraggableElement.js +1 -1
  53. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +4 -1
  54. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
  55. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +14 -6
  56. package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +21 -10
  57. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +1 -2
  58. package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js +2 -3
  59. package/lib/components/Datagrid/Datagrid/addons/Filtering/utils.js +2 -6
  60. package/lib/components/Datagrid/useActionsColumn.js +17 -13
  61. package/lib/components/Datagrid/useFiltering.js +2 -0
  62. package/lib/components/Datagrid/useNestedRowExpander.js +1 -1
  63. package/lib/components/Datagrid/useRowIsMouseOver.js +3 -1
  64. package/lib/components/Datagrid/utils/filterPropsForTesting.js +159 -0
  65. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +9 -3
  66. package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +8 -3
  67. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +8 -3
  68. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +8 -3
  69. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +8 -3
  70. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +8 -3
  71. package/lib/components/EmptyStates/assets/ErrorIllustration.js +6 -6
  72. package/lib/components/EmptyStates/assets/NoDataIllustration.js +6 -6
  73. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +6 -6
  74. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +6 -6
  75. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +6 -6
  76. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -6
  77. package/lib/components/FilterSummary/FilterSummary.js +18 -14
  78. package/lib/components/InterstitialScreen/InterstitialScreen.js +8 -6
  79. package/package.json +2 -2
  80. package/scss/components/Datagrid/_datagrid.scss +9 -1
  81. package/scss/components/Datagrid/styles/_datagrid.scss +10 -4
  82. package/scss/components/InterstitialScreen/_interstitial-screen.scss +1 -0
  83. package/scss/components/SidePanel/_side-panel.scss +5 -1
@@ -0,0 +1,150 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
+ /**
4
+ * Copyright IBM Corp. 2024, 2024
5
+ *
6
+ * This source code is licensed under the Apache-2.0 license found in the
7
+ * LICENSE file in the root directory of this source tree.
8
+ */
9
+
10
+ import { handleFilterTagLabelText } from './handleFilterTagLabelText';
11
+ export var generateDummyCheckboxes = Array(25).fill(null).map(function (_, index) {
12
+ return {
13
+ id: "".concat(index),
14
+ labelText: "Dummy checkbox ".concat(index + 1),
15
+ value: 'dummy-checkbox',
16
+ disabled: true
17
+ };
18
+ });
19
+ export var filterProps = function filterProps() {
20
+ var _Dropdown;
21
+ var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
22
+ _ref$includeManyCheck = _ref.includeManyCheckboxes,
23
+ includeManyCheckboxes = _ref$includeManyCheck === void 0 ? false : _ref$includeManyCheck,
24
+ _ref$dropdownOnChange = _ref.dropdownOnChange,
25
+ dropdownOnChange = _ref$dropdownOnChange === void 0 ? function () {} : _ref$dropdownOnChange;
26
+ var checkboxList = [{
27
+ id: 'normal',
28
+ labelText: 'Normal',
29
+ value: 'normal'
30
+ }, {
31
+ id: 'minor-warning',
32
+ labelText: 'Minor warning',
33
+ value: 'minor-warning'
34
+ }, {
35
+ id: 'critical',
36
+ labelText: 'Critical',
37
+ value: 'critical'
38
+ }].concat(_toConsumableArray(includeManyCheckboxes ? generateDummyCheckboxes : []));
39
+ return {
40
+ autoHideFilters: includeManyCheckboxes ? false : true,
41
+ variation: 'panel',
42
+ panelIconDescription: 'Open filters',
43
+ sections: [{
44
+ categoryTitle: 'Category title',
45
+ hasAccordion: true,
46
+ filters: [{
47
+ filterLabel: 'Joined',
48
+ filter: {
49
+ type: 'date',
50
+ column: 'joined',
51
+ props: {
52
+ DatePicker: {
53
+ datePickerType: 'range'
54
+ },
55
+ DatePickerInput: {
56
+ start: {
57
+ id: 'date-picker-input-id-start',
58
+ placeholder: 'mm/dd/yyyy',
59
+ labelText: 'Joined start date'
60
+ },
61
+ end: {
62
+ id: 'date-picker-input-id-end',
63
+ placeholder: 'mm/dd/yyyy',
64
+ labelText: 'Joined end date'
65
+ }
66
+ }
67
+ }
68
+ }
69
+ }, {
70
+ filterLabel: 'Status',
71
+ filter: {
72
+ type: 'dropdown',
73
+ column: 'status',
74
+ props: {
75
+ Dropdown: (_Dropdown = {
76
+ id: 'marital-status-dropdown'
77
+ }, _defineProperty(_Dropdown, 'aria-label', 'Marital status dropdown'), _defineProperty(_Dropdown, "items", ['relationship', 'complicated', 'single']), _defineProperty(_Dropdown, "label", 'Marital status'), _defineProperty(_Dropdown, "titleText", 'Marital status'), _defineProperty(_Dropdown, "onChange", dropdownOnChange), _Dropdown)
78
+ }
79
+ }
80
+ }]
81
+ }, {
82
+ categoryTitle: 'Category title',
83
+ filters: [{
84
+ filterLabel: 'Role',
85
+ filter: {
86
+ type: 'radio',
87
+ column: 'role',
88
+ props: {
89
+ FormGroup: {
90
+ legendText: 'Role'
91
+ },
92
+ RadioButtonGroup: {
93
+ orientation: 'vertical',
94
+ legend: 'Role legend',
95
+ name: 'role-radio-button-group'
96
+ },
97
+ RadioButton: [{
98
+ id: 'developer',
99
+ labelText: 'Developer',
100
+ value: 'developer'
101
+ }, {
102
+ id: 'designer',
103
+ labelText: 'Designer',
104
+ value: 'designer'
105
+ }, {
106
+ id: 'researcher',
107
+ labelText: 'Researcher',
108
+ value: 'researcher'
109
+ }]
110
+ }
111
+ }
112
+ }, {
113
+ filterLabel: 'Visits',
114
+ filter: {
115
+ type: 'number',
116
+ column: 'visits',
117
+ props: {
118
+ NumberInput: {
119
+ min: 0,
120
+ id: 'visits-number-input',
121
+ invalidText: 'A valid value is required',
122
+ label: 'Visits',
123
+ placeholder: 'Type a number amount of visits'
124
+ }
125
+ }
126
+ }
127
+ }, {
128
+ filterLabel: 'Password strength',
129
+ filter: {
130
+ type: 'checkbox',
131
+ column: 'passwordStrength',
132
+ props: {
133
+ FormGroup: {
134
+ legendText: 'Password strength'
135
+ },
136
+ Checkbox: checkboxList
137
+ }
138
+ }
139
+ }]
140
+ }],
141
+ renderLabel: function renderLabel(key, value) {
142
+ return handleFilterTagLabelText(key, value);
143
+ },
144
+ renderDateLabel: function renderDateLabel(start, end) {
145
+ var startDateObj = new Date(start);
146
+ var endDateObj = new Date(end);
147
+ return "".concat(startDateObj.toLocaleDateString(), " - ").concat(endDateObj.toLocaleDateString());
148
+ }
149
+ };
150
+ };
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
4
+ var _excluded = ["action", "className", "illustrationDescription", "illustrationTheme", "link", "size", "subtitle", "title"];
5
5
  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; }
6
6
  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) { _defineProperty(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; }
7
7
  /**
@@ -30,6 +30,7 @@ var componentName = 'ErrorEmptyState';
30
30
  export var ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
31
31
  var action = _ref.action,
32
32
  className = _ref.className,
33
+ illustrationDescription = _ref.illustrationDescription,
33
34
  illustrationTheme = _ref.illustrationTheme,
34
35
  link = _ref.link,
35
36
  _ref$size = _ref.size,
@@ -41,9 +42,9 @@ export var ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
41
42
  className: cx(blockClass, className, "".concat(blockClass, "-type--error")),
42
43
  ref: ref
43
44
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ErrorIllustration, {
44
- title: title,
45
45
  theme: illustrationTheme,
46
- size: size
46
+ size: size,
47
+ alt: illustrationDescription || title
47
48
  }), /*#__PURE__*/React.createElement(EmptyStateContent, {
48
49
  action: action,
49
50
  link: link,
@@ -77,6 +78,11 @@ ErrorEmptyState.propTypes = {
77
78
  * Provide an optional class to be applied to the containing node.
78
79
  */
79
80
  className: PropTypes.string,
81
+ /**
82
+ /**
83
+ * The alt text for empty state svg images. If not provided , title will be used.
84
+ */
85
+ illustrationDescription: PropTypes.string,
80
86
  /**
81
87
  * Empty state illustration theme variations.
82
88
  * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
4
+ var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
5
5
  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; }
6
6
  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) { _defineProperty(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; }
7
7
  /**
@@ -31,6 +31,7 @@ export var NoDataEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
31
31
  var action = _ref.action,
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
+ illustrationDescription = _ref.illustrationDescription,
34
35
  link = _ref.link,
35
36
  _ref$size = _ref.size,
36
37
  size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -41,9 +42,9 @@ export var NoDataEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
41
42
  className: cx(blockClass, className, "".concat(blockClass, "-type--noData")),
42
43
  ref: ref
43
44
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NoDataIllustration, {
44
- title: title,
45
45
  theme: illustrationTheme,
46
- size: size
46
+ size: size,
47
+ alt: illustrationDescription || title
47
48
  }), /*#__PURE__*/React.createElement(EmptyStateContent, {
48
49
  action: action,
49
50
  link: link,
@@ -77,6 +78,10 @@ NoDataEmptyState.propTypes = {
77
78
  * Provide an optional class to be applied to the containing node.
78
79
  */
79
80
  className: PropTypes.string,
81
+ /**
82
+ * The alt text for empty state svg images.If not provided , title will be used.
83
+ */
84
+ illustrationDescription: PropTypes.string,
80
85
  /**
81
86
  * Empty state illustration theme variations.
82
87
  * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
4
+ var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
5
5
  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; }
6
6
  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) { _defineProperty(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; }
7
7
  /**
@@ -31,6 +31,7 @@ export var NoTagsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
31
31
  var action = _ref.action,
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
+ illustrationDescription = _ref.illustrationDescription,
34
35
  link = _ref.link,
35
36
  _ref$size = _ref.size,
36
37
  size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -41,9 +42,9 @@ export var NoTagsEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref)
41
42
  className: cx(blockClass, className, "".concat(blockClass, "-type--noTags")),
42
43
  ref: ref
43
44
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NoTagsIllustration, {
44
- title: title,
45
45
  theme: illustrationTheme,
46
- size: size
46
+ size: size,
47
+ alt: illustrationDescription || title
47
48
  }), /*#__PURE__*/React.createElement(EmptyStateContent, {
48
49
  action: action,
49
50
  link: link,
@@ -77,6 +78,10 @@ NoTagsEmptyState.propTypes = {
77
78
  * Provide an optional class to be applied to the containing node.
78
79
  */
79
80
  className: PropTypes.string,
81
+ /**
82
+ * The alt text for empty state svg images.If not provided , title will be used.
83
+ */
84
+ illustrationDescription: PropTypes.string,
80
85
  /**
81
86
  * Empty state illustration theme variations.
82
87
  * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
4
+ var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
5
5
  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; }
6
6
  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) { _defineProperty(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; }
7
7
  /**
@@ -31,6 +31,7 @@ export var NotFoundEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, re
31
31
  var action = _ref.action,
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
+ illustrationDescription = _ref.illustrationDescription,
34
35
  link = _ref.link,
35
36
  _ref$size = _ref.size,
36
37
  size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -41,9 +42,9 @@ export var NotFoundEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, re
41
42
  className: cx(blockClass, className, "".concat(blockClass, "-type--notFound")),
42
43
  ref: ref
43
44
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotFoundIllustration, {
44
- title: title,
45
45
  theme: illustrationTheme,
46
- size: size
46
+ size: size,
47
+ alt: illustrationDescription || title
47
48
  }), /*#__PURE__*/React.createElement(EmptyStateContent, {
48
49
  action: action,
49
50
  link: link,
@@ -77,6 +78,10 @@ NotFoundEmptyState.propTypes = {
77
78
  * Provide an optional class to be applied to the containing node.
78
79
  */
79
80
  className: PropTypes.string,
81
+ /**
82
+ * The alt text for empty state svg images.If not provided , title will be used.
83
+ */
84
+ illustrationDescription: PropTypes.string,
80
85
  /**
81
86
  * Empty state illustration theme variations.
82
87
  * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
4
+ var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
5
5
  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; }
6
6
  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) { _defineProperty(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; }
7
7
  /**
@@ -31,6 +31,7 @@ export var NotificationsEmptyState = /*#__PURE__*/React.forwardRef(function (_re
31
31
  var action = _ref.action,
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
+ illustrationDescription = _ref.illustrationDescription,
34
35
  link = _ref.link,
35
36
  _ref$size = _ref.size,
36
37
  size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -42,8 +43,8 @@ export var NotificationsEmptyState = /*#__PURE__*/React.forwardRef(function (_re
42
43
  ref: ref
43
44
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NotificationsIllustration, {
44
45
  size: size,
45
- title: title,
46
- theme: illustrationTheme
46
+ theme: illustrationTheme,
47
+ alt: illustrationDescription || title
47
48
  }), /*#__PURE__*/React.createElement(EmptyStateContent, {
48
49
  action: action,
49
50
  link: link,
@@ -77,6 +78,10 @@ NotificationsEmptyState.propTypes = {
77
78
  * Provide an optional class to be applied to the containing node.
78
79
  */
79
80
  className: PropTypes.string,
81
+ /**
82
+ * The alt text for empty state svg images.If not provided , title will be used.
83
+ */
84
+ illustrationDescription: PropTypes.string,
80
85
  /**
81
86
  * Empty state illustration theme variations.
82
87
  * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -1,7 +1,7 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _extends from "@babel/runtime/helpers/extends";
3
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
- var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
4
+ var _excluded = ["action", "className", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
5
5
  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; }
6
6
  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) { _defineProperty(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; }
7
7
  /**
@@ -31,6 +31,7 @@ export var UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref
31
31
  var action = _ref.action,
32
32
  className = _ref.className,
33
33
  illustrationTheme = _ref.illustrationTheme,
34
+ illustrationDescription = _ref.illustrationDescription,
34
35
  link = _ref.link,
35
36
  _ref$size = _ref.size,
36
37
  size = _ref$size === void 0 ? defaults.size : _ref$size,
@@ -42,8 +43,8 @@ export var UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref
42
43
  ref: ref
43
44
  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(UnauthorizedIllustration, {
44
45
  size: size,
45
- title: title,
46
- theme: illustrationTheme
46
+ theme: illustrationTheme,
47
+ alt: illustrationDescription || title
47
48
  }), /*#__PURE__*/React.createElement(EmptyStateContent, {
48
49
  action: action,
49
50
  link: link,
@@ -77,6 +78,10 @@ UnauthorizedEmptyState.propTypes = {
77
78
  * Provide an optional class to be applied to the containing node.
78
79
  */
79
80
  className: PropTypes.string,
81
+ /**
82
+ * The alt text for empty state svg images.If not provided , title will be used.
83
+ */
84
+ illustrationDescription: PropTypes.string,
80
85
  /**
81
86
  * Empty state illustration theme variations.
82
87
  * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["title", "theme", "size"];
3
+ var _excluded = ["theme", "size", "alt"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var ErrorIllustration = function ErrorIllustration(_ref) {
23
- var title = _ref.title,
24
- theme = _ref.theme,
23
+ var theme = _ref.theme,
25
24
  size = _ref.size,
25
+ alt = _ref.alt,
26
26
  rest = _objectWithoutProperties(_ref, _excluded);
27
27
  var svgId = uuidv4();
28
28
  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -32,7 +32,7 @@ export var ErrorIllustration = function ErrorIllustration(_ref) {
32
32
  viewBox: "0 0 80 80",
33
33
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-error"), "".concat(blockClass, "__illustration--").concat(size)]),
34
34
  role: "img"
35
- }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
35
+ }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
36
36
  id: "prefix__a_dark_".concat(svgId),
37
37
  x1: 38.9,
38
38
  y1: 77.08,
@@ -209,7 +209,7 @@ export var ErrorIllustration = function ErrorIllustration(_ref) {
209
209
  })));
210
210
  };
211
211
  ErrorIllustration.propTypes = {
212
+ alt: PropTypes.string.isRequired,
212
213
  size: PropTypes.oneOf(['lg', 'sm']),
213
- theme: PropTypes.oneOf(['light', 'dark']),
214
- title: PropTypes.string
214
+ theme: PropTypes.oneOf(['light', 'dark'])
215
215
  };
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["title", "theme", "size"];
3
+ var _excluded = ["theme", "size", "alt"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var NoDataIllustration = function NoDataIllustration(_ref) {
23
- var title = _ref.title,
24
- theme = _ref.theme,
23
+ var theme = _ref.theme,
25
24
  size = _ref.size,
25
+ alt = _ref.alt,
26
26
  rest = _objectWithoutProperties(_ref, _excluded);
27
27
  var svgId = uuidv4();
28
28
  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -32,7 +32,7 @@ export var NoDataIllustration = function NoDataIllustration(_ref) {
32
32
  viewBox: "0 0 80 80",
33
33
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noData"), "".concat(blockClass, "__illustration--").concat(size)]),
34
34
  role: "img"
35
- }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
35
+ }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
36
36
  id: "prefix__a_dark_".concat(svgId),
37
37
  x1: 11.12,
38
38
  y1: 43.34,
@@ -172,7 +172,7 @@ export var NoDataIllustration = function NoDataIllustration(_ref) {
172
172
  })));
173
173
  };
174
174
  NoDataIllustration.propTypes = {
175
+ alt: PropTypes.string.isRequired,
175
176
  size: PropTypes.oneOf(['lg', 'sm']),
176
- theme: PropTypes.oneOf(['light', 'dark']),
177
- title: PropTypes.string
177
+ theme: PropTypes.oneOf(['light', 'dark'])
178
178
  };
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["title", "theme", "size"];
3
+ var _excluded = ["theme", "size", "alt"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var NoTagsIllustration = function NoTagsIllustration(_ref) {
23
- var title = _ref.title,
24
- theme = _ref.theme,
23
+ var theme = _ref.theme,
25
24
  size = _ref.size,
25
+ alt = _ref.alt,
26
26
  rest = _objectWithoutProperties(_ref, _excluded);
27
27
  var svgId = uuidv4();
28
28
  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -33,7 +33,7 @@ export var NoTagsIllustration = function NoTagsIllustration(_ref) {
33
33
  viewBox: "0 0 80 80",
34
34
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noTags"), "".concat(blockClass, "__illustration--").concat(size)]),
35
35
  role: "img"
36
- }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
36
+ }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
37
37
  id: "prefix__c_dark_".concat(svgId),
38
38
  x1: 34.96,
39
39
  y1: 5.37,
@@ -479,7 +479,7 @@ export var NoTagsIllustration = function NoTagsIllustration(_ref) {
479
479
  })));
480
480
  };
481
481
  NoTagsIllustration.propTypes = {
482
+ alt: PropTypes.string.isRequired,
482
483
  size: PropTypes.oneOf(['lg', 'sm']),
483
- theme: PropTypes.oneOf(['light', 'dark']),
484
- title: PropTypes.string
484
+ theme: PropTypes.oneOf(['light', 'dark'])
485
485
  };
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["title", "theme", "size"];
3
+ var _excluded = ["theme", "size", "alt"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var NotFoundIllustration = function NotFoundIllustration(_ref) {
23
- var title = _ref.title,
24
- theme = _ref.theme,
23
+ var theme = _ref.theme,
25
24
  size = _ref.size,
25
+ alt = _ref.alt,
26
26
  rest = _objectWithoutProperties(_ref, _excluded);
27
27
  var svgId = uuidv4();
28
28
  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -32,7 +32,7 @@ export var NotFoundIllustration = function NotFoundIllustration(_ref) {
32
32
  viewBox: "0 0 80 80",
33
33
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notFound"), "".concat(blockClass, "__illustration--").concat(size)]),
34
34
  role: "img"
35
- }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
35
+ }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
36
36
  id: "prefix__a_dark_".concat(svgId),
37
37
  x1: 2.6,
38
38
  y1: -12.81,
@@ -356,7 +356,7 @@ export var NotFoundIllustration = function NotFoundIllustration(_ref) {
356
356
  })));
357
357
  };
358
358
  NotFoundIllustration.propTypes = {
359
+ alt: PropTypes.string.isRequired,
359
360
  size: PropTypes.oneOf(['lg', 'sm']),
360
- theme: PropTypes.oneOf(['light', 'dark']),
361
- title: PropTypes.string
361
+ theme: PropTypes.oneOf(['light', 'dark'])
362
362
  };
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["title", "theme", "size"];
3
+ var _excluded = ["theme", "size", "alt"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var NotificationsIllustration = function NotificationsIllustration(_ref) {
23
- var title = _ref.title,
24
- theme = _ref.theme,
23
+ var theme = _ref.theme,
25
24
  size = _ref.size,
25
+ alt = _ref.alt,
26
26
  rest = _objectWithoutProperties(_ref, _excluded);
27
27
  var svgId = uuidv4();
28
28
  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -32,7 +32,7 @@ export var NotificationsIllustration = function NotificationsIllustration(_ref)
32
32
  viewBox: "0 0 80 80",
33
33
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
34
34
  role: "img"
35
- }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
35
+ }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
36
36
  id: "prefix__a_dark_".concat(svgId),
37
37
  x1: 30.05,
38
38
  y1: 54.31,
@@ -327,7 +327,7 @@ export var NotificationsIllustration = function NotificationsIllustration(_ref)
327
327
  })));
328
328
  };
329
329
  NotificationsIllustration.propTypes = {
330
+ alt: PropTypes.string.isRequired,
330
331
  size: PropTypes.oneOf(['lg', 'sm']),
331
- theme: PropTypes.oneOf(['light', 'dark']),
332
- title: PropTypes.string
332
+ theme: PropTypes.oneOf(['light', 'dark'])
333
333
  };
@@ -1,6 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
- var _excluded = ["title", "theme", "size"];
3
+ var _excluded = ["theme", "size", "alt"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -20,9 +20,9 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
20
20
  // The block part of our conventional BEM class names (blockClass__E--M).
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
23
- var title = _ref.title,
24
- theme = _ref.theme,
23
+ var theme = _ref.theme,
25
24
  size = _ref.size,
25
+ alt = _ref.alt,
26
26
  rest = _objectWithoutProperties(_ref, _excluded);
27
27
  var svgId = uuidv4();
28
28
  return /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
@@ -33,7 +33,7 @@ export var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
33
33
  viewBox: "0 0 80 80",
34
34
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-unauthorized"), "".concat(blockClass, "__illustration--").concat(size)]),
35
35
  role: "img"
36
- }), /*#__PURE__*/React.createElement("title", null, title), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
36
+ }), /*#__PURE__*/React.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
37
37
  id: "prefix__b_dark_".concat(svgId),
38
38
  x1: 17.33,
39
39
  y1: 40.68,
@@ -300,7 +300,7 @@ export var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
300
300
  })));
301
301
  };
302
302
  UnauthorizedIllustration.propTypes = {
303
+ alt: PropTypes.string.isRequired,
303
304
  size: PropTypes.oneOf(['lg', 'sm']),
304
- theme: PropTypes.oneOf(['light', 'dark']),
305
- title: PropTypes.string
305
+ theme: PropTypes.oneOf(['light', 'dark'])
306
306
  };