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

package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js

@@ -1,28 +1,31 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className"];
-
 /**
  * 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.
-import React from 'react'; // Other standard imports.
+import React from 'react';
 
+// Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import { pkg
-/*, carbon */
-} from '../../settings'; // Carbon and package components we use.
+import { pkg /*, carbon */ } from '../../settings';
 
+// Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
-// The block part of our conventional BEM class names (blockClass__E--M).
 
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--edit-tearsheet-narrow");
-var componentName = 'EditTearsheetNarrow'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
+var componentName = 'EditTearsheetNarrow';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
 // Default values can be included here and then assigned to the prop params,
 // e.g. prop = defaults.prop,
 // This gathers default values together neatly and ensures non-primitive
@@ -31,6 +34,7 @@ var componentName = 'EditTearsheetNarrow'; // NOTE: the component SCSS is not im
 // 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.
+
 // Default values for props
 // const defaults = {
 //   /* TODO: add defaults for relevant props if needed */
@@ -39,41 +43,44 @@ var componentName = 'EditTearsheetNarrow'; // NOTE: the component SCSS is not im
 /**
  * TODO: A description of the component.
  */
-
 export var EditTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, // Apply the block class to the main HTML element
-    className, // Apply any supplied class names 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.
     // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
-    {// switched classes dependant on props or state
+    {
+      // switched classes dependant on props or state
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref,
     role: "main"
   }, getDevtoolsProps(componentName)), children);
-}); // Return a placeholder if not released and not enabled by feature flag
+});
 
-EditTearsheetNarrow = pkg.checkComponentEnabled(EditTearsheetNarrow, componentName); // The display name of the component, used by React. Note that displayName
+// Return a placeholder if not released and not enabled by feature flag
+EditTearsheetNarrow = pkg.checkComponentEnabled(EditTearsheetNarrow, componentName);
+
+// The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
+EditTearsheetNarrow.displayName = componentName;
 
-EditTearsheetNarrow.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.
-
 EditTearsheetNarrow.propTypes = {
   /**
    * Provide the contents of the EditTearsheetNarrow.
    */
   children: PropTypes.node.isRequired,
-
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string
-  /* TODO: add types and DocGen for all props. */
 
+  /* TODO: add types and DocGen for all props. */
 };

package/es/components/EditTearsheetNarrow/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 { EditTearsheetNarrow } from './EditTearsheetNarrow';

package/es/components/EditUpdateCards/EditUpdateCards.js

@@ -0,0 +1,142 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["actionIcons", "actionsPlacement", "className", "description", "editChildren", "editMode", "label", "previewChildren", "title", "titleSize"];
+/**
+ * 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.
+import React from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg /*, carbon */ } from '../../settings';
+import { ProductiveCard } from '../ProductiveCard';
+// import { children } from 'cheerio/lib/api/traversing';
+
+// Carbon and package components we use.
+/* TODO: @import(s) of carbon components and other package components. */
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--edit-update-cards");
+var componentName = 'EditUpdateCards';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values can be included here and then assigned to the prop params,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that 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.
+
+// Default values for props
+// const defaults = {
+//   /* TODO: add defaults for relevant props if needed */
+// };
+
+/**
+ * TODO: A description of the component.
+ */
+
+export var EditUpdateCards = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var actionIcons = _ref.actionIcons,
+    actionsPlacement = _ref.actionsPlacement,
+    className = _ref.className,
+    description = _ref.description,
+    editChildren = _ref.editChildren,
+    editMode = _ref.editMode,
+    label = _ref.label,
+    previewChildren = _ref.previewChildren,
+    title = _ref.title,
+    titleSize = _ref.titleSize,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  // const [editMode, setEditMode] = useState(false);
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass,
+    // Apply the block class to the main HTML element
+    className, // Apply any supplied class names to the main HTML element.
+    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
+    _defineProperty({}, "".concat(blockClass, "__actions-bottom"), actionsPlacement === 'bottom')),
+    ref: ref,
+    role: "main"
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ProductiveCard, {
+    actionIcons: actionIcons,
+    actionsPlacement: actionsPlacement,
+    className: className,
+    description: description,
+    label: label,
+    title: title,
+    titleSize: titleSize
+  }, editMode === false && /*#__PURE__*/React.createElement("div", null, previewChildren), editMode && /*#__PURE__*/React.createElement("div", null, editChildren)));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+EditUpdateCards = pkg.checkComponentEnabled(EditUpdateCards, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+EditUpdateCards.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.
+EditUpdateCards.propTypes = {
+  /**
+   * Icons that are displayed on card. Refer to design documentation for implementation guidelines
+   */
+  actionIcons: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    onKeyDown: PropTypes.func,
+    onClick: PropTypes.func,
+    iconDescription: PropTypes.string,
+    href: PropTypes.string
+  })),
+  /**
+   * Determines if the action icons are on the top or bottom of the card
+   */
+  actionsPlacement: PropTypes.oneOf(['top', 'bottom']),
+  /**
+   * Optional label for the top of the card.
+   */
+  className: PropTypes.string,
+  /**
+   * Optional header description
+   */
+  description: PropTypes.string,
+  /**
+   * Edit mode children
+   */
+  editChildren: PropTypes.node,
+  /**
+   * Edit mode
+   */
+  editMode: PropTypes.bool,
+  /**
+   * Optional label for the top of the card
+   */
+  label: PropTypes.string,
+  /**
+   * Preview mode children
+   */
+  previewChildren: PropTypes.node,
+  /**
+   * Title that's displayed at the top of the card
+   */
+  title: PropTypes.string,
+  /**
+   * Determines title size
+   */
+  titleSize: PropTypes.oneOf(['default', 'large'])
+  /* TODO: add types and DocGen for all props. */
+};

