@patternfly/quickstarts 2.2.1 → 2.2.4

package/dist/index.js

@@ -1357,6 +1357,20 @@ const useAdmonitionShowdownExtension = () => {
     }), []);
 };
 
+const useCodeShowdownExtension = () => {
+    return React__namespace.useMemo(() => ({
+        type: 'output',
+        regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
+        replace: (text, content) => {
+            if (!content) {
+                return text;
+            }
+            const pfCodeBlock = React__namespace.createElement(reactCore.CodeBlock, null, content);
+            return removeTemplateWhitespace(server.renderToStaticMarkup(pfCodeBlock));
+        },
+    }), []);
+};
+
 const FallbackImg = ({ src, alt, className, fallback }) => {
     const [isSrcValid, setIsSrcValid] = React__namespace.useState(true);
     if (src && isSrcValid) {
@@ -1597,6 +1611,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
     const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
     const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
     const admonitionShowdownExtension = useAdmonitionShowdownExtension();
+    const codeShowdownExtension = useCodeShowdownExtension();
     return (React__namespace.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
             {
                 type: 'lang',
@@ -1619,6 +1634,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
             inlineCopyClipboardShowdownExtension,
             multilineCopyClipboardShowdownExtension,
             admonitionShowdownExtension,
+            codeShowdownExtension,
             ...(markdown ? markdown.extensions : []),
         ], renderExtension: (docContext, rootSelector) => (React__namespace.createElement(React__namespace.Fragment, null,
             React__namespace.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
@@ -1738,7 +1754,7 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
 
 const QuickStartCatalog = ({ quickStarts }) => {
     const { activeQuickStartID, allQuickStartStates } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement("div", { className: "pfext-page-layout__content pfext-is-dark" },
+    return (React__namespace.createElement("div", { className: "pfext-page-layout__content" },
         React__namespace.createElement(reactCore.Gallery, { className: "pfext-quick-start-catalog__gallery", hasGutter: true }, quickStarts.map((quickStart) => {
             const { metadata: { name: id }, } = quickStart;
             return (React__namespace.createElement(reactCore.GalleryItem, { key: id, className: "pfext-quick-start-catalog__gallery-item" },
@@ -1943,7 +1959,7 @@ const QuickStartCatalogHeader = ({ title, hint, }) => (React__namespace.createEl
     React__namespace.createElement("h1", { "data-pf-content": "true", className: "pfext-page-layout__title" }, title),
     hint && React__namespace.createElement("div", { className: "pfext-page-layout__hint" }, hint)));
 
-const QuickStartCatalogSection = ({ children }) => (React__namespace.createElement("div", { className: "pfext-page-layout__content pfext-is-dark" }, children));
+const QuickStartCatalogSection = ({ children }) => (React__namespace.createElement("div", { className: "pfext-page-layout__content" }, children));
 
 const QuickStartCatalogToolbar = ({ children }) => (React__namespace.createElement(reactCore.Toolbar, { usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, children));
 
@@ -2378,6 +2394,7 @@ const useValuesForHelpTopicContext = (value = {}) => {
 };
 
 const HelpTopicPanelContent = (_a) => {
+    var _b, _c;
     var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true, onClose } = _a, props = tslib.__rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable", "onClose"]);
     const { setActiveHelpTopicByName } = React__namespace.useContext(HelpTopicContext);
     const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React__namespace.useState(false);
@@ -2396,10 +2413,11 @@ const HelpTopicPanelContent = (_a) => {
     const paddingContainer = (children) => React__namespace.createElement("div", { style: { padding: '24px' } }, children);
     const panelBodyItems = (React__namespace.createElement(React__namespace.Fragment, null,
         paddingContainer(React__namespace.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
-        React__namespace.createElement(reactCore.Divider, null),
-        paddingContainer(activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links.map((link) => {
-            return React__namespace.createElement(QuickStartMarkdownView, { key: link, content: link });
-        }))));
+        ((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React__namespace.createElement(reactCore.Divider, null),
+        paddingContainer(React__namespace.createElement(reactCore.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__namespace.createElement(reactCore.StackItem, { key: index },
+                React__namespace.createElement(reactCore.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__namespace.createElement(ExternalLinkAltIcon__default['default'], null) : null, iconPosition: "right", style: { fontSize: 'inherit' } }, text || href)));
+        })))));
     const content = (React__namespace.createElement(reactCore.DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base" }, props),
         React__namespace.createElement("div", null,
             React__namespace.createElement(reactCore.DrawerHead, null,
@@ -2434,20 +2452,8 @@ const HelpTopicContainer = (_a) => {
         React__namespace.createElement(HelpTopicDrawer, Object.assign({}, drawerProps), children)));
 };
 const HelpTopicDrawer = (_a) => {
-    var { 
-    // helpTopics,
-    children } = _a, props = tslib.__rest(_a, ["children"]);
+    var { children } = _a, props = tslib.__rest(_a, ["children"]);
     const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React__namespace.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 onClose = () => {
         setActiveHelpTopicByName('');
     };
@@ -2494,6 +2500,106 @@ const useLocalStorage = (key, initialValue) => {
     return [storedValue, setValue];
 };
 
+/* 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;
+};
+
 exports.Box = Box;
 exports.CamelCaseWrap = CamelCaseWrap;
 exports.EmptyBox = EmptyBox;
@@ -2504,6 +2610,7 @@ exports.HelpTopicContextDefaults = HelpTopicContextDefaults;
 exports.HelpTopicDrawer = HelpTopicDrawer;
 exports.Loading = Loading;
 exports.LoadingBox = LoadingBox;
+exports.ProcQuickStartParser = ProcQuickStartParser;
 exports.QUICKSTART_ID_FILTER_KEY = QUICKSTART_ID_FILTER_KEY;
 exports.QUICKSTART_SEARCH_FILTER_KEY = QUICKSTART_SEARCH_FILTER_KEY;
 exports.QUICKSTART_STATUS_FILTER_KEY = QUICKSTART_STATUS_FILTER_KEY;