@patternfly/quickstarts 1.2.1 → 1.4.0

package/README.md

@@ -27,9 +27,26 @@ import '@patternfly/react-core/dist/styles/base.css';
 import '@patternfly/quickstarts/dist/quickstarts.min.css';
 ```
 
+### Stylesheets if you use an older version of PatternFly
+If you use an older version of @patternfly/react-core (older than "4.115.2"), and you can't upgrade yet, you can pull in the necessary PatternFly styles that @patternfly/quickstarts depends upon.
+
+Ideally @patternfly/quickstarts will use the consumer provided PatternFly styles, only use these stylesheets if really needed.
+
+`quickstarts-standalone.min.css` nests the css classes within a **.pfext-quick-start__base** parent, so that they have higher specificity. `patternfly-global.css` includes component styles that we cannot nest with more specificiy (for example Drawer since it can include consumer components that depend on an older PF version).
+
+> Note: Only use these stylesheets if necessary!
+```js
+// import base from PatternFly to get the font
+import '@patternfly/react-core/dist/styles/base.css';
+// some global styles and variables that quickstarts uses (Drawer, Popover, Modal, Backdrop, Bullseye)
+import '@patternfly/quickstarts/dist/patternfly-global.css';
+// PF and quickstarts styles nested within .pfext-quick-start__base
+import '@patternfly/quickstarts/dist/quickstarts-standalone.min.css';
+```
+
 ## Usage example
 
-Note: You can also view this example on [codesandbox](https://codesandbox.io/s/patternflyquickstarts-1386f?file=/src/App.js)!
+Note: You can also view this example on [codesandbox](https://codesandbox.io/s/patternfly-quickstarts-finished-cnv53)!
 
 ```js
 import "./styles.css";
@@ -204,4 +221,26 @@ You can have inline or block copyable text.
     ```{{copy}}
 ```
 
