@patternfly/quickstarts 6.1.0-prerelease.2 → 6.1.0-prerelease.3

package/dist/patternfly-docs/quick-starts/examples/WithCustomDrawer.jsx

@@ -0,0 +1,158 @@
+import React from 'react';
+import {
+  LoadingBox,
+  QuickStartContainer,
+  useLocalStorage,
+  QuickStartCatalogPage,
+  QuickStartDrawerContent,
+  QuickStartCloseModal,
+  QuickStartStatus,
+} from '@patternfly/quickstarts';
+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 }) => {
+  const [activeQuickStartID, setActiveQuickStartID] = useLocalStorage('quickstartId', '');
+  const [allQuickStartStates, setAllQuickStartStates] = useLocalStorage('quickstarts', {});
+  const language = localStorage.getItem('bridge/language') || 'en';
+
+  // eslint-disable-next-line no-console
+  React.useEffect(() => console.log(activeQuickStartID), [activeQuickStartID]);
+  React.useEffect(() => {
+    // callback on state change
+    // eslint-disable-next-line no-console
+    console.log(allQuickStartStates);
+  }, [allQuickStartStates]);
+
+  const [loading, setLoading] = React.useState(true);
+  const [quickStarts, setQuickStarts] = React.useState([]);
+  React.useEffect(() => {
+    const load = async () => {
+      setQuickStarts(exampleQuickStarts);
+      setLoading(false);
+    };
+    setTimeout(() => {
+      load();
+    }, 500);
+  }, []);
+
+  const drawerProps = {
+    quickStarts,
+    activeQuickStartID,
+    allQuickStartStates,
+    setActiveQuickStartID,
+    setAllQuickStartStates,
+    showCardFooters,
+    language,
+    loading,
+    alwaysShowTaskReview: true,
+    markdown: {
+      extensions: [
+        // variable substitution
+        {
+          type: 'output',
+          filter(html) {
+            html = html.replace(/\[APPLICATION\]/g, 'Mercury');
+            html = html.replace(/\[PRODUCT\]/g, 'Lightning');
+
+            return html;
+          },
+        },
+      ],
+    },
+  };
+
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const onClose = () => {
+    setActiveQuickStartID('');
+    setDrawerContent('none');
+  };
+  const handleClose = (activeQuickStartStatus) => {
+    if (activeQuickStartStatus === QuickStartStatus.IN_PROGRESS) {
+      setModalOpen(true);
+    } else {
+      onClose();
+    }
+  };
+  const onModalConfirm = () => {
+    setModalOpen(false);
+    onClose();
+  };
+  const onModalCancel = () => setModalOpen(false);
+
+  const [drawerContent, setDrawerContent] = React.useState('none');
+
+  const otherDrawerPanelContent = (
+    <DrawerPanelContent>
+      <DrawerHead>
+        <span tabIndex={drawerContent === 'custom' ? 0 : -1}>Drawer panel header</span>
+        <DrawerActions>
+          <DrawerCloseButton onClick={() => setDrawerContent('none')} />
+        </DrawerActions>
+      </DrawerHead>
+      <DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>
+      <DrawerPanelBody>Drawer panel body</DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+
+  return (
+    <React.Suspense fallback={<LoadingBox />}>
+      <QuickStartContainer {...drawerProps} isManagedDrawer={false}>
+        <Drawer isExpanded={drawerContent !== 'none'} isInline>
+          <DrawerContent
+            panelContent={
+              drawerContent === 'quickstart' || activeQuickStartID !== '' ? (
+                <QuickStartDrawerContent handleDrawerClose={handleClose} />
+              ) : (
+                otherDrawerPanelContent
+              )
+            }
+          >
+            <DrawerContentBody>
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  setActiveQuickStartID('explore-pipelines');
+                  setDrawerContent('quickstart');
+                }}
+              >
+                Getting started with quick starts
+              </Button>
+              <Button
+                variant="secondary"
+                onClick={() => {
+                  setActiveQuickStartID('');
+                  setDrawerContent('custom');
+                }}
+              >
+                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}
+          onConfirm={onModalConfirm}
+          onCancel={onModalCancel}
+        />
+      </QuickStartContainer>
+    </React.Suspense>
+  );
+};

