@carbon/ibm-products 2.0.0-rc.3 → 2.0.0-rc.32

package/lib/components/EmptyStates/assets/NotFoundIllustration.js

@@ -1,34 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NotFoundIllustration = 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 _settings = require("../../../settings");
-
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-
 var _excluded = ["theme", "size"];
+/**
+ * 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.
+// Other standard imports.
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
-
 var NotFoundIllustration = function NotFoundIllustration(_ref) {
   var theme = _ref.theme,
-      size = _ref.size,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    size = _ref.size,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return theme === 'dark' ? /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
@@ -366,7 +364,6 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
     fill: "url(#prefix__g_".concat(svgId, ")")
   }));
 };
-
 exports.NotFoundIllustration = NotFoundIllustration;
 NotFoundIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),

package/lib/components/EmptyStates/assets/NotificationsIllustration.js

@@ -1,34 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NotificationsIllustration = 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 _settings = require("../../../settings");
-
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-
 var _excluded = ["theme", "size"];
+/**
+ * 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.
+// Other standard imports.
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
-
 var NotificationsIllustration = function NotificationsIllustration(_ref) {
   var theme = _ref.theme,
-      size = _ref.size,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    size = _ref.size,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return theme === 'dark' ? /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
@@ -337,7 +335,6 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
     fill: "url(#prefix__k_".concat(svgId, ")")
   }));
 };
-
 exports.NotificationsIllustration = NotificationsIllustration;
 NotificationsIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),

package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js

@@ -1,34 +1,32 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.UnauthorizedIllustration = 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 _settings = require("../../../settings");
-
 var _uuidv = _interopRequireDefault(require("../../../global/js/utils/uuidv4"));
-
 var _excluded = ["theme", "size"];
+/**
+ * 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.
+// Other standard imports.
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
-
 var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
   var theme = _ref.theme,
-      size = _ref.size,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    size = _ref.size,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
   return theme === 'dark' ? /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
@@ -310,7 +308,6 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
     fill: "url(#prefix__h_".concat(svgId, ")")
   }));
 };
-
 exports.UnauthorizedIllustration = UnauthorizedIllustration;
 UnauthorizedIllustration.propTypes = {
   size: _propTypes.default.oneOf(['lg', 'sm']),

package/lib/components/EmptyStates/index.js

@@ -45,17 +45,10 @@ Object.defineProperty(exports, "UnauthorizedEmptyState", {
     return _UnauthorizedEmptyState.UnauthorizedEmptyState;
   }
 });
-
 var _EmptyState = require("./EmptyState");
-
 var _ErrorEmptyState = require("./ErrorEmptyState");
-
 var _NoDataEmptyState = require("./NoDataEmptyState");
-
 var _NoTagsEmptyState = require("./NoTagsEmptyState");
-
 var _NotFoundEmptyState = require("./NotFoundEmptyState");
-
 var _NotificationsEmptyState = require("./NotificationsEmptyState");
-
 var _UnauthorizedEmptyState = require("./UnauthorizedEmptyState");

package/lib/components/ExampleComponent/ExampleComponent.js

@@ -1,81 +1,101 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExampleComponent = void 0;
-
 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 = _interopRequireDefault(require("react"));
-
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _settings = require("../../settings");
-
 var _react2 = require("@carbon/react");
-
-var _excluded = ["borderColor", "boxedBorder", "className", "disabled", "onPrimaryClick", "onSecondaryClick", "primaryButtonLabel", "primaryKind", "secondaryButtonLabel", "secondaryKind", "size", "style"];
-
+var _useExample3 = _interopRequireDefault(require("./useExample"));
+var _excluded = ["borderColor", "boxedBorder", "className", "disabled", "usesExampleHook", "onPrimaryClick", "onSecondaryClick", "primaryButtonLabel", "primaryKind", "secondaryButtonLabel", "secondaryKind", "secondaryIcon", "size", "style"];
+/**
+ * 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.
+// 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 blockClass = "".concat(_settings.pkg.prefix, "--example-component");
-var componentName = 'ExampleComponent'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
-// Default values for props
+var componentName = 'ExampleComponent';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
 
+// Default values for props
 var defaults = {
   primaryKind: 'primary',
   secondaryKind: 'secondary',
+  secondaryIcon: null,
   size: 'lg'
 };
+
 /**
  * This is an example component to show relevant conventions and usage.
  */
-
 var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var borderColor = _ref.borderColor,
