@carbon/ibm-products 2.2.0 → 2.3.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +965 -434
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +354 -155
- 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 +600 -236
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -4
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +516 -293
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- 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 +2 -4
- package/es/components/ActionBar/ActionBar.js +2 -6
- package/es/components/AddSelect/AddSelectFormControl.js +6 -6
- package/es/components/AddSelect/AddSelectRow.js +15 -5
- package/es/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
- package/es/components/ButtonMenu/ButtonMenu.js +4 -4
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +3 -9
- 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 +25 -10
- package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js +1 -3
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +39 -47
- package/es/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +20 -24
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +2 -2
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +13 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +44 -15
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +16 -30
- package/es/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/es/components/Datagrid/index.js +2 -1
- package/es/components/Datagrid/useActionsColumn.js +10 -7
- package/es/components/Datagrid/useCustomizeColumns.js +9 -7
- package/es/components/Datagrid/useExpandedRow.js +11 -7
- package/es/components/Datagrid/useFiltering.js +12 -8
- package/es/components/Datagrid/useInlineEdit.js +3 -0
- package/es/components/Datagrid/useNestedRows.js +10 -6
- package/es/components/Datagrid/useStickyColumn.js +10 -3
- package/es/components/Datagrid/utils/DatagridActions.js +12 -20
- 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/PageHeader.js +2 -6
- 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/SidePanel/SidePanel.js +1 -3
- 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/TagSet/TagSet.js +4 -7
- 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 +14 -3
- package/es/components/WebTerminal/WebTerminal.docs-page.js +52 -0
- package/es/components/WebTerminal/WebTerminal.js +4 -0
- package/es/components/index.js +1 -1
- package/es/global/js/hooks/useCreateComponentStepChange.js +16 -15
- package/es/global/js/hooks/useResizeObserver.js +14 -28
- package/es/global/js/package-settings.js +14 -1
- 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 +2 -4
- package/lib/components/ActionBar/ActionBar.js +2 -6
- package/lib/components/AddSelect/AddSelectFormControl.js +6 -6
- package/lib/components/AddSelect/AddSelectRow.js +15 -5
- package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js +5 -6
- package/lib/components/ButtonMenu/ButtonMenu.js +4 -4
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +3 -9
- 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 +25 -10
- package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js +1 -3
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +1 -1
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js +37 -45
- package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js +20 -24
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/index.js +6 -6
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilterContext.js +20 -0
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useFilters.js +42 -13
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js +16 -30
- package/lib/components/Datagrid/Datagrid/addons/InlineEdit/handleGridKeyPress.js +2 -2
- package/lib/components/Datagrid/index.js +8 -1
- package/lib/components/Datagrid/useActionsColumn.js +12 -7
- package/lib/components/Datagrid/useCustomizeColumns.js +10 -8
- package/lib/components/Datagrid/useExpandedRow.js +9 -6
- package/lib/components/Datagrid/useFiltering.js +10 -7
- package/lib/components/Datagrid/useInlineEdit.js +3 -0
- package/lib/components/Datagrid/useNestedRows.js +9 -6
- package/lib/components/Datagrid/useStickyColumn.js +10 -3
- package/lib/components/Datagrid/utils/DatagridActions.js +49 -57
- 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/PageHeader.js +2 -6
- 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/SidePanel/SidePanel.js +1 -3
- 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/TagSet/TagSet.js +4 -7
- 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 +14 -3
- package/lib/components/WebTerminal/WebTerminal.docs-page.js +63 -0
- package/lib/components/WebTerminal/WebTerminal.js +4 -0
- package/lib/components/index.js +6 -0
- package/lib/global/js/hooks/useCreateComponentStepChange.js +16 -15
- package/lib/global/js/hooks/useResizeObserver.js +13 -27
- package/lib/global/js/package-settings.js +14 -1
- package/lib/global/js/utils/StoryDocsPage.js +225 -0
- package/lib/global/js/utils/story-helper.js +115 -7
- package/package.json +4 -4
- package/scss/components/AddSelect/_add-select.scss +10 -6
- package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss +0 -1
- package/scss/components/ButtonMenu/_button-menu.scss +32 -1
- package/scss/components/Cascade/_storybook-styles.scss +3 -2
- package/scss/components/CreateFullPage/_create-full-page.scss +3 -3
- package/scss/components/CreateModal/_create-modal.scss +3 -3
- package/scss/components/CreateSidePanel/_create-side-panel.scss +4 -4
- package/scss/components/CreateTearsheet/_create-tearsheet.scss +2 -2
- package/scss/components/CreateTearsheet/_storybook-styles.scss +1 -1
- package/scss/components/CreateTearsheetNarrow/_create-tearsheet-narrow.scss +2 -2
- package/scss/components/DataSpreadsheet/_data-spreadsheet.scss +5 -5
- package/scss/components/DataSpreadsheet/_storybook-styles.scss +6 -0
- package/scss/components/Datagrid/_datagrid.scss +4 -2
- package/scss/components/Datagrid/_storybook-styles.scss +18 -4
- package/scss/components/Datagrid/styles/_datagrid.scss +26 -13
- package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +7 -0
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +4 -0
- package/scss/components/EditSidePanel/_edit-side-panel.scss +2 -2
- package/scss/components/EditTearsheet/_edit-tearsheet.scss +2 -2
- package/scss/components/EditTearsheet/_storybook-styles.scss +1 -1
- package/scss/components/ImportModal/_import-modal.scss +1 -1
- package/scss/components/NotificationsPanel/_notifications-panel.scss +3 -3
- package/scss/components/NotificationsPanel/_storybook-styles.scss +10 -2
- package/scss/components/OptionsTile/_storybook-styles.scss +1 -1
- package/scss/components/PageHeader/_page-header.scss +4 -5
- package/scss/components/PageHeader/_storybook-styles.scss +24 -14
- package/scss/components/Saving/_saving.scss +1 -1
- package/scss/components/SidePanel/_side-panel.scss +3 -5
- package/scss/components/TagSet/_tag-set.scss +1 -1
- package/scss/components/Tearsheet/_tearsheet.scss +9 -8
- package/scss/components/UserProfileImage/_user-profile-image.scss +2 -2
- package/scss/components/WebTerminal/_storybook-styles.scss +11 -1
- package/scss/global/styles/_display-box.scss +1 -0
- package/es/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +0 -21
- package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useInitialStateFromFilters.js +0 -30
- package/scss/components/HTTPErrors/_storybook-styles.scss +0 -6
@@ -55,7 +55,13 @@ export var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCl
|
|
55
55
|
return hasCloseIcon !== null && hasCloseIcon !== void 0 ? hasCloseIcon : tearsheetIsPassive(actions);
|
56
56
|
};
|
57
57
|
|
58
|
-
|
58
|
+
/**
|
59
|
+
* TearSheetShell is used internally by TearSheet and TearSheetNarrow
|
60
|
+
*
|
61
|
+
* The component is not public.
|
62
|
+
*
|
63
|
+
* See the canvas tab for the component API details.
|
64
|
+
* */
|
59
65
|
export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
60
66
|
var actions = _ref.actions,
|
61
67
|
children = _ref.children,
|
@@ -216,7 +222,8 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
216
222
|
closeModal: onClose,
|
217
223
|
iconDescription: closeIconDescription
|
218
224
|
}, /*#__PURE__*/React.createElement(Wrap, {
|
219
|
-
className: "".concat(bc, "__header-content")
|
225
|
+
className: "".concat(bc, "__header-content"),
|
226
|
+
element: wide ? Layer : undefined
|
220
227
|
}, /*#__PURE__*/React.createElement(Wrap, {
|
221
228
|
className: "".concat(bc, "__header-fields")
|
222
229
|
}, /*#__PURE__*/React.createElement(Wrap, {
|
@@ -241,12 +248,10 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
241
248
|
className: "".concat(bc, "__right")
|
242
249
|
}, /*#__PURE__*/React.createElement(Wrap, {
|
243
250
|
className: "".concat(bc, "__main"),
|
244
|
-
alwaysRender: includeActions
|
245
|
-
element: wide ? Layer : undefined
|
251
|
+
alwaysRender: includeActions
|
246
252
|
}, /*#__PURE__*/React.createElement(Wrap, {
|
247
253
|
className: "".concat(bc, "__content"),
|
248
|
-
alwaysRender: influencer && influencerPosition === 'right'
|
249
|
-
element: wide ? Layer : undefined
|
254
|
+
alwaysRender: influencer && influencerPosition === 'right'
|
250
255
|
}, children), /*#__PURE__*/React.createElement(Wrap, {
|
251
256
|
className: cx((_cx6 = {}, _defineProperty(_cx6, "".concat(bc, "__influencer"), true), _defineProperty(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
|
252
257
|
neverRender: influencerPosition !== 'right'
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
+
import * as stories from './Toolbar.stories';
|
4
|
+
var DocsPage = function DocsPage() {
|
5
|
+
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
6
|
+
blocks: [{
|
7
|
+
story: stories._Toolbar
|
8
|
+
}, {
|
9
|
+
story: stories.vertical,
|
10
|
+
description: "A toolbar orientation for floating the toolbar on the canvas."
|
11
|
+
}]
|
12
|
+
});
|
13
|
+
};
|
14
|
+
export default DocsPage;
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
+
import * as stories from './UserProfileImage.stories';
|
4
|
+
var DocsPage = function DocsPage() {
|
5
|
+
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
6
|
+
blocks: [{
|
7
|
+
story: stories.Default
|
8
|
+
}, {
|
9
|
+
story: stories.WithGroupIcon,
|
10
|
+
description: "By passing in icon prop with a value of `group`, the avatar will display the group icon"
|
11
|
+
}, {
|
12
|
+
story: stories.WithInitials,
|
13
|
+
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."
|
14
|
+
}]
|
15
|
+
});
|
16
|
+
};
|
17
|
+
export default DocsPage;
|
@@ -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 = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
|
3
|
+
var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
|
4
4
|
/**
|
5
5
|
* Copyright IBM Corp. 2021, 2021
|
6
6
|
*
|
@@ -28,8 +28,12 @@ var componentName = 'UserProfileImage';
|
|
28
28
|
|
29
29
|
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
30
30
|
|
31
|
+
// Default values for props
|
32
|
+
var defaults = {
|
33
|
+
tooltipAlignment: 'bottom'
|
34
|
+
};
|
31
35
|
/**
|
32
|
-
*
|
36
|
+
* 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.
|
33
37
|
*/
|
34
38
|
export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
35
39
|
var backgroundColor = _ref.backgroundColor,
|
@@ -42,6 +46,8 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
42
46
|
size = _ref.size,
|
43
47
|
theme = _ref.theme,
|
44
48
|
tooltipText = _ref.tooltipText,
|
49
|
+
_ref$tooltipAlignment = _ref.tooltipAlignment,
|
50
|
+
tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
|
45
51
|
rest = _objectWithoutProperties(_ref, _excluded);
|
46
52
|
var icons = {
|
47
53
|
user: {
|
@@ -121,7 +127,8 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
|
|
121
127
|
return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(IconButton, {
|
122
128
|
label: tooltipText,
|
123
129
|
className: "".concat(blockClass, "__tooltip"),
|
124
|
-
kind: "ghost"
|
130
|
+
kind: "ghost",
|
131
|
+
align: tooltipAlignment
|
125
132
|
}, renderUserProfileImage()) : renderUserProfileImage());
|
126
133
|
});
|
127
134
|
|
@@ -169,6 +176,10 @@ UserProfileImage.propTypes = {
|
|
169
176
|
* Set theme in which the component will be rendered
|
170
177
|
*/
|
171
178
|
theme: PropTypes.oneOf(['light', 'dark']).isRequired,
|
179
|
+
/**
|
180
|
+
* Specify how the trigger should align with the tooltip
|
181
|
+
*/
|
182
|
+
tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
|
172
183
|
/**
|
173
184
|
* Pass in the display name to have it shown on hover
|
174
185
|
*/
|
@@ -0,0 +1,52 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
|
3
|
+
import * as stories from './WebTerminal.stories';
|
4
|
+
var DocsPage = function DocsPage() {
|
5
|
+
return /*#__PURE__*/React.createElement(StoryDocsPage, {
|
6
|
+
blocks: [{
|
7
|
+
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 ",
|
8
|
+
title: 'Getting Started',
|
9
|
+
source: {
|
10
|
+
code: "import { WebTerminalProvider } from '@carbon/ibm-products';\n\nconst App = () => {\n return (\n <WebTerminalProvider>\n ...\n <WebTerminalProvider>\n )\n};"
|
11
|
+
}
|
12
|
+
}, {
|
13
|
+
title: 'useWebTerminal()',
|
14
|
+
source: {
|
15
|
+
code: "const { open, openWebTerminal, closeWebTerminal, toggleWebTerminal } =\n useWebTerminal();"
|
16
|
+
}
|
17
|
+
}, {
|
18
|
+
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",
|
19
|
+
source: {
|
20
|
+
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};"
|
21
|
+
}
|
22
|
+
}, {
|
23
|
+
subTitle: 'Passing in your own terminal.',
|
24
|
+
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 "
|
25
|
+
}, {
|
26
|
+
subTitle: 'Optional wrapper component.',
|
27
|
+
description: "Optionally you can import `WebTerminalContentWrapper` to have\n content adjust their width based off the `WebTerminal` width when\n it is opened.",
|
28
|
+
source: {
|
29
|
+
code: "<WebTerminalContentWrapper>\n content\n</WebTerminalContentWrapper>\n\n<WebTerminal>\n ...\n</WebTerminal>"
|
30
|
+
}
|
31
|
+
}, {
|
32
|
+
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.',
|
33
|
+
story: stories.Default
|
34
|
+
}, {
|
35
|
+
story: stories.WithDocumentationLinks
|
36
|
+
}, {
|
37
|
+
subTitle: 'Help users with helpful documentation links',
|
38
|
+
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",
|
39
|
+
source: {
|
40
|
+
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];"
|
41
|
+
}
|
42
|
+
}, {
|
43
|
+
story: stories.WithActions
|
44
|
+
}, {
|
45
|
+
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.",
|
46
|
+
source: {
|
47
|
+
code: "<WebTerminal\n actions={[\n {\n renderIcon: Code32,\n onClick: () => {},\n iconDescription: 'Create new deployment',\n },\n ]}\n>\n ...\n</WebTerminal>"
|
48
|
+
}
|
49
|
+
}]
|
50
|
+
});
|
51
|
+
};
|
52
|
+
export default DocsPage;
|
@@ -39,6 +39,10 @@ var defaults = {
|
|
39
39
|
documentationLinksIconDescription: 'Show documentation links',
|
40
40
|
isInitiallyOpen: false
|
41
41
|
};
|
42
|
+
|
43
|
+
/**
|
44
|
+
* 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.
|
45
|
+
*/
|
42
46
|
export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
43
47
|
var _ref3;
|
44
48
|
var _ref$actions = _ref.actions,
|
package/es/components/index.js
CHANGED
@@ -37,7 +37,7 @@ export { EditSidePanel } from './EditSidePanel';
|
|
37
37
|
export { OptionsTile } from './OptionsTile';
|
38
38
|
export { EditInPlace } from './EditInPlace';
|
39
39
|
export { DataSpreadsheet } from './DataSpreadsheet';
|
40
|
-
export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth } from './Datagrid';
|
40
|
+
export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth, useFilterContext } from './Datagrid';
|
41
41
|
export { EditTearsheet } from './EditTearsheet';
|
42
42
|
export { EditTearsheetNarrow } from './EditTearsheetNarrow';
|
43
43
|
export { EditFullPage } from './EditFullPage';
|
@@ -30,6 +30,20 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
|
|
30
30
|
componentBlockClass = _ref.componentBlockClass,
|
31
31
|
setCreateComponentActions = _ref.setCreateComponentActions,
|
32
32
|
setModalIsOpen = _ref.setModalIsOpen;
|
33
|
+
var continueToNextStep = useCallback(function () {
|
34
|
+
setIsSubmitting(false);
|
35
|
+
setCurrentStep(function (prev) {
|
36
|
+
// Find next included step to render
|
37
|
+
// There will always be a next step otherwise we will
|
38
|
+
// have reach the onSubmit
|
39
|
+
do {
|
40
|
+
var _stepData;
|
41
|
+
prev++;
|
42
|
+
} while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
|
43
|
+
return prev;
|
44
|
+
});
|
45
|
+
}, [setCurrentStep, setIsSubmitting, stepData]);
|
46
|
+
|
33
47
|
// useEffect to handle multi step logic
|
34
48
|
useEffect(function () {
|
35
49
|
var onUnmount = function onUnmount() {
|
@@ -157,9 +171,9 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
|
|
157
171
|
// There will always be a previous step otherwise we will
|
158
172
|
// have disabled the back button since we have reached the first visible step
|
159
173
|
do {
|
160
|
-
var
|
174
|
+
var _stepData2;
|
161
175
|
prev--;
|
162
|
-
} while (!((
|
176
|
+
} while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
|
163
177
|
return prev;
|
164
178
|
});
|
165
179
|
},
|
@@ -187,17 +201,4 @@ export var useCreateComponentStepChange = function useCreateComponentStepChange(
|
|
187
201
|
setCreateComponentActions(buttons);
|
188
202
|
}
|
189
203
|
}, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, shouldViewAll, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setShouldViewAll, setModalIsOpen]);
|
190
|
-
var continueToNextStep = useCallback(function () {
|
191
|
-
setIsSubmitting(false);
|
192
|
-
setCurrentStep(function (prev) {
|
193
|
-
// Find next included step to render
|
194
|
-
// There will always be a next step otherwise we will
|
195
|
-
// have reach the onSubmit
|
196
|
-
do {
|
197
|
-
var _stepData2;
|
198
|
-
prev++;
|
199
|
-
} while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
|
200
|
-
return prev;
|
201
|
-
});
|
202
|
-
}, [setCurrentStep, setIsSubmitting, stepData]);
|
203
204
|
};
|
@@ -5,14 +5,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
5
5
|
* This source code is licensed under the Apache-2.0 license found in the
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
7
7
|
*/
|
8
|
-
import { useRef, useState, useLayoutEffect } from 'react';
|
9
|
-
export var useResizeObserver = function useResizeObserver(ref) {
|
10
|
-
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
|
11
|
-
callback: null,
|
12
|
-
throttleInterval: 0
|
13
|
-
};
|
14
|
-
var callback = options.callback,
|
15
|
-
throttleInterval = options.throttleInterval;
|
8
|
+
import { useRef, useState, useLayoutEffect, useEffect } from 'react';
|
9
|
+
export var useResizeObserver = function useResizeObserver(ref, callback) {
|
16
10
|
var _useState = useState(0),
|
17
11
|
_useState2 = _slicedToArray(_useState, 2),
|
18
12
|
width = _useState2[0],
|
@@ -21,8 +15,14 @@ export var useResizeObserver = function useResizeObserver(ref) {
|
|
21
15
|
_useState4 = _slicedToArray(_useState3, 2),
|
22
16
|
height = _useState4[0],
|
23
17
|
setHeight = _useState4[1];
|
24
|
-
var throttleTimeout = useRef(null);
|
25
18
|
var entriesToHandle = useRef(null);
|
19
|
+
var cb = useRef(callback);
|
20
|
+
useEffect(function () {
|
21
|
+
// ref for callback removes it as dependency fro useLayoutEffect
|
22
|
+
// This significantly reduces repeated calls if a function is redefined on every
|
23
|
+
// render
|
24
|
+
cb.current = callback;
|
25
|
+
}, [callback]);
|
26
26
|
useLayoutEffect(function () {
|
27
27
|
if (!(ref !== null && ref !== void 0 && ref.current)) {
|
28
28
|
return;
|
@@ -34,29 +34,15 @@ export var useResizeObserver = function useResizeObserver(ref) {
|
|
34
34
|
var entry = entriesToHandle.current[0];
|
35
35
|
setWidth(entry.contentRect.width);
|
36
36
|
setHeight(entry.contentRect.height);
|
37
|
-
|
38
|
-
callback && callback(entry.contentRect);
|
37
|
+
cb.current && cb.current(entry.contentRect);
|
39
38
|
};
|
40
39
|
var observer = new ResizeObserver(function (entries) {
|
41
40
|
// always update entriesToHandle
|
42
41
|
entriesToHandle.current = entries;
|
43
|
-
|
44
|
-
//
|
45
|
-
if (throttleTimeout.current === null) {
|
46
|
-
// no live timeout set entries to handle and move on
|
47
|
-
|
48
|
-
// set up throttle
|
49
|
-
throttleTimeout.current = setTimeout(function () {
|
50
|
-
// do callbacks
|
51
|
-
doCallbacks();
|
52
|
-
// reset throttle
|
53
|
-
throttleTimeout.current = null;
|
54
|
-
}, throttleInterval);
|
55
|
-
}
|
56
|
-
} else {
|
57
|
-
// no throttle do callbacks every time
|
42
|
+
window.requestAnimationFrame(function () {
|
43
|
+
// do callbacks
|
58
44
|
doCallbacks();
|
59
|
-
}
|
45
|
+
});
|
60
46
|
});
|
61
47
|
|
62
48
|
// observe all refs passed
|
@@ -66,7 +52,7 @@ export var useResizeObserver = function useResizeObserver(ref) {
|
|
66
52
|
observer = null;
|
67
53
|
};
|
68
54
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
69
|
-
}, [ref
|
55
|
+
}, [ref]);
|
70
56
|
return {
|
71
57
|
width: width,
|
72
58
|
height: height
|
@@ -76,7 +76,15 @@ var defaults = {
|
|
76
76
|
'a-new-feature': false,
|
77
77
|
'default-portal-target-body': true,
|
78
78
|
'Datagrid.useInfiniteScroll': false,
|
79
|
-
'Datagrid.useInlineEdit': false
|
79
|
+
'Datagrid.useInlineEdit': false,
|
80
|
+
'Datagrid.useEditableCell': false,
|
81
|
+
'Datagrid.useExpandedRow': false,
|
82
|
+
'Datagrid.useNestedRows': false,
|
83
|
+
'Datagrid.useActionsColumn': false,
|
84
|
+
'Datagrid.useFiltering': false,
|
85
|
+
'Datagrid.useCustomizeColumns': false,
|
86
|
+
'ExampleComponent.secondaryIcon': false,
|
87
|
+
'ExampleComponent.useExample': false
|
80
88
|
}
|
81
89
|
};
|
82
90
|
var warningMessageComponent = function warningMessageComponent(property) {
|
@@ -123,6 +131,11 @@ var component = new Proxy(_objectSpread({}, defaults.component), {
|
|
123
131
|
});
|
124
132
|
var feature = new Proxy(_objectSpread({}, defaults.feature), {
|
125
133
|
set: function set(target, property, value) {
|
134
|
+
// If we receive a feature flag that doesn't exist in our defaults we should not log
|
135
|
+
// a warning message and instead just return
|
136
|
+
if (!Object.getOwnPropertyDescriptor(defaults.feature, property)) {
|
137
|
+
return true;
|
138
|
+
}
|
126
139
|
if (target[property] !== true && !silent && value) {
|
127
140
|
// not already true, not silent, and now true
|
128
141
|
console.warn(warningMessageFeature(property));
|
@@ -0,0 +1,218 @@
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
2
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
|
+
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; }
|
4
|
+
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) { _defineProperty(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; }
|
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 React from 'react';
|
13
|
+
import PropTypes from 'prop-types';
|
14
|
+
import { Title, Description, Source, Controls, Canvas, Stories, AnchorMdx, useOf } from '@storybook/blocks';
|
15
|
+
import { paramCase } from 'change-case';
|
16
|
+
import { codeSandboxHref, stackblitzHref, storyDocsPageInfo } from './story-helper';
|
17
|
+
export var CustomBlocks = function CustomBlocks(_ref) {
|
18
|
+
var blocks = _ref.blocks;
|
19
|
+
return blocks.map(function (block, index) {
|
20
|
+
var source = _objectSpread({}, block === null || block === void 0 ? void 0 : block.source);
|
21
|
+
if (source.code && !source.language) {
|
22
|
+
source.language = 'jsx';
|
23
|
+
}
|
24
|
+
return /*#__PURE__*/React.createElement("div", {
|
25
|
+
key: "block-index--".concat(index)
|
26
|
+
}, block.title && /*#__PURE__*/React.createElement("h3", {
|
27
|
+
id: paramCase(block.title)
|
28
|
+
}, block.title), block.subTitle && /*#__PURE__*/React.createElement("h4", null, block.subTitle), block.description && typeof block.description === 'string' ? /*#__PURE__*/React.createElement(Description, null, block.description) : block.description, block.story && /*#__PURE__*/React.createElement(Canvas, {
|
29
|
+
of: block.story
|
30
|
+
}), block.source && /*#__PURE__*/React.createElement(Source, source));
|
31
|
+
});
|
32
|
+
};
|
33
|
+
|
34
|
+
/**
|
35
|
+
* This function checks blocks against stories and then
|
36
|
+
* - Adds title if no alternative is supplied
|
37
|
+
* - Adds blocks for unreferenced stories if omitUnreferencedStories is false
|
38
|
+
*/
|
39
|
+
var processBlocks = function processBlocks(blocks, stories, omitUnreferencedStories) {
|
40
|
+
var blocksWithStoryTitles = blocks ? _toConsumableArray(blocks) : [];
|
41
|
+
var restOfStories = [];
|
42
|
+
var storyKeys = Object.keys(stories);
|
43
|
+
storyKeys.forEach(function (sk) {
|
44
|
+
var story = stories[sk].moduleExport;
|
45
|
+
var storyName = stories[sk].name;
|
46
|
+
var matchingBlock = blocksWithStoryTitles.find(function (block) {
|
47
|
+
return block.story === story;
|
48
|
+
});
|
49
|
+
if (matchingBlock) {
|
50
|
+
var _matchingBlock$title;
|
51
|
+
matchingBlock.title = (_matchingBlock$title = matchingBlock.title) !== null && _matchingBlock$title !== void 0 ? _matchingBlock$title : storyName;
|
52
|
+
} else if (!omitUnreferencedStories) {
|
53
|
+
restOfStories.push({
|
54
|
+
story: story,
|
55
|
+
title: storyName
|
56
|
+
});
|
57
|
+
}
|
58
|
+
});
|
59
|
+
if (!omitUnreferencedStories) {
|
60
|
+
return blocksWithStoryTitles.concat(restOfStories);
|
61
|
+
}
|
62
|
+
return blocksWithStoryTitles;
|
63
|
+
};
|
64
|
+
|
65
|
+
/**
|
66
|
+
* Calling with no parameters will produce the default output.
|
67
|
+
* Customize by providing alternative values and/or blocks defining sections
|
68
|
+
* @param {*} param0
|
69
|
+
* @returns
|
70
|
+
*/
|
71
|
+
export var StoryDocsPage = function StoryDocsPage(_ref2) {
|
72
|
+
var _csfFile$meta, _csfFile$meta$paramet, _processedBlocks$filt;
|
73
|
+
var altTitle = _ref2.altTitle,
|
74
|
+
altDescription = _ref2.altDescription,
|
75
|
+
altGuidelinesHref = _ref2.altGuidelinesHref,
|
76
|
+
blocks = _ref2.blocks,
|
77
|
+
omitCodedExample = _ref2.omitCodedExample,
|
78
|
+
omitUnreferencedStories = _ref2.omitUnreferencedStories;
|
79
|
+
var _useOf = useOf('meta', ['meta']),
|
80
|
+
csfFile = _useOf.csfFile;
|
81
|
+
var storyInfo = storyDocsPageInfo(csfFile);
|
82
|
+
var guidelinesHref = altGuidelinesHref !== null && altGuidelinesHref !== void 0 ? altGuidelinesHref : storyInfo.guidelinesHref;
|
83
|
+
var isFullScreen = (csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 ? void 0 : (_csfFile$meta$paramet = _csfFile$meta.parameters) === null || _csfFile$meta$paramet === void 0 ? void 0 : _csfFile$meta$paramet.layout) === 'fullscreen' || false;
|
84
|
+
var storyHelperClass = isFullScreen ? 'c4p--story-docs-page--fullscreen' : '';
|
85
|
+
var processedBlocks = processBlocks(blocks, csfFile.stories, omitUnreferencedStories);
|
86
|
+
console.log(processBlocks);
|
87
|
+
var storyCount = (_processedBlocks$filt = processedBlocks === null || processedBlocks === void 0 ? void 0 : processedBlocks.filter(function (block) {
|
88
|
+
return !!block.story;
|
89
|
+
}).length) !== null && _processedBlocks$filt !== void 0 ? _processedBlocks$filt : 0;
|
90
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null, altTitle !== null && altTitle !== void 0 ? altTitle : storyInfo.title), guidelinesHref ? guidelinesHref && Array.isArray(guidelinesHref) ? guidelinesHref.map(function (_ref3, index) {
|
91
|
+
var href = _ref3.href,
|
92
|
+
label = _ref3.label;
|
93
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, index > 0 && ' | ', /*#__PURE__*/React.createElement(AnchorMdx, {
|
94
|
+
key: href,
|
95
|
+
href: href
|
96
|
+
}, label));
|
97
|
+
}) : /*#__PURE__*/React.createElement(AnchorMdx, {
|
98
|
+
href: guidelinesHref
|
99
|
+
}, altTitle ? "".concat(altTitle, " usage guidelines") : storyInfo.guidelinesLinkLabel) : null, /*#__PURE__*/React.createElement("h2", {
|
100
|
+
style: {
|
101
|
+
marginTop: guidelinesHref ? '16px' : ''
|
102
|
+
}
|
103
|
+
}, "Table of contents"), /*#__PURE__*/React.createElement("ul", null, ['Overview', 'Coded examples', 'Example usage', 'Component API'].map(function (item) {
|
104
|
+
return /*#__PURE__*/React.createElement("li", {
|
105
|
+
key: item
|
106
|
+
}, /*#__PURE__*/React.createElement(AnchorMdx, {
|
107
|
+
href: "#".concat(paramCase(item))
|
108
|
+
}, item), processedBlocks && item === 'Example usage' ? /*#__PURE__*/React.createElement("ul", null, processedBlocks.map(function (block) {
|
109
|
+
return block !== null && block !== void 0 && block.title ? /*#__PURE__*/React.createElement("li", {
|
110
|
+
key: block.title
|
111
|
+
}, /*#__PURE__*/React.createElement(AnchorMdx, {
|
112
|
+
href: "#".concat(paramCase(block.title))
|
113
|
+
}, block.title)) : null;
|
114
|
+
})) : null);
|
115
|
+
})), /*#__PURE__*/React.createElement("h2", {
|
116
|
+
id: "overview"
|
117
|
+
}, "Overview"), /*#__PURE__*/React.createElement(Description, null, altDescription), !omitCodedExample && storyInfo.expectCodedExample ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h2", {
|
118
|
+
id: "coded-examples"
|
119
|
+
}, "Coded examples"), /*#__PURE__*/React.createElement("p", null, "Coded examples can be edited and are a great way to try out a component."), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", {
|
120
|
+
key: "codesandbox"
|
121
|
+
}, /*#__PURE__*/React.createElement(AnchorMdx, {
|
122
|
+
href: codeSandboxHref(storyInfo.title)
|
123
|
+
}, /*#__PURE__*/React.createElement("svg", {
|
124
|
+
viewBox: "0 0 24 24",
|
125
|
+
xmlns: "http://www.w3.org/2000/svg",
|
126
|
+
style: {
|
127
|
+
height: '16px',
|
128
|
+
width: '16px',
|
129
|
+
color: 'black',
|
130
|
+
boxShadow: '0 0 0 2px white',
|
131
|
+
marginRight: '8px',
|
132
|
+
verticalAlign: '-2px'
|
133
|
+
}
|
134
|
+
}, /*#__PURE__*/React.createElement("path", {
|
135
|
+
fillRule: "evenodd",
|
136
|
+
clipRule: "evenodd",
|
137
|
+
d: "M0 0h23.987v24H0V0Zm21.533 2.455v19.09H2.453V2.456h19.08Z",
|
138
|
+
fill: "currentColor"
|
139
|
+
})), "CodeSandbox")), /*#__PURE__*/React.createElement("li", {
|
140
|
+
key: "stackblitz"
|
141
|
+
}, /*#__PURE__*/React.createElement(AnchorMdx, {
|
142
|
+
href: stackblitzHref(storyInfo.title)
|
143
|
+
}, /*#__PURE__*/React.createElement("img", {
|
144
|
+
src: "https://c.staticblitz.com/assets/favicon_sb-861fe1b85c0dc928750c62de15fed96fc75e57ee366bd937bad17a3938917b3f.svg",
|
145
|
+
alt: "Stackblitz logo",
|
146
|
+
style: {
|
147
|
+
verticalAlign: '-2px',
|
148
|
+
marginRight: '8px'
|
149
|
+
}
|
150
|
+
}), "Stackblitz")))) : null, /*#__PURE__*/React.createElement("h2", {
|
151
|
+
id: "example-usage"
|
152
|
+
}, "Example usage"), /*#__PURE__*/React.createElement("div", {
|
153
|
+
className: storyHelperClass
|
154
|
+
}, processedBlocks ? /*#__PURE__*/React.createElement(CustomBlocks, {
|
155
|
+
blocks: processedBlocks
|
156
|
+
}) : /*#__PURE__*/React.createElement(Stories, null)), /*#__PURE__*/React.createElement("h2", {
|
157
|
+
id: "component-api"
|
158
|
+
}, "Component API"), storyCount > 1 && /*#__PURE__*/React.createElement("p", null, "NOTE: Changing the controls below affects the default/primary example shown on the docs page."), /*#__PURE__*/React.createElement(Controls, null));
|
159
|
+
};
|
160
|
+
StoryDocsPage.propTypes = {
|
161
|
+
/**
|
162
|
+
* Uses doc block from the component where possible.
|
163
|
+
*
|
164
|
+
* Note: use `export default { component: ExampleComponent }` in the story if the main component is wrapped by some
|
165
|
+
* additional code. This will allow the doc block to pass through.
|
166
|
+
*
|
167
|
+
* If passed as string treated as markdown.
|
168
|
+
*/
|
169
|
+
altDescription: PropTypes.node,
|
170
|
+
/**
|
171
|
+
* location if any of guidelines on the PAL site, constructed by default
|
172
|
+
*/
|
173
|
+
altGuidelinesHref: PropTypes.oneOfType(PropTypes.string, PropTypes.arrayOf(PropTypes.shape({
|
174
|
+
href: PropTypes.string,
|
175
|
+
label: PropTypes.string
|
176
|
+
}))),
|
177
|
+
/**
|
178
|
+
* Uses component name by default
|
179
|
+
*/
|
180
|
+
altTitle: PropTypes.string,
|
181
|
+
/**
|
182
|
+
* Array with content sections
|
183
|
+
*/
|
184
|
+
blocks: PropTypes.arrayOf(PropTypes.shape({
|
185
|
+
/**
|
186
|
+
* Optional title story name used by default<h3>
|
187
|
+
*/
|
188
|
+
title: PropTypes.string,
|
189
|
+
/**
|
190
|
+
* Optional subTitle a <h4>
|
191
|
+
*/
|
192
|
+
subTitle: PropTypes.string,
|
193
|
+
/**
|
194
|
+
* Optional description, strings treated as markdown.
|
195
|
+
*/
|
196
|
+
description: PropTypes.node,
|
197
|
+
/**
|
198
|
+
* Story imported from story file
|
199
|
+
*/
|
200
|
+
story: PropTypes.func,
|
201
|
+
/**
|
202
|
+
* Some source code
|
203
|
+
* default language `jsx`
|
204
|
+
*/
|
205
|
+
source: PropTypes.shape({
|
206
|
+
language: PropTypes.oneOf('javascript', 'css', 'jsx'),
|
207
|
+
code: PropTypes.string
|
208
|
+
})
|
209
|
+
})),
|
210
|
+
/**
|
211
|
+
* Set to true if no published example exists (all components and patterns should have an example)
|
212
|
+
*/
|
213
|
+
omitCodedExample: PropTypes.bool,
|
214
|
+
/**
|
215
|
+
* Stories unreferenced in blocks included by default
|
216
|
+
*/
|
217
|
+
omitUnreferencedStories: PropTypes.bool
|
218
|
+
};
|