@carbon/ibm-products 2.15.2 → 2.16.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (94) hide show
  1. package/css/index-full-carbon.css +195 -1
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +1 -1
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +195 -1
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +5 -1
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/Datagrid/Datagrid/DatagridContent.js +12 -9
  18. package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -3
  19. package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +36 -22
  20. package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -11
  21. package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +24 -13
  22. package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +2 -2
  23. package/es/components/Datagrid/Datagrid/addons/stateReducer.js +50 -14
  24. package/es/components/Datagrid/Datagrid.docs-page.js +3 -3
  25. package/es/components/Datagrid/useDatagrid.js +5 -1
  26. package/es/components/Datagrid/useOnRowClick.js +6 -7
  27. package/es/components/Datagrid/useSelectRows.js +8 -5
  28. package/es/components/Datagrid/useSortableColumns.js +5 -7
  29. package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -1
  30. package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -1
  31. package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -1
  32. package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -1
  33. package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -1
  34. package/es/components/EmptyStates/assets/ErrorIllustration.js +5 -3
  35. package/es/components/EmptyStates/assets/NoDataIllustration.js +5 -3
  36. package/es/components/EmptyStates/assets/NoTagsIllustration.js +5 -3
  37. package/es/components/EmptyStates/assets/NotFoundIllustration.js +5 -3
  38. package/es/components/EmptyStates/assets/NotificationsIllustration.js +5 -3
  39. package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +5 -3
  40. package/es/components/InlineTip/InlineTip.docs-page.js +13 -0
  41. package/es/components/InlineTip/InlineTip.js +217 -0
  42. package/es/components/InlineTip/InlineTipButton.js +53 -0
  43. package/es/components/InlineTip/InlineTipLink.js +57 -0
  44. package/es/components/InlineTip/index.js +10 -0
  45. package/es/components/InlineTip/utils.js +36 -0
  46. package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.docs-page.js +11 -0
  47. package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +140 -0
  48. package/es/components/SteppedAnimatedMedia/assets/index.js +4 -0
  49. package/es/components/SteppedAnimatedMedia/index.js +8 -0
  50. package/es/global/js/package-settings.js +2 -1
  51. package/lib/components/Datagrid/Datagrid/DatagridContent.js +12 -9
  52. package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -3
  53. package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +41 -29
  54. package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +11 -11
  55. package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +23 -12
  56. package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +2 -2
  57. package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +51 -15
  58. package/lib/components/Datagrid/Datagrid.docs-page.js +3 -3
  59. package/lib/components/Datagrid/useDatagrid.js +5 -1
  60. package/lib/components/Datagrid/useOnRowClick.js +6 -7
  61. package/lib/components/Datagrid/useSelectRows.js +8 -5
  62. package/lib/components/Datagrid/useSortableColumns.js +5 -7
  63. package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -1
  64. package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -1
  65. package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -1
  66. package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -1
  67. package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -1
  68. package/lib/components/EmptyStates/assets/ErrorIllustration.js +5 -3
  69. package/lib/components/EmptyStates/assets/NoDataIllustration.js +5 -3
  70. package/lib/components/EmptyStates/assets/NoTagsIllustration.js +5 -3
  71. package/lib/components/EmptyStates/assets/NotFoundIllustration.js +5 -3
  72. package/lib/components/EmptyStates/assets/NotificationsIllustration.js +5 -3
  73. package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +5 -3
  74. package/lib/components/InlineTip/InlineTip.docs-page.js +23 -0
  75. package/lib/components/InlineTip/InlineTip.js +224 -0
  76. package/lib/components/InlineTip/InlineTipButton.js +57 -0
  77. package/lib/components/InlineTip/InlineTipLink.js +61 -0
  78. package/lib/components/InlineTip/index.js +26 -0
  79. package/lib/components/InlineTip/utils.js +43 -0
  80. package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.docs-page.js +21 -0
  81. package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +148 -0
  82. package/lib/components/SteppedAnimatedMedia/assets/index.js +9 -0
  83. package/lib/components/SteppedAnimatedMedia/index.js +12 -0
  84. package/lib/global/js/package-settings.js +2 -1
  85. package/package.json +2 -2
  86. package/scss/components/Datagrid/styles/_datagrid.scss +5 -0
  87. package/scss/components/InlineTip/_index.scss +8 -0
  88. package/scss/components/InlineTip/_inline-tip.scss +229 -0
  89. package/scss/components/InlineTip/_storybook-styles.scss +20 -0
  90. package/scss/components/SidePanel/_side-panel.scss +1 -4
  91. package/scss/components/SteppedAnimatedMedia/_index.scss +8 -0
  92. package/scss/components/SteppedAnimatedMedia/_stepped-animated-media.scss +6 -0
  93. package/scss/components/SteppedAnimatedMedia/_storybook-styles.scss +13 -0
  94. package/scss/components/_index.scss +1 -0
