@carbon/ibm-products 1.24.0 → 1.25.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/css/index-full-carbon.css +26 -15
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +26 -15
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +26 -15
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +26 -15
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/EmptyStates/EmptyStateContent.js +2 -1
- package/es/components/ImportModal/ImportModal.js +10 -2
- package/es/components/WebTerminal/WebTerminal.js +25 -13
- package/es/components/WebTerminal/WebTerminalContentWrapper.js +8 -10
- package/es/components/WebTerminal/hooks/index.js +45 -0
- package/es/components/WebTerminal/index.js +2 -1
- package/es/components/WebTerminal/preview-components/Navigation.js +6 -10
- package/es/components/index.js +1 -1
- package/es/global/js/package-settings.js +1 -0
- package/lib/components/EmptyStates/EmptyStateContent.js +2 -1
- package/lib/components/ImportModal/ImportModal.js +11 -2
- package/lib/components/WebTerminal/WebTerminal.js +26 -13
- package/lib/components/WebTerminal/WebTerminalContentWrapper.js +9 -9
- package/lib/components/WebTerminal/hooks/index.js +69 -0
- package/lib/components/WebTerminal/index.js +15 -1
- package/lib/components/WebTerminal/preview-components/Navigation.js +6 -10
- package/lib/components/index.js +12 -0
- package/lib/global/js/package-settings.js +1 -0
- package/package.json +10 -10
- package/scss/components/EmptyStates/_empty-state.scss +16 -9
@@ -1,7 +1,7 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
4
|
-
var _excluded = ["children"
|
4
|
+
var _excluded = ["children"];
|
5
5
|
|
6
6
|
/**
|
7
7
|
* Copyright IBM Corp. 2020, 2021
|
@@ -14,18 +14,21 @@ import React from 'react'; // Other standard imports.
|
|
14
14
|
|
15
15
|
import PropTypes from 'prop-types';
|
16
16
|
import cx from 'classnames';
|
17
|
-
import { pkg } from '../../settings';
|
17
|
+
import { pkg } from '../../settings';
|
18
|
+
import { useWebTerminal } from './hooks'; // The block part of our conventional BEM class names (blockClass__E--M).
|
18
19
|
|
19
20
|
var componentName = 'WebTerminalContentWrapper';
|
20
21
|
var blockClass = "".concat(pkg.prefix, "--web-terminal-content-wrapper");
|
21
22
|
export var WebTerminalContentWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
22
23
|
var children = _ref.children,
|
23
|
-
isTerminalOpen = _ref.isTerminalOpen,
|
24
24
|
rest = _objectWithoutProperties(_ref, _excluded);
|
25
25
|
|
26
|
+
var _useWebTerminal = useWebTerminal(),
|
27
|
+
open = _useWebTerminal.open;
|
28
|
+
|
26
29
|
return /*#__PURE__*/React.createElement("div", _extends({
|
27
30
|
ref: ref,
|
28
|
-
className: cx([blockClass, _defineProperty({}, "".concat(blockClass, "--open"),
|
31
|
+
className: cx([blockClass, _defineProperty({}, "".concat(blockClass, "--open"), open)])
|
29
32
|
}, rest), children);
|
30
33
|
}); // Return a placeholder if not released and not enabled by feature flag
|
31
34
|
|
@@ -40,10 +43,5 @@ WebTerminalContentWrapper.propTypes = {
|
|
40
43
|
/**
|
41
44
|
* Pass in content as children.
|
42
45
|
*/
|
43
|
-
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
|
44
|
-
|
45
|
-
/**
|
46
|
-
* A boolean to determine if the terminal is open.
|
47
|
-
*/
|
48
|
-
isTerminalOpen: PropTypes.bool.isRequired
|
46
|
+
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
|
49
47
|
};
|
@@ -0,0 +1,45 @@
|
|
1
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
2
|
+
import React, { useState, useCallback, createContext } from 'react';
|
3
|
+
import { useContext } from 'react';
|
4
|
+
import PropTypes from 'prop-types';
|
5
|
+
import { pkg } from '../../../settings';
|
6
|
+
export var WebTerminalContext = /*#__PURE__*/createContext();
|
7
|
+
var componentName = 'WebTerminalProvider';
|
8
|
+
export var WebTerminalProvider = function WebTerminalProvider(_ref) {
|
9
|
+
var children = _ref.children;
|
10
|
+
|
11
|
+
var _useState = useState(false),
|
12
|
+
_useState2 = _slicedToArray(_useState, 2),
|
13
|
+
open = _useState2[0],
|
14
|
+
setOpen = _useState2[1];
|
15
|
+
|
16
|
+
var openWebTerminal = useCallback(function () {
|
17
|
+
return setOpen(true);
|
18
|
+
}, []);
|
19
|
+
var closeWebTerminal = useCallback(function () {
|
20
|
+
return setOpen(false);
|
21
|
+
}, []);
|
22
|
+
var toggleWebTerminal = useCallback(function () {
|
23
|
+
return setOpen(!open);
|
24
|
+
}, [open]);
|
25
|
+
return /*#__PURE__*/React.createElement(WebTerminalContext.Provider, {
|
26
|
+
value: {
|
27
|
+
open: open,
|
28
|
+
openWebTerminal: openWebTerminal,
|
29
|
+
closeWebTerminal: closeWebTerminal,
|
30
|
+
toggleWebTerminal: toggleWebTerminal
|
31
|
+
}
|
32
|
+
}, children);
|
33
|
+
}; // Return a placeholder if not released and not enabled by feature flag
|
34
|
+
|
35
|
+
WebTerminalProvider = pkg.checkComponentEnabled(WebTerminalProvider, componentName);
|
36
|
+
WebTerminalProvider.propTypes = {
|
37
|
+
/**
|
38
|
+
* Provide your own terminal component as children to show up in the web terminal
|
39
|
+
*/
|
40
|
+
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
|
41
|
+
}; // Custom hook that exposes the provided value from context
|
42
|
+
|
43
|
+
export var useWebTerminal = function useWebTerminal() {
|
44
|
+
return useContext(WebTerminalContext);
|
45
|
+
};
|
@@ -1,10 +1,12 @@
|
|
1
1
|
import React from 'react';
|
2
2
|
import { Header, HeaderName, HeaderGlobalAction, HeaderGlobalBar } from 'carbon-components-react';
|
3
3
|
import { Terminal20 as Terminal, Search20 as Search, User20 as User } from '@carbon/icons-react';
|
4
|
-
import
|
4
|
+
import { useWebTerminal } from '../hooks';
|
5
|
+
|
6
|
+
var Navigation = function Navigation() {
|
7
|
+
var _useWebTerminal = useWebTerminal(),
|
8
|
+
openWebTerminal = _useWebTerminal.openWebTerminal;
|
5
9
|
|
6
|
-
var Navigation = function Navigation(_ref) {
|
7
|
-
var openTerminal = _ref.openTerminal;
|
8
10
|
return /*#__PURE__*/React.createElement(Header, {
|
9
11
|
"aria-label": "IBM Platform Name"
|
10
12
|
}, /*#__PURE__*/React.createElement(HeaderName, {
|
@@ -12,7 +14,7 @@ var Navigation = function Navigation(_ref) {
|
|
12
14
|
prefix: "IBM"
|
13
15
|
}, "[Platform]"), /*#__PURE__*/React.createElement(HeaderGlobalBar, null, /*#__PURE__*/React.createElement(HeaderGlobalAction, {
|
14
16
|
"aria-label": "Web terminal",
|
15
|
-
onClick:
|
17
|
+
onClick: openWebTerminal
|
16
18
|
}, /*#__PURE__*/React.createElement(Terminal, null)), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
|
17
19
|
"aria-label": "Search",
|
18
20
|
onClick: function onClick() {}
|
@@ -22,10 +24,4 @@ var Navigation = function Navigation(_ref) {
|
|
22
24
|
}, /*#__PURE__*/React.createElement(User, null))));
|
23
25
|
};
|
24
26
|
|
25
|
-
Navigation.propTypes = {
|
26
|
-
/**
|
27
|
-
* Opens the terminal
|
28
|
-
*/
|
29
|
-
openTerminal: PropTypes.func.isRequired
|
30
|
-
};
|
31
27
|
export default Navigation;
|
package/es/components/index.js
CHANGED
@@ -32,7 +32,7 @@ export { TagSet } from './TagSet';
|
|
32
32
|
export { Tearsheet, TearsheetNarrow } from './Tearsheet';
|
33
33
|
export { Toolbar, ToolbarButton, ToolbarGroup } from './Toolbar';
|
34
34
|
export { UserProfileImage } from './UserProfileImage';
|
35
|
-
export { WebTerminal, WebTerminalContentWrapper } from './WebTerminal';
|
35
|
+
export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProvider } from './WebTerminal';
|
36
36
|
export { EditSidePanel } from './EditSidePanel';
|
37
37
|
export { OptionsTile } from './OptionsTile';
|
38
38
|
export { InlineEdit } from './InlineEdit';
|
@@ -43,7 +43,8 @@ var EmptyStateContent = function EmptyStateContent(_ref) {
|
|
43
43
|
className: "".concat(blockClass, "__action-button"),
|
44
44
|
kind: action.kind || 'tertiary',
|
45
45
|
onClick: action.onClick,
|
46
|
-
renderIcon: action.renderIcon || null
|
46
|
+
renderIcon: action.renderIcon || null,
|
47
|
+
size: 'sm'
|
47
48
|
}), action.text), (link === null || link === void 0 ? void 0 : link.text) && (link === null || link === void 0 ? void 0 : link.href) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, (0, _extends2.default)({}, link, {
|
48
49
|
className: "".concat(blockClass, "__link"),
|
49
50
|
href: link.href
|
@@ -25,6 +25,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
25
25
|
|
26
26
|
var _react = _interopRequireWildcard(require("react"));
|
27
27
|
|
28
|
+
var _iconsReact = require("@carbon/icons-react");
|
29
|
+
|
28
30
|
var _carbonComponentsReact = require("carbon-components-react");
|
29
31
|
|
30
32
|
var _classnames = _interopRequireDefault(require("classnames"));
|
@@ -37,7 +39,7 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
|
|
37
39
|
|
38
40
|
var _settings = require("../../settings");
|
39
41
|
|
40
|
-
var _excluded = ["accept", "className", "defaultErrorBody", "defaultErrorHeader", "description", "fetchErrorBody", "fetchErrorHeader", "fileDropHeader", "fileDropLabel", "fileUploadLabel", "inputButtonText", "inputId", "inputLabel", "inputPlaceholder", "invalidFileTypeErrorBody", "invalidFileTypeErrorHeader", "invalidIconDescription", "maxFileSize", "maxFileSizeErrorBody", "maxFileSizeErrorHeader", "onClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "title"];
|
42
|
+
var _excluded = ["accept", "className", "defaultErrorBody", "defaultErrorHeader", "description", "fetchErrorBody", "fetchErrorHeader", "fileDropHeader", "fileDropLabel", "fileUploadLabel", "inputButtonIcon", "inputButtonText", "inputId", "inputLabel", "inputPlaceholder", "invalidFileTypeErrorBody", "invalidFileTypeErrorHeader", "invalidIconDescription", "maxFileSize", "maxFileSizeErrorBody", "maxFileSizeErrorHeader", "onClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "title"];
|
41
43
|
|
42
44
|
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); }
|
43
45
|
|
@@ -64,6 +66,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
64
66
|
fileDropHeader = _ref.fileDropHeader,
|
65
67
|
fileDropLabel = _ref.fileDropLabel,
|
66
68
|
fileUploadLabel = _ref.fileUploadLabel,
|
69
|
+
inputButtonIcon = _ref.inputButtonIcon,
|
67
70
|
inputButtonText = _ref.inputButtonText,
|
68
71
|
inputId = _ref.inputId,
|
69
72
|
inputLabel = _ref.inputLabel,
|
@@ -273,7 +276,8 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
273
276
|
onClick: fetchFile,
|
274
277
|
className: "".concat(blockClass, "__import-button"),
|
275
278
|
size: "sm",
|
276
|
-
disabled: importButtonDisabled
|
279
|
+
disabled: importButtonDisabled,
|
280
|
+
renderIcon: inputButtonIcon ? _iconsReact.Add20 : null
|
277
281
|
}, inputButtonText)), /*#__PURE__*/_react.default.createElement("div", {
|
278
282
|
className: "".concat(_settings.carbon.prefix, "--file-container ").concat(blockClass, "__file-container")
|
279
283
|
}, hasFiles && /*#__PURE__*/_react.default.createElement("p", {
|
@@ -363,6 +367,11 @@ ImportModal.propTypes = {
|
|
363
367
|
*/
|
364
368
|
fileUploadLabel: _propTypes.default.string,
|
365
369
|
|
370
|
+
/**
|
371
|
+
* Button icon for import by url button
|
372
|
+
*/
|
373
|
+
inputButtonIcon: _propTypes.default.bool,
|
374
|
+
|
366
375
|
/**
|
367
376
|
* Button text for import by url button
|
368
377
|
*/
|
@@ -31,9 +31,11 @@ var _carbonComponentsReact = require("carbon-components-react");
|
|
31
31
|
|
32
32
|
var _motion = require("@carbon/motion");
|
33
33
|
|
34
|
+
var _hooks = require("./hooks");
|
35
|
+
|
34
36
|
var _devtools = require("../../global/js/utils/devtools");
|
35
37
|
|
36
|
-
var _excluded = ["actions", "children", "className", "closeIconDescription", "
|
38
|
+
var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen"];
|
37
39
|
|
38
40
|
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); }
|
39
41
|
|
@@ -50,7 +52,8 @@ var blockClass = "".concat(_settings.pkg.prefix, "--web-terminal"); // Default v
|
|
50
52
|
var defaults = {
|
51
53
|
actions: Object.freeze([]),
|
52
54
|
documentationLinks: Object.freeze([]),
|
53
|
-
documentationLinksIconDescription: 'Show documentation links'
|
55
|
+
documentationLinksIconDescription: 'Show documentation links',
|
56
|
+
isInitiallyOpen: false
|
54
57
|
};
|
55
58
|
|
56
59
|
var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
@@ -61,14 +64,19 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
61
64
|
children = _ref.children,
|
62
65
|
className = _ref.className,
|
63
66
|
closeIconDescription = _ref.closeIconDescription,
|
64
|
-
closeTerminal = _ref.closeTerminal,
|
65
67
|
_ref$documentationLin = _ref.documentationLinks,
|
66
68
|
documentationLinks = _ref$documentationLin === void 0 ? defaults.documentationLinks : _ref$documentationLin,
|
67
69
|
_ref$documentationLin2 = _ref.documentationLinksIconDescription,
|
68
70
|
documentationLinksIconDescription = _ref$documentationLin2 === void 0 ? defaults.documentationLinksIconDescription : _ref$documentationLin2,
|
69
|
-
|
71
|
+
_ref$isInitiallyOpen = _ref.isInitiallyOpen,
|
72
|
+
isInitiallyOpen = _ref$isInitiallyOpen === void 0 ? defaults.isInitiallyOpen : _ref$isInitiallyOpen,
|
70
73
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
71
74
|
|
75
|
+
var _useWebTerminal = (0, _hooks.useWebTerminal)(),
|
76
|
+
open = _useWebTerminal.open,
|
77
|
+
closeWebTerminal = _useWebTerminal.closeWebTerminal,
|
78
|
+
openWebTerminal = _useWebTerminal.openWebTerminal;
|
79
|
+
|
72
80
|
var _useState = (0, _react.useState)(open),
|
73
81
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
74
82
|
shouldRender = _useState2[0],
|
@@ -88,6 +96,16 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
88
96
|
setRender(true);
|
89
97
|
}
|
90
98
|
}, [open]);
|
99
|
+
/**
|
100
|
+
On render, check if user want's the web terminal to be open by default
|
101
|
+
*/
|
102
|
+
|
103
|
+
(0, _react.useEffect)(function () {
|
104
|
+
if (isInitiallyOpen) {
|
105
|
+
openWebTerminal();
|
106
|
+
}
|
107
|
+
}, []); // eslint-disable-line
|
108
|
+
|
91
109
|
/**
|
92
110
|
When the web terminal slide in animation is complete, sets render to false.
|
93
111
|
*/
|
@@ -107,7 +125,7 @@ var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
107
125
|
setRender(false);
|
108
126
|
}
|
109
127
|
|
110
|
-
|
128
|
+
closeWebTerminal();
|
111
129
|
};
|
112
130
|
|
113
131
|
return shouldRender ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, _objectSpread(_objectSpread({}, rest), (0, _devtools.getDevtoolsProps)(componentName)), {
|
@@ -192,23 +210,18 @@ WebTerminal.propTypes = {
|
|
192
210
|
*/
|
193
211
|
closeIconDescription: _propTypes.default.string.isRequired,
|
194
212
|
|
195
|
-
/**
|
196
|
-
* Function that should set the open prop to false
|
197
|
-
*/
|
198
|
-
closeTerminal: _propTypes.default.func.isRequired,
|
199
|
-
|
200
213
|
/**
|
201
214
|
* Array of objects for each documentation link. Each documentation link uses the prop types of OverflowMenuItems. See more: https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default
|
202
215
|
*/
|
203
216
|
documentationLinks: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread({}, _carbonComponentsReact.OverflowMenuItem.propTypes))),
|
204
217
|
|
205
218
|
/**
|
206
|
-
*
|
219
|
+
* Description for the documentation link overflow menu tooltip
|
207
220
|
*/
|
208
221
|
documentationLinksIconDescription: _propTypes.default.string,
|
209
222
|
|
210
223
|
/**
|
211
|
-
*
|
224
|
+
* Optionally pass if the web terminal should be open by default
|
212
225
|
*/
|
213
|
-
|
226
|
+
isInitiallyOpen: _propTypes.default.bool
|
214
227
|
};
|
@@ -21,18 +21,23 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
21
|
|
22
22
|
var _settings = require("../../settings");
|
23
23
|
|
24
|
-
var
|
24
|
+
var _hooks = require("./hooks");
|
25
|
+
|
26
|
+
var _excluded = ["children"];
|
25
27
|
// The block part of our conventional BEM class names (blockClass__E--M).
|
26
28
|
var componentName = 'WebTerminalContentWrapper';
|
27
29
|
var blockClass = "".concat(_settings.pkg.prefix, "--web-terminal-content-wrapper");
|
28
30
|
|
29
31
|
var WebTerminalContentWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
30
32
|
var children = _ref.children,
|
31
|
-
isTerminalOpen = _ref.isTerminalOpen,
|
32
33
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
34
|
+
|
35
|
+
var _useWebTerminal = (0, _hooks.useWebTerminal)(),
|
36
|
+
open = _useWebTerminal.open;
|
37
|
+
|
33
38
|
return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
|
34
39
|
ref: ref,
|
35
|
-
className: (0, _classnames.default)([blockClass, (0, _defineProperty2.default)({}, "".concat(blockClass, "--open"),
|
40
|
+
className: (0, _classnames.default)([blockClass, (0, _defineProperty2.default)({}, "".concat(blockClass, "--open"), open)])
|
36
41
|
}, rest), children);
|
37
42
|
}); // Return a placeholder if not released and not enabled by feature flag
|
38
43
|
|
@@ -49,10 +54,5 @@ WebTerminalContentWrapper.propTypes = {
|
|
49
54
|
/**
|
50
55
|
* Pass in content as children.
|
51
56
|
*/
|
52
|
-
children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired
|
53
|
-
|
54
|
-
/**
|
55
|
-
* A boolean to determine if the terminal is open.
|
56
|
-
*/
|
57
|
-
isTerminalOpen: _propTypes.default.bool.isRequired
|
57
|
+
children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired
|
58
58
|
};
|
@@ -0,0 +1,69 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
6
|
+
|
7
|
+
Object.defineProperty(exports, "__esModule", {
|
8
|
+
value: true
|
9
|
+
});
|
10
|
+
exports.useWebTerminal = exports.WebTerminalProvider = exports.WebTerminalContext = void 0;
|
11
|
+
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
13
|
+
|
14
|
+
var _react = _interopRequireWildcard(require("react"));
|
15
|
+
|
16
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
17
|
+
|
18
|
+
var _settings = require("../../../settings");
|
19
|
+
|
20
|
+
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); }
|
21
|
+
|
22
|
+
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; }
|
23
|
+
|
24
|
+
var WebTerminalContext = /*#__PURE__*/(0, _react.createContext)();
|
25
|
+
exports.WebTerminalContext = WebTerminalContext;
|
26
|
+
var componentName = 'WebTerminalProvider';
|
27
|
+
|
28
|
+
var WebTerminalProvider = function WebTerminalProvider(_ref) {
|
29
|
+
var children = _ref.children;
|
30
|
+
|
31
|
+
var _useState = (0, _react.useState)(false),
|
32
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
33
|
+
open = _useState2[0],
|
34
|
+
setOpen = _useState2[1];
|
35
|
+
|
36
|
+
var openWebTerminal = (0, _react.useCallback)(function () {
|
37
|
+
return setOpen(true);
|
38
|
+
}, []);
|
39
|
+
var closeWebTerminal = (0, _react.useCallback)(function () {
|
40
|
+
return setOpen(false);
|
41
|
+
}, []);
|
42
|
+
var toggleWebTerminal = (0, _react.useCallback)(function () {
|
43
|
+
return setOpen(!open);
|
44
|
+
}, [open]);
|
45
|
+
return /*#__PURE__*/_react.default.createElement(WebTerminalContext.Provider, {
|
46
|
+
value: {
|
47
|
+
open: open,
|
48
|
+
openWebTerminal: openWebTerminal,
|
49
|
+
closeWebTerminal: closeWebTerminal,
|
50
|
+
toggleWebTerminal: toggleWebTerminal
|
51
|
+
}
|
52
|
+
}, children);
|
53
|
+
}; // Return a placeholder if not released and not enabled by feature flag
|
54
|
+
|
55
|
+
|
56
|
+
exports.WebTerminalProvider = WebTerminalProvider;
|
57
|
+
exports.WebTerminalProvider = WebTerminalProvider = _settings.pkg.checkComponentEnabled(WebTerminalProvider, componentName);
|
58
|
+
WebTerminalProvider.propTypes = {
|
59
|
+
/**
|
60
|
+
* Provide your own terminal component as children to show up in the web terminal
|
61
|
+
*/
|
62
|
+
children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired
|
63
|
+
}; // Custom hook that exposes the provided value from context
|
64
|
+
|
65
|
+
var useWebTerminal = function useWebTerminal() {
|
66
|
+
return (0, _react.useContext)(WebTerminalContext);
|
67
|
+
};
|
68
|
+
|
69
|
+
exports.useWebTerminal = useWebTerminal;
|
@@ -15,7 +15,21 @@ Object.defineProperty(exports, "WebTerminalContentWrapper", {
|
|
15
15
|
return _WebTerminalContentWrapper.WebTerminalContentWrapper;
|
16
16
|
}
|
17
17
|
});
|
18
|
+
Object.defineProperty(exports, "WebTerminalProvider", {
|
19
|
+
enumerable: true,
|
20
|
+
get: function get() {
|
21
|
+
return _hooks.WebTerminalProvider;
|
22
|
+
}
|
23
|
+
});
|
24
|
+
Object.defineProperty(exports, "useWebTerminal", {
|
25
|
+
enumerable: true,
|
26
|
+
get: function get() {
|
27
|
+
return _hooks.useWebTerminal;
|
28
|
+
}
|
29
|
+
});
|
18
30
|
|
19
31
|
var _WebTerminal = require("./WebTerminal");
|
20
32
|
|
21
|
-
var _WebTerminalContentWrapper = require("./WebTerminalContentWrapper");
|
33
|
+
var _WebTerminalContentWrapper = require("./WebTerminalContentWrapper");
|
34
|
+
|
35
|
+
var _hooks = require("./hooks");
|
@@ -13,10 +13,12 @@ var _carbonComponentsReact = require("carbon-components-react");
|
|
13
13
|
|
14
14
|
var _iconsReact = require("@carbon/icons-react");
|
15
15
|
|
16
|
-
var
|
16
|
+
var _hooks = require("../hooks");
|
17
|
+
|
18
|
+
var Navigation = function Navigation() {
|
19
|
+
var _useWebTerminal = (0, _hooks.useWebTerminal)(),
|
20
|
+
openWebTerminal = _useWebTerminal.openWebTerminal;
|
17
21
|
|
18
|
-
var Navigation = function Navigation(_ref) {
|
19
|
-
var openTerminal = _ref.openTerminal;
|
20
22
|
return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Header, {
|
21
23
|
"aria-label": "IBM Platform Name"
|
22
24
|
}, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderName, {
|
@@ -24,7 +26,7 @@ var Navigation = function Navigation(_ref) {
|
|
24
26
|
prefix: "IBM"
|
25
27
|
}, "[Platform]"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalBar, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalAction, {
|
26
28
|
"aria-label": "Web terminal",
|
27
|
-
onClick:
|
29
|
+
onClick: openWebTerminal
|
28
30
|
}, /*#__PURE__*/_react.default.createElement(_iconsReact.Terminal20, null)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.HeaderGlobalAction, {
|
29
31
|
"aria-label": "Search",
|
30
32
|
onClick: function onClick() {}
|
@@ -34,11 +36,5 @@ var Navigation = function Navigation(_ref) {
|
|
34
36
|
}, /*#__PURE__*/_react.default.createElement(_iconsReact.User20, null))));
|
35
37
|
};
|
36
38
|
|
37
|
-
Navigation.propTypes = {
|
38
|
-
/**
|
39
|
-
* Opens the terminal
|
40
|
-
*/
|
41
|
-
openTerminal: _propTypes.default.func.isRequired
|
42
|
-
};
|
43
39
|
var _default = Navigation;
|
44
40
|
exports.default = _default;
|
package/lib/components/index.js
CHANGED
@@ -321,6 +321,12 @@ Object.defineProperty(exports, "WebTerminalContentWrapper", {
|
|
321
321
|
return _WebTerminal.WebTerminalContentWrapper;
|
322
322
|
}
|
323
323
|
});
|
324
|
+
Object.defineProperty(exports, "WebTerminalProvider", {
|
325
|
+
enumerable: true,
|
326
|
+
get: function get() {
|
327
|
+
return _WebTerminal.WebTerminalProvider;
|
328
|
+
}
|
329
|
+
});
|
324
330
|
Object.defineProperty(exports, "useActionsColumn", {
|
325
331
|
enumerable: true,
|
326
332
|
get: function get() {
|
@@ -405,6 +411,12 @@ Object.defineProperty(exports, "useStickyColumn", {
|
|
405
411
|
return _Datagrid.useStickyColumn;
|
406
412
|
}
|
407
413
|
});
|
414
|
+
Object.defineProperty(exports, "useWebTerminal", {
|
415
|
+
enumerable: true,
|
416
|
+
get: function get() {
|
417
|
+
return _WebTerminal.useWebTerminal;
|
418
|
+
}
|
419
|
+
});
|
408
420
|
|
409
421
|
var _AboutModal = require("./AboutModal");
|
410
422
|
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "1.
|
4
|
+
"version": "1.25.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -50,9 +50,9 @@
|
|
50
50
|
"upgrade-dependencies": "npm-check-updates -u --dep dev,peer,prod --color --reject '/(carbon|^react$|^react-dom$|^chalk$|^react-dnd|^namor)/'"
|
51
51
|
},
|
52
52
|
"devDependencies": {
|
53
|
-
"@babel/cli": "^7.18.
|
54
|
-
"@babel/core": "^7.18.
|
55
|
-
"babel-preset-ibm-cloud-cognitive": "^0.14.
|
53
|
+
"@babel/cli": "^7.18.10",
|
54
|
+
"@babel/core": "^7.18.10",
|
55
|
+
"babel-preset-ibm-cloud-cognitive": "^0.14.18",
|
56
56
|
"chalk": "^4.1.2",
|
57
57
|
"change-case": "^4.1.2",
|
58
58
|
"copyfiles": "^2.4.1",
|
@@ -60,17 +60,17 @@
|
|
60
60
|
"fs-extra": "^10.1.0",
|
61
61
|
"glob": "^8.0.3",
|
62
62
|
"jest": "^28.1.3",
|
63
|
-
"jest-config-ibm-cloud-cognitive": "^0.24.
|
63
|
+
"jest-config-ibm-cloud-cognitive": "^0.24.3",
|
64
64
|
"jest-environment-jsdom": "^28.1.3",
|
65
65
|
"namor": "^1.1.2",
|
66
|
-
"npm-check-updates": "^
|
66
|
+
"npm-check-updates": "^16.0.5",
|
67
67
|
"npm-run-all": "^4.1.5",
|
68
68
|
"rimraf": "^3.0.2",
|
69
|
-
"sass": "^1.
|
69
|
+
"sass": "^1.54.0",
|
70
70
|
"yargs": "^17.5.1"
|
71
71
|
},
|
72
72
|
"dependencies": {
|
73
|
-
"@babel/runtime": "^7.18.
|
73
|
+
"@babel/runtime": "^7.18.9",
|
74
74
|
"@carbon/telemetry": "^0.1.0",
|
75
75
|
"immutability-helper": "^3.1.1",
|
76
76
|
"react-dnd": "^15.1.2",
|
@@ -88,10 +88,10 @@
|
|
88
88
|
"@carbon/themes": "^10.54.0",
|
89
89
|
"@carbon/type": "^10.44.0",
|
90
90
|
"carbon-components": "^10.57.2",
|
91
|
-
"carbon-components-react": "^7.57.
|
91
|
+
"carbon-components-react": "^7.57.4",
|
92
92
|
"carbon-icons": "^7.0.7",
|
93
93
|
"react": "^16.8.6 || ^17.0.1",
|
94
94
|
"react-dom": "^16.8.6 || ^17.0.1"
|
95
95
|
},
|
96
|
-
"gitHead": "
|
96
|
+
"gitHead": "821225dec46fc7aea18751433a39ddc0c76ad2da"
|
97
97
|
}
|
@@ -21,20 +21,30 @@
|
|
21
21
|
.#{$block-class} {
|
22
22
|
color: $text-01;
|
23
23
|
|
24
|
-
.#{$block-class}__header
|
25
|
-
|
26
|
-
|
24
|
+
.#{$block-class}__header {
|
25
|
+
@include carbon--type-style('productive-heading-03');
|
26
|
+
// stylelint-disable-next-line carbon/layout-token-use
|
27
|
+
padding-bottom: calc($spacing-01 + $spacing-02);
|
27
28
|
margin: 0;
|
28
29
|
}
|
30
|
+
.#{$block-class}__subtitle {
|
31
|
+
@include carbon--type-style('body-long-01');
|
32
|
+
|
33
|
+
padding-bottom: $spacing-05;
|
34
|
+
}
|
29
35
|
.#{$block-class}__header--small {
|
30
|
-
@include carbon--type-style('
|
36
|
+
@include carbon--type-style('body-short-02');
|
37
|
+
|
38
|
+
padding-bottom: $spacing-03;
|
31
39
|
}
|
32
40
|
.#{$block-class}__subtitle--small {
|
33
|
-
@include carbon--type-style('
|
41
|
+
@include carbon--type-style('caption-01');
|
34
42
|
}
|
35
43
|
}
|
36
44
|
|
37
45
|
.#{$block-class}__illustration {
|
46
|
+
height: auto;
|
47
|
+
margin-bottom: $spacing-05;
|
38
48
|
&.#{$block-class}__illustration--lg {
|
39
49
|
min-width: $spacing-11;
|
40
50
|
max-width: $spacing-11;
|
@@ -45,12 +55,9 @@
|
|
45
55
|
}
|
46
56
|
}
|
47
57
|
|
48
|
-
.#{$block-class}__action-button,
|
49
|
-
.#{$block-class}__link {
|
50
|
-
margin-top: $spacing-06;
|
51
|
-
}
|
52
58
|
.#{$block-class} .#{$block-class}__action-button {
|
53
59
|
display: block;
|
60
|
+
margin-bottom: $spacing-05;
|
54
61
|
}
|
55
62
|
.#{$block-class} .#{$block-class}__link {
|
56
63
|
display: block;
|