-      boxedBorder = _ref.boxedBorder,
-      className = _ref.className,
-      disabled = _ref.disabled,
-      onPrimaryClick = _ref.onPrimaryClick,
-      onSecondaryClick = _ref.onSecondaryClick,
-      primaryButtonLabel = _ref.primaryButtonLabel,
-      _ref$primaryKind = _ref.primaryKind,
-      primaryKind = _ref$primaryKind === void 0 ? defaults.primaryKind : _ref$primaryKind,
-      secondaryButtonLabel = _ref.secondaryButtonLabel,
-      _ref$secondaryKind = _ref.secondaryKind,
-      secondaryKind = _ref$secondaryKind === void 0 ? defaults.secondaryKind : _ref$secondaryKind,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? defaults.size : _ref$size,
-      style = _ref.style,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    boxedBorder = _ref.boxedBorder,
+    className = _ref.className,
+    disabled = _ref.disabled,
+    usesExampleHook = _ref.usesExampleHook,
+    onPrimaryClick = _ref.onPrimaryClick,
+    onSecondaryClick = _ref.onSecondaryClick,
+    primaryButtonLabel = _ref.primaryButtonLabel,
+    _ref$primaryKind = _ref.primaryKind,
+    primaryKind = _ref$primaryKind === void 0 ? defaults.primaryKind : _ref$primaryKind,
+    secondaryButtonLabel = _ref.secondaryButtonLabel,
+    _ref$secondaryKind = _ref.secondaryKind,
+    secondaryKind = _ref$secondaryKind === void 0 ? defaults.secondaryKind : _ref$secondaryKind,
+    _ref$secondaryIcon = _ref.secondaryIcon,
+    secondaryIcon = _ref$secondaryIcon === void 0 ? defaults.secondaryIcon : _ref$secondaryIcon,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    style = _ref.style,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(primaryButtonLabel),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    thePrimaryButtonLabel = _useState2[0],
+    setThePrimaryButtonLabel = _useState2[1];
+  var _useExample = (0, _useExample3.default)(usesExampleHook),
+    _useExample2 = (0, _slicedToArray2.default)(_useExample, 1),
+    exampleUse = _useExample2[0];
   var modeClass = boxedBorder ? "".concat(blockClass, "--boxed-set") : "".concat(blockClass, "--shadow-set");
-
   var handlePrimaryClick = function handlePrimaryClick(e) {
     if (onPrimaryClick) {
       onPrimaryClick(e);
     }
   };
-
   var handleSecondaryClick = function handleSecondaryClick(e) {
     if (onSecondaryClick) {
       onSecondaryClick(e);
     }
   };
-
+  var theSecondaryIcon = (0, _react.useRef)(secondaryIcon && _settings.pkg.checkReportFeatureEnabled('ExampleComponent.secondaryIcon') ? secondaryIcon : null);
+  (0, _react.useEffect)(function () {
+    if (usesExampleHook !== undefined && _settings.pkg.checkReportFeatureEnabled('ExampleComponent.useExample')) {
+      setThePrimaryButtonLabel("".concat(primaryButtonLabel, " ").concat(exampleUse.toFixed(1), "s"));
+    } else {
+      setThePrimaryButtonLabel(primaryButtonLabel);
+    }
+  }, [primaryButtonLabel, usesExampleHook, exampleUse]);
   return /*#__PURE__*/_react.default.createElement(_react2.ButtonSet, (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
+    className: (0, _classnames.default)(blockClass,
+    // Apply the block class to the main HTML element
     className, // Apply any supplied class names to the main HTML element.
     "".concat(blockClass, "--").concat(size), modeClass),
     ref: ref,
@@ -85,6 +105,7 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     className: "".concat(blockClass, "__secondary-button"),
     kind: secondaryKind,
     onClick: handleSecondaryClick,
+    renderIcon: theSecondaryIcon.current,
     disabled: disabled,
     size: size
   }, secondaryButtonLabel), /*#__PURE__*/_react.default.createElement(_react2.Button, {
@@ -93,76 +114,75 @@ var ExampleComponent = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     onClick: handlePrimaryClick,
     disabled: disabled,
     size: size
-  }, primaryButtonLabel));
-}); // Return a placeholder if not released and not enabled by feature flag.
-
+  }, thePrimaryButtonLabel));
+});
 
+// Return a placeholder if not released and not enabled by feature flag.
 exports.ExampleComponent = ExampleComponent;
-exports.ExampleComponent = ExampleComponent = _settings.pkg.checkComponentEnabled(ExampleComponent, componentName); // The display name of the component, used by React. Note that displayName
+exports.ExampleComponent = ExampleComponent = _settings.pkg.checkComponentEnabled(ExampleComponent, componentName);
+
+// The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
+ExampleComponent.displayName = componentName;
 
