@carbon/ibm-products 1.0.0-rc.0 → 1.0.1

package/es/components/UserProfileImage/UserProfileImage.js

@@ -0,0 +1,136 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["backgroundColor", "className", "kind", "initials", "image", "imageDescription", "size", "theme", "tooltipText"];
+
+/**
+ * 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.
+import React from 'react'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import '../../global/js/utils/props-helper';
+import { pkg } from '../../settings'; // Carbon and package components we use.
+
+import { User20, User24, User32, Group20, Group24, Group32 } from '@carbon/icons-react';
+import { TooltipIcon } from 'carbon-components-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+
+var blockClass = "".concat(pkg.prefix, "--user-profile-image");
+var componentName = 'UserProfileImage'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+/**
+ * This is a user profile image component which displays an image, or initials or icon for a user.
+ */
+
+export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var backgroundColor = _ref.backgroundColor,
+      className = _ref.className,
+      kind = _ref.kind,
+      initials = _ref.initials,
+      image = _ref.image,
+      imageDescription = _ref.imageDescription,
+      size = _ref.size,
+      theme = _ref.theme,
+      tooltipText = _ref.tooltipText,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var icons = {
+    user: {
+      md: User20,
+      lg: User24,
+      xlg: User32
+    },
+    group: {
+      md: Group20,
+      lg: Group24,
+      xlg: Group32
+    }
+  };
+
+  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 FillItem = image ? function () {
+    return /*#__PURE__*/React.createElement("img", {
+      alt: imageDescription,
+      src: image,
+      className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
+    });
+  } : initials ? formatInitials : kind && size && icons[kind][size];
+
+  var renderUserProfileImage = function renderUserProfileImage() {
+    return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+      ref: ref,
+      className: cx([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor)])
+    }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(FillItem, null));
+  };
+
+  return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(TooltipIcon, {
+    tooltipText: tooltipText
+  }, renderUserProfileImage()) : renderUserProfileImage());
+}); // Return a placeholder if not released and not enabled by feature flag
+
+UserProfileImage = 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.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.string,
+
+  /**
+   * When passing the image prop, supply a full path to the image to be displayed.
+   */
+  image: PropTypes.string,
+
+  /**
+   * When passing the image prop use the imageDescription prop to describe the image for screen reader.
+   */
+  imageDescription: PropTypes.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.string,
+
+  /**
+   * When passing the kind prop, use either "user" or "group". The values match up to the Carbon Library icons.
+   */
+  kind: PropTypes.oneOf(['user', 'group']),
+
+  /**
+   * Set the size of the avatar circle
+   */
+  size: PropTypes.oneOf(['xlg', 'lg', 'md']).isRequired,
+
+  /**
+   * Set theme in which the component will be rendered
+   */
+  theme: PropTypes.oneOf(['light', 'dark']).isRequired,
+
+  /**
+   * Pass in the display name to have it shown on hover
+   */
+  tooltipText: PropTypes.string
+};

package/es/components/UserProfileImage/index.js

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+// NOTE: An index file is most useful when you have multiple components
+export { UserProfileImage } from './UserProfileImage';

package/es/components/WebTerminal/WebTerminal.js

