@patternfly/react-docs 7.6.0-prerelease.8 → 7.6.0-prerelease.9

package/patternfly-docs/generated/components/notification-drawer/react.js

@@ -1,394 +0,0 @@
-import React from 'react';
-import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
-import { useState } from 'react';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-const pageData = {
-  "id": "Notification drawer",
-  "section": "components",
-  "subsection": "",
-  "deprecated": false,
-  "template": false,
-  "beta": false,
-  "demo": false,
-  "newImplementationLink": false,
-  "source": "react",
-  "tabName": null,
-  "slug": "/components/notification-drawer/react",
-  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md",
-  "relPath": "packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md",
-  "propComponents": [
-    {
-      "name": "NotificationDrawer",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the notification drawer"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the notification drawer"
-        }
-      ]
-    },
-    {
-      "name": "NotificationDrawerBody",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the body of the notification drawer"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the notification drawer body",
-          "defaultValue": "''"
-        }
-      ]
-    },
-    {
-      "name": "NotificationDrawerHeader",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the drawer"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes for notification drawer header.",
-          "defaultValue": "''"
-        },
-        {
-          "name": "closeButtonAriaLabel",
-          "type": "string",
-          "description": "Adds custom accessible text to the notification drawer close button.",
-          "defaultValue": "'Close'"
-        },
-        {
-          "name": "count",
-          "type": "number",
-          "description": "Notification drawer heading count"
-        },
-        {
-          "name": "customText",
-          "type": "string",
-          "description": "Notification drawer heading custom text which can be used instead of providing count/unreadText"
-        },
-        {
-          "name": "onClose",
-          "type": "(event: KeyboardEvent | React.MouseEvent) => void",
-          "description": "Callback for when close button is clicked"
-        },
-        {
-          "name": "title",
-          "type": "string",
-          "description": "Notification drawer heading title",
-          "defaultValue": "'Notifications'"
-        },
-        {
-          "name": "unreadText",
-          "type": "string",
-          "description": "Notification drawer heading unread text used in combination with a count",
-          "defaultValue": "'unread'"
-        }
-      ]
-    },
-    {
-      "name": "NotificationDrawerGroup",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the group"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the group",
-          "defaultValue": "''"
-        },
-        {
-          "name": "count",
-          "type": "number",
-          "description": "Notification drawer group count",
-          "required": true
-        },
-        {
-          "name": "headingLevel",
-          "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
-          "description": "Sets the heading level to use for the group title. Default is h1.",
-          "defaultValue": "'h1'"
-        },
-        {
-          "name": "isExpanded",
-          "type": "boolean",
-          "description": "Adds styling to the group to indicate expanded state",
-          "required": true
-        },
-        {
-          "name": "isRead",
-          "type": "boolean",
-          "description": "Adds styling to the group to indicate whether it has been read",
-          "defaultValue": "false"
-        },
-        {
-          "name": "onExpand",
-          "type": "(event: any, value: boolean) => void",
-          "description": "Callback for when group button is clicked to expand",
-          "defaultValue": "(event: any, expanded: boolean) => undefined as any"
-        },
-        {
-          "name": "title",
-          "type": "React.ReactNode",
-          "description": "Notification drawer group title",
-          "required": true
-        },
-        {
-          "name": "tooltipPosition",
-          "type": "| TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
-          "description": "Position of the tooltip which is displayed if text is truncated"
-        },
-        {
-          "name": "truncateTitle",
-          "type": "number",
-          "description": "Truncate title to number of lines",
-          "defaultValue": "0"
-        }
-      ]
-    },
-    {
-      "name": "NotificationDrawerGroupList",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the notification drawer list body"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the notification drawer list body",
-          "defaultValue": "''"
-        }
-      ]
-    },
-    {
-      "name": "NotificationDrawerList",
-      "description": "",
-      "props": [
-        {
-          "name": "aria-label",
-          "type": "string",
-          "description": "Adds an accessible label to the notification drawer list."
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the notification drawer list body"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the notification drawer list body",
-          "defaultValue": "''"
-        },
-        {
-          "name": "isHidden",
-          "type": "boolean",
-          "description": "Adds styling to the notification drawer list to indicate expand/hide state",
-          "defaultValue": "false"
-        }
-      ]
-    },
-    {
-      "name": "NotificationDrawerListItem",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the list item",
-          "defaultValue": "null"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the list item",
-          "defaultValue": "''"
-        },
-        {
-          "name": "isHoverable",
-          "type": "boolean",
-          "description": "Modifies the list item to include hover styles on :hover",
-          "defaultValue": "true"
-        },
-        {
-          "name": "isRead",
-          "type": "boolean",
-          "description": "Adds styling to the list item to indicate it has been read",
-          "defaultValue": "false"
-        },
-        {
-          "name": "onClick",
-          "type": "(event: any) => void",
-          "description": "Callback for when a list item is clicked",
-          "defaultValue": "(event: React.MouseEvent) => undefined as any"
-        },
-        {
-          "name": "readStateScreenReaderText",
-          "type": "string",
-          "description": "Visually hidden text that conveys the current read state of the notification list item"
-        },
-        {
-          "name": "tabIndex",
-          "type": "number",
-          "description": "Tab index for the list item",
-          "defaultValue": "0"
-        },
-        {
-          "name": "variant",
-          "type": "'custom' | 'success' | 'danger' | 'warning' | 'info'",
-          "description": "Variant indicates the severity level",
-          "defaultValue": "'custom'"
-        }
-      ]
-    },
-    {
-      "name": "NotificationDrawerListItemBody",
-      "description": "",
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Content rendered inside the list item body"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes added to the list item body",
-          "defaultValue": "''"
-        },
-        {
-          "name": "timestamp",
-          "type": "React.ReactNode",
-          "description": "List item timestamp"
-        }
-      ]
-    },
-    {
-      "name": "NotificationDrawerListItemHeader",
-      "description": "",
-      "props": [
-        {
-          "name": "actionHasNoOffset",
-          "type": "boolean",
-          "description": "Removes the offset of the notification drawer actions.",
-          "defaultValue": "false"
-        },
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "Actions rendered inside the notification drawer list item header"
-        },
-        {
-          "name": "className",
-          "type": "string",
-          "description": "Additional classes for notification drawer list item header.",
-          "defaultValue": "''"
-        },
-        {
-          "name": "headingLevel",
-          "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
-          "description": "Sets the heading level to use for the list item header title. Default is h2.",
-          "defaultValue": "'h2'"
-        },
-        {
-          "name": "icon",
-          "type": "React.ReactNode",
-          "description": "Add custom icon for notification drawer list item header",
-          "defaultValue": "null"
-        },
-        {
-          "name": "srTitle",
-          "type": "string",
-          "description": "Notification drawer list item header screen reader title"
-        },
-        {
-          "name": "title",
-          "type": "string",
-          "description": "Notification drawer list item title",
-          "required": true
-        },
-        {
-          "name": "tooltipPosition",
-          "type": "| TooltipPosition\n| 'auto'\n| 'top'\n| 'bottom'\n| 'left'\n| 'right'\n| 'top-start'\n| 'top-end'\n| 'bottom-start'\n| 'bottom-end'\n| 'left-start'\n| 'left-end'\n| 'right-start'\n| 'right-end'",
-          "description": "Position of the tooltip which is displayed if text is truncated"
-        },
-        {
-          "name": "truncateTitle",
-          "type": "number",
-          "description": "Truncate title to number of lines",
-          "defaultValue": "0"
-        },
-        {
-          "name": "variant",
-          "type": "'success' | 'danger' | 'warning' | 'info' | 'custom'",
-          "description": "Variant indicates the severity level",
-          "defaultValue": "'custom'"
-        }
-      ]
-    }
-  ],
-  "cssPrefix": [
-    "pf-v6-c-notification-drawer"
-  ],
-  "examples": [
-    "Basic",
-    "Groups",
-    "Lightweight"
-  ]
-};
-pageData.liveContext = {
-  useState,
-  SearchIcon,
-  RhUiEllipsisVerticalFillIcon
-};
-pageData.examples = {
-  'Basic': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  NotificationDrawer,\n  NotificationDrawerBody,\n  NotificationDrawerHeader,\n  NotificationDrawerList,\n  NotificationDrawerListItem,\n  NotificationDrawerListItemBody,\n  NotificationDrawerListItemHeader,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const NotificationDrawerBasic: React.FunctionComponent = () => {\n  const [isOpenMap, setIsOpenMap] = useState(new Array(7).fill(false));\n\n  const onToggle = (index: number) => () => {\n    const newState = [...isOpenMap.slice(0, index), !isOpenMap[index], ...isOpenMap.slice(index + 1)];\n    setIsOpenMap(newState);\n  };\n\n  const onSelect = () => {\n    setIsOpenMap(new Array(7).fill(false));\n  };\n\n  const onDrawerClose = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => {\n    setIsOpenMap(new Array(7).fill(false));\n  };\n\n  const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = isOpenMap;\n  const dropdownItems = (\n    <>\n      <DropdownItem>Action</DropdownItem>\n      <DropdownItem\n        to=\"#default-link2\"\n        // Prevent the default onClick functionality for example purposes\n        onClick={(ev: any) => ev.preventDefault()}\n      >\n        Link\n      </DropdownItem>\n      <DropdownItem isDisabled>Disabled Action</DropdownItem>\n      <DropdownItem isDisabled to=\"#default-link4\">\n        Disabled Link\n      </DropdownItem>\n    </>\n  );\n\n  return (\n    <NotificationDrawer>\n      <NotificationDrawerHeader count={3} onClose={onDrawerClose}>\n        <Dropdown\n          onSelect={onSelect}\n          isOpen={isOpen0}\n          onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}\n          popperProps={{ position: 'right' }}\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              ref={toggleRef}\n              isExpanded={isOpen0}\n              onClick={onToggle(0)}\n              variant=\"plain\"\n              aria-label={`Basic example header kebab toggle`}\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          )}\n        >\n          <DropdownList>{dropdownItems}</DropdownList>\n        </Dropdown>\n      </NotificationDrawerHeader>\n      <NotificationDrawerBody>\n        <NotificationDrawerList aria-label=\"Notifications in the basic example\">\n          <NotificationDrawerListItem variant=\"info\">\n            <NotificationDrawerListItemHeader\n              variant=\"info\"\n              title=\"Unread info notification title\"\n              srTitle=\"Info notification:\"\n            >\n              <Dropdown\n                onSelect={onSelect}\n                isOpen={isOpen1}\n                onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}\n                popperProps={{ position: 'right' }}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen0}\n                    onClick={onToggle(1)}\n                    variant=\"plain\"\n                    aria-label={`Basic example notification 1 kebab toggle`}\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n              >\n                <DropdownList>{dropdownItems}</DropdownList>\n              </Dropdown>\n            </NotificationDrawerListItemHeader>\n            <NotificationDrawerListItemBody timestamp=\"5 minutes ago\">\n              This is an info notification description.\n            </NotificationDrawerListItemBody>\n          </NotificationDrawerListItem>\n          <NotificationDrawerListItem variant=\"danger\">\n            <NotificationDrawerListItemHeader\n              variant=\"danger\"\n              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.\"\n              srTitle=\"Danger notification:\"\n            >\n              <Dropdown\n                onSelect={onSelect}\n                isOpen={isOpen2}\n                onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}\n                popperProps={{ position: 'right' }}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen2}\n                    onClick={onToggle(2)}\n                    variant=\"plain\"\n                    aria-label={`Basic example notification 2 kebab toggle`}\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n              >\n                <DropdownList>{dropdownItems}</DropdownList>\n              </Dropdown>\n            </NotificationDrawerListItemHeader>\n            <NotificationDrawerListItemBody timestamp=\"10 minutes ago\">\n              This is a danger notification description. This is a long description to show how the title will wrap if\n              it is long and wraps to multiple lines.\n            </NotificationDrawerListItemBody>\n          </NotificationDrawerListItem>\n          <NotificationDrawerListItem variant=\"danger\">\n            <NotificationDrawerListItemHeader\n              truncateTitle={1}\n              variant=\"danger\"\n              title=\"Unread danger notification title. This is a long title to show how the title will be truncated if it is long and will be shown in a single line.\"\n              srTitle=\"Danger notification:\"\n            >\n              <Dropdown\n                onSelect={onSelect}\n                isOpen={isOpen3}\n                onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}\n                popperProps={{ position: 'right' }}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen3}\n                    onClick={onToggle(3)}\n                    variant=\"plain\"\n                    aria-label={`Basic example notification 3 kebab toggle`}\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n              >\n                <DropdownList>{dropdownItems}</DropdownList>\n              </Dropdown>\n            </NotificationDrawerListItemHeader>\n            <NotificationDrawerListItemBody timestamp=\"10 minutes ago\">\n              This is a danger notification description. This is a long description to show how the title will wrap if\n              it is long and wraps to multiple lines.\n            </NotificationDrawerListItemBody>\n          </NotificationDrawerListItem>\n          <NotificationDrawerListItem variant=\"warning\" isRead>\n            <NotificationDrawerListItemHeader\n              variant=\"warning\"\n              title=\"Read warning notification title\"\n              srTitle=\"Warning notification:\"\n            >\n              <Dropdown\n                onSelect={onSelect}\n                isOpen={isOpen4}\n                onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}\n                popperProps={{ position: 'right' }}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen4}\n                    onClick={onToggle(4)}\n                    variant=\"plain\"\n                    aria-label={`Basic example notification 4 kebab toggle`}\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n              >\n                <DropdownList>{dropdownItems}</DropdownList>\n              </Dropdown>\n            </NotificationDrawerListItemHeader>\n            <NotificationDrawerListItemBody timestamp=\"20 minutes ago\">\n              This is a warning notification description.\n            </NotificationDrawerListItemBody>\n          </NotificationDrawerListItem>\n          <NotificationDrawerListItem variant=\"success\" isRead>\n            <NotificationDrawerListItemHeader\n              variant=\"success\"\n              title=\"Read success notification title\"\n              srTitle=\"Success notification:\"\n            >\n              <Dropdown\n                onSelect={onSelect}\n                isOpen={isOpen5}\n                onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}\n                popperProps={{ position: 'right' }}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen5}\n                    onClick={onToggle(5)}\n                    variant=\"plain\"\n                    aria-label={`Basic example notification 5 kebab toggle`}\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n              >\n                <DropdownList>{dropdownItems}</DropdownList>\n              </Dropdown>\n            </NotificationDrawerListItemHeader>\n            <NotificationDrawerListItemBody timestamp=\"30 minutes ago\">\n              This is a success notification description.\n            </NotificationDrawerListItemBody>\n          </NotificationDrawerListItem>\n          <NotificationDrawerListItem isRead>\n            <NotificationDrawerListItemHeader title=\"Read (default) notification title\" srTitle=\"notification:\">\n              <Dropdown\n                onSelect={onSelect}\n                isOpen={isOpen6}\n                onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}\n                popperProps={{ position: 'right' }}\n                toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                  <MenuToggle\n                    ref={toggleRef}\n                    isExpanded={isOpen6}\n                    onClick={onToggle(6)}\n                    variant=\"plain\"\n                    aria-label={`Basic example notification 6 kebab toggle`}\n                    icon={<RhUiEllipsisVerticalFillIcon />}\n                  />\n                )}\n              >\n                <DropdownList>{dropdownItems}</DropdownList>\n              </Dropdown>\n            </NotificationDrawerListItemHeader>\n            <NotificationDrawerListItemBody timestamp=\"35 minutes ago\">\n              This is a default notification description.\n            </NotificationDrawerListItemBody>\n          </NotificationDrawerListItem>\n        </NotificationDrawerList>\n      </NotificationDrawerBody>\n    </NotificationDrawer>\n  );\n};\n","title":"Basic","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Groups': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Button,\n  EmptyState,\n  EmptyStateBody,\n  EmptyStateFooter,\n  NotificationDrawer,\n  NotificationDrawerBody,\n  NotificationDrawerHeader,\n  NotificationDrawerGroup,\n  NotificationDrawerGroupList,\n  NotificationDrawerList,\n  NotificationDrawerListItem,\n  NotificationDrawerListItemBody,\n  NotificationDrawerListItemHeader,\n  EmptyStateVariant,\n  EmptyStateActions,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement\n} from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\n\nexport const NotificationDrawerGroups: React.FunctionComponent = () => {\n  const [firstGroupExpanded, setFirstGroupExpanded] = useState(false);\n  const [secondGroupExpanded, setSecondGroupExpanded] = useState(true);\n  const [thirdGroupExpanded, setThirdGroupExpanded] = useState(false);\n  const [isOpenMap, setIsOpenMap] = useState({});\n\n  const onToggle = (id: string) => {\n    setIsOpenMap((prevState) => ({ ...prevState, [id]: !prevState[id] }));\n  };\n\n  const onSelect = () => {\n    setIsOpenMap({});\n  };\n\n  const toggleFirstDrawer = (_event: any, value: boolean) => {\n    setFirstGroupExpanded(value);\n    setSecondGroupExpanded(false);\n    setThirdGroupExpanded(false);\n  };\n\n  const toggleSecondDrawer = (_event: any, value: boolean) => {\n    setSecondGroupExpanded(value);\n    setFirstGroupExpanded(false);\n    setThirdGroupExpanded(false);\n  };\n\n  const toggleThirdDrawer = (_event: any, value: boolean) => {\n    setThirdGroupExpanded(value);\n    setSecondGroupExpanded(false);\n    setFirstGroupExpanded(false);\n  };\n\n  const dropdownItems = (\n    <>\n      <DropdownItem>Action</DropdownItem>\n      <DropdownItem\n        to=\"#default-link2\"\n        // Prevent the default onClick functionality for example purposes\n        onClick={(ev: any) => ev.preventDefault()}\n      >\n        Link\n      </DropdownItem>\n      <DropdownItem isDisabled>Disabled Action</DropdownItem>\n      <DropdownItem isDisabled to=\"#default-link4\">\n        Disabled Link\n      </DropdownItem>\n    </>\n  );\n\n  return (\n    <NotificationDrawer>\n      <NotificationDrawerHeader count={4}>\n        <Dropdown\n          onSelect={onSelect}\n          isOpen={isOpenMap['groups-kebab-toggle-1'] || false}\n          onOpenChange={() => setIsOpenMap({})}\n          popperProps={{ position: 'right' }}\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              ref={toggleRef}\n              id=\"groups-kebab-toggle-1\"\n              isExpanded={isOpenMap['groups-kebab-toggle-1'] || false}\n              onClick={() => onToggle('groups-kebab-toggle-1')}\n              variant=\"plain\"\n              aria-label={`Groups example header kebab toggle`}\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          )}\n        >\n          <DropdownList>{dropdownItems}</DropdownList>\n        </Dropdown>\n      </NotificationDrawerHeader>\n      <NotificationDrawerBody>\n        <NotificationDrawerGroupList>\n          <NotificationDrawerGroup\n            title=\"First notification group\"\n            isExpanded={firstGroupExpanded}\n            count={2}\n            onExpand={toggleFirstDrawer}\n          >\n            <NotificationDrawerList isHidden={!firstGroupExpanded} aria-label=\"Notifications in the first group\">\n              <NotificationDrawerListItem variant=\"info\">\n                <NotificationDrawerListItemHeader\n                  variant=\"info\"\n                  title=\"Unread info notification title\"\n                  srTitle=\"Info notification:\"\n                >\n                  <Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap['groups-kebab-toggle-2'] || false}\n                    onOpenChange={() => setIsOpenMap({})}\n                    popperProps={{ position: 'right' }}\n                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                      <MenuToggle\n                        ref={toggleRef}\n                        id=\"groups-kebab-toggle-2\"\n                        isExpanded={isOpenMap['groups-kebab-toggle-2'] || false}\n                        onClick={() => onToggle('groups-kebab-toggle-2')}\n                        variant=\"plain\"\n                        aria-label={`Groups example group 1 notification 1 kebab toggle`}\n                        icon={<RhUiEllipsisVerticalFillIcon />}\n                      />\n                    )}\n                  >\n                    <DropdownList>{dropdownItems}</DropdownList>\n                  </Dropdown>\n                </NotificationDrawerListItemHeader>\n                <NotificationDrawerListItemBody timestamp=\"5 minutes ago\">\n                  This is an info notification description.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n              <NotificationDrawerListItem variant=\"danger\">\n                <NotificationDrawerListItemHeader\n                  variant=\"danger\"\n                  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.\"\n                  srTitle=\"Danger notification:\"\n                >\n                  <Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap['groups-kebab-toggle-3'] || false}\n                    onOpenChange={() => setIsOpenMap({})}\n                    popperProps={{ position: 'right' }}\n                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                      <MenuToggle\n                        ref={toggleRef}\n                        id=\"groups-kebab-toggle-3\"\n                        isExpanded={isOpenMap['groups-kebab-toggle-3'] || false}\n                        onClick={() => onToggle('groups-kebab-toggle-3')}\n                        variant=\"plain\"\n                        aria-label={`Groups example group 1 notification 2 kebab toggle`}\n                        icon={<RhUiEllipsisVerticalFillIcon />}\n                      />\n                    )}\n                  >\n                    <DropdownList>{dropdownItems}</DropdownList>\n                  </Dropdown>\n                </NotificationDrawerListItemHeader>\n                <NotificationDrawerListItemBody timestamp=\"10 minutes ago\">\n                  This is a danger notification description. This is a long description to show how the title will wrap\n                  if it is long and wraps to multiple lines.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n              <NotificationDrawerListItem variant=\"warning\" isRead>\n                <NotificationDrawerListItemHeader\n                  variant=\"warning\"\n                  title=\"Read warning notification title\"\n                  srTitle=\"Warning notification:\"\n                >\n                  <Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap['groups-kebab-toggle-4'] || false}\n                    onOpenChange={() => setIsOpenMap({})}\n                    popperProps={{ position: 'right' }}\n                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                      <MenuToggle\n                        ref={toggleRef}\n                        id=\"groups-kebab-toggle-4\"\n                        isExpanded={isOpenMap['groups-kebab-toggle-4'] || false}\n                        onClick={() => onToggle('groups-kebab-toggle-4')}\n                        variant=\"plain\"\n                        aria-label={`Groups example group 1 notification 3 kebab toggle`}\n                        icon={<RhUiEllipsisVerticalFillIcon />}\n                      />\n                    )}\n                  >\n                    <DropdownList>{dropdownItems}</DropdownList>\n                  </Dropdown>\n                </NotificationDrawerListItemHeader>\n                <NotificationDrawerListItemBody timestamp=\"20 minutes ago\">\n                  This is a warning notification description.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n              <NotificationDrawerListItem variant=\"success\" isRead>\n                <NotificationDrawerListItemHeader\n                  variant=\"success\"\n                  title=\"Read success notification title\"\n                  srTitle=\"Success notification:\"\n                >\n                  <Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap['groups-kebab-toggle-5'] || false}\n                    onOpenChange={() => setIsOpenMap({})}\n                    popperProps={{ position: 'right' }}\n                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                      <MenuToggle\n                        ref={toggleRef}\n                        id=\"groups-kebab-toggle-5\"\n                        isExpanded={isOpenMap['groups-kebab-toggle-5'] || false}\n                        onClick={() => onToggle('groups-kebab-toggle-5')}\n                        variant=\"plain\"\n                        aria-label={`Groups example group 1 notification 4 kebab toggle`}\n                        icon={<RhUiEllipsisVerticalFillIcon />}\n                      />\n                    )}\n                  >\n                    <DropdownList>{dropdownItems}</DropdownList>\n                  </Dropdown>\n                </NotificationDrawerListItemHeader>\n                <NotificationDrawerListItemBody timestamp=\"30 minutes ago\">\n                  This is a success notification description.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n            </NotificationDrawerList>\n          </NotificationDrawerGroup>\n          <NotificationDrawerGroup\n            title=\"Second notification group\"\n            isExpanded={secondGroupExpanded}\n            count={2}\n            onExpand={toggleSecondDrawer}\n          >\n            <NotificationDrawerList isHidden={!secondGroupExpanded} aria-label=\"Notifications in the second group\">\n              <NotificationDrawerListItem variant=\"info\">\n                <NotificationDrawerListItemHeader\n                  variant=\"info\"\n                  title=\"Unread info notification title\"\n                  srTitle=\"Info notification:\"\n                >\n                  <Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap['groups-kebab-toggle-6'] || false}\n                    onOpenChange={() => setIsOpenMap({})}\n                    popperProps={{ position: 'right' }}\n                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                      <MenuToggle\n                        ref={toggleRef}\n                        id=\"groups-kebab-toggle-6\"\n                        isExpanded={isOpenMap['groups-kebab-toggle-6'] || false}\n                        onClick={() => onToggle('groups-kebab-toggle-6')}\n                        variant=\"plain\"\n                        aria-label={`Groups example group 2 notification 1 kebab toggle`}\n                        icon={<RhUiEllipsisVerticalFillIcon />}\n                      />\n                    )}\n                  >\n                    <DropdownList>{dropdownItems}</DropdownList>\n                  </Dropdown>\n                </NotificationDrawerListItemHeader>\n                <NotificationDrawerListItemBody timestamp=\"5 minutes ago\">\n                  This is an info notification description.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n              <NotificationDrawerListItem variant=\"danger\">\n                <NotificationDrawerListItemHeader\n                  variant=\"danger\"\n                  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.\"\n                  srTitle=\"Danger notification:\"\n                >\n                  <Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap['groups-kebab-toggle-7'] || false}\n                    onOpenChange={() => setIsOpenMap({})}\n                    popperProps={{ position: 'right' }}\n                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                      <MenuToggle\n                        ref={toggleRef}\n                        id=\"groups-kebab-toggle-7\"\n                        isExpanded={isOpenMap['groups-kebab-toggle-7'] || false}\n                        onClick={() => onToggle('groups-kebab-toggle-7')}\n                        variant=\"plain\"\n                        aria-label={`Groups example group 2 notification 2 kebab toggle`}\n                        icon={<RhUiEllipsisVerticalFillIcon />}\n                      />\n                    )}\n                  >\n                    <DropdownList>{dropdownItems}</DropdownList>\n                  </Dropdown>\n                </NotificationDrawerListItemHeader>\n                <NotificationDrawerListItemBody timestamp=\"10 minutes ago\">\n                  This is a danger notification description. This is a long description to show how the title will wrap\n                  if it is long and wraps to multiple lines.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n              <NotificationDrawerListItem variant=\"warning\" isRead>\n                <NotificationDrawerListItemHeader\n                  variant=\"warning\"\n                  title=\"Read warning notification title\"\n                  srTitle=\"Warning notification:\"\n                >\n                  <Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap['groups-kebab-toggle-8'] || false}\n                    onOpenChange={() => setIsOpenMap({})}\n                    popperProps={{ position: 'right' }}\n                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                      <MenuToggle\n                        ref={toggleRef}\n                        id=\"groups-kebab-toggle-8\"\n                        isExpanded={isOpenMap['groups-kebab-toggle-8'] || false}\n                        onClick={() => onToggle('groups-kebab-toggle-8')}\n                        variant=\"plain\"\n                        aria-label={`Groups example group 2 notification 3 kebab toggle`}\n                        icon={<RhUiEllipsisVerticalFillIcon />}\n                      />\n                    )}\n                  >\n                    <DropdownList>{dropdownItems}</DropdownList>\n                  </Dropdown>\n                </NotificationDrawerListItemHeader>\n                <NotificationDrawerListItemBody timestamp=\"20 minutes ago\">\n                  This is a warning notification description.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n              <NotificationDrawerListItem variant=\"success\" isRead>\n                <NotificationDrawerListItemHeader\n                  variant=\"success\"\n                  title=\"Read success notification title\"\n                  srTitle=\"Success notification:\"\n                >\n                  <Dropdown\n                    onSelect={onSelect}\n                    isOpen={isOpenMap['groups-kebab-toggle-9'] || false}\n                    onOpenChange={() => setIsOpenMap({})}\n                    popperProps={{ position: 'right' }}\n                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                      <MenuToggle\n                        ref={toggleRef}\n                        id=\"groups-kebab-toggle-9\"\n                        isExpanded={isOpenMap['groups-kebab-toggle-9'] || false}\n                        onClick={() => onToggle('groups-kebab-toggle-9')}\n                        variant=\"plain\"\n                        aria-label={`Groups example group 2 notification 4 kebab toggle`}\n                        icon={<RhUiEllipsisVerticalFillIcon />}\n                      />\n                    )}\n                  >\n                    <DropdownList>{dropdownItems}</DropdownList>\n                  </Dropdown>\n                </NotificationDrawerListItemHeader>\n                <NotificationDrawerListItemBody timestamp=\"30 minutes ago\">\n                  This is a success notification description.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n            </NotificationDrawerList>\n          </NotificationDrawerGroup>\n          <NotificationDrawerGroup\n            title=\"Third notification group. This is a long title to show how the title will be truncated if it is long and will be shown in a single line.\"\n            isExpanded={thirdGroupExpanded}\n            count={0}\n            onExpand={toggleThirdDrawer}\n            truncateTitle={1}\n          >\n            <NotificationDrawerList isHidden={!thirdGroupExpanded} aria-label=\"Notifications in the third group\">\n              <EmptyState\n                headingLevel=\"h2\"\n                titleText=\"No alerts found\"\n                icon={SearchIcon}\n                variant={EmptyStateVariant.full}\n              >\n                <EmptyStateBody>\n                  There are currently no critical alerts firing. There may be firing alerts of other severities or\n                  silenced critical alerts however.\n                </EmptyStateBody>\n                <EmptyStateFooter>\n                  <EmptyStateActions>\n                    <Button variant=\"link\">Action</Button>\n                  </EmptyStateActions>\n                </EmptyStateFooter>\n              </EmptyState>\n            </NotificationDrawerList>\n          </NotificationDrawerGroup>\n        </NotificationDrawerGroupList>\n      </NotificationDrawerBody>\n    </NotificationDrawer>\n  );\n};\n","title":"Groups","lang":"ts","className":""}}>
-      
-    </Example>,
-  'Lightweight': props => 
-    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  Button,\n  EmptyState,\n  EmptyStateBody,\n  EmptyStateFooter,\n  EmptyStateVariant,\n  NotificationDrawer,\n  NotificationDrawerBody,\n  NotificationDrawerHeader,\n  NotificationDrawerGroup,\n  NotificationDrawerGroupList,\n  NotificationDrawerList,\n  NotificationDrawerListItem,\n  NotificationDrawerListItemBody,\n  NotificationDrawerListItemHeader,\n  EmptyStateActions\n} from '@patternfly/react-core';\nimport SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';\n\nexport const NotificationDrawerLightweight: React.FunctionComponent = () => {\n  const [firstGroupExpanded, setFirstGroupExpanded] = useState(false);\n  const [secondGroupExpanded, setSecondGroupExpanded] = useState(true);\n  const [thirdGroupExpanded, setThirdGroupExpanded] = useState(false);\n\n  const toggleFirstDrawer = (_event: any, value: boolean) => {\n    setFirstGroupExpanded(value);\n    setSecondGroupExpanded(false);\n    setThirdGroupExpanded(false);\n  };\n\n  const toggleSecondDrawer = (_event: any, value: boolean) => {\n    setSecondGroupExpanded(value);\n    setFirstGroupExpanded(false);\n    setThirdGroupExpanded(false);\n  };\n\n  const toggleThirdDrawer = (_event: any, value: boolean) => {\n    setThirdGroupExpanded(value);\n    setSecondGroupExpanded(false);\n    setFirstGroupExpanded(false);\n  };\n\n  const onDrawerClose = (_event: KeyboardEvent | React.MouseEvent<Element, MouseEvent>) => {\n    // do something cool in a callback\n  };\n\n  return (\n    <NotificationDrawer>\n      <NotificationDrawerHeader onClose={(event) => onDrawerClose(event)} />\n      <NotificationDrawerBody>\n        <NotificationDrawerGroupList>\n          <NotificationDrawerGroup\n            title=\"First notification group\"\n            isExpanded={firstGroupExpanded}\n            count={4}\n            isRead={true}\n            onExpand={toggleFirstDrawer}\n          >\n            <NotificationDrawerList\n              isHidden={!firstGroupExpanded}\n              aria-label=\"Notifications in the first lightweight group\"\n            >\n              <NotificationDrawerListItem variant=\"info\">\n                <NotificationDrawerListItemHeader\n                  variant=\"info\"\n                  title=\"Info notification title\"\n                  srTitle=\"Info notification:\"\n                />\n                <NotificationDrawerListItemBody timestamp=\"5 minutes ago\">\n                  This is an info notification description.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n              <NotificationDrawerListItem variant=\"danger\">\n                <NotificationDrawerListItemHeader\n                  variant=\"danger\"\n                  title=\"Danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.\"\n                  srTitle=\"Danger notification:\"\n                />\n                <NotificationDrawerListItemBody timestamp=\"10 minutes ago\">\n                  This is a danger notification description. This is a long description to show how the title will wrap\n                  if it is long and wraps to multiple lines.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n              <NotificationDrawerListItem variant=\"warning\">\n                <NotificationDrawerListItemHeader\n                  variant=\"warning\"\n                  title=\"Warning notification title\"\n                  srTitle=\"Warning notification:\"\n                />\n                <NotificationDrawerListItemBody timestamp=\"20 minutes ago\">\n                  This is a warning notification description.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n              <NotificationDrawerListItem variant=\"success\">\n                <NotificationDrawerListItemHeader\n                  variant=\"success\"\n                  title=\"Success notification title\"\n                  srTitle=\"Success notification:\"\n                />\n                <NotificationDrawerListItemBody timestamp=\"30 minutes ago\">\n                  This is a success notification description.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n            </NotificationDrawerList>\n          </NotificationDrawerGroup>\n          <NotificationDrawerGroup\n            title=\"Second notification group\"\n            isExpanded={secondGroupExpanded}\n            count={4}\n            isRead={true}\n            onExpand={toggleSecondDrawer}\n          >\n            <NotificationDrawerList\n              isHidden={!secondGroupExpanded}\n              aria-label=\"Notifications in the second lightweight group\"\n            >\n              <NotificationDrawerListItem variant=\"info\">\n                <NotificationDrawerListItemHeader\n                  variant=\"info\"\n                  title=\"Info notification title w/action\"\n                  srTitle=\"Info notification:\"\n                >\n                  <Button variant=\"link\">Action</Button>\n                </NotificationDrawerListItemHeader>\n                <NotificationDrawerListItemBody timestamp=\"5 minutes ago\">\n                  This is an info notification description.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n              <NotificationDrawerListItem variant=\"danger\">\n                <NotificationDrawerListItemHeader\n                  variant=\"danger\"\n                  title=\"Danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines.\"\n                  srTitle=\"Danger notification:\"\n                />\n                <NotificationDrawerListItemBody timestamp=\"10 minutes ago\">\n                  This is a danger notification description. This is a long description to show how the title will wrap\n                  if it is long and wraps to multiple lines.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n              <NotificationDrawerListItem variant=\"warning\">\n                <NotificationDrawerListItemHeader\n                  variant=\"warning\"\n                  title=\"Warning notification title\"\n                  srTitle=\"Warning notification:\"\n                />\n                <NotificationDrawerListItemBody timestamp=\"20 minutes ago\">\n                  This is a warning notification description.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n              <NotificationDrawerListItem variant=\"success\">\n                <NotificationDrawerListItemHeader\n                  variant=\"success\"\n                  title=\"Success notification title\"\n                  srTitle=\"Success notification:\"\n                />\n                <NotificationDrawerListItemBody timestamp=\"30 minutes ago\">\n                  This is a success notification description.\n                </NotificationDrawerListItemBody>\n              </NotificationDrawerListItem>\n            </NotificationDrawerList>\n          </NotificationDrawerGroup>\n          <NotificationDrawerGroup\n            title=\"Third notification group\"\n            isExpanded={thirdGroupExpanded}\n            count={0}\n            isRead={true}\n            onExpand={toggleThirdDrawer}\n          >\n            <NotificationDrawerList\n              isHidden={!thirdGroupExpanded}\n              aria-label=\"Notifications in the third lightweight group\"\n            >\n              <EmptyState\n                headingLevel=\"h2\"\n                titleText=\"No alerts found\"\n                icon={SearchIcon}\n                variant={EmptyStateVariant.full}\n              >\n                <EmptyStateBody>\n                  There are currently no critical alerts firing. There may be firing alerts of other severities or\n                  silenced critical alerts however.\n                </EmptyStateBody>\n                <EmptyStateFooter>\n                  <EmptyStateActions>\n                    <Button variant=\"link\">Action</Button>\n                  </EmptyStateActions>\n                </EmptyStateFooter>\n              </EmptyState>\n            </NotificationDrawerList>\n          </NotificationDrawerGroup>\n        </NotificationDrawerGroupList>\n      </NotificationDrawerBody>\n    </NotificationDrawer>\n  );\n};\n","title":"Lightweight","lang":"ts","className":""}}>
-      
-    </Example>
-};
-
-const Component = () => (
-  <React.Fragment>
-    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
-      {`Examples`}
-    </AutoLinkHeader>
-    {React.createElement(pageData.examples["Basic"])}
-    {React.createElement(pageData.examples["Groups"])}
-    {React.createElement(pageData.examples["Lightweight"])}
-  </React.Fragment>
-);
-Component.displayName = 'ComponentsNotificationDrawerReactDocs';
-Component.pageData = pageData;
-
-export default Component;