@carbon/ibm-products 2.0.0 → 2.1.0

package/lib/components/Toolbar/ToolbarGroup.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarGroup = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _settings = require("../../settings");
+var _Toolbar = require("./Toolbar");
+var _excluded = ["className", "children"];
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+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); }
+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; }
+/** Toolbar groups organize the commands within a toolbar into related groups. */
+var ToolbarGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    ref: ref,
+    className: (0, _classnames.default)("".concat(_Toolbar.blockClass, "__group"), className)
+  }), children);
+});
+exports.ToolbarGroup = ToolbarGroup;
+var componentName = 'ToolbarGroup';
+ToolbarGroup.displayName = componentName;
+ToolbarGroup.propTypes = {
+  /** Provide the content of the `ToolbarGroup` */
+  children: _propTypes.node.isRequired,
+  /** Provide an optional class to be applied to the containing node */
+  className: _propTypes.string
+};
+exports.ToolbarGroup = ToolbarGroup = _settings.pkg.checkComponentEnabled(ToolbarGroup, componentName);

package/lib/components/Toolbar/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Toolbar", {
+  enumerable: true,
+  get: function get() {
+    return _Toolbar.Toolbar;
+  }
+});
+Object.defineProperty(exports, "ToolbarButton", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarButton.ToolbarButton;
+  }
+});
+Object.defineProperty(exports, "ToolbarGroup", {
+  enumerable: true,
+  get: function get() {
+    return _ToolbarGroup.ToolbarGroup;
+  }
+});
+var _Toolbar = require("./Toolbar");
+var _ToolbarButton = require("./ToolbarButton");
+var _ToolbarGroup = require("./ToolbarGroup");

package/lib/components/UserProfileImage/UserProfileImage.js