@@ -0,0 +1,168 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "closeTerminal", "documentationLinks", "documentationLinksIconDescription", "open", "actions", "closeIconDescription"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/**
+ * Copyright IBM Corp. 2020, 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.
+import React, { useMemo, useState, useEffect } from 'react'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { pkg } from '../../settings'; // Carbon and package components we use.
+
+import { Close16 as Close, Help16 as Help } from '@carbon/icons-react';
+import { Button, OverflowMenu, OverflowMenuItem } from 'carbon-components-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+
+var componentName = 'WebTerminal';
+var blockClass = "".concat(pkg.prefix, "--web-terminal");
+export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref2;
+
+  var children = _ref.children,
+      className = _ref.className,
+      closeTerminal = _ref.closeTerminal,
+      documentationLinks = _ref.documentationLinks,
+      documentationLinksIconDescription = _ref.documentationLinksIconDescription,
+      open = _ref.open,
+      actions = _ref.actions,
+      closeIconDescription = _ref.closeIconDescription,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(open),
+      _useState2 = _slicedToArray(_useState, 2),
+      shouldRender = _useState2[0],
+      setRender = _useState2[1];
+
+  var showDocumentationLinks = useMemo(function () {
+    return documentationLinks.length > 0;
+  }, [documentationLinks]);
+  useEffect(function () {
+    if (open) {
+      setRender(true);
+    }
+  }, [open]);
+
+  var onAnimationEnd = function onAnimationEnd() {
+    if (!open) {
+      setRender(false);
+    }
+  };
+
+  return shouldRender ? /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    ref: ref,
+    className: cx([blockClass, (_ref2 = {}, _defineProperty(_ref2, "".concat(blockClass, "--open"), open), _defineProperty(_ref2, "".concat(blockClass, "--closed"), !open), _defineProperty(_ref2, className, className), _ref2)]),
+    style: {
+      animation: "".concat(open ? 'webTerminalEntrance 250ms' : 'webTerminalExit 250ms')
+    },
+    onAnimationEnd: onAnimationEnd
+  }), /*#__PURE__*/React.createElement("header", {
+    className: "".concat(blockClass, "__bar")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__actions")
+  }, showDocumentationLinks && /*#__PURE__*/React.createElement(OverflowMenu, {
+    renderIcon: Help,
+    iconDescription: documentationLinksIconDescription,
+    menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
+    size: "lg"
+  }, documentationLinks.map(function (_ref3, i) {
+    var rest = _extends({}, _ref3);
+
+    return /*#__PURE__*/React.createElement(OverflowMenuItem, _extends({
+      key: i
+    }, rest));
+  })), actions.map(function (_ref4) {
+    var renderIcon = _ref4.renderIcon,
+        onClick = _ref4.onClick,
+        iconDescription = _ref4.iconDescription;
+    return /*#__PURE__*/React.createElement(Button, {
+      key: iconDescription,
+      hasIconOnly: true,
+      renderIcon: renderIcon,
+      onClick: onClick,
+      iconDescription: iconDescription,
+      kind: "ghost"
+    });
+  })), /*#__PURE__*/React.createElement(Button, {
+    hasIconOnly: true,
+    renderIcon: Close,
+    kind: "ghost",
+    iconDescription: closeIconDescription,
+    onClick: closeTerminal
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__body")
+  }, children)) : null;
+}); // Return a placeholder if not released and not enabled by feature flag
+
+WebTerminal = 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.arrayOf(PropTypes.shape({
+    renderIcon: PropTypes.object.isRequired,
+    onClick: PropTypes.func.isRequired,
+    iconDescription: PropTypes.string.isRequired
+  })),
+
+  /**
+   * Provide your own terminal component as children to show up in the web terminal
+   */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+
+  /**
+   * Custom classname for additional styling of the web terminal
+   */
+  className: PropTypes.string,
+
+  /**
+   * Icon description for the close button
+   */
+  closeIconDescription: PropTypes.string.isRequired,
+
+  /**
+   * Function that should set the open prop to false
+   */
+  closeTerminal: PropTypes.func.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.arrayOf(PropTypes.shape(_objectSpread({}, OverflowMenuItem.propTypes))),
+
+  /**
+   * Icon description for the documentation link overflow menu
+   */
+  documentationLinksIconDescription: PropTypes.string,
+
+  /**
+   * Boolean that determines if the web terminal is opened or closed
+   */
+  open: PropTypes.bool.isRequired
+}; // Default values for component props. Default values are not required for
+// props that are required, nor for props where the component can apply
+// 'undefined' values reasonably. Default values should be provided when the
+// component needs to make a choice or assumption when a prop is not supplied.
+
+WebTerminal.defaultProps = {
+  actions: [],
+  documentationLinks: [],
+  documentationLinksIconDescription: 'Show documentation links',
+  className: ''
+};

package/es/components/WebTerminal/index.js

@@ -0,0 +1 @@
+export { WebTerminal } from './WebTerminal';