@@ -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;
@@ -0,0 +1,140 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
3
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
4
+ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
+ var _excluded = ["className", "playStep", "filePaths"];
6
+ import _regeneratorRuntime from "@babel/runtime/regenerator";
7
+ /**
8
+ * Copyright IBM Corp. 2023, 2023
9
+ *
10
+ * This source code is licensed under the Apache-2.0 license found in the
11
+ * LICENSE file in the root directory of this source tree.
12
+ */
13
+
14
+ // Import portions of React that are needed.
15
+ import React, { useEffect, useRef, useState } from 'react';
16
+ import lottie from 'lottie-web';
17
+ import clamp from 'lodash/clamp';
18
+ // Other standard imports.
19
+ import PropTypes from 'prop-types';
20
+ import cx from 'classnames';
21
+ import { getDevtoolsProps } from '../../global/js/utils/devtools';
22
+ import { pkg } from '../../settings';
23
+
24
+ // The block part of our conventional BEM class names (blockClass__E--M).
25
+ var blockClass = "".concat(pkg.prefix, "--stepped-animated-media");
26
+ var componentName = 'SteppedAnimatedMedia';
27
+
28
+ // NOTE: the component SCSS is not imported here: it is rolled up separately.
29
+
30
+ // Default values for props
31
+ var defaults = {
32
+ playStep: 0
33
+ };
34
+
35
+ /**
36
+ * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
37
+ */
38
+ export var SteppedAnimatedMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
39
+ var className = _ref.className,
40
+ _ref$playStep = _ref.playStep,
41
+ playStep = _ref$playStep === void 0 ? defaults.playStep : _ref$playStep,
42
+ filePaths = _ref.filePaths,
43
+ rest = _objectWithoutProperties(_ref, _excluded);
44
+ var _useState = useState([]),
45
+ _useState2 = _slicedToArray(_useState, 2),
46
+ jsonData = _useState2[0],
47
+ setJsonData = _useState2[1];
48
+ var animRef = useRef();
49
+ var backupRef = useRef();
50
+ var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
51
+ // load animation source
52
+ useEffect(function () {
53
+ var isJsonFile = function isJsonFile(filePath) {
54
+ return filePath.includes('.json');
55
+ };
56
+ function loadArtifact() {
57
+ return _loadArtifact.apply(this, arguments);
58
+ }
59
+ function _loadArtifact() {
60
+ _loadArtifact = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
61
+ var allJsonArtifacts, rawResponse, jsonResponse, fileData;
62
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
63
+ while (1) switch (_context.prev = _context.next) {
64
+ case 0:
65
+ if (!(filePaths && filePaths.every(isJsonFile))) {
66
+ _context.next = 10;
67
+ break;
68
+ }
69
+ allJsonArtifacts = filePaths.map(function (el) {
70
+ return fetch(el);
71
+ });
72
+ _context.next = 4;
73
+ return Promise.all(allJsonArtifacts);
74
+ case 4:
75
+ rawResponse = _context.sent;
76
+ jsonResponse = rawResponse.map(function (el) {
77
+ return el.json();
78
+ });
79
+ _context.next = 8;
80
+ return Promise.all(jsonResponse);
81
+ case 8:
82
+ fileData = _context.sent;
83
+ setJsonData(fileData);
84
+ case 10:
85
+ case "end":
86
+ return _context.stop();
87
+ }
88
+ }, _callee);
89
+ }));
90
+ return _loadArtifact.apply(this, arguments);
91
+ }
92
+ loadArtifact();
93
+ }, [filePaths]);
94
+ useEffect(function () {
95
+ var _window;
96
+ var prefersReducedMotion = (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;
97
+ if (localRef.current) {
98
+ var _animRef$current, _animRef$current2, _animRef$current3;
99
+ (_animRef$current = animRef.current) === null || _animRef$current === void 0 || _animRef$current.destroy();
100
+ animRef.current = lottie.loadAnimation({
101
+ container: localRef.current,
102
+ renderer: 'svg',
103
+ animationData: jsonData[clamp(playStep, 0, jsonData.length - 1)],
104
+ loop: false,
105
+ autoplay: false,
106
+ rendererSettings: {
107
+ preserveAspectRatio: 'xMidYMid slice'
108
+ }
109
+ });
110
+ prefersReducedMotion ? (_animRef$current2 = animRef.current) === null || _animRef$current2 === void 0 ? void 0 : _animRef$current2.goToAndStop(0) : (_animRef$current3 = animRef.current) === null || _animRef$current3 === void 0 ? void 0 : _animRef$current3.goToAndPlay(0);
111
+ }
112
+ return function () {
113
+ var _animRef$current4;
114
+ return (_animRef$current4 = animRef.current) === null || _animRef$current4 === void 0 ? void 0 : _animRef$current4.destroy();
115
+ };
116
+ }, [jsonData, localRef, playStep]);
117
+ if (!jsonData) {
118
+ return null;
119
+ }
120
+ return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
121
+ className: cx(blockClass, className),
122
+ role: "img",
123
+ ref: localRef
124
+ }, getDevtoolsProps(componentName)));
125
+ });
126
+ SteppedAnimatedMedia.displayName = componentName;
127
+ SteppedAnimatedMedia.propTypes = {
128
+ /**
129
+ * Optional class name for this component.
130
+ */
131
+ className: PropTypes.string,
132
+ /**
133
+ * The file path(s) to json formatted Lottie animation files.
134
+ */
135
+ filePaths: PropTypes.arrayOf(PropTypes.string).isRequired,
136
+ /**
137
+ * Which animation step from the filePaths array to play.
138
+ */
139
+ playStep: PropTypes.number
140
+ };
@@ -0,0 +1,4 @@
1
+ var HowACaseIsCreated1 = new URL('./illustrations/how-a-case-is-created-1', import.meta.url).pathname;
2
+ var HowACaseIsCreated2 = new URL('./illustrations/how-a-case-is-created-2', import.meta.url).pathname;
3
+ var HowACaseIsCreated3 = new URL('./illustrations/how-a-case-is-created-3', import.meta.url).pathname;
4
+ export { HowACaseIsCreated1, HowACaseIsCreated2, HowACaseIsCreated3 };
@@ -0,0 +1,8 @@
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 { SteppedAnimatedMedia } from './SteppedAnimatedMedia';
@@ -72,7 +72,8 @@ var defaults = {
72
72
  /* new component flags here - comment used by generate CLI */
73
73
 
74
74
  // Novice to pro components not yet reviewed and released:
75
- Checklist: false
75
+ Checklist: false,
76
+ InlineTip: false
76
77
  },
77
78
  // feature level flags
78
79
  feature: {