@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.
- package/css/config-dev.css +3 -0
- package/css/config-dev.css.map +1 -0
- package/css/index-full-carbon.css +195 -1
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +1852 -38
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +195 -1
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +5 -1
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +12 -9
- package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js +36 -22
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +12 -11
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +7 -3
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +24 -13
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/stateReducer.js +50 -14
- package/es/components/Datagrid/Datagrid.docs-page.js +4 -4
- package/es/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
- package/es/components/Datagrid/useActionsColumn.js +1 -4
- package/es/components/Datagrid/useDatagrid.js +5 -1
- package/es/components/Datagrid/useFlexResize.js +19 -9
- package/es/components/Datagrid/useInfiniteScroll.js +1 -5
- package/es/components/Datagrid/useOnRowClick.js +6 -7
- package/es/components/Datagrid/useSelectRows.js +8 -5
- package/es/components/Datagrid/useSortableColumns.js +5 -7
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -1
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -1
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -1
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -1
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -1
- package/es/components/EmptyStates/assets/ErrorIllustration.js +5 -3
- package/es/components/EmptyStates/assets/NoDataIllustration.js +5 -3
- package/es/components/EmptyStates/assets/NoTagsIllustration.js +5 -3
- package/es/components/EmptyStates/assets/NotFoundIllustration.js +5 -3
- package/es/components/EmptyStates/assets/NotificationsIllustration.js +5 -3
- package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +5 -3
- package/es/components/InlineTip/InlineTip.docs-page.js +13 -0
- package/es/components/InlineTip/InlineTip.js +217 -0
- package/es/components/InlineTip/InlineTipButton.js +53 -0
- package/es/components/InlineTip/InlineTipLink.js +57 -0
- package/es/components/InlineTip/index.js +10 -0
- package/es/components/InlineTip/utils.js +36 -0
- package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.docs-page.js +11 -0
- package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +140 -0
- package/es/components/SteppedAnimatedMedia/assets/index.js +4 -0
- package/es/components/SteppedAnimatedMedia/index.js +8 -0
- package/es/global/js/package-settings.js +3 -4
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +12 -9
- package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js +41 -29
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +11 -11
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +7 -3
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +23 -12
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +2 -2
- package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +51 -15
- package/lib/components/Datagrid/Datagrid.docs-page.js +4 -4
- package/lib/components/Datagrid/Datagrid.stories/StickyActionsColumnStory.js +1 -1
- package/lib/components/Datagrid/useActionsColumn.js +1 -7
- package/lib/components/Datagrid/useDatagrid.js +5 -1
- package/lib/components/Datagrid/useFlexResize.js +19 -9
- package/lib/components/Datagrid/useInfiniteScroll.js +0 -4
- package/lib/components/Datagrid/useOnRowClick.js +6 -7
- package/lib/components/Datagrid/useSelectRows.js +8 -5
- package/lib/components/Datagrid/useSortableColumns.js +5 -7
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +2 -1
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +2 -1
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +2 -1
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +2 -1
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +2 -1
- package/lib/components/EmptyStates/assets/ErrorIllustration.js +5 -3
- package/lib/components/EmptyStates/assets/NoDataIllustration.js +5 -3
- package/lib/components/EmptyStates/assets/NoTagsIllustration.js +5 -3
- package/lib/components/EmptyStates/assets/NotFoundIllustration.js +5 -3
- package/lib/components/EmptyStates/assets/NotificationsIllustration.js +5 -3
- package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +5 -3
- package/lib/components/InlineTip/InlineTip.docs-page.js +23 -0
- package/lib/components/InlineTip/InlineTip.js +224 -0
- package/lib/components/InlineTip/InlineTipButton.js +57 -0
- package/lib/components/InlineTip/InlineTipLink.js +61 -0
- package/lib/components/InlineTip/index.js +26 -0
- package/lib/components/InlineTip/utils.js +43 -0
- package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.docs-page.js +21 -0
- package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js +148 -0
- package/lib/components/SteppedAnimatedMedia/assets/index.js +9 -0
- package/lib/components/SteppedAnimatedMedia/index.js +12 -0
- package/lib/global/js/package-settings.js +3 -4
- package/package.json +6 -7
- package/scss/components/Datagrid/styles/_datagrid.scss +5 -0
- package/scss/components/{TooltipTrigger/_storybook-styles.scss → InlineTip/_index.scss} +2 -0
- package/scss/components/InlineTip/_inline-tip.scss +229 -0
- package/scss/components/SidePanel/_side-panel.scss +1 -4
- package/scss/components/_index-released-only-with-carbon.scss +1 -0
- package/scss/components/_index-released-only.scss +1 -0
- package/scss/components/_index.scss +1 -0
- package/scss/config-dev.scss +3 -0
- package/scss/components/APIKeyModal/_storybook-styles.scss +0 -35
- package/scss/components/AboutModal/_storybook-styles.scss +0 -29
- package/scss/components/ActionBar/_storybook-styles.scss +0 -8
- package/scss/components/ActionSet/_storybook-styles.scss +0 -36
- package/scss/components/AddSelect/_storybook-styles.scss +0 -6
- package/scss/components/BreadcrumbWithOverflow/_storybook-styles.scss +0 -8
- package/scss/components/ButtonMenu/_storybook-styles.scss +0 -6
- package/scss/components/ButtonSetWithOverflow/_storybook-styles.scss +0 -8
- package/scss/components/Card/_storybook-styles.scss +0 -12
- package/scss/components/Cascade/_storybook-styles.scss +0 -34
- package/scss/components/Checklist/_storybook-styles.scss +0 -13
- package/scss/components/CreateFullPage/_storybook-styles.scss +0 -67
- package/scss/components/CreateModal/_storybook-styles.scss +0 -54
- package/scss/components/CreateSidePanel/_storybook-styles.scss +0 -32
- package/scss/components/CreateTearsheet/_storybook-styles.scss +0 -56
- package/scss/components/CreateTearsheetNarrow/_storybook-styles.scss +0 -27
- package/scss/components/DataSpreadsheet/_storybook-styles.scss +0 -17
- package/scss/components/Datagrid/_storybook-styles.scss +0 -157
- package/scss/components/EditFullPage/_storybook-styles.scss +0 -10
- package/scss/components/EditInPlace/_storybook-styles.scss +0 -15
- package/scss/components/EditSidePanel/_storybook-styles.scss +0 -32
- package/scss/components/EditTearsheet/_storybook-styles.scss +0 -59
- package/scss/components/EditTearsheetNarrow/_storybook-styles.scss +0 -10
- package/scss/components/EditUpdateCards/_storybook-styles.scss +0 -55
- package/scss/components/EmptyStates/_storybook-styles.scss +0 -6
- package/scss/components/ExampleComponent/_storybook-styles.scss +0 -6
- package/scss/components/ExportModal/_storybook-styles.scss +0 -6
- package/scss/components/ExpressiveCard/_storybook-styles.scss +0 -26
- package/scss/components/FilterSummary/_storybook-styles.scss +0 -16
- package/scss/components/ImportModal/_storybook-styles.scss +0 -6
- package/scss/components/MultiAddSelect/_storybook-styles.scss +0 -6
- package/scss/components/NotificationsPanel/_storybook-styles.scss +0 -23
- package/scss/components/OptionsTile/_storybook-styles.scss +0 -29
- package/scss/components/PageHeader/_storybook-styles.scss +0 -90
- package/scss/components/ProductiveCard/_storybook-styles.scss +0 -23
- package/scss/components/RemoveModal/_storybook-styles.scss +0 -6
- package/scss/components/Saving/_storybook-styles.scss +0 -12
- package/scss/components/SidePanel/_storybook-styles.scss +0 -52
- package/scss/components/SingleAddSelect/_storybook-styles.scss +0 -6
- package/scss/components/StatusIcon/_storybook-styles.scss +0 -6
- package/scss/components/TagSet/_storybook-styles.scss +0 -8
- package/scss/components/Tearsheet/_storybook-styles.scss +0 -25
- package/scss/components/UserProfileImage/_storybook.scss +0 -6
- 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;
|