package/dist/patternfly-docs/quick-starts/examples/basic.md

@@ -14,16 +14,29 @@ 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 
+## Basic quick starts examples
+
+### Quick starts catalog
 
-### Quick starts catalog 
 ```js file="./Basic.jsx"
+
 ```
 
 ### Fullscreen catalog page
+
 To view a fullscreen example, click the image below.
+
 ```js file="./Basic.jsx" isFullscreen
+
+```
+
+### Quick starts with custom drawer
+
+Quick starts may be placed into a nonmanaged, custom drawer. To view a fullscreen example, click the image below.
+
+```js file="./WithCustomDrawer.jsx" isFullscreen
+
 ```

package/dist/quickstarts-base.css

@@ -163,6 +163,10 @@
   border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth) !important;
 }
 
+.pfext-quick-start-footer {
+  padding-top: var(--pf-t--global--spacer--md);
+}
+
 .pfext-quick-start-task {
   flex: 1 1 0;
   overflow: auto;
@@ -171,10 +175,6 @@
   margin-block-end: var(--pf-v6-c-content--MarginBlockEnd);
 }
 
-.pfext-quick-start-footer {
-  padding-top: var(--pf-t--global--spacer--md);
-}
-
 button.pf-v6-c-wizard__nav-link {
   margin-bottom: var(--pf-t--global--spacer--md);
 }

package/dist/quickstarts-full.es.js

@@ -32237,39 +32237,26 @@ const QuickStartPanelContent = (_a) => {
     return content;
 };
 
-const QuickStartContainer = (_a) => {
-    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, useLegacyHeaderColors, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = true } = _a, props = __rest(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "useLegacyHeaderColors", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview"]);
-    const valuesForQuickstartContext = useValuesForQuickStartContext(Object.assign({ allQuickStarts: quickStarts, activeQuickStartID,
-        setActiveQuickStartID,
-        allQuickStartStates,
-        setAllQuickStartStates, footer: {
-            show: showCardFooters,
-        }, useLegacyHeaderColors,
-        language, resourceBundle: Object.assign({}, resourceBundle), loading,
-        useQueryParams,
-        markdown,
-        alwaysShowTaskReview }, contextProps));
-    React.useEffect(() => {
-        if (quickStarts &&
-            JSON.stringify(quickStarts) !== JSON.stringify(valuesForQuickstartContext.allQuickStarts)) {
-            valuesForQuickstartContext.setAllQuickStarts(quickStarts);
-        }
-    }, [quickStarts, valuesForQuickstartContext]);
-    React.useEffect(() => {
-        if (loading !== valuesForQuickstartContext.loading) {
-            valuesForQuickstartContext.setLoading(loading);
+const QuickStartDrawerContent = (_a) => {
+    var { quickStarts = [], appendTo, fullWidth, handleDrawerClose } = _a, props = __rest(_a, ["quickStarts", "appendTo", "fullWidth", "handleDrawerClose"]);
+    const { activeQuickStartID, allQuickStarts = [], activeQuickStartState, } = React.useContext(QuickStartContext);
+    const combinedQuickStarts = allQuickStarts.concat(quickStarts);
+    const handleClose = () => {
+        handleDrawerClose && handleDrawerClose(activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.status);
+    };
+    const fullWidthPanelStyle = fullWidth
+        ? {
+            style: {
+                flex: 1,
+            },
         }
-    }, [loading, valuesForQuickstartContext]);
-    const drawerProps = Object.assign({ appendTo,
-        fullWidth,
-        onCloseInProgress,
-        onCloseNotInProgress }, props);
-    return (React.createElement(QuickStartContext.Provider, { value: valuesForQuickstartContext },
-        React.createElement(QuickStartDrawer, Object.assign({}, drawerProps), children)));
+        : {};
+    return (React.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth }, fullWidthPanelStyle, props)));
 };
