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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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;