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

package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CreateTearsheetNarrow = 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 _carbonComponentsReact = require("carbon-components-react");
+
+var _devtools = require("../../global/js/utils/devtools");
+
+var _settings = require("../../settings");
+
+var _TearsheetNarrow = require("../Tearsheet/TearsheetNarrow");
+
+var _excluded = ["children", "className", "description", "disableSubmit", "formDescription", "formTitle", "label", "open", "onRequestClose", "onRequestSubmit", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "title", "verticalPosition"];
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--create-tearsheet-narrow");
+var componentName = 'CreateTearsheetNarrow'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+/**
+ * Use a narrow tearsheet as an alternative to a modal when there is scrolling.
+ * Use when the form fields can be broken down into sections using section headers.
+ */
+
+var CreateTearsheetNarrow = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      description = _ref.description,
+      disableSubmit = _ref.disableSubmit,
+      formDescription = _ref.formDescription,
+      formTitle = _ref.formTitle,
+      label = _ref.label,
+      open = _ref.open,
+      onRequestClose = _ref.onRequestClose,
+      onRequestSubmit = _ref.onRequestSubmit,
+      primaryButtonText = _ref.primaryButtonText,
+      secondaryButtonText = _ref.secondaryButtonText,
+      selectorPrimaryFocus = _ref.selectorPrimaryFocus,
+      title = _ref.title,
+      verticalPosition = _ref.verticalPosition,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var actions = [{
+    label: primaryButtonText,
+    onClick: onRequestSubmit,
+    kind: 'primary',
+    disabled: disableSubmit
+  }, {
+    label: secondaryButtonText,
+    onClick: onRequestClose,
+    kind: 'secondary'
+  }];
+  var formTextClass = "".concat(blockClass, "__content-text");
+  return /*#__PURE__*/_react.default.createElement(_TearsheetNarrow.TearsheetNarrow, (0, _extends2.default)({}, rest, {
+    title: title,
+    description: description,
+    className: (0, _classnames.default)(blockClass, className),
+    actions: actions,
+    open: open,
+    ref: ref,
+    onClose: function onClose() {
+      onRequestClose === null || onRequestClose === void 0 ? void 0 : onRequestClose();
+      return false;
+    },
+    label: label,
+    selectorPrimaryFocus: selectorPrimaryFocus,
+    verticalPosition: verticalPosition,
+    role: "presentation"
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("h3", {
+    className: (0, _classnames.default)("".concat(blockClass, "__form-title-text"), formTextClass)
+  }, formTitle), /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _classnames.default)("".concat(blockClass, "__form-description-text"), formTextClass)
+  }, formDescription), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
+    className: "".concat(blockClass, "__form")
+  }, children));
+}); // Return a placeholder if not released and not enabled by feature flag
+
+
+exports.CreateTearsheetNarrow = CreateTearsheetNarrow;
+exports.CreateTearsheetNarrow = CreateTearsheetNarrow = _settings.pkg.checkComponentEnabled(CreateTearsheetNarrow, componentName); // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+CreateTearsheetNarrow.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.
+
+CreateTearsheetNarrow.propTypes = {
+  /**
+   * Provide the contents of the CreateTearsheetNarrow.
+   */
+  children: _propTypes.default.node.isRequired,
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * A description of the flow, displayed in the header area of the tearsheet.
+   */
+  description: _propTypes.default.node,
+
+  /**
+   * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
+   * Returning `true` prevents the primary button from being clicked until required fields are completed.
+   */
+  disableSubmit: _propTypes.default.bool,
+
+  /**
+   * Specifies an optional field that provides a additional context for a form
+   */
+  formDescription: _propTypes.default.node,
+
+  /**
+   * Specifies a required field that provides a title for a form
+   */
+  formTitle: _propTypes.default.node.isRequired,
+
+  /**
+   * A label for the tearsheet, displayed in the header area of the tearsheet
+   * to maintain context for the tearsheet (e.g. as the title changes from page
+   * to page of a multi-page task).
+   */
+  label: _propTypes.default.node,
+
+  /**
+   * An optional handler that is called when the user closes the tearsheet (by
+   * clicking the close button, if enabled, or clicking outside, if enabled).
+   * Returning `false` here prevents the modal from closing.
+   */
+  onRequestClose: _propTypes.default.func,
+
+  /**
+   * Specifies an optional handler which is called when the CreateTearsheetNarrow
+   * primary button is pressed.
+   */
+  onRequestSubmit: _propTypes.default.func,
+
+  /**
+   * Specifies whether the tearsheet is currently open.
+   */
+  open: _propTypes.default.bool,
+
+  /**
+   * Specifies the primary button's text in the CreateTearsheetNarrow.
+   */
+  primaryButtonText: _propTypes.default.string.isRequired,
+
+  /**
+   * Specifies the secondary button's text in the CreateTearsheetNarrow.
+   */
+  secondaryButtonText: _propTypes.default.string.isRequired,
+
+  /**
+   * Specifies which DOM element in the form should be focused.
+   */
+  selectorPrimaryFocus: _propTypes.default.node,
+
+  /**
+   * The main title of the tearsheet, displayed in the header area.
+   */
+  title: _propTypes.default.node,
+
+  /**
+   * The position of the top of tearsheet in the viewport. The 'normal'
+   * position (the default) is a short distance down from the top of the
+   * viewport, leaving room at the top for a global header bar to show through
+   * from below. The 'lower' position provides a little extra room at the top
+   * to allow an action bar navigation or breadcrumbs to also show through.
+   */
+  verticalPosition: _propTypes.default.oneOf(['normal', 'lower'])
+};

