@carbon/ibm-products 1.0.0-rc.1 → 1.1.0

package/es/components/EditSidePanel/EditSidePanel.js

@@ -0,0 +1,209 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Import portions of React that are needed.
+import React from 'react'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg
+/*, carbon */
+} from '../../settings'; // Carbon and package components we use.
+
+import { Form } from 'carbon-components-react';
+import { SidePanel } from '../SidePanel';
+import { ActionSet } from '../ActionSet';
+import '../../global/js/utils/props-helper'; // The block part of our conventional BEM class names (blockClass__E--M).
+
+var blockClass = "".concat(pkg.prefix, "--edit-side-panel");
+var sidePanelBlockClass = "".concat(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.
+ */
+
+export var EditSidePanel = /*#__PURE__*/React.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 = _objectWithoutProperties(_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 = cx(["".concat(blockClass, "__actions-container"), "".concat(sidePanelBlockClass, "__actions-container")]);
+  return /*#__PURE__*/React.createElement(SidePanel, _extends({}, rest, _objectSpread({
+    open: open,
+    ref: ref,
+    selectorPageContent: selectorPageContent,
+    onRequestClose: onRequestClose,
+    title: title,
+    subtitle: subtitle,
+    selectorPrimaryFocus: selectorPrimaryFocus
+  }, getDevtoolsProps(componentName)), {
+    placement: placement,
+    slideIn: slideIn,
+    animateTitle: false,
+    className: cx(blockClass, className),
+    size: size,
+    preventCloseOnClickOutside: true
+  }), formTitle && /*#__PURE__*/React.createElement("h3", {
+    className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
+  }, formTitle), formDescription && /*#__PURE__*/React.createElement("p", {
+    className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
+  }, formDescription), /*#__PURE__*/React.createElement(Form, {
+    className: "".concat(blockClass, "__form")
+  }, children, /*#__PURE__*/React.createElement(ActionSet, {
+    actions: actions,
+    className: actionContainerClassNames,
+    size: size
+  })));
+}); // Return a placeholder if not released and not enabled by feature flag
+
+EditSidePanel = 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.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.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.bool,
+
+  /**
+   * Specifies an optional field that provides a additional context for a form
+   */
+  formDescription: PropTypes.node,
+
+  /**
+   * Specifies a required field that provides a title for a form
+   */
+  formTitle: PropTypes.node,
+
+  /**
+   * Specifies an optional handler which is called when the CreateSidePanel
+   * is closed.
+   */
+  onRequestClose: PropTypes.func,
+
+  /**
+   * Specifies an optional handler which is called when the CreateSidePanel
+   * primary button is pressed.
+   */
+  onRequestSubmit: PropTypes.func,
+
+  /**
+   * Specifies whether the CreateSidePanel is open or not.
+   */
+  open: PropTypes.bool,
+
+  /**
+   * Determines if the side panel is on the right or left
+   */
+  placement: PropTypes.oneOf(['left', 'right']),
+
+  /**
+   * Specifies the primary button's text in the modal.
+   */
+  primaryButtonText: PropTypes.string.isRequired,
+
+  /**
+   * Specifies the secondary button's text in the modal.
+   */
+  secondaryButtonText: PropTypes.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.string.isRequired.if(function (_ref2) {
+    var slideIn = _ref2.slideIn;
+    return slideIn;
+  }),
+
+  /**
+   * Specifies which DOM element in the form should be focused.
+   */
+  selectorPrimaryFocus: PropTypes.node.isRequired,
+
+  /**
+   * Sets the size of the side panel
+   */
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'max']),
+
+  /**
+   * Specifies which DOM element in the form should be focused.
+   */
+  slideIn: PropTypes.bool,
+
+  /**
+   * The subtitle of the CreateSidePanel is optional and serves to provide more information about the modal.
+   */
+  subtitle: PropTypes.node,
+
+  /**
+   * The title of the CreateSidePanel is usually the product or service name.
+   */
+  title: PropTypes.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/es/components/EditSidePanel/index.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { EditSidePanel } from './EditSidePanel';

package/es/components/EmptyStates/EmptyState.js

@@ -0,0 +1,118 @@
+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", "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) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Import portions of React that are needed.
+import React from 'react'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Button, Link } from 'carbon-components-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).
+
+var blockClass = "".concat(pkg.prefix, "--empty-state");
+var componentName = 'EmptyState';
+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,
+      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)])
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className),
+    ref: ref
+  }, getDevtoolsProps(componentName)), illustration && renderIllustration(), /*#__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
+
+EmptyState = pkg.checkComponentEnabled(EmptyState, componentName);
+export var EmptyStateDefaultProps = {
+  size: 'lg'
+};
+EmptyState.propTypes = {
+  /**
+   * Empty state action button
+   */
+  action: PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
+    kind: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
+    renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    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
+   */
+  illustrationDescription: PropTypes.string.isRequired.if(function (_ref2) {
+    var illustration = _ref2.illustration;
+    return illustration;
+  }),
+
+  /**
+   * Empty state link object
+   */
+  link: PropTypes.shape(_objectSpread(_objectSpread({}, Link.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]).isRequired,
+
+  /**
+   * Empty state heading
+   */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
+};
+EmptyState.defaultProps = EmptyStateDefaultProps;
+EmptyState.displayName = componentName;

