@patternfly/quickstarts 5.3.0 → 6.0.0-alpha.1

package/dist/catalog/QuickStartTile.d.ts

@@ -1,14 +1,11 @@
 import * as React from 'react';
 import { QuickStart, QuickStartStatus } from '../utils/quick-start-types';
-import { QuickstartAction } from './QuickStartTileHeader';
 import './QuickStartTile.scss';
 interface QuickStartTileProps {
     quickStart: QuickStart;
     status: QuickStartStatus;
     isActive: boolean;
     onClick?: () => void;
-    /** Action config for button rendered next to title */
-    action?: QuickstartAction;
 }
 declare const QuickStartTile: React.FC<QuickStartTileProps>;
 export default QuickStartTile;

package/dist/catalog/QuickStartTileHeader.d.ts

@@ -1,24 +1,12 @@
 import './QuickStartTileHeader.scss';
 import * as React from 'react';
-import { ButtonProps } from '@patternfly/react-core';
 import { QuickStartType } from '../utils/quick-start-types';
-export interface QuickstartAction {
-    /** Screen reader aria label. */
-    'aria-label': string;
-    /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
-    icon?: React.ComponentType<unknown>;
-    /** Callback with synthetic event parameter. */
-    onClick?: (e: React.SyntheticEvent) => void;
-    /** Additional button props to be rendered as extra props. */
-    buttonProps?: ButtonProps;
-}
 interface QuickStartTileHeaderProps {
     status: string;
     duration: number;
     name: string;
     type?: QuickStartType;
     quickStartId?: string;
-    action?: QuickstartAction;
 }
 declare const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps>;
 export default QuickStartTileHeader;

package/dist/catalog/index.d.ts

@@ -4,6 +4,6 @@ export { default as QuickStartTile } from './QuickStartTile';
 export { default as QuickStartTileDescription } from './QuickStartTileDescription';
 export { default as QuickStartTileFooter } from './QuickStartTileFooter';
 export { default as QuickStartTileFooterExternal } from './QuickStartTileFooterExternal';
-export { default as QuickStartTileHeader, QuickstartAction } from './QuickStartTileHeader';
+export { default as QuickStartTileHeader } from './QuickStartTileHeader';
 export * from './Toolbar/QuickStartCatalogFilterItems';
 export * from './Catalog';

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { createContext, useCallback, useEffect, useState } from 'react';
-import { getUniqueId, Card, CardHeader, CardTitle, CardBody, CardFooter, Modal as Modal$1, useIsomorphicLayoutEffect, Tooltip, Alert, CodeBlock, Accordion, AccordionItem, AccordionToggle, AccordionContent, Popover, PopoverPosition, Button, Icon, Text, TextVariants, TextList, TextListItem, Flex, FlexItem, Title, Label, Gallery, GalleryItem, ToolbarItem, SearchInput, Select, SelectList, SelectOption, MenuToggle, Badge, Toolbar, ToolbarContent, EmptyState, EmptyStateHeader, EmptyStateIcon, EmptyStateBody, EmptyStateFooter, EmptyStateActions, Divider, ModalVariant, WizardNavItem, List, ExpandableSection, ListItem, Radio, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody, Stack, StackItem } from '@patternfly/react-core';
+import { getUniqueId, Card, CardHeader, CardTitle, CardBody, CardFooter, Modal as Modal$1, useIsomorphicLayoutEffect, Tooltip, Alert, CodeBlock, Accordion, AccordionItem, AccordionToggle, AccordionContent, Popover, PopoverPosition, Button, Icon, Text, TextVariants, TextList, TextListItem, Flex, FlexItem, Title, Label, Gallery, GalleryItem, ToolbarItem, SearchInput, Select, SelectList, SelectOption, MenuToggle, Badge, Toolbar, ToolbarContent, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions, Divider, ModalVariant, WizardNavItem, List, ExpandableSection, ListItem, Radio, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody, Stack, StackItem } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { css } from '@patternfly/react-styles';
 import { __rest } from 'tslib';
@@ -14,32 +14,25 @@ import FireIcon from '@patternfly/react-icons/dist/js/icons/fire-icon';
 import { Converter } from 'showdown';
 import SyncAltIcon from '@patternfly/react-icons/dist/js/icons/sync-alt-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import '@patternfly/react-tokens/dist/esm/global_danger_color_100';