package/lib/components/CreateTearsheetNarrow/index.js

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

package/lib/components/EditSidePanel/EditSidePanel.js

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EditSidePanel = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _devtools = require("../../global/js/utils/devtools");
+
+var _settings = require("../../settings");
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _SidePanel = require("../SidePanel");
+
+var _ActionSet = require("../ActionSet");
+
+require("../../global/js/utils/props-helper");
+
+var _excluded = ["children", "className", "disableSubmit", "formTitle", "formDescription", "onRequestClose", "onRequestSubmit", "open", "placement", "primaryButtonText", "secondaryButtonText", "selectorPrimaryFocus", "selectorPageContent", "size", "slideIn", "subtitle", "title"];
+
+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) { (0, _defineProperty2.default)(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; }
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--edit-side-panel");
+var sidePanelBlockClass = "".concat(_settings.pkg.prefix, "--side-panel");
+var componentName = 'EditSidePanel'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+/**
+ * TODO: A description of the component.
+ */
+
+var EditSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      disableSubmit = _ref.disableSubmit,
+      formTitle = _ref.formTitle,
+      formDescription = _ref.formDescription,
+      onRequestClose = _ref.onRequestClose,
+      onRequestSubmit = _ref.onRequestSubmit,
+      open = _ref.open,
+      placement = _ref.placement,
+      primaryButtonText = _ref.primaryButtonText,
+      secondaryButtonText = _ref.secondaryButtonText,
+      selectorPrimaryFocus = _ref.selectorPrimaryFocus,
+      selectorPageContent = _ref.selectorPageContent,
+      size = _ref.size,
+      slideIn = _ref.slideIn,
+      subtitle = _ref.subtitle,
+      title = _ref.title,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var actions = [{
+    label: primaryButtonText,
+    onClick: function onClick(event) {
+      event.preventDefault();
+      onRequestSubmit();
+    },
+    kind: 'primary',
+    disabled: disableSubmit,
+    type: 'submit'
+  }, {
+    label: secondaryButtonText,
+    onClick: onRequestClose,
+    kind: 'secondary'
+  }];
+  var actionContainerClassNames = (0, _classnames.default)(["".concat(blockClass, "__actions-container"), "".concat(sidePanelBlockClass, "__actions-container")]);
+  return /*#__PURE__*/_react.default.createElement(_SidePanel.SidePanel, (0, _extends2.default)({}, rest, _objectSpread({
+    open: open,
+    ref: ref,
+    selectorPageContent: selectorPageContent,
+    onRequestClose: onRequestClose,
+    title: title,
+    subtitle: subtitle,
+    selectorPrimaryFocus: selectorPrimaryFocus
+  }, (0, _devtools.getDevtoolsProps)(componentName)), {
+    placement: placement,
+    slideIn: slideIn,
+    animateTitle: false,
+    className: (0, _classnames.default)(blockClass, className),
+    size: size,
+    preventCloseOnClickOutside: true
+  }), formTitle && /*#__PURE__*/_react.default.createElement("h3", {
+    className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
+  }, formTitle), formDescription && /*#__PURE__*/_react.default.createElement("p", {
+    className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
+  }, formDescription), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
+    className: "".concat(blockClass, "__form")
+  }, children, /*#__PURE__*/_react.default.createElement(_ActionSet.ActionSet, {
+    actions: actions,
+    className: actionContainerClassNames,
+    size: size
+  })));
+}); // Return a placeholder if not released and not enabled by feature flag
+
+
+exports.EditSidePanel = EditSidePanel;
+exports.EditSidePanel = EditSidePanel = _settings.pkg.checkComponentEnabled(EditSidePanel, componentName); // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+EditSidePanel.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.
+
+EditSidePanel.propTypes = {
+  /**
+   * Sets the body content of the create side panel
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]).isRequired,
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
+   * Returning `true` prevents the primary button from being clicked until required fields are completed.
+   */
+  disableSubmit: _propTypes.default.bool,
+
+  /**
+   * Specifies an optional field that provides a additional context for a form
+   */
+  formDescription: _propTypes.default.node,
+
+  /**
+   * Specifies a required field that provides a title for a form
+   */
+  formTitle: _propTypes.default.node,
+
+  /**
+   * Specifies an optional handler which is called when the CreateSidePanel
+   * is closed.
+   */
+  onRequestClose: _propTypes.default.func,
+
+  /**
+   * Specifies an optional handler which is called when the CreateSidePanel
+   * primary button is pressed.
+   */
+  onRequestSubmit: _propTypes.default.func,
+
+  /**
+   * Specifies whether the CreateSidePanel is open or not.
+   */
+  open: _propTypes.default.bool,
+
+  /**
+   * Determines if the side panel is on the right or left
+   */
+  placement: _propTypes.default.oneOf(['left', 'right']),
+
+  /**
+   * Specifies the primary button's text in the modal.
+   */
+  primaryButtonText: _propTypes.default.string.isRequired,
+
+  /**
+   * Specifies the secondary button's text in the modal.
+   */
+  secondaryButtonText: _propTypes.default.string.isRequired,
+
+  /**
+   * This is the selector to the element that contains all of the page content that will shrink if the panel is a slide in.
+   * This prop is required when using the `slideIn` variant of the side panel.
+   */
+  selectorPageContent: _propTypes.default.string.isRequired.if(function (_ref2) {
+    var slideIn = _ref2.slideIn;
+    return slideIn;
+  }),
+
+  /**
+   * Specifies which DOM element in the form should be focused.
+   */
+  selectorPrimaryFocus: _propTypes.default.node.isRequired,
+
+  /**
+   * Sets the size of the side panel
+   */
+  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'max']),
+
+  /**
+   * Specifies which DOM element in the form should be focused.
+   */
+  slideIn: _propTypes.default.bool,
+
+  /**
+   * The subtitle of the CreateSidePanel is optional and serves to provide more information about the modal.
+   */
+  subtitle: _propTypes.default.node,
+
+  /**
+   * The title of the CreateSidePanel is usually the product or service name.
+   */
+  title: _propTypes.default.node.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.
+
+EditSidePanel.defaultProps = {
+  placement: 'right',
+  size: 'md'
+};

