@patternfly/quickstarts 2.3.2 → 2.4.0

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

@@ -0,0 +1,7 @@
+import './showdown-extension.scss';
+declare const useAccordionShowdownExtension: () => {
+    type: string;
+    regex: RegExp;
+    replace: (_text: string, accordionContent: string, _command: string, accordionHeading: string) => string;
+};
+export default useAccordionShowdownExtension;

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare type accordionRenderExtensionProps = {
+    docContext: HTMLDocument;
+};
+declare const AccordionRenderExtension: React.FC<accordionRenderExtensionProps>;
+export default AccordionRenderExtension;

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

@@ -1,3 +1,5 @@
 export declare const MARKDOWN_COPY_BUTTON_ID = "data-copy-for";
 export declare const MARKDOWN_EXECUTE_BUTTON_ID = "data-execute-for";
 export declare const MARKDOWN_SNIPPET_ID = "data-snippet-id";
+export declare const ACCORDION_MARKDOWN_BUTTON_ID = "accordion-markdown-button-id";
+export declare const ACCORDION_MARKDOWN_CONTENT_ID = "accordion-markdown-content-id";

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

@@ -3,3 +3,5 @@ export { default as useInlineCopyClipboardShowdownExtension } from './inline-cli
 export { default as useMultilineCopyClipboardShowdownExtension } from './multiline-clipboard-extension';
 export { default as useAdmonitionShowdownExtension } from './admonition-extension';
 export { default as useCodeShowdownExtension } from './code-extension';
+export { default as useAccordionShowdownExtension } from './accordion-extension';
+export { default as AccordionRenderExtension } from './accordion-render-extension';

package/dist/ConsoleShared/src/components/status/NotStartedIcon.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 declare const _default: (props: any) => JSX.Element;
 export default _default;

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, 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 { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Modal as Modal$1, Tooltip, Alert, CodeBlock, Accordion, AccordionItem, AccordionToggle, AccordionContent, 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';
@@ -872,7 +872,7 @@ class CatalogTile extends React.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 = __rest(_a, ["id", "className", "featured", "onClick", "href", "icon", "iconImg", "iconAlt", "iconClass", "badges", "title", "vendor", "description", "footer", "ref", "children"]);
-        return (React.createElement(Card, Object.assign({ component: href || onClick ? 'a' : 'div', id: id, href: href || '#', className: css('catalog-tile-pf', { featured }, className), onClick: e => this.handleClick(e), isHoverable: true }, props),
+        return (React.createElement(Card, Object.assign({ component: href || onClick ? 'a' : 'div', id: id, href: href || '#', className: css('catalog-tile-pf', { featured }, className), onClick: e => this.handleClick(e), isSelectable: true }, props),
             (badges.length > 0 || iconImg || iconClass || icon) && (React.createElement(CardHeader, null,
                 iconImg && React.createElement("img", { className: "catalog-tile-pf-icon", src: iconImg, alt: iconAlt }),
                 !iconImg && (iconClass || icon) && React.createElement("span", { className: `catalog-tile-pf-icon ${iconClass}` }, icon),
@@ -1195,7 +1195,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.useContext(QuickStartContext);
@@ -1459,6 +1461,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
     const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
     const admonitionShowdownExtension = useAdmonitionShowdownExtension();
     const codeShowdownExtension = useCodeShowdownExtension();
+    const accordionShowdownExtension = useAccordionShowdownExtension();
     return (React.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
             {
                 type: 'lang',
@@ -1482,8 +1485,10 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
             multilineCopyClipboardShowdownExtension,
             admonitionShowdownExtension,
             codeShowdownExtension,
+            accordionShowdownExtension,
             ...(markdown ? markdown.extensions : []),
         ], renderExtension: (docContext, rootSelector) => (React.createElement(React.Fragment, null,
+            React.createElement(AccordionRenderExtension, { docContext: docContext }),
             React.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
             React.createElement(MarkdownCopyClipboard, { docContext: docContext, rootSelector: rootSelector }),
             markdown &&
@@ -1539,6 +1544,45 @@ const useCodeShowdownExtension = () => {
     }), []);
 };
 
+const useAccordionShowdownExtension = () => {
+    return React.useMemo(() => ({
+        type: 'lang',
+        regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
+        replace: (_text, accordionContent, _command, accordionHeading) => {
+            const accordionId = new String(accordionHeading).replace(/\s/g, '-');
+            return removeTemplateWhitespace(renderToStaticMarkup(React.createElement(Accordion, { asDefinitionList: true },
+                React.createElement(AccordionItem, null,
+                    React.createElement(AccordionToggle, { isExpanded: false, id: `${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}` }, accordionHeading),
+                    React.createElement(AccordionContent, { id: `${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`, isHidden: !false }, accordionContent)))));
+        },
+    }), []);
+};
+
+const AccordionShowdownHandler = ({ buttonElement, contentElement, }) => {
+    const [expanded, setExpanded] = React.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.createElement(React.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.createElement(React.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.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.useState(true);
     if (src && isSrcValid) {
@@ -1669,7 +1713,8 @@ const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, }) =
         [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
     };
     return (React.createElement("div", { className: "pfext-quick-start-tile-header" },
-        React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId }, name),
+        React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
+            React.createElement(QuickStartMarkdownView, { content: name })),
         React.createElement("div", { className: "pfext-quick-start-tile-header__status" },
             type && (React.createElement(Label, { className: "pfext-quick-start-tile-header--margin", color: type.color }, type.text)),
             duration && (React.createElement(Label, { variant: "outline", "data-test": "duration", icon: React.createElement(OutlinedClockIcon, null), className: "pfext-quick-start-tile-header--margin" }, getResource('{{duration, number}} minutes', duration).replace('{{duration, number}}', duration))),
@@ -2217,8 +2262,10 @@ const QuickStartPanelContent = (_a) => {
         React.createElement("div", { className: headerClasses },
             React.createElement(DrawerHead, null,
                 React.createElement("div", { className: "pfext-quick-start-panel-content__title", tabIndex: -1, ref: titleRef },
-                    React.createElement(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.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } },
+                        React.createElement("span", { dangerouslySetInnerHTML: {
+                                __html: removeParagraphWrap(markdownConvert(quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName)),
+                            } }),
                         ' ',
                         React.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)