@carbon/ibm-products 1.24.0 → 1.25.0

Sign up to get free protection for your applications and to get access to all the features.
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;