package/lib/components/EditSidePanel/index.js

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

package/lib/components/EmptyStates/EmptyState.js

@@ -0,0 +1,134 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyStateDefaultProps = exports.EmptyState = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+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 _carbonComponentsReact = require("carbon-components-react");
+
+var _devtools = require("../../global/js/utils/devtools");
+
+require("../../global/js/utils/props-helper");
+
+var _settings = require("../../settings");
+
+var _EmptyStateContent = require("./EmptyStateContent");
+
+var _excluded = ["action", "className", "illustration", "illustrationDescription", "link", "size", "subtitle", "title"];
+
+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) { (0, _defineProperty2.default)(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; }
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
+var componentName = 'EmptyState';
+
+var EmptyState = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var action = _ref.action,
+      className = _ref.className,
+      illustration = _ref.illustration,
+      illustrationDescription = _ref.illustrationDescription,
+      link = _ref.link,
+      size = _ref.size,
+      subtitle = _ref.subtitle,
+      title = _ref.title,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var renderIllustration = function renderIllustration() {
+    return /*#__PURE__*/_react.default.createElement("img", {
+      src: illustration,
+      alt: illustrationDescription,
+      className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
+    });
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, className),
+    ref: ref
+  }, (0, _devtools.getDevtoolsProps)(componentName)), illustration && renderIllustration(), /*#__PURE__*/_react.default.createElement(_EmptyStateContent.EmptyStateContent, {
+    action: action,
+    link: link,
+    size: size,
+    subtitle: subtitle,
+    title: title
+  }));
+}); // Return a placeholder if not released and not enabled by feature flag
+
+
+exports.EmptyState = EmptyState;
+exports.EmptyState = EmptyState = _settings.pkg.checkComponentEnabled(EmptyState, componentName);
+var EmptyStateDefaultProps = {
+  size: 'lg'
+};
+exports.EmptyStateDefaultProps = EmptyStateDefaultProps;
+EmptyState.propTypes = {
+  /**
+   * Empty state action button
+   */
+  action: _propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+    kind: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary']),
+    renderIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    onClick: _carbonComponentsReact.Button.propTypes.onClick,
+    text: _propTypes.default.string
+  })),
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.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.default.string,
+
+  /**
+   * The alt text for custom provided illustrations
+   */
+  illustrationDescription: _propTypes.default.string.isRequired.if(function (_ref2) {
+    var illustration = _ref2.illustration;
+    return illustration;
+  }),
+
+  /**
+   * Empty state link object
+   */
+  link: _propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Link.propTypes), {}, {
+    text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+    href: _propTypes.default.string
+  })),
+
+  /**
+   * Empty state size
+   */
+  size: _propTypes.default.oneOf(['lg', 'sm']),
+
+  /**
+   * Empty state subtext
+   */
+  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
+
+  /**
+   * Empty state heading
+   */
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired
+};
+EmptyState.defaultProps = EmptyStateDefaultProps;
+EmptyState.displayName = componentName;