-ExampleComponent.displayName = componentName; // The types and DocGen commentary for the component props,
+// The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-
 ExampleComponent.propTypes = {
   /**
    * What border color (HTML color value) to use.
    */
   borderColor: _propTypes.default.string,
-
   /**
    * If true, the border is a box, otherwise it is a shadow.
    */
   boxedBorder: _propTypes.default.bool,
-
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: _propTypes.default.string,
-
   /**
    * If true, the buttons are disabled, otherwise they can be used.
    */
   disabled: _propTypes.default.bool,
-
   /**
    * An optional primary button click handler.
    */
   onPrimaryClick: _propTypes.default.func,
-
   /**
    * An optional secondary button click handler.
    */
   onSecondaryClick: _propTypes.default.func,
-
   /**
    * The primary button label.
    */
   primaryButtonLabel: _propTypes.default.string.isRequired,
-
   /**
    * The kind of button for the primary button ('primary' or 'danger').
    */
   primaryKind: _propTypes.default.oneOf(['primary', 'danger']),
-
   /**
    * The secondary button label.
    */
   secondaryButtonLabel: _propTypes.default.string.isRequired,
-
+  /**
+   * The icon to use for the secondary button.
+   */
+  secondaryIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
   /**
    * The kind of button for the secondary button ('secondary' or 'tertiary').
    */
   secondaryKind: _propTypes.default.oneOf(['secondary', 'tertiary']),
-
   /**
    * The size for the buttons
    */
   size: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
-
   /**
    * Optional style settings for the containing node.
    */
-  style: _propTypes.default.object
+  style: _propTypes.default.object,
+  /**
+   * Hook example timeout (in seconds) or undefined
+   */
+  usesExampleHook: _propTypes.default.number
 };

package/lib/components/ExampleComponent/ExampleDeprecatedComponent.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExampleDeprecatedComponent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _settings = require("../../settings");
+var _ExampleComponent = require("./ExampleComponent");
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 componentName = 'ExampleDeprecatedComponent';
+
+// This is NOT a full component example. It is only intended to show the deprecation of a component.
+var ExampleDeprecatedComponent = function ExampleDeprecatedComponent() {
+  return /*#__PURE__*/_react.default.createElement(_ExampleComponent.ExampleComponent, {
+    primaryButtonLabel: "primary",
+    secondaryButtonLabel: "secondary"
+  });
+};
+
+// example of a deprecation warning
+exports.ExampleDeprecatedComponent = ExampleDeprecatedComponent;
+ExampleDeprecatedComponent.deprecated = {
+  level: 'warn',
+  details: "This an example component deprecation message used by 'checkComponentEnabled'."
+};
+
+// The component enable should log the deprecation
+exports.ExampleDeprecatedComponent = ExampleDeprecatedComponent = _settings.pkg.checkComponentEnabled(ExampleDeprecatedComponent, componentName);

package/lib/components/ExampleComponent/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "ExampleComponent", {
     return _ExampleComponent.ExampleComponent;
   }
 });
-
 var _ExampleComponent = require("./ExampleComponent");

package/lib/components/ExampleComponent/useExample.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _settings = require("../../settings");
+/**
+ * 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.
+ */
+
+var useExample = function useExample(initialTime) {
+  // NOTE: hooks cannot be called conditionally.
+  //
+  // ** If the hook uses other hooks then they must be called,
+  // ** this could lead to unexpected behavior.
+  // ** As some hooks may still be called even if the condition is false.
+
+  var _useState = (0, _react.useState)(
+    // Disable hook in a safe way if possible, else use despite feature disabled.
+    // Either a console error or warning will be logged.
+    initialTime),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    time = _useState2[0],
+    setTime = _useState2[1];
+
+  // Use of the feature flag to
+  var feature = 'ExampleComponent.useExample';
+  var tryFeature = initialTime !== undefined;
+  var featureEnabled = tryFeature && _settings.pkg.checkReportFeatureEnabled(feature);
+  if (tryFeature && !featureEnabled) {
+    // Output a useful message if the feature is disabled.
+    console.warn("Disabled feature \"".concat(feature, "\" does not change the initialTime."));
+  }
+
+  // Actual hook is code is below
+  (0, _react.useEffect)(function () {
+    if (!featureEnabled) {
+      return;
+    }
+
+    // turn off all or part of the feature
+    if (time > 0) {
+      setTimeout(function () {
+        setTime(Math.max(0, time - 0.1));
+      }, 100);
+    }
+  }, [featureEnabled, time]);
+  return [time];
+};
+var _default = useExample;
+exports.default = _default;