@patternfly/quickstarts 2.3.2 → 2.3.4

package/dist/index.js

@@ -13,7 +13,7 @@ var server = require('react-dom/server');
 var CopyIcon = require('@patternfly/react-icons/dist/js/icons/copy-icon');
 var LightbulbIcon = require('@patternfly/react-icons/dist/js/icons/lightbulb-icon');
 var FireIcon = require('@patternfly/react-icons/dist/js/icons/fire-icon');
-var showdown = require('showdown');
+var marked = require('marked');
 var SyncAltIcon = require('@patternfly/react-icons/dist/js/icons/sync-alt-icon');
 var CheckCircleIcon = require('@patternfly/react-icons/dist/js/icons/check-circle-icon');
 var ExclamationCircleIcon = require('@patternfly/react-icons/dist/js/icons/exclamation-circle-icon');
@@ -914,7 +914,7 @@ class CatalogTile extends React__namespace.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 = tslib.__rest(_a, ["id", "className", "featured", "onClick", "href", "icon", "iconImg", "iconAlt", "iconClass", "badges", "title", "vendor", "description", "footer", "ref", "children"]);
-        return (React__namespace.createElement(reactCore.Card, Object.assign({ component: href || onClick ? 'a' : 'div', id: id, href: href || '#', className: reactStyles.css('catalog-tile-pf', { featured }, className), onClick: e => this.handleClick(e), isHoverable: true }, props),
+        return (React__namespace.createElement(reactCore.Card, Object.assign({ component: href || onClick ? 'a' : 'div', id: id, href: href || '#', className: reactStyles.css('catalog-tile-pf', { featured }, className), onClick: e => this.handleClick(e), isSelectable: true }, props),
             (badges.length > 0 || iconImg || iconClass || icon) && (React__namespace.createElement(reactCore.CardHeader, null,
                 iconImg && React__namespace.createElement("img", { className: "catalog-tile-pf-icon", src: iconImg, alt: iconAlt }),
                 !iconImg && (iconClass || icon) && React__namespace.createElement("span", { className: `catalog-tile-pf-icon ${iconClass}` }, icon),
@@ -1237,7 +1237,9 @@ const MarkdownHighlightExtension = ({ docContext, rootSelector, }) => {
 };
 
 const MARKDOWN_COPY_BUTTON_ID = 'data-copy-for';
-const MARKDOWN_SNIPPET_ID = 'data-snippet-id';
+const MARKDOWN_SNIPPET_ID = 'data-snippet-id';
+const ACCORDION_MARKDOWN_BUTTON_ID = `accordion-markdown-button-id`;
+const ACCORDION_MARKDOWN_CONTENT_ID = `accordion-markdown-content-id`;
 
 const CopyClipboard = ({ element, rootSelector, docContext, }) => {
     const { getResource } = React__namespace.useContext(QuickStartContext);
@@ -1327,16 +1329,7 @@ const useMultilineCopyClipboardShowdownExtension = () => {
 
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const DOMPurify = require('dompurify');
-const markdownConvert = (markdown, extensions) => {
-    const converter = new showdown.Converter({
-        tables: true,
-        openLinksInNewWindow: true,
-        strikethrough: true,
-        emoji: false,
-    });
-    if (extensions) {
-        converter.addExtension(extensions);
-    }
+const markdownConvert = (markdown, extensions) => tslib.__awaiter(void 0, void 0, void 0, function* () {
     DOMPurify.addHook('beforeSanitizeElements', function (node) {
         // nodeType 1 = element type
         // transform anchor tags
@@ -1363,20 +1356,38 @@ const markdownConvert = (markdown, extensions) => {
             node.setAttribute('xlink:show', 'new');
         }
     });
-    return DOMPurify.sanitize(converter.makeHtml(markdown), {
-        USE_PROFILES: {
-            html: true,
-            svg: true,
-        },
-    });
-};
+    // Replace code fences with non markdown formatting relates tokens so that marked doesn't try to parse them as code spans
+    const markdownWithSubstitutedCodeFences = markdown.replace(/```/g, '@@@');
+    const parsedMarkdown = yield marked.marked.parse(markdownWithSubstitutedCodeFences);
+    // Swap the temporary tokens back to code fences before we run the extensions
+    let md = parsedMarkdown.replace(/@@@/g, '```');
+    if (extensions) {
+        // Convert code spans back to md format before we run the custom extension regexes
+        md = md.replace(/<code>(.*)<\/code>/g, '`$1`');
+        extensions.forEach(({ regex, replace }) => {
+            if (regex) {
+                md = md.replace(regex, replace);
+            }
+        });
+        // Convert any remaining backticks back into code spans
+        md = md.replace(/`(.*)`/g, '<code>$1</code>');
+    }
+    return DOMPurify.sanitize(md);
+});
 const SyncMarkdownView = ({ 
 // truncateContent,
 content, emptyMsg, extensions, renderExtension, exactHeight, inline, className, }) => {
     const { getResource } = React__namespace.useContext(QuickStartContext);
-    const markup = React__namespace.useMemo(() => {
-        return markdownConvert(content || emptyMsg || getResource('Not available'), extensions);
-    }, [content, emptyMsg, extensions, getResource]);
+    const [markup, setMarkup] = React__namespace.useState('');
+    React__namespace.useEffect(() => {
+        function getMd() {
+            return tslib.__awaiter(this, void 0, void 0, function* () {
+                const md = yield markdownConvert(content || emptyMsg || getResource('Not available'), extensions);
+                setMarkup(md);
+            });
+        }
+        getMd();
+    }, [content, emptyMsg, getResource, extensions]);
     const innerProps = {
         renderExtension: (extensions === null || extensions === void 0 ? void 0 : extensions.length) > 0 ? renderExtension : undefined,
         exactHeight,
@@ -1501,6 +1512,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
     const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
     const admonitionShowdownExtension = useAdmonitionShowdownExtension();
     const codeShowdownExtension = useCodeShowdownExtension();
+    const accordionShowdownExtension = useAccordionShowdownExtension();
     return (React__namespace.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
             {
                 type: 'lang',
@@ -1524,8 +1536,10 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
             multilineCopyClipboardShowdownExtension,
             admonitionShowdownExtension,
             codeShowdownExtension,
+            accordionShowdownExtension,
             ...(markdown ? markdown.extensions : []),
         ], renderExtension: (docContext, rootSelector) => (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(AccordionRenderExtension, { docContext: docContext }),
             React__namespace.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
             React__namespace.createElement(MarkdownCopyClipboard, { docContext: docContext, rootSelector: rootSelector }),
             markdown &&
@@ -1581,6 +1595,45 @@ const useCodeShowdownExtension = () => {
     }), []);
 };
 
+const useAccordionShowdownExtension = () => {
+    return React__namespace.useMemo(() => ({
+        type: 'lang',
+        regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
+        replace: (_text, accordionContent, _command, accordionHeading) => {
+            const accordionId = new String(accordionHeading).replace(/\s/g, '-');
+            return removeTemplateWhitespace(server.renderToStaticMarkup(React__namespace.createElement(reactCore.Accordion, { asDefinitionList: true },
+                React__namespace.createElement(reactCore.AccordionItem, null,
+                    React__namespace.createElement(reactCore.AccordionToggle, { isExpanded: false, id: `${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}` }, accordionHeading),
+                    React__namespace.createElement(reactCore.AccordionContent, { id: `${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`, isHidden: !false }, accordionContent)))));
+        },
+    }), []);
+};
+
+const AccordionShowdownHandler = ({ buttonElement, contentElement, }) => {
+    const [expanded, setExpanded] = React__namespace.useState(false);
+    const handleClick = () => {
+        const expandedModifier = 'pf-m-expanded';
+        buttonElement.className = `pf-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
+        contentElement.hidden = expanded;
+        contentElement.className = `pf-c-accordion__expanded-content ${!expanded ? expandedModifier : ''}`;
+        setExpanded(!expanded);
+    };
+    useEventListener(buttonElement, 'click', handleClick);
+    return React__namespace.createElement(React__namespace.Fragment, null);
+};
+const AccordionRenderExtension = ({ docContext }) => {
+    const buttonElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_BUTTON_ID}]`);
+    const contentElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_CONTENT_ID}]`);
+    return buttonElements.length > 0 ? (React__namespace.createElement(React__namespace.Fragment, null, Array.from(buttonElements).map((elm) => {
+        const content = Array.from(contentElements).find((elm2) => {
+            const elmId = elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1];
+            const elm2Id = elm2.id.split(ACCORDION_MARKDOWN_CONTENT_ID)[1];
+            return elmId === elm2Id;
+        });
+        return (React__namespace.createElement(AccordionShowdownHandler, { key: elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1], buttonElement: elm, contentElement: content }));
+    }))) : null;
+};
+
 const FallbackImg = ({ src, alt, className, fallback }) => {
     const [isSrcValid, setIsSrcValid] = React__namespace.useState(true);
     if (src && isSrcValid) {
@@ -1711,7 +1764,8 @@ const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, }) =
         [exports.QuickStartStatus.NOT_STARTED]: getResource('Not started'),
     };
     return (React__namespace.createElement("div", { className: "pfext-quick-start-tile-header" },
-        React__namespace.createElement(reactCore.Title, { headingLevel: "h3", "data-test": "title", id: quickStartId }, name),
+        React__namespace.createElement(reactCore.Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
+            React__namespace.createElement(QuickStartMarkdownView, { content: name })),
         React__namespace.createElement("div", { className: "pfext-quick-start-tile-header__status" },
             type && (React__namespace.createElement(reactCore.Label, { className: "pfext-quick-start-tile-header--margin", color: type.color }, type.text)),
             duration && (React__namespace.createElement(reactCore.Label, { variant: "outline", "data-test": "duration", icon: React__namespace.createElement(OutlinedClockIcon__default['default'], null), className: "pfext-quick-start-tile-header--margin" }, getResource('{{duration, number}} minutes', duration).replace('{{duration, number}}', duration))),
@@ -2000,12 +2054,22 @@ const TaskIcon = ({ taskIndex, taskStatus }) => {
 };
 const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, children, }) => {
     const titleRef = React__namespace.useRef(null);
+    const [parsedTitle, setParsedTitle] = React__namespace.useState('');
     React__namespace.useEffect(() => {
         if (isActiveTask) {
             // Focus the WizardNavItem button element that contains the title
             titleRef.current.parentNode.focus();
         }
     }, [isActiveTask]);
+    React__namespace.useEffect(() => {
+        function getParsedTitle() {
+            return tslib.__awaiter(this, void 0, void 0, function* () {
+                const convertedMdTitle = yield markdownConvert(title);
+                setParsedTitle(removeParagraphWrap(convertedMdTitle));
+            });
+        }
+        getParsedTitle();
+    }, [title]);
     const classNames = reactStyles.css('pfext-quick-start-task-header__title', {
         'pfext-quick-start-task-header__title-success': taskStatus === exports.QuickStartTaskStatus.SUCCESS,
         'pfext-quick-start-task-header__title-failed': taskStatus === (exports.QuickStartTaskStatus.FAILED || exports.QuickStartTaskStatus.VISITED),
@@ -2021,7 +2085,7 @@ const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, is
     const content = (React__namespace.createElement("div", { className: "pfext-quick-start-task-header", ref: titleRef },
         React__namespace.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
         React__namespace.createElement(reactCore.Title, { headingLevel: "h3", size: size, className: classNames },
-            React__namespace.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
+            React__namespace.createElement("span", { dangerouslySetInnerHTML: { __html: parsedTitle } }),
             isActiveTask && subtitle && (React__namespace.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" },
                 ' ',
                 subtitle))),
@@ -2228,6 +2292,7 @@ const QuickStartPanelContent = (_a) => {
     const titleRef = React__namespace.useRef(null);
     const { getResource, activeQuickStartState } = React__namespace.useContext(QuickStartContext);
     const [contentRef, setContentRef] = React__namespace.useState();
+    const [displayName, setDisplayName] = React__namespace.useState('');
     const shadows = useScrollShadows(contentRef);
     const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
     const taskNumber = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.taskNumber;
@@ -2255,12 +2320,23 @@ const QuickStartPanelContent = (_a) => {
             titleRef.current.focus();
         }
     }, [quickStart]);
+    React__namespace.useEffect(() => {
+        function getDisplayName() {
+            return tslib.__awaiter(this, void 0, void 0, function* () {
+                const convertedMdDisplayName = yield markdownConvert(quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName);
+                setDisplayName(removeParagraphWrap(convertedMdDisplayName));
+            });
+        }
+        getDisplayName();
+    }, [quickStart]);
     const content = quickStart ? (React__namespace.createElement(reactCore.DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base", "data-testid": `qs-drawer-${camelize(quickStart.spec.displayName)}`, "data-qs": `qs-step-${getStep()}`, "data-test": "quickstart drawer" }, props),
         React__namespace.createElement("div", { className: headerClasses },
             React__namespace.createElement(reactCore.DrawerHead, null,
                 React__namespace.createElement("div", { className: "pfext-quick-start-panel-content__title", tabIndex: -1, ref: titleRef },
-                    React__namespace.createElement(reactCore.Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } }, quickStart === null || quickStart === void 0 ? void 0 :
-                        quickStart.spec.displayName,
+                    React__namespace.createElement(reactCore.Title, { headingLevel: "h2", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } },
+                        React__namespace.createElement("span", { dangerouslySetInnerHTML: {
+                                __html: displayName,
+                            } }),
                         ' ',
                         React__namespace.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, (quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes) ? getResource('{{type}} • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
                             .replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
@@ -2426,7 +2502,7 @@ const HelpTopicPanelContent = (_a) => {
         setActiveHelpTopicByName(topicName);
         toggleHelpTopicMenu();
     };
-    const menuItems = filteredHelpTopics.length > 0 &&
+    const menuItems = filteredHelpTopics.length > 1 &&
         filteredHelpTopics.map((topic) => {
             return (React__namespace.createElement(reactCore.OptionsMenuItem, { key: topic.name, onSelect: onSelectHelpTopic, id: topic.name }, topic.title));
         });