@patternfly/react-core 5.1.0 → 5.1.1-prerelease.10

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -9,7 +9,7 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
@@ -22,1447 +22,14 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
 
 ### Basic
 
-```js isFullscreen
-import React from 'react';
-import {
-  Avatar,
-  Brand,
-  Breadcrumb,
-  BreadcrumbItem,
-  Button,
-  ButtonVariant,
-  Divider,
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateVariant,
-  MenuToggle,
-  Nav,
-  NavItem,
-  NavList,
-  NotificationBadge,
-  NotificationDrawer,
-  NotificationDrawerBody,
-  NotificationDrawerHeader,
-  NotificationDrawerList,
-  NotificationDrawerListItem,
-  NotificationDrawerListItemBody,
-  NotificationDrawerListItemHeader,
-  Page,
-  PageSection,
-  PageSectionVariants,
-  PageSidebar,
-  PageSidebarBody,
-  SkipToContent,
-  TextContent,
-  Text,
-  Title,
-  PageToggleButton,
-  Masthead,
-  MastheadMain,
-  MastheadToggle,
-  MastheadContent,
-  MastheadBrand,
-  Toolbar,
-  ToolbarItem,
-  ToolbarGroup,
-  ToolbarContent
-} from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
-
-class BasicNotificationDrawer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.drawerRef = React.createRef();
-    this.state = {
-      isDropdownOpen: false,
-      isKebabDropdownOpen: false,
-      activeItem: 0,
-      isDrawerExpanded: false,
-      isUnreadMap: {
-        'notification-1': true,
-        'notification-2': true
-      },
-      showNotifications: true,
-      isActionsMenuOpen: {}
-    };
-    this.onDropdownToggle = () => {
-      this.setState((prevState) => ({
-        isDropdownOpen: !prevState.isDropdownOpen
-      }));
-    };
-
-    this.onDropdownSelect = () => {
-      this.setState({
-        isDropdownOpen: false
-      });
-    };
-
-    this.onKebabDropdownToggle = () => {
-      this.setState((prevState) => ({
-        isKebabDropdownOpen: !prevState.isKebabDropdownOpen
-      }));
-    };
-
-    this.onKebabDropdownSelect = () => {
-      this.setState({
-        isKebabDropdownOpen: false
-      });
-    };
-
-    this.onNavSelect = (_event, result) => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-
-    this.onCloseNotificationDrawer = (_event) => {
-      this.setState((prevState) => {
-        return {
-          isDrawerExpanded: !prevState.isDrawerExpanded
-        };
-      });
-    };
-
-    this.onToggle = (id) => {
-      this.setState((prevState) => ({
-        isActionsMenuOpen: { [id]: !prevState.isActionsMenuOpen[id] }
-      }));
-    };
-
-    this.onSelect = () => {
-      this.setState({
-        isActionsMenuOpen: {}
-      });
-    };
+```ts file='./examples/NotificationDrawerBasic.tsx' isFullscreen
 