+## Localization
+We use English as the default language. You can override the default by providing your own key/value pairs to the `QuickStartContainer` or `QuickStartContextProvider` resourceBundle prop.
+
+Example:
+```js
+// load my own resource Czech translations resource bundle using i18next
+const resourceBundle = i18n.getResourceBundle('cs', 'quickstart');
+const resources = {
+  ...resourceBundle,
+  Start: "Let's go!",
+  Continue: 'Resume',
+  Restart: 'Start over',
+};
+return (
+  <QuickStartContainer resourceBundle={resources}>
+  </QuickStartContainer>
+)
+```
+
+Use this [file](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/module/src/locales/en/quickstart.json) as a base for your translations.
+Each language is different, especially when it comes to plurals. Try [this utility](https://jsfiddle.net/6bpxsgd4) sourced from [i18next](https://www.i18next.com/translation-function/plurals#how-to-find-the-correct-plural-suffix) to determine the suffixes for the right plural format.
+
 #### 

package/dist/QuickStartDrawer.d.ts

@@ -18,6 +18,7 @@ export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement
     language?: string;
     loading?: boolean;
     useQueryParams?: boolean;
+    alwaysShowTaskReview?: boolean;
     /**
      * Additional markdown extensions and renderers to use
      * TODO: example usage - In the meantime you can take a look at:

package/dist/catalog/QuickStartTileFooterExternal.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { QuickStartExternal } from '../utils/quick-start-types';
 declare type QuickStartTileFooterProps = {
     link: QuickStartExternal;
+    quickStartId?: string;
 };
 declare const QuickStartTileFooterExternal: React.FC<QuickStartTileFooterProps>;
 export default QuickStartTileFooterExternal;

package/dist/catalog/QuickStartTileHeader.d.ts

@@ -6,6 +6,7 @@ declare type QuickStartTileHeaderProps = {
     duration: number;
     name: string;
     type?: QuickStartType;
+    quickStartId?: string;
 };
 declare const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps>;
 export default QuickStartTileHeader;

package/dist/controller/QuickStartConclusion.d.ts

@@ -4,7 +4,7 @@ declare type QuickStartConclusionProps = {
     tasks: QuickStartTask[];
     conclusion: string;
     allTaskStatuses: QuickStartTaskStatus[];
-    nextQuickStart?: QuickStart;
+    nextQuickStarts?: QuickStart[];
     onQuickStartChange: (quickStartid: string) => void;
     onTaskSelect: (selectedTaskNumber: number) => void;
 };

package/dist/controller/QuickStartIntroduction.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import { QuickStartTask, QuickStartTaskStatus } from '../utils/quick-start-types';
+import './QuickStartIntroduction.scss';
 declare type QuickStartIntroductionProps = {
     introduction: string;
     tasks: QuickStartTask[];
     allTaskStatuses: QuickStartTaskStatus[];
+    prerequisites?: string[];
     onTaskSelect: (selectedTaskNumber: number) => void;
 };
 declare const QuickStartIntroduction: React.FC<QuickStartIntroductionProps>;

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { createContext, useCallback, useEffect, useState } from 'react';
-import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Modal as Modal$1, Tooltip, Popover, PopoverPosition, Button, Text, TextVariants, TextList, TextListItem, Flex, FlexItem, Title, Label, Gallery, GalleryItem, ToolbarItem, SearchInput, Select, SelectVariant, SelectOption, Toolbar, ToolbarContent, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStatePrimary, Divider, ModalVariant, WizardNavItem, List, Alert, Radio, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
+import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Modal as Modal$1, Tooltip, Popover, PopoverPosition, Button, Text, TextVariants, TextList, TextListItem, Flex, FlexItem, Title, Label, Gallery, GalleryItem, ToolbarItem, SearchInput, Select, SelectVariant, SelectOption, Toolbar, ToolbarContent, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStatePrimary, Divider, ModalVariant, WizardNavItem, List, ExpandableSection, ListItem, Alert, Radio, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody } 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';
@@ -139,6 +139,7 @@ var en = {
 	"{{count, number}} item": "{{count, number}} item",
 	"{{count, number}} item_plural": "{{count, number}} items",
 	"Prerequisites ({{totalPrereqs}})": "Prerequisites ({{totalPrereqs}})",
+	"View Prerequisites ({{totalPrereqs}})": "View Prerequisites ({{totalPrereqs}})",
 	Prerequisites: Prerequisites,
 	"Show prerequisites": "Show prerequisites",
 	Complete: Complete,
@@ -578,6 +579,7 @@ const QuickStartContextDefaults = {
     footer: null,
     markdown: null,
     loading: false,
+    alwaysShowTaskReview: false,
 };
 const QuickStartContext = createContext(QuickStartContextDefaults);
 const getResource = (resource, options, resourceBundle, lng) => {
@@ -605,6 +607,7 @@ const useValuesForQuickStartContext = (value = {}) => {
         return getResource(resource, count !== undefined ? { count } : null, resourceBundle, language);
     }, [resourceBundle, language]);
     const [loading, setLoading] = React__default.useState(combinedValue.loading);
+    const [alwaysShowTaskReview, setAlwaysShowTaskReview] = React__default.useState(combinedValue.alwaysShowTaskReview);
     const initialSearchParams = new URLSearchParams(window.location.search);
     const initialSearchQuery = initialSearchParams.get(QUICKSTART_SEARCH_FILTER_KEY) || '';
     const initialStatusFilters = ((_a = initialSearchParams.get(QUICKSTART_STATUS_FILTER_KEY)) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
@@ -675,6 +678,10 @@ const useValuesForQuickStartContext = (value = {}) => {
         });
         setAllQuickStartStates((qs) => (Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks, QuickStartStatus.IN_PROGRESS) })));
     }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
+    // When alwaysShowTaskReview preference is enabled, skip visited step and go directly to review
+    const stepAfterInitial = alwaysShowTaskReview
+        ? QuickStartTaskStatus.REVIEW
+        : QuickStartTaskStatus.VISITED;
     const nextStep = useCallback((totalTasks) => {
         if (!activeQuickStartID) {
             return;
@@ -701,19 +708,19 @@ const useValuesForQuickStartContext = (value = {}) => {
             if (taskNumber < totalTasks && !updatedTaskStatus) {
                 updatedTaskNumber = taskNumber + 1;
             }
-            const markInitialStepVisited = updatedTaskNumber > -1 &&
+            const markInitialStepVisitedOrReview = updatedTaskNumber > -1 &&
                 quickStart[getTaskStatusKey(updatedTaskNumber)] === QuickStartTaskStatus.INIT
-                ? QuickStartTaskStatus.VISITED
+                ? stepAfterInitial
                 : quickStart[getTaskStatusKey(updatedTaskNumber)];
             const newState = Object.assign(Object.assign({}, qs), { [activeQuickStartID]: Object.assign(Object.assign(Object.assign(Object.assign({}, quickStart), (updatedStatus ? { status: updatedStatus } : {})), (updatedTaskNumber > -1
                     ? {
                         taskNumber: updatedTaskNumber,
-                        [getTaskStatusKey(updatedTaskNumber)]: markInitialStepVisited,
+                        [getTaskStatusKey(updatedTaskNumber)]: markInitialStepVisitedOrReview,
                     }
                     : {})), (updatedTaskStatus ? { [getTaskStatusKey(taskNumber)]: updatedTaskStatus } : {})) });
             return newState;
         });
-    }, [activeQuickStartID, setAllQuickStartStates]);
+    }, [activeQuickStartID, setAllQuickStartStates, stepAfterInitial]);
     const previousStep = useCallback(() => {
         setAllQuickStartStates((qs) => {
             const quickStart = qs[activeQuickStartID];
@@ -735,7 +742,7 @@ const useValuesForQuickStartContext = (value = {}) => {
             let updatedTaskStatus = {};
             for (let taskIndex = 0; taskIndex <= taskNumber; taskIndex++) {
                 const taskStatus = quickStart[getTaskStatusKey(taskIndex)];
-                const newTaskStatus = taskStatus === QuickStartTaskStatus.INIT ? QuickStartTaskStatus.VISITED : undefined;
+                const newTaskStatus = taskStatus === QuickStartTaskStatus.INIT ? stepAfterInitial : undefined;
                 if (newTaskStatus) {
                     updatedTaskStatus = Object.assign(Object.assign({}, updatedTaskStatus), { [getTaskStatusKey(taskIndex)]: newTaskStatus });
                 }
@@ -743,7 +750,7 @@ const useValuesForQuickStartContext = (value = {}) => {
             const updatedQuickStart = Object.assign(Object.assign(Object.assign(Object.assign({}, quickStart), (updatedStatus ? { status: updatedStatus } : {})), { taskNumber }), updatedTaskStatus);
             return Object.assign(Object.assign({}, qs), { [quickStartId]: updatedQuickStart });
         });
-    }, [setAllQuickStartStates]);
+    }, [setAllQuickStartStates, stepAfterInitial]);
     const setQuickStartTaskStatus = useCallback((taskStatus) => {
         const quickStart = allQuickStartStates[activeQuickStartID];
         const { taskNumber } = quickStart;
@@ -789,6 +796,8 @@ const useValuesForQuickStartContext = (value = {}) => {
         setFilter,
         loading,
         setLoading,
+        alwaysShowTaskReview,
+        setAlwaysShowTaskReview,
     };
 };
 const QuickStartContextProvider = ({ children, value }) => {
@@ -954,7 +963,7 @@ const SimplePopper = ({ children }) => {
         }
     }, [destroy, isOpen]);
     return isOpen ? (React.createElement(Portal, null,
-        React.createElement("div", { ref: nodeRefCallback, style: { zIndex: 9999, position: 'absolute', top: 0, left: 0 } }, children))) : null;
+        React.createElement("div", { ref: nodeRefCallback, style: { zIndex: 9999, position: 'absolute', top: 0, left: 0 }, className: "pfext-quick-start__base" }, children))) : null;
 };
 
 const isInViewport = (elementToCheck) => {
@@ -1197,7 +1206,7 @@ const CopyClipboard = ({ element, rootSelector, docContext, }) => {
     useEventListener(element, 'mouseleave', React.useCallback(() => {
         setShowSuccessContent(false);
     }, []));
-    return showSuccessContent ? (React.createElement(Tooltip, { key: "after-copy", isVisible: true, reference: () => element, content: getResource('Successfully copied to clipboard!') })) : (React.createElement(Tooltip, { key: "before-copy", reference: () => element, content: getResource('Copy to clipboard') }));
+    return showSuccessContent ? (React.createElement(Tooltip, { key: "after-copy", isVisible: true, reference: () => element, content: getResource('Successfully copied to clipboard!'), className: "pfext-quick-start__base" })) : (React.createElement(Tooltip, { key: "before-copy", reference: () => element, content: getResource('Copy to clipboard'), className: "pfext-quick-start__base" }));
 };
 const MarkdownCopyClipboard = ({ docContext, rootSelector, }) => {
     const elements = docContext.querySelectorAll(`${rootSelector} [${MARKDOWN_COPY_BUTTON_ID}]`);
@@ -1522,10 +1531,11 @@ const QuickStartTileDescription = ({ description, prerequisites, }) => {
             React.createElement(Text, { component: TextVariants.h5, className: "pfext-quick-start-tile-prerequisites__text" },
                 getResource('Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length),
                 ' '),
-            React.createElement(Popover, { "aria-label": getResource('Prerequisites'), headerContent: getResource('Prerequisites'), className: "pfext-page-layout__base", bodyContent: React.createElement(TextList, { "aria-label": getResource('Prerequisites'), className: "pfext-quick-start-tile-prerequisites-list" }, prereqs.map((prerequisite, index) => (
-                // eslint-disable-next-line react/no-array-index-key
-                React.createElement(TextListItem, { key: index },
-                    React.createElement(QuickStartMarkdownView, { content: prerequisite }))))) },
+            React.createElement(Popover, { "aria-label": getResource('Prerequisites'), headerContent: getResource('Prerequisites'), className: "pfext-quick-start__base", bodyContent: React.createElement("div", { className: "pfext-popover__base" },
+                    React.createElement(TextList, { "aria-label": getResource('Prerequisites'), className: "pfext-quick-start-tile-prerequisites-list" }, prereqs.map((prerequisite, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    React.createElement(TextListItem, { key: index },
+                        React.createElement(QuickStartMarkdownView, { content: prerequisite })))))) },
                 React.createElement(Button, { variant: "link", isInline: true, className: "pfext-quick-start-tile-prerequisites__icon", "data-testid": "qs-card-prereqs", onClick: (e) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -1548,20 +1558,20 @@ const QuickStartTileFooter = ({ quickStartId, status, totalTasks, }) => {
     }, [quickStartId, restartQuickStart, totalTasks]);
     return (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
         status === QuickStartStatus.NOT_STARTED && (React.createElement(FlexItem, null,
-            React.createElement(Button, { onClick: start, variant: "link", isInline: true, "data-testid": "qs-card-notStarted-start" }, getResource('Start')))),
+            React.createElement(Button, { onClick: start, variant: "link", isInline: true, "data-testid": "qs-card-notStarted-start", id: `${quickStartId}-start`, "aria-labelledby": `${quickStartId}-start ${quickStartId}` }, getResource('Start')))),
         status === QuickStartStatus.IN_PROGRESS && activeQuickStartID !== quickStartId && (React.createElement(FlexItem, null,
-            React.createElement(Button, { variant: "link", isInline: true, "data-testid": "qs-card-inProgress-resume" }, getResource('Continue')))),
+            React.createElement(Button, { variant: "link", isInline: true, "data-testid": "qs-card-inProgress-resume", id: `${quickStartId}-continue`, "aria-labelledby": `${quickStartId}-continue ${quickStartId}` }, getResource('Continue')))),
         status === QuickStartStatus.COMPLETE && (React.createElement(FlexItem, null,
-            React.createElement(Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-complete-restart" }, getResource('Start')))),
+            React.createElement(Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-complete-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart')))),
         status === QuickStartStatus.IN_PROGRESS && (React.createElement(FlexItem, null,
-            React.createElement(Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-inProgress-restart" }, getResource('Restart'))))));
+            React.createElement(Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-inProgress-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart'))))));
 };
 
-const QuickStartTileFooterExternal = ({ link }) => {
+const QuickStartTileFooterExternal = ({ link, quickStartId, }) => {
     const { href, text } = link;
     return (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
         React.createElement(FlexItem, null,
-            React.createElement(Button, { component: "a", href: href, target: "_blank", rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: React.createElement(ExternalLinkAltIcon, null), iconPosition: "right" }, text || href))));
+            React.createElement(Button, { component: "a", href: href, target: "_blank", rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: React.createElement(ExternalLinkAltIcon, null), iconPosition: "right", id: quickStartId, "aria-labelledby": `${quickStartId}-external ${quickStartId}` }, text || href))));
 };
 
 const statusColorMap = {
@@ -1569,7 +1579,7 @@ const statusColorMap = {
     [QuickStartStatus.IN_PROGRESS]: 'purple',
     [QuickStartStatus.NOT_STARTED]: 'grey',
 };
-const QuickStartTileHeader = ({ status, duration, name, type, }) => {
+const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, }) => {
     const { getResource } = React.useContext(QuickStartContext);
     const statusLocaleMap = {
         [QuickStartStatus.COMPLETE]: getResource('Complete'),
@@ -1577,7 +1587,7 @@ const QuickStartTileHeader = ({ status, duration, name, type, }) => {
         [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
     };
     return (React.createElement("div", { className: "pfext-quick-start-tile-header" },
-        React.createElement(Title, { headingLevel: "h3", "data-test": "title" }, name),
+        React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId }, name),
         React.createElement("div", { className: "pfext-quick-start-tile-header__status" },
             type && (React.createElement(Label, { className: "pfext-quick-start-tile-header--margin", color: type.color }, type.text)),
             duration && (React.createElement(Label, { variant: "outline", "data-test": "duration", icon: React.createElement(OutlinedClockIcon, null), className: "pfext-quick-start-tile-header--margin" }, getResource('{{duration, number}} minutes', duration).replace('{{duration, number}}', duration))),
@@ -1588,8 +1598,14 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
     const { metadata: { name: id }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart;
     const { setActiveQuickStart, footer } = React.useContext(QuickStartContext);
     const ref = React.useRef(null);
-    const quickStartIcon = (React.createElement(FallbackImg, { className: "pfext-catalog-item-icon__img--large", src: icon, alt: "", fallback: React.createElement(RocketIcon, null) }));
-    const footerComponent = footer && footer.show === false ? null : link ? (React.createElement(QuickStartTileFooterExternal, { link: link })) : (React.createElement(QuickStartTileFooter, { quickStartId: id, status: status, totalTasks: tasks === null || tasks === void 0 ? void 0 : tasks.length }));
+    let quickStartIcon;
+    if (typeof icon === 'object') {
+        quickStartIcon = icon;
+    }
+    else {
+        quickStartIcon = (React.createElement(FallbackImg, { className: "pfext-catalog-item-icon__img--large", src: icon, alt: "", fallback: React.createElement(RocketIcon, null) }));
+    }
+    const footerComponent = footer && footer.show === false ? null : link ? (React.createElement(QuickStartTileFooterExternal, { link: link, quickStartId: id })) : (React.createElement(QuickStartTileFooter, { quickStartId: id, status: status, totalTasks: tasks === null || tasks === void 0 ? void 0 : tasks.length }));
     const handleClick = (e) => {
         var _a;
         if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
@@ -1609,7 +1625,7 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
             // @ts-ignore
             component: "div", style: {
                 cursor: 'pointer',
-            }, icon: quickStartIcon, className: "pfext-quick-start-tile", "data-testid": `qs-card-${camelize(displayName)}`, featured: isActive, title: React.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type }), onClick: handleClick, "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent })));
+            }, icon: quickStartIcon, className: "pfext-quick-start-tile", "data-testid": `qs-card-${camelize(displayName)}`, featured: isActive, title: React.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type, quickStartId: id }), onClick: handleClick, "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent })));
 };
 
 const QuickStartCatalog = ({ quickStarts }) => {
@@ -1802,7 +1818,7 @@ const QuickStartCatalogPage = ({ quickStarts, showFilter, sortFnc = (q1, q2) =>
     if (!allQuickStarts || allQuickStarts.length === 0) {
         return React.createElement(EmptyBox, { label: getResource('Quick Starts') });
     }
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement("div", { className: "pfext-quick-start__base" },
         showTitle && (React.createElement("div", { className: "pfext-page-layout__header" },
             React.createElement(Text, { component: "h1", className: "pfext-page-layout__title", "data-test": "page-title" }, title || getResource('Quick Starts')),
             hint && React.createElement("div", { className: "pfext-page-layout__hint" }, hint))),
@@ -1823,65 +1839,89 @@ const QuickStartCatalogToolbar = ({ children }) => (React.createElement(Toolbar,
 
 const QuickStartCloseModal = ({ isOpen, onConfirm, onCancel, }) => {
     const { getResource } = React.useContext(QuickStartContext);
-    return (React.createElement(Modal, { className: "pfext-quick-start-drawer__modal", isOpen: isOpen, variant: ModalVariant.small, showClose: false, "data-test": "leave-quickstart", title: getResource('Leave quick start?'), footer: React.createElement(Flex, null,
+    return (React.createElement(Modal, { className: "pfext-quick-start-drawer__modal pfext-quick-start__base", isOpen: isOpen, variant: ModalVariant.small, showClose: false, "data-test": "leave-quickstart", title: getResource('Leave quick start?'), footer: React.createElement(Flex, null,
             React.createElement(FlexItem, { align: { default: 'alignRight' } },
                 React.createElement(Button, { variant: "secondary", "data-test": "cancel button", onClick: onCancel }, getResource('Cancel'))),
             React.createElement(FlexItem, null,
                 React.createElement(Button, { variant: "primary", "data-test": "leave button", onClick: onConfirm }, getResource('Leave')))), isFullScreen: true }, getResource('Your progress will be saved.')));
 };
 
-const TaskIcon = ({ taskIndex, taskStatus, }) => {
+const TaskIcon = ({ taskIndex, taskStatus }) => {
     const { getResource } = React.useContext(QuickStartContext);
-    switch (taskStatus) {
-        case QuickStartTaskStatus.SUCCESS:
-            return (React.createElement("span", { className: "pfext-icon-and-text__icon" },
-                React.createElement(CheckCircleIcon, { size: "md", className: "pfext-quick-start-task-header__task-icon-success" })));
-        case QuickStartTaskStatus.FAILED:
-            return (React.createElement("span", { className: "pfext-icon-and-text__icon" },
-                React.createElement(ExclamationCircleIcon, { size: "md", className: "pfext-quick-start-task-header__task-icon-failed" })));
-        default:
-            return (React.createElement("span", { className: "pfext-icon-and-text__icon pfext-quick-start-task-header__task-icon-init" }, getResource('{{taskIndex, number}}', taskIndex).replace('{{taskIndex, number}}', taskIndex)));
+    const success = taskStatus === QuickStartTaskStatus.SUCCESS;
+    const failed = taskStatus === QuickStartTaskStatus.FAILED;
+    const classNames = css('pfext-icon-and-text__icon', {
+        'pfext-quick-start-task-header__task-icon-init': !failed && !success,
+    });
+    let content;
+    if (success) {
+        content = (React.createElement(CheckCircleIcon, { size: "md", className: "pfext-quick-start-task-header__task-icon-success" }));
     }
+    else if (failed) {
+        content = (React.createElement(ExclamationCircleIcon, { size: "md", className: "pfext-quick-start-task-header__task-icon-failed" }));
+    }
+    else {
+        content = getResource('{{taskIndex, number}}', taskIndex).replace('{{taskIndex, number}}', taskIndex);
+    }
+    return React.createElement("span", { className: classNames }, content);
 };
 const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, }) => {
     const classNames = css('pfext-quick-start-task-header__title', {
         'pfext-quick-start-task-header__title-success': taskStatus === QuickStartTaskStatus.SUCCESS,
-        'pfext-quick-start-task-header__title-failed': taskStatus === QuickStartTaskStatus.FAILED,
+        'pfext-quick-start-task-header__title-failed': taskStatus === (QuickStartTaskStatus.FAILED || QuickStartTaskStatus.VISITED),
     });
-    const content = (React.createElement("span", { className: "pfext-quick-start-task-header" },
-        React.createElement(Title, { headingLevel: "h3", size: size, className: classNames },
-            React.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
-            React.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
-            isActiveTask && subtitle && (React.createElement(React.Fragment, null,
-                ' ',
-                React.createElement("span", { className: "pfext-quick-start-task-header__subtitle text-secondary", "data-test-id": "quick-start-task-subtitle" }, subtitle))))));
-    return (React.createElement(WizardNavItem, { content: content, step: taskIndex, onNavItemClick: () => onTaskSelect(taskIndex - 1), navItemComponent: "button" }));
+    const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
+    const skippedReviewOrFailed = taskStatus === QuickStartTaskStatus.REVIEW || taskStatus === QuickStartTaskStatus.FAILED;
+    const tryAgain = !isActiveTask && (skippedReviewOrFailed || notCompleted) && (React.createElement(FlexItem, null,
+        React.createElement(Title, { headingLevel: "h4", className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
+    const content = (React.createElement(Flex, { className: "pfext-quick-start-task-header", direction: { default: 'column' }, spaceItems: { default: 'spaceItemsXs' } },
+        React.createElement(FlexItem, null,
+            React.createElement(Title, { headingLevel: "h3", size: size, className: classNames },
+                React.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
+                React.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
+                isActiveTask && subtitle && (React.createElement(React.Fragment, null,
+                    ' ',
+                    React.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" }, subtitle))))),
+        tryAgain));
+    return (React.createElement(WizardNavItem, { content: content, step: taskIndex, onNavItemClick: () => onTaskSelect(taskIndex - 1), navItemComponent: "button", isCurrent: isActiveTask }));
 };
 
 const QuickStartTaskHeaderList = ({ tasks, allTaskStatuses, onTaskSelect, }) => {
     return tasks.length > 0 ? (React.createElement(List, { className: "pfext-quick-start-task-header__list" }, tasks.map((task, index) => (React.createElement(QuickStartTaskHeader, { key: task.title, title: task.title, taskIndex: index + 1, size: "md", taskStatus: allTaskStatuses[index], onTaskSelect: onTaskSelect }))))) : null;
 };
 
-const QuickStartConclusion = ({ tasks, conclusion, allTaskStatuses, nextQuickStart, onQuickStartChange, onTaskSelect, }) => {
-    var _a;
+const QuickStartConclusion = ({ tasks, conclusion, allTaskStatuses, nextQuickStarts, onQuickStartChange, onTaskSelect, }) => {
     const hasFailedTask = allTaskStatuses.includes(QuickStartTaskStatus.FAILED);
-    const nextQSDisplayName = (_a = nextQuickStart === null || nextQuickStart === void 0 ? void 0 : nextQuickStart.spec) === null || _a === void 0 ? void 0 : _a.displayName;
     const { getResource } = React.useContext(QuickStartContext);
     return (React.createElement(React.Fragment, null,
         React.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect }),
         React.createElement(QuickStartMarkdownView, { content: hasFailedTask
                 ? getResource('One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.')
                 : conclusion }),
-        nextQuickStart && !hasFailedTask && (React.createElement(Button, { variant: "link", onClick: () => onQuickStartChange(nextQuickStart.metadata.name), isInline: true },
-            getResource('Start {{nextQSDisplayName}} quick start').replace('{{nextQSDisplayName}}', nextQSDisplayName),
-            ' ',
-            React.createElement(ArrowRightIcon, { style: { marginLeft: 'var(--pf-global--spacer--xs)', verticalAlign: 'middle' } })))));
+        !hasFailedTask &&
+            nextQuickStarts &&
+            nextQuickStarts.length > 0 &&
+            nextQuickStarts.map((nextQuickStart, index) => {
+                var _a;
+                return (React.createElement(Button, { variant: "link", onClick: () => onQuickStartChange(nextQuickStart.metadata.name), isInline: true, isBlock: true, key: index },
+                    getResource('Start {{nextQSDisplayName}} quick start').replace('{{nextQSDisplayName}}', (_a = nextQuickStart === null || nextQuickStart === void 0 ? void 0 : nextQuickStart.spec) === null || _a === void 0 ? void 0 : _a.displayName),
+                    ' ',
+                    React.createElement(ArrowRightIcon, { style: { marginLeft: 'var(--pf-global--spacer--xs)', verticalAlign: 'middle' } })));
+            })));
 };
 
-const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, onTaskSelect, }) => {
+const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequisites, onTaskSelect, }) => {
     const { getResource } = React.useContext(QuickStartContext);
+    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
+    const [isPrereqsExpanded, setIsPrereqsExpanded] = React.useState(false);
+    const prereqList = (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React.createElement(ExpandableSection, { toggleText: getResource('View Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length), onToggle: () => setIsPrereqsExpanded(!isPrereqsExpanded), className: "pfext-quick-start-intro__prereq" },
+        React.createElement(List, { className: "pfext-quick-start-intro__prereq-list" }, prereqs.map((pr) => {
+            return (React.createElement(ListItem, { key: pr, className: "pfext-quick-start-intro__prereq-list__item" },
+                React.createElement("span", { className: "pfext-quick-start-intro__prereq-list__item-content" }, pr)));
+        }))));
     return (React.createElement(React.Fragment, null,
         React.createElement(QuickStartMarkdownView, { content: introduction }),
+        prereqList,
         React.createElement("p", { style: { marginBottom: 'var(--pf-global--spacer--md)' } },
             getResource('In this quick start, you will complete {{count, number}} task', tasks.length).replace('{{count, number}}', tasks.length),
             ":"),
@@ -1906,7 +1946,7 @@ const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
         'pfext-quick-start-task-review--failed': taskStatus === QuickStartTaskStatus.FAILED,
     });
     const title = React.createElement("span", { className: alertClassNames }, getResource('Check your work'));
-    return (React.createElement(Alert, { variant: getAlertVariant(taskStatus), title: title, isInline: true },
+    return (React.createElement(Alert, { className: "pfext-quick-start-task-review-alert", variant: getAlertVariant(taskStatus), title: title, isInline: true },
         React.createElement(QuickStartMarkdownView, { content: instructions }),
         React.createElement("span", { className: "pfext-quick-start-task-review__actions" },
             React.createElement(Radio, { id: "review-success", name: "review-success", "data-testid": "qs-drawer-check-yes", label: getResource('Yes'), className: "pfext-quick-start-task-review__radio", isChecked: taskStatus === QuickStartTaskStatus.SUCCESS, onChange: () => onTaskReview(QuickStartTaskStatus.SUCCESS) }),
@@ -1915,31 +1955,32 @@ const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
 };
 
 const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onTaskSelect, }) => {
-    const { getResource } = React.useContext(QuickStartContext);
+    const { getResource, alwaysShowTaskReview } = React.useContext(QuickStartContext);
     return (React.createElement("div", { className: "pfext-quick-start-tasks__list" }, tasks
         .filter((_, index) => allTaskStatuses[index] !== QuickStartTaskStatus.INIT)
         .map((task, index) => {
         const { title, description, review } = task;
         const isActiveTask = index === taskNumber;
         const taskStatus = allTaskStatuses[index];
+        const shouldShowTaskReview = (!QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) || alwaysShowTaskReview) &&
+            review;
         return (React.createElement(React.Fragment, { key: title },
             React.createElement(QuickStartTaskHeader, { taskIndex: index + 1, title: title, size: "md", subtitle: getResource('{{index, number}} of {{tasks, number}}')
                     .replace('{{index, number}}', index + 1)
                     .replace('{{tasks, number}}', tasks.length), taskStatus: taskStatus, isActiveTask: isActiveTask, onTaskSelect: onTaskSelect }),
             isActiveTask && (React.createElement("div", { style: { marginBottom: 'var(--pf-global--spacer--md)' } },
                 React.createElement(QuickStartMarkdownView, { content: description }),
-                !QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) && review && (React.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview }))))));
+                shouldShowTaskReview && (React.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview }))))));
     })));
 };
 
 const QuickStartContent = React.forwardRef(({ quickStart, nextQuickStarts = [], taskNumber, allTaskStatuses, onTaskSelect, onTaskReview, onQuickStartChange, }, ref) => {
-    const { spec: { introduction, tasks, conclusion }, } = quickStart;
+    const { spec: { introduction, tasks, conclusion, prerequisites }, } = quickStart;
     const totalTasks = tasks.length;
-    const nextQS = nextQuickStarts.length > 0 && nextQuickStarts[0];
     return (React.createElement("div", { className: "pfext-quick-start-content", ref: ref },
-        taskNumber === -1 && (React.createElement(QuickStartIntroduction, { tasks: tasks, allTaskStatuses: allTaskStatuses, introduction: introduction, onTaskSelect: onTaskSelect })),
+        taskNumber === -1 && (React.createElement(QuickStartIntroduction, { tasks: tasks, allTaskStatuses: allTaskStatuses, introduction: introduction, prerequisites: prerequisites, onTaskSelect: onTaskSelect })),
         taskNumber > -1 && taskNumber < totalTasks && (React.createElement(QuickStartTasks, { tasks: tasks, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskReview: onTaskReview, onTaskSelect: onTaskSelect })),
-        taskNumber === totalTasks && (React.createElement(QuickStartConclusion, { tasks: tasks, conclusion: conclusion, allTaskStatuses: allTaskStatuses, nextQuickStart: nextQS, onQuickStartChange: onQuickStartChange, onTaskSelect: onTaskSelect }))));
+        taskNumber === totalTasks && (React.createElement(QuickStartConclusion, { tasks: tasks, conclusion: conclusion, allTaskStatuses: allTaskStatuses, nextQuickStarts: nextQuickStarts, onQuickStartChange: onQuickStartChange, onTaskSelect: onTaskSelect }))));
 });
 
 const QuickStartFooter = ({ status, taskNumber, totalTasks, onNext, onBack, footerClass, quickStartId, }) => {
@@ -1977,8 +2018,7 @@ const QuickStartFooter = ({ status, taskNumber, totalTasks, onNext, onBack, foot
     }, [taskNumber, totalTasks, PrimaryButtonText, status]);
     const getPrimaryButton = React.useMemo(() => (React.createElement(Button, { variant: "primary", className: "pfext-quick-start-footer__actionbtn", onClick: onNext, "data-testid": `qs-drawer-${camelize(getPrimaryButtonText)}`, "data-test": `${getPrimaryButtonText} button` }, getPrimaryButtonText)), [getPrimaryButtonText, onNext]);
     const getSecondaryButton = React.useMemo(() => taskNumber === -1 && status !== QuickStartStatus.NOT_STARTED ? (React.createElement(Button, { variant: "secondary", onClick: onRestart, "data-testid": "qs-drawer-restart" }, SecondaryButtonText.RESTART)) : (taskNumber > -1 && (React.createElement(Button, { variant: "secondary", onClick: onBack, "data-testid": "qs-drawer-back" }, SecondaryButtonText.BACK))), [onRestart, onBack, SecondaryButtonText, status, taskNumber]);
-    const getSideNoteAction = React.useMemo(() => status === QuickStartStatus.COMPLETE &&
-        taskNumber === totalTasks && (React.createElement(Button, { variant: "link", className: "pfext-quick-start-footer__restartbtn", onClick: onRestart, "data-testid": "qs-drawer-side-note-action" }, SecondaryButtonText.RESTART)), [status, SecondaryButtonText, onRestart, taskNumber, totalTasks]);
+    const getSideNoteAction = React.useMemo(() => taskNumber !== -1 && (React.createElement(Button, { variant: "link", className: "pfext-quick-start-footer__restartbtn", onClick: onRestart, "data-testid": "qs-drawer-side-note-action" }, SecondaryButtonText.RESTART)), [taskNumber, onRestart, SecondaryButtonText.RESTART]);
     return (React.createElement("div", { className: `pfext-quick-start-footer ${footerClass}` },
         getPrimaryButton,
         getSecondaryButton,
@@ -2032,6 +2072,13 @@ const getElement = (appendTo) => {
     }
     return appendTo;
 };
+const useScrollTopOnTaskNumberChange = (node, taskNumber) => {
+    React.useEffect(() => {
+        if (node) {
+            node.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+    }, [taskNumber, node]);
+};
 const QuickStartPanelContent = (_a) => {
     var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true } = _a, props = __rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose"]);
     const { getResource } = React.useContext(QuickStartContext);
@@ -2040,6 +2087,7 @@ const QuickStartPanelContent = (_a) => {
     const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
     const { activeQuickStartState } = React.useContext(QuickStartContext);
     const taskNumber = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.taskNumber;
+    useScrollTopOnTaskNumberChange(contentRef, taskNumber);
     const nextQuickStarts = quickStarts.filter((qs) => { var _a; return (_a = quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.nextQuickStart) === null || _a === void 0 ? void 0 : _a.includes(qs.metadata.name); });
     const headerClasses = css('pfext-quick-start-panel-content__header', {
         'pfext-quick-start-panel-content__header__shadow': shadows === Shadows.top || shadows === Shadows.both,
@@ -2057,7 +2105,7 @@ const QuickStartPanelContent = (_a) => {
         }
         return Number.parseInt(taskNumber, 10) + 1;
     };
-    const content = quickStart ? (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start-panel-content", "data-testid": `qs-drawer-${camelize(quickStart.spec.displayName)}`, "data-qs": `qs-step-${getStep()}`, "data-test": "quickstart drawer" }, props),
+    const content = quickStart ? (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base", "data-testid": `qs-drawer-${camelize(quickStart.spec.displayName)}`, "data-qs": `qs-step-${getStep()}`, "data-test": "quickstart drawer" }, props),
         React.createElement("div", { className: headerClasses },
             React.createElement(DrawerHead, null,
                 React.createElement("div", { className: "pfext-quick-start-panel-content__title" },
@@ -2076,7 +2124,7 @@ const QuickStartPanelContent = (_a) => {
 };
 
 const QuickStartContainer = (_a) => {
-    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, language, loading = false, useQueryParams = true, markdown, contextProps } = _a, props = __rest(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "language", "loading", "useQueryParams", "markdown", "contextProps"]);
+    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = false } = _a, props = __rest(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview"]);
     const valuesForQuickstartContext = useValuesForQuickStartContext(Object.assign({ allQuickStarts: quickStarts, activeQuickStartID,
         setActiveQuickStartID,
         allQuickStartStates,
@@ -2084,7 +2132,8 @@ const QuickStartContainer = (_a) => {
             show: showCardFooters,
         }, language, resourceBundle: Object.assign({}, resourceBundle), loading,
         useQueryParams,
-        markdown }, contextProps));
+        markdown,
+        alwaysShowTaskReview }, contextProps));
     React.useEffect(() => {
         if (quickStarts &&
             JSON.stringify(quickStarts) !== JSON.stringify(valuesForQuickstartContext.allQuickStarts)) {