feat(NotificationDrawer): Add notification drawer demo (#4640)

* feat(NotificationDrawer): Add notificaiton drawer demo

* fix snapshots

* reorgainize PageHeaderToolItems in demos

* address PR comments after incorporating updated notification badge

* only apply selected modifier if notifications all read

* bump version and fix selected icon modifier application

Author: nicolethoen

packages/react-catalog-view-extension/package.json

@@ -35,7 +35,7 @@
     "clean": "rimraf dist"
   },
   "dependencies": {
-    "@patternfly/patternfly": "4.31.2",
+    "@patternfly/patternfly": "4.31.3",
     "@patternfly/react-core": "^4.38.1",
     "@patternfly/react-styles": "^4.6.1",
     "classnames": "^2.2.5",

packages/react-charts/package.json

@@ -29,7 +29,7 @@
   },
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "dependencies": {
-    "@patternfly/patternfly": "4.31.2",
+    "@patternfly/patternfly": "4.31.3",
     "@patternfly/react-styles": "^4.6.1",
     "@patternfly/react-tokens": "^4.8.1",
     "hoist-non-react-statics": "^3.3.0",

packages/react-core/package.json

@@ -44,7 +44,7 @@
     "tslib": "^1.11.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.31.2",
+    "@patternfly/patternfly": "4.31.3",
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.1",

packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx

@@ -30,7 +30,9 @@ export const NotificationDrawerHeader: React.FunctionComponent<NotificationDrawe
     <Text component={TextVariants.h1} className={css(styles.notificationDrawerHeaderTitle)}>
       {title}
     </Text>
-    {count && <span className={css(styles.notificationDrawerHeaderStatus)}>{`${count} ${unreadText}`}</span>}
+    {count !== undefined && (
+      <span className={css(styles.notificationDrawerHeaderStatus)}>{`${count} ${unreadText}`}</span>
+    )}
     {children && <div className={css(styles.notificationDrawerHeaderAction)}>{children}</div>}
   </div>
 );

packages/react-core/src/components/Page/Page.tsx

@@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';
 import globalBreakpointXl from '@patternfly/react-tokens/dist/js/global_breakpoint_xl';
 import { debounce } from '../../helpers/util';
+import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer';
 
 export enum PageLayouts {
   vertical = 'vertical',
@@ -33,6 +34,12 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   header?: React.ReactNode;
   /** Sidebar component for a side nav (e.g. <PageSidebar />) */
   sidebar?: React.ReactNode;
+  /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
+  notificationDrawer?: React.ReactNode;
+  /** Flag indicating Notification drawer in expanded */
+  isNotificationDrawerExpanded?: boolean;
+  /** Callback when notification drawer panel is finished expanding. */
+  onNotificationDrawerExpand?: () => void;
   /** Skip to content component for the page */
   skipToContent?: React.ReactElement;
   /** Sets the value for role on the <main> element */
@@ -73,7 +80,9 @@ export class Page extends React.Component<PageProps, PageState> {
     isManagedSidebar: false,
     defaultManagedSidebarIsOpen: true,
     onPageResize: (): void => null,
-    mainTabIndex: -1
+    mainTabIndex: -1,
+    isNotificationDrawerExpanded: false,
+    onNotificationDrawerExpand: () => null
   };
 
   constructor(props: PageProps) {
@@ -134,6 +143,9 @@ export class Page extends React.Component<PageProps, PageState> {
       children,
       header,
       sidebar,
+      notificationDrawer,
+      isNotificationDrawerExpanded,
+      onNotificationDrawerExpand,
       skipToContent,
       role,
       mainContainerId,
@@ -154,22 +166,37 @@ export class Page extends React.Component<PageProps, PageState> {
       isNavOpen: mobileView ? mobileIsNavOpen : desktopIsNavOpen
     };
 
+    const main = (
+      <main
+        role={role}
+        id={mainContainerId}
+        className={css(styles.pageMain)}
+        tabIndex={mainTabIndex}
+        aria-label={mainAriaLabel}
+      >
+        {breadcrumb && <section className={css(styles.pageMainBreadcrumb)}>{breadcrumb}</section>}
+        {children}
+      </main>
+    );
+
+    const panelContent = <DrawerPanelContent>{notificationDrawer}</DrawerPanelContent>;
+
     return (
       <PageContextProvider value={context}>
         <div {...rest} className={css(styles.page, className)}>
           {skipToContent}
           {header}
           {sidebar}
-          <main
-            role={role}
-            id={mainContainerId}
-            className={css(styles.pageMain)}
-            tabIndex={mainTabIndex}
-            aria-label={mainAriaLabel}
-          >
-            {breadcrumb && <section className={css(styles.pageMainBreadcrumb)}>{breadcrumb}</section>}
-            {children}
-          </main>
+          {notificationDrawer && (
+            <div className={css(styles.pageDrawer)}>
+              <Drawer isExpanded={isNotificationDrawerExpanded} onExpand={onNotificationDrawerExpand}>
+                <DrawerContent panelContent={panelContent}>
+                  <DrawerContentBody>{main}</DrawerContentBody>
+                </DrawerContent>
+              </Drawer>
+            </div>
+          )}
+          {!notificationDrawer && main}
         </div>
       </PageContextProvider>
     );

packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap

@@ -14,7 +14,9 @@ exports[`Check dark page against snapshot 1`] = `
   }
   id="PageId"
   isManagedSidebar={false}
+  isNotificationDrawerExpanded={false}
   mainTabIndex={-1}
+  onNotificationDrawerExpand={[Function]}
   onPageResize={[Function]}
   sidebar={
     <PageSidebar
@@ -124,7 +126,9 @@ exports[`Check page horizontal layout example against snapshot 1`] = `
   }
   id="PageId"
   isManagedSidebar={false}
+  isNotificationDrawerExpanded={false}
   mainTabIndex={-1}
+  onNotificationDrawerExpand={[Function]}
   onPageResize={[Function]}
   sidebar={
     <PageSidebar
@@ -234,7 +238,9 @@ exports[`Check page to verify breadcrumb is created 1`] = `
   }
   id="PageId"
   isManagedSidebar={false}
+  isNotificationDrawerExpanded={false}
   mainTabIndex={-1}
+  onNotificationDrawerExpand={[Function]}
   onPageResize={[Function]}
   sidebar={
     <PageSidebar
@@ -536,8 +542,10 @@ exports[`Check page to verify skip to content points to main content region 1`]
   }
   id="PageId"
   isManagedSidebar={false}
+  isNotificationDrawerExpanded={false}
   mainContainerId="main-content-page-layout-test-nav"
   mainTabIndex={-1}
+  onNotificationDrawerExpand={[Function]}
   onPageResize={[Function]}
   sidebar={
     <PageSidebar
@@ -834,7 +842,9 @@ exports[`Check page vertical layout example against snapshot 1`] = `
   }
   id="PageId"
   isManagedSidebar={false}
+  isNotificationDrawerExpanded={false}
   mainTabIndex={-1}
+  onNotificationDrawerExpand={[Function]}
   onPageResize={[Function]}
   sidebar={
     <PageSidebar