-    this.onListItemClick = (id) => {
-      this.setState((prevState) => {
-        if (!prevState.isUnreadMap) return;
-        prevState.isUnreadMap[id] = false;
-        return {
-          isUnreadMap: prevState.isUnreadMap
-        };
-      });
-    };
-
-    this.getNumberUnread = () => {
-      const { isUnreadMap } = this.state;
-      if (isUnreadMap === null) return 0;
-      return Object.keys(isUnreadMap).reduce((count, id) => {
-        return isUnreadMap[id] ? count + 1 : count;
-      }, 0);
-    };
-
-    this.markAllRead = () => {
-      this.setState({
-        isUnreadMap: null
-      });
-    };
-
-    this.showNotifications = (showNotifications) => {
-      this.setState({
-        isUnreadMap: null,
-        showNotifications: showNotifications
-      });
-    };
-
-    this.focusDrawer = (_event) => {
-      const firstTabbableItem = this.drawerRef.current.querySelector('a, button');
-      firstTabbableItem.focus();
-    };
-  }
-
-  render() {
-    const {
-      isDropdownOpen,
-      isKebabDropdownOpen,
-      activeItem,
-      res,
-      isDrawerExpanded,
-      isActionsMenuOpen,
-      isUnreadMap,
-      showNotifications
-    } = this.state;
-
-    const PageNav = (
-      <Nav onSelect={this.onNavSelect} aria-label="Nav">
-        <NavList>
-          <NavItem itemId={0} isActive={activeItem === 0}>
-            System Panel
-          </NavItem>
-          <NavItem itemId={1} isActive={activeItem === 1}>
-            Policy
-          </NavItem>
-          <NavItem itemId={2} isActive={activeItem === 2}>
-            Authentication
-          </NavItem>
-          <NavItem itemId={3} isActive={activeItem === 3}>
-            Network Services
-          </NavItem>
-          <NavItem itemId={4} isActive={activeItem === 4}>
-            Server
-          </NavItem>
-        </NavList>
-      </Nav>
-    );
-    const kebabDropdownItems = (
-      <>
-        <DropdownItem>
-          <CogIcon /> Settings
-        </DropdownItem>
-        <DropdownItem>
-          <HelpIcon /> Help
-        </DropdownItem>
-      </>
-    );
-    const userDropdownItems = (
-      <>
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user">User management</DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </>
-    );
-    const headerToolbar = (
-      <Toolbar isFullHeight>
-        <ToolbarContent>
-          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} align={{ default: 'alignRight' }}>
-            <ToolbarGroup variant="icon-button-group">
-              <ToolbarItem visibility={{ default: 'visible' }} isSelected={isDrawerExpanded}>
-                <NotificationBadge
-                  variant={this.getNumberUnread() === 0 ? 'read' : 'unread'}
-                  onClick={(event) => this.onCloseNotificationDrawer(event)}
-                  aria-label="Notifications"
-                  isExpanded={isDrawerExpanded}
-                >
-                  <BellIcon />
-                </NotificationBadge>
-              </ToolbarItem>
-              <ToolbarGroup
-                variant="icon-button-group"
-                visibility={{
-                  default: 'hidden',
-                  lg: 'visible'
-                }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
-              >
-                <ToolbarItem>
-                  <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
-                    <CogIcon />
-                  </Button>
-                </ToolbarItem>
-                <ToolbarItem>
-                  <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-                    <QuestionCircleIcon />
-                  </Button>
-                </ToolbarItem>
-              </ToolbarGroup>
-            </ToolbarGroup>
-            <ToolbarGroup>
-              <ToolbarItem
-                visibility={{
-                  lg: 'hidden'
-                }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
-              >
-                <Dropdown
-                  isOpen={isKebabDropdownOpen}
-                  onSelect={this.onKebabDropdownSelect}
-                  onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })}
-                  popperProps={{ position: 'right' }}
-                  toggle={(toggleRef) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      isExpanded={isKebabDropdownOpen}
-                      onClick={this.onKebabDropdownToggle}
-                      variant="plain"
-                      aria-label="Settings and help"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
-                  )}
-                >
-                  <DropdownList>{kebabDropdownItems}</DropdownList>
-                </Dropdown>
-              </ToolbarItem>
-              <ToolbarItem
-                visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
-              >
-                <Dropdown
-                  isOpen={isDropdownOpen}
-                  onSelect={this.onDropdownSelect}
-                  onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })}
-                  popperProps={{ position: 'right' }}
-                  toggle={(toggleRef) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      isExpanded={isDropdownOpen}
-                      onClick={this.onDropdownToggle}
-                      icon={<Avatar src={imgAvatar} alt="" />}
-                      isFullHeight
-                    >
-                      John Smith
-                    </MenuToggle>
-                  )}
-                >
-                  <DropdownList>{userDropdownItems}</DropdownList>
-                </Dropdown>
-              </ToolbarItem>
-            </ToolbarGroup>
-          </ToolbarGroup>
-        </ToolbarContent>
-      </Toolbar>
-    );
-
-    const Header = (
-      <Masthead>
-        <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
-        </MastheadToggle>
-        <MastheadMain>
-          <MastheadBrand>
-            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
-          </MastheadBrand>
-        </MastheadMain>
-        <MastheadContent>{headerToolbar}</MastheadContent>
-      </Masthead>
-    );
-    const Sidebar = (
-      <PageSidebar>
-        <PageSidebarBody>{PageNav}</PageSidebarBody>
-      </PageSidebar>
-    );
-    const pageId = 'main-content-page-layout-default-nav';
-    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
-
-    const PageBreadcrumb = (
-      <Breadcrumb>
-        <BreadcrumbItem>Section home</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#" isActive>
-          Section landing
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-
-    const drawerContent = 'Panel content';
-
-    const notificationDrawerActions = (
-      <>
-        <DropdownItem key="markAllRead" onClick={this.markAllRead}>
-          Mark all read
-        </DropdownItem>
-        <DropdownItem key="clearAll" onClick={() => this.showNotifications(false)}>
-          Clear all
-        </DropdownItem>
-        <DropdownItem key="unclearLast" onClick={() => this.showNotifications(true)}>
-          Unclear last
-        </DropdownItem>
-        <DropdownItem key="settings">Settings</DropdownItem>
-      </>
-    );
-    const notificationDrawerDropdownItems = (
-      <>
-        <DropdownItem
-          key="link"
-          to="#"
-          // Prevent default onClick behavior for demo purposes
-          onClick={(ev) => ev.preventDefault()}
-        >
-          Link
-        </DropdownItem>
-        <DropdownItem key="action">Action</DropdownItem>
-        <Divider component="li" key="separator" />
-        <DropdownItem key="disabled link" isDisabled>
-          Disabled Link
-        </DropdownItem>
-      </>
-    );
-    const notificationDrawer = (
-      <NotificationDrawer ref={this.drawerRef}>
-        <NotificationDrawerHeader count={this.getNumberUnread()} onClose={this.onCloseNotificationDrawer}>
-          <Dropdown
-            onSelect={this.onSelect}
-            isOpen={isActionsMenuOpen['toggle-id-0'] || false}
-            id="notification-0"
-            onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-            popperProps={{ position: 'right' }}
-            toggle={(toggleRef) => (
-              <MenuToggle
-                ref={toggleRef}
-                id="toggle-id-0"
-                aria-label="Notification drawer actions"
-                variant="plain"
-                onClick={() => this.onToggle('toggle-id-0')}
-                isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
-            )}
-          >
-            <DropdownList>{notificationDrawerActions}</DropdownList>
-          </Dropdown>
-        </NotificationDrawerHeader>
-        <NotificationDrawerBody>
-          {showNotifications && (
-            <NotificationDrawerList>
-              <NotificationDrawerListItem
-                variant="info"
-                onClick={() => this.onListItemClick('notification-1')}
-                isRead={isUnreadMap === null || !isUnreadMap['notification-1']}
-              >
-                <NotificationDrawerListItemHeader
-                  variant="info"
-                  title="Unread info notification title"
-                  srTitle="Info notification:"
-                >
-                  <Dropdown
-                    onSelect={this.onSelect}
-                    isOpen={isActionsMenuOpen['toggle-id-1'] || false}
-                    id="notification-1"
-                    onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-                    popperProps={{ position: 'right' }}
-                    toggle={(toggleRef) => (
-                      <MenuToggle
-                        ref={toggleRef}
-                        id="toggle-id-1"
-                        aria-label="Notification drawer actions"
-                        variant="plain"
-                        onClick={() => this.onToggle('toggle-id-1')}
-                        isExpanded={isActionsMenuOpen['toggle-id-1'] || false}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
-                    )}
-                  >
-                    <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
-                  </Dropdown>
-                </NotificationDrawerListItemHeader>
-                <NotificationDrawerListItemBody timestamp="5 minutes ago">
-                  This is an info notification description.
-                </NotificationDrawerListItemBody>
-              </NotificationDrawerListItem>
-              <NotificationDrawerListItem
-                variant="danger"
-                onClick={() => this.onListItemClick('notification-2')}
-                isRead={isUnreadMap === null || !isUnreadMap['notification-2']}
-              >
-                <NotificationDrawerListItemHeader
-                  variant="danger"
-                  title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
-                  srTitle="Danger notification:"
-                >
-                  <Dropdown
-                    onSelect={this.onSelect}
-                    isOpen={isActionsMenuOpen['toggle-id-2'] || false}
-                    id="notification-2"
-                    onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-                    popperProps={{ position: 'right' }}
-                    toggle={(toggleRef) => (
-                      <MenuToggle
-                        ref={toggleRef}
-                        id="toggle-id-2"
-                        aria-label="Notification drawer actions"
-                        variant="plain"
-                        onClick={() => this.onToggle('toggle-id-2')}
-                        isExpanded={isActionsMenuOpen['toggle-id-2'] || false}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
-                    )}
-                  >
-                    <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
-                  </Dropdown>
-                </NotificationDrawerListItemHeader>
-                <NotificationDrawerListItemBody timestamp="10 minutes ago">
-                  This is a danger notification description. This is a long description to show how the title will wrap
-                  if it is long and wraps to multiple lines.
-                </NotificationDrawerListItemBody>
-              </NotificationDrawerListItem>
-              <NotificationDrawerListItem
-                variant="warning"
-                onClick={() => this.onListItemClick('notification-3')}
-                isRead={isUnreadMap === null || !isUnreadMap['notification-3']}
-              >
-                <NotificationDrawerListItemHeader
-                  variant="warning"
-                  title="Read warning notification title"
-                  srTitle="Warning notification:"
-                >
-                  <Dropdown
-                    onSelect={this.onSelect}
-                    isOpen={isActionsMenuOpen['toggle-id-3'] || false}
-                    id="notification-3"
-                    onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-                    popperProps={{ position: 'right' }}
-                    toggle={(toggleRef) => (
-                      <MenuToggle
-                        ref={toggleRef}
-                        id="toggle-id-3"
-                        aria-label="Notification drawer actions"
-                        variant="plain"
-                        onClick={() => this.onToggle('toggle-id-3')}
-                        isExpanded={isActionsMenuOpen['toggle-id-3'] || false}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
-                    )}
-                  >
-                    <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
-                  </Dropdown>
-                </NotificationDrawerListItemHeader>
-                <NotificationDrawerListItemBody timestamp="20 minutes ago">
-                  This is a warning notification description.
-                </NotificationDrawerListItemBody>
-              </NotificationDrawerListItem>
-              <NotificationDrawerListItem
-                variant="success"
-                onClick={() => this.onListItemClick('notification-4')}
-                isRead={isUnreadMap === null || !isUnreadMap['notification-4']}
-              >
-                <NotificationDrawerListItemHeader
-                  variant="success"
-                  title="Read success notification title"
-                  srTitle="Success notification:"
-                >
-                  <Dropdown
-                    onSelect={this.onSelect}
-                    isOpen={isActionsMenuOpen['toggle-id-4'] || false}
-                    id="notification-4"
-                    onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-                    popperProps={{ position: 'right' }}
-                    toggle={(toggleRef) => (
-                      <MenuToggle
-                        ref={toggleRef}
-                        id="toggle-id-4"
-                        aria-label="Notification drawer actions"
-                        variant="plain"
-                        onClick={() => this.onToggle('toggle-id-4')}
-                        isExpanded={isActionsMenuOpen['toggle-id-4'] || false}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
-                    )}
-                  >
-                    <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
-                  </Dropdown>
-                </NotificationDrawerListItemHeader>
-                <NotificationDrawerListItemBody timestamp="30 minutes ago">
-                  This is a success notification description.
-                </NotificationDrawerListItemBody>
-              </NotificationDrawerListItem>
-            </NotificationDrawerList>
-          )}
-          {!showNotifications && (
-            <EmptyState variant={EmptyStateVariant.full}>
-              <EmptyStateHeader
-                headingLevel="h2"
-                titleText="No results found"
-                icon={<EmptyStateIcon icon={SearchIcon} />}
-              />
-              <EmptyStateBody>
-                There are currently no alerts. There may be silenced critical alerts however.
-              </EmptyStateBody>
-              <EmptyStateFooter>
-                <EmptyStateActions>
-                  <Button variant="link">Action</Button>
-                </EmptyStateActions>
-              </EmptyStateFooter>
-            </EmptyState>
-          )}
-        </NotificationDrawerBody>
-      </NotificationDrawer>
-    );
-
-    return (
-      <React.Fragment>
-        <Page
-          header={Header}
-          sidebar={Sidebar}
-          isManagedSidebar
-          notificationDrawer={notificationDrawer}
-          onNotificationDrawerExpand={(event) => this.focusDrawer(event)}
-          isNotificationDrawerExpanded={isDrawerExpanded}
-          skipToContent={PageSkipToContent}
-          breadcrumb={PageBreadcrumb}
-          mainContainerId={pageId}
-        >
-          <PageSection variant={PageSectionVariants.light}>
-            <TextContent>
-              <Text component="h1">Main title</Text>
-              <Text component="p">
-                Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-                of its relative line height of 1.5.
-              </Text>
-            </TextContent>
-          </PageSection>
-          <PageSection variant={PageSectionVariants.light} noPadding={true}>
-            Panel section content
-          </PageSection>
-        </Page>
-      </React.Fragment>
-    );
-  }
-}
 ```
 
 ### Grouped
 
 When using the NotificationDrawerGroupList and related components, the function that is passed in to the `onNotificationDrawerExpand` prop on the Page component must also ensure the NotificationDrawer component only receives focus when it is initially opened. Otherwise any time a drawer group item is opened the NotificationDrawer component will receive focus, which would be unexpected behavior for users.
 
-```js isFullscreen
-import React from 'react';
-import {
-  Avatar,
-  Brand,
-  Breadcrumb,
-  BreadcrumbItem,
-  Button,
-  ButtonVariant,
-  Divider,
-  Dropdown,
-  DropdownItem,
-  DropdownList,
-  EmptyState,
-  EmptyStateActions,
-  EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStateHeader,
-  EmptyStateFooter,
-  EmptyStateVariant,
-  MenuToggle,
-  Nav,
-  NavItem,
-  NavList,
-  NotificationBadge,
-  NotificationDrawer,
-  NotificationDrawerBody,
-  NotificationDrawerGroup,
-  NotificationDrawerGroupList,
-  NotificationDrawerHeader,
-  NotificationDrawerList,
-  NotificationDrawerListItem,
-  NotificationDrawerListItemBody,
-  NotificationDrawerListItemHeader,
-  Page,
-  PageSection,
-  PageSectionVariants,
-  PageSidebar,
-  PageSidebarBody,
-  SkipToContent,
-  Title,
-  TextContent,
-  Text,
-  PageToggleButton,
-  Masthead,
-  MastheadMain,
-  MastheadToggle,
-  MastheadContent,
-  MastheadBrand,
-  Toolbar,
-  ToolbarItem,
-  ToolbarGroup,
-  ToolbarContent
-} from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
-
-class GroupedNotificationDrawer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.drawerRef = React.createRef();
-    this.state = {
-      isDropdownOpen: false,
-      isKebabDropdownOpen: false,
-      activeItem: 0,
-      isDrawerExpanded: false,
-      firstDrawerGroupExpanded: false,
-      secondDrawerGroupExpanded: true,
-      thirdDrawerGroupExpanded: false,
-      isActionsMenuOpen: {},
-      showNotifications: true,
-      isUnreadMap: {
-        'group-1': {
-          'notification-5': true,
-          'notification-6': true
-        },
-        'group-2': {
-          'notification-9': true,
-          'notification-10': true
-        },
-        'group-3': null
-      }
-    };
-    this.onDropdownToggle = () => {
-      this.setState((prevState) => ({
-        isDropdownOpen: !prevState.isDropdownOpen
-      }));
-    };
-
-    this.onDropdownSelect = () => {
-      this.setState({
-        isDropdownOpen: false
-      });
-    };
-
-    this.onKebabDropdownToggle = () => {
-      this.setState((prevState) => ({
-        isKebabDropdownOpen: !prevState.isKebabDropdownOpen
-      }));
-    };
-
-    this.onKebabDropdownSelect = () => {
-      this.setState({
-        isKebabDropdownOpen: false
-      });
-    };
-
-    this.onNavSelect = (_event, result) => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-
-    this.onCloseNotificationDrawer = (_event) => {
-      this.setState((prevState) => {
-        return {
-          isDrawerExpanded: !prevState.isDrawerExpanded
-        };
-      });
-    };
-
-    this.onToggle = (id) => {
-      this.setState((prevState) => ({
-        isActionsMenuOpen: { [id]: !prevState.isActionsMenuOpen[id] }
-      }));
-    };
-
-    this.onSelect = () => {
-      this.setState({
-        isActionsMenuOpen: {}
-      });
-    };
-
-    this.onListItemClick = (groupId, id) => {
-      this.setState((prevState) => {
-        if (!prevState.isUnreadMap || !prevState.isUnreadMap[groupId]) return;
-        console.log(prevState.isUnreadMap);
-        prevState.isUnreadMap[groupId][id] = false;
-        return {
-          isUnreadMap: prevState.isUnreadMap
-        };
-      });
-    };
-
-    this.isUnread = (groupId, id) => {
-      const { isUnreadMap } = this.state;
-      return isUnreadMap && isUnreadMap[groupId] && isUnreadMap[groupId][id];
-    };
-
-    this.getNumberUnread = (groupId) => {
-      const { isUnreadMap } = this.state;
-      if (isUnreadMap === null) return 0;
-
-      if (groupId) {
-        if (isUnreadMap[groupId] === null) return 0;
-
-        return Object.keys(isUnreadMap[groupId]).reduce((count, id) => {
-          return isUnreadMap[groupId][id] ? count + 1 : count;
-        }, 0);
-      }
-
-      return Object.keys(isUnreadMap).reduce((count, groupId) => {
-        if (isUnreadMap[groupId] === null) return count;
-
-        return Object.keys(isUnreadMap[groupId]).reduce((groupCount, id) => {
-          return isUnreadMap[groupId][id] ? groupCount + 1 : groupCount;
-        }, count);
-      }, 0);
-    };
-
-    this.markAllRead = () => {
-      this.setState({
-        isUnreadMap: null
-      });
-    };
-
-    this.showNotifications = (showNotifications) => {
-      this.setState({
-        isUnreadMap: null,
-        showNotifications: showNotifications
-      });
-    };
-
-    this.toggleFirstDrawer = (event, value) => {
-      this.setState({
-        firstDrawerGroupExpanded: value
-      });
-    };
-
-    this.toggleSecondDrawer = (event, value) => {
-      this.setState({
-        secondDrawerGroupExpanded: value
-      });
-    };
-
-    this.toggleThirdDrawer = (event, value) => {
-      this.setState({
-        thirdDrawerGroupExpanded: value
-      });
-    };
-
-    this.focusDrawer = (_event) => {
-      // Prevent the NotificationDrawer from receiving focus if a drawer group item is opened
-      if (!document.activeElement.closest(`.${this.drawerRef.current.className}`)) {
-        const firstTabbableItem = this.drawerRef.current.querySelector('a, button');
-        firstTabbableItem.focus();
-      }
-    };
-  }
-
-  render() {
-    const {
-      isDropdownOpen,
-      isKebabDropdownOpen,
-      activeItem,
-      res,
-      isDrawerExpanded,
-      isActionsMenuOpen,
-      isUnreadMap,
-      showNotifications,
-      firstDrawerGroupExpanded,
-      secondDrawerGroupExpanded,
-      thirdDrawerGroupExpanded
-    } = this.state;
-
-    const PageNav = (
-      <Nav onSelect={this.onNavSelect} aria-label="Nav">
-        <NavList>
-          <NavItem itemId={0} isActive={activeItem === 0}>
-            System Panel
-          </NavItem>
-          <NavItem itemId={1} isActive={activeItem === 1}>
-            Policy
-          </NavItem>
-          <NavItem itemId={2} isActive={activeItem === 2}>
-            Authentication
-          </NavItem>
-          <NavItem itemId={3} isActive={activeItem === 3}>
-            Network Services
-          </NavItem>
-          <NavItem itemId={4} isActive={activeItem === 4}>
-            Server
-          </NavItem>
-        </NavList>
-      </Nav>
-    );
-    const kebabDropdownItems = (
-      <>
-        <DropdownItem>
-          <CogIcon /> Settings
-        </DropdownItem>
-        <DropdownItem>
-          <HelpIcon /> Help
-        </DropdownItem>
-      </>
-    );
-    const userDropdownItems = (
-      <>
-        <DropdownItem key="group 2 profile">My profile</DropdownItem>
-        <DropdownItem key="group 2 user">User management</DropdownItem>
-        <DropdownItem key="group 2 logout">Logout</DropdownItem>
-      </>
-    );
-    const headerToolbar = (
-      <Toolbar isFullHeight>
-        <ToolbarContent>
-          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} align={{ default: 'alignRight' }}>
-            <ToolbarGroup variant="icon-button-group">
-              <ToolbarItem visibility={{ default: 'visible' }} isSelected={isDrawerExpanded}>
-                <NotificationBadge
-                  variant={this.getNumberUnread() === 0 ? 'read' : 'unread'}
-                  onClick={(event) => this.onCloseNotificationDrawer(event)}
-                  aria-label="Notifications"
-                  isExpanded={isDrawerExpanded}
-                >
-                  <BellIcon />
-                </NotificationBadge>
-              </ToolbarItem>
-              <ToolbarGroup
-                variant="icon-button-group"
-                visibility={{
-                  default: 'hidden',
-                  lg: 'visible'
-                }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
-              >
-                <ToolbarItem>
-                  <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
-                    <CogIcon />
-                  </Button>
-                </ToolbarItem>
-                <ToolbarItem>
-                  <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-                    <QuestionCircleIcon />
-                  </Button>
-                </ToolbarItem>
-              </ToolbarGroup>
-            </ToolbarGroup>
-            <ToolbarGroup>
-              <ToolbarItem
-                visibility={{
-                  lg: 'hidden'
-                }} /** this kebab dropdown replaces the icon buttons and is hidden for desktop sizes */
-              >
-                <Dropdown
-                  isOpen={isKebabDropdownOpen}
-                  onSelect={this.onKebabDropdownSelect}
-                  onOpenChange={(isOpen) => this.setState({ isKebabDropdownOpen: isOpen })}
-                  popperProps={{ position: 'right' }}
-                  toggle={(toggleRef) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      isExpanded={isKebabDropdownOpen}
-                      onClick={this.onKebabDropdownToggle}
-                      variant="plain"
-                      aria-label="Settings and help"
-                    >
-                      <EllipsisVIcon aria-hidden="true" />
-                    </MenuToggle>
-                  )}
-                >
-                  <DropdownList>{kebabDropdownItems}</DropdownList>
-                </Dropdown>
-              </ToolbarItem>
-              <ToolbarItem
-                visibility={{ default: 'hidden', md: 'visible' }} /** this user dropdown is hidden on mobile sizes */
-              >
-                <Dropdown
-                  isOpen={isDropdownOpen}
-                  onSelect={this.onDropdownSelect}
-                  onOpenChange={(isOpen) => this.setState({ isDropdownOpen: isOpen })}
-                  popperProps={{ position: 'right' }}
-                  toggle={(toggleRef) => (
-                    <MenuToggle
-                      ref={toggleRef}
-                      isExpanded={isDropdownOpen}
-                      onClick={this.onDropdownToggle}
-                      icon={<Avatar src={imgAvatar} alt="" />}
-                      isFullHeight
-                    >
-                      John Smith
-                    </MenuToggle>
-                  )}
-                >
-                  <DropdownList>{userDropdownItems}</DropdownList>
-                </Dropdown>
-              </ToolbarItem>
-            </ToolbarGroup>
-          </ToolbarGroup>
-        </ToolbarContent>
-      </Toolbar>
-    );
-
-    const Header = (
-      <Masthead>
-        <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
-        </MastheadToggle>
-        <MastheadMain>
-          <MastheadBrand>
-            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
-          </MastheadBrand>
-        </MastheadMain>
-        <MastheadContent>{headerToolbar}</MastheadContent>
-      </Masthead>
-    );
-    const Sidebar = (
-      <PageSidebar>
-        <PageSidebarBody>{PageNav}</PageSidebarBody>
-      </PageSidebar>
-    );
-    const pageId = 'main-content-page-layout-default-nav';
-    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
-
-    const PageBreadcrumb = (
-      <Breadcrumb>
-        <BreadcrumbItem>Section home</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-        <BreadcrumbItem to="#" isActive>
-          Section landing
-        </BreadcrumbItem>
-      </Breadcrumb>
-    );
-
-    const drawerContent = 'Panel content';
-    const notificationDrawerActions = (
-      <>
-        <DropdownItem key="markAllRead" onClick={this.markAllRead}>
-          Mark all read
-        </DropdownItem>
-        <DropdownItem key="clearAll" onClick={() => this.showNotifications(false)}>
-          Clear all
-        </DropdownItem>
-        <DropdownItem key="unclearLast" onClick={() => this.showNotifications(true)}>
-          Unclear last
-        </DropdownItem>
-        <DropdownItem key="settings">Settings</DropdownItem>
-      </>
-    );
-    const notificationDrawerDropdownItems = (
-      <>
-        <DropdownItem
-          key="link"
-          to="#"
-          // Prevent default onClick behavior for demo purposes
-          onClick={(ev) => ev.preventDefault()}
-        >
-          Link
-        </DropdownItem>
-        <DropdownItem key="action">Action</DropdownItem>
-        <Divider component="li" key="separator" />
-        <DropdownItem key="disabled link" isDisabled>
-          Disabled Link
-        </DropdownItem>
-      </>
-    );
-
-    const notificationDrawer = (
-      <NotificationDrawer ref={this.drawerRef}>
-        <NotificationDrawerHeader count={this.getNumberUnread()} onClose={this.onCloseNotificationDrawer}>
-          <Dropdown
-            onSelect={this.onSelect}
-            isOpen={isActionsMenuOpen['toggle-id-0'] || false}
-            id="notification-0"
-            onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-            popperProps={{ position: 'right' }}
-            toggle={(toggleRef) => (
-              <MenuToggle
-                ref={toggleRef}
-                id="toggle-id-0"
-                aria-label="Notification drawer actions"
-                variant="plain"
-                onClick={() => this.onToggle('toggle-id-0')}
-                isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-              >
-                <EllipsisVIcon aria-hidden="true" />
-              </MenuToggle>
-            )}
-          >
-            <DropdownList>{notificationDrawerActions}</DropdownList>
-          </Dropdown>
-        </NotificationDrawerHeader>
-        <NotificationDrawerBody>
-          {showNotifications && (
-            <NotificationDrawerGroupList>
-              <NotificationDrawerGroup
-                title="First notification group"
-                isExpanded={firstDrawerGroupExpanded}
-                count={this.getNumberUnread('group-1')}
-                onExpand={this.toggleFirstDrawer}
-              >
-                <NotificationDrawerList isHidden={!firstDrawerGroupExpanded}>
-                  <NotificationDrawerListItem
-                    variant="info"
-                    onClick={() => this.onListItemClick('group-1', 'notification-5')}
-                    isRead={!this.isUnread('group-1', 'notification-5')}
-                  >
-                    <NotificationDrawerListItemHeader
-                      variant="info"
-                      title="Unread info notification title"
-                      srTitle="Info notification:"
-                    >
-                      <Dropdown
-                        onSelect={this.onSelect}
-                        isOpen={isActionsMenuOpen['toggle-id-5'] || false}
-                        id="notification-5"
-                        onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-                        popperProps={{ position: 'right' }}
-                        toggle={(toggleRef) => (
-                          <MenuToggle
-                            ref={toggleRef}
-                            id="toggle-id-5"
-                            aria-label="Notification drawer actions"
-                            variant="plain"
-                            onClick={() => this.onToggle('toggle-id-5')}
-                            isExpanded={isActionsMenuOpen['toggle-id-5'] || false}
-                          >
-                            <EllipsisVIcon aria-hidden="true" />
-                          </MenuToggle>
-                        )}
-                      >
-                        <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
-                      </Dropdown>
-                    </NotificationDrawerListItemHeader>
-                    <NotificationDrawerListItemBody timestamp="5 minutes ago">
-                      This is an info notification description.
-                    </NotificationDrawerListItemBody>
-                  </NotificationDrawerListItem>
-                  <NotificationDrawerListItem
-                    variant="danger"
-                    onClick={() => this.onListItemClick('group-1', 'notification-6')}
-                    isRead={!this.isUnread('group-1', 'notification-6')}
-                  >
-                    <NotificationDrawerListItemHeader
-                      variant="danger"
-                      title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
-                      srTitle="Danger notification:"
-                    >
-                      <Dropdown
-                        onSelect={this.onSelect}
-                        isOpen={isActionsMenuOpen['toggle-id-6'] || false}
-                        id="notification-6"
-                        onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-                        popperProps={{ position: 'right' }}
-                        toggle={(toggleRef) => (
-                          <MenuToggle
-                            ref={toggleRef}
-                            id="toggle-id-6"
-                            aria-label="Notification drawer actions"
-                            variant="plain"
-                            onClick={() => this.onToggle('toggle-id-6')}
-                            isExpanded={isActionsMenuOpen['toggle-id-6'] || false}
-                          >
-                            <EllipsisVIcon aria-hidden="true" />
-                          </MenuToggle>
-                        )}
-                      >
-                        <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
-                      </Dropdown>
-                    </NotificationDrawerListItemHeader>
-                    <NotificationDrawerListItemBody timestamp="10 minutes ago">
-                      This is a danger notification description. This is a long description to show how the title will
-                      wrap if it is long and wraps to multiple lines.
-                    </NotificationDrawerListItemBody>
-                  </NotificationDrawerListItem>
-                  <NotificationDrawerListItem
-                    variant="warning"
-                    onClick={() => this.onListItemClick('group-1', 'notification-7')}
-                    isRead={!this.isUnread('group-1', 'notification-7')}
-                  >
-                    <NotificationDrawerListItemHeader
-                      variant="warning"
-                      title="Read warning notification title"
-                      srTitle="Warning notification:"
-                    >
-                      <Dropdown
-                        onSelect={this.onSelect}
-                        isOpen={isActionsMenuOpen['toggle-id-7'] || false}
-                        id="notification-7"
-                        onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-                        popperProps={{ position: 'right' }}
-                        toggle={(toggleRef) => (
-                          <MenuToggle
-                            ref={toggleRef}
-                            id="toggle-id-7"
-                            aria-label="Notification drawer actions"
-                            variant="plain"
-                            onClick={() => this.onToggle('toggle-id-7')}
-                            isExpanded={isActionsMenuOpen['toggle-id-7'] || false}
-                          >
-                            <EllipsisVIcon aria-hidden="true" />
-                          </MenuToggle>
-                        )}
-                      >
-                        <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
-                      </Dropdown>
-                    </NotificationDrawerListItemHeader>
-                    <NotificationDrawerListItemBody timestamp="20 minutes ago">
-                      This is a warning notification description.
-                    </NotificationDrawerListItemBody>
-                  </NotificationDrawerListItem>
-                  <NotificationDrawerListItem
-                    variant="success"
-                    onClick={() => this.onListItemClick('group-1', 'notification-8')}
-                    isRead={!this.isUnread('group-1', 'notification-8')}
-                  >
-                    <NotificationDrawerListItemHeader
-                      variant="success"
-                      title="Read success notification title"
-                      srTitle="Success notification:"
-                    >
-                      <Dropdown
-                        onSelect={this.onSelect}
-                        isOpen={isActionsMenuOpen['toggle-id-8'] || false}
-                        id="notification-8"
-                        onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-                        popperProps={{ position: 'right' }}
-                        toggle={(toggleRef) => (
-                          <MenuToggle
-                            ref={toggleRef}
-                            id="toggle-id-8"
-                            aria-label="Notification drawer actions"
-                            variant="plain"
-                            onClick={() => this.onToggle('toggle-id-8')}
-                            isExpanded={isActionsMenuOpen['toggle-id-8'] || false}
-                          >
-                            <EllipsisVIcon aria-hidden="true" />
-                          </MenuToggle>
-                        )}
-                      >
-                        <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
-                      </Dropdown>
-                    </NotificationDrawerListItemHeader>
-                    <NotificationDrawerListItemBody timestamp="30 minutes ago">
-                      This is a success notification description.
-                    </NotificationDrawerListItemBody>
-                  </NotificationDrawerListItem>
-                </NotificationDrawerList>
-              </NotificationDrawerGroup>
-              <NotificationDrawerGroup
-                title="Second notification group"
-                isExpanded={secondDrawerGroupExpanded}
-                count={this.getNumberUnread('group-2')}
-                onExpand={this.toggleSecondDrawer}
-              >
-                <NotificationDrawerList isHidden={!secondDrawerGroupExpanded}>
-                  <NotificationDrawerListItem
-                    variant="info"
-                    onClick={() => this.onListItemClick('group-2', 'notification-9')}
-                    isRead={!this.isUnread('group-2', 'notification-9')}
-                  >
-                    <NotificationDrawerListItemHeader
-                      variant="info"
-                      title="Unread info notification title"
-                      srTitle="Info notification:"
-                    >
-                      <Dropdown
-                        onSelect={this.onSelect}
-                        isOpen={isActionsMenuOpen['toggle-id-9'] || false}
-                        id="notification-9"
-                        onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-                        popperProps={{ position: 'right' }}
-                        toggle={(toggleRef) => (
-                          <MenuToggle
-                            ref={toggleRef}
-                            id="toggle-id-9"
-                            aria-label="Notification drawer actions"
-                            variant="plain"
-                            onClick={() => this.onToggle('toggle-id-9')}
-                            isExpanded={isActionsMenuOpen['toggle-id-9'] || false}
-                          >
-                            <EllipsisVIcon aria-hidden="true" />
-                          </MenuToggle>
-                        )}
-                      >
-                        <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
-                      </Dropdown>
-                    </NotificationDrawerListItemHeader>
-                    <NotificationDrawerListItemBody timestamp="5 minutes ago">
-                      This is an info notification description.
-                    </NotificationDrawerListItemBody>
-                  </NotificationDrawerListItem>
-                  <NotificationDrawerListItem
-                    variant="danger"
-                    onClick={() => this.onListItemClick('group-2', 'notification-10')}
-                    isRead={!this.isUnread('group-2', 'notification-10')}
-                  >
-                    <NotificationDrawerListItemHeader
-                      variant="danger"
-                      title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
-                      srTitle="Danger notification:"
-                    >
-                      <Dropdown
-                        onSelect={this.onSelect}
-                        isOpen={isActionsMenuOpen['toggle-id-10'] || false}
-                        id="notification-10"
-                        onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-                        popperProps={{ position: 'right' }}
-                        toggle={(toggleRef) => (
-                          <MenuToggle
-                            ref={toggleRef}
-                            id="toggle-id-10"
-                            aria-label="Notification drawer actions"
-                            variant="plain"
-                            onClick={() => this.onToggle('toggle-id-10')}
-                            isExpanded={isActionsMenuOpen['toggle-id-10'] || false}
-                          >
-                            <EllipsisVIcon aria-hidden="true" />
-                          </MenuToggle>
-                        )}
-                      >
-                        <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
-                      </Dropdown>
-                    </NotificationDrawerListItemHeader>
-                    <NotificationDrawerListItemBody timestamp="10 minutes ago">
-                      This is a danger notification description. This is a long description to show how the title will
-                      wrap if it is long and wraps to multiple lines.
-                    </NotificationDrawerListItemBody>
-                  </NotificationDrawerListItem>
-                  <NotificationDrawerListItem
-                    variant="warning"
-                    onClick={() => this.onListItemClick('group-2', 'notification-11')}
-                    isRead={!this.isUnread('group-2', 'notification-11')}
-                  >
-                    <NotificationDrawerListItemHeader
-                      variant="warning"
-                      title="Read warning notification title"
-                      srTitle="Warning notification:"
-                    >
-                      <Dropdown
-                        onSelect={this.onSelect}
-                        isOpen={isActionsMenuOpen['toggle-id-11'] || false}
-                        id="notification-11"
-                        onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-                        popperProps={{ position: 'right' }}
-                        toggle={(toggleRef) => (
-                          <MenuToggle
-                            ref={toggleRef}
-                            id="toggle-id-11"
-                            aria-label="Notification drawer actions"
-                            variant="plain"
-                            onClick={() => this.onToggle('toggle-id-11')}
-                            isExpanded={isActionsMenuOpen['toggle-id-11'] || false}
-                          >
-                            <EllipsisVIcon aria-hidden="true" />
-                          </MenuToggle>
-                        )}
-                      >
-                        <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
-                      </Dropdown>
-                    </NotificationDrawerListItemHeader>
-                    <NotificationDrawerListItemBody timestamp="20 minutes ago">
-                      This is a warning notification description.
-                    </NotificationDrawerListItemBody>
-                  </NotificationDrawerListItem>
-                  <NotificationDrawerListItem
-                    variant="success"
-                    onClick={() => this.onListItemClick('group-2', 'notification-12')}
-                    isRead={!this.isUnread('group-2', 'notification-12')}
-                  >
-                    <NotificationDrawerListItemHeader
-                      variant="success"
-                      title="Read success notification title"
-                      srTitle="Success notification:"
-                    >
-                      <Dropdown
-                        onSelect={this.onSelect}
-                        isOpen={isActionsMenuOpen['toggle-id-12'] || false}
-                        id="notification-12"
-                        onOpenChange={(isOpen) => !isOpen && this.setState({ isActionsMenuOpen: {} })}
-                        popperProps={{ position: 'right' }}
-                        toggle={(toggleRef) => (
-                          <MenuToggle
-                            ref={toggleRef}
-                            id="toggle-id-12"
-                            aria-label="Notification drawer actions"
-                            variant="plain"
-                            onClick={() => this.onToggle('toggle-id-12')}
-                            isExpanded={isActionsMenuOpen['toggle-id-12'] || false}
-                          >
-                            <EllipsisVIcon aria-hidden="true" />
-                          </MenuToggle>
-                        )}
-                      >
-                        <DropdownList>{notificationDrawerDropdownItems}</DropdownList>
-                      </Dropdown>
-                    </NotificationDrawerListItemHeader>
-                    <NotificationDrawerListItemBody timestamp="30 minutes ago">
-                      This is a success notification description.
-                    </NotificationDrawerListItemBody>
-                  </NotificationDrawerListItem>
-                </NotificationDrawerList>
-              </NotificationDrawerGroup>
-              <NotificationDrawerGroup
-                title="Third notification group"
-                isExpanded={thirdDrawerGroupExpanded}
-                count={this.getNumberUnread('group-3')}
-                onExpand={this.toggleThirdDrawer}
-              >
-                <NotificationDrawerList isHidden={!thirdDrawerGroupExpanded}>
-                  <EmptyState variant={EmptyStateVariant.full}>
-                    <EmptyStateHeader
-                      headingLevel="h2"
-                      titleText="No alerts found"
-                      icon={<EmptyStateIcon icon={SearchIcon} />}
-                    />
-                    <EmptyStateBody>
-                      There are currently no critical alerts firing. There may be firing alerts of other severities or
-                      silenced critical alerts however.
-                    </EmptyStateBody>
-                    <EmptyStateFooter>
-                      <EmptyStateActions>
-                        <Button variant="link">Action</Button>
-                      </EmptyStateActions>
-                    </EmptyStateFooter>
-                  </EmptyState>
-                </NotificationDrawerList>
-              </NotificationDrawerGroup>
-            </NotificationDrawerGroupList>
-          )}
-          {!showNotifications && (
-            <EmptyState variant={EmptyStateVariant.full}>
-              <EmptyStateHeader
-                headingLevel="h2"
-                titleText="No alerts found"
-                icon={<EmptyStateIcon icon={SearchIcon} />}
-              />
-              <EmptyStateBody>
-                There are currently no alerts. There may be silenced critical alerts however.
-              </EmptyStateBody>
-              <EmptyStateFooter>
-                <EmptyStateActions>
-                  <Button variant="link">Action</Button>
-                </EmptyStateActions>
-              </EmptyStateFooter>
-            </EmptyState>
-          )}
-        </NotificationDrawerBody>
-      </NotificationDrawer>
-    );
+```ts file='./examples/NotificationDrawerGrouped.tsx' isFullscreen
 
-    return (
-      <React.Fragment>
-        <Page
-          header={Header}
-          sidebar={Sidebar}
-          isManagedSidebar
-          notificationDrawer={notificationDrawer}
-          isNotificationDrawerExpanded={isDrawerExpanded}
-          onNotificationDrawerExpand={(event) => this.focusDrawer(event)}
-          skipToContent={PageSkipToContent}
-          breadcrumb={PageBreadcrumb}
-          mainContainerId={pageId}
-        >
-          <PageSection variant={PageSectionVariants.light}>
-            <TextContent>
-              <Text component="h1">Main title</Text>
-              <Text component="p">
-                Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
-                of its relative line height of 1.5.
-              </Text>
-            </TextContent>
-          </PageSection>
-          <PageSection variant={PageSectionVariants.light} noPadding={true}>
-            Panel section content
-          </PageSection>
-        </Page>
-      </React.Fragment>
-    );
-  }
-}
 ```