package/es/components/WebTerminal/preview-components/Navigation.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Header, HeaderName, HeaderGlobalAction, HeaderGlobalBar } from 'carbon-components-react';
+import { Terminal20 as Terminal, Search20 as Search, User20 as User } from '@carbon/icons-react';
+import PropTypes from 'prop-types';
+
+var Navigation = function Navigation(_ref) {
+  var openTerminal = _ref.openTerminal;
+  return /*#__PURE__*/React.createElement(Header, {
+    "aria-label": "IBM Platform Name"
+  }, /*#__PURE__*/React.createElement(HeaderName, {
+    href: "#",
+    prefix: "IBM"
+  }, "[Platform]"), /*#__PURE__*/React.createElement(HeaderGlobalBar, null, /*#__PURE__*/React.createElement(HeaderGlobalAction, {
+    "aria-label": "Web terminal",
+    onClick: openTerminal
+  }, /*#__PURE__*/React.createElement(Terminal, null)), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
+    "aria-label": "Search",
+    onClick: function onClick() {}
+  }, /*#__PURE__*/React.createElement(Search, null)), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
+    "aria-label": "User",
+    onClick: function onClick() {}
+  }, /*#__PURE__*/React.createElement(User, null))));
+};
+
+Navigation.propTypes = {
+  /**
+   * Opens the terminal
+   */
+  openTerminal: PropTypes.func.isRequired
+};
+export default Navigation;

package/es/components/WebTerminal/preview-components/documentationLinks.js

@@ -0,0 +1,25 @@
+export var documentationLinks = [{
+  itemText: 'BX/ICP docs',
+  href: '#',
+  onClick: function onClick() {
+    return console.log('clicked');
+  }
+}, {
+  itemText: 'Kubernetes docs',
+  href: '#',
+  onClick: function onClick() {
+    return console.log('clicked');
+  }
+}, {
+  itemText: 'Docker docs',
+  href: '#',
+  onClick: function onClick() {
+    return console.log('clicked');
+  }
+}, {
+  itemText: 'Helm docs',
+  href: '#',
+  onClick: function onClick() {
+    return console.log('clicked');
+  }
+}];

package/es/components/WebTerminal/preview-components/index.js

@@ -0,0 +1,5 @@
+/**
+ * Preview components are components only to be used
+ * in the context of storybook.
+ */
+export { default as Navigation } from './Navigation';

package/es/components/_Canary/Canary.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "componentName"];
+
+/**
+ * Copyright IBM Corp. 2020, 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.
+import React from 'react'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+import cx from 'classnames'; // load the package settings direct, because Canary is used by settings.js
+
+import pkg from '../../global/js/package-settings'; // Carbon and package components we use.
+
+import { CodeSnippet } from 'carbon-components-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+
+var blockClass = "".concat(pkg.prefix, "--canary");
+/**
+ *  Canary component used when the component requested is not yet production
+ */
+
+export var Canary = function Canary(_ref
+/*, originalArgs*/
+) {
+  var className = _ref.className,
+      componentName = _ref.componentName,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var instructions = "\nimport { pkg } from '@carbon/ibm-products';\n// NOTE: must happen before component is first used\npkg.component.".concat(componentName, " = true;\n");
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className)
+  }), /*#__PURE__*/React.createElement("h2", null, "This component ", /*#__PURE__*/React.createElement("strong", null, componentName), " is not ready yet."), /*#__PURE__*/React.createElement("p", null, "To enable it, initialize package flags before the component is first used."), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "e.g. in main.js"), /*#__PURE__*/React.createElement(CodeSnippet, {
+    type: "multi"
+  }, instructions), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("p", null, "View a live example on", ' ', /*#__PURE__*/React.createElement("a", {
+    href: "https://codesandbox.io/s/example-component-olif5?file=/src/config.js"
+  }, "codesandbox"), "."));
+};
+Canary.propTypes = {
+  /** Provide an optional class to be applied to the containing node */
+  className: PropTypes.string,
+
+  /** Name of the component that is not ready yet */
+  componentName: PropTypes.string.isRequired
+};

package/es/components/_Canary/index.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+export { Canary } from './Canary';

package/es/components/index.js

