@carbon/ibm-products 2.1.1 → 2.1.3
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +586 -191
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +157 -1
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +2 -2
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +344 -20
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +248 -95
- package/css/index.css.map +1 -1
- package/css/index.min.css +3 -3
- package/css/index.min.css.map +1 -1
- package/es/components/APIKeyModal/APIKeyModal.docs-page.js +26 -0
- package/es/components/AboutModal/AboutModal.docs-page.js +21 -0
- package/es/components/AboutModal/AboutModal.js +1 -1
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +3 -0
- package/es/components/Cascade/Cascade.docs-page.js +22 -0
- package/es/components/Cascade/Cascade.js +11 -1
- package/es/components/CreateFullPage/CreateFullPage.docs-page.js +39 -0
- package/es/components/CreateFullPage/CreateFullPage.js +13 -0
- package/es/components/CreateModal/CreateModal.docs-page.js +24 -0
- package/es/components/CreateModal/CreateModal.js +7 -0
- package/es/components/CreateSidePanel/CreateSidePanel.docs-page.js +18 -0
- package/es/components/CreateSidePanel/CreateSidePanel.js +1 -1
- package/es/components/CreateTearsheet/CreateTearsheet.docs-page.js +29 -0
- package/es/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
- package/es/components/Datagrid/Datagrid/DatagridToolbar.js +3 -2
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +5 -11
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +12 -10
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/es/components/Datagrid/utils/DatagridActions.js +6 -14
- package/es/components/EditFullPage/EditFullPage.docs-page.js +39 -0
- package/es/components/EditFullPage/EditFullPage.js +2 -1
- package/es/components/EditSidePanel/EditSidePanel.js +1 -1
- package/es/components/EditTearsheet/EditTearsheet.docs-page.js +25 -0
- package/es/components/EditTearsheet/EditTearsheet.js +4 -0
- package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
- package/es/components/EditUpdateCards/EditUpdateCards.js +3 -2
- package/es/components/EmptyStates/EmptyState.js +4 -0
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
- package/es/components/ExampleComponent/ExampleComponent.docs-page.js +22 -0
- package/es/components/ExportModal/ExportModal.js +4 -0
- package/es/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
- package/es/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
- package/es/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
- package/es/components/ImportModal/ImportModal.docs-page.js +18 -0
- package/es/components/ImportModal/ImportModal.js +13 -6
- package/es/components/MultiAddSelect/MultiAddSelect.docs-page.js +17 -0
- package/es/components/MultiAddSelect/MultiAddSelect.js +4 -0
- package/es/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +2 -17
- package/es/components/PageHeader/PageHeaderUtils.js +2 -2
- package/es/components/RemoveModal/RemoveModal.docs-page.js +18 -0
- package/es/components/RemoveModal/RemoveModal.js +6 -0
- package/es/components/SingleAddSelect/SingleAddSelect.docs-page.js +15 -0
- package/es/components/SingleAddSelect/SingleAddSelect.js +4 -0
- package/es/components/StatusIcon/StatusIcon.docs-page.js +17 -0
- package/es/components/StatusIcon/StatusIcon.js +10 -0
- package/es/components/Tearsheet/TearsheetShell.js +11 -6
- package/es/components/Toolbar/Toolbar.docs-page.js +14 -0
- package/es/components/UserProfileImage/UserProfileImage.docs-page.js +17 -0
- package/es/components/UserProfileImage/UserProfileImage.js +1 -1
- package/es/components/WebTerminal/WebTerminal.docs-page.js +52 -0
- package/es/components/WebTerminal/WebTerminal.js +4 -0
- package/es/global/js/hooks/useCreateComponentStepChange.js +16 -15
- package/es/global/js/utils/StoryDocsPage.js +218 -0
- package/es/global/js/utils/story-helper.js +108 -6
- package/lib/components/APIKeyModal/APIKeyModal.docs-page.js +37 -0
- package/lib/components/AboutModal/AboutModal.docs-page.js +32 -0
- package/lib/components/AboutModal/AboutModal.js +1 -1
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +3 -0
- package/lib/components/Cascade/Cascade.docs-page.js +33 -0
- package/lib/components/Cascade/Cascade.js +11 -1
- package/lib/components/CreateFullPage/CreateFullPage.docs-page.js +50 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +13 -0
- package/lib/components/CreateModal/CreateModal.docs-page.js +35 -0
- package/lib/components/CreateModal/CreateModal.js +7 -0
- package/lib/components/CreateSidePanel/CreateSidePanel.docs-page.js +29 -0
- package/lib/components/CreateSidePanel/CreateSidePanel.js +1 -1
- package/lib/components/CreateTearsheet/CreateTearsheet.docs-page.js +40 -0
- package/lib/components/DataSpreadsheet/DataSpreadsheet.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +3 -3
- package/lib/components/Datagrid/Datagrid/DatagridToolbar.js +3 -2
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +4 -10
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +12 -10
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/lib/components/Datagrid/utils/DatagridActions.js +5 -13
- package/lib/components/EditFullPage/EditFullPage.docs-page.js +50 -0
- package/lib/components/EditFullPage/EditFullPage.js +2 -1
- package/lib/components/EditSidePanel/EditSidePanel.js +1 -1
- package/lib/components/EditTearsheet/EditTearsheet.docs-page.js +36 -0
- package/lib/components/EditTearsheet/EditTearsheet.js +4 -0
- package/lib/components/EditTearsheetNarrow/EditTearsheetNarrow.js +1 -1
- package/lib/components/EditUpdateCards/EditUpdateCards.js +3 -2
- package/lib/components/EmptyStates/EmptyState.js +4 -0
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +4 -0
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +4 -0
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +4 -0
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +4 -0
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +4 -0
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +4 -0
- package/lib/components/ExampleComponent/ExampleComponent.docs-page.js +33 -0
- package/lib/components/ExportModal/ExportModal.js +4 -0
- package/lib/components/HTTPErrors/HTTPError403/HTTPError403.js +6 -0
- package/lib/components/HTTPErrors/HTTPError404/HTTPError404.js +6 -0
- package/lib/components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js +6 -0
- package/lib/components/ImportModal/ImportModal.docs-page.js +26 -0
- package/lib/components/ImportModal/ImportModal.js +13 -6
- package/lib/components/MultiAddSelect/MultiAddSelect.docs-page.js +25 -0
- package/lib/components/MultiAddSelect/MultiAddSelect.js +4 -0
- package/lib/components/NotificationsPanel/preview-components/UnreadNotificationBell.js +2 -17
- package/lib/components/PageHeader/PageHeaderUtils.js +2 -2
- package/lib/components/RemoveModal/RemoveModal.docs-page.js +26 -0
- package/lib/components/RemoveModal/RemoveModal.js +6 -0
- package/lib/components/SingleAddSelect/SingleAddSelect.docs-page.js +23 -0
- package/lib/components/SingleAddSelect/SingleAddSelect.js +4 -0
- package/lib/components/StatusIcon/StatusIcon.docs-page.js +28 -0
- package/lib/components/StatusIcon/StatusIcon.js +10 -0
- package/lib/components/Tearsheet/TearsheetShell.js +11 -6
- package/lib/components/Toolbar/Toolbar.docs-page.js +25 -0
- package/lib/components/UserProfileImage/UserProfileImage.docs-page.js +28 -0
- package/lib/components/UserProfileImage/UserProfileImage.js +1 -1
- package/lib/components/WebTerminal/WebTerminal.docs-page.js +63 -0
- package/lib/components/WebTerminal/WebTerminal.js +4 -0
- package/lib/global/js/hooks/useCreateComponentStepChange.js +16 -15
- package/lib/global/js/utils/StoryDocsPage.js +225 -0
- package/lib/global/js/utils/story-helper.js +115 -7
- package/package.json +10 -10
- package/scss/components/Cascade/_storybook-styles.scss +3 -2
- package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
- package/scss/components/Datagrid/_storybook-styles.scss +8 -2
- package/scss/components/Datagrid/styles/_datagrid.scss +14 -0
- package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +7 -0
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +4 -0
- package/scss/components/NotificationsPanel/_storybook-styles.scss +10 -2
- package/scss/components/PageHeader/_storybook-styles.scss +24 -14
- package/scss/components/Tearsheet/_tearsheet.scss +7 -1
- package/scss/components/WebTerminal/_storybook-styles.scss +11 -1
- package/scss/global/styles/_display-box.scss +1 -0
- package/scss/components/HTTPErrors/_storybook-styles.scss +0 -6
@@ -0,0 +1,33 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.default = void 0;
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
10
|
+
var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
|
11
|
+
var stories = _interopRequireWildcard(require("./ExampleComponent.stories"));
|
12
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
13
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
14
|
+
/**
|
15
|
+
* Copyright IBM Corp. 2023, 2023
|
16
|
+
*
|
17
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
18
|
+
* LICENSE file in the root directory of this source tree.
|
19
|
+
*/
|
20
|
+
|
21
|
+
/**
|
22
|
+
* OPTIONAL: required only to customize default docs page
|
23
|
+
*/
|
24
|
+
var DocsPage = function DocsPage() {
|
25
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
26
|
+
blocks: [{
|
27
|
+
description: 'Here it is in use.',
|
28
|
+
story: stories.exampleComponent
|
29
|
+
}]
|
30
|
+
});
|
31
|
+
};
|
32
|
+
var _default = DocsPage;
|
33
|
+
exports.default = _default;
|
@@ -36,6 +36,10 @@ var defaults = {
|
|
36
36
|
preformattedExtensions: Object.freeze([]),
|
37
37
|
validExtensions: Object.freeze([])
|
38
38
|
};
|
39
|
+
|
40
|
+
/**
|
41
|
+
* Modal dialog version of the export pattern
|
42
|
+
*/
|
39
43
|
var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
40
44
|
var body = _ref.body,
|
41
45
|
className = _ref.className,
|
@@ -26,6 +26,12 @@ var _excluded = ["className", "description", "errorCodeLabel", "links", "title"]
|
|
26
26
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
27
27
|
var blockClass = "".concat(_settings.pkg.prefix, "--http-errors");
|
28
28
|
var componentName = 'HTTPError403';
|
29
|
+
|
30
|
+
/**
|
31
|
+
* HTTP errors are used in an attempt to access something that isn’t available or
|
32
|
+
the user doesn’t have permission for. This HTTPError component is generic so you
|
33
|
+
can use it when you receive an error code that isn't provided.
|
34
|
+
*/
|
29
35
|
var HTTPError403 = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
30
36
|
var className = _ref.className,
|
31
37
|
description = _ref.description,
|
@@ -26,6 +26,12 @@ var _excluded = ["className", "description", "errorCodeLabel", "links", "title"]
|
|
26
26
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
27
27
|
var blockClass = "".concat(_settings.pkg.prefix, "--http-errors");
|
28
28
|
var componentName = 'HTTPError404';
|
29
|
+
|
30
|
+
/**
|
31
|
+
* HTTP errors are used in an attempt to access something that isn’t available or
|
32
|
+
the user doesn’t have permission for. This HTTPError component is generic so you
|
33
|
+
can use it when you receive an error code that isn't provided.
|
34
|
+
*/
|
29
35
|
var HTTPError404 = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
30
36
|
var className = _ref.className,
|
31
37
|
description = _ref.description,
|
@@ -26,6 +26,12 @@ var _excluded = ["className", "description", "errorCodeLabel", "links", "title"]
|
|
26
26
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
27
27
|
var blockClass = "".concat(_settings.pkg.prefix, "--http-errors");
|
28
28
|
var componentName = 'HTTPErrorOther';
|
29
|
+
|
30
|
+
/**
|
31
|
+
* HTTP errors are used in an attempt to access something that isn’t available or
|
32
|
+
the user doesn’t have permission for. This HTTPError component is generic so you
|
33
|
+
can use it when you receive an error code that isn't provided.
|
34
|
+
*/
|
29
35
|
var HTTPErrorOther = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
30
36
|
var className = _ref.className,
|
31
37
|
description = _ref.description,
|
@@ -0,0 +1,26 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.default = void 0;
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
|
10
|
+
var _blocks = require("@storybook/blocks");
|
11
|
+
var _storyHelper = require("../../global/js/utils/story-helper");
|
12
|
+
var DocsPage = function DocsPage() {
|
13
|
+
var _useOf = (0, _blocks.useOf)('meta', ['meta']),
|
14
|
+
csfFile = _useOf.csfFile;
|
15
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
16
|
+
altGuidelinesHref: [(0, _storyHelper.storyDocsGuidelines)(csfFile), {
|
17
|
+
href: 'https://www.carbondesignsystem.com/components/modal/usage',
|
18
|
+
label: 'Carbon Modal usage guidelines'
|
19
|
+
}, {
|
20
|
+
href: 'https://react.carbondesignsystem.com/?path=/docs/modal--default',
|
21
|
+
label: 'Carbon Modal documentation'
|
22
|
+
}]
|
23
|
+
});
|
24
|
+
};
|
25
|
+
var _default = DocsPage;
|
26
|
+
exports.default = _default;
|
@@ -187,6 +187,13 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
187
187
|
var inputHandler = function inputHandler(evt) {
|
188
188
|
setImportUrl(evt.target.value);
|
189
189
|
};
|
190
|
+
var onCloseHandler = function onCloseHandler() {
|
191
|
+
setFiles([]);
|
192
|
+
setImportUrl('');
|
193
|
+
if (onClose) {
|
194
|
+
onClose();
|
195
|
+
}
|
196
|
+
};
|
190
197
|
var numberOfFiles = files.length;
|
191
198
|
var numberOfValidFiles = files.filter(function (f) {
|
192
199
|
return !f.invalid;
|
@@ -198,13 +205,13 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
198
205
|
var blockClass = "".concat(_settings.pkg.prefix, "--import-modal");
|
199
206
|
return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, _objectSpread({
|
200
207
|
open: open,
|
201
|
-
ref: ref
|
202
|
-
onClose: onClose
|
208
|
+
ref: ref
|
203
209
|
}, (0, _devtools.getDevtoolsProps)(componentName)), {
|
204
210
|
"aria-label": title,
|
205
211
|
className: (0, _classnames.default)(blockClass, className),
|
206
212
|
size: "sm",
|
207
|
-
preventCloseOnClickOutside: true
|
213
|
+
preventCloseOnClickOutside: true,
|
214
|
+
onClose: onCloseHandler
|
208
215
|
}), /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
|
209
216
|
className: "".concat(blockClass, "__header"),
|
210
217
|
title: title
|
@@ -267,7 +274,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
267
274
|
}, /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
268
275
|
type: "button",
|
269
276
|
kind: "secondary",
|
270
|
-
onClick:
|
277
|
+
onClick: onCloseHandler
|
271
278
|
}, secondaryButtonText), /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
272
279
|
type: "submit",
|
273
280
|
kind: "primary",
|
@@ -371,11 +378,11 @@ ImportModal.propTypes = {
|
|
371
378
|
/**
|
372
379
|
* Specify a handler for "submitting" modal. Access the imported file via `file => {}`
|
373
380
|
*/
|
374
|
-
onRequestSubmit: _propTypes.default.func,
|
381
|
+
onRequestSubmit: _propTypes.default.func.isRequired,
|
375
382
|
/**
|
376
383
|
* Specify whether the Modal is currently open
|
377
384
|
*/
|
378
|
-
open: _propTypes.default.bool,
|
385
|
+
open: _propTypes.default.bool.isRequired,
|
379
386
|
/**
|
380
387
|
* Specify the text for the primary button
|
381
388
|
*/
|
@@ -0,0 +1,25 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.default = void 0;
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
|
10
|
+
var DocsPage = function DocsPage() {
|
11
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
12
|
+
altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/add-and-select/usage",
|
13
|
+
blocks: [{
|
14
|
+
title: 'Structuring items',
|
15
|
+
description: "The `items` object has a lot of customization potential and can greatly effect\nthe way the component is displayed and how you interact with it.\n\nLet's walk through an example.",
|
16
|
+
source: {
|
17
|
+
code: "items: {\n modifiers: { // adds a modifier dropdown inside the items\n label: PropTypes.string, // label for the dropdown\n options: PropTypes.array, // list of options / values for the dropdown\n },\n sortBy: ['title'], // designates which properties should be used to sort the column when using a hierarchy\n entries: [ // the actual list of items / entries\n {\n id: '1', // required unique id for the entry\n value: '1', // required value of the entry\n title: 'item 1', // required title to display\n subtitle: 'item 1 subtitle', // subtitle to display\n children: { // designates if entry has children. if the children prop is found a hierarchy list will be used\n sortBy: ['title', 'size'],\n filterBy: 'fileType', // designates which property should be used to filter the column of items\n entries: [\n {\n id: '1-1',\n value: 'file1.pdf',\n title: 'file1.pdf',\n fileType: 'pdf',\n size: '100',\n icon: Document16, // designates if an icon should be displayed. While similar to avatar icon, both have different displays.\n tag: 'business',\n avatar: { // designates if an avatar should be displayed\n alt: 'alt text',\n icon: <Icon />,\n src: 'avatar.png',\n },\n },\n ],\n },\n },\n ],\n}"
|
18
|
+
}
|
19
|
+
}, {
|
20
|
+
description: "The properties that have been commented on like `id`, `value`, and `icon` have\nspecific use within the component and are generally required. Other properties\nlike `fileType` and `size` do not and will simply show up as details in the\nsidebar when selected."
|
21
|
+
}]
|
22
|
+
});
|
23
|
+
};
|
24
|
+
var _default = DocsPage;
|
25
|
+
exports.default = _default;
|
@@ -22,6 +22,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
22
22
|
//
|
23
23
|
|
24
24
|
var componentName = 'MultiAddSelect';
|
25
|
+
|
26
|
+
/**
|
27
|
+
* Used to add or select multiple or more items from larger lists or hierarchies.
|
28
|
+
*/
|
25
29
|
var MultiAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
26
30
|
return /*#__PURE__*/_react.default.createElement(_AddSelect.AddSelect, (0, _extends2.default)({}, props, {
|
27
31
|
multi: true,
|
@@ -22,34 +22,19 @@ var UnreadNotificationBell = function UnreadNotificationBell() {
|
|
22
22
|
xmlns: "http://www.w3.org/2000/svg",
|
23
23
|
xmlnsXlink: "http://www.w3.org/1999/xlink"
|
24
24
|
}, /*#__PURE__*/_react.default.createElement("title", null, "Unread notification bell"), /*#__PURE__*/_react.default.createElement("g", {
|
25
|
-
id: "Page-1",
|
26
|
-
stroke: "none",
|
27
|
-
strokeWidth: "1",
|
28
|
-
fill: "none",
|
29
|
-
fillRule: "evenodd"
|
30
|
-
}, /*#__PURE__*/_react.default.createElement("g", {
|
31
25
|
id: "Group",
|
32
26
|
transform: "translate(-1.000000, 0.000000)"
|
33
|
-
}, /*#__PURE__*/_react.default.createElement("g", {
|
34
|
-
id: "notification"
|
35
27
|
}, /*#__PURE__*/_react.default.createElement("path", {
|
36
28
|
d: "M17.9419375,12.058125 L16.25,10.3661875 L16.25,8.125 C16.245845,4.91692673 13.816599,2.23147626 10.625,1.90675 L10.625,0.625 L9.375,0.625 L9.375,1.90675 C6.183401,2.23147626 3.754155,4.91692673 3.75,8.125 L3.75,10.3661875 L2.0580625,12.058125 C1.94086706,12.1753182 1.875,12.3342622 1.875,12.5 L1.875,14.375 C1.875,14.720178 2.15482203,15 2.5,15 L6.875,15 L6.875,15.4855 C6.84694527,17.1272367 8.05869477,18.5271305 9.6875,18.7346875 C10.5660567,18.8218694 11.4405518,18.5337871 12.0952737,17.9415019 C12.7499955,17.3492167 13.1239886,16.5078712 13.125,15.625 L13.125,15 L17.5,15 C17.845178,15 18.125,14.720178 18.125,14.375 L18.125,12.5 C18.125,12.3342622 18.0591329,12.1753182 17.9419375,12.058125 Z M11.875,15.625 C11.875,16.6605339 11.0355339,17.5 10,17.5 C8.96446609,17.5 8.125,16.6605339 8.125,15.625 L8.125,15 L11.875,15 L11.875,15.625 Z M16.875,13.75 L3.125,13.75 L3.125,12.7588125 L4.816875,11.066875 C4.93409336,10.949692 4.9999646,10.7907468 5,10.625 L5,8.125 C5,5.36357625 7.23857625,3.125 10,3.125 C12.7614237,3.125 15,5.36357625 15,8.125 L15,10.625 C15.0000354,10.7907468 15.0659066,10.949692 15.183125,11.066875 L16.875,12.7588125 L16.875,13.75 Z",
|
37
29
|
id: "Shape",
|
38
|
-
fill: "#FFFFFF",
|
39
30
|
fillRule: "nonzero"
|
40
|
-
}), /*#__PURE__*/_react.default.createElement("
|
41
|
-
id: "_Transparent_Rectangle_",
|
42
|
-
x: "0",
|
43
|
-
y: "0",
|
44
|
-
width: "20",
|
45
|
-
height: "20"
|
46
|
-
})), /*#__PURE__*/_react.default.createElement("circle", {
|
31
|
+
}), /*#__PURE__*/_react.default.createElement("circle", {
|
47
32
|
id: "Oval",
|
48
33
|
stroke: "#161616",
|
49
34
|
fill: "#DA1E28",
|
50
35
|
cx: "15",
|
51
36
|
cy: "4.375",
|
52
37
|
r: "2.5"
|
53
|
-
})))
|
38
|
+
})));
|
54
39
|
};
|
55
40
|
exports.UnreadNotificationBell = UnreadNotificationBell;
|
@@ -71,11 +71,11 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
|
|
71
71
|
var scrollableContainer = (0, _scrollableAncestor.scrollableAncestor)(headerRef.current);
|
72
72
|
|
73
73
|
/* istanbul ignore next */
|
74
|
-
var scrollableContainerTop = scrollableContainer ? scrollableContainer.scrollTop - scrollableContainer.
|
74
|
+
var scrollableContainerTop = scrollableContainer ? scrollableContainer.scrollTop - scrollableContainer.getBoundingClientRect().top : 0;
|
75
75
|
|
76
76
|
// The header offset calculation is either going to work out at 0 if we have no gap between scrolling container
|
77
77
|
// top and the measuring ref top, or the difference between. It does not change on scroll or resize.
|
78
|
-
update.headerOffset =
|
78
|
+
update.headerOffset = (offsetTopMeasuringRef.current ? offsetTopMeasuringRef.current.getBoundingClientRect().top : 0) + scrollableContainerTop;
|
79
79
|
|
80
80
|
/* istanbul ignore next */
|
81
81
|
update.breadcrumbRowHeight = breadcrumbRowEl ? breadcrumbRowEl.clientHeight : 0;
|
@@ -0,0 +1,26 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.default = void 0;
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
|
10
|
+
var _blocks = require("@storybook/blocks");
|
11
|
+
var _storyHelper = require("../../global/js/utils/story-helper");
|
12
|
+
var DocsPage = function DocsPage() {
|
13
|
+
var _useOf = (0, _blocks.useOf)('meta', ['meta']),
|
14
|
+
csfFile = _useOf.csfFile;
|
15
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
16
|
+
altGuidelinesHref: [(0, _storyHelper.storyDocsGuidelines)(csfFile), {
|
17
|
+
href: 'https://www.carbondesignsystem.com/components/modal/usage',
|
18
|
+
label: 'Carbon Modal usage guidelines'
|
19
|
+
}, {
|
20
|
+
href: 'https://react.carbondesignsystem.com/?path=/docs/modal--default',
|
21
|
+
label: 'Carbon Modal documentation'
|
22
|
+
}]
|
23
|
+
});
|
24
|
+
};
|
25
|
+
var _default = DocsPage;
|
26
|
+
exports.default = _default;
|
@@ -29,6 +29,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
29
29
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
30
30
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
31
31
|
var componentName = 'RemoveModal';
|
32
|
+
|
33
|
+
/**
|
34
|
+
The `RemoveModal` covers what is known as high impact and medium impact deleting.
|
35
|
+
Enabling `textConfirmation` enables what would be considered the high impact state of the modal.
|
36
|
+
For additional information on differentiating between delete / remove and low / medium / high impact please refer to the usage guidelines.
|
37
|
+
*/
|
32
38
|
var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
33
39
|
var body = _ref.body,
|
34
40
|
className = _ref.className,
|
@@ -0,0 +1,23 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.default = void 0;
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
9
|
+
var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
|
10
|
+
var DocsPage = function DocsPage() {
|
11
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
12
|
+
altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/add-and-select/usage",
|
13
|
+
blocks: [{
|
14
|
+
title: 'Structuring items',
|
15
|
+
description: "The `items` object has a lot of customization potential and can greatly effect\nthe way the component is displayed and how you interact with it..\n\nLet's walk through an example.",
|
16
|
+
source: {
|
17
|
+
code: "items: {\n entries: [ // the actual list of items / entries\n {\n id: '1', // required unique id for the entry\n value: '1', // required value of the entry\n title: 'item 1', // required title to display\n subtitle: 'item 1 subtitle', // subtitle to display\n children: { // designates if entry has children. if the children prop is found a hierarchy list will be used\n entries: [\n {\n id: '1-1',\n value: 'file1.pdf',\n title: 'file1.pdf',\n },\n ],\n },\n },\n ],\n}"
|
18
|
+
}
|
19
|
+
}]
|
20
|
+
});
|
21
|
+
};
|
22
|
+
var _default = DocsPage;
|
23
|
+
exports.default = _default;
|
@@ -23,6 +23,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
23
23
|
//
|
24
24
|
|
25
25
|
var componentName = 'SingleAddSelect';
|
26
|
+
|
27
|
+
/**
|
28
|
+
* Used to add or select one or more items from larger lists or hierarchies.
|
29
|
+
*/
|
26
30
|
var SingleAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
27
31
|
// remove multi add select specific props
|
28
32
|
var validProps = (0, _propsHelper.prepareProps)(props, ['columnInputPlaceholder', 'globalFilters', 'globalFiltersIconDescription', 'globalFiltersPlaceholderText', 'globalFiltersPrimaryButtonText', 'globalFiltersSecondaryButtonText', 'influencerTitle', 'multi', 'noSelectionDescription', 'noSelectionTitle', 'removeIconDescription']);
|
@@ -0,0 +1,28 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.default = void 0;
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
10
|
+
var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
|
11
|
+
var stories = _interopRequireWildcard(require("./StatusIcon.stories"));
|
12
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
13
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
14
|
+
var DocsPage = function DocsPage() {
|
15
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
16
|
+
blocks: [{
|
17
|
+
story: stories.Default
|
18
|
+
}, {
|
19
|
+
title: 'Accessibility',
|
20
|
+
description: "The `StatusIcon` component follows the Carbon guidelines for status icons with\nsome added specifications around illustration usage. For additional usage\nguidelines and documentation please refer to the links above.\n\n_Status icons_ are an important method of communicating severity level\ninformation to users. The shapes and colors, communicate severity that enable\nusers to quickly assess and identify status and respond accordingly."
|
21
|
+
}, {
|
22
|
+
title: 'Sizing',
|
23
|
+
description: "\n| Size | Pixels |\n| ------- | ------- |\n| small | 16 x 16 |\n| medium | 20 x 20 |\n| large | 24 x 24 |\n| x-large | 32 x 32 |\n "
|
24
|
+
}]
|
25
|
+
});
|
26
|
+
};
|
27
|
+
var _default = DocsPage;
|
28
|
+
exports.default = _default;
|
@@ -26,6 +26,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
26
26
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
27
27
|
var blockClass = "".concat(_settings.pkg.prefix, "--status-icon");
|
28
28
|
var componentName = 'StatusIcon';
|
29
|
+
|
30
|
+
/**
|
31
|
+
The `StatusIcon` component follows the Carbon guidelines for status icons with
|
32
|
+
some added specifications around illustration usage. For additional usage
|
33
|
+
guidelines and documentation please refer to the links above.
|
34
|
+
|
35
|
+
_Status icons_ are an important method of communicating severity level
|
36
|
+
information to users. The shapes and colors, communicate severity that enable
|
37
|
+
users to quickly assess and identify status and respond accordingly.
|
38
|
+
*/
|
29
39
|
var StatusIcon = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
30
40
|
var _icons$kind;
|
31
41
|
var kind = _ref.kind,
|
@@ -63,7 +63,13 @@ var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon
|
|
63
63
|
return hasCloseIcon !== null && hasCloseIcon !== void 0 ? hasCloseIcon : tearsheetIsPassive(actions);
|
64
64
|
};
|
65
65
|
|
66
|
-
|
66
|
+
/**
|
67
|
+
* TearSheetShell is used internally by TearSheet and TearSheetNarrow
|
68
|
+
*
|
69
|
+
* The component is not public.
|
70
|
+
*
|
71
|
+
* See the canvas tab for the component API details.
|
72
|
+
* */
|
67
73
|
exports.tearsheetHasCloseIcon = tearsheetHasCloseIcon;
|
68
74
|
var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
69
75
|
var actions = _ref.actions,
|
@@ -225,7 +231,8 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
225
231
|
closeModal: onClose,
|
226
232
|
iconDescription: closeIconDescription
|
227
233
|
}, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
|
228
|
-
className: "".concat(bc, "__header-content")
|
234
|
+
className: "".concat(bc, "__header-content"),
|
235
|
+
element: wide ? _react2.Layer : undefined
|
229
236
|
}, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
|
230
237
|
className: "".concat(bc, "__header-fields")
|
231
238
|
}, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
|
@@ -250,12 +257,10 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
250
257
|
className: "".concat(bc, "__right")
|
251
258
|
}, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
|
252
259
|
className: "".concat(bc, "__main"),
|
253
|
-
alwaysRender: includeActions
|
254
|
-
element: wide ? _react2.Layer : undefined
|
260
|
+
alwaysRender: includeActions
|
255
261
|
}, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
|
256
262
|
className: "".concat(bc, "__content"),
|
257
|
-
alwaysRender: influencer && influencerPosition === 'right'
|
258
|
-
element: wide ? _react2.Layer : undefined
|
263
|
+
alwaysRender: influencer && influencerPosition === 'right'
|
259
264
|
}, children), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
|
260
265
|
className: (0, _classnames.default)((_cx6 = {}, (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer"), true), (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
|
261
266
|
neverRender: influencerPosition !== 'right'
|
@@ -0,0 +1,25 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.default = void 0;
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
10
|
+
var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
|
11
|
+
var stories = _interopRequireWildcard(require("./Toolbar.stories"));
|
12
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
13
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
14
|
+
var DocsPage = function DocsPage() {
|
15
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
16
|
+
blocks: [{
|
17
|
+
story: stories._Toolbar
|
18
|
+
}, {
|
19
|
+
story: stories.vertical,
|
20
|
+
description: "A toolbar orientation for floating the toolbar on the canvas."
|
21
|
+
}]
|
22
|
+
});
|
23
|
+
};
|
24
|
+
var _default = DocsPage;
|
25
|
+
exports.default = _default;
|
@@ -0,0 +1,28 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.default = void 0;
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
10
|
+
var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
|
11
|
+
var stories = _interopRequireWildcard(require("./UserProfileImage.stories"));
|
12
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
13
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
14
|
+
var DocsPage = function DocsPage() {
|
15
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
16
|
+
blocks: [{
|
17
|
+
story: stories.Default
|
18
|
+
}, {
|
19
|
+
story: stories.WithGroupIcon,
|
20
|
+
description: "By passing in icon prop with a value of `group`, the avatar will display the group icon"
|
21
|
+
}, {
|
22
|
+
story: stories.WithInitials,
|
23
|
+
description: "When passing a display name to the component, the display name will be distilled down to the first and last initials of the display name. `Thomas Watson` and `Thomas J. Watson` will both display `TW` as the initials."
|
24
|
+
}]
|
25
|
+
});
|
26
|
+
};
|
27
|
+
var _default = DocsPage;
|
28
|
+
exports.default = _default;
|
@@ -36,7 +36,7 @@ var defaults = {
|
|
36
36
|
tooltipAlignment: 'bottom'
|
37
37
|
};
|
38
38
|
/**
|
39
|
-
*
|
39
|
+
* The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
|
40
40
|
*/
|
41
41
|
var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
42
42
|
var backgroundColor = _ref.backgroundColor,
|
@@ -0,0 +1,63 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports.default = void 0;
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
10
|
+
var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
|
11
|
+
var stories = _interopRequireWildcard(require("./WebTerminal.stories"));
|
12
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
13
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
14
|
+
var DocsPage = function DocsPage() {
|
15
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
16
|
+
blocks: [{
|
17
|
+
description: "To get started using the WebTerminal, you have to first wrap your\n application with the `<WebTerminalProvider>`\n component. This will allow all the WebTerminal components to be\n used with the `useWebTerminal()` custom hook.\n ",
|
18
|
+
title: 'Getting Started',
|
19
|
+
source: {
|
20
|
+
code: "import { WebTerminalProvider } from '@carbon/ibm-products';\n\nconst App = () => {\n return (\n <WebTerminalProvider>\n ...\n <WebTerminalProvider>\n )\n};"
|
21
|
+
}
|
22
|
+
}, {
|
23
|
+
title: 'useWebTerminal()',
|
24
|
+
source: {
|
25
|
+
code: "const { open, openWebTerminal, closeWebTerminal, toggleWebTerminal } =\n useWebTerminal();"
|
26
|
+
}
|
27
|
+
}, {
|
28
|
+
description: "The `useWebTerminal()` hook returns an object with 4 properties:\n1. Read the `open` state (true or false)\n2. `openWebTerminal` sets the `open` state to true\n3. `closeWebTerminal` sets the `open` state to false\n4. `toggleWebTerminal` toggles between true and false\n\nExample:\n",
|
29
|
+
source: {
|
30
|
+
code: "const MyComponent = () => {\n const { open, openWebTerminal, closeWebTerminal, toggleWebTerminal } =\n useWebTerminal();\n\n return (\n <div>\n <button onClick={() => openWebTerminal()}>Open web terminal</button>\n <button onClick={() => closeWebTerminal()}>Close web terminal</button>\n <button onClick={() => toggleWebTerminal()}>Toggle web terminal</button>\n <p>The web terminal is now {open}</p>\n\n <WebTerminal>...</WebTerminal>\n </div>\n );\n};"
|
31
|
+
}
|
32
|
+
}, {
|
33
|
+
subTitle: 'Passing in your own terminal.',
|
34
|
+
description: "The `WebTerminal` is wrapper component for your own\nterminal component that you may have been using for your product.\nSimply pass your own terminal component as children.\n "
|
35
|
+
}, {
|
36
|
+
subTitle: 'Optional wrapper component.',
|
37
|
+
description: "Optionally you can import `WebTerminalContentWrapper` to have\n content adjust their width based off the `WebTerminal` width when\n it is opened.",
|
38
|
+
source: {
|
39
|
+
code: "<WebTerminalContentWrapper>\n content\n</WebTerminalContentWrapper>\n\n<WebTerminal>\n ...\n</WebTerminal>"
|
40
|
+
}
|
41
|
+
}, {
|
42
|
+
description: 'The default web terminal is one which opens and the terminal loads. Then if the user desires to dismiss it they can click the close icon on the top right corner of the component.',
|
43
|
+
story: stories.Default
|
44
|
+
}, {
|
45
|
+
story: stories.WithDocumentationLinks
|
46
|
+
}, {
|
47
|
+
subTitle: 'Help users with helpful documentation links',
|
48
|
+
description: "Optionally you can pass documentation links to help point your users to useful\ndocumentation for your terminal, or kubernetes commands etc.\n\nThe documentation links should reflect the same props as `OverflowMenuItem` from\ncarbon.\n\nLearn more:\nhttps://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default\n",
|
49
|
+
source: {
|
50
|
+
code: "const documentationLinks = [\n {\n itemText: 'BX/ICP docs',\n href: '#',\n onClick: () => console.log('clicked'),\n },\n {\n itemText: 'Kubernetes docs',\n href: '#',\n onClick: () => console.log('clicked'),\n },\n {\n itemText: 'Docker docs',\n href: '#',\n onClick: () => console.log('clicked'),\n },\n {\n itemText: 'Helm docs',\n href: '#',\n onClick: () => console.log('clicked'),\n },\n];"
|
51
|
+
}
|
52
|
+
}, {
|
53
|
+
story: stories.WithActions
|
54
|
+
}, {
|
55
|
+
description: "Optionally you can add actions to the web terminal header bar. To add actions\nyou need to pass in an array of actions with objects for each object.",
|
56
|
+
source: {
|
57
|
+
code: "<WebTerminal\n actions={[\n {\n renderIcon: Code32,\n onClick: () => {},\n iconDescription: 'Create new deployment',\n },\n ]}\n>\n ...\n</WebTerminal>"
|
58
|
+
}
|
59
|
+
}]
|
60
|
+
});
|
61
|
+
};
|
62
|
+
var _default = DocsPage;
|
63
|
+
exports.default = _default;
|
@@ -45,6 +45,10 @@ var defaults = {
|
|
45
45
|
documentationLinksIconDescription: 'Show documentation links',
|
46
46
|
isInitiallyOpen: false
|
47
47
|
};
|
48
|
+
|
49
|
+
/**
|
50
|
+
* The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
|
51
|
+
*/
|
48
52
|
var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
49
53
|
var _ref3;
|
50
54
|
var _ref$actions = _ref.actions,
|