@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
@@ -1,3 +1,5 @@
|
|
1
|
+
import _toArray from "@babel/runtime/helpers/toArray";
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
1
3
|
//
|
2
4
|
// Copyright IBM Corp. 2021, 2021
|
3
5
|
//
|
@@ -10,6 +12,7 @@ import PropTypes from 'prop-types';
|
|
10
12
|
import { sanitize } from '@storybook/csf';
|
11
13
|
import pkg from '../package-settings';
|
12
14
|
import { getPathForComponent } from '../../../../../core/story-structure';
|
15
|
+
import { paramCase } from 'change-case';
|
13
16
|
|
14
17
|
/**
|
15
18
|
* A helper function to return the structured story title for a component.
|
@@ -64,12 +67,14 @@ export var prepareStory = function prepareStory(template, options) {
|
|
64
67
|
* The link URL is based on the example directory name and the standard codesandbox URL for package examples.
|
65
68
|
*/
|
66
69
|
var packagePath = 'github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products';
|
70
|
+
export var codeSandboxHref = function codeSandboxHref(exampleDirectory) {
|
71
|
+
return "https://codesandbox.io/p/sandbox/".concat(packagePath, "/").concat(exampleDirectory, "?file=%2Fsrc%2FExample%2FExample.jsx");
|
72
|
+
};
|
67
73
|
export var CodesandboxLink = function CodesandboxLink(_ref) {
|
68
74
|
var exampleDirectory = _ref.exampleDirectory;
|
69
|
-
|
70
|
-
var codesandbox = "https://codesandbox.io/p/sandbox/".concat(packagePath, "/").concat(exampleDirectory, "?file=%2Fsrc%2FExample%2FExample.jsx");
|
75
|
+
var href = codeSandboxHref(exampleDirectory);
|
71
76
|
return /*#__PURE__*/React.createElement("a", {
|
72
|
-
href:
|
77
|
+
href: href
|
73
78
|
}, /*#__PURE__*/React.createElement("img", {
|
74
79
|
alt: "Edit on CodeSandbox",
|
75
80
|
src: "https://codesandbox.io/static/img/play-codesandbox.svg"
|
@@ -81,11 +86,14 @@ CodesandboxLink.propTypes = {
|
|
81
86
|
*/
|
82
87
|
exampleDirectory: PropTypes.string
|
83
88
|
};
|
89
|
+
export var stackblitzHref = function stackblitzHref(exampleDirectory) {
|
90
|
+
return "https://stackblitz.com/".concat(packagePath, "/").concat(exampleDirectory, "?file=src%2FExample%2FExample.jsx");
|
91
|
+
};
|
84
92
|
export var StackblitzLink = function StackblitzLink(_ref2) {
|
85
93
|
var exampleDirectory = _ref2.exampleDirectory;
|
86
|
-
var
|
94
|
+
var href = stackblitzHref(exampleDirectory);
|
87
95
|
return /*#__PURE__*/React.createElement("a", {
|
88
|
-
href:
|
96
|
+
href: href
|
89
97
|
}, /*#__PURE__*/React.createElement("img", {
|
90
98
|
alt: "Edit on Stackblitz",
|
91
99
|
src: "https://c.staticblitz.com/assets/favicon_sb-861fe1b85c0dc928750c62de15fed96fc75e57ee366bd937bad17a3938917b3f.svg"
|
@@ -97,12 +105,106 @@ StackblitzLink.propTypes = {
|
|
97
105
|
*/
|
98
106
|
exampleDirectory: PropTypes.string
|
99
107
|
};
|
108
|
+
export var palUsageHref = function palUsageHref(csfFile) {
|
109
|
+
var _csfFile$meta;
|
110
|
+
var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 ? void 0 : _csfFile$meta.title;
|
111
|
+
var _title$split = title.split('/'),
|
112
|
+
_title$split2 = _slicedToArray(_title$split, 3),
|
113
|
+
_pkg = _title$split2[0],
|
114
|
+
kind = _title$split2[1],
|
115
|
+
section = _title$split2[2];
|
116
|
+
if (/components|patterns/i.test(kind) && name) {
|
117
|
+
return "https://pages.github.ibm.com/cdai-design/pal/".concat(kind, "s/").concat(paramCase(section), "/usage");
|
118
|
+
}
|
119
|
+
};
|
120
|
+
export var storyDocsPageTitle = function storyDocsPageTitle(csfFile) {
|
121
|
+
var _csfFile$meta2;
|
122
|
+
var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta2 = csfFile.meta) === null || _csfFile$meta2 === void 0 ? void 0 : _csfFile$meta2.title;
|
123
|
+
var _title$split3 = title.split('/'),
|
124
|
+
_title$split4 = _toArray(_title$split3),
|
125
|
+
_pkg = _title$split4[0],
|
126
|
+
kind = _title$split4[1],
|
127
|
+
a = _title$split4[2],
|
128
|
+
b = _title$split4[3],
|
129
|
+
rest = _title$split4.slice(4);
|
130
|
+
var component;
|
131
|
+
if (/components|patterns/i.test(kind)) {
|
132
|
+
// components and patterns have an additional level
|
133
|
+
component = b;
|
134
|
+
} else {
|
135
|
+
component = a;
|
136
|
+
}
|
137
|
+
var name = component.split('#')[0]; // canary always written as Example#canary};
|
138
|
+
|
139
|
+
if (name) {
|
140
|
+
if (rest.length > 0) {
|
141
|
+
return "".concat(name, " (").concat(rest.join(' '), ")");
|
142
|
+
} else {
|
143
|
+
return name;
|
144
|
+
}
|
145
|
+
}
|
146
|
+
console.error('Error: unable to parse title from metadata.');
|
147
|
+
return title;
|
148
|
+
};
|
149
|
+
export var storyDocsPageInfo = function storyDocsPageInfo(csfFile) {
|
150
|
+
var _csfFile$meta3;
|
151
|
+
var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta3 = csfFile.meta) === null || _csfFile$meta3 === void 0 ? void 0 : _csfFile$meta3.title;
|
152
|
+
var _title$split5 = title.split('/'),
|
153
|
+
_title$split6 = _toArray(_title$split5),
|
154
|
+
pkg = _title$split6[0],
|
155
|
+
kind = _title$split6[1],
|
156
|
+
a = _title$split6[2],
|
157
|
+
b = _title$split6[3],
|
158
|
+
rest = _title$split6.slice(4);
|
159
|
+
var result = {
|
160
|
+
package: pkg,
|
161
|
+
kind: kind,
|
162
|
+
expectCodedExample: false
|
163
|
+
};
|
164
|
+
var component;
|
165
|
+
if (/components|patterns/i.test(kind)) {
|
166
|
+
result.expectCodedExample = true;
|
167
|
+
// components and patterns have an additional level
|
168
|
+
component = b;
|
169
|
+
result.section = a;
|
170
|
+
result.guidelinesHref = "https://pages.github.ibm.com/cdai-design/pal/".concat(kind, "s/").concat(paramCase(result.section), "/usage");
|
171
|
+
} else {
|
172
|
+
component = a;
|
173
|
+
}
|
174
|
+
var nameSplit = component.split('#'); // canary always written as Example#canary};
|
175
|
+
var name = nameSplit[0];
|
176
|
+
if (nameSplit.length > 1 && nameSplit[1] === 'canary') {
|
177
|
+
result.canary = true;
|
178
|
+
}
|
179
|
+
if (name) {
|
180
|
+
if (rest.length > 0) {
|
181
|
+
result.component = result.title = "".concat(name, " (").concat(rest.join(' '), ")");
|
182
|
+
} else {
|
183
|
+
result.component = name;
|
184
|
+
result.title = name;
|
185
|
+
}
|
186
|
+
} else {
|
187
|
+
console.error('Error: unable to parse title from metadata.');
|
188
|
+
result.title = title;
|
189
|
+
}
|
190
|
+
if (result.guidelinesHref) {
|
191
|
+
result.guidelinesLinkLabel = "".concat(result.title, " usage guidelines");
|
192
|
+
}
|
193
|
+
return result;
|
194
|
+
};
|
195
|
+
export var storyDocsGuidelines = function storyDocsGuidelines(csfFile) {
|
196
|
+
var storyInfo = storyDocsPageInfo(csfFile);
|
197
|
+
return {
|
198
|
+
href: storyInfo.guidelinesHref,
|
199
|
+
label: storyInfo.guidelinesLinkLabel
|
200
|
+
};
|
201
|
+
};
|
100
202
|
|
101
203
|
/**
|
102
204
|
* A helper function that finds the designated theme on the Storybook canvas.
|
103
205
|
* @returns "dark" or "light"
|
104
206
|
*/
|
105
207
|
export var getSelectedCarbonTheme = function getSelectedCarbonTheme() {
|
106
|
-
var themeId = document.querySelector('
|
208
|
+
var themeId = document.querySelector('[storybook-carbon-theme]').getAttribute('storybook-carbon-theme');
|
107
209
|
return themeId === 'g90' || themeId === 'g100' ? 'dark' : 'light';
|
108
210
|
};
|
@@ -0,0 +1,37 @@
|
|
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 _blocks = require("@storybook/blocks");
|
12
|
+
var _storyHelper = require("../../global/js/utils/story-helper");
|
13
|
+
var stories = _interopRequireWildcard(require("./APIKeyModal.stories"));
|
14
|
+
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); }
|
15
|
+
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; }
|
16
|
+
var DocsPage = function DocsPage() {
|
17
|
+
var _useOf = (0, _blocks.useOf)('meta', ['meta']),
|
18
|
+
csfFile = _useOf.csfFile;
|
19
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
20
|
+
altGuidelinesHref: [(0, _storyHelper.storyDocsGuidelines)(csfFile), {
|
21
|
+
href: 'https://www.carbondesignsystem.com/components/modal/usage',
|
22
|
+
label: 'Carbon Modal usage guidelines'
|
23
|
+
}, {
|
24
|
+
href: 'https://react.carbondesignsystem.com/?path=/docs/modal--default',
|
25
|
+
label: 'Carbon Modal documentation'
|
26
|
+
}],
|
27
|
+
blocks: [{
|
28
|
+
story: stories.Edit,
|
29
|
+
description: "API key creation / generation is assumed to be the default mode for this modal.\nTo enable key editing you have to set the `edit` prop to true and supply any\nother edit related props with the relevant input."
|
30
|
+
}, {
|
31
|
+
description: "By default generate and edit only supply a name input for your key. If you need additional input you should use custom steps",
|
32
|
+
story: stories.CustomEdit
|
33
|
+
}]
|
34
|
+
});
|
35
|
+
};
|
36
|
+
var _default = DocsPage;
|
37
|
+
exports.default = _default;
|
@@ -0,0 +1,32 @@
|
|
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("./AboutModal.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
|
+
guidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/about-modal/usage",
|
17
|
+
blocks: [{
|
18
|
+
story: stories.aboutModal
|
19
|
+
}, {
|
20
|
+
story: stories.fullyLoaded
|
21
|
+
}, {
|
22
|
+
title: 'Overriding the Carbon theme',
|
23
|
+
description: 'The design recommendation is to use a dark theme for the AboutModal if the application is currently using a light theme, and vice versa. The theme applied to the AboutModal can easily be customized as follows:',
|
24
|
+
source: {
|
25
|
+
language: 'css',
|
26
|
+
code: ".#{$pkg-prefix}--about-modal {\n @include carbon--theme(\n $theme: $carbon--theme--g90\n );\n}"
|
27
|
+
}
|
28
|
+
}]
|
29
|
+
});
|
30
|
+
};
|
31
|
+
var _default = DocsPage;
|
32
|
+
exports.default = _default;
|
@@ -39,7 +39,7 @@ var componentName = 'AboutModal';
|
|
39
39
|
// NOTE: the component SCSS is not imported here: it is rolled up separately.
|
40
40
|
|
41
41
|
/**
|
42
|
-
* The AboutModal component provides a way to communicate product information
|
42
|
+
* The `AboutModal` component provides a way to communicate product information
|
43
43
|
* to users. It is triggered by a user’s action, appears on top of the main
|
44
44
|
* page content, and is persistent until dismissed. The purpose of this modal
|
45
45
|
* should be immediately apparent to the user, with a clear and obvious path
|
@@ -81,9 +81,7 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
81
81
|
}, [bodyRef]);
|
82
82
|
|
83
83
|
// Detect resize of the ModalBody to recalculate whether scrolling is enabled
|
84
|
-
(0, _useResizeObserver.useResizeObserver)(bodyRef,
|
85
|
-
callback: handleResize
|
86
|
-
});
|
84
|
+
(0, _useResizeObserver.useResizeObserver)(bodyRef, handleResize);
|
87
85
|
return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
|
88
86
|
className: (0, _classnames.default)(blockClass,
|
89
87
|
// Apply the block class to the main HTML element
|
@@ -192,12 +192,8 @@ var ActionBar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
192
192
|
};
|
193
193
|
|
194
194
|
// // resize of the items
|
195
|
-
(0, _useResizeObserver.useResizeObserver)(sizingRef,
|
196
|
-
|
197
|
-
});
|
198
|
-
(0, _useResizeObserver.useResizeObserver)(localRef, {
|
199
|
-
callback: handleResize
|
200
|
-
});
|
195
|
+
(0, _useResizeObserver.useResizeObserver)(sizingRef, handleResize);
|
196
|
+
(0, _useResizeObserver.useResizeObserver)(localRef, handleResize);
|
201
197
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
|
202
198
|
className: (0, _classnames.default)([blockClass, className]),
|
203
199
|
ref: localRef
|
@@ -14,16 +14,15 @@ var _UserProfileImage = require("../UserProfileImage");
|
|
14
14
|
var componentName = 'AddSelectFormControl';
|
15
15
|
var blockClass = "".concat(_settings.pkg.prefix, "--add-select__selections");
|
16
16
|
var AddSelectFormControl = function AddSelectFormControl(_ref) {
|
17
|
-
var _controlProps;
|
18
17
|
var item = _ref.item,
|
19
18
|
onClick = _ref.onClick,
|
20
19
|
selected = _ref.selected,
|
21
20
|
type = _ref.type;
|
22
|
-
var controlProps = (
|
21
|
+
var controlProps = (0, _defineProperty2.default)({
|
23
22
|
onClick: onClick,
|
24
|
-
|
25
|
-
|
26
|
-
},
|
23
|
+
className: "".concat(blockClass, "-form-control-wrapper ").concat(blockClass, "-form-control-wrapper--").concat(type),
|
24
|
+
size: 20
|
25
|
+
}, "aria-labelledby", "control-label-".concat(item.id));
|
27
26
|
var getCheckbox = function getCheckbox() {
|
28
27
|
if (selected) {
|
29
28
|
return /*#__PURE__*/_react.default.createElement(_icons.CheckboxCheckedFilled, controlProps);
|
@@ -75,7 +74,8 @@ var AddSelectFormControl = function AddSelectFormControl(_ref) {
|
|
75
74
|
}, getItemIcon(item)), /*#__PURE__*/_react.default.createElement("div", {
|
76
75
|
className: "".concat(blockClass, "-form-control-label-text")
|
77
76
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
78
|
-
className: "".concat(blockClass, "-cell-title")
|
77
|
+
className: "".concat(blockClass, "-cell-title"),
|
78
|
+
id: "control-label-".concat(item.id)
|
79
79
|
}, item.title), item.subtitle && /*#__PURE__*/_react.default.createElement("span", {
|
80
80
|
className: "".concat(blockClass, "-cell-subtitle")
|
81
81
|
}, item.subtitle))));
|
@@ -47,6 +47,7 @@ var AddSelectRow = function AddSelectRow(_ref) {
|
|
47
47
|
setMultiSelection = _ref.setMultiSelection,
|
48
48
|
setParentSelected = _ref.setParentSelected,
|
49
49
|
setSingleSelection = _ref.setSingleSelection,
|
50
|
+
setSize = _ref.setSize,
|
50
51
|
singleSelection = _ref.singleSelection;
|
51
52
|
var ref = (0, _react.useRef)(null);
|
52
53
|
(0, _react.useEffect)(function () {
|
@@ -129,14 +130,20 @@ var AddSelectRow = function AddSelectRow(_ref) {
|
|
129
130
|
var hasModifiers = (modifiers === null || modifiers === void 0 ? void 0 : (_modifiers$options = modifiers.options) === null || _modifiers$options === void 0 ? void 0 : _modifiers$options.length) > 0;
|
130
131
|
var tabIndex = getTabIndex();
|
131
132
|
var selected = isSelected();
|
133
|
+
var expanded = parentSelected === item.id;
|
132
134
|
return /*#__PURE__*/_react.default.createElement("div", {
|
133
|
-
className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--selected"), isSelected(
|
135
|
+
className: (0, _classnames.default)("".concat(blockClass, "-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--selected"), isSelected()), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "-row--active"), expanded), _cx)),
|
134
136
|
onKeyDown: onSelectKeyDown,
|
135
137
|
tabIndex: tabIndex,
|
136
138
|
ref: ref,
|
137
|
-
role: "row"
|
139
|
+
role: "row",
|
140
|
+
"aria-selected": selected,
|
141
|
+
"aria-posinset": index,
|
142
|
+
"aria-setsize": setSize,
|
143
|
+
"aria-expanded": expanded
|
138
144
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
139
|
-
className: "".concat(blockClass, "-cell")
|
145
|
+
className: "".concat(blockClass, "-cell"),
|
146
|
+
role: "gridcell"
|
140
147
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
141
148
|
className: "".concat(blockClass, "-cell-wrapper")
|
142
149
|
}, multi ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AddSelectFormControl.AddSelectFormControl, {
|
@@ -149,7 +156,7 @@ var AddSelectRow = function AddSelectRow(_ref) {
|
|
149
156
|
type: "inline",
|
150
157
|
items: modifiers.options,
|
151
158
|
label: modifiers.label,
|
152
|
-
disabled: !isSelected(
|
159
|
+
disabled: !isSelected(),
|
153
160
|
className: "".concat(blockClass, "-dropdown"),
|
154
161
|
initialSelectedItem: item[modifiers.id],
|
155
162
|
onChange: function onChange(_ref3) {
|
@@ -174,7 +181,9 @@ var AddSelectRow = function AddSelectRow(_ref) {
|
|
174
181
|
hasIconOnly: true,
|
175
182
|
onClick: onNavigateItem,
|
176
183
|
kind: "ghost",
|
177
|
-
size: "sm"
|
184
|
+
size: "sm",
|
185
|
+
tabIndex: -1,
|
186
|
+
"aria-hidden": true
|
178
187
|
}), item.meta && /*#__PURE__*/_react.default.createElement(_react2.Button, {
|
179
188
|
className: "".concat(blockClass, "-view-meta"),
|
180
189
|
renderIcon: function renderIcon(props) {
|
@@ -212,6 +221,7 @@ AddSelectRow.propTypes = {
|
|
212
221
|
setMultiSelection: _propTypes.default.func,
|
213
222
|
setParentSelected: _propTypes.default.func,
|
214
223
|
setSingleSelection: _propTypes.default.func,
|
224
|
+
setSize: _propTypes.default.number,
|
215
225
|
singleSelection: _propTypes.default.string
|
216
226
|
};
|
217
227
|
AddSelectRow.displayName = componentName;
|
@@ -167,6 +167,9 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
|
|
167
167
|
setDisplayedBreadcrumbItems(newDisplayedBreadcrumbItems);
|
168
168
|
}, [breadcrumbs, displayCount]);
|
169
169
|
var checkFullyVisibleBreadcrumbItems = function checkFullyVisibleBreadcrumbItems() {
|
170
|
+
if (!breadcrumbItemWithOverflow.current) {
|
171
|
+
return;
|
172
|
+
}
|
170
173
|
var displayItemIndex = function displayItemIndex(itemCount, index) {
|
171
174
|
// In this data set the overflow measuring item is [0]
|
172
175
|
// so the first displayItem in the list is [1]
|
@@ -257,13 +260,9 @@ var BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
|
|
257
260
|
}
|
258
261
|
|
259
262
|
// container resize
|
260
|
-
(0, _useResizeObserver.useResizeObserver)(sizingContainerRef,
|
261
|
-
callback: handleResize
|
262
|
-
});
|
263
|
+
(0, _useResizeObserver.useResizeObserver)(sizingContainerRef, handleResize);
|
263
264
|
// item resize
|
264
|
-
(0, _useResizeObserver.useResizeObserver)(breadcrumbItemWithOverflow,
|
265
|
-
callback: handleResize
|
266
|
-
});
|
265
|
+
(0, _useResizeObserver.useResizeObserver)(breadcrumbItemWithOverflow, handleResize);
|
267
266
|
return /*#__PURE__*/_react.default.createElement("div", {
|
268
267
|
className: (0, _classnames.default)(blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__with-items"), displayedBreadcrumbItems.length > 1)),
|
269
268
|
ref: breadcrumbItemWithOverflow
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.ButtonMenu = void 0;
|
8
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
9
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
10
11
|
var _react = _interopRequireDefault(require("react"));
|
11
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
@@ -58,15 +59,14 @@ var ButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
58
59
|
return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, (0, _extends2.default)({}, rest, {
|
59
60
|
className: (0, _classnames.default)(blockClass,
|
60
61
|
// Apply the block class to the main HTML element
|
61
|
-
className // Apply any supplied class names to the main HTML element.
|
62
|
-
),
|
63
|
-
|
62
|
+
className, // Apply any supplied class names to the main HTML element.
|
63
|
+
"".concat(carbonPrefix, "--btn--").concat(size), (0, _defineProperty2.default)({}, "".concat(blockClass, "__wrapper--").concat(kind), kind)),
|
64
64
|
"aria-label": menuAriaLabel,
|
65
65
|
menuOptionsClass: (0, _classnames.default)("".concat(blockClass, "__options"), menuOptionsClass),
|
66
66
|
size: size,
|
67
67
|
renderIcon: function renderIcon() {
|
68
68
|
return /*#__PURE__*/_react.default.createElement("div", {
|
69
|
-
className: (0, _classnames.default)(
|
69
|
+
className: (0, _classnames.default)("".concat(blockClass, "__trigger"))
|
70
70
|
}, label, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
|
71
71
|
"aria-hidden": "true",
|
72
72
|
"aria-label": iconDescription,
|
@@ -145,15 +145,9 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
|
|
145
145
|
}, (0, _propsHelper.prepareProps)(other, ['iconDescription', 'renderIcon'])));
|
146
146
|
}).reverse());
|
147
147
|
});
|
148
|
-
(0, _useResizeObserver.useResizeObserver)(sizingContainerRefSet,
|
149
|
-
|
150
|
-
|
151
|
-
(0, _useResizeObserver.useResizeObserver)(sizingContainerRefCombo, {
|
152
|
-
callback: checkFullyVisibleItems
|
153
|
-
});
|
154
|
-
(0, _useResizeObserver.useResizeObserver)(spaceAvailableRef, {
|
155
|
-
callback: checkFullyVisibleItems
|
156
|
-
});
|
148
|
+
(0, _useResizeObserver.useResizeObserver)(sizingContainerRefSet, checkFullyVisibleItems);
|
149
|
+
(0, _useResizeObserver.useResizeObserver)(sizingContainerRefCombo, checkFullyVisibleItems);
|
150
|
+
(0, _useResizeObserver.useResizeObserver)(spaceAvailableRef, checkFullyVisibleItems);
|
157
151
|
return /*#__PURE__*/_react.default.createElement("div", {
|
158
152
|
className: (0, _classnames.default)([blockClass, className, (0, _defineProperty2.default)({}, "".concat(blockClass, "--right"), rightAlign)]),
|
159
153
|
ref: spaceAvailableRef
|
@@ -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("./Cascade.stories"));
|
12
|
+
var _blocks = require("@storybook/blocks");
|
13
|
+
var _storyHelper = require("../../global/js/utils/story-helper");
|
14
|
+
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); }
|
15
|
+
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; }
|
16
|
+
var DocsPage = function DocsPage() {
|
17
|
+
var _useOf = (0, _blocks.useOf)('meta', ['meta']),
|
18
|
+
csfFile = _useOf.csfFile;
|
19
|
+
return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
|
20
|
+
altGuidelinesHref: [(0, _storyHelper.storyDocsGuidelines)(csfFile), {
|
21
|
+
href: 'https://www.carbondesignsystem.com/guidelines/motion/overview/',
|
22
|
+
label: 'Carbon motion guidelines'
|
23
|
+
}],
|
24
|
+
blocks: [{
|
25
|
+
story: stories.WithoutGrid
|
26
|
+
}, {
|
27
|
+
description: 'When using `Cascade` with grid support its important that you follow the example code structure and provide the rows and columns. The component will assume this structure and add the appropriate CSS classes to the columns.',
|
28
|
+
story: stories.WithGrid
|
29
|
+
}]
|
30
|
+
});
|
31
|
+
};
|
32
|
+
var _default = DocsPage;
|
33
|
+
exports.default = _default;
|
@@ -29,6 +29,16 @@ var componentName = 'Cascade';
|
|
29
29
|
var defaults = {
|
30
30
|
grid: false
|
31
31
|
};
|
32
|
+
|
33
|
+
/**
|
34
|
+
|
35
|
+
This pattern is intended for use with cards, tiles, or similarly styled
|
36
|
+
components. Use this patterns in areas that are the primary focus on the page to
|
37
|
+
help the user along their journey or locate the most important information on
|
38
|
+
the page. It should not be used on a page if it is the secondary focus of the
|
39
|
+
page as that will distract the user.
|
40
|
+
|
41
|
+
*/
|
32
42
|
var Cascade = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
33
43
|
var children = _ref.children,
|
34
44
|
className = _ref.className,
|
@@ -81,7 +91,7 @@ Cascade.propTypes = {
|
|
81
91
|
*/
|
82
92
|
className: _propTypes.default.string,
|
83
93
|
/**
|
84
|
-
* Specifies whether or not to wrap the child content in a
|
94
|
+
* Specifies whether or not to wrap the child content in a `<Grid />`.
|
85
95
|
* If this is set to true it's important that the children are being wrapped in rows in columns.
|
86
96
|
* Check the documentation for additional clarification.
|
87
97
|
*/
|
@@ -0,0 +1,50 @@
|
|
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("./CreateFullPage.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
|
+
altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/creation-flows/usage#full-page",
|
17
|
+
blocks: [{
|
18
|
+
description: "There are **2** components that make up a Create Full Page component, which can\nbe used in unison to create the desired look, or flow. Please note, to utilize\nthe Create Full Page component, you'll need to have a minimum of two steps. If\nyou are looking for a one step creation flow, consider Create Tearsheet, Create\nSide Panel, or Create Modal."
|
19
|
+
}, {
|
20
|
+
story: stories.createFullPage,
|
21
|
+
description: "This is used when you have one section per step. This can be created by passing\nin the overall `<CreateFullPage />` component and the `<CreateFullPageStep />`\ncomponent with form items as children:\n",
|
22
|
+
source: {
|
23
|
+
code: "<CreateFullPage {...props}>\n <CreateFullPageStep\n title=\"Required title\"\n subtitle=\"Optional subtitle\"\n description=\"Optional description\"\n onNext={() => {'Optional function'}}\n >\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <TextInput\n id=\"test-1\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </Column>\n </Row>\n </CreateFullPageStep>\n </CreateFullPage>"
|
24
|
+
}
|
25
|
+
}, {
|
26
|
+
story: stories.createFullPageWithSections,
|
27
|
+
description: "This is used when you have several sections per step. This can be created by\npassing in the overall `<CreateFullPage />` component and the\n`<CreateFullPageStep />` component for the first `section`. All additional\n`sections` must be passed in as children, as shown below:",
|
28
|
+
source: {
|
29
|
+
code: "<CreateFullPageStep\n title=\"Required title\"\n subtitle=\"Optional subtitle\"\n description=\"Optional description\"\n onNext={() => {'Optional function'}}\n >\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n <TextInput\n id=\"test-1\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </fieldset>\n </Column>\n </Row>\n <span className={`#{$pkg-prefix}--create-full-page__section-divider`} />\n <h5 className={`#{$pkg-prefix}--create-full-page__step-title`}>Required title</h5>\n <h6 className={`#{$pkg-prefix}--create-full-page__step-subtitle`}>\n Optional subtitle\n </h6>\n <p className={`#{$pkg-prefix}--create-full-page__step-description`}>\n Optional description\n </p>\n <Row>\n <Column xlg={5} lg={5} md={4} sm={4}>\n <fieldset className={`#{$pkg-prefix}--create-full-page__step-fieldset`}>\n <TextInput\n id=\"test-2\"\n invalidText=\"A valid value is required\"\n labelText=\"Topic name\"\n placeholder=\"Enter topic name\"\n />\n </fieldset>\n </Column>\n </Row>\n</CreateFullPageStep>"
|
30
|
+
}
|
31
|
+
}, {
|
32
|
+
title: 'Using custom components',
|
33
|
+
description: "It is possible to use custom components that return `CreateFullPageStep`s in\norder to help reduce the amount of logic in the component that contains the main\n`CreateFullPage`. _It is required that each child of the `CreateFullPage` either\nbe a custom step or a `CreateFullPageStep`_. An example of this could look like\nthe following:",
|
34
|
+
source: {
|
35
|
+
code: "const CreateStepCustom = ({ subtitle, ...rest }) => {\n return (\n <CreateFullPageStep\n {...rest}\n subtitle={subtitle}\n title=\"Step 1\"\n onNext={() => console.log('optional validation check')}\n onMount={() => console.log('optional onMount fn')}\n disableSubmit={false}\n >\n step content here\n </CreateFullPageStep>\n );\n};\n\nconst CreateComponent = () => {\n return (\n <CreateFullPage {...createFullPageProps}>\n <CreateStepCustom subtitle=\"Custom step subtitle\" />\n <CreateFullPageStep\n title=\"Topic name\"\n fieldsetLegendText=\"Topic information\"\n disableSubmit={!value}\n subtitle=\"This is the unique name used to recognize your topic\"\n description=\"It will also be used by your producers and consumers as part of the\n connection information, so make it something easy to recognize.\"\n >\n Content for second step\n </CreateFullPageStep>\n </CreateFullPage>\n );\n};"
|
36
|
+
}
|
37
|
+
}, {
|
38
|
+
title: 'Using dynamic steps',
|
39
|
+
description: "The use of dynamic steps can be utilized in a scenario when the user makes a\ncertain selection on one step that effects which steps will follow it, this is\ncontrolled via the `includeStep` prop. See abbreviated example below:",
|
40
|
+
source: {
|
41
|
+
code: "import { useState } from 'react';\n\nconst CreateFlow = () => {\n const [shouldIncludeAdditionalStep, setShouldIncludeAdditionalStep] =\n useState(false);\n return (\n <CreateFullPage {...createFullPageProps}>\n <CreateFullPageStep {...step1Props}>\n Step 1 content\n <Checkbox\n labelText={`Include additional step`}\n id=\"include-additional-step-checkbox\"\n onChange={(value) => setShouldIncludeAdditionalStep(value)}\n checked={shouldIncludeAdditionalStep}\n />\n </CreateFullPageStep>\n <CreateFullPageStep\n {...step2Props}\n includeStep={shouldIncludeAdditionalStep}\n >\n Dynamic step content\n </CreateFullPageStep>\n <CreateFullPageStep {...step3Props}>\n Final step content\n </CreateFullPageStep>\n </CreateFullPage>\n );\n};"
|
42
|
+
}
|
43
|
+
}, {
|
44
|
+
title: 'Class names',
|
45
|
+
description: "Additionally, to get the preferred styling when including your own children as\nsections, you can utilize the below included class names.\n\n| Class name | Element | Features |\n| ---------------------------------------------------- | ----------- | ---------------------------------------------------------- |\n| `#{$pkg-prefix}--create-full-page__step-title` | title | `productive-heading-04` & `margin-bottom` of `$spacing-05` |\n| `#{$pkg-prefix}--create-full-page__step-subtitle` | subtitle | `productive-heading-01` & `margin-bottom` of `$spacing-03` |\n| `#{$pkg-prefix}--create-full-page__step-description` | description | `body-long-01` & `margin-bottom` of `$spacing-06` |\n| `#{$pkg-prefix}--create-full-page__step-fieldset` | fieldset | `margin-bottom` of `$spacing-05` to all children elements |\n| `#{$pkg-prefix}--create-full-page__section-divider` | divider | Includes a `1px` divider line inside the `main` content |\n"
|
46
|
+
}]
|
47
|
+
});
|
48
|
+
};
|
49
|
+
var _default = DocsPage;
|
50
|
+
exports.default = _default;
|
@@ -43,6 +43,19 @@ var StepsContext = /*#__PURE__*/(0, _react.createContext)(null);
|
|
43
43
|
// to let it know what number it is in the sequence of steps
|
44
44
|
exports.StepsContext = StepsContext;
|
45
45
|
var StepNumberContext = /*#__PURE__*/(0, _react.createContext)(-1);
|
46
|
+
|
47
|
+
/**
|
48
|
+
* Use with creations that must be completed in order for a service to be usable.
|
49
|
+
*
|
50
|
+
* ### Grid
|
51
|
+
*
|
52
|
+
* The `CreateFullPage` component utilizes Carbons' grid system in the inner
|
53
|
+
content of the main section inside of the component. You can read more guidance
|
54
|
+
on the Carbon's grid system
|
55
|
+
[here](https://www.carbondesignsystem.com/guidelines/2x-grid/overview). You can
|
56
|
+
include `<Row>` and `<Column>` components inside of each `CreateFullPageStep`
|
57
|
+
component to get the desired affect.
|
58
|
+
*/
|
46
59
|
exports.StepNumberContext = StepNumberContext;
|
47
60
|
var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
48
61
|
var backButtonText = _ref.backButtonText,
|
@@ -0,0 +1,35 @@
|
|
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("./CreateModal.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
|
+
altGuidelinesHref: "https://pages.github.ibm.com/cdai-design/pal/patterns/creation-flows/usage#modal",
|
17
|
+
blocks: [{
|
18
|
+
story: stories.Default
|
19
|
+
}, {
|
20
|
+
title: 'Form validation',
|
21
|
+
description: "All forms, including that within the `CreateModal` should follow C&CS guidelines\nfor form validation.\n\nThis includes the following:\n\n- The `Submit` button in the modal should be disabled, until all required inputs\n are filled in and valid\n- All required inputs should _only_ throw an invalid error _after_ the element\n loses focus\n- All optional form fields should have an `(optional)` text at the end of the\n input `labelText`. Optional should always be in parentheses\n\nYou can find more information on how to validate your form fields in\n[Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage)."
|
22
|
+
}, {
|
23
|
+
title: 'Overriding Carbon theme',
|
24
|
+
description: "The design recommendation is to use a dark theme for the CreateModal if the\napplication is currently using a light theme, and vice versa. The theme applied\nto the CreateModal can easily be customized as follows:\n\nIn SCSS:",
|
25
|
+
source: {
|
26
|
+
language: 'css',
|
27
|
+
code: " .#{$pkg-prefix}--create-modal {\n @include carbon--theme(\n $theme: $carbon--theme--g90\n );\n }"
|
28
|
+
}
|
29
|
+
}, {
|
30
|
+
description: "Alternatively, the required Carbon theme can be set as above in a custom CSS\nclass which is then applied to the CreateModal using the `className` prop."
|
31
|
+
}]
|
32
|
+
});
|
33
|
+
};
|
34
|
+
var _default = DocsPage;
|
35
|
+
exports.default = _default;
|
@@ -35,6 +35,13 @@ var isValidChildren = function isValidChildren() {
|
|
35
35
|
return;
|
36
36
|
};
|
37
37
|
};
|
38
|
+
|
39
|
+
/**
|
40
|
+
* The `CreateModal` component provides a way for a user to quickly generate a new
|
41
|
+
resource. It is triggered by a user’s action, appears on top of the main page
|
42
|
+
content, and is persistent until dismissed. The purpose of this modal should be
|
43
|
+
immediately apparent to the user, with a clear and obvious path to completion.
|
44
|
+
*/
|
38
45
|
var CreateModal = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
|
39
46
|
var className = _ref2.className,
|
40
47
|
children = _ref2.children,
|