@@ -0,0 +1,37 @@
+//
+// Copyright IBM Corp. 2020, 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.
+//
+export { AboutModal } from './AboutModal';
+export { APIKeyModal } from './APIKeyModal';
+export { Cascade } from './Cascade';
+export { ComboButton, ComboButtonItem } from './ComboButton';
+export { CreateFullPage, CreateFullPageStep } from './CreateFullPage';
+export { CreateModal } from './CreateModal';
+export { CreateSidePanel } from './CreateSidePanel';
+export { CreateTearsheet, CreateTearsheetStep, CreateTearsheetDivider } from './CreateTearsheet';
+export { CreateTearsheetNarrow } from './CreateTearsheetNarrow';
+export { EmptyState, ErrorEmptyState, NoDataEmptyState, NoTagsEmptyState, NotFoundEmptyState, NotificationsEmptyState, UnauthorizedEmptyState } from './EmptyStates';
+export { ExampleComponent } from './ExampleComponent';
+export { ExportModal } from './ExportModal';
+export { ExpressiveCard } from './ExpressiveCard';
+export { HTTPError403, HTTPError404, HTTPErrorOther } from './HTTPErrors';
+export { ImportModal } from './ImportModal';
+export { LoadingBar } from './LoadingBar';
+export { ModifiedTabs } from './ModifiedTabs';
+export { NotificationsPanel } from './NotificationsPanel';
+export { PageHeader } from './PageHeader';
+export { ProductiveCard } from './ProductiveCard';
+export { RemoveModal } from './RemoveModal';
+export { Saving } from './Saving';
+export { SidePanel } from './SidePanel';
+export { StatusIcon } from './StatusIcon';
+export { TagSet } from './TagSet';
+export { Tearsheet, TearsheetNarrow } from './Tearsheet';
+export { Toolbar, ToolbarButton, ToolbarGroup } from './Toolbar';
+export { UserProfileImage } from './UserProfileImage';
+export { WebTerminal } from './WebTerminal';
+export { EditSidePanel } from './EditSidePanel';
+export { OptionsTile } from './OptionsTile';

package/es/generated/feature-flags/feature-flags.js

@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2020, 2020
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+// ******************************
+// *
+// * ONLY EDIT IN /common-files/feature-flags files elsewhere are copies
+// * created by a pre-commit step
+// *
+// ******************************
+export default {
+  'enable-css-custom-properties': false
+};

package/es/global/js/hooks/index.js

@@ -0,0 +1,14 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+export { useNearestScroll, useWindowScroll } from './useWindowScroll';
+export { useWindowResize } from './useWindowResize';
+export { useClickOutside } from './useClickOutside';
+export { useCreateComponentFocus } from './useCreateComponentFocus';
+export { useCreateComponentStepChange } from './useCreateComponentStepChange';
+export { usePreviousValue } from './usePreviousValue';
+export { useResetCreateComponent } from './useResetCreateComponent';
+export { useValidCreateStepCount } from './useValidCreateStepCount';

package/es/global/js/hooks/useClickOutside.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2020, 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 { useEffect } from 'react';
+export var useClickOutside = function useClickOutside(ref, callback) {
+  var handleClick = function handleClick(event) {
+    if (ref.current && !ref.current.contains(event.target)) {
+      callback();
+    }
+  };
+
+  useEffect(function () {
+    document.addEventListener('click', handleClick);
+    return function () {
+      document.removeEventListener('click', handleClick);
+    };
+  });
+};

package/es/global/js/hooks/useCreateComponentFocus.js

@@ -0,0 +1,37 @@
+/**
+ * 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 { useEffect } from 'react';
+import { getFocusableElements } from '../utils/getFocusableElements';
+/**
+ * Returns the previous state values included in the param
+ * @param {object} previousState
+ * @param {number} currentStep
+ * @param {Function} getCreateComponentSteps
+ * @param {string} componentBlockClass
+ */
+
+export var useCreateComponentFocus = function useCreateComponentFocus(previousState, currentStep, getCreateComponentSteps, componentBlockClass) {
+  useEffect(function () {
+    if ((previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== currentStep && currentStep > 0) {
+      var visibleStepInnerContent = document.querySelector(".".concat(componentBlockClass, "__step.").concat(componentBlockClass, "__step--visible-step"));
+      var createComponentSteps = getCreateComponentSteps();
+      var focusableStepElements = createComponentSteps && createComponentSteps.length && getFocusableElements(visibleStepInnerContent);
+      var activeStepComponent = createComponentSteps && createComponentSteps.length && createComponentSteps[currentStep - 1];
+
+      if (activeStepComponent && activeStepComponent.props.onMount) {
+        activeStepComponent.props.onMount();
+      }
+
+      if (focusableStepElements && focusableStepElements.length) {
+        focusableStepElements[0].focus();
+      } else {
+        var nextButton = document.querySelector(".".concat(componentBlockClass, "__create-button"));
+        nextButton === null || nextButton === void 0 ? void 0 : nextButton.focus();
+      }
+    }
+  }, [currentStep, getCreateComponentSteps, previousState, componentBlockClass]);
+};