-import '@patternfly/react-tokens/dist/esm/global_palette_blue_300';
-import okColor from '@patternfly/react-tokens/dist/esm/global_palette_green_500';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
-import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
-
       for (var key in source) {
         if (Object.prototype.hasOwnProperty.call(source, key)) {
           target[key] = source[key];
         }
       }
     }
-
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -864,8 +857,8 @@ class CatalogTile extends React.Component {
         const _a = this.props, { id, className, featured, onClick, href, icon, iconImg, iconAlt, iconClass, badges, title, vendor, description, footer, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         ref, children } = _a, props = __rest(_a, ["id", "className", "featured", "onClick", "href", "icon", "iconImg", "iconAlt", "iconClass", "badges", "title", "vendor", "description", "footer", "ref", "children"]);
-        return (React.createElement(Card, Object.assign({ component: href ? 'a' : 'div', id: id || this.generatedId, href: href || '#', className: css('catalog-tile-pf', { featured }, className), isClickable: !!onClick }, props),
-            (badges.length > 0 || iconImg || iconClass || icon || onClick) && (React.createElement(CardHeader, { actions: { actions: badges.length > 0 && this.renderBadges(badges) }, selectableActions: onClick && {
+        return (React.createElement(Card, Object.assign({ component: href ? 'a' : 'div', id: id || this.generatedId, href: href || '#', className: css('catalog-tile-pf', { featured }, className), variant: featured ? 'secondary' : 'default', isClickable: !!onClick }, props),
+            (badges.length > 0 || iconImg || iconClass || icon || onClick) && (React.createElement(CardHeader, { actions: { actions: badges.length > 0 && this.renderBadges(badges), hasNoOffset: true }, selectableActions: onClick && {
                     selectableActionId: id + '-input',
                     onClickAction: (e) => this.handleClick(e),
                     selectableActionAriaLabelledby: id
@@ -1106,7 +1099,7 @@ const StaticSpotlight = ({ element }) => {
         }
         : {};
     return clientRect ? (React.createElement(Portal, null,
-        React.createElement("div", { className: "pf-v5-c-backdrop pfext-spotlight__with-backdrop" },
+        React.createElement("div", { className: "pf-v6-c-backdrop pfext-spotlight__with-backdrop" },
             React.createElement("div", { className: "pfext-spotlight pfext-spotlight__element-highlight-noanimate", style: style })))) : null;
 };
 
@@ -1229,11 +1222,11 @@ const useInlineCopyClipboardShowdownExtension = () => {
             if (!group || isNaN(groupId)) {
                 return text;
             }
-            return removeTemplateWhitespace(`<span class="pf-v5-c-clipboard-copy pf-m-inline">
-              <span class="pf-v5-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupId}">${group}</span>
-              <span class="pf-v5-c-clipboard-copy__actions">
-                <span class="pf-v5-c-clipboard-copy__actions-item">
-                  <button class="pf-v5-c-button pf-m-plain" aria-label="${getResource('Copy to clipboard')}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
+            return removeTemplateWhitespace(`<span class="pf-v6-c-clipboard-copy pf-m-inline">
+              <span class="pf-v6-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupId}">${group}</span>
+              <span class="pf-v6-c-clipboard-copy__actions">
+                <span class="pf-v6-c-clipboard-copy__actions-item">
+                  <button class="pf-v6-c-button pf-m-plain" aria-label="${getResource('Copy to clipboard')}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
                     ${renderToStaticMarkup(React.createElement(CopyIcon, null))}
                   </button>
                 </span>
@@ -1252,19 +1245,19 @@ const useMultilineCopyClipboardShowdownExtension = () => {
             if (!group || isNaN(groupId)) {
                 return text;
             }
-            return `<div class="pf-v5-c-code-block">
-              <div class="pf-v5-c-code-block__header">
-                <div class="pf-v5-c-code-block__actions">
-                  <div class="pf-v5-c-code-block__actions-item">
-                    <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="${getResource('Copy to clipboard')}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
+            return `<div class="pf-v6-c-code-block">
+              <div class="pf-v6-c-code-block__header">
+                <div class="pf-v6-c-code-block__actions">
+                  <div class="pf-v6-c-code-block__actions-item">
+                    <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="${getResource('Copy to clipboard')}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
                       ${renderToStaticMarkup(React.createElement(CopyIcon, null))}
                     </button>
                   </div>
                 </div>
               </div>
-              <div class="pf-v5-c-code-block__content">
-                <pre class="pf-v5-c-code-block__pre pfext-code-block__pre">
-                  <code class="pf-v5-c-code-block__code" 
+              <div class="pf-v6-c-code-block__content">
+                <pre class="pf-v6-c-code-block__pre pfext-code-block__pre">
+                  <code class="pf-v6-c-code-block__code" 
                     ${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code>
                 </pre>
               </div>
@@ -1295,7 +1288,7 @@ const markdownConvert = (markdown, extensions) => {
         // add PF class to ul and ol lists
         if (node.nodeType === 1 &&
             (node.nodeName.toLowerCase() === 'ul' || node.nodeName.toLowerCase() === 'ol')) {
-            node.setAttribute('class', 'pf-v5-c-list');
+            node.setAttribute('class', 'pf-v6-c-list');
             return node;
         }
     });
@@ -1406,7 +1399,7 @@ const IFrameMarkdownView = ({ exactHeight, markup, isEmpty, renderExtension, cla
   body {
     background-color: transparent !important;
     color: ${isEmpty ? '#999' : '#333'};
-    font-family: var(--pf-v5-global--FontFamily--sans-serif);
+    font-family: var(--pf-t--global--font--family--body);
     min-width: auto !important;
   }
   table {
@@ -1452,7 +1445,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
                     if (!linkLabel || !linkType || !linkId) {
                         return text;
                     }
-                    return `<button class="pf-v5-c-button pf-m-inline pf-m-link" data-highlight="${linkId}">${linkLabel}</button>`;
+                    return `<button class="pf-v6-c-button pf-m-inline pf-m-link" data-highlight="${linkId}">${linkLabel}</button>`;
                 },
             },
             {
@@ -1528,10 +1521,11 @@ const useAccordionShowdownExtension = () => React.useMemo(() => ({
     regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
     replace: (_text, accordionContent, _command, accordionHeading) => {
         const accordionId = String(accordionHeading).replace(/\s/g, '-');
-        return removeTemplateWhitespace(renderToStaticMarkup(React.createElement(Accordion, { asDefinitionList: true },
-            React.createElement(AccordionItem, null,
-                React.createElement(AccordionToggle, { isExpanded: false, id: `${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}` }, accordionHeading),
-                React.createElement(AccordionContent, { id: `${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`, isHidden: !false }, accordionContent)))));
+        return removeTemplateWhitespace(renderToStaticMarkup(React.createElement(React.Fragment, null,
+            React.createElement(Accordion, { asDefinitionList: true },
+                React.createElement(AccordionItem, { isExpanded: false },
+                    React.createElement(AccordionToggle, { id: `${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}` }, accordionHeading),
+                    React.createElement(AccordionContent, { id: `${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}` }, accordionContent))))));
     },
 }), []);
 
@@ -1539,9 +1533,9 @@ const AccordionShowdownHandler = ({ buttonElement, contentElement, }) => {
     const [expanded, setExpanded] = React.useState(false);
     const handleClick = () => {
         const expandedModifier = 'pf-m-expanded';
-        buttonElement.className = `pf-v5-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
+        buttonElement.className = `pf-v6-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
         contentElement.hidden = expanded;
-        contentElement.className = `pf-v5-c-accordion__expanded-content ${!expanded ? expandedModifier : ''}`;
+        contentElement.className = `pf-v6-c-accordion__expanded-content ${!expanded ? expandedModifier : ''}`;
         setExpanded(!expanded);
     };
     useEventListener(buttonElement, 'click', handleClick);
@@ -1592,8 +1586,8 @@ const GenericStatus = (props) => {
     return React.Children.toArray(children).length ? (React.createElement(PopoverStatus, Object.assign({ title: popoverTitle || title }, restProps, { statusBody: statusBody }), children)) : (statusBody);
 };
 
-const GreenCheckCircleIcon = ({ className, title, size }) => (React.createElement(Icon, { size: size },
-    React.createElement(CheckCircleIcon, { "data-test": "success-icon", color: okColor.value, className: className, title: title })));
+const GreenCheckCircleIcon = ({ className, title, size }) => (React.createElement(Icon, { size: size, status: "success" },
+    React.createElement(CheckCircleIcon, { "data-test": "success-icon", className: className, title: title })));
 
 const SuccessStatus = (props) => (React.createElement(GenericStatus, Object.assign({}, props, { Icon: GreenCheckCircleIcon, title: props.title || 'Healthy' })));
 SuccessStatus.displayName = 'SuccessStatus';
@@ -1668,35 +1662,33 @@ const statusColorMap = {
     [QuickStartStatus.IN_PROGRESS]: 'purple',
     [QuickStartStatus.NOT_STARTED]: 'grey',
 };
-const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, action, }) => {
+const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, }) => {
     const { getResource } = React.useContext(QuickStartContext);
     const statusLocaleMap = {
         [QuickStartStatus.COMPLETE]: getResource('Complete'),
         [QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
         [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
     };
-    const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon;
     return (React.createElement("div", { className: "pfext-quick-start-tile-header" },
-        React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
-            React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
-                React.createElement(QuickStartMarkdownView, { content: name })),
-            action && (React.createElement(Button, Object.assign({ "aria-label": action['aria-label'], icon: React.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps)))),
+        React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
+            React.createElement(QuickStartMarkdownView, { content: 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))),
             status !== QuickStartStatus.NOT_STARTED && (React.createElement(Label, { variant: "outline", color: statusColorMap[status], icon: React.createElement(StatusIcon, { status: status }), "data-test": "status" }, statusLocaleMap[status])))));
 };
 
-const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, action, }) => {
+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);
     let quickStartIcon;
     if (typeof icon === 'object') {
-        quickStartIcon = icon;
+        quickStartIcon = React.createElement(Icon, { size: "xl" }, icon);
     }
     else {
-        quickStartIcon = (React.createElement(FallbackImg, { className: "pfext-catalog-item-icon__img--large", src: icon, alt: "", fallback: React.createElement(RocketIcon, null) }));
+        quickStartIcon = (React.createElement(Icon, { size: "xl" },
+            React.createElement(FallbackImg, { className: "pfext-catalog-item-icon__img--large", src: icon, alt: "", fallback: React.createElement(RocketIcon, null) })));
     }
     const footerComponent = React.useMemo(() => {
         if (footer && footer.show === false) {
@@ -1710,31 +1702,26 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, act
     const handleClick = (e) => {
         var _a;
         if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
-            if (!link) {
+            if (link) {
+                window.open(link.href);
+            }
+            else {
                 setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
             }
             onClick();
         }
     };
-    const linkProps = link
-        ? {
-            href: link.href,
-            target: '_blank',
-            rel: 'noreferrer',
-        }
-        : {};
-    return (React.createElement("div", { ref: ref, onClick: handleClick },
-        React.createElement(CatalogTile, Object.assign({ id: id + '-catalog-tile', style: {
+    return (React.createElement("div", { ref: ref },
+        React.createElement(CatalogTile, { id: id + '-catalog-tile', 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, quickStartId: id, action: action }), onKeyDown: (event) => {
+            }, 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, onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
                     onClick();
                 }
-            } }, linkProps, { "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent, tabIndex: 0, 
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore-next-line
-            isSelectableRaised: true }))));
+            }, 
+            // https://github.com/patternfly/patternfly-react/issues/7039
+            href: link === null || link === void 0 ? void 0 : link.href, "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent, tabIndex: 0 })));
 };
 
 const QuickStartCatalog = ({ quickStarts }) => {
@@ -1765,7 +1752,7 @@ const QuickStartCatalogFilterSelect = (_a) => {
 };
 const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
     const { getResource } = React.useContext(QuickStartContext);
-    return (React.createElement(ToolbarItem, { className: "pfext-quick-start-catalog-filter__count", align: { default: 'alignRight' } }, getResource('{{count, number}} item', quickStartsCount).replace('{{count, number}}', quickStartsCount)));
+    return (React.createElement(ToolbarItem, { className: "pfext-quick-start-catalog-filter__count", align: { default: 'alignEnd' } }, getResource('{{count, number}} item', quickStartsCount).replace('{{count, number}}', quickStartsCount)));
 };
 const QuickStartCatalogFilterSearchWrapper = ({ onSearchInputChange = () => { } }) => {
     const { useQueryParams, filter, setFilter } = React.useContext(QuickStartContext);
@@ -1864,8 +1851,7 @@ const QuickStartCatalogFilter = (_a) => {
 
 const QuickStartCatalogEmptyState = ({ clearFilters }) => {
     const { getResource } = React.useContext(QuickStartContext);
-    return (React.createElement(EmptyState, null,
-        React.createElement(EmptyStateHeader, { titleText: React.createElement(React.Fragment, null, getResource('No results found')), icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }), headingLevel: "h4" }),
+    return (React.createElement(EmptyState, { headingLevel: "h4", icon: SearchIcon, titleText: React.createElement(React.Fragment, null, getResource('No results found')) },
         React.createElement(EmptyStateBody, null, getResource('No results match the filter criteria. Remove filters or clear all filters to show results.')),
         React.createElement(EmptyStateFooter, null,
             React.createElement(EmptyStateActions, null,
@@ -1960,28 +1946,6 @@ const QuickStartCloseModal = ({ isOpen, onConfirm, onCancel, }) => {
                 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 { getResource } = React.useContext(QuickStartContext);
-    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(Icon, { size: "md" },
-            React.createElement(CheckCircleIcon, { className: "pfext-quick-start-task-header__task-icon-success" }),
-            ' '));
-    }
-    else if (failed) {
-        content = (React.createElement(Icon, { size: "md" },
-            React.createElement(ExclamationCircleIcon, { 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, children, }) => {
     const titleRef = React.useRef(null);
     React.useEffect(() => {
@@ -1990,7 +1954,7 @@ const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, is
             titleRef.current.parentNode.focus();
         }
     }, [isActiveTask]);
-    const classNames = css('pfext-quick-start-task-header__title', {
+    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 || QuickStartTaskStatus.VISITED),
     });
@@ -2002,18 +1966,17 @@ const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, is
     const tryAgain = failedReview && (React.createElement(React.Fragment, null,
         React.createElement("div", null),
         React.createElement("div", { className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
-    const content = (React.createElement("div", { className: "pfext-quick-start-task-header", ref: titleRef },
-        React.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
-        React.createElement(Title, { headingLevel: "h3", size: size, className: classNames },
+    const content = (React.createElement("div", { ref: titleRef },
+        React.createElement(Title, { headingLevel: "h3" },
             React.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
-            isActiveTask && subtitle && (React.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" },
+            isActiveTask && subtitle && (React.createElement("span", { "data-test-id": "quick-start-task-subtitle" },
                 ' ',
-                subtitle))),
-        tryAgain));
+                React.createElement(Text, { component: TextVariants.small }, subtitle))),
+            tryAgain)));
     return (React.createElement(WizardNavItem, { content: content, stepIndex: taskIndex, onClick: () => onTaskSelect(taskIndex - 1), component: "button", isCurrent: isActiveTask }, children));
 };
 
-const QuickStartTaskHeaderList = ({ tasks, allTaskStatuses, onTaskSelect, }) => 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 QuickStartTaskHeaderList = ({ tasks, allTaskStatuses, onTaskSelect, }) => tasks.length > 0 ? (React.createElement(List, { className: "pf-v6-c-wizard__nav-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, nextQuickStarts, onQuickStartChange, onTaskSelect, }) => {
     const hasFailedTask = allTaskStatuses.includes(QuickStartTaskStatus.FAILED);
@@ -2031,7 +1994,7 @@ const QuickStartConclusion = ({ tasks, conclusion, allTaskStatuses, nextQuickSta
                 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-v5-global--spacer--xs)', verticalAlign: 'middle' } })));
+                    React.createElement(ArrowRightIcon, { style: { marginLeft: 'var(--pf-t--global--spacer--xs)', verticalAlign: 'middle' } })));
             })));
 };
 
@@ -2046,7 +2009,7 @@ const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequi
     return (React.createElement(React.Fragment, null,
         React.createElement(QuickStartMarkdownView, { content: introduction }),
         prereqList,
-        React.createElement("p", { style: { marginBottom: 'var(--pf-v5-global--spacer--md)' } },
+        React.createElement("p", { style: { marginBottom: 'var(--pf-t--global--spacer--md)' } },
             getResource('In this quick start, you will complete {{count, number}} task', tasks.length).replace('{{count, number}}', tasks.length),
             ":"),
         React.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect })));
@@ -2157,7 +2120,7 @@ const QuickStartController = ({ quickStart, nextQuickStarts, contentRef, footerC
     const getQuickStartActiveTask = React.useCallback(() => {
         let activeTaskNumber = 0;
         while (activeTaskNumber !== totalTasks &&
-            activeQuickStartState[`taskStatus${activeTaskNumber}`] === QuickStartTaskStatus.SUCCESS) {
+            activeQuickStartState[`taskStatus${activeTaskNumber}`] !== QuickStartTaskStatus.INIT) {
             activeTaskNumber++;
         }
         return activeTaskNumber;
@@ -2233,7 +2196,7 @@ const QuickStartPanelContent = (_a) => {
         React.createElement("div", { className: headerClasses },
             React.createElement(DrawerHead, null,
                 React.createElement("div", { className: "pfext-quick-start-panel-content__title", tabIndex: -1, ref: titleRef },
-                    React.createElement(Title, { headingLevel: "h2", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-v5-global--spacer--md)' } },
+                    React.createElement(Title, { headingLevel: "h2", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-t--global--spacer--md)' } },
                         React.createElement("span", { dangerouslySetInnerHTML: {
                                 __html: removeParagraphWrap(markdownConvert(quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName)),
                             } }),
@@ -2347,7 +2310,7 @@ const QuickStartDrawer = (_a) => {
     const panelContent = (React.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth, headerVariant: useLegacyHeaderColors ? '' : 'blue-white' }, 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, { className: "pfext-quick-start-drawer__body" }, children))) : (React.createElement("div", { className: "pf-v5-c-drawer__main" }, panelContent))),
+            React.createElement(DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React.createElement("div", { className: "pf-v6-c-drawer__main" }, panelContent))),
         React.createElement(QuickStartCloseModal, { isOpen: modalOpen, onConfirm: onModalConfirm, onCancel: onModalCancel })));
 };
 
@@ -2415,7 +2378,7 @@ const HelpTopicPanelContent = (_a) => {
                 React.createElement("div", { className: "pfext-quick-start-panel-content__title" },
                     helpTopicOptions && (React.createElement(Select, { isPlain: true, id: "help-topics-select", selected: activeHelpTopic, isOpen: isHelpTopicMenuOpen, onSelect: onSelectHelpTopic, onOpenChange: (isOpen) => setIsHelpTopicMenuOpen(isOpen), toggle: (toggleRef) => (React.createElement(MenuToggle, { isFullWidth: true, ref: toggleRef, icon: React.createElement(BarsIcon, null), onClick: toggleHelpTopicMenu, isExpanded: isHelpTopicMenuOpen }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)) },
                         React.createElement(SelectList, null, helpTopicOptions))),
-                    React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-v5-global--spacer--md)' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)),
+                    React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-t--global--spacer--md)' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)),
                 React.createElement(DrawerActions, null,
                     React.createElement(DrawerCloseButton, { onClick: onClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))),
             React.createElement(Divider, null),
@@ -2451,7 +2414,7 @@ const HelpTopicDrawer = (_a) => {
     const panelContent = (React.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics, onClose: onClose }));
     return (React.createElement(React.Fragment, null,
         React.createElement(Drawer, Object.assign({ isExpanded: !!activeHelpTopic, isInline: true }, props), children ? (React.createElement(DrawerContent, { panelContent: panelContent },
-            React.createElement(DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React.createElement("div", { className: "pf-v5-c-drawer__main" }, panelContent)))));
+            React.createElement(DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React.createElement("div", { className: "pf-v6-c-drawer__main" }, panelContent)))));
 };
 
 const useLocalStorage = (key, initialValue) => {