package/es/components/EmptyStates/EmptyStateContent.js

@@ -0,0 +1,85 @@
+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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Import portions of React that are needed.
+import React 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 { Button, Link } from 'carbon-components-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", {
+    className: cx("".concat(blockClass, "__header"), _defineProperty({}, "".concat(blockClass, "__header--small"), size === 'sm'))
+  }, title), /*#__PURE__*/React.createElement("p", {
+    className: cx("".concat(blockClass, "__subtitle"), _defineProperty({}, "".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.createElement(Button, _extends({}, 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.createElement(Link, _extends({}, 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.
+
+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.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
+    iconDescription: PropTypes.string,
+    kind: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
+    renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    onClick: Button.propTypes.onClick,
+    text: PropTypes.string
+  })),
+
+  /**
+   * Empty state link object
+   */
+  link: PropTypes.shape(_objectSpread(_objectSpread({}, Link.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]).isRequired,
+
+  /**
+   * Empty state title
+   */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired
+};

package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -0,0 +1,113 @@
+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"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Import portions of React that are needed.
+import React from 'react'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+import { Button, Link } from 'carbon-components-react';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../../global/js/utils/devtools';
+import { pkg } from '../../../settings';
+import { EmptyStateContent } from '../EmptyStateContent';
+import { ErrorIllustration } from '../assets/ErrorIllustration';
+import { EmptyStateDefaultProps } 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,
+      size = _ref.size,
+      subtitle = _ref.subtitle,
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className),
+    ref: ref
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(ErrorIllustration, {
+    theme: illustrationTheme,
+    size: 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
+
+ErrorEmptyState = pkg.checkComponentEnabled(ErrorEmptyState, componentName); // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+ErrorEmptyState.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.
+
+ErrorEmptyState.propTypes = {
+  /**
+   * Empty state action button
+   */
+  action: PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
+    kind: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
+    renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    onClick: Button.propTypes.onClick,
+    text: PropTypes.string
+  })),
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Empty state illustration theme variations.
+   * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
+   * based on your app's current theme value. Example:
+   * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
+   */
+  illustrationTheme: PropTypes.oneOf(['light', 'dark']),
+
+  /**
+   * Empty state link object
+   */
+  link: PropTypes.shape(_objectSpread(_objectSpread({}, Link.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]).isRequired,
+
+  /**
+   * Empty state title
+   */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.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.
+
+ErrorEmptyState.defaultProps = EmptyStateDefaultProps;

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { ErrorEmptyState } from './ErrorEmptyState';

package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -0,0 +1,113 @@
+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"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Import portions of React that are needed.
+import React from 'react'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Button, Link } from 'carbon-components-react';
+import { getDevtoolsProps } from '../../../global/js/utils/devtools';
+import { pkg } from '../../../settings';
+import { EmptyStateContent } from '../EmptyStateContent';
+import { NoDataIllustration } from '../assets/NoDataIllustration';
+import { EmptyStateDefaultProps } from '../EmptyState'; // The block part of our conventional BEM class names (blockClass__E--M).
+
+var blockClass = "".concat(pkg.prefix, "--empty-state");
+var componentName = 'NoDataEmptyState';
+export var NoDataEmptyState = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var action = _ref.action,
+      className = _ref.className,
+      illustrationTheme = _ref.illustrationTheme,
+      link = _ref.link,
+      size = _ref.size,
+      subtitle = _ref.subtitle,
+      title = _ref.title,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className),
+    ref: ref
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(NoDataIllustration, {
+    theme: illustrationTheme,
+    size: 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
+
+NoDataEmptyState = pkg.checkComponentEnabled(NoDataEmptyState, componentName); // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+NoDataEmptyState.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.
+
+NoDataEmptyState.propTypes = {
+  /**
+   * Empty state action button
+   */
+  action: PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
+    kind: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
+    renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    onClick: Button.propTypes.onClick,
+    text: PropTypes.string
+  })),
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Empty state illustration theme variations.
+   * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
+   * based on your app's current theme value. Example:
+   * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
+   */
+  illustrationTheme: PropTypes.oneOf(['light', 'dark']),
+
+  /**
+   * Empty state link object
+   */
+  link: PropTypes.shape(_objectSpread(_objectSpread({}, Link.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]).isRequired,
+
+  /**
+   * Empty state title
+   */
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.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.
+
+NoDataEmptyState.defaultProps = EmptyStateDefaultProps;

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export { NoDataEmptyState } from './NoDataEmptyState';