@patternfly/quickstarts 2.2.0 → 2.2.3

package/README.md

@@ -262,12 +262,21 @@ The quickstarts package is being extended to support a side panel that displays
 ### Help Topic type definition
 
 ```ts
+type HelpTopicLink = {
+  href: string;
+  text?: string;
+  // open link in new tab
+  newTab?: boolean;
+  // add PF icon indicating link is external
+  isExternal?: boolean;
+};
+
 type HelpTopic = {
-  name: string; // unique identifier
-  title: string; // displayed in header of side panel
-  tags: string[]; // metadata to filter/add relationships between HelpTopics and some piece of data in your application
-  content: string; // main content of topic, supports markdown
-  links: string[]; // list of related information, use markdown link syntax
+  name: string;
+  title: string;
+  tags: string[];
+  content: string;
+  links: HelpTopicLink[];
 };
 ```
 
@@ -283,21 +292,12 @@ type HelpTopic = {
 
     Etiam viverra et tortor et maximus. Aliquam quis scelerisque metus. Proin luctus pretium sodales. Mauris nibh nibh, auctor eu scelerisque et, hendrerit a metus. Vivamus pharetra bibendum finibus. Sed a pulvinar ipsum. Fusce pharetra venenatis porttitor. Praesent justo metus, consectetur quis erat id, congue varius metus. Suspendisse dui est, tempor nec diam quis, facilisis sodales erat. Curabitur viverra convallis ex. Ut egestas condimentum augue, id euismod leo volutpat vitae. Quisque aliquet ac dolor quis pretium. Nunc at nibh quis arcu maximus elementum vel a mi.
   links:
-    - '[Creating quick starts](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)'
-    - '[Redhat Console](https://console.redhat.com/)'
-- name: workspace
-  tags:
-    - page-1
-    - page-2
-    - page-3
-  title: Workspace
-  content: |-
-    **A Workspace** is...
-
-    Fusce nunc risus, vehicula feugiat pellentesque sit amet, pretium non urna. Phasellus nibh mi, ornare quis euismod a, iaculis et eros. Vivamus auctor nunc odio, quis porttitor diam pellentesque nec. In et varius tellus, eget porta urna. Etiam bibendum, est eget mollis lobortis, velit risus efficitur lacus, sed pulvinar sem est vel libero. In sodales placerat tincidunt. Proin vitae risus elit. Ut lobortis ligula est, cursus rhoncus enim scelerisque ac. Donec lacus nisl, tempor porta hendrerit nec, volutpat vitae arcu. Curabitur ornare ullamcorper mi in tincidunt. Aenean efficitur posuere auctor. Pellentesque accumsan mauris vel arcu congue, nec sagittis nisl condimentum. Suspendisse mauris nulla, dignissim at viverra sed, fringilla eu purus.
-  links:
-    - '[Creating quick starts](https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html)'
-    - '[Redhat Console](https://console.redhat.com/)'
+    - text: 'Creating quick starts (external)'
+      href: 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html'
+      isExternal: true
+    - text: 'Redhat Console (opens in new tab)'
+      href: 'https://console.redhat.com'
+      newTab: true
 ```
 
 ### Usage Example
@@ -308,7 +308,7 @@ See the [HelpTopicDemo](https://github.com/patternfly/patternfly-quickstarts/blo
 - Load yaml defined `HelpTopic` array
 - Pass `HelpTopicContainerProps`, including loaded `HelpTopics` to the `<HelpTopicContainer/>`
 
-```ts
+```tsx
 import './App.css';
 import { Page } from '@patternfly/react-core';
 import { LoadingBox, HelpTopicContainerProps, HelpTopicContainer } from '@patternfly/quickstarts';
@@ -359,7 +359,7 @@ In the example above `<HelpTopicContainer />` wraps the `<Page/>` element as wel
 
 Live [preview](https://deploy-preview-140--quickstarts.netlify.app/in-context-help) of code below:
 
-```ts
+```tsx
 import * as React from 'react';
 import {
   Banner,

package/dist/ConsoleShared/src/components/markdown-extensions/code-extension.d.ts

@@ -0,0 +1,7 @@
+import './showdown-extension.scss';
+declare const useCodeShowdownExtension: () => {
+    type: string;
+    regex: RegExp;
+    replace: (text: string, content: string) => string;
+};
+export default useCodeShowdownExtension;

package/dist/ConsoleShared/src/components/markdown-extensions/index.d.ts

@@ -2,3 +2,4 @@ export { default as MarkdownCopyClipboard } from './MarkdownCopyClipboard';
 export { default as useInlineCopyClipboardShowdownExtension } from './inline-clipboard-extension';
 export { default as useMultilineCopyClipboardShowdownExtension } from './multiline-clipboard-extension';
 export { default as useAdmonitionShowdownExtension } from './admonition-extension';
+export { default as useCodeShowdownExtension } from './code-extension';

package/dist/HelpTopicPanelContent.d.ts

@@ -5,6 +5,7 @@ declare type HelpTopicPanelContentProps = {
     activeHelpTopic: HelpTopic;
     filteredHelpTopics?: HelpTopic[];
     isResizable?: boolean;
+    onClose: () => void;
 };
 declare const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps>;
 export default HelpTopicPanelContent;

package/dist/index.d.ts

@@ -11,5 +11,6 @@ export * from './utils/help-topic-context';
 export * from './utils/help-topic-types';
 export * from './utils/quick-start-utils';
 export * from './utils/useLocalStorage';
+export * from './utils/asciidoc-procedure-parser';
 export { default as QuickStartPanelContent } from './QuickStartPanelContent';
 export { default as QuickStartCloseModal } from './QuickStartCloseModal';

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import React__default, { createContext, useCallback, useEffect, useState } from 'react';
-import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Modal as Modal$1, Tooltip, Alert, Popover, PopoverPosition, Button, Text, TextVariants, TextList, TextListItem, Flex, FlexItem, Title, Label, Gallery, GalleryItem, ToolbarItem, SearchInput, Select, SelectVariant, SelectOption, Toolbar, ToolbarContent, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStatePrimary, Divider, ModalVariant, WizardNavItem, List, ExpandableSection, ListItem, Radio, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody, OptionsMenuItem, OptionsMenu, OptionsMenuToggle, Stack, StackItem } from '@patternfly/react-core';
+import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Modal as Modal$1, Tooltip, Alert, CodeBlock, Popover, PopoverPosition, Button, Text, TextVariants, TextList, TextListItem, Flex, FlexItem, Title, Label, Gallery, GalleryItem, ToolbarItem, SearchInput, Select, SelectVariant, SelectOption, Toolbar, ToolbarContent, EmptyState, EmptyStateIcon, EmptyStateBody, EmptyStatePrimary, Divider, ModalVariant, WizardNavItem, List, ExpandableSection, ListItem, Radio, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody, OptionsMenuItem, Stack, StackItem, OptionsMenu, OptionsMenuToggle } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
 import { css } from '@patternfly/react-styles';
 import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
@@ -1315,6 +1315,20 @@ const useAdmonitionShowdownExtension = () => {
     }), []);
 };
 
+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(renderToStaticMarkup(pfCodeBlock));
+        },
+    }), []);
+};
+
 const FallbackImg = ({ src, alt, className, fallback }) => {
     const [isSrcValid, setIsSrcValid] = React.useState(true);
     if (src && isSrcValid) {
@@ -1555,6 +1569,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
     const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
     const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
     const admonitionShowdownExtension = useAdmonitionShowdownExtension();
+    const codeShowdownExtension = useCodeShowdownExtension();
     return (React.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
             {
                 type: 'lang',
@@ -1577,6 +1592,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
             inlineCopyClipboardShowdownExtension,
             multilineCopyClipboardShowdownExtension,
             admonitionShowdownExtension,
+            codeShowdownExtension,
             ...(markdown ? markdown.extensions : []),
         ], renderExtension: (docContext, rootSelector) => (React.createElement(React.Fragment, null,
             React.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
@@ -1696,7 +1712,7 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
 
 const QuickStartCatalog = ({ quickStarts }) => {
     const { activeQuickStartID, allQuickStartStates } = React.useContext(QuickStartContext);
-    return (React.createElement("div", { className: "pfext-page-layout__content pfext-is-dark" },
+    return (React.createElement("div", { className: "pfext-page-layout__content" },
         React.createElement(Gallery, { className: "pfext-quick-start-catalog__gallery", hasGutter: true }, quickStarts.map((quickStart) => {
             const { metadata: { name: id }, } = quickStart;
             return (React.createElement(GalleryItem, { key: id, className: "pfext-quick-start-catalog__gallery-item" },
@@ -1901,7 +1917,7 @@ const QuickStartCatalogHeader = ({ title, hint, }) => (React.createElement("div"
     React.createElement("h1", { "data-pf-content": "true", className: "pfext-page-layout__title" }, title),
     hint && React.createElement("div", { className: "pfext-page-layout__hint" }, hint)));
 
-const QuickStartCatalogSection = ({ children }) => (React.createElement("div", { className: "pfext-page-layout__content pfext-is-dark" }, children));
+const QuickStartCatalogSection = ({ children }) => (React.createElement("div", { className: "pfext-page-layout__content" }, children));
 
 const QuickStartCatalogToolbar = ({ children }) => (React.createElement(Toolbar, { usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, children));
 
@@ -2298,6 +2314,7 @@ const QuickStartDrawer = (_a) => {
 
 const HelpTopicContextDefaults = {
     helpTopics: [],
+    setHelpTopics: () => { },
     activeHelpTopic: null,
     setActiveHelpTopicByName: () => { },
     filteredHelpTopics: [],
@@ -2324,6 +2341,7 @@ const useValuesForHelpTopicContext = (value = {}) => {
     const [filteredHelpTopics, setFilteredHelpTopics] = React__default.useState(combinedValue.filteredHelpTopics || []);
     return {
         helpTopics,
+        setHelpTopics,
         activeHelpTopic,
         setActiveHelpTopicByName,
         filteredHelpTopics,
@@ -2334,7 +2352,8 @@ const useValuesForHelpTopicContext = (value = {}) => {
 };
 
 const HelpTopicPanelContent = (_a) => {
-    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true } = _a, props = __rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable"]);
+    var _b, _c;
+    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true, onClose } = _a, props = __rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable", "onClose"]);
     const { setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
     const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React.useState(false);
     const toggleHelpTopicMenu = () => {
@@ -2345,24 +2364,28 @@ const HelpTopicPanelContent = (_a) => {
         setActiveHelpTopicByName(topicName);
         toggleHelpTopicMenu();
     };
-    const menuItems = filteredHelpTopics.map((topic) => {
-        return (React.createElement(OptionsMenuItem, { key: topic.name, onSelect: onSelectHelpTopic, id: topic.name }, topic.title));
-    });
+    const menuItems = filteredHelpTopics.length > 0 &&
+        filteredHelpTopics.map((topic) => {
+            return (React.createElement(OptionsMenuItem, { key: topic.name, onSelect: onSelectHelpTopic, id: topic.name }, topic.title));
+        });
+    const paddingContainer = (children) => React.createElement("div", { style: { padding: '24px' } }, children);
+    const panelBodyItems = (React.createElement(React.Fragment, null,
+        paddingContainer(React.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
+        ((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React.createElement(Divider, null),
+        paddingContainer(React.createElement(Stack, { hasGutter: true }, (_c = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _c === void 0 ? void 0 : _c.map(({ href, text, newTab, isExternal }, index) => {
+            return (React.createElement(StackItem, { key: index },
+                React.createElement(Button, { component: "a", href: href, target: newTab ? '_blank' : '', rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: isExternal ? React.createElement(ExternalLinkAltIcon, null) : null, iconPosition: "right", style: { fontSize: 'inherit' } }, text || href)));
+        })))));
     const content = (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base" }, props),
         React.createElement("div", null,
             React.createElement(DrawerHead, null,
                 React.createElement("div", { className: "pfext-quick-start-panel-content__title" },
-                    React.createElement(OptionsMenu, { id: 'helptopics', isPlain: true, isOpen: isHelpTopicMenuOpen, toggle: React.createElement(OptionsMenuToggle, { onToggle: toggleHelpTopicMenu, toggleTemplate: React.createElement(BarsIcon, null) }), menuItems: menuItems }),
-                    React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title))),
+                    menuItems && (React.createElement(OptionsMenu, { id: 'helptopics', isPlain: true, isOpen: isHelpTopicMenuOpen, toggle: React.createElement(OptionsMenuToggle, { style: { paddingLeft: '0px' }, onToggle: toggleHelpTopicMenu, toggleTemplate: React.createElement(BarsIcon, null) }), menuItems: menuItems })),
+                    React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-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),
-            React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
-                React.createElement(Stack, { hasGutter: true },
-                    React.createElement(StackItem, { style: { padding: '20px' } },
-                        React.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
-                    React.createElement(Divider, null),
-                    React.createElement(StackItem, { style: { padding: '20px' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links.map((link) => {
-                        return React.createElement(QuickStartMarkdownView, { key: link, content: link });
-                    })))))));
+            React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" }, panelBodyItems))));
     return content;
 };
 
@@ -2376,26 +2399,23 @@ const HelpTopicContainer = (_a) => {
             valuesForHelpTopicContext.setLoading(loading);
         }
     }, [loading, valuesForHelpTopicContext]);
+    React.useEffect(() => {
+        if (helpTopics &&
+            JSON.stringify(helpTopics) !== JSON.stringify(valuesForHelpTopicContext.helpTopics)) {
+            valuesForHelpTopicContext.setHelpTopics(helpTopics);
+        }
+    }, [helpTopics, valuesForHelpTopicContext]);
     const drawerProps = Object.assign({}, props);
     return (React.createElement(HelpTopicContext.Provider, { value: valuesForHelpTopicContext },
         React.createElement(HelpTopicDrawer, Object.assign({}, drawerProps), children)));
 };
 const HelpTopicDrawer = (_a) => {
-    var { 
-    // helpTopics,
-    children } = _a, props = __rest(_a, ["children"]);
-    const { activeHelpTopic, filteredHelpTopics } = React.useContext(HelpTopicContext);
-    // Leave here if query param is desired for help topics later
-    // React.useEffect(() => {
-    //   const params = new URLSearchParams(window.location.search);
-    //   // if there is a quick start param, but the quick start is not active, set it
-    //   // this can happen if a new browser session is opened or an incognito window for example
-    //   const helpTopicNameFromParam = params.get(HELP_TOPIC_NAME_KEY) || '';
-    //   if (helpTopicNameFromParam) {
-    //     setActiveHelpTopicByName(helpTopicNameFromParam);
-    //   }
-    // }, [inContextHelpTopics, setActiveHelpTopicByName]);
-    const panelContent = (React.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics }));
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
+    const onClose = () => {
+        setActiveHelpTopicByName('');
+    };
+    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-c-drawer__main" }, panelContent)))));
@@ -2438,5 +2458,105 @@ const useLocalStorage = (key, initialValue) => {
     return [storedValue, setValue];
 };
 
-export { Box, CamelCaseWrap, EmptyBox, HELP_TOPIC_NAME_KEY, HelpTopicContainer, HelpTopicContext, HelpTopicContextDefaults, HelpTopicDrawer, Loading, LoadingBox, QUICKSTART_ID_FILTER_KEY, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICK_START_NAME, QuickStartCatalog, QuickStartCatalogEmptyState, QuickStartCatalogFilter, QuickStartCatalogFilterCount, QuickStartCatalogFilterCountWrapper, QuickStartCatalogFilterSearch, QuickStartCatalogFilterSearchWrapper, QuickStartCatalogFilterSelect, QuickStartCatalogFilterStatusWrapper, QuickStartCatalogHeader, QuickStartCatalogPage, QuickStartCatalogSection, QuickStartCatalogToolbar, QuickStartCloseModal, QuickStartContainer, QuickStartContext, QuickStartContextDefaults, QuickStartContextProvider, QuickStartDrawer, QuickStartPanelContent, QuickStartStatus, QuickStartTaskStatus, QuickStartTile, QuickStartTileDescription, QuickStartTileFooter, QuickStartTileFooterExternal, QuickStartTileHeader, camelize, clearFilterParams, equalsIgnoreOrder, filterQuickStarts, getDefaultQuickStartState, getDisabledQuickStarts, getQuickStartByName, getQuickStartStatus, getQuickStartStatusCount, getResource, getTaskStatusKey, history, isDisabledQuickStart, removeQueryArgument, setQueryArgument, useLocalStorage, useValuesForHelpTopicContext, useValuesForQuickStartContext };
+/* eslint-disable */
+// Brought in from dev to publish this with QS module
+// Dev now imports from here
+const ProcQuickStartParser = (quickStart, environmentVariables) => {
+    var _a;
+    const replaceEnvironmentVariables = (s) => s === null || s === void 0 ? void 0 : s.replace(/\${(\w+)}/, (substring, name) => {
+        return environmentVariables ? ([name] ? environmentVariables[name] : substring) : substring;
+    });
+    quickStart.spec.tasks = (_a = quickStart.spec.tasks) === null || _a === void 0 ? void 0 : _a.map((task, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        let proc;
+        let answer;
+        if (typeof task === 'string') {
+            proc = task;
+            answer = {};
+        }
+        else {
+            // @ts-ignore
+            proc = task.proc;
+            answer = task;
+            // @ts-ignore
+            delete task.proc;
+        }
+        let description = '', procedure, verification, title, summaryFailed, success, reviewFailed, prerequisites;
+        if (proc) {
+            const taskDOM = document.createElement('div');
+            taskDOM.innerHTML = proc;
+            // remove the screencapture images
+            taskDOM.querySelectorAll('.imageblock.screencapture').forEach((node) => {
+                var _a;
+                (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+            });
+            title = (_a = taskDOM
+                .querySelector('h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child')) === null || _a === void 0 ? void 0 : _a.innerHTML.trim();
+            let sectionBody = taskDOM.querySelector('.sectionbody');
+            if (!(sectionBody === null || sectionBody === void 0 ? void 0 : sectionBody.hasChildNodes())) {
+                // possibly in other templates, where we want to look for article
+                sectionBody = taskDOM.querySelector('article');
+            }
+            if (sectionBody) {
+                for (let i = 0; i < sectionBody.children.length || 0; i++) {
+                    /**
+                    child typically looks like:
+          
+                    <div class="paragraph|olist|ulist|admonitionblock">
+                       <div class="title">Procedure|Prerequisites|Verification|Note|Warning</div>
+                       <ol|ul class="arabic">
+                         <li>
+                         <li>...
+                       </ol|ul>
+                    </div>
+          
+                    And the below code extracts the <ol> or <ul>
+                    Except for when there is no <div class="title|heading"/>, then the description is extracted
+                    in the else if below
+                    */
+                    const child = sectionBody.children.item(i);
+                    // find the title
+                    const sectionTitle = child === null || child === void 0 ? void 0 : child.querySelector('.heading,.title');
+                    // should this section be assigned to a specific section
+                    const sectionTitleText = (_b = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _b === void 0 ? void 0 : _b.trim();
+                    const isKnownSection = ['Procedure', 'Verification', 'Prerequisites'].includes((_c = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _c === void 0 ? void 0 : _c.trim());
+                    if (isKnownSection) {
+                        switch (sectionTitleText) {
+                            case 'Procedure':
+                                procedure = (_d = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _d === void 0 ? void 0 : _d.outerHTML.trim();
+                                break;
+                            case 'Verification':
+                                verification = (_e = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _e === void 0 ? void 0 : _e.outerHTML.trim();
+                                break;
+                            case 'Prerequisites':
+                                prerequisites = (_f = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _f === void 0 ? void 0 : _f.outerHTML.trim();
+                                break;
+                        }
+                    }
+                    else if (!procedure) {
+                        // Otherwise if it comes before a procedure it's part of the description
+                        description = description + (child === null || child === void 0 ? void 0 : child.outerHTML.trim());
+                    }
+                }
+            }
+            success = (_g = taskDOM.querySelector('.qs-summary.success')) === null || _g === void 0 ? void 0 : _g.innerHTML.trim();
+            reviewFailed = (_h = taskDOM.querySelector('.qs-review.failed')) === null || _h === void 0 ? void 0 : _h.innerHTML.trim();
+            summaryFailed = (_j = taskDOM.querySelector('.qs-summary.failed')) === null || _j === void 0 ? void 0 : _j.innerHTML.trim();
+        }
+        answer.title = replaceEnvironmentVariables(answer.title || title);
+        answer.description = replaceEnvironmentVariables(answer.description || `${description} ${prerequisites || ''} ${procedure}`);
+        answer.review = answer.review || {};
+        answer.review.instructions = replaceEnvironmentVariables(((_k = answer.review) === null || _k === void 0 ? void 0 : _k.instructions) || verification || 'Have you completed these steps?');
+        answer.review.failedTaskHelp = replaceEnvironmentVariables(answer.review.failedTaskHelp ||
+            reviewFailed ||
+            'This task isn’t verified yet. Try the task again.');
+        answer.summary = answer.summary || {};
+        answer.summary.success = replaceEnvironmentVariables(answer.summary.success || success || 'You have completed this task!');
+        answer.summary.failed = replaceEnvironmentVariables(answer.summary.failed || summaryFailed || 'Try the steps again.');
+        return answer;
+    });
+    return quickStart;
+};
+
+export { Box, CamelCaseWrap, EmptyBox, HELP_TOPIC_NAME_KEY, HelpTopicContainer, HelpTopicContext, HelpTopicContextDefaults, HelpTopicDrawer, Loading, LoadingBox, ProcQuickStartParser, QUICKSTART_ID_FILTER_KEY, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICK_START_NAME, QuickStartCatalog, QuickStartCatalogEmptyState, QuickStartCatalogFilter, QuickStartCatalogFilterCount, QuickStartCatalogFilterCountWrapper, QuickStartCatalogFilterSearch, QuickStartCatalogFilterSearchWrapper, QuickStartCatalogFilterSelect, QuickStartCatalogFilterStatusWrapper, QuickStartCatalogHeader, QuickStartCatalogPage, QuickStartCatalogSection, QuickStartCatalogToolbar, QuickStartCloseModal, QuickStartContainer, QuickStartContext, QuickStartContextDefaults, QuickStartContextProvider, QuickStartDrawer, QuickStartPanelContent, QuickStartStatus, QuickStartTaskStatus, QuickStartTile, QuickStartTileDescription, QuickStartTileFooter, QuickStartTileFooterExternal, QuickStartTileHeader, camelize, clearFilterParams, equalsIgnoreOrder, filterQuickStarts, getDefaultQuickStartState, getDisabledQuickStarts, getQuickStartByName, getQuickStartStatus, getQuickStartStatusCount, getResource, getTaskStatusKey, history, isDisabledQuickStart, removeQueryArgument, setQueryArgument, useLocalStorage, useValuesForHelpTopicContext, useValuesForQuickStartContext };
 //# sourceMappingURL=index.es.js.map