@@ -0,0 +1,191 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UserProfileImage = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _devtools = require("../../global/js/utils/devtools");
+require("../../global/js/utils/props-helper");
+var _settings = require("../../settings");
+var _icons = require("@carbon/react/icons");
+var _react2 = require("@carbon/react");
+var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Import portions of React that are needed.
+// Other standard imports.
+// Carbon and package components we use.
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--user-profile-image");
+var componentName = 'UserProfileImage';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values for props
+var defaults = {
+  tooltipAlignment: 'bottom'
+};
+/**
+ * This is a user profile image component which displays an image, or initials or icon for a user.
+ */
+var UserProfileImage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var backgroundColor = _ref.backgroundColor,
+    className = _ref.className,
+    kind = _ref.kind,
+    icon = _ref.icon,
+    initials = _ref.initials,
+    image = _ref.image,
+    imageDescription = _ref.imageDescription,
+    size = _ref.size,
+    theme = _ref.theme,
+    tooltipText = _ref.tooltipText,
+    _ref$tooltipAlignment = _ref.tooltipAlignment,
+    tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var icons = {
+    user: {
+      md: function md(props) {
+        return /*#__PURE__*/_react.default.createElement(_icons.User, (0, _extends2.default)({
+          size: 20
+        }, props));
+      },
+      lg: function lg(props) {
+        return /*#__PURE__*/_react.default.createElement(_icons.User, (0, _extends2.default)({
+          size: 24
+        }, props));
+      },
+      xl: function xl(props) {
+        return /*#__PURE__*/_react.default.createElement(_icons.User, (0, _extends2.default)({
+          size: 32
+        }, props));
+      }
+    },
+    group: {
+      md: function md(props) {
+        return /*#__PURE__*/_react.default.createElement(_icons.Group, (0, _extends2.default)({
+          size: 20
+        }, props));
+      },
+      lg: function lg(props) {
+        return /*#__PURE__*/_react.default.createElement(_icons.Group, (0, _extends2.default)({
+          size: 24
+        }, props));
+      },
+      xl: function xl(props) {
+        return /*#__PURE__*/_react.default.createElement(_icons.Group, (0, _extends2.default)({
+          size: 32
+        }, props));
+      }
+    }
+  };
+  var formatInitials = function formatInitials() {
+    if (initials.length === 2) {
+      return initials;
+    }
+    // RegEx takes in the display name and returns the first and last initials. Thomas Watson and Thomas J. Watson
+    // both return JW.
+    return initials.match(/(^\S\S?|\b\S)?/g).join('').match(/(^\S|\S$)?/g).join('').toUpperCase();
+  };
+  var getFillItem = function getFillItem() {
+    if (image) {
+      return function () {
+        return /*#__PURE__*/_react.default.createElement("img", {
+          alt: imageDescription,
+          src: image,
+          className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
+        });
+      };
+    }
+    if (initials) {
+      return formatInitials;
+    }
+    if (kind && size) {
+      return icons[kind][size];
+    }
+    return icon;
+  };
+
+  // if user doesn't provide a color just generate a random one
+  var getRandomColor = function getRandomColor() {
+    var colors = ['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal'];
+    return colors[Math.floor(Math.random() * colors.length)];
+  };
+  var FillItem = getFillItem();
+  var renderUserProfileImage = function renderUserProfileImage() {
+    return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+      ref: ref,
+      className: (0, _classnames.default)([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
+    }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(FillItem, null));
+  };
+  return FillItem && (tooltipText ? /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+    label: tooltipText,
+    className: "".concat(blockClass, "__tooltip"),
+    kind: "ghost",
+    align: tooltipAlignment
+  }, renderUserProfileImage()) : renderUserProfileImage());
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.UserProfileImage = UserProfileImage;
+exports.UserProfileImage = UserProfileImage = _settings.pkg.checkComponentEnabled(UserProfileImage, componentName);
+UserProfileImage.displayName = componentName;
+UserProfileImage.propTypes = {
+  /**
+   * The background color passed should match one of the background colors in the library documentation:
+   * https://pages.github.ibm.com/cdai-design/pal/patterns/user-profile-images/
+   */
+  backgroundColor: _propTypes.default.oneOf(['light-cyan', 'dark-cyan', 'light-gray', 'dark-gray', 'light-green', 'dark-green', 'light-magenta', 'dark-magenta', 'light-purple', 'dark-purple', 'light-teal', 'dark-teal']),
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * Provide a custom icon to use if you need to use an icon other than the included ones
+   */
+  icon: _propTypes.default.func,
+  /**
+   * When passing the image prop, supply a full path to the image to be displayed.
+   */
+  image: _propTypes.default.string,
+  /**
+   * When passing the image prop use the imageDescription prop to describe the image for screen reader.
+   */
+  imageDescription: _propTypes.default.string.isRequired.if(function (_ref2) {
+    var image = _ref2.image;
+    return !!image;
+  }),
+  /**
+   * When passing the initials prop, either send the initials to be used or the user's display name. The first two capital letters of the display name will be used as the initials.
+   */
+  initials: _propTypes.default.string,
+  /**
+   * When passing the kind prop, use either "user" or "group". The values match up to the Carbon Library icons.
+   */
+  kind: _propTypes.default.oneOf(['user', 'group']),
+  /**
+   * Set the size of the avatar circle
+   */
+  size: _propTypes.default.oneOf(['xl', 'lg', 'md']).isRequired,
+  /**
+   * Set theme in which the component will be rendered
+   */
+  theme: _propTypes.default.oneOf(['light', 'dark']).isRequired,
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  tooltipAlignment: _propTypes.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  /**
+   * Pass in the display name to have it shown on hover
+   */
+  tooltipText: _propTypes.default.string
+};

package/lib/components/UserProfileImage/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "UserProfileImage", {
+  enumerable: true,
+  get: function get() {
+    return _UserProfileImage.UserProfileImage;
+  }
+});
+var _UserProfileImage = require("./UserProfileImage");

package/lib/components/WebTerminal/WebTerminal.js

