@carbon/react 0.17.0-rc.0 → 1.0.0

package/lib/components/Notification/Notification.js

@@ -0,0 +1,544 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var iconsReact = require('@carbon/icons-react');
+var Button = require('../Button/Button.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _iconTypes;
+
+var _excluded = ["children", "className", "onClick"],
+    _excluded2 = ["ariaLabel", "className", "iconDescription", "type", "renderIcon", "name", "notificationType"],
+    _excluded3 = ["title", "subtitle", "caption", "notificationType", "children"],
+    _excluded4 = ["role", "notificationType", "onClose", "onCloseButtonClick", "iconDescription", "statusIconDescription", "className", "caption", "subtitle", "title", "kind", "lowContrast", "hideCloseButton", "children", "timeout"],
+    _excluded5 = ["actions", "role", "notificationType", "onClose", "onCloseButtonClick", "iconDescription", "statusIconDescription", "className", "subtitle", "title", "kind", "lowContrast", "hideCloseButton", "children"];
+function NotificationActionButton(_ref) {
+  var children = _ref.children,
+      customClassName = _ref.className,
+      onClick = _ref.onClick,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var className = cx__default["default"](customClassName, "".concat(prefix, "--inline-notification__action-button"));
+  return /*#__PURE__*/React__default["default"].createElement(Button["default"], _rollupPluginBabelHelpers["extends"]({
+    className: className,
+    kind: "ghost",
+    onClick: onClick,
+    size: "small"
+  }, rest), children);
+}
+NotificationActionButton.propTypes = {
+  /**
+   * Specify the content of the notification action button.
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the notification action button
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally specify a click handler for the notification action button.
+   */
+  onClick: PropTypes__default["default"].func
+};
+function NotificationButton(_ref2) {
+  var ariaLabel = _ref2.ariaLabel,
+      className = _ref2.className,
+      iconDescription = _ref2.iconDescription,
+      type = _ref2.type,
+      IconTag = _ref2.renderIcon,
+      name = _ref2.name,
+      notificationType = _ref2.notificationType,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref2, _excluded2);
+
+  var prefix = usePrefix.usePrefix();
+  var buttonClassName = cx__default["default"](className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--").concat(notificationType, "-notification__close-button"), notificationType));
+  var iconClassName = cx__default["default"](_rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--").concat(notificationType, "-notification__close-icon"), notificationType));
+  return /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    // eslint-disable-next-line react/button-has-type
+    type: type,
+    "aria-label": iconDescription,
+    title: iconDescription,
+    className: buttonClassName
+  }), IconTag && /*#__PURE__*/React__default["default"].createElement(IconTag, {
+    "aria-label": ariaLabel,
+    className: iconClassName,
+    name: name
+  }));
+}
+NotificationButton.propTypes = {
+  /**
+   * Specify a label to be read by screen readers on the notification button
+   */
+  ariaLabel: PropTypes__default["default"].string,
+
+  /**
+   * Specify an optional className to be applied to the notification button
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Provide a description for "close" icon that can be read by screen readers
+   */
+  iconDescription: PropTypes__default["default"].string,
+
+  /**
+   * Specify an optional icon for the Button through a string,
+   * if something but regular "close" icon is desirable
+   */
+  name: PropTypes__default["default"].string,
+
+  /**
+   * Specify the notification type
+   */
+  notificationType: PropTypes__default["default"].oneOf(['toast', 'inline']),
+
+  /**
+   * Optional prop to allow overriding the icon rendering.
+   * Can be a React component class
+   */
+  renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
+
+  /**
+   * Optional prop to specify the type of the Button
+   */
+  type: PropTypes__default["default"].string
+};
+NotificationButton.defaultProps = {
+  ariaLabel: 'close notification',
+  // TODO: deprecate this prop
+  notificationType: 'toast',
+  type: 'button',
+  iconDescription: 'close icon',
+  renderIcon: iconsReact.Close
+};
+function NotificationTextDetails(_ref3) {
+  var title = _ref3.title,
+      subtitle = _ref3.subtitle,
+      caption = _ref3.caption,
+      notificationType = _ref3.notificationType,
+      children = _ref3.children,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
+
+  var prefix = usePrefix.usePrefix();
+
+  if (notificationType === 'toast') {
+    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+      className: "".concat(prefix, "--toast-notification__details")
+    }), /*#__PURE__*/React__default["default"].createElement("h3", {
+      className: "".concat(prefix, "--toast-notification__title")
+    }, title), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(prefix, "--toast-notification__subtitle")
+    }, subtitle), caption && /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(prefix, "--toast-notification__caption")
+    }, caption), children);
+  }
+
+  if (notificationType === 'inline') {
+    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+      className: "".concat(prefix, "--inline-notification__text-wrapper")
+    }), /*#__PURE__*/React__default["default"].createElement("p", {
+      className: "".concat(prefix, "--inline-notification__title")
+    }, title), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "".concat(prefix, "--inline-notification__subtitle")
+    }, subtitle), children);
+  }
+}
+NotificationTextDetails.propTypes = {
+  /**
+   * Specify the caption
+   */
+  caption: PropTypes__default["default"].node,
+
+  /**
+   * Pass in the children that will be rendered in NotificationTextDetails
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify the notification type
+   */
+  notificationType: PropTypes__default["default"].oneOf(['toast', 'inline']),
+
+  /**
+   * Specify the sub-title
+   */
+  subtitle: PropTypes__default["default"].node,
+
+  /**
+   * Specify the title
+   */
+  title: PropTypes__default["default"].string
+};
+NotificationTextDetails.defaultProps = {
+  title: 'title',
+  notificationType: 'toast'
+};
+var iconTypes = (_iconTypes = {
+  error: iconsReact.ErrorFilled,
+  success: iconsReact.CheckmarkFilled,
+  warning: iconsReact.WarningFilled
+}, _rollupPluginBabelHelpers.defineProperty(_iconTypes, 'warning-alt', iconsReact.WarningAltFilled), _rollupPluginBabelHelpers.defineProperty(_iconTypes, "info", iconsReact.InformationFilled), _rollupPluginBabelHelpers.defineProperty(_iconTypes, 'info-square', iconsReact.InformationSquareFilled), _iconTypes);
+
+function NotificationIcon(_ref4) {
+  var iconDescription = _ref4.iconDescription,
+      kind = _ref4.kind,
+      notificationType = _ref4.notificationType;
+  var prefix = usePrefix.usePrefix();
+  var IconForKind = iconTypes[kind];
+
+  if (!IconForKind) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement(IconForKind, {
+    className: "".concat(prefix, "--").concat(notificationType, "-notification__icon")
+  }, /*#__PURE__*/React__default["default"].createElement("title", null, iconDescription));
+}
+
+NotificationIcon.propTypes = {
+  iconDescription: PropTypes__default["default"].string.isRequired,
+  kind: PropTypes__default["default"].oneOf(['error', 'success', 'warning', 'warning-alt', 'info', 'info-square']).isRequired,
+  notificationType: PropTypes__default["default"].oneOf(['inline', 'toast']).isRequired
+};
+function ToastNotification(_ref5) {
+  var _cx3;
+
+  var role = _ref5.role,
+      notificationType = _ref5.notificationType,
+      onClose = _ref5.onClose,
+      onCloseButtonClick = _ref5.onCloseButtonClick,
+      iconDescription = _ref5.iconDescription,
+      statusIconDescription = _ref5.statusIconDescription,
+      className = _ref5.className,
+      caption = _ref5.caption,
+      subtitle = _ref5.subtitle,
+      title = _ref5.title,
+      kind = _ref5.kind,
+      lowContrast = _ref5.lowContrast,
+      hideCloseButton = _ref5.hideCloseButton,
+      children = _ref5.children,
+      timeout = _ref5.timeout,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref5, _excluded4);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _useState = React.useState(true),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var containerClassName = cx__default["default"](className, (_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--toast-notification"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--toast-notification--low-contrast"), lowContrast), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--toast-notification--").concat(kind), kind), _cx3));
+
+  var handleClose = function handleClose(evt) {
+    if (!onClose || onClose(evt) !== false) {
+      setIsOpen(false);
+    }
+  };
+
+  function handleCloseButtonClick(event) {
+    onCloseButtonClick(event);
+    handleClose(event);
+  }
+
+  var savedOnClose = React.useRef(onClose);
+  React.useEffect(function () {
+    savedOnClose.current = onClose;
+  });
+  React.useEffect(function () {
+    if (!timeout) {
+      return;
+    }
+
+    var timeoutId = window.setTimeout(function (event) {
+      setIsOpen(false);
+
+      if (savedOnClose.current) {
+        savedOnClose.current(event);
+      }
+    }, timeout);
+    return function () {
+      window.clearTimeout(timeoutId);
+    };
+  }, [timeout]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    role: role,
+    kind: kind,
+    className: containerClassName
+  }), /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
+    notificationType: notificationType,
+    kind: kind,
+    iconDescription: statusIconDescription || "".concat(kind, " icon")
+  }), /*#__PURE__*/React__default["default"].createElement(NotificationTextDetails, {
+    title: title,
+    subtitle: subtitle,
+    caption: caption,
+    notificationType: notificationType
+  }, children), !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
+    iconDescription: iconDescription,
+    notificationType: notificationType,
+    onClick: handleCloseButtonClick
+  }));
+}
+ToastNotification.propTypes = {
+  /**
+   * Specify the caption
+   */
+  caption: PropTypes__default["default"].node,
+
+  /**
+   * Pass in the children that will be rendered within the ToastNotification
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the notification box
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the close button should be disabled, or not
+   */
+  hideCloseButton: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a description for "close" icon that can be read by screen readers
+   */
+  iconDescription: PropTypes__default["default"].string,
+
+  /**
+   * Specify what state the notification represents
+   */
+  kind: PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']).isRequired,
+
+  /**
+   * Specify whether you are using the low contrast variant of the ToastNotification.
+   */
+  lowContrast: PropTypes__default["default"].bool,
+
+  /**
+   * By default, this value is "toast". You can also provide an alternate type
+   * if it makes sense for the underlying `<NotificationTextDetails>` and `<NotificationButton>`
+   */
+  notificationType: PropTypes__default["default"].string,
+
+  /**
+   * Provide a function that is called when menu is closed
+   */
+  onClose: PropTypes__default["default"].func,
+
+  /**
+   * Provide a function that is called when the close button is clicked
+   */
+  onCloseButtonClick: PropTypes__default["default"].func,
+
+  /**
+   * By default, this value is "alert". You can also provide an alternate
+   * role if it makes sense from the accessibility-side
+   */
+  role: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Provide a description for "status" icon that can be read by screen readers
+   */
+  statusIconDescription: PropTypes__default["default"].string,
+
+  /**
+   * Specify the sub-title
+   */
+  subtitle: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional duration the notification should be closed in
+   */
+  timeout: PropTypes__default["default"].number,
+
+  /**
+   * Specify the title
+   */
+  title: PropTypes__default["default"].string.isRequired
+};
+ToastNotification.defaultProps = {
+  kind: 'error',
+  title: 'provide a title',
+  role: 'alert',
+  notificationType: 'toast',
+  iconDescription: 'closes notification',
+  onCloseButtonClick: function onCloseButtonClick() {},
+  hideCloseButton: false,
+  timeout: 0
+};
+function InlineNotification(_ref6) {
+  var _cx4;
+
+  var actions = _ref6.actions,
+      role = _ref6.role,
+      notificationType = _ref6.notificationType,
+      onClose = _ref6.onClose,
+      onCloseButtonClick = _ref6.onCloseButtonClick,
+      iconDescription = _ref6.iconDescription,
+      statusIconDescription = _ref6.statusIconDescription,
+      className = _ref6.className,
+      subtitle = _ref6.subtitle,
+      title = _ref6.title,
+      kind = _ref6.kind,
+      lowContrast = _ref6.lowContrast,
+      hideCloseButton = _ref6.hideCloseButton,
+      children = _ref6.children,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref6, _excluded5);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _useState3 = React.useState(true),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
+
+  var containerClassName = cx__default["default"](className, (_cx4 = {}, _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--inline-notification"), true), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--inline-notification--low-contrast"), lowContrast), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--inline-notification--").concat(kind), kind), _rollupPluginBabelHelpers.defineProperty(_cx4, "".concat(prefix, "--inline-notification--hide-close-button"), hideCloseButton), _cx4));
+
+  var handleClose = function handleClose(evt) {
+    if (!onClose || onClose(evt) !== false) {
+      setIsOpen(false);
+    }
+  };
+
+  function handleCloseButtonClick(event) {
+    onCloseButtonClick(event);
+    handleClose(event);
+  }
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    role: role,
+    kind: kind,
+    className: containerClassName
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--inline-notification__details")
+  }, /*#__PURE__*/React__default["default"].createElement(NotificationIcon, {
+    notificationType: notificationType,
+    kind: kind,
+    iconDescription: statusIconDescription || "".concat(kind, " icon")
+  }), /*#__PURE__*/React__default["default"].createElement(NotificationTextDetails, {
+    title: title,
+    subtitle: subtitle,
+    notificationType: notificationType
+  }, children)), actions, !hideCloseButton && /*#__PURE__*/React__default["default"].createElement(NotificationButton, {
+    iconDescription: iconDescription,
+    notificationType: notificationType,
+    onClick: handleCloseButtonClick
+  }));
+}
+InlineNotification.propTypes = {
+  /**
+   * Pass in the action nodes that will be rendered within the InlineNotification
+   */
+  actions: PropTypes__default["default"].node,
+
+  /**
+   * Pass in the children that will be rendered within the InlineNotification
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Specify an optional className to be applied to the notification box
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify the close button should be disabled, or not
+   */
+  hideCloseButton: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a description for "close" icon that can be read by screen readers
+   */
+  iconDescription: PropTypes__default["default"].string,
+
+  /**
+   * Specify what state the notification represents
+   */
+  kind: PropTypes__default["default"].oneOf(['error', 'info', 'info-square', 'success', 'warning', 'warning-alt']).isRequired,
+
+  /**
+   * Specify whether you are using the low contrast variant of the InlineNotification.
+   */
+  lowContrast: PropTypes__default["default"].bool,
+
+  /**
+   * By default, this value is "inline". You can also provide an alternate type
+   * if it makes sense for the underlying `<NotificationTextDetails>` and `<NotificationButton>`
+   */
+  notificationType: PropTypes__default["default"].string,
+
+  /**
+   * Provide a function that is called when menu is closed
+   */
+  onClose: PropTypes__default["default"].func,
+
+  /**
+   * Provide a function that is called when the close button is clicked
+   */
+  onCloseButtonClick: PropTypes__default["default"].func,
+
+  /**
+   * By default, this value is "alert". You can also provide an alternate
+   * role if it makes sense from the accessibility-side
+   */
+  role: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * Provide a description for "status" icon that can be read by screen readers
+   */
+  statusIconDescription: PropTypes__default["default"].string,
+
+  /**
+   * Specify the sub-title
+   */
+  subtitle: PropTypes__default["default"].node,
+
+  /**
+   * Specify the title
+   */
+  title: PropTypes__default["default"].string.isRequired
+};
+InlineNotification.defaultProps = {
+  role: 'alert',
+  notificationType: 'inline',
+  iconDescription: 'closes notification',
+  onCloseButtonClick: function onCloseButtonClick() {},
+  hideCloseButton: false
+};
+
+exports.InlineNotification = InlineNotification;
+exports.NotificationActionButton = NotificationActionButton;
+exports.NotificationButton = NotificationButton;
+exports.NotificationTextDetails = NotificationTextDetails;
+exports.ToastNotification = ToastNotification;