package/lib/components/EmptyStates/EmptyStateContent.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmptyStateContent = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _settings = require("../../settings");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+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) { (0, _defineProperty2.default)(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; }
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--empty-state");
+var componentName = 'EmptyStateContent';
+
+var EmptyStateContent = function EmptyStateContent(_ref) {
+  var action = _ref.action,
+      link = _ref.link,
+      size = _ref.size,
+      subtitle = _ref.subtitle,
+      title = _ref.title;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h3", {
+    className: (0, _classnames.default)("".concat(blockClass, "__header"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__header--small"), size === 'sm'))
+  }, title), /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _classnames.default)("".concat(blockClass, "__subtitle"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__subtitle--small"), size === 'sm'))
+  }, subtitle), (action === null || action === void 0 ? void 0 : action.text) && (action === null || action === void 0 ? void 0 : action.onClick) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, action, {
+    className: "".concat(blockClass, "__action-button"),
+    kind: action.kind || 'tertiary',
+    onClick: action.onClick,
+    renderIcon: action.renderIcon || null
+  }), action.text), (link === null || link === void 0 ? void 0 : link.text) && (link === null || link === void 0 ? void 0 : link.href) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, (0, _extends2.default)({}, link, {
+    className: "".concat(blockClass, "__link"),
+    href: link.href
+  }), link.text));
+}; // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+
+exports.EmptyStateContent = EmptyStateContent;
+EmptyStateContent.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.
+
+EmptyStateContent.propTypes = {
+  /**
+   * Empty state action button
+   */
+  action: _propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+    iconDescription: _propTypes.default.string,
+    kind: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary']),
+    renderIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    onClick: _carbonComponentsReact.Button.propTypes.onClick,
+    text: _propTypes.default.string
+  })),
+
+  /**
+   * Empty state link object
+   */
+  link: _propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Link.propTypes), {}, {
+    text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+    href: _propTypes.default.string
+  })),
+
+  /**
+   * Empty state size
+   */
+  size: _propTypes.default.oneOf(['lg', 'sm']),
+
+  /**
+   * Empty state subtitle
+   */
+  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
+
+  /**
+   * Empty state title
+   */
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired
+};