@@ -0,0 +1,212 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WebTerminal = void 0;
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _settings = require("../../settings");
+var _icons = require("@carbon/react/icons");
+var _react2 = require("@carbon/react");
+var _motion = require("@carbon/motion");
+var _hooks = require("./hooks");
+var _devtools = require("../../global/js/utils/devtools");
+var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen"];
+/**
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Import portions of React that are needed.
+// Other standard imports.
+// Carbon and package components we use.
+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); }
+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; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// The block part of our conventional BEM class names (blockClass__E--M).
+var componentName = 'WebTerminal';
+var blockClass = "".concat(_settings.pkg.prefix, "--web-terminal");
+
+// Default values for props
+var defaults = {
+  actions: Object.freeze([]),
+  documentationLinks: Object.freeze([]),
+  documentationLinksIconDescription: 'Show documentation links',
+  isInitiallyOpen: false
+};
+var WebTerminal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var _ref3;
+  var _ref$actions = _ref.actions,
+    actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
+    children = _ref.children,
+    className = _ref.className,
+    closeIconDescription = _ref.closeIconDescription,
+    _ref$documentationLin = _ref.documentationLinks,
+    documentationLinks = _ref$documentationLin === void 0 ? defaults.documentationLinks : _ref$documentationLin,
+    _ref$documentationLin2 = _ref.documentationLinksIconDescription,
+    documentationLinksIconDescription = _ref$documentationLin2 === void 0 ? defaults.documentationLinksIconDescription : _ref$documentationLin2,
+    _ref$isInitiallyOpen = _ref.isInitiallyOpen,
+    isInitiallyOpen = _ref$isInitiallyOpen === void 0 ? defaults.isInitiallyOpen : _ref$isInitiallyOpen,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useWebTerminal = (0, _hooks.useWebTerminal)(),
+    open = _useWebTerminal.open,
+    closeWebTerminal = _useWebTerminal.closeWebTerminal,
+    openWebTerminal = _useWebTerminal.openWebTerminal;
+  var _useState = (0, _react.useState)(open),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    shouldRender = _useState2[0],
+    setRender = _useState2[1];
+  var _ref2 = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
+      matches: true
+    },
+    prefersReducedMotion = _ref2.matches;
+  var webTerminalAnimationName = "".concat(open ? 'web-terminal-entrance' : 'web-terminal-exit', " ").concat(_motion.moderate02);
+  var showDocumentationLinks = (0, _react.useMemo)(function () {
+    return documentationLinks.length > 0;
+  }, [documentationLinks]);
+  (0, _react.useEffect)(function () {
+    if (open) {
+      setRender(true);
+    }
+  }, [open]);
+
+  /**
+    On render, check if user want's the web terminal to be open by default
+  */
+  (0, _react.useEffect)(function () {
+    if (isInitiallyOpen) {
+      openWebTerminal();
+    }
+  }, []); // eslint-disable-line
+
+  /**
+    When the web terminal slide in animation is complete, sets render to false.
+  */
+  var onAnimationEnd = function onAnimationEnd() {
+    if (!open) {
+      setRender(false);
+    }
+  };
+  var handleCloseTerminal = function handleCloseTerminal() {
+    /**
+      If the user prefers reduced motion, we have to manually set render to false
+      because onAnimationEnd will never be called.
+    */
+    if (prefersReducedMotion) {
+      setRender(false);
+    }
+    closeWebTerminal();
+  };
+  return shouldRender ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, _objectSpread(_objectSpread({}, rest), (0, _devtools.getDevtoolsProps)(componentName)), {
+    ref: ref,
+    className: (0, _classnames.default)([blockClass, className, (_ref3 = {}, (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "--open"), open), (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "--closed"), !open), _ref3)]),
+    style: {
+      animation: !prefersReducedMotion && webTerminalAnimationName
+    },
+    onAnimationEnd: onAnimationEnd
+  }), /*#__PURE__*/_react.default.createElement("header", {
+    className: "".concat(blockClass, "__bar")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__actions")
+  }, showDocumentationLinks && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_icons.Help, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
+    iconDescription: documentationLinksIconDescription,
+    "aria-label": documentationLinksIconDescription,
+    menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
+    size: "lg"
+  }, documentationLinks.map(function (_ref4, i) {
+    var rest = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_ref4), _ref4));
+    return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, (0, _extends2.default)({
+      key: i
+    }, rest));
+  })), actions.map(function (_ref5) {
+    var renderIcon = _ref5.renderIcon,
+      onClick = _ref5.onClick,
+      iconDescription = _ref5.iconDescription;
+    return /*#__PURE__*/_react.default.createElement(_react2.Button, {
+      key: iconDescription,
+      hasIconOnly: true,
+      renderIcon: renderIcon,
+      onClick: onClick,
+      iconDescription: iconDescription,
+      kind: "ghost",
+      "aria-label": iconDescription
+    });
+  })), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    hasIconOnly: true,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_icons.Close, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
+    kind: "ghost",
+    iconDescription: closeIconDescription,
+    onClick: handleCloseTerminal,
+    onAnimationEnd: function onAnimationEnd(event) {
+      return event.stopPropagation();
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__body")
+  }, children)) : null;
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.WebTerminal = WebTerminal;
+exports.WebTerminal = WebTerminal = _settings.pkg.checkComponentEnabled(WebTerminal, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+WebTerminal.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+WebTerminal.propTypes = {
+  /**
+   * An array of actions to be displayed in the web terminal header bar
+   */
+  actions: _propTypes.default.arrayOf(_propTypes.default.shape({
+    renderIcon: _propTypes.default.func.isRequired,
+    onClick: _propTypes.default.func.isRequired,
+    iconDescription: _propTypes.default.string.isRequired
+  })),
+  /**
+   * Provide your own terminal component as children to show up in the web terminal
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
+  /**
+   * Custom classname for additional styling of the web terminal
+   */
+  className: _propTypes.default.string,
+  /**
+   * Icon description for the close button
+   */
+  closeIconDescription: _propTypes.default.string.isRequired,
+  /**
+   * 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
+   */
+  documentationLinks: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread({}, _react2.OverflowMenuItem.propTypes))),
+  /**
+   * Description for the documentation link overflow menu tooltip
+   */
+  documentationLinksIconDescription: _propTypes.default.string,
+  /**
+   * Optionally pass if the web terminal should be open by default
+   */
+  isInitiallyOpen: _propTypes.default.bool
+};

