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

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -1,556 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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.
-import React, { useEffect, useState, useRef } from 'react';
-
-// Other standard imports.
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import { useClickOutside } from '../../global/js/hooks';
-import { pkg } from '../../settings';
-import { timeAgo } from './utils';
-import { NotificationsEmptyState } from '../EmptyStates/NotificationsEmptyState';
-
-// Carbon and package components we use.
-import { Button, Link, Toggle, IconButton } from '@carbon/react';
-import { ErrorFilled, WarningAltFilled, CheckmarkFilled, InformationSquareFilled, ChevronDown, Close, Settings } from '@carbon/react/icons';
-import { usePreviousValue } from '../../global/js/hooks';
-
-// The block part of our conventional BEM class names (blockClass__E--M).
-var componentName = 'NotificationsPanel';
-var blockClass = "".concat(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'
-};
-export var NotificationsPanel = /*#__PURE__*/React.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 = _objectWithoutProperties(_ref, _excluded);
-  var notificationPanelRef = useRef();
-  var _useState = useState(open),
-    _useState2 = _slicedToArray(_useState, 2),
-    shouldRender = _useState2[0],
-    setRender = _useState2[1];
-  var _useState3 = useState([]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    allNotifications = _useState4[0],
-    setAllNotifications = _useState4[1];
-  var previousState = usePreviousValue({
-    open: open
-  });
-  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-    matches: true
-  };
-  useEffect(function () {
-    // Set the notifications passed to the state within this component
-    setAllNotifications(data);
-  }, [data]);
-  useClickOutside(ref || notificationPanelRef, function () {
-    onClickOutside();
-  });
-  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);
-  };
-  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 = cx(["".concat(blockClass, "__notification-description"), (_ref2 = {}, _defineProperty(_ref2, "".concat(blockClass, "__notification-long-description"), notification.showAll), _defineProperty(_ref2, "".concat(blockClass, "__notification-short-description"), !notification.showAll), _ref2)]);
-    var showMoreButtonClassName = cx([(_ref3 = {}, _defineProperty(_ref3, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), _defineProperty(_ref3, "".concat(blockClass, "__notification-read-more-button"), !notification.showAll), _ref3)]);
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
-      className: descriptionClassName
-    }, description), description.length > trimLength && /*#__PURE__*/React.createElement(Button, {
-      kind: "ghost",
-      size: "sm",
-      renderIcon: function renderIcon(props) {
-        return /*#__PURE__*/React.createElement(ChevronDown, _extends({
-          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 = cx(["".concat(blockClass, "__notification"), "".concat(blockClass, "__notification-").concat(group)]);
-    var notificationHeaderClassName = cx(["".concat(blockClass, "__notification-title"), _defineProperty({}, "".concat(blockClass, "__notification-title-unread"), notification.unread)]);
-    return /*#__PURE__*/React.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.createElement(ErrorFilled, {
-      size: 16,
-      className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-error")])
-    }), notification.type === 'success' && /*#__PURE__*/React.createElement(CheckmarkFilled, {
-      size: 16,
-      className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-success")])
-    }), notification.type === 'warning' && /*#__PURE__*/React.createElement(WarningAltFilled, {
-      size: 16,
-      className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-warning")])
-    }), notification.type === 'informational' && /*#__PURE__*/React.createElement(InformationSquareFilled, {
-      size: 16,
-      className: cx(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-informational")])
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__notification-content")
-    }, /*#__PURE__*/React.createElement("p", {
-      className: "".concat(blockClass, "__notification-time-label")
-    }, 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.createElement("h6", {
-      className: notificationHeaderClassName
-    }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/React.createElement(Link, {
-      href: notification.link.url,
-      className: "".concat(blockClass, "__notifications-link")
-    }, notification.link.text)), /*#__PURE__*/React.createElement(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.createElement(Close, {
-      size: 16
-    })));
-  };
-  var dismissSingleNotification = function dismissSingleNotification(event, notification) {
-    event.preventDefault();
-    event.stopPropagation();
-    onDismissSingleNotification(notification);
-  };
-  var mainSectionClassName = cx(["".concat(blockClass, "__main-section"), _defineProperty({}, "".concat(blockClass, "__main-section-empty"), allNotifications && !allNotifications.length)]);
-  return shouldRender ? /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    id: blockClass,
-    className: cx(blockClass, className, "".concat(blockClass, "__container")),
-    style: {
-      animation: !reducedMotion.matches ? "".concat(open ? 'fade-in 250ms' : 'fade-out 250ms') : null
-    },
-    onAnimationEnd: onAnimationEnd,
-    ref: ref || notificationPanelRef
-  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__header-container")
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__header-flex")
-  }, /*#__PURE__*/React.createElement("h1", {
-    className: "".concat(blockClass, "__header")
-  }, title), /*#__PURE__*/React.createElement(Button, {
-    size: "sm",
-    kind: "ghost",
-    className: "".concat(blockClass, "__dismiss-button"),
-    onClick: function onClick() {
-      return onDismissAllNotifications();
-    }
-  }, dismissAllLabel)), /*#__PURE__*/React.createElement(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.createElement("div", {
-    className: mainSectionClassName
-  }, withinLastDayNotifications && withinLastDayNotifications.length ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h6", {
-    className: "".concat(blockClass, "__time-section-label")
-  }, previousLabel), previousNotifications.map(function (notification, index) {
-    return renderNotification('previous', notification, index);
-  })) : null, !allNotifications.length && /*#__PURE__*/React.createElement(NotificationsEmptyState, {
-    illustrationTheme: "dark",
-    title: "",
-    subtitle: emptyStateLabel
-  })), onViewAllClick && onSettingsClick && allNotifications && allNotifications.length ? /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__bottom-actions")
-  }, /*#__PURE__*/React.createElement(Button, {
-    kind: "ghost",
-    className: "".concat(blockClass, "__view-all-button"),
-    onClick: function onClick() {
-      return onViewAllClick();
-    }
-  }, viewAllLabel(allNotifications.length)), /*#__PURE__*/React.createElement(Button, {
-    kind: "ghost",
-    size: "sm",
-    className: "".concat(blockClass, "__settings-button"),
-    renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(Settings, _extends({
-        size: 16
-      }, props));
-    },
-    iconDescription: settingsIconDescription,
-    onClick: function onClick() {
-      return onSettingsClick();
-    }
-  })) : null) : null;
-});
-
-// Return a placeholder if not released and not enabled by feature flag
-NotificationsPanel = 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.string,
-  /**
-   * Array of data for Notifications component to render
-   */
-  data: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    type: PropTypes.oneOf(['error', 'warning', 'success', 'informational']),
-    timestamp: PropTypes.instanceOf(Date),
-    title: PropTypes.string,
-    description: PropTypes.string,
-    link: PropTypes.shape({
-      url: PropTypes.string,
-      text: PropTypes.string
-    }),
-    unread: PropTypes.bool,
-    onNotificationClick: PropTypes.func
-  })).isRequired,
-  /**
-   * Sets the `days ago` label text
-   */
-  daysAgoText: PropTypes.func,
-  /**
-   * Label for Dismiss all button
-   */
-  dismissAllLabel: PropTypes.string,
-  /**
-   * Label for Dismiss single notification icon button
-   */
-  dismissSingleNotificationIconDescription: PropTypes.string,
-  /**
-   * Determines if the `Do not disturb` toggle is on or off when the component is rendered
-   */
-  doNotDisturbDefaultToggled: PropTypes.bool,
-  /**
-   * Label for Do not disturb toggle
-   */
-  doNotDisturbLabel: PropTypes.string,
-  /**
-   * Sets the empty state label text when there are no notifications
-   */
-  emptyStateLabel: PropTypes.string,
-  /**
-   * Sets the `hour ago` label text
-   */
-  hourAgoText: PropTypes.func,
-  /**
-   * Sets the `hours ago` label text
-   */
-  hoursAgoText: PropTypes.func,
-  /**
-   * Sets the `minute ago` label text
-   */
-  minuteAgoText: PropTypes.func,
-  /**
-   * Sets the `minutes ago` label text
-   */
-  minutesAgoText: PropTypes.func,
-  /**
-   * Sets the `month ago` label text
-   */
-  monthAgoText: PropTypes.func,
-  /**
-   * Sets the `months ago` label text
-   */
-  monthsAgoText: PropTypes.func,
-  /**
-   * Sets the `now` label text
-   */
-  nowText: PropTypes.string,
-  /**
-   * Sets the notifications panel open state
-   */
-  onClickOutside: PropTypes.func.isRequired,
-  /**
-   * Function that will dismiss all notifications
-   */
-  onDismissAllNotifications: PropTypes.func,
-  /**
-   * Function that will dismiss a single notification
-   */
-  onDismissSingleNotification: PropTypes.func,
-  /**
-   * Function that returns the current selected value of the disable notification toggle
-   */
-  onDoNotDisturbChange: PropTypes.func,
-  /**
-   * Event handler for the View all button
-   */
-  onSettingsClick: PropTypes.func,
-  /**
-   * Event handler for the View all button
-   */
-  onViewAllClick: PropTypes.func,
-  /**
-   * Determines whether the notifications panel should render or not
-   */
-  open: PropTypes.bool.isRequired,
-  /**
-   * Sets the previous label text
-   */
-  previousLabel: PropTypes.string,
-  /**
-   * Sets the `read less` label text
-   */
-  readLessLabel: PropTypes.string,
-  /**
-   * Sets the `read more` label text
-   */
-  readMoreLabel: PropTypes.string,
-  /**
-   * Sets the `seconds ago` label text
-   */
-  secondsAgoText: PropTypes.func,
-  /**
-   * Sets the settings icon description text
-   */
-  settingsIconDescription: PropTypes.string,
-  /**
-   * Sets the title for the Notifications panel
-   */
-  title: PropTypes.string,
-  /**
-   * Sets the today label text
-   */
-  todayLabel: PropTypes.string,
-  /**
-   * Sets the View all button text
-   */
-  viewAllLabel: PropTypes.func,
-  /**
-   * Sets the `year ago` label text
-   */
-  yearAgoText: PropTypes.func,
-  /**
-   * Sets the `years ago` label text
-   */
-  yearsAgoText: PropTypes.func,
-  /**
-   * Sets the `Yesterday at` label text
-   */
-  yesterdayAtText: PropTypes.func,
-  /**
-   * Sets the yesterday label text
-   */
-  yesterdayLabel: PropTypes.string
-};