+
 const QuickStartDrawer = (_a) => {
     var { quickStarts = [], children, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress } = _a, props = __rest(_a, ["quickStarts", "children", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress"]);
-    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, } = React.useContext(QuickStartContext);
+    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], allQuickStartStates, setAllQuickStartStates, } = React.useContext(QuickStartContext);
     const combinedQuickStarts = allQuickStarts.concat(quickStarts);
     React.useEffect(() => {
         const params = new URLSearchParams(window.location.search);
@@ -32291,9 +32278,8 @@ const QuickStartDrawer = (_a) => {
         }
     }, [activeQuickStartID, allQuickStartStates, setAllQuickStartStates]);
     const [modalOpen, setModalOpen] = React.useState(false);
-    const activeQuickStartStatus = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.status;
     const onClose = () => setActiveQuickStart('');
-    const handleClose = () => {
+    const handleClose = (activeQuickStartStatus) => {
         if (activeQuickStartStatus === QuickStartStatus.IN_PROGRESS) {
             if (onCloseInProgress) {
                 onCloseInProgress();
@@ -32314,13 +32300,6 @@ const QuickStartDrawer = (_a) => {
         onClose();
     };
     const onModalCancel = () => setModalOpen(false);
-    const fullWidthPanelStyle = fullWidth
-        ? {
-            style: {
-                flex: 1,
-            },
-        }
-        : {};
     const fullWidthBodyStyle = fullWidth
         ? {
             style: {
@@ -32328,13 +32307,43 @@ const QuickStartDrawer = (_a) => {
             },
         }
         : {};
-    const panelContent = (React.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth }, fullWidthPanelStyle)));
     return (React.createElement(React.Fragment, null,
-        React.createElement(Drawer, Object.assign({ isExpanded: !!activeQuickStartID, isInline: true }, props), children ? (React.createElement(DrawerContent, Object.assign({ panelContent: panelContent }, fullWidthBodyStyle),
-            React.createElement(DrawerContentBody, null, children))) : (React.createElement("div", null, panelContent))),
+        React.createElement(Drawer, Object.assign({ isExpanded: !!activeQuickStartID, isInline: true }, props),
+            React.createElement(DrawerContent, Object.assign({ panelContent: React.createElement(QuickStartDrawerContent, { quickStarts: combinedQuickStarts, handleDrawerClose: handleClose, appendTo: appendTo, fullWidth: fullWidth }) }, fullWidthBodyStyle),
+                React.createElement(DrawerContentBody, null, children))),
         React.createElement(QuickStartCloseModal, { isOpen: modalOpen, onConfirm: onModalConfirm, onCancel: onModalCancel })));
 };
 
+const QuickStartContainer = (_a) => {
+    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, useLegacyHeaderColors, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = true, isManagedDrawer = true } = _a, props = __rest(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "useLegacyHeaderColors", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview", "isManagedDrawer"]);
+    const valuesForQuickstartContext = useValuesForQuickStartContext(Object.assign({ allQuickStarts: quickStarts, activeQuickStartID,
+        setActiveQuickStartID,
+        allQuickStartStates,
+        setAllQuickStartStates, footer: {
+            show: showCardFooters,
+        }, useLegacyHeaderColors,
+        language, resourceBundle: Object.assign({}, resourceBundle), loading,
+        useQueryParams,
+        markdown,
+        alwaysShowTaskReview }, contextProps));
+    React.useEffect(() => {
+        if (quickStarts &&
+            JSON.stringify(quickStarts) !== JSON.stringify(valuesForQuickstartContext.allQuickStarts)) {
+            valuesForQuickstartContext.setAllQuickStarts(quickStarts);
+        }
+    }, [quickStarts, valuesForQuickstartContext]);
+    React.useEffect(() => {
+        if (loading !== valuesForQuickstartContext.loading) {
+            valuesForQuickstartContext.setLoading(loading);
+        }
+    }, [loading, valuesForQuickstartContext]);
+    const drawerProps = Object.assign({ appendTo,
+        fullWidth,
+        onCloseInProgress,
+        onCloseNotInProgress }, props);
+    return (React.createElement(QuickStartContext.Provider, { value: valuesForQuickstartContext }, isManagedDrawer ? (React.createElement(QuickStartDrawer, Object.assign({}, drawerProps), children)) : (children)));
+};
+
 var barsIcon = createCommonjsModule(function (module, exports) {
 exports.__esModule = true;
 exports.BarsIconConfig = {
@@ -32589,5 +32598,5 @@ const ProcQuickStartParser = (quickStart, environmentVariables) => {
     return quickStart;
 };
 
-export { Box, CamelCaseWrap, EmptyBox, HELP_TOPIC_NAME_KEY, HelpTopicContainer, HelpTopicContext, HelpTopicContextDefaults, HelpTopicDrawer, Loading, LoadingBox, ProcQuickStartParser, QUICKSTART_ID_FILTER_KEY, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICK_START_NAME, QuickStartCatalog, QuickStartCatalogEmptyState, QuickStartCatalogFilter, QuickStartCatalogFilterCount, QuickStartCatalogFilterCountWrapper, QuickStartCatalogFilterSearch, QuickStartCatalogFilterSearchWrapper, QuickStartCatalogFilterSelect, QuickStartCatalogFilterStatusWrapper, QuickStartCatalogHeader, QuickStartCatalogPage, QuickStartCatalogSection, QuickStartCatalogToolbar, QuickStartCloseModal, QuickStartContainer, QuickStartContext, QuickStartContextDefaults, QuickStartContextProvider, QuickStartDrawer, QuickStartPanelContent, QuickStartStatus, QuickStartTaskStatus, QuickStartTile, QuickStartTileDescription, QuickStartTileFooter, QuickStartTileFooterExternal, QuickStartTileHeader, camelize, clearFilterParams, equalsIgnoreOrder, filterQuickStarts, getDefaultQuickStartState, getDisabledQuickStarts, getQuickStartByName, getQuickStartStatus, getQuickStartStatusCount, getResource, getTaskStatusKey, history, isDisabledQuickStart, removeQueryArgument, setQueryArgument, useLocalStorage, useValuesForHelpTopicContext, useValuesForQuickStartContext };
+export { Box, CamelCaseWrap, EmptyBox, HELP_TOPIC_NAME_KEY, HelpTopicContainer, HelpTopicContext, HelpTopicContextDefaults, HelpTopicDrawer, Loading, LoadingBox, ProcQuickStartParser, QUICKSTART_ID_FILTER_KEY, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICK_START_NAME, QuickStartCatalog, QuickStartCatalogEmptyState, QuickStartCatalogFilter, QuickStartCatalogFilterCount, QuickStartCatalogFilterCountWrapper, QuickStartCatalogFilterSearch, QuickStartCatalogFilterSearchWrapper, QuickStartCatalogFilterSelect, QuickStartCatalogFilterStatusWrapper, QuickStartCatalogHeader, QuickStartCatalogPage, QuickStartCatalogSection, QuickStartCatalogToolbar, QuickStartCloseModal, QuickStartContainer, QuickStartContext, QuickStartContextDefaults, QuickStartContextProvider, QuickStartDrawer, QuickStartDrawerContent, QuickStartPanelContent, QuickStartStatus, QuickStartTaskStatus, QuickStartTile, QuickStartTileDescription, QuickStartTileFooter, QuickStartTileFooterExternal, QuickStartTileHeader, camelize, clearFilterParams, equalsIgnoreOrder, filterQuickStarts, getDefaultQuickStartState, getDisabledQuickStarts, getQuickStartByName, getQuickStartStatus, getQuickStartStatusCount, getResource, getTaskStatusKey, history, isDisabledQuickStart, removeQueryArgument, setQueryArgument, useLocalStorage, useValuesForHelpTopicContext, useValuesForQuickStartContext };
 //# sourceMappingURL=quickstarts-full.es.js.map