package/es/components/EditUpdateCards/index.js

@@ -0,0 +1,8 @@
+/**
+ * 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.
+ */
+
+export { EditUpdateCards } from './EditUpdateCards';

package/es/components/EmptyStates/EmptyState.js

@@ -1,67 +1,67 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["action", "className", "illustration", "illustrationDescription", "link", "size", "subtitle", "title"];
-
+var _excluded = ["action", "className", "illustration", "illustrationDescription", "illustrationPosition", "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';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import '../../global/js/utils/props-helper';
 import { pkg } from '../../settings';
-import { EmptyStateContent } from './EmptyStateContent'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { EmptyStateContent } from './EmptyStateContent';
 
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
-var componentName = 'EmptyState'; // Default values for props
+var componentName = 'EmptyState';
 
+// Default values for props
 export var defaults = {
+  position: 'top',
   size: 'lg'
 };
 export var EmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var action = _ref.action,
-      className = _ref.className,
-      illustration = _ref.illustration,
-      illustrationDescription = _ref.illustrationDescription,
-      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);
-
-  var renderIllustration = function renderIllustration() {
-    return /*#__PURE__*/React.createElement("img", {
-      src: illustration,
-      alt: illustrationDescription,
-      className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
-    });
-  };
-
+    className = _ref.className,
+    illustration = _ref.illustration,
+    illustrationDescription = _ref.illustrationDescription,
+    _ref$illustrationPosi = _ref.illustrationPosition,
+    illustrationPosition = _ref$illustrationPosi === void 0 ? defaults.position : _ref$illustrationPosi,
+    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, _defineProperty({}, "".concat(blockClass, "-position--").concat(illustrationPosition), !!illustration)),
     ref: ref
-  }, getDevtoolsProps(componentName)), illustration && renderIllustration(), /*#__PURE__*/React.createElement(EmptyStateContent, {
+  }, getDevtoolsProps(componentName)), illustration && /*#__PURE__*/React.createElement("img", {
+    src: illustration,
+    alt: illustrationDescription,
+    className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
+  }), /*#__PURE__*/React.createElement(EmptyStateContent, {
     action: action,
     link: link,
     size: size,
     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
 EmptyState = pkg.checkComponentEnabled(EmptyState, componentName);
 EmptyState.propTypes = {
   /**
@@ -73,18 +73,15 @@ EmptyState.propTypes = {
     onClick: Button.propTypes.onClick,
     text: PropTypes.string
   })),
-
   /**
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
-
   /**
    * Empty state illustration, specify the `src` for a provided illustration to be displayed. In the case of requiring a light and dark illustration of your own, simply pass the corresponding illustration based on the current theme of your application.
    * For example: `illustration={appTheme === 'dark' ? darkIllustration : lightIllustration}`
    */
   illustration: PropTypes.string,
-
   /**
    * The alt text for custom provided illustrations
    */
@@ -92,7 +89,10 @@ EmptyState.propTypes = {
     var illustration = _ref2.illustration;
     return illustration;
   }),
-
+  /**
+   * Designates the position of the illustration relative to the content
+   */
+  illustrationPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
   /**
    * Empty state link object
    */
@@ -100,17 +100,14 @@ EmptyState.propTypes = {
     text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     href: PropTypes.string
   })),
