@carbon/ibm-products 2.15.2 → 2.17.0-alpha.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (149) hide show
  1. package/css/config-dev.css +3 -0
  2. package/css/config-dev.css.map +1 -0
  3. package/css/index-full-carbon.css +195 -1
  4. package/css/index-full-carbon.css.map +1 -1
  5. package/css/index-full-carbon.min.css +1 -1
  6. package/css/index-full-carbon.min.css.map +1 -1
  7. package/css/index-without-carbon-released-only.css +1852 -38
  8. package/css/index-without-carbon-released-only.css.map +1 -1
  9. package/css/index-without-carbon-released-only.min.css +1 -1
  10. package/css/index-without-carbon-released-only.min.css.map +1 -1
  11. package/css/index-without-carbon.css +195 -1
  12. package/css/index-without-carbon.css.map +1 -1
  13. package/css/index-without-carbon.min.css +1 -1
  14. package/css/index-without-carbon.min.css.map +1 -1
  15. package/css/index.css +5 -1
  16. package/css/index.css.map +1 -1
  17. package/css/index.min.css +1 -1
  18. package/css/index.min.css.map +1 -1
  19. package/es/components/Datagrid/Datagrid/DatagridContent.js +12 -9
  20. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -3
  21. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +36 -22
  22. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -11
  23. package/es/components/Datagrid/Datagrid/DatagridToolbar.js +7 -3
  24. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +24 -13
  25. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +2 -2
  26. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +50 -14
  27. package/es/components/Datagrid/Datagrid.docs-page.js +4 -4
  28. package/es/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
  29. package/es/components/Datagrid/useActionsColumn.js +1 -4
  30. package/es/components/Datagrid/useDatagrid.js +5 -1
  31. package/es/components/Datagrid/useFlexResize.js +19 -9
  32. package/es/components/Datagrid/useInfiniteScroll.js +1 -5
  33. package/es/components/Datagrid/useOnRowClick.js +6 -7
  34. package/es/components/Datagrid/useSelectRows.js +8 -5
  35. package/es/components/Datagrid/useSortableColumns.js +5 -7
  36. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -1
  37. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -1
  38. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -1
  39. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -1
  40. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -1
  41. package/es/components/EmptyStates/assets/ErrorIllustration.js +5 -3
  42. package/es/components/EmptyStates/assets/NoDataIllustration.js +5 -3
  43. package/es/components/EmptyStates/assets/NoTagsIllustration.js +5 -3
  44. package/es/components/EmptyStates/assets/NotFoundIllustration.js +5 -3
  45. package/es/components/EmptyStates/assets/NotificationsIllustration.js +5 -3
  46. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +5 -3
  47. package/es/components/InlineTip/InlineTip.docs-page.js +13 -0
  48. package/es/components/InlineTip/InlineTip.js +217 -0
  49. package/es/components/InlineTip/InlineTipButton.js +53 -0
  50. package/es/components/InlineTip/InlineTipLink.js +57 -0
  51. package/es/components/InlineTip/index.js +10 -0
  52. package/es/components/InlineTip/utils.js +36 -0
  53. package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.docs-page.js +11 -0
  54. package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +140 -0
  55. package/es/components/SteppedAnimatedMedia/assets/index.js +4 -0
  56. package/es/components/SteppedAnimatedMedia/index.js +8 -0
  57. package/es/global/js/package-settings.js +3 -4
  58. package/lib/components/Datagrid/Datagrid/DatagridContent.js +12 -9
  59. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -3
  60. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +41 -29
  61. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +11 -11
  62. package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +7 -3
  63. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +23 -12
  64. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +2 -2
  65. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +51 -15
  66. package/lib/components/Datagrid/Datagrid.docs-page.js +4 -4
  67. package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
  68. package/lib/components/Datagrid/useActionsColumn.js +1 -7
  69. package/lib/components/Datagrid/useDatagrid.js +5 -1
  70. package/lib/components/Datagrid/useFlexResize.js +19 -9
  71. package/lib/components/Datagrid/useInfiniteScroll.js +0 -4
  72. package/lib/components/Datagrid/useOnRowClick.js +6 -7
  73. package/lib/components/Datagrid/useSelectRows.js +8 -5
  74. package/lib/components/Datagrid/useSortableColumns.js +5 -7
  75. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -1
  76. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -1
  77. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -1
  78. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -1
  79. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -1
  80. package/lib/components/EmptyStates/assets/ErrorIllustration.js +5 -3
  81. package/lib/components/EmptyStates/assets/NoDataIllustration.js +5 -3
  82. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +5 -3
  83. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +5 -3
  84. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +5 -3
  85. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +5 -3
  86. package/lib/components/InlineTip/InlineTip.docs-page.js +23 -0
  87. package/lib/components/InlineTip/InlineTip.js +224 -0
  88. package/lib/components/InlineTip/InlineTipButton.js +57 -0
  89. package/lib/components/InlineTip/InlineTipLink.js +61 -0
  90. package/lib/components/InlineTip/index.js +26 -0
  91. package/lib/components/InlineTip/utils.js +43 -0
  92. package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.docs-page.js +21 -0
  93. package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +148 -0
  94. package/lib/components/SteppedAnimatedMedia/assets/index.js +9 -0
  95. package/lib/components/SteppedAnimatedMedia/index.js +12 -0
  96. package/lib/global/js/package-settings.js +3 -4
  97. package/package.json +6 -7
  98. package/scss/components/Datagrid/styles/_datagrid.scss +5 -0
  99. package/scss/components/{TooltipTrigger/_storybook-styles.scss → InlineTip/_index.scss} +2 -0
  100. package/scss/components/InlineTip/_inline-tip.scss +229 -0
  101. package/scss/components/SidePanel/_side-panel.scss +1 -4
  102. package/scss/components/_index-released-only-with-carbon.scss +1 -0
  103. package/scss/components/_index-released-only.scss +1 -0
  104. package/scss/components/_index.scss +1 -0
  105. package/scss/config-dev.scss +3 -0
  106. package/scss/components/APIKeyModal/_storybook-styles.scss +0 -35
  107. package/scss/components/AboutModal/_storybook-styles.scss +0 -29
  108. package/scss/components/ActionBar/_storybook-styles.scss +0 -8
  109. package/scss/components/ActionSet/_storybook-styles.scss +0 -36
  110. package/scss/components/AddSelect/_storybook-styles.scss +0 -6
  111. package/scss/components/BreadcrumbWithOverflow/_storybook-styles.scss +0 -8
  112. package/scss/components/ButtonMenu/_storybook-styles.scss +0 -6
  113. package/scss/components/ButtonSetWithOverflow/_storybook-styles.scss +0 -8
  114. package/scss/components/Card/_storybook-styles.scss +0 -12
  115. package/scss/components/Cascade/_storybook-styles.scss +0 -34
  116. package/scss/components/Checklist/_storybook-styles.scss +0 -13
  117. package/scss/components/CreateFullPage/_storybook-styles.scss +0 -67
  118. package/scss/components/CreateModal/_storybook-styles.scss +0 -54
  119. package/scss/components/CreateSidePanel/_storybook-styles.scss +0 -32
  120. package/scss/components/CreateTearsheet/_storybook-styles.scss +0 -56
  121. package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss +0 -27
  122. package/scss/components/DataSpreadsheet/_storybook-styles.scss +0 -17
  123. package/scss/components/Datagrid/_storybook-styles.scss +0 -157
  124. package/scss/components/EditFullPage/_storybook-styles.scss +0 -10
  125. package/scss/components/EditInPlace/_storybook-styles.scss +0 -15
  126. package/scss/components/EditSidePanel/_storybook-styles.scss +0 -32
  127. package/scss/components/EditTearsheet/_storybook-styles.scss +0 -59
  128. package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +0 -10
  129. package/scss/components/EditUpdateCards/_storybook-styles.scss +0 -55
  130. package/scss/components/EmptyStates/_storybook-styles.scss +0 -6
  131. package/scss/components/ExampleComponent/_storybook-styles.scss +0 -6
  132. package/scss/components/ExportModal/_storybook-styles.scss +0 -6
  133. package/scss/components/ExpressiveCard/_storybook-styles.scss +0 -26
  134. package/scss/components/FilterSummary/_storybook-styles.scss +0 -16
  135. package/scss/components/ImportModal/_storybook-styles.scss +0 -6
  136. package/scss/components/MultiAddSelect/_storybook-styles.scss +0 -6
  137. package/scss/components/NotificationsPanel/_storybook-styles.scss +0 -23
  138. package/scss/components/OptionsTile/_storybook-styles.scss +0 -29
  139. package/scss/components/PageHeader/_storybook-styles.scss +0 -90
  140. package/scss/components/ProductiveCard/_storybook-styles.scss +0 -23
  141. package/scss/components/RemoveModal/_storybook-styles.scss +0 -6
  142. package/scss/components/Saving/_storybook-styles.scss +0 -12
  143. package/scss/components/SidePanel/_storybook-styles.scss +0 -52
  144. package/scss/components/SingleAddSelect/_storybook-styles.scss +0 -6
  145. package/scss/components/StatusIcon/_storybook-styles.scss +0 -6
  146. package/scss/components/TagSet/_storybook-styles.scss +0 -8
  147. package/scss/components/Tearsheet/_storybook-styles.scss +0 -25
  148. package/scss/components/UserProfileImage/_storybook.scss +0 -6
  149. package/scss/components/WebTerminal/_storybook-styles.scss +0 -46
