@patternfly/quickstarts 2.3.0 → 2.3.2

package/dist/quickstarts-full.es.js

@@ -9675,7 +9675,7 @@ const QuickStartContextDefaults = {
     activeQuickStartState: {},
     setAllQuickStarts: () => { },
     resourceBundle: en,
-    getResource: () => '',
+    getResource: (resource) => resource,
     language: 'en',
     useQueryParams: true,
     filter: {
@@ -9701,7 +9701,7 @@ const getResource = (resource, options, resourceBundle, lng) => {
             return resourceBundle[`${resource}_${suffix}`];
         }
     }
-    return (resourceBundle && resourceBundle[resource]) || '';
+    return (resourceBundle && resourceBundle[resource]) || resource;
 };
 const useValuesForQuickStartContext = (value = {}) => {
     var _a, _b;
@@ -10532,12 +10532,13 @@ const CopyClipboard = ({ element, rootSelector, docContext, }) => {
     const { getResource } = React.useContext(QuickStartContext);
     const [showSuccessContent, setShowSuccessContent] = React.useState(false);
     const textToCopy = React.useMemo(() => {
+        var _a;
         const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
-        return docContext.querySelector(`${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`).innerText;
+        return (_a = docContext.querySelector(`${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`)) === null || _a === void 0 ? void 0 : _a.innerText;
     }, [element, docContext, rootSelector]);
     useEventListener(element, 'click', React.useCallback(() => {
         navigator.clipboard
-            .writeText(textToCopy)
+            .writeText(textToCopy.trim())
             .then(() => {
             setShowSuccessContent(true);
         })
@@ -14718,16 +14719,16 @@ const useInlineCopyClipboardShowdownExtension = () => {
     const { getResource } = React.useContext(QuickStartContext);
     return React.useMemo(() => ({
         type: 'lang',
-        regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
-        replace: (text, group, subGroup, groupType, groupId) => {
-            if (!group || !subGroup || !groupType || !groupId) {
+        regex: /`([^`](.*?)[^`])`{{copy}}/g,
+        replace: (text, group, _, groupId) => {
+            if (!group || isNaN(groupId)) {
                 return text;
             }
             return removeTemplateWhitespace(`<span class="pf-c-clipboard-copy pf-m-inline">
-              <span class="pf-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupType}">${group}</span>
+              <span class="pf-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupId}">${group}</span>
               <span class="pf-c-clipboard-copy__actions">
                 <span class="pf-c-clipboard-copy__actions-item">
-                  <button class="pf-c-button pf-m-plain" aria-label="${getResource('Copy to clipboard')}" ${MARKDOWN_COPY_BUTTON_ID}="${groupType}">
+                  <button class="pf-c-button pf-m-plain" aria-label="${getResource('Copy to clipboard')}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
                     ${server.renderToStaticMarkup(React.createElement(CopyIcon, null))}
                   </button>
                 </span>
@@ -14741,16 +14742,16 @@ const useMultilineCopyClipboardShowdownExtension = () => {
     const { getResource } = React.useContext(QuickStartContext);
     return React.useMemo(() => ({
         type: 'lang',
-        regex: /```[\n]((.*?\n)+)```{{copy}}/g,
-        replace: (text, group, subgroup, groupType, groupId) => {
-            if (!group || !subgroup || !groupType || !groupId) {
+        regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
+        replace: (text, group, _1, _2, groupId) => {
+            if (!group || isNaN(groupId)) {
                 return text;
             }
             return `<div class="pf-c-code-block">
               <div class="pf-c-code-block__header">
                 <div class="pf-c-code-block__actions">
                   <div class="pf-c-code-block__actions-item">
-                    <button class="pf-c-button pf-m-plain" type="button" aria-label="${getResource('Copy to clipboard')}" ${MARKDOWN_COPY_BUTTON_ID}="${groupType}">
+                    <button class="pf-c-button pf-m-plain" type="button" aria-label="${getResource('Copy to clipboard')}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
                       ${server.renderToStaticMarkup(React.createElement(CopyIcon, null))}
                     </button>
                   </div>
@@ -14759,7 +14760,7 @@ const useMultilineCopyClipboardShowdownExtension = () => {
               <div class="pf-c-code-block__content">
                 <pre class="pf-c-code-block__pre pfext-code-block__pre">
                   <code class="pf-c-code-block__code" 
-                    ${MARKDOWN_SNIPPET_ID}="${groupType}">${group}</code>
+                    ${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code>
                 </pre>
               </div>
             </div>`;
@@ -14799,192 +14800,6 @@ exports["default"] = exports.FireIcon;
 
 var FireIcon = /*@__PURE__*/getDefaultExportFromCjs(fireIcon);
 
-var AdmonitionType;
-(function (AdmonitionType) {
-    AdmonitionType["TIP"] = "TIP";
-    AdmonitionType["NOTE"] = "NOTE";
-    AdmonitionType["IMPORTANT"] = "IMPORTANT";
-    AdmonitionType["WARNING"] = "WARNING";
-    AdmonitionType["CAUTION"] = "CAUTION";
-})(AdmonitionType || (AdmonitionType = {}));
-const admonitionToAlertVariantMap = {
-    [AdmonitionType.NOTE]: { variant: 'info' },
-    [AdmonitionType.TIP]: { variant: 'default', customIcon: React.createElement(LightbulbIcon, null) },
-    [AdmonitionType.IMPORTANT]: { variant: 'danger' },
-    [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: React.createElement(FireIcon, null) },
-    [AdmonitionType.WARNING]: { variant: 'warning' },
-};
-const useAdmonitionShowdownExtension = () => {
-    // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-    return React.useMemo(() => ({
-        type: 'lang',
-        regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,
-        replace: (text, content, admonitionLabel, admonitionType, groupId) => {
-            if (!content || !admonitionLabel || !admonitionType || !groupId) {
-                return text;
-            }
-            admonitionType = admonitionType.toUpperCase();
-            const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
-            const style = admonitionType === AdmonitionType.CAUTION ? { backgroundColor: '#ec7a0915' } : {};
-            const pfAlert = (React.createElement(Alert, { variant: variant, customIcon: customIcon && customIcon, isInline: true, title: admonitionType, className: "pfext-markdown-admonition", style: style }, content));
-            return removeTemplateWhitespace(server.renderToStaticMarkup(pfAlert));
-        },
-    }), []);
-};
-
-const useCodeShowdownExtension = () => {
-    return React.useMemo(() => ({
-        type: 'output',
-        regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
-        replace: (text, content) => {
-            if (!content) {
-                return text;
-            }
-            const pfCodeBlock = React.createElement(CodeBlock, null, content);
-            return removeTemplateWhitespace(server.renderToStaticMarkup(pfCodeBlock));
-        },
-    }), []);
-};
-
-const FallbackImg = ({ src, alt, className, fallback }) => {
-    const [isSrcValid, setIsSrcValid] = React.useState(true);
-    if (src && isSrcValid) {
-        return React.createElement("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
-    }
-    return React.createElement(React.Fragment, null, fallback);
-};
-
-var syncAltIcon = createCommonjsModule(function (module, exports) {
-exports.__esModule = true;
-exports.SyncAltIconConfig = {
-  name: 'SyncAltIcon',
-  height: 512,
-  width: 512,
-  svgPath: 'M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z',
-  yOffset: 0,
-  xOffset: 0,
-};
-exports.SyncAltIcon = createIcon_1.createIcon(exports.SyncAltIconConfig);
-exports["default"] = exports.SyncAltIcon;
-});
-
-var SyncAltIcon = /*@__PURE__*/getDefaultExportFromCjs(syncAltIcon);
-
-const DASH = '-';
-
-const PopoverStatus = ({ hideHeader, children, isVisible = null, shouldClose = null, statusBody, title, onHide, onShow, }) => {
-    return (React.createElement(Popover, { position: PopoverPosition.right, headerContent: hideHeader ? null : title, bodyContent: children, "aria-label": title, onHide: onHide, onShow: onShow, isVisible: isVisible, shouldClose: shouldClose },
-        React.createElement(Button$1, { variant: "link", isInline: true }, statusBody)));
-};
-
-const StatusIconAndText = ({ icon, title, spin, iconOnly, noTooltip, className, }) => {
-    if (!title) {
-        return React.createElement(React.Fragment, null, DASH);
-    }
-    return (React.createElement("span", { className: css('pfext-icon-and-text', className), title: iconOnly && !noTooltip ? title : undefined },
-        icon &&
-            React.cloneElement(icon, {
-                className: css(spin && 'fa-spin', icon.props.className, !iconOnly && 'pfext-icon-and-text__icon pfext-icon-flex-child'),
-            }),
-        !iconOnly && React.createElement(CamelCaseWrap, { value: title, dataTest: "status-text" })));
-};
-
-const GenericStatus = (props) => {
-    const { Icon, children, popoverTitle, title, noTooltip, iconOnly } = props, restProps = __rest$1(props, ["Icon", "children", "popoverTitle", "title", "noTooltip", "iconOnly"]);
-    const renderIcon = iconOnly && !noTooltip ? React.createElement(Icon, { title: title }) : React.createElement(Icon, null);
-    const statusBody = (React.createElement(StatusIconAndText, Object.assign({}, restProps, { noTooltip: noTooltip, title: title, iconOnly: iconOnly, icon: renderIcon })));
-    return React.Children.toArray(children).length ? (React.createElement(PopoverStatus, Object.assign({ title: popoverTitle || title }, restProps, { statusBody: statusBody }), children)) : (statusBody);
-};
-
-var checkCircleIcon = createCommonjsModule(function (module, exports) {
-exports.__esModule = true;
-exports.CheckCircleIconConfig = {
-  name: 'CheckCircleIcon',
-  height: 512,
-  width: 512,
-  svgPath: 'M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z',
-  yOffset: 0,
-  xOffset: 0,
-};
-exports.CheckCircleIcon = createIcon_1.createIcon(exports.CheckCircleIconConfig);
-exports["default"] = exports.CheckCircleIcon;
-});
-
-var CheckCircleIcon = /*@__PURE__*/getDefaultExportFromCjs(checkCircleIcon);
-
-var exclamationCircleIcon = createCommonjsModule(function (module, exports) {
-exports.__esModule = true;
-exports.ExclamationCircleIconConfig = {
-  name: 'ExclamationCircleIcon',
-  height: 512,
-  width: 512,
-  svgPath: 'M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z',
-  yOffset: 0,
-  xOffset: 0,
-};
-exports.ExclamationCircleIcon = createIcon_1.createIcon(exports.ExclamationCircleIconConfig);
-exports["default"] = exports.ExclamationCircleIcon;
-});
-
-var ExclamationCircleIcon = /*@__PURE__*/getDefaultExportFromCjs(exclamationCircleIcon);
-
-var infoCircleIcon = createCommonjsModule(function (module, exports) {
-exports.__esModule = true;
-exports.InfoCircleIconConfig = {
-  name: 'InfoCircleIcon',
-  height: 512,
-  width: 512,
-  svgPath: 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z',
-  yOffset: 0,
-  xOffset: 0,
-};
-exports.InfoCircleIcon = createIcon_1.createIcon(exports.InfoCircleIconConfig);
-exports["default"] = exports.InfoCircleIcon;
-});
-
-var InfoCircleIcon = /*@__PURE__*/getDefaultExportFromCjs(infoCircleIcon);
-
-var global_palette_green_500 = createCommonjsModule(function (module, exports) {
-exports.__esModule = true;
-exports.global_palette_green_500 = {
-  "name": "--pf-global--palette--green-500",
-  "value": "#3e8635",
-  "var": "var(--pf-global--palette--green-500)"
-};
-exports["default"] = exports.global_palette_green_500;
-});
-
-// import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
-const GreenCheckCircleIcon = ({ className, title, size }) => (React.createElement(CheckCircleIcon, { "data-test": "success-icon", size: size, color: global_palette_green_500.global_palette_green_500.value, className: className, title: title }));
-
-// export const PendingStatus: React.FC<StatusComponentProps> = (props) => (
-//   <GenericStatus {...props} Icon={HourglassHalfIcon} title={props.title || 'Pending'} />
-// );
-// PendingStatus.displayName = 'PendingStatus';
-// export const ProgressStatus: React.FC<StatusComponentProps> = (props) => (
-//   <GenericStatus {...props} Icon={InProgressIcon} title={props.title || 'In progress'} />
-// );
-// ProgressStatus.displayName = 'ProgressStatus';
-const SuccessStatus = (props) => (React.createElement(GenericStatus, Object.assign({}, props, { Icon: GreenCheckCircleIcon, title: props.title || 'Healthy' })));
-SuccessStatus.displayName = 'SuccessStatus';
-// export const WarningStatus: React.FC<StatusComponentProps> = (props) => (
-//   <GenericStatus {...props} Icon={YellowExclamationTriangleIcon} title={props.title || 'Warning'} />
-// );
-// WarningStatus.displayName = 'WarningStatus';
-
-const Status = ({ status, title, iconOnly, noTooltip, className, }) => {
-    const statusProps = { title: title || status, iconOnly, noTooltip, className };
-    switch (status) {
-        case 'In Progress':
-            return React.createElement(StatusIconAndText, Object.assign({}, statusProps, { icon: React.createElement(SyncAltIcon, null) }));
-        case 'Complete':
-            return React.createElement(SuccessStatus, Object.assign({}, statusProps));
-        default:
-            return React.createElement(React.Fragment, null, status || DASH);
-    }
-};
-const StatusIcon = ({ status }) => (React.createElement(Status, { status: status, iconOnly: true }));
-
 var showdown = createCommonjsModule(function (module) {
 (function(){
 /**
@@ -19615,6 +19430,193 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
                 markdown.renderExtension(docContext, rootSelector))), className: className }));
 };
 
+var AdmonitionType;
+(function (AdmonitionType) {
+    AdmonitionType["TIP"] = "TIP";
+    AdmonitionType["NOTE"] = "NOTE";
+    AdmonitionType["IMPORTANT"] = "IMPORTANT";
+    AdmonitionType["WARNING"] = "WARNING";
+    AdmonitionType["CAUTION"] = "CAUTION";
+})(AdmonitionType || (AdmonitionType = {}));
+const admonitionToAlertVariantMap = {
+    [AdmonitionType.NOTE]: { variant: 'info' },
+    [AdmonitionType.TIP]: { variant: 'default', customIcon: React.createElement(LightbulbIcon, null) },
+    [AdmonitionType.IMPORTANT]: { variant: 'danger' },
+    [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: React.createElement(FireIcon, null) },
+    [AdmonitionType.WARNING]: { variant: 'warning' },
+};
+const useAdmonitionShowdownExtension = () => {
+    // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+    return React.useMemo(() => ({
+        type: 'lang',
+        regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,
+        replace: (text, content, admonitionLabel, admonitionType, groupId) => {
+            if (!content || !admonitionLabel || !admonitionType || !groupId) {
+                return text;
+            }
+            admonitionType = admonitionType.toUpperCase();
+            const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
+            const style = admonitionType === AdmonitionType.CAUTION ? { backgroundColor: '#ec7a0915' } : {};
+            const mdContent = React.createElement(QuickStartMarkdownView, { content: content });
+            const pfAlert = (React.createElement(Alert, { variant: variant, customIcon: customIcon && customIcon, isInline: true, title: admonitionType, className: "pfext-markdown-admonition", style: style }, mdContent));
+            return removeTemplateWhitespace(server.renderToStaticMarkup(pfAlert));
+        },
+    }), []);
+};
+
+const useCodeShowdownExtension = () => {
+    return React.useMemo(() => ({
+        type: 'output',
+        regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
+        replace: (text, content) => {
+            if (!content) {
+                return text;
+            }
+            const pfCodeBlock = React.createElement(CodeBlock, null, content);
+            return removeTemplateWhitespace(server.renderToStaticMarkup(pfCodeBlock));
+        },
+    }), []);
+};
+
+const FallbackImg = ({ src, alt, className, fallback }) => {
+    const [isSrcValid, setIsSrcValid] = React.useState(true);
+    if (src && isSrcValid) {
+        return React.createElement("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
+    }
+    return React.createElement(React.Fragment, null, fallback);
+};
+
+var syncAltIcon = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.SyncAltIconConfig = {
+  name: 'SyncAltIcon',
+  height: 512,
+  width: 512,
+  svgPath: 'M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z',
+  yOffset: 0,
+  xOffset: 0,
+};
+exports.SyncAltIcon = createIcon_1.createIcon(exports.SyncAltIconConfig);
+exports["default"] = exports.SyncAltIcon;
+});
+
+var SyncAltIcon = /*@__PURE__*/getDefaultExportFromCjs(syncAltIcon);
+
+const DASH = '-';
+
+const PopoverStatus = ({ hideHeader, children, isVisible = null, shouldClose = null, statusBody, title, onHide, onShow, }) => {
+    return (React.createElement(Popover, { position: PopoverPosition.right, headerContent: hideHeader ? null : title, bodyContent: children, "aria-label": title, onHide: onHide, onShow: onShow, isVisible: isVisible, shouldClose: shouldClose },
+        React.createElement(Button$1, { variant: "link", isInline: true }, statusBody)));
+};
+
+const StatusIconAndText = ({ icon, title, spin, iconOnly, noTooltip, className, }) => {
+    if (!title) {
+        return React.createElement(React.Fragment, null, DASH);
+    }
+    return (React.createElement("span", { className: css('pfext-icon-and-text', className), title: iconOnly && !noTooltip ? title : undefined },
+        icon &&
+            React.cloneElement(icon, {
+                className: css(spin && 'fa-spin', icon.props.className, !iconOnly && 'pfext-icon-and-text__icon pfext-icon-flex-child'),
+            }),
+        !iconOnly && React.createElement(CamelCaseWrap, { value: title, dataTest: "status-text" })));
+};
+
+const GenericStatus = (props) => {
+    const { Icon, children, popoverTitle, title, noTooltip, iconOnly } = props, restProps = __rest$1(props, ["Icon", "children", "popoverTitle", "title", "noTooltip", "iconOnly"]);
+    const renderIcon = iconOnly && !noTooltip ? React.createElement(Icon, { title: title }) : React.createElement(Icon, null);
+    const statusBody = (React.createElement(StatusIconAndText, Object.assign({}, restProps, { noTooltip: noTooltip, title: title, iconOnly: iconOnly, icon: renderIcon })));
+    return React.Children.toArray(children).length ? (React.createElement(PopoverStatus, Object.assign({ title: popoverTitle || title }, restProps, { statusBody: statusBody }), children)) : (statusBody);
+};
+
+var checkCircleIcon = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.CheckCircleIconConfig = {
+  name: 'CheckCircleIcon',
+  height: 512,
+  width: 512,
+  svgPath: 'M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z',
+  yOffset: 0,
+  xOffset: 0,
+};
+exports.CheckCircleIcon = createIcon_1.createIcon(exports.CheckCircleIconConfig);
+exports["default"] = exports.CheckCircleIcon;
+});
+
+var CheckCircleIcon = /*@__PURE__*/getDefaultExportFromCjs(checkCircleIcon);
+
+var exclamationCircleIcon = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.ExclamationCircleIconConfig = {
+  name: 'ExclamationCircleIcon',
+  height: 512,
+  width: 512,
+  svgPath: 'M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z',
+  yOffset: 0,
+  xOffset: 0,
+};
+exports.ExclamationCircleIcon = createIcon_1.createIcon(exports.ExclamationCircleIconConfig);
+exports["default"] = exports.ExclamationCircleIcon;
+});
+
+var ExclamationCircleIcon = /*@__PURE__*/getDefaultExportFromCjs(exclamationCircleIcon);
+
+var infoCircleIcon = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.InfoCircleIconConfig = {
+  name: 'InfoCircleIcon',
+  height: 512,
+  width: 512,
+  svgPath: 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z',
+  yOffset: 0,
+  xOffset: 0,
+};
+exports.InfoCircleIcon = createIcon_1.createIcon(exports.InfoCircleIconConfig);
+exports["default"] = exports.InfoCircleIcon;
+});
+
+var InfoCircleIcon = /*@__PURE__*/getDefaultExportFromCjs(infoCircleIcon);
+
+var global_palette_green_500 = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.global_palette_green_500 = {
+  "name": "--pf-global--palette--green-500",
+  "value": "#3e8635",
+  "var": "var(--pf-global--palette--green-500)"
+};
+exports["default"] = exports.global_palette_green_500;
+});
+
+// import { global_warning_color_100 as warningColor } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
+const GreenCheckCircleIcon = ({ className, title, size }) => (React.createElement(CheckCircleIcon, { "data-test": "success-icon", size: size, color: global_palette_green_500.global_palette_green_500.value, className: className, title: title }));
+
+// export const PendingStatus: React.FC<StatusComponentProps> = (props) => (
+//   <GenericStatus {...props} Icon={HourglassHalfIcon} title={props.title || 'Pending'} />
+// );
+// PendingStatus.displayName = 'PendingStatus';
+// export const ProgressStatus: React.FC<StatusComponentProps> = (props) => (
+//   <GenericStatus {...props} Icon={InProgressIcon} title={props.title || 'In progress'} />
+// );
+// ProgressStatus.displayName = 'ProgressStatus';
+const SuccessStatus = (props) => (React.createElement(GenericStatus, Object.assign({}, props, { Icon: GreenCheckCircleIcon, title: props.title || 'Healthy' })));
+SuccessStatus.displayName = 'SuccessStatus';
+// export const WarningStatus: React.FC<StatusComponentProps> = (props) => (
+//   <GenericStatus {...props} Icon={YellowExclamationTriangleIcon} title={props.title || 'Warning'} />
+// );
+// WarningStatus.displayName = 'WarningStatus';
+
+const Status = ({ status, title, iconOnly, noTooltip, className, }) => {
+    const statusProps = { title: title || status, iconOnly, noTooltip, className };
+    switch (status) {
+        case 'In Progress':
+            return React.createElement(StatusIconAndText, Object.assign({}, statusProps, { icon: React.createElement(SyncAltIcon, null) }));
+        case 'Complete':
+            return React.createElement(SuccessStatus, Object.assign({}, statusProps));
+        default:
+            return React.createElement(React.Fragment, null, status || DASH);
+    }
+};
+const StatusIcon = ({ status }) => (React.createElement(Status, { status: status, iconOnly: true }));
+
 const QuickStartTileDescription = ({ description, prerequisites, }) => {
     const { getResource } = React.useContext(QuickStartContext);
     const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
@@ -19750,9 +19752,14 @@ 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, quickStartId: id }), onClick: handleClick, 
+            }, 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();
+                }
+            }, 
             // https://github.com/patternfly/patternfly-react/issues/7039
-            href: "#", "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent })));
+            href: "#", "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent, tabIndex: 0 })));
 };
 
 const QuickStartCatalog = ({ quickStarts }) => {
@@ -20011,6 +20018,13 @@ const TaskIcon = ({ taskIndex, taskStatus }) => {
     return React.createElement("span", { className: classNames }, content);
 };
 const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, children, }) => {
+    const titleRef = React.useRef(null);
+    React.useEffect(() => {
+        if (isActiveTask) {
+            // Focus the WizardNavItem button element that contains the title
+            titleRef.current.parentNode.focus();
+        }
+    }, [isActiveTask]);
     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 || QuickStartTaskStatus.VISITED),
@@ -20023,7 +20037,7 @@ 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" },
+    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 },
             React.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
@@ -20230,6 +20244,7 @@ const useScrollTopOnTaskNumberChange = (node, taskNumber) => {
 };
 const QuickStartPanelContent = (_a) => {
     var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, headerVariant = '' } = _a, props = __rest$1(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
+    const titleRef = React.useRef(null);
     const { getResource, activeQuickStartState } = React.useContext(QuickStartContext);
     const [contentRef, setContentRef] = React.useState();
     const shadows = useScrollShadows(contentRef);
@@ -20254,10 +20269,15 @@ const QuickStartPanelContent = (_a) => {
         }
         return Number.parseInt(taskNumber, 10) + 1;
     };
+    React.useEffect(() => {
+        if (quickStart) {
+            titleRef.current.focus();
+        }
+    }, [quickStart]);
     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" },
+                React.createElement("div", { className: "pfext-quick-start-panel-content__title", tabIndex: -1, ref: titleRef },
                     React.createElement(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,
                         ' ',