package/lib/components/Notification/index.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Notification = require('./next/Notification.js');
+var Notification$1 = require('./Notification.js');
+var ComponentToggle = require('../../internal/ComponentToggle.js');
+
+var NotificationActionButton = ComponentToggle.createComponentToggle({
+  name: 'NotificationActionButton',
+  next: Notification.NotificationActionButton,
+  classic: Notification$1.NotificationActionButton
+});
+var NotificationTextDetails = ComponentToggle.createComponentToggle({
+  name: 'NotificationTextDetails',
+  classic: Notification$1.NotificationTextDetails
+});
+var NotificationButton = ComponentToggle.createComponentToggle({
+  name: 'NotificationButton',
+  next: Notification.NotificationButton,
+  classic: Notification$1.NotificationButton
+});
+var ToastNotification = ComponentToggle.createComponentToggle({
+  name: 'ToastNotification',
+  next: Notification.ToastNotification,
+  classic: Notification$1.ToastNotification
+});
+var InlineNotification = ComponentToggle.createComponentToggle({
+  name: 'InlineNotification',
+  next: Notification.InlineNotification,
+  classic: Notification$1.InlineNotification
+});
+var ActionableNotification = ComponentToggle.createComponentToggle({
+  name: 'ActionableNotification',
+  next: Notification.ActionableNotification,
+  classic: null
+});
+
+exports.ActionableNotification = ActionableNotification;
+exports.InlineNotification = InlineNotification;
+exports.NotificationActionButton = NotificationActionButton;
+exports.NotificationButton = NotificationButton;
+exports.NotificationTextDetails = NotificationTextDetails;
+exports.ToastNotification = ToastNotification;