@patternfly/quickstarts 2.2.1 → 2.2.2

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('');
     };