@carbon/ibm-products 2.0.0-rc.9 → 2.0.1

package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -1,21 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["action", "className", "illustrationTheme", "link", "size", "subtitle", "title"];
-
+var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "link", "size", "subtitle", "title"];
 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) { _defineProperty(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; }
-
 /**
  * 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 React from 'react';
 
+// Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Button, Link } from '@carbon/react';
@@ -23,23 +22,25 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 import { EmptyStateContent } from '../EmptyStateContent';
 import { UnauthorizedIllustration } from '../assets/UnauthorizedIllustration';
-import { defaults } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { defaults } from '../EmptyState';
 
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'UnauthorizedEmptyState';
 export var UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var action = _ref.action,
-      className = _ref.className,
-      illustrationTheme = _ref.illustrationTheme,
-      link = _ref.link,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? defaults.size : _ref$size,
-      subtitle = _ref.subtitle,
-      title = _ref.title,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    className = _ref.className,
+    _ref$illustrationPosi = _ref.illustrationPosition,
+    illustrationPosition = _ref$illustrationPosi === void 0 ? defaults.position : _ref$illustrationPosi,
+    illustrationTheme = _ref.illustrationTheme,
+    link = _ref.link,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? defaults.size : _ref$size,
+    subtitle = _ref.subtitle,
+    title = _ref.title,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, className),
+    className: cx(blockClass, className, "".concat(blockClass, "-position--").concat(illustrationPosition)),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(UnauthorizedIllustration, {
     size: size,
@@ -51,15 +52,18 @@ export var UnauthorizedEmptyState = /*#__PURE__*/React.forwardRef(function (_ref
     subtitle: subtitle,
     title: title
   }));
-}); // Return a placeholder if not released and not enabled by feature flag
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+UnauthorizedEmptyState = pkg.checkComponentEnabled(UnauthorizedEmptyState, componentName);
 
-UnauthorizedEmptyState = pkg.checkComponentEnabled(UnauthorizedEmptyState, componentName); // The display name of the component, used by React. Note that displayName
+// The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
+UnauthorizedEmptyState.displayName = componentName;
 
-UnauthorizedEmptyState.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.
-
 UnauthorizedEmptyState.propTypes = {
   /**
    * Empty state action button
@@ -70,12 +74,14 @@ UnauthorizedEmptyState.propTypes = {
     onClick: Button.propTypes.onClick,
     text: PropTypes.string
   })),
-
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
-
+  /**
+   * Designates the position of the illustration relative to the content
+   */
+  illustrationPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
   /**
    * Empty state illustration theme variations.
    * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -83,7 +89,6 @@ UnauthorizedEmptyState.propTypes = {
    * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
    */
   illustrationTheme: PropTypes.oneOf(['light', 'dark']),
-
   /**
    * Empty state link object
    */
@@ -91,17 +96,14 @@ UnauthorizedEmptyState.propTypes = {
     text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     href: PropTypes.string
   })),
-
   /**
    * Empty state size
    */
   size: PropTypes.oneOf(['lg', 'sm']),
-
   /**
    * Empty state subtitle
    */
   subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
   /**
    * Empty state title
    */

package/es/components/EmptyStates/UnauthorizedEmptyState/index.js

@@ -4,4 +4,5 @@
  * 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 { UnauthorizedEmptyState } from './UnauthorizedEmptyState';

package/es/components/EmptyStates/assets/ErrorIllustration.js

@@ -1,27 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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.
-import React from 'react'; // Other standard imports.
+import React from 'react';
 
+// Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
-import uuidv4 from '../../../global/js/utils/uuidv4'; // The block part of our conventional BEM class names (blockClass__E--M).
+import uuidv4 from '../../../global/js/utils/uuidv4';
 
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var ErrorIllustration = function ErrorIllustration(_ref) {
   var theme = _ref.theme,
-      size = _ref.size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    size = _ref.size,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
   return theme === 'dark' ? /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",

package/es/components/EmptyStates/assets/NoDataIllustration.js

@@ -1,27 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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.
-import React from 'react'; // Other standard imports.
+import React from 'react';
 
+// Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
-import uuidv4 from '../../../global/js/utils/uuidv4'; // The block part of our conventional BEM class names (blockClass__E--M).
+import uuidv4 from '../../../global/js/utils/uuidv4';
 
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var NoDataIllustration = function NoDataIllustration(_ref) {
   var theme = _ref.theme,
-      size = _ref.size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    size = _ref.size,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
   return theme === 'dark' ? /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",

package/es/components/EmptyStates/assets/NoTagsIllustration.js

@@ -1,27 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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.
-import React from 'react'; // Other standard imports.
+import React from 'react';
 
+// Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
-import uuidv4 from '../../../global/js/utils/uuidv4'; // The block part of our conventional BEM class names (blockClass__E--M).
+import uuidv4 from '../../../global/js/utils/uuidv4';
 
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var NoTagsIllustration = function NoTagsIllustration(_ref) {
   var theme = _ref.theme,
-      size = _ref.size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    size = _ref.size,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
   return theme === 'dark' ? /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",

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

@@ -1,27 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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.
-import React from 'react'; // Other standard imports.
+import React from 'react';
 
+// Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
-import uuidv4 from '../../../global/js/utils/uuidv4'; // The block part of our conventional BEM class names (blockClass__E--M).
+import uuidv4 from '../../../global/js/utils/uuidv4';
 
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var NotFoundIllustration = function NotFoundIllustration(_ref) {
   var theme = _ref.theme,
-      size = _ref.size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    size = _ref.size,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
   return theme === 'dark' ? /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",

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

@@ -1,27 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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.
-import React from 'react'; // Other standard imports.
+import React from 'react';
 
+// Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
-import uuidv4 from '../../../global/js/utils/uuidv4'; // The block part of our conventional BEM class names (blockClass__E--M).
+import uuidv4 from '../../../global/js/utils/uuidv4';
 
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var NotificationsIllustration = function NotificationsIllustration(_ref) {
   var theme = _ref.theme,
-      size = _ref.size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    size = _ref.size,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
   return theme === 'dark' ? /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",

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

@@ -1,27 +1,28 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 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.
-import React from 'react'; // Other standard imports.
+import React from 'react';
 
+// Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
-import uuidv4 from '../../../global/js/utils/uuidv4'; // The block part of our conventional BEM class names (blockClass__E--M).
+import uuidv4 from '../../../global/js/utils/uuidv4';
 
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 export var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
   var theme = _ref.theme,
-      size = _ref.size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    size = _ref.size,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var svgId = uuidv4();
   return theme === 'dark' ? /*#__PURE__*/React.createElement("svg", _extends({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",

package/es/components/EmptyStates/index.js

@@ -4,6 +4,7 @@
  * 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 { EmptyState } from './EmptyState';
 export { ErrorEmptyState } from './ErrorEmptyState';
 export { NoDataEmptyState } from './NoDataEmptyState';

package/es/components/ExampleComponent/ExampleComponent.js

@@ -1,74 +1,94 @@
 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 = ["borderColor", "boxedBorder", "className", "disabled", "onPrimaryClick", "onSecondaryClick", "primaryButtonLabel", "primaryKind", "secondaryButtonLabel", "secondaryKind", "size", "style"];
-
+var _excluded = ["borderColor", "boxedBorder", "className", "disabled", "usesExampleHook", "onPrimaryClick", "onSecondaryClick", "primaryButtonLabel", "primaryKind", "secondaryButtonLabel", "secondaryKind", "secondaryIcon", "size", "style"];
 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) { _defineProperty(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; }
-
 /**
  * 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 React, { useRef, useEffect, useState } 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 { Button, ButtonSet } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { pkg } from '../../settings';
 
+// Carbon and package components we use.
+import { Button, ButtonSet } from '@carbon/react';
+import useExample from './useExample';
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(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.
  */
-
 export var ExampleComponent = /*#__PURE__*/React.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 = _objectWithoutProperties(_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 = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(primaryButtonLabel),
+    _useState2 = _slicedToArray(_useState, 2),
+    thePrimaryButtonLabel = _useState2[0],
+    setThePrimaryButtonLabel = _useState2[1];
+  var _useExample = useExample(usesExampleHook),
+    _useExample2 = _slicedToArray(_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 = useRef(secondaryIcon && pkg.checkReportFeatureEnabled('ExampleComponent.secondaryIcon') ? secondaryIcon : null);
+  useEffect(function () {
+    if (usesExampleHook !== undefined && pkg.checkReportFeatureEnabled('ExampleComponent.useExample')) {
+      setThePrimaryButtonLabel("".concat(primaryButtonLabel, " ").concat(exampleUse.toFixed(1), "s"));
+    } else {
+      setThePrimaryButtonLabel(primaryButtonLabel);
+    }
+  }, [primaryButtonLabel, usesExampleHook, exampleUse]);
   return /*#__PURE__*/React.createElement(ButtonSet, _extends({}, rest, {
-    className: cx(blockClass, // Apply the block class to the main HTML element
+    className: cx(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,
@@ -78,6 +98,7 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__secondary-button"),
     kind: secondaryKind,
     onClick: handleSecondaryClick,
+    renderIcon: theSecondaryIcon.current,
     disabled: disabled,
     size: size
   }, secondaryButtonLabel), /*#__PURE__*/React.createElement(Button, {
@@ -86,74 +107,74 @@ export var ExampleComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     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.
+ExampleComponent = pkg.checkComponentEnabled(ExampleComponent, componentName);
 
-ExampleComponent = pkg.checkComponentEnabled(ExampleComponent, componentName); // The display name of the component, used by React. Note that displayName
+// 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.string,
-
   /**
    * If true, the border is a box, otherwise it is a shadow.
    */
   boxedBorder: PropTypes.bool,
-
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
-
   /**
    * If true, the buttons are disabled, otherwise they can be used.
    */
   disabled: PropTypes.bool,
-
   /**
    * An optional primary button click handler.
    */
   onPrimaryClick: PropTypes.func,
-
   /**
    * An optional secondary button click handler.
    */
   onSecondaryClick: PropTypes.func,
-
   /**
    * The primary button label.
    */
   primaryButtonLabel: PropTypes.string.isRequired,
-
   /**
    * The kind of button for the primary button ('primary' or 'danger').
    */
   primaryKind: PropTypes.oneOf(['primary', 'danger']),
-
   /**
    * The secondary button label.
    */
   secondaryButtonLabel: PropTypes.string.isRequired,
-
+  /**
+   * The icon to use for the secondary button.
+   */
+  secondaryIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   /**
    * The kind of button for the secondary button ('secondary' or 'tertiary').
    */
   secondaryKind: PropTypes.oneOf(['secondary', 'tertiary']),
-
   /**
    * The size for the buttons
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', '2xl']),
-
   /**
    * Optional style settings for the containing node.
    */
-  style: PropTypes.object
+  style: PropTypes.object,
+  /**
+   * Hook example timeout (in seconds) or undefined
+   */
+  usesExampleHook: PropTypes.number
 };

package/es/components/ExampleComponent/ExampleDeprecatedComponent.js

@@ -0,0 +1,28 @@
+/**
+ * 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.
+ */
+
+import React from 'react';
+import { pkg } from '../../settings';
+import { ExampleComponent } from './ExampleComponent';
+var componentName = 'ExampleDeprecatedComponent';
+
+// This is NOT a full component example. It is only intended to show the deprecation of a component.
+export var ExampleDeprecatedComponent = function ExampleDeprecatedComponent() {
+  return /*#__PURE__*/React.createElement(ExampleComponent, {
+    primaryButtonLabel: "primary",
+    secondaryButtonLabel: "secondary"
+  });
+};
+
+// example of a deprecation warning
+ExampleDeprecatedComponent.deprecated = {
+  level: 'warn',
+  details: "This an example component deprecation message used by 'checkComponentEnabled'."
+};
+
+// The component enable should log the deprecation
+ExampleDeprecatedComponent = pkg.checkComponentEnabled(ExampleDeprecatedComponent, componentName);

package/es/components/ExampleComponent/index.js

@@ -4,4 +4,5 @@
  * 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 { ExampleComponent } from './ExampleComponent';