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

package/dist/QuickStartContainer.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { QuickStartContextValues } from './utils/quick-start-context';
+import { QuickStart, AllQuickStartStates } from './utils/quick-start-types';
+export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement> {
+    /** array of quick starts */
+    quickStarts: QuickStart[];
+    /** id of the currently active quick start */
+    activeQuickStartID: string;
+    /** setter for the active quick starts */
+    setActiveQuickStartID: React.Dispatch<React.SetStateAction<string>>;
+    /** quick starts state object */
+    allQuickStartStates: AllQuickStartStates;
+    /** setter for the quick starts state object */
+    setAllQuickStartStates: React.Dispatch<React.SetStateAction<AllQuickStartStates>>;
+    /** content to render within the container */
+    children?: React.ReactNode;
+    /** element to render the drawer panel into */
+    appendTo?: HTMLElement | (() => HTMLElement);
+    /** if true, the panel will take up the full browser width */
+    fullWidth?: boolean;
+    /** callback when an in-progress quick start is closed */
+    onCloseInProgress?: any;
+    /** callback when a not-in-progress quick start is closed */
+    onCloseNotInProgress?: any;
+    /** true to show footer buttons in the catalog tiles (default true) */
+    showCardFooters?: boolean;
+    /** true to use legacy drawer header variant colors */
+    useLegacyHeaderColors?: boolean;
+    /** text resources object */
+    resourceBundle?: any;
+    /** language of the current resource bundle
+     * Add custom strings: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#localization
+     */
+    language?: string;
+    /** if true, will show a loading spinner on the catalog page (default false) */
+    loading?: boolean;
+    /** if true, will update the browser URL with ?quickstart={ID} (default true) */
+    useQueryParams?: boolean;
+    /** if true, the TaskReview component, aka "Check your work", will be shown regardless of task status */
+    alwaysShowTaskReview?: boolean;
+    /**
+     * Additional markdown extensions and renderers to use
+     * Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
+     */
+    markdown?: {
+        extensions?: any[];
+        renderExtension?: (docContext: Document, rootSelector: string) => React.ReactNode;
+    };
+    /** additional quick start context props */
+    contextProps?: QuickStartContextValues;
+    /** Indicates that QuickStart should create and maintain its own drawer. If false, a QuickStartDrawerContent component should be present within the children, replacing the custom Drawer's DrawerContent. */
+    isManagedDrawer?: boolean;
+}
+export declare const QuickStartContainer: React.FC<QuickStartContainerProps>;
+export default QuickStartContainer;

package/dist/QuickStartDrawer.d.ts

@@ -1,55 +1,5 @@
 import * as React from 'react';
