@carbon/ibm-products 2.0.0-rc.33 → 2.0.0-rc.38

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -0,0 +1,562 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NotificationsPanel = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _devtools = require("../../global/js/utils/devtools");
+var _hooks = require("../../global/js/hooks");
+var _settings = require("../../settings");
+var _utils = require("./utils");
+var _NotificationsEmptyState = require("../EmptyStates/NotificationsEmptyState");
+var _react2 = require("@carbon/react");
+var _icons = require("@carbon/react/icons");
+var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel"];
+/**
+ * Copyright IBM Corp. 2020, 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.
+// Other standard imports.
+// Carbon and package components we use.
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// The block part of our conventional BEM class names (blockClass__E--M).
+var componentName = 'NotificationsPanel';
+var blockClass = "".concat(_settings.pkg.prefix, "--notifications-panel");
+
+// Default values for props
+var defaults = {
+  daysAgoText: function daysAgoText(value) {
+    return "".concat(value, " days ago");
+  },
+  dismissAllLabel: 'Dismiss all',
+  dismissSingleNotificationIconDescription: 'Dismiss',
+  doNotDisturbLabel: 'Do not disturb',
+  emptyStateLabel: 'You do not have any notifications',
+  hourAgoText: function hourAgoText(value) {
+    return "".concat(value, " hour ago");
+  },
+  hoursAgoText: function hoursAgoText(value) {
+    return "".concat(value, " hours ago");
+  },
+  minuteAgoText: function minuteAgoText(value) {
+    return "".concat(value, " minute ago");
+  },
+  minutesAgoText: function minutesAgoText(value) {
+    return "".concat(value, " minutes ago");
+  },
+  monthAgoText: function monthAgoText(value) {
+    return "".concat(value, " month ago");
+  },
+  monthsAgoText: function monthsAgoText(value) {
+    return "".concat(value, " months ago");
+  },
+  nowText: 'Now',
+  onDismissAllNotifications: function onDismissAllNotifications() {},
+  onDismissSingleNotification: function onDismissSingleNotification() {},
+  previousLabel: 'Previous',
+  readLessLabel: 'Read less',
+  readMoreLabel: 'Read more',
+  secondsAgoText: function secondsAgoText(value) {
+    return "".concat(value, " seconds ago");
+  },
+  settingsIconDescription: 'Settings',
+  title: 'Notifications',
+  todayLabel: 'Today',
+  viewAllLabel: function viewAllLabel(value) {
+    return "View all (".concat(value, ")");
+  },
+  yearAgoText: function yearAgoText(value) {
+    return "".concat(value, " year ago");
+  },
+  yearsAgoText: function yearsAgoText(value) {
+    return "".concat(value, " years ago");
+  },
+  yesterdayAtText: function yesterdayAtText(value) {
+    return "Yesterday at ".concat(value);
+  },
+  yesterdayLabel: 'Yesterday'
+};
+var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    data = _ref.data,
+    _ref$daysAgoText = _ref.daysAgoText,
+    daysAgoText = _ref$daysAgoText === void 0 ? defaults.daysAgoText : _ref$daysAgoText,
+    _ref$dismissAllLabel = _ref.dismissAllLabel,
+    dismissAllLabel = _ref$dismissAllLabel === void 0 ? defaults.dismissAllLabel : _ref$dismissAllLabel,
+    _ref$dismissSingleNot = _ref.dismissSingleNotificationIconDescription,
+    dismissSingleNotificationIconDescription = _ref$dismissSingleNot === void 0 ? defaults.dismissSingleNotificationIconDescription : _ref$dismissSingleNot,
+    doNotDisturbDefaultToggled = _ref.doNotDisturbDefaultToggled,
+    _ref$doNotDisturbLabe = _ref.doNotDisturbLabel,
+    doNotDisturbLabel = _ref$doNotDisturbLabe === void 0 ? defaults.doNotDisturbLabel : _ref$doNotDisturbLabe,
+    _ref$emptyStateLabel = _ref.emptyStateLabel,
+    emptyStateLabel = _ref$emptyStateLabel === void 0 ? defaults.emptyStateLabel : _ref$emptyStateLabel,
+    _ref$hourAgoText = _ref.hourAgoText,
+    hourAgoText = _ref$hourAgoText === void 0 ? defaults.hourAgoText : _ref$hourAgoText,
+    _ref$hoursAgoText = _ref.hoursAgoText,
+    hoursAgoText = _ref$hoursAgoText === void 0 ? defaults.hoursAgoText : _ref$hoursAgoText,
+    _ref$minuteAgoText = _ref.minuteAgoText,
+    minuteAgoText = _ref$minuteAgoText === void 0 ? defaults.minuteAgoText : _ref$minuteAgoText,
+    _ref$minutesAgoText = _ref.minutesAgoText,
+    minutesAgoText = _ref$minutesAgoText === void 0 ? defaults.minutesAgoText : _ref$minutesAgoText,
+    _ref$monthAgoText = _ref.monthAgoText,
+    monthAgoText = _ref$monthAgoText === void 0 ? defaults.monthAgoText : _ref$monthAgoText,
+    _ref$monthsAgoText = _ref.monthsAgoText,
+    monthsAgoText = _ref$monthsAgoText === void 0 ? defaults.monthsAgoText : _ref$monthsAgoText,
+    _ref$nowText = _ref.nowText,
+    nowText = _ref$nowText === void 0 ? defaults.nowText : _ref$nowText,
+    onClickOutside = _ref.onClickOutside,
+    _ref$onDismissAllNoti = _ref.onDismissAllNotifications,
+    onDismissAllNotifications = _ref$onDismissAllNoti === void 0 ? defaults.onDismissAllNotifications : _ref$onDismissAllNoti,
+    _ref$onDismissSingleN = _ref.onDismissSingleNotification,
+    onDismissSingleNotification = _ref$onDismissSingleN === void 0 ? defaults.onDismissSingleNotification : _ref$onDismissSingleN,
+    onDoNotDisturbChange = _ref.onDoNotDisturbChange,
+    onSettingsClick = _ref.onSettingsClick,
+    onViewAllClick = _ref.onViewAllClick,
+    open = _ref.open,
+    _ref$previousLabel = _ref.previousLabel,
+    previousLabel = _ref$previousLabel === void 0 ? defaults.previousLabel : _ref$previousLabel,
+    _ref$readLessLabel = _ref.readLessLabel,
+    readLessLabel = _ref$readLessLabel === void 0 ? defaults.readLessLabel : _ref$readLessLabel,
+    _ref$readMoreLabel = _ref.readMoreLabel,
+    readMoreLabel = _ref$readMoreLabel === void 0 ? defaults.readMoreLabel : _ref$readMoreLabel,
+    _ref$secondsAgoText = _ref.secondsAgoText,
+    secondsAgoText = _ref$secondsAgoText === void 0 ? defaults.secondsAgoText : _ref$secondsAgoText,
+    _ref$settingsIconDesc = _ref.settingsIconDescription,
+    settingsIconDescription = _ref$settingsIconDesc === void 0 ? defaults.settingsIconDescription : _ref$settingsIconDesc,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title,
+    _ref$todayLabel = _ref.todayLabel,
+    todayLabel = _ref$todayLabel === void 0 ? defaults.todayLabel : _ref$todayLabel,
+    _ref$viewAllLabel = _ref.viewAllLabel,
+    viewAllLabel = _ref$viewAllLabel === void 0 ? defaults.viewAllLabel : _ref$viewAllLabel,
+    _ref$yearAgoText = _ref.yearAgoText,
+    yearAgoText = _ref$yearAgoText === void 0 ? defaults.yearAgoText : _ref$yearAgoText,
+    _ref$yearsAgoText = _ref.yearsAgoText,
+    yearsAgoText = _ref$yearsAgoText === void 0 ? defaults.yearsAgoText : _ref$yearsAgoText,
+    _ref$yesterdayAtText = _ref.yesterdayAtText,
+    yesterdayAtText = _ref$yesterdayAtText === void 0 ? defaults.yesterdayAtText : _ref$yesterdayAtText,
+    _ref$yesterdayLabel = _ref.yesterdayLabel,
+    yesterdayLabel = _ref$yesterdayLabel === void 0 ? defaults.yesterdayLabel : _ref$yesterdayLabel,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var notificationPanelRef = (0, _react.useRef)();
+  var _useState = (0, _react.useState)(open),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    shouldRender = _useState2[0],
+    setRender = _useState2[1];
+  var _useState3 = (0, _react.useState)([]),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    allNotifications = _useState4[0],
+    setAllNotifications = _useState4[1];
+  var previousState = (0, _hooks.usePreviousValue)({
+    open: open
+  });
+  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
+    matches: true
+  };
+  (0, _react.useEffect)(function () {
+    // Set the notifications passed to the state within this component
+    setAllNotifications(data);
+  }, [data]);
+  (0, _hooks.useClickOutside)(ref || notificationPanelRef, function () {
+    onClickOutside();
+  });
+  (0, _react.useEffect)(function () {
+    // initialize the notification panel to open
+    if (open) {
+      setRender(true);
+    }
+  }, [open]);
+  var onAnimationEnd = function onAnimationEnd() {
+    // initialize the notification panel to close
+    !open && setRender(false);
+  };
+  (0, _react.useEffect)(function () {
+    if (!open && previousState !== null && previousState !== void 0 && previousState.open && reducedMotion.matches) {
+      setRender(false);
+    }
+  }, [open, reducedMotion.matches, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
+  var sortChronologically = function sortChronologically(arr) {
+    if (!arr || arr && !arr.length) {
+      return;
+    }
+    return arr.sort(function (a, b) {
+      return b.timestamp - a.timestamp;
+    });
+  };
+
+  // Notifications should be grouped by "Today", "Yesterday", and "Previous", the variables
+  // below filter the notifications based on those conditions and then render them in those groups
+  var yesterdayDate = new Date();
+  yesterdayDate = new Date(yesterdayDate.setDate(yesterdayDate.getDate() - 1));
+  var dayBeforeYesterdayDate = new Date();
+  dayBeforeYesterdayDate = new Date(dayBeforeYesterdayDate.setDate(dayBeforeYesterdayDate.getDate() - 2));
+  var withinLastDayNotifications = allNotifications && allNotifications.length && allNotifications.filter(function (item) {
+    return item.timestamp.getTime() >= yesterdayDate.getTime();
+  });
+  withinLastDayNotifications = sortChronologically(withinLastDayNotifications);
+  var previousDayNotifications = allNotifications && allNotifications.length && allNotifications.filter(function (item) {
+    return item.timestamp.getTime() < yesterdayDate.getTime() && item.timestamp.getTime() >= dayBeforeYesterdayDate.getTime();
+  });
+  previousDayNotifications = sortChronologically(previousDayNotifications);
+  var previousNotifications = allNotifications && allNotifications.length && allNotifications.filter(function (item) {
+    return item.timestamp.getTime() < dayBeforeYesterdayDate.getTime();
+  });
+  previousNotifications = sortChronologically(previousNotifications);
+  var renderDescription = function renderDescription(id) {
+    var _ref2, _ref3;
+    var notification = allNotifications && allNotifications.length && allNotifications.filter(function (item) {
+      return item.id === id;
+    })[0];
+    var trimLength = 88;
+    var description = notification.description;
+    var descriptionClassName = (0, _classnames.default)(["".concat(blockClass, "__notification-description"), (_ref2 = {}, (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__notification-long-description"), notification.showAll), (0, _defineProperty2.default)(_ref2, "".concat(blockClass, "__notification-short-description"), !notification.showAll), _ref2)]);
+    var showMoreButtonClassName = (0, _classnames.default)([(_ref3 = {}, (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "__notification-read-more-button"), !notification.showAll), _ref3)]);
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+      className: descriptionClassName
+    }, description), description.length > trimLength && /*#__PURE__*/_react.default.createElement(_react2.Button, {
+      kind: "ghost",
+      size: "sm",
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, (0, _extends2.default)({
+          size: 16
+        }, props));
+      },
+      iconDescription: notification.showAll ? readLessLabel : readMoreLabel,
+      onClick: function onClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        var newData = allNotifications.map(function (item) {
+          if (item.id === notification.id) {
+            return Object.assign({}, item, {
+              showAll: !item.showAll
+            });
+          }
+          return item;
+        });
+        setAllNotifications(newData);
+      },
+      className: showMoreButtonClassName
+    }, notification.showAll ? readLessLabel : readMoreLabel));
+  };
+  var renderNotification = function renderNotification(group, notification, index) {
+    var notificationClassName = (0, _classnames.default)(["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
+    var notificationHeaderClassName = (0, _classnames.default)(["".concat(blockClass, "__notification-title"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__notification-title-unread"), notification.unread)]);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "aria-label": notification.title,
+      key: "".concat(notification.timestamp, "-").concat(notification.title, "-").concat(index),
+      className: notificationClassName,
+      type: "button",
+      role: "button",
+      tabIndex: 0,
+      onClick: function onClick() {
+        return notification.onNotificationClick(notification);
+      },
+      onKeyDown: function onKeyDown(event) {
+        if (event.target.classList.contains("".concat(blockClass, "__dismiss-single-button"))) {
+          return;
+        }
+        event.which === 13 && notification.onNotificationClick(notification);
+      }
+    }, notification.type === 'error' && /*#__PURE__*/_react.default.createElement(_icons.ErrorFilled, {
+      size: 16,
+      className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-error")])
+    }), notification.type === 'success' && /*#__PURE__*/_react.default.createElement(_icons.CheckmarkFilled, {
+      size: 16,
+      className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-success")])
+    }), notification.type === 'warning' && /*#__PURE__*/_react.default.createElement(_icons.WarningAltFilled, {
+      size: 16,
+      className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-warning")])
+    }), notification.type === 'informational' && /*#__PURE__*/_react.default.createElement(_icons.InformationSquareFilled, {
+      size: 16,
+      className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-informational")])
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__notification-content")
+    }, /*#__PURE__*/_react.default.createElement("p", {
+      className: "".concat(blockClass, "__notification-time-label")
+    }, (0, _utils.timeAgo)({
+      previousTime: notification.timestamp,
+      secondsAgoText: secondsAgoText,
+      minuteAgoText: minuteAgoText,
+      minutesAgoText: minutesAgoText,
+      hoursAgoText: hoursAgoText,
+      hourAgoText: hourAgoText,
+      daysAgoText: daysAgoText,
+      yesterdayAtText: yesterdayAtText,
+      monthsAgoText: monthsAgoText,
+      monthAgoText: monthAgoText,
+      yearsAgoText: yearsAgoText,
+      yearAgoText: yearAgoText,
+      nowText: nowText
+    })), /*#__PURE__*/_react.default.createElement("h6", {
+      className: notificationHeaderClassName
+    }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/_react.default.createElement(_react2.Link, {
+      href: notification.link.url,
+      className: "".concat(blockClass, "__notifications-link")
+    }, notification.link.text)), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+      align: "left",
+      kind: "ghost",
+      size: "sm",
+      label: dismissSingleNotificationIconDescription,
+      className: "".concat(blockClass, "__dismiss-single-button"),
+      onClick: function onClick(event) {
+        return dismissSingleNotification(event, notification);
+      }
+    }, /*#__PURE__*/_react.default.createElement(_icons.Close, {
+      size: 16
+    })));
+  };
+  var dismissSingleNotification = function dismissSingleNotification(event, notification) {
+    event.preventDefault();
+    event.stopPropagation();
+    onDismissSingleNotification(notification);
+  };
+  var mainSectionClassName = (0, _classnames.default)(["".concat(blockClass, "__main-section"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__main-section-empty"), allNotifications && !allNotifications.length)]);
+  return shouldRender ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
+    id: blockClass,
+    className: (0, _classnames.default)(blockClass, className, "".concat(blockClass, "__container")),
+    style: {
+      animation: !reducedMotion.matches ? "".concat(open ? 'fade-in 250ms' : 'fade-out 250ms') : null
+    },
+    onAnimationEnd: onAnimationEnd,
+    ref: ref || notificationPanelRef
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__header-container")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__header-flex")
+  }, /*#__PURE__*/_react.default.createElement("h1", {
+    className: "".concat(blockClass, "__header")
+  }, title), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    size: "sm",
+    kind: "ghost",
+    className: "".concat(blockClass, "__dismiss-button"),
+    onClick: function onClick() {
+      return onDismissAllNotifications();
+    }
+  }, dismissAllLabel)), /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
+    size: "sm",
+    className: "".concat(blockClass, "__do-not-disturb-toggle"),
+    id: "".concat(blockClass, "__do-not-disturb-toggle-component"),
+    labelA: doNotDisturbLabel,
+    labelB: doNotDisturbLabel,
+    onToggle: function onToggle(event) {
+      return onDoNotDisturbChange(event);
+    },
+    defaultToggled: doNotDisturbDefaultToggled,
+    "aria-label": doNotDisturbLabel,
+    labelText: doNotDisturbLabel
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: mainSectionClassName
+  }, withinLastDayNotifications && withinLastDayNotifications.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h6", {
+    className: "".concat(blockClass, "__time-section-label")
+  }, todayLabel), withinLastDayNotifications.map(function (notification, index) {
+    return renderNotification('today', notification, index);
+  })) : null, previousDayNotifications && previousDayNotifications.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h6", {
+    className: "".concat(blockClass, "__time-section-label")
+  }, yesterdayLabel), previousDayNotifications.map(function (notification, index) {
+    return renderNotification('yesterday', notification, index);
+  })) : null, previousNotifications && previousNotifications.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h6", {
+    className: "".concat(blockClass, "__time-section-label")
+  }, previousLabel), previousNotifications.map(function (notification, index) {
+    return renderNotification('previous', notification, index);
+  })) : null, !allNotifications.length && /*#__PURE__*/_react.default.createElement(_NotificationsEmptyState.NotificationsEmptyState, {
+    illustrationTheme: "dark",
+    title: "",
+    subtitle: emptyStateLabel
+  })), onViewAllClick && onSettingsClick && allNotifications && allNotifications.length ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__bottom-actions")
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    kind: "ghost",
+    className: "".concat(blockClass, "__view-all-button"),
+    onClick: function onClick() {
+      return onViewAllClick();
+    }
+  }, viewAllLabel(allNotifications.length)), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    kind: "ghost",
+    size: "sm",
+    className: "".concat(blockClass, "__settings-button"),
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_icons.Settings, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
+    iconDescription: settingsIconDescription,
+    onClick: function onClick() {
+      return onSettingsClick();
+    }
+  })) : null) : null;
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.NotificationsPanel = NotificationsPanel;
+exports.NotificationsPanel = NotificationsPanel = _settings.pkg.checkComponentEnabled(NotificationsPanel, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+NotificationsPanel.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.
+NotificationsPanel.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * Array of data for Notifications component to render
+   */
+  data: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    type: _propTypes.default.oneOf(['error', 'warning', 'success', 'informational']),
+    timestamp: _propTypes.default.instanceOf(Date),
+    title: _propTypes.default.string,
+    description: _propTypes.default.string,
+    link: _propTypes.default.shape({
+      url: _propTypes.default.string,
+      text: _propTypes.default.string
+    }),
+    unread: _propTypes.default.bool,
+    onNotificationClick: _propTypes.default.func
+  })).isRequired,
+  /**
+   * Sets the `days ago` label text
+   */
+  daysAgoText: _propTypes.default.func,
+  /**
+   * Label for Dismiss all button
+   */
+  dismissAllLabel: _propTypes.default.string,
+  /**
+   * Label for Dismiss single notification icon button
+   */
+  dismissSingleNotificationIconDescription: _propTypes.default.string,
+  /**
+   * Determines if the `Do not disturb` toggle is on or off when the component is rendered
+   */
+  doNotDisturbDefaultToggled: _propTypes.default.bool,
+  /**
+   * Label for Do not disturb toggle
+   */
+  doNotDisturbLabel: _propTypes.default.string,
+  /**
+   * Sets the empty state label text when there are no notifications
+   */
+  emptyStateLabel: _propTypes.default.string,
+  /**
+   * Sets the `hour ago` label text
+   */
+  hourAgoText: _propTypes.default.func,
+  /**
+   * Sets the `hours ago` label text
+   */
+  hoursAgoText: _propTypes.default.func,
+  /**
+   * Sets the `minute ago` label text
+   */
+  minuteAgoText: _propTypes.default.func,
+  /**
+   * Sets the `minutes ago` label text
+   */
+  minutesAgoText: _propTypes.default.func,
+  /**
+   * Sets the `month ago` label text
+   */
+  monthAgoText: _propTypes.default.func,
+  /**
+   * Sets the `months ago` label text
+   */
+  monthsAgoText: _propTypes.default.func,
+  /**
+   * Sets the `now` label text
+   */
+  nowText: _propTypes.default.string,
+  /**
+   * Sets the notifications panel open state
+   */
+  onClickOutside: _propTypes.default.func.isRequired,
+  /**
+   * Function that will dismiss all notifications
+   */
+  onDismissAllNotifications: _propTypes.default.func,
+  /**
+   * Function that will dismiss a single notification
+   */
+  onDismissSingleNotification: _propTypes.default.func,
+  /**
+   * Function that returns the current selected value of the disable notification toggle
+   */
+  onDoNotDisturbChange: _propTypes.default.func,
+  /**
+   * Event handler for the View all button
+   */
+  onSettingsClick: _propTypes.default.func,
+  /**
+   * Event handler for the View all button
+   */
+  onViewAllClick: _propTypes.default.func,
+  /**
+   * Determines whether the notifications panel should render or not
+   */
+  open: _propTypes.default.bool.isRequired,
+  /**
+   * Sets the previous label text
+   */
+  previousLabel: _propTypes.default.string,
+  /**
+   * Sets the `read less` label text
+   */
+  readLessLabel: _propTypes.default.string,
+  /**
+   * Sets the `read more` label text
+   */
+  readMoreLabel: _propTypes.default.string,
+  /**
+   * Sets the `seconds ago` label text
+   */
+  secondsAgoText: _propTypes.default.func,
+  /**
+   * Sets the settings icon description text
+   */
+  settingsIconDescription: _propTypes.default.string,
+  /**
+   * Sets the title for the Notifications panel
+   */
+  title: _propTypes.default.string,
+  /**
+   * Sets the today label text
+   */
+  todayLabel: _propTypes.default.string,
+  /**
+   * Sets the View all button text
+   */
+  viewAllLabel: _propTypes.default.func,
+  /**
+   * Sets the `year ago` label text
+   */
+  yearAgoText: _propTypes.default.func,
+  /**
+   * Sets the `years ago` label text
+   */
+  yearsAgoText: _propTypes.default.func,
+  /**
+   * Sets the `Yesterday at` label text
+   */
+  yesterdayAtText: _propTypes.default.func,
+  /**
+   * Sets the yesterday label text
+   */
+  yesterdayLabel: _propTypes.default.string
+};