@patternfly/react-core 5.0.0-alpha.87 → 5.0.0-alpha.88

package/src/demos/Tabs.md

@@ -12,7 +12,6 @@ import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import { KebabToggle } from '@patternfly/react-core/deprecated';
 
 ## Demos
 

package/src/demos/Toolbar.md

@@ -4,15 +4,6 @@ section: components
 ---
 
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import {
-Dropdown as DropdownDeprecated,
-DropdownItem as DropdownItemDeprecated,
-DropdownToggle,
-DropdownToggleAction,
-DropdownPosition,
-DropdownSeparator
-} from '@patternfly/react-core/deprecated';
-
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
@@ -42,20 +33,16 @@ import {
   PageSection,
   PageSectionVariants,
   Toolbar,
-  ToolbarContent, 
-  ToolbarGroup, 
-  ToolbarItem, 
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
   ToolbarToggleGroup,
-  Tooltip
+  Tooltip,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  Divider
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  DropdownToggle,
-  DropdownToggleAction,
-  DropdownPosition,
-  DropdownSeparator
-} from '@patternfly/react-core/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 import PauseIcon from '@patternfly/react-icons/dist/esm/icons/pause-icon';
@@ -97,18 +84,18 @@ class ConsoleLogViewerToolbar extends React.Component {
     };
 
     this.onContainerToggle = () => {
-      this.setState(prevState => {
+      this.setState((prevState) => {
         return {
           containerExpanded: !prevState.containerExpanded
-        }
+        };
       });
     };
 
     this.onContainerToggleMobile = () => {
-      this.setState(prevState => {
+      this.setState((prevState) => {
         return {
           containerExpandedMobile: !prevState.containerExpandedMobile
-        }
+        };
       });
     };
 
@@ -126,84 +113,72 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.onOptionToggle = (_event, isExpanded) => {
-      this.setState({
-        optionExpanded: isExpanded
-      });
+    this.onOptionToggle = () => {
+      this.setState((prevState) => ({
+        optionExpanded: !prevState.optionExpanded
+      }));
     };
 
-    this.onOptionToggleMobile = (_event, isExpanded) => {
-      this.setState({
-        optionExpandedMobile: isExpanded
-      });
+    this.onOptionToggleMobile = () => {
+      this.setState((prevState) => ({
+        optionExpandedMobile: !prevState.optionExpandedMobile
+      }));
     };
 
-    this.onOptionSelect = (event) => {
-      this.setState({
-        optionExpanded: !this.state.optionExpanded
-      });
+    this.onExternalToggle = () => {
+      this.setState((prevState) => ({
+        externalExpanded: !prevState.externalExpanded
+      }));
     };
 
-    this.onOptionSelectMobile = (event) => {
-      this.setState({
-        optionExpandedMobile: !this.state.optionExpandedMobile
-      });
+    this.onExternalToggleMobile = () => {
+      this.setState((prevState) => ({
+        externalExpandedMobile: !prevState.externalExpandedMobile
+      }));
     };
 
-    this.onExternalToggle = (_event, isExpanded) => {
+    this.onExternalSelect = () => {
       this.setState({
-        externalExpanded: isExpanded
+        externalExpanded: false
       });
     };
 
-    this.onExternalToggleMobile = (_event, isExpanded) => {
+    this.onExternalSelectMobile = () => {
       this.setState({
-        externalExpandedMobile: isExpanded
+        externalExpandedMobile: false
       });
     };
 
-    this.onExternalSelect = (event) => {
-      this.setState({
-        externalExpanded: !this.state.externalExpanded
-      });
+    this.onDownloadToggle = () => {
+      this.setState((prevState) => ({
+        downloadExpanded: !prevState.downloadExpanded
+      }));
     };
 
-    this.onExternalSelectMobile = (event) => {
-      this.setState({
-        externalExpandedMobile: !this.state.externalExpandedMobile
-      });
+    this.onDownloadToggleMobile = () => {
+      this.setState((prevState) => ({
+        downloadExpandedMobile: !prevState.downloadExpandedMobile
+      }));
     };
 
-    this.onDownloadToggle = (_event, isExpanded) => {
+    this.onDownloadSelect = () => {
       this.setState({
-        downloadExpanded: isExpanded
+        downloadExpanded: false
       });
     };
 
-    this.onDownloadToggleMobile = (_event, isExpanded) => {
+    this.onDownloadSelectMobile = () => {
       this.setState({
-        downloadExpandedMobile: isExpanded
-      });
-    };
-
-    this.onDownloadSelect = (event) => {
-      this.setState({
-        downloadExpanded: !this.state.downloadExpanded
-      });
-    };
-
-    this.onDownloadSelectMobile = (event) => {
-      this.setState({
-        downloadExpandedMobile: !this.state.downloadExpandedMobile
+        downloadExpandedMobile: false
       });
     };
 
     this.onExternalClick = (event) => {
-      window.alert('Open external logs!');
+      console.log('External logs opened!');
     };
 
     this.onDownloadClick = (event) => {
-      window.alert('Action!');
+      console.log('Download action clicked!');
     };
 
     this.pauseOrStart = (event) => {
@@ -212,19 +187,19 @@ class ConsoleLogViewerToolbar extends React.Component {
       });
     };
 
-    this.handleFirstSwitchChange = (event, firstSwitchChecked) => {
-      this.setState({ firstSwitchChecked });
+    this.handleFirstSwitchChange = () => {
+      this.setState((prevState) => ({ firstSwitchChecked: !prevState.firstSwitchChecked }));
     };
 
-    this.handleSecondSwitchChange = (event, secondSwitchChecked) => {
-      this.setState({ secondSwitchChecked });
+    this.handleSecondSwitchChange = () => {
+      this.setState((prevState) => ({ secondSwitchChecked: !prevState.secondSwitchChecked }));
     };
 
-    this.onClearLogs = (event) => {
+    this.onClearLogs = () => {
       this.setState({
         optionExpanded: false
       });
-      window.alert('Clear Logs!');
+      console.log('Logs cleared!');
     };
 
     this.onSearchChange = (event, value) => {
@@ -295,61 +270,52 @@ class ConsoleLogViewerToolbar extends React.Component {
       mobileView
     } = this.state;
 
-    const externalDropdownItems = [
-      <DropdownItemDeprecated key="action-1" component="button" onClick={this.onExternalClick}>
-        External logs
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="action-2" component="button" onClick={this.onExternalClick}>
-        External logs
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="action-3" component="button" onClick={this.onExternalClick}>
-        External logs
-      </DropdownItemDeprecated>
-    ];
-
-    const downloadDropdownItems = [
-      <DropdownItemDeprecated key="action-4" component="button" onClick={this.onDownloadClick}>
-        Current container logs
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="action-5" component="button" onClick={this.onDownloadClick}>
-        All container logs
-      </DropdownItemDeprecated>
-    ];
-
-    const optionDropdownItems = [
-      <DropdownItemDeprecated key="switch-1">
-        <Checkbox
-          label="Display timestamp"
-          isChecked={firstSwitchChecked}
-          onChange={this.handleFirstSwitchChange}
-          id="switchMobileCheckbox1"
-          name="check1"
-        />
-      </DropdownItemDeprecated>,
-      <DropdownItemDeprecated key="switch-2">
-        <Checkbox
-          label="Wrap lines"
-          isChecked={secondSwitchChecked}
-          onChange={this.handleSecondSwitchChange}
-          id="switchMobileCheckbox2"
-          name="check2"
-        />
-      </DropdownItemDeprecated>,
-      <DropdownSeparator key="separator" />,
-      <DropdownItemDeprecated key="clear-log" onClick={this.onClearLogs}>
-        Clear logs
-      </DropdownItemDeprecated>
-    ];
-
+    const externalDropdownItems = (
+      <>
+        <DropdownItem key="action-1" onClick={this.onExternalClick}>
+          External logs 1
+        </DropdownItem>
+        <DropdownItem key="action-2" onClick={this.onExternalClick}>
+          External logs 2
+        </DropdownItem>
+        <DropdownItem key="action-3" onClick={this.onExternalClick}>
+          External logs 3
+        </DropdownItem>
+      </>
+    );
+    const downloadDropdownItems = (
+      <>
+        <DropdownItem key="action-4" onClick={this.onDownloadClick}>
+          Current container logs
+        </DropdownItem>
+        <DropdownItem key="action-5" onClick={this.onDownloadClick}>
+          All container logs
+        </DropdownItem>
+      </>
+    );
+    const optionDropdownItems = (
+      <>
+        <DropdownItem key="switch-1" hasCheckbox isSelected={firstSwitchChecked} onClick={this.handleFirstSwitchChange}>
+          Display timestamp
+        </DropdownItem>
+        <DropdownItem
+          key="switch-2"
+          hasCheckbox
+          isSelected={secondSwitchChecked}
+          onClick={this.handleSecondSwitchChange}
+        >
+          Wrap lines
+        </DropdownItem>
+        <Divider component="li" key="separator" />
+        <DropdownItem key="clear-log" onClick={this.onClearLogs}>
+          Clear logs
+        </DropdownItem>
+      </>
+    );
     const selectDropdownContent = (
       <SelectList>
         {Object.entries(this.firstOptions).map(([value, { type }]) => (
-          <SelectOption
-            key={value}
-            hasCheckbox
-            itemId={value}
-            isSelected={containerSelected === value}
-          >
+          <SelectOption key={value} hasCheckbox itemId={value} isSelected={containerSelected === value}>
             <Badge key={value}>{type}</Badge>
             {` ${value}`}
           </SelectOption>
@@ -408,15 +374,18 @@ class ConsoleLogViewerToolbar extends React.Component {
           </Select>
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
-          <DropdownDeprecated
-            toggle={
-              <DropdownToggle id="option-toggle-desktop" onToggle={this.onOptionToggle} icon={<CogIcon />}>
-                Options
-              </DropdownToggle>
-            }
+          <Dropdown
             isOpen={optionExpanded}
-            dropdownItems={optionDropdownItems}
-          />
+            onOpenChange={(isOpen) => this.setState({ optionExpanded: isOpen })}
+            onSelect={this.onOptionSelect}
+            toggle={(toggleRef) => (
+              <MenuToggle ref={toggleRef} isExpanded={optionExpanded} onClick={this.onOptionToggle} icon={<CogIcon />}>
+                Options
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>{optionDropdownItems}</DropdownList>
+          </Dropdown>
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
           <Button variant={isPaused ? 'plain' : 'link'} onClick={this.pauseOrStart}>
@@ -434,11 +403,7 @@ class ConsoleLogViewerToolbar extends React.Component {
             <Select
               role="menu"
               toggle={(toggleRef) => (
-                <MenuToggle
-                  ref={toggleRef}
-                  onClick={this.onContainerToggleMobile}
-                  isExpanded={containerExpandedMobile}
-                >
+                <MenuToggle ref={toggleRef} onClick={this.onContainerToggleMobile} isExpanded={containerExpandedMobile}>
                   {selectToggleContent({ showText: false })}
                 </MenuToggle>
               )}
@@ -448,23 +413,27 @@ class ConsoleLogViewerToolbar extends React.Component {
               isOpen={containerExpandedMobile}
             >
               {selectDropdownContent}
-              </Select>
+            </Select>
           </Tooltip>
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
           <Tooltip position="top" content={<div>Options</div>}>
-            <DropdownDeprecated
-              toggle={
-                <DropdownToggle
-                  aria-label="Options"
-                  id="option-toggle-mobile"
-                  onToggle={this.onOptionToggleMobile}
+            <Dropdown
+              isOpen={optionExpandedMobile}
+              onOpenChange={(isOpen) => this.setState({ optionExpandedMobile: isOpen })}
+              onSelect={this.onOptionSelectMobile}
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={optionExpandedMobile}
+                  onClick={this.onOptionToggleMobile}
                   icon={<CogIcon />}
+                  aria-label="Options"
                 />
-              }
-              isOpen={optionExpandedMobile}
-              dropdownItems={optionDropdownItems}
-            />
+              )}
+            >
+              <DropdownList>{optionDropdownItems}</DropdownList>
+            </Dropdown>
           </Tooltip>
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
@@ -487,28 +456,32 @@ class ConsoleLogViewerToolbar extends React.Component {
     const rightAlignedItemsDesktop = (
       <React.Fragment>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
-          <DropdownDeprecated
+          <Dropdown
+            isOpen={externalExpanded}
+            onOpenChange={(isOpen) => this.setState({ externalExpanded: isOpen })}
             onSelect={this.onExternalSelect}
-            toggle={
-              <DropdownToggle id="external-toggle" onToggle={this.onExternalToggle}>
+            toggle={(toggleRef) => (
+              <MenuToggle ref={toggleRef} isExpanded={externalExpanded} onClick={this.onExternalToggle}>
                 External logs
-              </DropdownToggle>
-            }
-            isOpen={externalExpanded}
-            dropdownItems={externalDropdownItems}
-          />
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>{externalDropdownItems}</DropdownList>
+          </Dropdown>
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
-          <DropdownDeprecated
+          <Dropdown
+            isOpen={downloadExpanded}
+            onOpenChange={(isOpen) => this.setState({ downloadExpanded: isOpen })}
             onSelect={this.onDownloadSelect}
-            toggle={
-              <DropdownToggle id="download-toggle" onToggle={this.onDownloadToggle}>
+            toggle={(toggleRef) => (
+              <MenuToggle ref={toggleRef} isExpanded={downloadExpanded} onClick={this.onDownloadToggle}>
                 Download
-              </DropdownToggle>
-            }
-            isOpen={downloadExpanded}
-            dropdownItems={downloadDropdownItems}
-          />
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>{downloadDropdownItems}</DropdownList>
+          </Dropdown>
         </ToolbarItem>
       </React.Fragment>
     );
@@ -517,37 +490,43 @@ class ConsoleLogViewerToolbar extends React.Component {
       <React.Fragment>
         <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
           <Tooltip position="top" content={<div>External logs</div>}>
-            <DropdownDeprecated
+            <Dropdown
+              isOpen={externalExpandedMobile}
+              onOpenChange={(isOpen) => this.setState({ externalExpandedMobile: isOpen })}
               onSelect={this.onExternalSelectMobile}
-              toggle={
-                <DropdownToggle
-                  id="mobile-external-toggle"
-                  onToggle={this.onExternalToggleMobile}
-                  aria-label="External logs"
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={externalExpandedMobile}
+                  onClick={this.onExternalToggleMobile}
                   icon={<ExternalLinkAltIcon />}
+                  aria-label="External logs"
                 />
-              }
-              isOpen={externalExpandedMobile}
-              dropdownItems={externalDropdownItems}
-            />
+              )}
+            >
+              <DropdownList>{externalDropdownItems}</DropdownList>
+            </Dropdown>
           </Tooltip>
         </ToolbarItem>
         <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
           <Tooltip position="top" content={<div>Download</div>}>
-            <DropdownDeprecated
+            <Dropdown
+              isOpen={downloadExpandedMobile}
+              onOpenChange={(isOpen) => this.setState({ downloadExpandedMobile: isOpen })}
               onSelect={this.onDownloadSelectMobile}
-              toggle={
-                <DropdownToggle
-                  id="mobile-download-toggle"
-                  aria-label="Download"
-                  onToggle={this.onDownloadToggleMobile}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={downloadExpandedMobile}
+                  onClick={this.onDownloadToggleMobile}
                   icon={<DownloadIcon />}
+                  aria-label="Download"
                 />
-              }
-              isOpen={downloadExpandedMobile}
-              position={DropdownPosition.right}
-              dropdownItems={downloadDropdownItems}
-            />
+              )}
+            >
+              <DropdownList>{downloadDropdownItems}</DropdownList>
+            </Dropdown>
           </Tooltip>
         </ToolbarItem>
       </React.Fragment>

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -25,15 +25,14 @@ import {
   AlertGroup,
   AlertActionCloseButton,
   ToolbarItem,
+  Dropdown,
+  DropdownList,
+  DropdownItem,
+  MenuToggle,
+  MenuToggleElement
 } from '@patternfly/react-core';
-import {
-  Dropdown as DropdownDeprecated,
-  DropdownItem as DropdownItemDeprecated,
-  KebabToggle,
-  DropdownPosition
-} from '@patternfly/react-core/deprecated';
-
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import DashboardWrapper from '../DashboardWrapper';
 import DashboardHeader from '../DashboardHeader';
 
@@ -146,8 +145,8 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
     setDrawerExpanded(!isDrawerExpanded);
   };
 
-  const onDropdownToggle = (id: React.Key, isActive: boolean) => {
-    if (isActive) {
+  const onDropdownToggle = (id: React.Key) => {
+    if (id && openDropdownKey !== id) {
       setOpenDropdownKey(id);
       return;
     }
@@ -218,46 +217,53 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
     </ToolbarItem>
   );
 
-  const notificationDrawerActions = [
-    <DropdownItemDeprecated key="markAllRead" onClick={markAllNotificationsRead} component="button">
-      Mark all read
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="clearAll" onClick={removeAllNotifications} component="button">
-      Clear all
-    </DropdownItemDeprecated>
-  ];
-
+  const notificationDrawerActions = (
+    <>
+      <DropdownItem key="markAllRead" onClick={markAllNotificationsRead}>
+        Mark all read
+      </DropdownItem>
+      <DropdownItem key="clearAll" onClick={removeAllNotifications}>
+        Clear all
+      </DropdownItem>
+    </>
+  );
   const notificationDrawerDropdownItems = (key: React.Key) => [
-    <DropdownItemDeprecated key="markRead" component="button" onClick={() => markNotificationRead(key)}>
+    <DropdownItem key={`markRead-${key}`} onClick={() => markNotificationRead(key)}>
       Mark as read
-    </DropdownItemDeprecated>,
-    <DropdownItemDeprecated key="action" component="button" onClick={() => removeNotification(key)}>
+    </DropdownItem>,
+    <DropdownItem key={`clear-${key}`} onClick={() => removeNotification(key)}>
       Clear
-    </DropdownItemDeprecated>
+    </DropdownItem>
   ];
 
   const notificationDrawer = (
     <NotificationDrawer>
       <NotificationDrawerHeader count={getUnreadNotificationsNumber()} onClose={(_event) => setDrawerExpanded(false)}>
-        <DropdownDeprecated
-          onSelect={onDropdownSelect}
-          toggle={
-            <KebabToggle
-              onToggle={(_event: any, isActive: boolean) => onDropdownToggle('dropdown-toggle-id-0', isActive)}
-              id="dropdown-toggle-id-0"
-            />
-          }
-          isOpen={openDropdownKey === 'dropdown-toggle-id-0'}
-          isPlain
-          dropdownItems={notificationDrawerActions}
+        <Dropdown
           id="notification-drawer-0"
-          position={DropdownPosition.right}
-        />
+          isOpen={openDropdownKey === 'dropdown-toggle-id-0'}
+          onSelect={onDropdownSelect}
+          popperProps={{ position: 'right' }}
+          onOpenChange={(isOpen: boolean) => !isOpen && setOpenDropdownKey(null)}
+          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+            <MenuToggle
+              ref={toggleRef}
+              isExpanded={openDropdownKey === 'dropdown-toggle-id-0'}
+              variant="plain"
+              onClick={() => onDropdownToggle('dropdown-toggle-id-0')}
+              aria-label="Notification drawer actions"
+            >
+              <EllipsisVIcon aria-hidden="true" />
+            </MenuToggle>
+          )}
+        >
+          <DropdownList>{notificationDrawerActions}</DropdownList>
+        </Dropdown>
       </NotificationDrawerHeader>
       <NotificationDrawerBody>
         {notifications.length !== 0 && (
           <NotificationDrawerList>
-            {notifications.map(({ key, variant, title, srTitle, description, timestamp }) => (
+            {notifications.map(({ key, variant, title, srTitle, description, timestamp }, index) => (
               <NotificationDrawerListItem
                 key={key}
                 variant={variant}
@@ -265,20 +271,26 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
                 onClick={() => markNotificationRead(key)}
               >
                 <NotificationDrawerListItemHeader variant={variant} title={title} srTitle={srTitle}>
-                  <DropdownDeprecated
-                    position={DropdownPosition.right}
-                    onSelect={onDropdownSelect}
-                    toggle={
-                      <KebabToggle
-                        onToggle={(_event: any, isActive: boolean) => onDropdownToggle(key, isActive)}
-                        id={key.toString()}
-                      />
-                    }
-                    isOpen={openDropdownKey === key}
-                    isPlain
-                    dropdownItems={notificationDrawerDropdownItems(key)}
+                  <Dropdown
                     id={key.toString()}
-                  />
+                    isOpen={openDropdownKey === key}
+                    onSelect={onDropdownSelect}
+                    popperProps={{ position: 'right' }}
+                    onOpenChange={(isOpen: boolean) => !isOpen && setOpenDropdownKey(null)}
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        isExpanded={openDropdownKey === key}
+                        variant="plain"
+                        onClick={() => onDropdownToggle(key)}
+                        aria-label={`Notification ${index + 1} actions`}
+                      >
+                        <EllipsisVIcon aria-hidden="true" />
+                      </MenuToggle>
+                    )}
+                  >
+                    <DropdownList>{notificationDrawerDropdownItems(key)}</DropdownList>
+                  </Dropdown>
                 </NotificationDrawerListItemHeader>
                 <NotificationDrawerListItemBody timestamp={timestamp}> {description} </NotificationDrawerListItemBody>
               </NotificationDrawerListItem>