@@ -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 = ["theme", "size"];
3
+ var _excluded = ["theme", "title", "size"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -21,6 +21,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var NoDataIllustration = function NoDataIllustration(_ref) {
23
23
  var theme = _ref.theme,
24
+ title = _ref.title,
24
25
  size = _ref.size,
25
26
  rest = _objectWithoutProperties(_ref, _excluded);
26
27
  var svgId = uuidv4();
@@ -31,7 +32,7 @@ export var NoDataIllustration = function NoDataIllustration(_ref) {
31
32
  viewBox: "0 0 80 80",
32
33
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noData"), "".concat(blockClass, "__illustration--").concat(size)]),
33
34
  role: "img"
34
- }), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
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
36
  id: "prefix__a_dark_".concat(svgId),
36
37
  x1: 11.12,
37
38
  y1: 43.34,
@@ -172,5 +173,6 @@ export var NoDataIllustration = function NoDataIllustration(_ref) {
172
173
  };
173
174
  NoDataIllustration.propTypes = {
174
175
  size: PropTypes.oneOf(['lg', 'sm']),
175
- theme: PropTypes.oneOf(['light', 'dark'])
176
+ theme: PropTypes.oneOf(['light', 'dark']),
177
+ title: PropTypes.string
176
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 = ["theme", "size"];
3
+ var _excluded = ["theme", "title", "size"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -21,6 +21,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var NoTagsIllustration = function NoTagsIllustration(_ref) {
23
23
  var theme = _ref.theme,
24
+ title = _ref.title,
24
25
  size = _ref.size,
25
26
  rest = _objectWithoutProperties(_ref, _excluded);
26
27
  var svgId = uuidv4();
@@ -32,7 +33,7 @@ export var NoTagsIllustration = function NoTagsIllustration(_ref) {
32
33
  viewBox: "0 0 80 80",
33
34
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noTags"), "".concat(blockClass, "__illustration--").concat(size)]),
34
35
  role: "img"
35
- }), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
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
37
  id: "prefix__c_dark_".concat(svgId),
37
38
  x1: 34.96,
38
39
  y1: 5.37,
@@ -479,5 +480,6 @@ export var NoTagsIllustration = function NoTagsIllustration(_ref) {
479
480
  };
480
481
  NoTagsIllustration.propTypes = {
481
482
  size: PropTypes.oneOf(['lg', 'sm']),
482
- theme: PropTypes.oneOf(['light', 'dark'])
483
+ theme: PropTypes.oneOf(['light', 'dark']),
484
+ title: PropTypes.string
483
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 = ["theme", "size"];
3
+ var _excluded = ["theme", "title", "size"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -21,6 +21,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var NotFoundIllustration = function NotFoundIllustration(_ref) {
23
23
  var theme = _ref.theme,
24
+ title = _ref.title,
24
25
  size = _ref.size,
25
26
  rest = _objectWithoutProperties(_ref, _excluded);
26
27
  var svgId = uuidv4();
@@ -31,7 +32,7 @@ export var NotFoundIllustration = function NotFoundIllustration(_ref) {
31
32
  viewBox: "0 0 80 80",
32
33
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notFound"), "".concat(blockClass, "__illustration--").concat(size)]),
33
34
  role: "img"
34
- }), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
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
36
  id: "prefix__a_dark_".concat(svgId),
36
37
  x1: 2.6,
37
38
  y1: -12.81,
@@ -356,5 +357,6 @@ export var NotFoundIllustration = function NotFoundIllustration(_ref) {
356
357
  };
357
358
  NotFoundIllustration.propTypes = {
358
359
  size: PropTypes.oneOf(['lg', 'sm']),
359
- theme: PropTypes.oneOf(['light', 'dark'])
360
+ theme: PropTypes.oneOf(['light', 'dark']),
361
+ title: PropTypes.string
360
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 = ["theme", "size"];
3
+ var _excluded = ["theme", "title", "size"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -21,6 +21,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var NotificationsIllustration = function NotificationsIllustration(_ref) {
23
23
  var theme = _ref.theme,
24
+ title = _ref.title,
24
25
  size = _ref.size,
25
26
  rest = _objectWithoutProperties(_ref, _excluded);
26
27
  var svgId = uuidv4();
@@ -31,7 +32,7 @@ export var NotificationsIllustration = function NotificationsIllustration(_ref)
31
32
  viewBox: "0 0 80 80",
32
33
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
33
34
  role: "img"
34
- }), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
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
36
  id: "prefix__a_dark_".concat(svgId),
36
37
  x1: 30.05,
37
38
  y1: 54.31,
@@ -327,5 +328,6 @@ export var NotificationsIllustration = function NotificationsIllustration(_ref)
327
328
  };
328
329
  NotificationsIllustration.propTypes = {
329
330
  size: PropTypes.oneOf(['lg', 'sm']),
330
- theme: PropTypes.oneOf(['light', 'dark'])
331
+ theme: PropTypes.oneOf(['light', 'dark']),
332
+ title: PropTypes.string
331
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 = ["theme", "size"];
3
+ var _excluded = ["theme", "title", "size"];
4
4
  /**
5
5
  * Copyright IBM Corp. 2020, 2021
6
6
  *
@@ -21,6 +21,7 @@ import uuidv4 from '../../../global/js/utils/uuidv4';
21
21
  var blockClass = "".concat(pkg.prefix, "--empty-state");
22
22
  export var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
23
23
  var theme = _ref.theme,
24
+ title = _ref.title,
24
25
  size = _ref.size,
25
26
  rest = _objectWithoutProperties(_ref, _excluded);
26
27
  var svgId = uuidv4();
@@ -32,7 +33,7 @@ export var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
32
33
  viewBox: "0 0 80 80",
33
34
  className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-unauthorized"), "".concat(blockClass, "__illustration--").concat(size)]),
34
35
  role: "img"
35
- }), theme === 'dark' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
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
37
  id: "prefix__b_dark_".concat(svgId),
37
38
  x1: 17.33,
38
39
  y1: 40.68,
@@ -300,5 +301,6 @@ export var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
300
301
  };
301
302
  UnauthorizedIllustration.propTypes = {
302
303
  size: PropTypes.oneOf(['lg', 'sm']),
303
- theme: PropTypes.oneOf(['light', 'dark'])
304
+ theme: PropTypes.oneOf(['light', 'dark']),
305
+ title: PropTypes.string
304
306
  };
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
3
+ import * as stories from './InlineTip.stories';
4
+ var DocsPage = function DocsPage() {
5
+ return /*#__PURE__*/React.createElement(StoryDocsPage, {
6
+ blocks: [{
7
+ story: stories.inlineTip
8
+ }, {
9
+ story: stories.inlineTipNarrow
10
+ }]
11
+ });
12
+ };
13
+ export default DocsPage;
@@ -0,0 +1,217 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
4
+ var _excluded = ["children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "action", "title", "media"];
5
+ /**
6
+ * Copyright IBM Corp. 2023, 2023
7
+ *
8
+ * This source code is licensed under the Apache-2.0 license found in the
9
+ * LICENSE file in the root directory of this source tree.
10
+ */
11
+
12
+ // Import portions of React that are needed.
13
+ import React, { useEffect, useMemo, useRef, useState } from 'react';
14
+
15
+ // Other standard imports.
16
+ import { Close, Crossroads, Idea } from '@carbon/react/icons';
17
+ import { Button, IconButton } from '@carbon/react';
18
+ import PropTypes from 'prop-types';
19
+ import cx from 'classnames';
20
+ import { getComponentText } from './utils';
21
+ import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia';
22
+ import { getDevtoolsProps } from '../../global/js/utils/devtools';
23
+ import uuidv4 from '../../global/js/utils/uuidv4';
24
+ import { pkg } from '../../settings';
25
+
26
+ // The block part of our conventional BEM class names (blockClass__E--M).
27
+ var blockClass = "".concat(pkg.prefix, "--inline-tip");
28
+ var componentName = 'InlineTip';
29
+
30
+ // NOTE: the component SCSS is not imported here: it is rolled up separately.
31
+
32
+ // Default values for props
33
+ var defaults = {
34
+ closeIconDescription: 'Close',
35
+ collapsible: false,
36
+ collapseButtonLabel: 'Read less',
37
+ expandButtonLabel: 'Read more',
38
+ narrow: false,
39
+ onClick: function onClick() {},
40
+ onClose: function onClose() {}
41
+ };
42
+
43
+ /**
44
+ * Inline tips are messages embedded within other components that
45
+ * provide an ambient way to deliver learning content without
46
+ * distracting the user from their flow.
47
+ */
48
+ export var InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
49
+ var children = _ref.children,
50
+ className = _ref.className,
51
+ _ref$closeIconDescrip = _ref.closeIconDescription,
52
+ closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
53
+ _ref$collapsible = _ref.collapsible,
54
+ collapsible = _ref$collapsible === void 0 ? defaults.collapsible : _ref$collapsible,
55
+ _ref$collapseButtonLa = _ref.collapseButtonLabel,
56
+ collapseButtonLabel = _ref$collapseButtonLa === void 0 ? defaults.collapseButtonLabel : _ref$collapseButtonLa,
57
+ _ref$expandButtonLabe = _ref.expandButtonLabel,
58
+ expandButtonLabel = _ref$expandButtonLabe === void 0 ? defaults.expandButtonLabel : _ref$expandButtonLabe,
59
+ _ref$narrow = _ref.narrow,
60
+ narrow = _ref$narrow === void 0 ? defaults.narrow : _ref$narrow,
61
+ onClick = _ref.onClick,
62
+ onClose = _ref.onClose,
63
+ tertiaryButtonLabel = _ref.tertiaryButtonLabel,
64
+ action = _ref.action,
65
+ _ref$title = _ref.title,
66
+ title = _ref$title === void 0 ? defaults.title : _ref$title,
67
+ media = _ref.media,
68
+ rest = _objectWithoutProperties(_ref, _excluded);
69
+ var _useState = useState(collapsible),
70
+ _useState2 = _slicedToArray(_useState, 2),
71
+ isCollapsed = _useState2[0],
72
+ setIsCollapsed = _useState2[1];
73
+ var labelId = useRef(uuidv4()).current;
74
+ var previewText = useMemo(function () {
75
+ return getComponentText(React.Children.toArray(children));
76
+ }, [children]);
77
+ var childrenToRender = children;
78
+ if (!media && collapsible && isCollapsed) {
79
+ childrenToRender = /*#__PURE__*/React.createElement("p", {
80
+ className: "".concat(blockClass, "__preview-text")
81
+ }, previewText);
82
+ }
83
+
84
+ // If `collapsible` is changed after initial render...
85
+ useEffect(function () {
86
+ setIsCollapsed(collapsible);
87
+ }, [collapsible]);
88
+ return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
89
+ "aria-labelledby": labelId,
90
+ className: cx(blockClass, className, [collapsible ? "".concat(blockClass, "__collapsible") : null], [isCollapsed ? "".concat(blockClass, "__collapsible-collapsed") : null], [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], [media ? "".concat(blockClass, "__has-media") : null]),
91
+ ref: ref,
92
+ role: "complementary"
93
+ }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
94
+ className: "".concat(blockClass, "__close-icon-wrapper")
95
+ }, /*#__PURE__*/React.createElement(IconButton, {
96
+ className: "".concat(blockClass, "__close-icon"),
97
+ kind: "ghost",
98
+ label: closeIconDescription,
99
+ onClick: onClose,
100
+ size: "lg"
101
+ }, /*#__PURE__*/React.createElement(Close, {
102
+ size: 16
103
+ }))), (!media && narrow || !narrow) && /*#__PURE__*/React.createElement("div", {
104
+ className: "".concat(blockClass, "__icon-idea"),
105
+ tabIndex: -1
106
+ }, /*#__PURE__*/React.createElement(Idea, {
107
+ size: 16
108
+ })), /*#__PURE__*/React.createElement("div", {
109
+ className: "".concat(blockClass, "__content")
110
+ }, /*#__PURE__*/React.createElement("h6", {
111
+ id: labelId,
112
+ className: "".concat(blockClass, "__title")
113
+ }, title), /*#__PURE__*/React.createElement("section", {
114
+ className: "".concat(blockClass, "__body")
115
+ }, childrenToRender, action && (!collapsible || collapsible && !isCollapsed) && /*#__PURE__*/React.createElement("div", {
116
+ className: "".concat(blockClass, "__secondary-btn")
117
+ }, action)), (collapsible || tertiaryButtonLabel) && /*#__PURE__*/React.createElement("footer", {
118
+ className: "".concat(blockClass, "__footer")
119
+ }, collapsible && !media && /*#__PURE__*/React.createElement(Button, {
120
+ className: "".concat(blockClass, "__toggle-btn"),
121
+ kind: "ghost",
122
+ size: "md",
123
+ onClick: function onClick() {
124
+ setIsCollapsed(function (prevState) {
125
+ return !prevState;
126
+ });
127
+ }
128
+ }, isCollapsed ? expandButtonLabel : collapseButtonLabel), tertiaryButtonLabel && /*#__PURE__*/React.createElement(Button, {
129
+ className: "".concat(blockClass, "__close-btn"),
130
+ size: "md",
131
+ onClick: onClick,
132
+ kind: "tertiary",
133
+ renderIcon: function renderIcon() {
134
+ return /*#__PURE__*/React.createElement(Crossroads, {
135
+ size: 16
136
+ });
137
+ }
138
+ }, tertiaryButtonLabel))), media && (media.render ? /*#__PURE__*/React.createElement("div", {
139
+ className: "".concat(blockClass, "__media")
140
+ }, media.render()) : /*#__PURE__*/React.createElement(SteppedAnimatedMedia, {
141
+ className: "".concat(blockClass, "__media"),
142
+ filePaths: media.filePaths
143
+ })));
144
+ });
145
+ InlineTip = pkg.checkComponentEnabled(InlineTip, componentName);
146
+ InlineTip.displayName = componentName;
147
+ InlineTip.propTypes = {
148
+ /**
149
+ * Optional "call to action" ghost button or link that can appear
150
+ * directly below the content. This component comes with pre-styled
151
+ * elements available to use: `InlineTipLink` and `InlineTipButton`.
152
+ */
153
+ action: PropTypes.node,
154
+ /**
155
+ * Provide the contents of the InlineTip.
156
+ */
157
+ children: PropTypes.node.isRequired,
158
+ /**
159
+ * Provide an optional class to be applied to the containing node.
160
+ */
161
+ className: PropTypes.string,
162
+ /**
163
+ * Tooltip text and aria label for the Close button icon.
164
+ */
165
+ closeIconDescription: PropTypes.string,
166
+ /**
167
+ * The label for the collapse button.
168
+ * This button is not visible if `media` is specified.
169
+ */
170
+ collapseButtonLabel: PropTypes.string,
171
+ /**
172
+ * If set to `true`, it will truncate the body text to
173
+ * one line and expose an expand/collapse button toggle.
174
+ *
175
+ * This feature is disabled if `media` is specified.
176
+ */
177
+ collapsible: PropTypes.bool,
178
+ /**
179
+ * The label for the expand button.
180
+ * This button is not visible if `media` is specified.
181
+ */
182
+ expandButtonLabel: PropTypes.string,
183
+ /**
184
+ * The object describing an image in one of two shapes.
185
+ * - If a single media element is required, use `{render}`.
186
+ * - If a stepped animation is required, use `{filePaths}`.
187
+ *
188
+ * Enabling `media` disables the `collapsible` feature.
189
+ */
190
+ media: PropTypes.oneOfType([PropTypes.shape({
191
+ render: PropTypes.func
192
+ }), PropTypes.shape({
193
+ filePaths: PropTypes.string
194
+ })]),
195
+ /**
196
+ * Set to `true` to arrange the information in a format
197
+ * that is easier to read in a limited space.
198
+ */
199
+ narrow: PropTypes.bool,
200
+ /**
201
+ * Function to call when the tertiary button is clicked.
202
+ */
203
+ onClick: PropTypes.func,
204
+ /**
205
+ * Function to call when the InlineTip is closed via the "X" button.
206
+ */
207
+ onClose: PropTypes.func,
208
+ /**
209
+ * Defining the label will show a the tertiary button with the crossroads icon.
210
+ * You will still need to define the `onClose` method to trigger a callback.
211
+ */
212
+ tertiaryButtonLabel: PropTypes.string,
213
+ /**
214
+ * The title of the InlineTip.
215
+ */
216
+ title: PropTypes.string.isRequired
217
+ };
@@ -0,0 +1,53 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["children", "className"];
4
+ /**
5
+ * Copyright IBM Corp. 2023, 2023
6
+ *
7
+ * This source code is licensed under the Apache-2.0 license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+
11
+ // Import portions of React that are needed.
12
+ import React from 'react';
13
+
14
+ // Other standard imports.
15
+ import PropTypes from 'prop-types';
16
+ import cx from 'classnames';
17
+ import { Button } from '@carbon/react';
18
+ import { getDevtoolsProps } from '../../global/js/utils/devtools';
19
+ import { pkg } from '../../settings';
20
+
21
+ // The block part of our conventional BEM class names (blockClass__E--M).
22
+ var blockClass = "".concat(pkg.prefix, "--inline-tip__button");
23
+ var componentName = 'InlineTipButton';
24
+
25
+ // NOTE: the component SCSS is not imported here: it is rolled up separately.
26
+
27
+ /**
28
+ * This is a standard Carbon button, styled specifically for use inside InlineTip.
29
+ */
30
+ export var InlineTipButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
31
+ var children = _ref.children,
32
+ className = _ref.className,
33
+ rest = _objectWithoutProperties(_ref, _excluded);
34
+ return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
35
+ className: cx(blockClass, className),
36
+ ref: ref
37
+ }, getDevtoolsProps(componentName), {
38
+ size: "md",
39
+ kind: "ghost"
40
+ }), children);
41
+ });
42
+ InlineTipButton.propTypes = {
43
+ /**
44
+ * Provide the contents of the InlineTipButton.
45
+ */
46
+ children: PropTypes.node.isRequired,
47
+ /**
48
+ * Provide an optional class to be applied to the containing node.
49
+ */
50
+ className: PropTypes.string
51
+
52
+ /* TODO: add types and DocGen for all props. */
53
+ };
@@ -0,0 +1,57 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
+ var _excluded = ["children", "className"];
4
+ /**
5
+ * Copyright IBM Corp. 2023, 2023
6
+ *
7
+ * This source code is licensed under the Apache-2.0 license found in the
8
+ * LICENSE file in the root directory of this source tree.
9
+ */
10
+
11
+ // Import portions of React that are needed.
12
+ import React from 'react';
13
+
14
+ // Other standard imports.
15
+ import PropTypes from 'prop-types';
16
+ import cx from 'classnames';
17
+ import { Launch } from '@carbon/react/icons';
18
+ import { Link } from '@carbon/react';
19
+ import { getDevtoolsProps } from '../../global/js/utils/devtools';
20
+ import { pkg } from '../../settings';
21
+
22
+ // The block part of our conventional BEM class names (blockClass__E--M).
23
+ var blockClass = "".concat(pkg.prefix, "--inline-tip__link");
24
+ var componentName = 'InlineTipLink';
25
+
26
+ // NOTE: the component SCSS is not imported here: it is rolled up separately.
27
+
28
+ /**
29
+ * This is a standard Carbon link, styled specifically for use inside InlineTip.
30
+ */
31
+ export var InlineTipLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
32
+ var children = _ref.children,
33
+ className = _ref.className,
34
+ rest = _objectWithoutProperties(_ref, _excluded);
35
+ return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
36
+ className: cx(blockClass, className),
37
+ ref: ref
38
+ }, getDevtoolsProps(componentName), {
39
+ renderIcon: function renderIcon() {
40
+ return /*#__PURE__*/React.createElement(Launch, {
41
+ size: 16
42
+ });
43
+ }
44
+ }), children);
45
+ });
46
+ InlineTipLink.propTypes = {
47
+ /**
48
+ * Provide the contents of the InlineTipLink.
49
+ */
50
+ children: PropTypes.node.isRequired,
51
+ /**
52
+ * Provide an optional class to be applied to the containing node.
53
+ */
54
+ className: PropTypes.string
55
+
56
+ /* TODO: add types and DocGen for all props. */
57
+ };
@@ -0,0 +1,10 @@
1
+ /**
2
+ * Copyright IBM Corp. 2023, 2023
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+
8
+ export { InlineTip } from './InlineTip';
9
+ export { InlineTipButton } from './InlineTipButton';
10
+ export { InlineTipLink } from './InlineTipLink';
@@ -0,0 +1,36 @@
1
+ import _typeof from "@babel/runtime/helpers/typeof";
2
+ /**
3
+ * Copyright IBM Corp. 2023, 2023
4
+ *
5
+ * This source code is licensed under the Apache-2.0 license found in the
6
+ * LICENSE file in the root directory of this source tree.
7
+ */
8
+
9
+ export var getComponentText = function getComponentText(reactNode) {
10
+ var _reactNode$props;
11
+ var tmpChildren = (reactNode === null || reactNode === void 0 || (_reactNode$props = reactNode.props) === null || _reactNode$props === void 0 ? void 0 : _reactNode$props.children) || undefined;
12
+ if (Array.isArray(reactNode)) {
13
+ var joinedNodes = [];
14
+ reactNode.forEach(function (node) {
15
+ if (_typeof(node) === 'object') {
16
+ joinedNodes.push(getComponentText(node));
17
+ } else if (typeof node === 'string') {
18
+ joinedNodes.push(node);
19
+ }
20
+ });
21
+ return joinedNodes.join(' ');
22
+ }
23
+ if (tmpChildren === undefined) {
24
+ if (typeof reactNode === 'string') {
25
+ return reactNode;
26
+ } else {
27
+ return ' ';
28
+ }
29
+ }
30
+ if (_typeof(tmpChildren) === 'object') {
31
+ return getComponentText(reactNode.props.children);
32
+ }
33
+ if (typeof tmpChildren === 'string') {
34
+ return reactNode.props.children;
35
+ }
36
+ };
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
3
+ import * as stories from './SteppedAnimatedMedia.stories';
4
+ var DocsPage = function DocsPage() {
5
+ return /*#__PURE__*/React.createElement(StoryDocsPage, {
6
+ blocks: [{
7
+ story: stories.steppedAnimatedMedia
8
+ }]
9
+ });
10
+ };
11
+ export default DocsPage;