@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.
Files changed (36) hide show
  1. package/css/index-full-carbon.css +26 -15
  2. package/css/index-full-carbon.css.map +1 -1
  3. package/css/index-full-carbon.min.css +1 -1
  4. package/css/index-full-carbon.min.css.map +1 -1
  5. package/css/index-without-carbon-released-only.css +26 -15
  6. package/css/index-without-carbon-released-only.css.map +1 -1
  7. package/css/index-without-carbon-released-only.min.css +1 -1
  8. package/css/index-without-carbon-released-only.min.css.map +1 -1
  9. package/css/index-without-carbon.css +26 -15
  10. package/css/index-without-carbon.css.map +1 -1
  11. package/css/index-without-carbon.min.css +1 -1
  12. package/css/index-without-carbon.min.css.map +1 -1
  13. package/css/index.css +26 -15
  14. package/css/index.css.map +1 -1
  15. package/css/index.min.css +1 -1
  16. package/css/index.min.css.map +1 -1
  17. package/es/components/EmptyStates/EmptyStateContent.js +2 -1
  18. package/es/components/ImportModal/ImportModal.js +10 -2
  19. package/es/components/WebTerminal/WebTerminal.js +25 -13
  20. package/es/components/WebTerminal/WebTerminalContentWrapper.js +8 -10
  21. package/es/components/WebTerminal/hooks/index.js +45 -0
  22. package/es/components/WebTerminal/index.js +2 -1
  23. package/es/components/WebTerminal/preview-components/Navigation.js +6 -10
  24. package/es/components/index.js +1 -1
  25. package/es/global/js/package-settings.js +1 -0
  26. package/lib/components/EmptyStates/EmptyStateContent.js +2 -1
  27. package/lib/components/ImportModal/ImportModal.js +11 -2
  28. package/lib/components/WebTerminal/WebTerminal.js +26 -13
  29. package/lib/components/WebTerminal/WebTerminalContentWrapper.js +9 -9
  30. package/lib/components/WebTerminal/hooks/index.js +69 -0
  31. package/lib/components/WebTerminal/index.js +15 -1
  32. package/lib/components/WebTerminal/preview-components/Navigation.js +6 -10
  33. package/lib/components/index.js +12 -0
  34. package/lib/global/js/package-settings.js +1 -0
  35. package/package.json +10 -10
  36. 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", "isTerminalOpen"];
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'; // The block part of our conventional BEM class names (blockClass__E--M).
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"), isTerminalOpen)])
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,2 +1,3 @@
1
1
  export { WebTerminal } from './WebTerminal';
2
- export { WebTerminalContentWrapper } from './WebTerminalContentWrapper';
2
+ export { WebTerminalContentWrapper } from './WebTerminalContentWrapper';
3
+ export { useWebTerminal, WebTerminalProvider } from './hooks';
@@ -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 PropTypes from 'prop-types';
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: openTerminal
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;
@@ -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';
@@ -62,6 +62,7 @@ var defaults = {
62
62
  ToolbarGroup: false,
63
63
  WebTerminal: false,
64
64
  WebTerminalContentWrapper: false,
65
+ WebTerminalProvider: false,
65
66
  EditSidePanel: false,
66
67
  CancelableTextEdit: false,
67
68
  DataSpreadsheet: false,
@@ -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", "closeTerminal", "documentationLinks", "documentationLinksIconDescription", "open"];
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
- open = _ref.open,
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
- closeTerminal();
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
- * Icon description for the documentation link overflow menu
219
+ * Description for the documentation link overflow menu tooltip
207
220
  */
208
221
  documentationLinksIconDescription: _propTypes.default.string,
209
222
 
210
223
  /**
211
- * Boolean that determines if the web terminal is opened or closed
224
+ * Optionally pass if the web terminal should be open by default
212
225
  */
213
- open: _propTypes.default.bool.isRequired
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 _excluded = ["children", "isTerminalOpen"];
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"), isTerminalOpen)])
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 _propTypes = _interopRequireDefault(require("prop-types"));
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: openTerminal
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;
@@ -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
 
@@ -66,6 +66,7 @@ var defaults = {
66
66
  ToolbarGroup: false,
67
67
  WebTerminal: false,
68
68
  WebTerminalContentWrapper: false,
69
+ WebTerminalProvider: false,
69
70
  EditSidePanel: false,
70
71
  CancelableTextEdit: false,
71
72
  DataSpreadsheet: false,
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.24.0",
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.6",
54
- "@babel/core": "^7.18.6",
55
- "babel-preset-ibm-cloud-cognitive": "^0.14.17",
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.2",
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": "^15.3.3",
66
+ "npm-check-updates": "^16.0.5",
67
67
  "npm-run-all": "^4.1.5",
68
68
  "rimraf": "^3.0.2",
69
- "sass": "^1.53.0",
69
+ "sass": "^1.54.0",
70
70
  "yargs": "^17.5.1"
71
71
  },
72
72
  "dependencies": {
73
- "@babel/runtime": "^7.18.6",
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.3",
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": "e03a4b24cc558c658938d5a7f540ce4987a01fd5"
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
- .#{$block-class}__subtitle {
26
- padding-bottom: $spacing-02;
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('productive-heading-03');
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('body-short-01');
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;