@patternfly/quickstarts 2.3.3 → 2.4.1

package/dist/index.js

@@ -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);
@@ -1501,6 +1503,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 +1527,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 +1586,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) {
@@ -2260,7 +2304,7 @@ const QuickStartPanelContent = (_a) => {
         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)' } },
+                    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: removeParagraphWrap(markdownConvert(quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName)),
                             } }),
@@ -2429,7 +2473,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));
         });