package/lib/components/WebTerminal/WebTerminalContentWrapper.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WebTerminalContentWrapper = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _settings = require("../../settings");
+var _hooks = require("./hooks");
+var _excluded = ["children"];
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Import portions of React that are needed.
+// Other standard imports.
+// The block part of our conventional BEM class names (blockClass__E--M).
+var componentName = 'WebTerminalContentWrapper';
+var blockClass = "".concat(_settings.pkg.prefix, "--web-terminal-content-wrapper");
+var WebTerminalContentWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useWebTerminal = (0, _hooks.useWebTerminal)(),
+    open = _useWebTerminal.open;
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: ref,
+    className: (0, _classnames.default)([blockClass, (0, _defineProperty2.default)({}, "".concat(blockClass, "--open"), open)])
+  }, rest), children);
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.WebTerminalContentWrapper = WebTerminalContentWrapper;
+exports.WebTerminalContentWrapper = WebTerminalContentWrapper = _settings.pkg.checkComponentEnabled(WebTerminalContentWrapper, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+WebTerminalContentWrapper.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+WebTerminalContentWrapper.propTypes = {
+  /**
+   * Pass in content as children.
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired
+};

package/lib/components/WebTerminal/hooks/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWebTerminal = exports.WebTerminalProvider = exports.WebTerminalContext = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _settings = require("../../../settings");
+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); }
+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; }
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+var WebTerminalContext = /*#__PURE__*/(0, _react.createContext)();
+exports.WebTerminalContext = WebTerminalContext;
+var componentName = 'WebTerminalProvider';
+var WebTerminalProvider = function WebTerminalProvider(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var openWebTerminal = (0, _react.useCallback)(function () {
+    return setOpen(true);
+  }, []);
+  var closeWebTerminal = (0, _react.useCallback)(function () {
+    return setOpen(false);
+  }, []);
+  var toggleWebTerminal = (0, _react.useCallback)(function () {
+    return setOpen(!open);
+  }, [open]);
+  return /*#__PURE__*/_react.default.createElement(WebTerminalContext.Provider, {
+    value: {
+      open: open,
+      openWebTerminal: openWebTerminal,
+      closeWebTerminal: closeWebTerminal,
+      toggleWebTerminal: toggleWebTerminal
+    }
+  }, children);
+};
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.WebTerminalProvider = WebTerminalProvider;
+exports.WebTerminalProvider = WebTerminalProvider = _settings.pkg.checkComponentEnabled(WebTerminalProvider, componentName);
+WebTerminalProvider.propTypes = {
+  /**
+   * Provide your own terminal component as children to show up in the web terminal
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired
+};
+
+// Custom hook that exposes the provided value from context
+var useWebTerminal = function useWebTerminal() {
+  return (0, _react.useContext)(WebTerminalContext);
+};
+exports.useWebTerminal = useWebTerminal;

package/lib/components/WebTerminal/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "WebTerminal", {
+  enumerable: true,
+  get: function get() {
+    return _WebTerminal.WebTerminal;
+  }
+});
+Object.defineProperty(exports, "WebTerminalContentWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _WebTerminalContentWrapper.WebTerminalContentWrapper;
+  }
+});
+Object.defineProperty(exports, "WebTerminalProvider", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.WebTerminalProvider;
+  }
+});
+Object.defineProperty(exports, "useWebTerminal", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useWebTerminal;
+  }
+});
+var _WebTerminal = require("./WebTerminal");
+var _WebTerminalContentWrapper = require("./WebTerminalContentWrapper");
+var _hooks = require("./hooks");