-import { QuickStartContextValues } from './utils/quick-start-context';
-import { QuickStart, AllQuickStartStates } from './utils/quick-start-types';
-export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement> {
-    /** array of quick starts */
-    quickStarts: QuickStart[];
-    /** id of the currently active quick start */
-    activeQuickStartID: string;
-    /** setter for the active quick starts */
-    setActiveQuickStartID: React.Dispatch<React.SetStateAction<string>>;
-    /** quick starts state object */
-    allQuickStartStates: AllQuickStartStates;
-    /** setter for the quick starts state object */
-    setAllQuickStartStates: React.Dispatch<React.SetStateAction<AllQuickStartStates>>;
-    /** content to render within the container */
-    children?: React.ReactNode;
-    /** element to render the drawer panel into */
-    appendTo?: HTMLElement | (() => HTMLElement);
-    /** if true, the panel will take up the full browser width */
-    fullWidth?: boolean;
-    /** callback when an in-progress quick start is closed */
-    onCloseInProgress?: any;
-    /** callback when a not-in-progress quick start is closed */
-    onCloseNotInProgress?: any;
-    /** true to show footer buttons in the catalog tiles (default true) */
-    showCardFooters?: boolean;
-    /** true to use legacy drawer header variant colors */
-    useLegacyHeaderColors?: boolean;
-    /** text resources object */
-    resourceBundle?: any;
-    /** language of the current resource bundle
-     * Add custom strings: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#localization
-     */
-    language?: string;
-    /** if true, will show a loading spinner on the catalog page (default false) */
-    loading?: boolean;
-    /** if true, will update the browser URL with ?quickstart={ID} (default true) */
-    useQueryParams?: boolean;
-    /** if true, the TaskReview component, aka "Check your work", will be shown regardless of task status */
-    alwaysShowTaskReview?: boolean;
-    /**
-     * Additional markdown extensions and renderers to use
-     * Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
-     */
-    markdown?: {
-        extensions?: any[];
-        renderExtension?: (docContext: Document, rootSelector: string) => React.ReactNode;
-    };
-    /** additional quick start context props */
-    contextProps?: QuickStartContextValues;
-}
-export declare const QuickStartContainer: React.FC<QuickStartContainerProps>;
+import { QuickStart } from './utils/quick-start-types';
 export interface QuickStartDrawerProps extends React.HTMLProps<HTMLDivElement> {
     quickStarts?: QuickStart[];
     children?: React.ReactNode;
@@ -59,3 +9,4 @@ export interface QuickStartDrawerProps extends React.HTMLProps<HTMLDivElement> {
     onCloseNotInProgress?: any;
 }
 export declare const QuickStartDrawer: React.FC<QuickStartDrawerProps>;
+export default QuickStartDrawer;

package/dist/QuickStartDrawerContent.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { QuickStart } from './utils/quick-start-types';
+export interface QuickStartDrawerContentProps extends React.HTMLProps<HTMLDivElement> {
+    quickStarts?: QuickStart[];
+    appendTo?: HTMLElement | (() => HTMLElement);
+    fullWidth?: boolean;
+    onCloseInProgress?: any;
+    onCloseNotInProgress?: any;
+    handleDrawerClose?: (quickStartStatus: string | number) => void;
+}
+export declare const QuickStartDrawerContent: React.FC<QuickStartDrawerContentProps>;
+export default QuickStartDrawerContent;

package/dist/index.d.ts

@@ -2,7 +2,10 @@ import './styles/style.scss';
 export * from './QuickStartCatalogPage';
 export * from './catalog';
 export * from './ConsoleInternal/components/utils';
+export * from './QuickStartContainer';
 export * from './QuickStartDrawer';
+export * from './QuickStartDrawerContent';
+export * from './QuickStartCloseModal';
 export * from './HelpTopicDrawer';
 export * from './utils/const';
 export * from './utils/quick-start-context';

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { createContext, useCallback, useEffect, useState } from 'react';
-import { useIsomorphicLayoutEffect, Tooltip, Alert, CodeBlock, Accordion, AccordionItem, AccordionToggle, AccordionContent, Popover, PopoverPosition, Button, Icon, Flex, FlexItem, Title, Card, CardHeader, CardTitle, CardBody, Stack, Label, CardFooter, Gallery, ToolbarItem, SearchInput, Select, SelectList, SelectOption, MenuToggle, Badge, Toolbar, ToolbarContent, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions, PageSection, Content, Divider, WizardNavItem, ExpandableSection, List, ListItem, Radio, ActionList, ActionListGroup, ActionListItem, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody, StackItem } from '@patternfly/react-core';
+import { useIsomorphicLayoutEffect, Tooltip, Alert, CodeBlock, Accordion, AccordionItem, AccordionToggle, AccordionContent, Popover, PopoverPosition, Button, Icon, Flex, FlexItem, Card, CardHeader, CardTitle, CardBody, Stack, Label, CardFooter, Gallery, ToolbarItem, SearchInput, Select, SelectList, SelectOption, MenuToggle, Badge, Toolbar, ToolbarContent, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions, PageSection, Content, Divider, Title, WizardNavItem, ExpandableSection, List, ListItem, Radio, ActionList, ActionListGroup, ActionListItem, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody, StackItem } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { css } from '@patternfly/react-styles';
 import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
@@ -1577,8 +1577,7 @@ const QuickStartTileFooterExternal = ({ link, quickStartId, }) => {
 };
 
 const QuickStartTileHeader = ({ name, quickStartId, onSelect, }) => (React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
-    React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
-        React.createElement(Button, { variant: "link", isInline: true, onClick: onSelect }, name))));
+    React.createElement(Button, { "data-test": "title", id: quickStartId, variant: "link", isInline: true, onClick: onSelect }, name)));
 
 const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, action, }) => {
     const { metadata: { name: id }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart;
@@ -2121,39 +2120,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);
@@ -2175,9 +2161,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();
@@ -2198,13 +2183,6 @@ const QuickStartDrawer = (_a) => {
         onClose();
     };
     const onModalCancel = () => setModalOpen(false);
-    const fullWidthPanelStyle = fullWidth
-        ? {
-            style: {
-                flex: 1,
-            },
-        }
-        : {};
     const fullWidthBodyStyle = fullWidth
         ? {
             style: {
@@ -2212,13 +2190,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)));
+};
+
 const HelpTopicContextDefaults = {
     helpTopics: [],
     setHelpTopics: () => { },
@@ -2457,5 +2465,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=index.es.js.map