-
   /**
    * Empty state size
    */
   size: PropTypes.oneOf(['lg', 'sm']),
-
   /**
    * Empty state subtext
    */
   subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
   /**
    * Empty state heading
    */

package/es/components/EmptyStates/EmptyStateContent.js

@@ -1,34 +1,37 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 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 { pkg } from '../../settings';
-import cx from 'classnames'; // Carbon and package components we use.
+import cx from 'classnames';
 
-import { Button, Link } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
+// Carbon and package components we use.
+import { Button, Link } from '@carbon/react';
 
+// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'EmptyStateContent';
 export var EmptyStateContent = function EmptyStateContent(_ref) {
   var action = _ref.action,
-      link = _ref.link,
-      size = _ref.size,
-      subtitle = _ref.subtitle,
-      title = _ref.title;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h3", {
+    link = _ref.link,
+    size = _ref.size,
+    subtitle = _ref.subtitle,
+    title = _ref.title;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__content")
+  }, /*#__PURE__*/React.createElement("h3", {
     className: cx("".concat(blockClass, "__header"), _defineProperty({}, "".concat(blockClass, "__header--small"), size === 'sm'))
   }, title), subtitle && /*#__PURE__*/React.createElement("p", {
     className: cx("".concat(blockClass, "__subtitle"), _defineProperty({}, "".concat(blockClass, "__subtitle--small"), size === 'sm'))
@@ -42,13 +45,15 @@ export var EmptyStateContent = function EmptyStateContent(_ref) {
     className: "".concat(blockClass, "__link"),
     href: link.href
   }), link.text));
-}; // 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.
+EmptyStateContent.displayName = componentName;
 
-EmptyStateContent.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.
-
 EmptyStateContent.propTypes = {
   /**
    * Empty state action button
@@ -60,7 +65,6 @@ EmptyStateContent.propTypes = {
     onClick: Button.propTypes.onClick,
     text: PropTypes.string
   })),
-
   /**
    * Empty state link object
    */
@@ -68,17 +72,14 @@ EmptyStateContent.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/ErrorEmptyState/ErrorEmptyState.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 { Button, Link } from '@carbon/react';
 import cx from 'classnames';
@@ -23,23 +22,25 @@ import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
 import { EmptyStateContent } from '../EmptyStateContent';
 import { ErrorIllustration } from '../assets/ErrorIllustration';
-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 = 'ErrorEmptyState';
 export var ErrorEmptyState = /*#__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(ErrorIllustration, {
     theme: illustrationTheme,
@@ -51,15 +52,18 @@ export var ErrorEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, 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
+ErrorEmptyState = pkg.checkComponentEnabled(ErrorEmptyState, componentName);
 
-ErrorEmptyState = pkg.checkComponentEnabled(ErrorEmptyState, 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.
+ErrorEmptyState.displayName = componentName;
 
-ErrorEmptyState.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.
-
 ErrorEmptyState.propTypes = {
   /**
    * Empty state action button
@@ -70,12 +74,14 @@ ErrorEmptyState.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 @@ ErrorEmptyState.propTypes = {
    * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
    */
   illustrationTheme: PropTypes.oneOf(['light', 'dark']),
-
   /**
    * Empty state link object
    */
@@ -91,17 +96,14 @@ ErrorEmptyState.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/ErrorEmptyState/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 { ErrorEmptyState } from './ErrorEmptyState';