@patternfly/quickstarts 1.3.0 → 2.0.1

package/dist/index.js

@@ -178,6 +178,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,
@@ -205,7 +206,8 @@ var en = {
 	"Your progress will be saved.": "Your progress will be saved.",
 	"Not available": "Not available",
 	"Copy to clipboard": "Copy to clipboard",
-	"Successfully copied to clipboard!": "Successfully copied to clipboard!"
+	"Successfully copied to clipboard!": "Successfully copied to clipboard!",
+	"Quick start • {{duration, number}} minutes": "Quick start • {{duration, number}} minutes"
 };
 
 /* eslint-disable */
@@ -615,6 +617,7 @@ const QuickStartContextDefaults = {
     },
     setFilter: () => { },
     footer: null,
+    useLegacyHeaderColors: false,
     markdown: null,
     loading: false,
     alwaysShowTaskReview: false,
@@ -633,7 +636,7 @@ const getResource = (resource, options, resourceBundle, lng) => {
 const useValuesForQuickStartContext = (value = {}) => {
     var _a, _b;
     const combinedValue = Object.assign(Object.assign({}, QuickStartContextDefaults), value);
-    const { activeQuickStartID, setActiveQuickStartID, setAllQuickStartStates, useQueryParams, allQuickStartStates, allQuickStarts = [], footer, markdown, } = combinedValue;
+    const { activeQuickStartID, setActiveQuickStartID, setAllQuickStartStates, useQueryParams, allQuickStartStates, allQuickStarts = [], footer, useLegacyHeaderColors, markdown, } = combinedValue;
     const [quickStarts, setQuickStarts] = React__default['default'].useState(combinedValue.allQuickStarts || []);
     const [resourceBundle, setResourceBundle] = React__default['default'].useState(Object.assign(Object.assign({}, en), combinedValue.resourceBundle));
     const [language, setLanguage] = React__default['default'].useState(combinedValue.language);
@@ -816,6 +819,7 @@ const useValuesForQuickStartContext = (value = {}) => {
         setQuickStartTaskStatus,
         getQuickStartForId,
         footer,
+        useLegacyHeaderColors,
         useQueryParams,
         markdown,
         resourceBundle,
@@ -1001,7 +1005,7 @@ const SimplePopper = ({ children }) => {
         }
     }, [destroy, isOpen]);
     return isOpen ? (React__namespace.createElement(Portal, null,
-        React__namespace.createElement("div", { ref: nodeRefCallback, style: { zIndex: 9999, position: 'absolute', top: 0, left: 0 } }, children))) : null;
+        React__namespace.createElement("div", { ref: nodeRefCallback, style: { zIndex: 9999, position: 'absolute', top: 0, left: 0 }, className: "pfext-quick-start__base" }, children))) : null;
 };
 
 const isInViewport = (elementToCheck) => {
@@ -1244,7 +1248,7 @@ const CopyClipboard = ({ element, rootSelector, docContext, }) => {
     useEventListener(element, 'mouseleave', React__namespace.useCallback(() => {
         setShowSuccessContent(false);
     }, []));
-    return showSuccessContent ? (React__namespace.createElement(reactCore.Tooltip, { key: "after-copy", isVisible: true, reference: () => element, content: getResource('Successfully copied to clipboard!') })) : (React__namespace.createElement(reactCore.Tooltip, { key: "before-copy", reference: () => element, content: getResource('Copy to clipboard') }));
+    return showSuccessContent ? (React__namespace.createElement(reactCore.Tooltip, { key: "after-copy", isVisible: true, reference: () => element, content: getResource('Successfully copied to clipboard!'), className: "pfext-quick-start__base" })) : (React__namespace.createElement(reactCore.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}]`);
@@ -1569,10 +1573,11 @@ const QuickStartTileDescription = ({ description, prerequisites, }) => {
             React__namespace.createElement(reactCore.Text, { component: reactCore.TextVariants.h5, className: "pfext-quick-start-tile-prerequisites__text" },
                 getResource('Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length),
                 ' '),
-            React__namespace.createElement(reactCore.Popover, { "aria-label": getResource('Prerequisites'), headerContent: getResource('Prerequisites'), className: "pfext-page-layout__base", bodyContent: React__namespace.createElement(reactCore.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__namespace.createElement(reactCore.TextListItem, { key: index },
-                    React__namespace.createElement(QuickStartMarkdownView, { content: prerequisite }))))) },
+            React__namespace.createElement(reactCore.Popover, { "aria-label": getResource('Prerequisites'), headerContent: getResource('Prerequisites'), className: "pfext-quick-start__base", bodyContent: React__namespace.createElement("div", { className: "pfext-popover__base" },
+                    React__namespace.createElement(reactCore.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__namespace.createElement(reactCore.TextListItem, { key: index },
+                        React__namespace.createElement(QuickStartMarkdownView, { content: prerequisite })))))) },
                 React__namespace.createElement(reactCore.Button, { variant: "link", isInline: true, className: "pfext-quick-start-tile-prerequisites__icon", "data-testid": "qs-card-prereqs", onClick: (e) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -1595,20 +1600,20 @@ const QuickStartTileFooter = ({ quickStartId, status, totalTasks, }) => {
     }, [quickStartId, restartQuickStart, totalTasks]);
     return (React__namespace.createElement(reactCore.Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
         status === exports.QuickStartStatus.NOT_STARTED && (React__namespace.createElement(reactCore.FlexItem, null,
-            React__namespace.createElement(reactCore.Button, { onClick: start, variant: "link", isInline: true, "data-testid": "qs-card-notStarted-start" }, getResource('Start')))),
+            React__namespace.createElement(reactCore.Button, { onClick: start, variant: "link", isInline: true, "data-testid": "qs-card-notStarted-start", id: `${quickStartId}-start`, "aria-labelledby": `${quickStartId}-start ${quickStartId}` }, getResource('Start')))),
         status === exports.QuickStartStatus.IN_PROGRESS && activeQuickStartID !== quickStartId && (React__namespace.createElement(reactCore.FlexItem, null,
-            React__namespace.createElement(reactCore.Button, { variant: "link", isInline: true, "data-testid": "qs-card-inProgress-resume" }, getResource('Continue')))),
+            React__namespace.createElement(reactCore.Button, { variant: "link", isInline: true, "data-testid": "qs-card-inProgress-resume", id: `${quickStartId}-continue`, "aria-labelledby": `${quickStartId}-continue ${quickStartId}` }, getResource('Continue')))),
         status === exports.QuickStartStatus.COMPLETE && (React__namespace.createElement(reactCore.FlexItem, null,
-            React__namespace.createElement(reactCore.Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-complete-restart" }, getResource('Start')))),
+            React__namespace.createElement(reactCore.Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-complete-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart')))),
         status === exports.QuickStartStatus.IN_PROGRESS && (React__namespace.createElement(reactCore.FlexItem, null,
-            React__namespace.createElement(reactCore.Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-inProgress-restart" }, getResource('Restart'))))));
+            React__namespace.createElement(reactCore.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__namespace.createElement(reactCore.Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
         React__namespace.createElement(reactCore.FlexItem, null,
-            React__namespace.createElement(reactCore.Button, { component: "a", href: href, target: "_blank", rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: React__namespace.createElement(ExternalLinkAltIcon__default['default'], null), iconPosition: "right" }, text || href))));
+            React__namespace.createElement(reactCore.Button, { component: "a", href: href, target: "_blank", rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: React__namespace.createElement(ExternalLinkAltIcon__default['default'], null), iconPosition: "right", id: quickStartId, "aria-labelledby": `${quickStartId}-external ${quickStartId}` }, text || href))));
 };
 
 const statusColorMap = {
@@ -1616,7 +1621,7 @@ const statusColorMap = {
     [exports.QuickStartStatus.IN_PROGRESS]: 'purple',
     [exports.QuickStartStatus.NOT_STARTED]: 'grey',
 };
-const QuickStartTileHeader = ({ status, duration, name, type, }) => {
+const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, }) => {
     const { getResource } = React__namespace.useContext(QuickStartContext);
     const statusLocaleMap = {
         [exports.QuickStartStatus.COMPLETE]: getResource('Complete'),
@@ -1624,7 +1629,7 @@ const QuickStartTileHeader = ({ status, duration, name, type, }) => {
         [exports.QuickStartStatus.NOT_STARTED]: getResource('Not started'),
     };
     return (React__namespace.createElement("div", { className: "pfext-quick-start-tile-header" },
-        React__namespace.createElement(reactCore.Title, { headingLevel: "h3", "data-test": "title" }, name),
+        React__namespace.createElement(reactCore.Title, { headingLevel: "h3", "data-test": "title", id: quickStartId }, name),
         React__namespace.createElement("div", { className: "pfext-quick-start-tile-header__status" },
             type && (React__namespace.createElement(reactCore.Label, { className: "pfext-quick-start-tile-header--margin", color: type.color }, type.text)),
             duration && (React__namespace.createElement(reactCore.Label, { variant: "outline", "data-test": "duration", icon: React__namespace.createElement(OutlinedClockIcon__default['default'], null), className: "pfext-quick-start-tile-header--margin" }, getResource('{{duration, number}} minutes', duration).replace('{{duration, number}}', duration))),
@@ -1642,7 +1647,7 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
     else {
         quickStartIcon = (React__namespace.createElement(FallbackImg, { className: "pfext-catalog-item-icon__img--large", src: icon, alt: "", fallback: React__namespace.createElement(RocketIcon__default['default'], null) }));
     }
-    const footerComponent = footer && footer.show === false ? null : link ? (React__namespace.createElement(QuickStartTileFooterExternal, { link: link })) : (React__namespace.createElement(QuickStartTileFooter, { quickStartId: id, status: status, totalTasks: tasks === null || tasks === void 0 ? void 0 : tasks.length }));
+    const footerComponent = footer && footer.show === false ? null : link ? (React__namespace.createElement(QuickStartTileFooterExternal, { link: link, quickStartId: id })) : (React__namespace.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)) {
@@ -1662,7 +1667,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__namespace.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type }), onClick: handleClick, "data-test": `tile ${id}`, description: React__namespace.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__namespace.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type, quickStartId: id }), onClick: handleClick, "data-test": `tile ${id}`, description: React__namespace.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent })));
 };
 
 const QuickStartCatalog = ({ quickStarts }) => {
@@ -1855,7 +1860,7 @@ const QuickStartCatalogPage = ({ quickStarts, showFilter, sortFnc = (q1, q2) =>
     if (!allQuickStarts || allQuickStarts.length === 0) {
         return React__namespace.createElement(EmptyBox, { label: getResource('Quick Starts') });
     }
-    return (React__namespace.createElement(React__namespace.Fragment, null,
+    return (React__namespace.createElement("div", { className: "pfext-quick-start__base" },
         showTitle && (React__namespace.createElement("div", { className: "pfext-page-layout__header" },
             React__namespace.createElement(reactCore.Text, { component: "h1", className: "pfext-page-layout__title", "data-test": "page-title" }, title || getResource('Quick Starts')),
             hint && React__namespace.createElement("div", { className: "pfext-page-layout__hint" }, hint))),
@@ -1876,31 +1881,31 @@ const QuickStartCatalogToolbar = ({ children }) => (React__namespace.createEleme
 
 const QuickStartCloseModal = ({ isOpen, onConfirm, onCancel, }) => {
     const { getResource } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement(Modal, { className: "pfext-quick-start-drawer__modal", isOpen: isOpen, variant: reactCore.ModalVariant.small, showClose: false, "data-test": "leave-quickstart", title: getResource('Leave quick start?'), footer: React__namespace.createElement(reactCore.Flex, null,
+    return (React__namespace.createElement(Modal, { className: "pfext-quick-start-drawer__modal pfext-quick-start__base", isOpen: isOpen, variant: reactCore.ModalVariant.small, showClose: false, "data-test": "leave-quickstart", title: getResource('Leave quick start?'), footer: React__namespace.createElement(reactCore.Flex, null,
             React__namespace.createElement(reactCore.FlexItem, { align: { default: 'alignRight' } },
                 React__namespace.createElement(reactCore.Button, { variant: "secondary", "data-test": "cancel button", onClick: onCancel }, getResource('Cancel'))),
             React__namespace.createElement(reactCore.FlexItem, null,
                 React__namespace.createElement(reactCore.Button, { variant: "primary", "data-test": "leave button", onClick: onConfirm }, getResource('Leave')))), isFullScreen: true }, getResource('Your progress will be saved.')));
 };
 
-const TaskIcon = ({ taskIndex, taskStatus, isActiveTask }) => {
+const TaskIcon = ({ taskIndex, taskStatus }) => {
     const { getResource } = React__namespace.useContext(QuickStartContext);
-    const stepNumberIcon = (React__namespace.createElement("span", { className: "pfext-icon-and-text__icon pfext-quick-start-task-header__task-icon-init" }, getResource('{{taskIndex, number}}', taskIndex).replace('{{taskIndex, number}}', taskIndex)));
-    // When the task has been visited but is the active task, show number icon.
-    if (taskStatus === exports.QuickStartTaskStatus.VISITED && isActiveTask) {
-        return stepNumberIcon;
+    const success = taskStatus === exports.QuickStartTaskStatus.SUCCESS;
+    const failed = taskStatus === exports.QuickStartTaskStatus.FAILED;
+    const classNames = reactStyles.css('pfext-icon-and-text__icon', {
+        'pfext-quick-start-task-header__task-icon-init': !failed && !success,
+    });
+    let content;
+    if (success) {
+        content = (React__namespace.createElement(CheckCircleIcon__default['default'], { size: "md", className: "pfext-quick-start-task-header__task-icon-success" }));
     }
-    switch (taskStatus) {
-        case exports.QuickStartTaskStatus.SUCCESS:
-            return (React__namespace.createElement("span", { className: "pfext-icon-and-text__icon" },
-                React__namespace.createElement(CheckCircleIcon__default['default'], { size: "md", className: "pfext-quick-start-task-header__task-icon-success" })));
-        case exports.QuickStartTaskStatus.FAILED:
-        case exports.QuickStartTaskStatus.VISITED:
-            return (React__namespace.createElement("span", { className: "pfext-icon-and-text__icon" },
-                React__namespace.createElement(ExclamationCircleIcon__default['default'], { size: "md", className: "pfext-quick-start-task-header__task-icon-failed" })));
-        default:
-            return stepNumberIcon;
+    else if (failed) {
+        content = (React__namespace.createElement(ExclamationCircleIcon__default['default'], { size: "md", className: "pfext-quick-start-task-header__task-icon-failed" }));
     }
+    else {
+        content = getResource('{{taskIndex, number}}', taskIndex).replace('{{taskIndex, number}}', taskIndex);
+    }
+    return React__namespace.createElement("span", { className: classNames }, content);
 };
 const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, }) => {
     const classNames = reactStyles.css('pfext-quick-start-task-header__title', {
@@ -1909,16 +1914,16 @@ const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, is
     });
     const notCompleted = taskStatus === exports.QuickStartTaskStatus.VISITED;
     const skippedReviewOrFailed = taskStatus === exports.QuickStartTaskStatus.REVIEW || taskStatus === exports.QuickStartTaskStatus.FAILED;
-    const tryAgain = !isActiveTask && (skippedReviewOrFailed || notCompleted) && (React__namespace.createElement(reactCore.FlexItem, null,
-        React__namespace.createElement(reactCore.Title, { headingLevel: "h4", className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
-    const content = (React__namespace.createElement(reactCore.Flex, { className: "pfext-quick-start-task-header", direction: { default: 'column' }, spaceItems: { default: 'spaceItemsXs' } },
-        React__namespace.createElement(reactCore.FlexItem, null,
-            React__namespace.createElement(reactCore.Title, { headingLevel: "h3", size: size, className: classNames },
-                React__namespace.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus, isActiveTask: true }),
-                React__namespace.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
-                isActiveTask && subtitle && (React__namespace.createElement(React__namespace.Fragment, null,
-                    ' ',
-                    React__namespace.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" }, subtitle))))),
+    const tryAgain = !isActiveTask && (skippedReviewOrFailed || notCompleted) && (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement("div", null),
+        React__namespace.createElement("div", { className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
+    const content = (React__namespace.createElement("div", { className: "pfext-quick-start-task-header" },
+        React__namespace.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
+        React__namespace.createElement(reactCore.Title, { headingLevel: "h3", size: size, className: classNames },
+            React__namespace.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
+            isActiveTask && subtitle && (React__namespace.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" },
+                ' ',
+                subtitle))),
         tryAgain));
     return (React__namespace.createElement(reactCore.WizardNavItem, { content: content, step: taskIndex, onNavItemClick: () => onTaskSelect(taskIndex - 1), navItemComponent: "button", isCurrent: isActiveTask }));
 };
@@ -1947,10 +1952,18 @@ const QuickStartConclusion = ({ tasks, conclusion, allTaskStatuses, nextQuickSta
             })));
 };
 
-const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, onTaskSelect, }) => {
+const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequisites, onTaskSelect, }) => {
     const { getResource } = React__namespace.useContext(QuickStartContext);
+    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
+    const [isPrereqsExpanded, setIsPrereqsExpanded] = React__namespace.useState(false);
+    const prereqList = (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React__namespace.createElement(reactCore.ExpandableSection, { toggleText: getResource('View Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length), onToggle: () => setIsPrereqsExpanded(!isPrereqsExpanded), className: "pfext-quick-start-intro__prereq" },
+        React__namespace.createElement(reactCore.List, { className: "pfext-quick-start-intro__prereq-list" }, prereqs.map((pr) => {
+            return (React__namespace.createElement(reactCore.ListItem, { key: pr, className: "pfext-quick-start-intro__prereq-list__item" },
+                React__namespace.createElement("span", { className: "pfext-quick-start-intro__prereq-list__item-content" }, pr)));
+        }))));
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement(QuickStartMarkdownView, { content: introduction }),
+        prereqList,
         React__namespace.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),
             ":"),
@@ -1975,7 +1988,7 @@ const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
         'pfext-quick-start-task-review--failed': taskStatus === exports.QuickStartTaskStatus.FAILED,
     });
     const title = React__namespace.createElement("span", { className: alertClassNames }, getResource('Check your work'));
-    return (React__namespace.createElement(reactCore.Alert, { variant: getAlertVariant(taskStatus), title: title, isInline: true },
+    return (React__namespace.createElement(reactCore.Alert, { className: "pfext-quick-start-task-review-alert", variant: getAlertVariant(taskStatus), title: title, isInline: true },
         React__namespace.createElement(QuickStartMarkdownView, { content: instructions }),
         React__namespace.createElement("span", { className: "pfext-quick-start-task-review__actions" },
             React__namespace.createElement(reactCore.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 === exports.QuickStartTaskStatus.SUCCESS, onChange: () => onTaskReview(exports.QuickStartTaskStatus.SUCCESS) }),
@@ -1997,17 +2010,17 @@ const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onT
             React__namespace.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__namespace.createElement("div", { style: { marginBottom: 'var(--pf-global--spacer--md)' } },
+            isActiveTask && (React__namespace.createElement("div", { className: "pfext-quick-start-task__content" },
                 React__namespace.createElement(QuickStartMarkdownView, { content: description }),
                 shouldShowTaskReview && (React__namespace.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview }))))));
     })));
 };
 
 const QuickStartContent = React__namespace.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;
     return (React__namespace.createElement("div", { className: "pfext-quick-start-content", ref: ref },
-        taskNumber === -1 && (React__namespace.createElement(QuickStartIntroduction, { tasks: tasks, allTaskStatuses: allTaskStatuses, introduction: introduction, onTaskSelect: onTaskSelect })),
+        taskNumber === -1 && (React__namespace.createElement(QuickStartIntroduction, { tasks: tasks, allTaskStatuses: allTaskStatuses, introduction: introduction, prerequisites: prerequisites, onTaskSelect: onTaskSelect })),
         taskNumber > -1 && taskNumber < totalTasks && (React__namespace.createElement(QuickStartTasks, { tasks: tasks, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskReview: onTaskReview, onTaskSelect: onTaskSelect })),
         taskNumber === totalTasks && (React__namespace.createElement(QuickStartConclusion, { tasks: tasks, conclusion: conclusion, allTaskStatuses: allTaskStatuses, nextQuickStarts: nextQuickStarts, onQuickStartChange: onQuickStartChange, onTaskSelect: onTaskSelect }))));
 });
@@ -2109,7 +2122,7 @@ const useScrollTopOnTaskNumberChange = (node, taskNumber) => {
     }, [taskNumber, node]);
 };
 const QuickStartPanelContent = (_a) => {
-    var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true } = _a, props = tslib.__rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose"]);
+    var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, headerVariant = '' } = _a, props = tslib.__rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
     const { getResource } = React__namespace.useContext(QuickStartContext);
     const [contentRef, setContentRef] = React__namespace.useState();
     const shadows = useScrollShadows(contentRef);
@@ -2120,6 +2133,7 @@ const QuickStartPanelContent = (_a) => {
     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 = reactStyles.css('pfext-quick-start-panel-content__header', {
         'pfext-quick-start-panel-content__header__shadow': shadows === Shadows.top || shadows === Shadows.both,
+        'pfext-quick-start-panel-content__header--blue-white': headerVariant === 'blue-white',
     });
     const footerClass = reactStyles.css({
         'pfext-quick-start-panel-content__footer__shadow': shadows === Shadows.bottom || shadows === Shadows.both,
@@ -2134,16 +2148,16 @@ const QuickStartPanelContent = (_a) => {
         }
         return Number.parseInt(taskNumber, 10) + 1;
     };
-    const content = quickStart ? (React__namespace.createElement(reactCore.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__namespace.createElement(reactCore.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__namespace.createElement("div", { className: headerClasses },
             React__namespace.createElement(reactCore.DrawerHead, null,
                 React__namespace.createElement("div", { className: "pfext-quick-start-panel-content__title" },
-                    React__namespace.createElement(reactCore.Title, { headingLevel: "h1", size: "xl", style: { marginRight: 'var(--pf-global--spacer--md)' } }, quickStart === null || quickStart === void 0 ? void 0 :
+                    React__namespace.createElement(reactCore.Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } }, quickStart === null || quickStart === void 0 ? void 0 :
                         quickStart.spec.displayName,
                         ' ',
-                        React__namespace.createElement("small", { className: "pfext-quick-start-panel-content__duration text-secondary" }, getResource('{{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes).replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)))),
+                        React__namespace.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, getResource('Quick start • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes).replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)))),
                 showClose && (React__namespace.createElement(reactCore.DrawerActions, null,
-                    React__namespace.createElement(reactCore.DrawerCloseButton, { onClick: handleClose, "data-testid": "qs-drawer-close" }))))),
+                    React__namespace.createElement(reactCore.DrawerCloseButton, { onClick: handleClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))))),
         React__namespace.createElement(reactCore.DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
             React__namespace.createElement(QuickStartController, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, footerClass: footerClass, contentRef: setContentRef })))) : null;
     if (appendTo) {
@@ -2153,13 +2167,14 @@ 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, alwaysShowTaskReview = false } = _a, props = tslib.__rest(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview"]);
+    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, useLegacyHeaderColors, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = false } = _a, props = tslib.__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,
-        }, language, resourceBundle: Object.assign({}, resourceBundle), loading,
+        }, useLegacyHeaderColors,
+        language, resourceBundle: Object.assign({}, resourceBundle), loading,
         useQueryParams,
         markdown,
         alwaysShowTaskReview }, contextProps));
@@ -2183,7 +2198,7 @@ const QuickStartContainer = (_a) => {
 };
 const QuickStartDrawer = (_a) => {
     var { quickStarts = [], children, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress } = _a, props = tslib.__rest(_a, ["quickStarts", "children", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress"]);
-    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, } = React__namespace.useContext(QuickStartContext);
+    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, useLegacyHeaderColors, } = React__namespace.useContext(QuickStartContext);
     const combinedQuickStarts = allQuickStarts.concat(quickStarts);
     React__namespace.useEffect(() => {
         const params = new URLSearchParams(window.location.search);
@@ -2242,7 +2257,7 @@ const QuickStartDrawer = (_a) => {
             },
         }
         : {};
-    const panelContent = (React__namespace.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth }, fullWidthPanelStyle)));
+    const panelContent = (React__namespace.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth, headerVariant: useLegacyHeaderColors ? '' : 'blue-white' }, fullWidthPanelStyle)));
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement(reactCore.Drawer, Object.assign({ isExpanded: !!activeQuickStartID, isInline: true }, props), children ? (React__namespace.createElement(reactCore.DrawerContent, Object.assign({ panelContent: panelContent }, fullWidthBodyStyle),
             React__namespace.createElement(reactCore.DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React__namespace.createElement("div", { className: "pf-c-drawer__main" }, panelContent))),