return pure panel content

patternfly · Nov 21, 2024 · 16bbed2 · 16bbed2
1 parent b1a4636
commit 16bbed2
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 55 deletions.
diff --git a/packages/dev/src/AppCustomDrawer.tsx b/packages/dev/src/AppCustomDrawer.tsx
@@ -1,5 +1,17 @@
 import './App.css';
-import { Page, Button, Drawer } from '@patternfly/react-core';
+import {
+  Page,
+  Button,
+  Drawer,
+  DrawerContent,
+  DrawerPanelContent,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerPanelDescription,
+  DrawerPanelBody,
+  DrawerContentBody,
+} from '@patternfly/react-core';
 import {
   LoadingBox,
   QuickStartContainer,
@@ -95,21 +107,49 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
   };
   const onModalCancel = () => setModalOpen(false);
 
+  const [otherDrawerOpen, setOtherDrawerOpen] = React.useState(false);
+
+  const otherDrawerPanelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span tabIndex={otherDrawerOpen ? 0 : -1}>Drawer panel header</span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={() => setOtherDrawerOpen(false)} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>
+      <DrawerPanelBody>Drawer panel body</DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
   return (
     <React.Suspense fallback={<LoadingBox />}>
       <QuickStartContainer {...containerProps} isManagedDrawer={false}>
-        <Drawer isExpanded={activeQuickStartID !== ''} isInline>
-          <QuickStartDrawerContent handleDrawerClose={handleClose}>
-            <Page masthead={AppHeader} sidebar={AppSidebar} isManagedSidebar>
-              <Button
-                variant="secondary"
-                onClick={() => toggleQuickStart('getting-started-with-quick-starts')}
-              >
-                Getting started with quick starts
-              </Button>
-              {children}
-            </Page>
-          </QuickStartDrawerContent>
+        <Drawer isExpanded={activeQuickStartID !== '' || otherDrawerOpen} isInline>
+          <DrawerContent
+            panelContent={
+              activeQuickStartID !== '' ? (
+                <QuickStartDrawerContent handleDrawerClose={handleClose} />
+              ) : (
+                otherDrawerPanelContent
+              )
+            }
+          >
+            <DrawerContentBody>
+              <Page masthead={AppHeader} sidebar={AppSidebar} isManagedSidebar>
+                <Button
+                  variant="secondary"
+                  onClick={() => toggleQuickStart('getting-started-with-quick-starts')}
+                >
+                  Getting started with quick starts
+                </Button>
+                <Button variant="secondary" onClick={() => setOtherDrawerOpen(true)}>
+                  Open a different drawer
+                </Button>
+                {children}
+              </Page>
+            </DrawerContentBody>
+          </DrawerContent>
         </Drawer>
         <QuickStartCloseModal
           isOpen={modalOpen}

diff --git a/...ages/module/patternfly-docs/content/extensions/quick-starts/examples/WithCustomDrawer.jsx b/...ages/module/patternfly-docs/content/extensions/quick-starts/examples/WithCustomDrawer.jsx
@@ -8,7 +8,18 @@ import {
   QuickStartCloseModal,
   QuickStartStatus,
 } from '@patternfly/quickstarts';
-import { Drawer } from '@patternfly/react-core';
+import {
+  Drawer,
+  DrawerContent,
+  DrawerPanelContent,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerPanelDescription,
+  DrawerPanelBody,
+  DrawerContentBody,
+  Button,
+} from '@patternfly/react-core';
 import { quickStarts as exampleQuickStarts } from './example-data';
 
 export const App = ({ showCardFooters }) => {
@@ -62,8 +73,6 @@ export const App = ({ showCardFooters }) => {
     },
   };
 
-  // The above code is identical to the current quickstarts setup
-  // Below is additional handling to support a custom drawer with an in-progress close confirm modal
   const [modalOpen, setModalOpen] = React.useState(false);
   const onClose = () => setActiveQuickStartID('');
   const handleClose = (activeQuickStartStatus) => {
@@ -79,18 +88,52 @@ export const App = ({ showCardFooters }) => {
   };
   const onModalCancel = () => setModalOpen(false);
 
+  const [otherDrawerOpen, setOtherDrawerOpen] = React.useState(false);
+
+  const otherDrawerPanelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span tabIndex={otherDrawerOpen ? 0 : -1}>Drawer panel header</span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={() => setOtherDrawerOpen(false)} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>
+      <DrawerPanelBody>Drawer panel body</DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
   return (
     <React.Suspense fallback={<LoadingBox />}>
       <QuickStartContainer {...drawerProps} isManagedDrawer={false}>
-        <Drawer isExpanded={activeQuickStartID !== ''} isInline>
-          <QuickStartDrawerContent handleDrawerClose={handleClose}>
-            <QuickStartCatalogPage
-              title="Quick starts"
-              hint={
-                'Learn how to create, import, and run applications with step-by-step instructions and tasks.'
-              }
-            />
-          </QuickStartDrawerContent>
+        <Drawer isExpanded={activeQuickStartID !== '' || otherDrawerOpen} isInline>
+          <DrawerContent
+            panelContent={
+              activeQuickStartID !== '' ? (
+                <QuickStartDrawerContent handleDrawerClose={handleClose} />
+              ) : (
+                otherDrawerPanelContent
+              )
+            }
+          >
+            <DrawerContentBody>
+              <Button
+                variant="secondary"
+                onClick={() => setActiveQuickStartID('explore-pipelines')}
+              >
+                Getting started with quick starts
+              </Button>
+              <Button variant="secondary" onClick={() => setOtherDrawerOpen(true)}>
+                Open a different drawer
+              </Button>
+              <QuickStartCatalogPage
+                title="Quick starts"
+                hint={
+                  'Learn how to create, import, and run applications with step-by-step instructions and tasks.'
+                }
+              />
+            </DrawerContentBody>
+          </DrawerContent>
         </Drawer>
         <QuickStartCloseModal
           isOpen={modalOpen}

diff --git a/packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md b/packages/module/patternfly-docs/content/extensions/quick-starts/examples/basic.md
@@ -14,7 +14,7 @@ sourceLink: https://github.com/patternfly/patternfly-quickstarts/tree/main/packa
 ---
 
 import { quickStarts as exampleQuickStarts } from './example-data';
-import { LoadingBox, QuickStartContainer, QuickStartCatalogPage, useLocalStorage, } from '@patternfly/quickstarts';
+import { LoadingBox, QuickStartContainer, QuickStartCatalogPage, useLocalStorage, QuickStartDrawerContent, QuickStartCloseModal, QuickStartStatus, } from '@patternfly/quickstarts';
 import '@patternfly/quickstarts/dist/quickstarts.css';
 
 ## Basic quick starts examples
@@ -37,6 +37,6 @@ To view a fullscreen example, click the image below.
 
 Quick starts may be placed into a nonmanaged, custom drawer. To view a fullscreen example, click the image below.
 
-```js file="./Basic.jsx" isFullscreen
+```js file="./WithCustomDrawer.jsx" isFullscreen
 
 ```
diff --git a/packages/module/src/QuickStartDrawer.tsx b/packages/module/src/QuickStartDrawer.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Drawer } from '@patternfly/react-core';
+import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 import QuickStartCloseModal from './QuickStartCloseModal';
 import QuickStartDrawerContent from './QuickStartDrawerContent';
 import {
@@ -83,17 +83,30 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
 
   const onModalCancel = () => setModalOpen(false);
 
+  const fullWidthBodyStyle = fullWidth
+    ? {
+        style: {
+          display: activeQuickStartID ? 'none' : 'flex',
+        },
+      }
+    : {};
+
   return (
     <>
       <Drawer isExpanded={!!activeQuickStartID} isInline {...props}>
-        <QuickStartDrawerContent
-          quickStarts={combinedQuickStarts}
-          handleDrawerClose={handleClose}
-          appendTo={appendTo}
-          fullWidth={fullWidth}
+        <DrawerContent
+          panelContent={
+            <QuickStartDrawerContent
+              quickStarts={combinedQuickStarts}
+              handleDrawerClose={handleClose}
+              appendTo={appendTo}
+              fullWidth={fullWidth}
+            />
+          }
+          {...fullWidthBodyStyle}
         >
-          {children}
-        </QuickStartDrawerContent>
+          <DrawerContentBody>{children}</DrawerContentBody>
+        </DrawerContent>
       </Drawer>
       <QuickStartCloseModal
         isOpen={modalOpen}

diff --git a/packages/module/src/QuickStartDrawerContent.tsx b/packages/module/src/QuickStartDrawerContent.tsx
@@ -1,12 +1,10 @@
 import * as React from 'react';
-import { DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 import QuickStartPanelContent from './QuickStartPanelContent';
 import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
 import { QuickStart } from './utils/quick-start-types';
 
 export interface QuickStartDrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   quickStarts?: QuickStart[];
-  children?: React.ReactNode;
   appendTo?: HTMLElement | (() => HTMLElement);
   fullWidth?: boolean;
   onCloseInProgress?: any;
@@ -16,7 +14,6 @@ export interface QuickStartDrawerContentProps extends React.HTMLProps<HTMLDivEle
 
 export const QuickStartDrawerContent: React.FC<QuickStartDrawerContentProps> = ({
   quickStarts = [],
-  children,
   appendTo,
   fullWidth,
   handleDrawerClose,
@@ -41,15 +38,7 @@ export const QuickStartDrawerContent: React.FC<QuickStartDrawerContentProps> = (
       }
     : {};
 
-  const fullWidthBodyStyle = fullWidth
-    ? {
-        style: {
-          display: activeQuickStartID ? 'none' : 'flex',
-        },
-      }
-    : {};
-
-  const panelContent = (
+  return (
     <QuickStartPanelContent
       quickStarts={combinedQuickStarts}
       handleClose={handleClose}
@@ -60,14 +49,6 @@ export const QuickStartDrawerContent: React.FC<QuickStartDrawerContentProps> = (
       {...props}
     />
   );
-
-  return children ? (
-    <DrawerContent panelContent={panelContent} {...fullWidthBodyStyle}>
-      <DrawerContentBody>{children}</DrawerContentBody>
-    </DrawerContent>
-  ) : (
-    <div>{panelContent}</div>
-  );
 };
 
 export default QuickStartDrawerContent;