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

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -1,562 +0,0 @@
-"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
-};