@patternfly/quickstarts 2.1.0 → 2.2.2

package/dist/index.js

@@ -24,6 +24,7 @@ var showdown = require('showdown');
 var ExternalLinkAltIcon = require('@patternfly/react-icons/dist/js/icons/external-link-alt-icon');
 var OutlinedClockIcon = require('@patternfly/react-icons/dist/js/icons/outlined-clock-icon');
 var ArrowRightIcon = require('@patternfly/react-icons/dist/js/icons/arrow-right-icon');
+var BarsIcon = require('@patternfly/react-icons/dist/js/icons/bars-icon');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -62,6 +63,7 @@ var InfoCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleIcon)
 var ExternalLinkAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExternalLinkAltIcon);
 var OutlinedClockIcon__default = /*#__PURE__*/_interopDefaultLegacy(OutlinedClockIcon);
 var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
+var BarsIcon__default = /*#__PURE__*/_interopDefaultLegacy(BarsIcon);
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -113,7 +115,8 @@ const QUICKSTART_ID_FILTER_KEY = 'quickstart';
 const QUICKSTART_TASKS_INITIAL_STATES = [
     exports.QuickStartTaskStatus.INIT,
     exports.QuickStartTaskStatus.VISITED,
-];
+];
+const HELP_TOPIC_NAME_KEY = 'topic';
 
 let createHistory;
 try {
@@ -1354,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) {
@@ -1594,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',
@@ -1616,11 +1634,14 @@ 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 }),
             React__namespace.createElement(MarkdownCopyClipboard, { docContext: docContext, rootSelector: rootSelector }),
-            markdown && markdown.renderExtension(docContext, rootSelector))), className: className }));
+            markdown &&
+                markdown.renderExtension &&
+                markdown.renderExtension(docContext, rootSelector))), className: className }));
 };
 
 const QuickStartTileDescription = ({ description, prerequisites, }) => {
@@ -1733,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" },
@@ -1938,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));
 
@@ -2190,11 +2211,10 @@ const useScrollTopOnTaskNumberChange = (node, taskNumber) => {
 };
 const QuickStartPanelContent = (_a) => {
     var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, headerVariant = '' } = _a, props = tslib.__rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
-    const { getResource } = React__namespace.useContext(QuickStartContext);
+    const { getResource, activeQuickStartState } = React__namespace.useContext(QuickStartContext);
     const [contentRef, setContentRef] = React__namespace.useState();
     const shadows = useScrollShadows(contentRef);
     const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
-    const { activeQuickStartState } = React__namespace.useContext(QuickStartContext);
     const taskNumber = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.taskNumber;
     useScrollTopOnTaskNumberChange(contentRef, taskNumber);
     const nextQuickStarts = quickStarts.filter((qs) => { var _a; return (_a = quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.nextQuickStart) === null || _a === void 0 ? void 0 : _a.includes(qs.metadata.name); });
@@ -2334,6 +2354,115 @@ const QuickStartDrawer = (_a) => {
         React__namespace.createElement(QuickStartCloseModal, { isOpen: modalOpen, onConfirm: onModalConfirm, onCancel: onModalCancel })));
 };
 
+const HelpTopicContextDefaults = {
+    helpTopics: [],
+    setHelpTopics: () => { },
+    activeHelpTopic: null,
+    setActiveHelpTopicByName: () => { },
+    filteredHelpTopics: [],
+    setFilteredHelpTopics: () => { },
+    loading: false,
+};
+const HelpTopicContext = React__default['default'].createContext(HelpTopicContextDefaults);
+const useValuesForHelpTopicContext = (value = {}) => {
+    const combinedValue = Object.assign(Object.assign({}, HelpTopicContextDefaults), value);
+    const [loading, setLoading] = React__default['default'].useState(combinedValue.loading);
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+    const [helpTopics, setHelpTopics] = React__default['default'].useState(combinedValue.helpTopics || []);
+    const [activeHelpTopic, setActiveHelpTopic] = React__default['default'].useState(combinedValue.activeHelpTopic || null);
+    const setActiveHelpTopicByName = React__default['default'].useCallback((helpTopicName) => {
+        const topic = helpTopics.find((t) => {
+            return t.name === helpTopicName;
+        });
+        if (!helpTopicName) {
+            setActiveHelpTopic(null);
+            return;
+        }
+        setActiveHelpTopic(topic);
+    }, [helpTopics]);
+    const [filteredHelpTopics, setFilteredHelpTopics] = React__default['default'].useState(combinedValue.filteredHelpTopics || []);
+    return {
+        helpTopics,
+        setHelpTopics,
+        activeHelpTopic,
+        setActiveHelpTopicByName,
+        filteredHelpTopics,
+        setFilteredHelpTopics,
+        loading,
+        setLoading,
+    };
+};
+
+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);
+    const toggleHelpTopicMenu = () => {
+        setIsHelpTopicMenuOpen(!isHelpTopicMenuOpen);
+    };
+    const onSelectHelpTopic = (event) => {
+        const topicName = event.currentTarget.id;
+        setActiveHelpTopicByName(topicName);
+        toggleHelpTopicMenu();
+    };
+    const menuItems = filteredHelpTopics.length > 0 &&
+        filteredHelpTopics.map((topic) => {
+            return (React__namespace.createElement(reactCore.OptionsMenuItem, { key: topic.name, onSelect: onSelectHelpTopic, id: topic.name }, topic.title));
+        });
+    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 })),
+        ((_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,
+                React__namespace.createElement("div", { className: "pfext-quick-start-panel-content__title" },
+                    menuItems && (React__namespace.createElement(reactCore.OptionsMenu, { id: 'helptopics', isPlain: true, isOpen: isHelpTopicMenuOpen, toggle: React__namespace.createElement(reactCore.OptionsMenuToggle, { style: { paddingLeft: '0px' }, onToggle: toggleHelpTopicMenu, toggleTemplate: React__namespace.createElement(BarsIcon__default['default'], null) }), menuItems: menuItems })),
+                    React__namespace.createElement(reactCore.Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)),
+                React__namespace.createElement(reactCore.DrawerActions, null,
+                    React__namespace.createElement(reactCore.DrawerCloseButton, { onClick: onClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))),
+            React__namespace.createElement(reactCore.Divider, null),
+            React__namespace.createElement(reactCore.DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" }, panelBodyItems))));
+    return content;
+};
+
+const HelpTopicContainer = (_a) => {
+    var { helpTopics, children, resourceBundle, language, loading = false, markdown, contextProps } = _a, props = tslib.__rest(_a, ["helpTopics", "children", "resourceBundle", "language", "loading", "markdown", "contextProps"]);
+    const valuesForHelpTopicContext = useValuesForHelpTopicContext(Object.assign({ helpTopics,
+        language, resourceBundle: Object.assign({}, resourceBundle), loading,
+        markdown }, contextProps));
+    React__namespace.useEffect(() => {
+        if (loading !== valuesForHelpTopicContext.loading) {
+            valuesForHelpTopicContext.setLoading(loading);
+        }
+    }, [loading, valuesForHelpTopicContext]);
+    React__namespace.useEffect(() => {
+        if (helpTopics &&
+            JSON.stringify(helpTopics) !== JSON.stringify(valuesForHelpTopicContext.helpTopics)) {
+            valuesForHelpTopicContext.setHelpTopics(helpTopics);
+        }
+    }, [helpTopics, valuesForHelpTopicContext]);
+    const drawerProps = Object.assign({}, props);
+    return (React__namespace.createElement(HelpTopicContext.Provider, { value: valuesForHelpTopicContext },
+        React__namespace.createElement(HelpTopicDrawer, Object.assign({}, drawerProps), children)));
+};
+const HelpTopicDrawer = (_a) => {
+    var { children } = _a, props = tslib.__rest(_a, ["children"]);
+    const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React__namespace.useContext(HelpTopicContext);
+    const onClose = () => {
+        setActiveHelpTopicByName('');
+    };
+    const panelContent = (React__namespace.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics, onClose: onClose }));
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(reactCore.Drawer, Object.assign({ isExpanded: !!activeHelpTopic, isInline: true }, props), children ? (React__namespace.createElement(reactCore.DrawerContent, { panelContent: panelContent },
+            React__namespace.createElement(reactCore.DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React__namespace.createElement("div", { className: "pf-c-drawer__main" }, panelContent)))));
+};
+
 const useLocalStorage = (key, initialValue) => {
     // State to store our value
     // Pass initial state function to useState so logic is only executed once
@@ -2374,6 +2503,11 @@ const useLocalStorage = (key, initialValue) => {
 exports.Box = Box;
 exports.CamelCaseWrap = CamelCaseWrap;
 exports.EmptyBox = EmptyBox;
+exports.HELP_TOPIC_NAME_KEY = HELP_TOPIC_NAME_KEY;
+exports.HelpTopicContainer = HelpTopicContainer;
+exports.HelpTopicContext = HelpTopicContext;
+exports.HelpTopicContextDefaults = HelpTopicContextDefaults;
+exports.HelpTopicDrawer = HelpTopicDrawer;
 exports.Loading = Loading;
 exports.LoadingBox = LoadingBox;
 exports.QUICKSTART_ID_FILTER_KEY = QUICKSTART_ID_FILTER_KEY;
@@ -2422,5 +2556,6 @@ exports.isDisabledQuickStart = isDisabledQuickStart;
 exports.removeQueryArgument = removeQueryArgument;
 exports.setQueryArgument = setQueryArgument;
 exports.useLocalStorage = useLocalStorage;
+exports.useValuesForHelpTopicContext = useValuesForHelpTopicContext;
 exports.useValuesForQuickStartContext = useValuesForQuickStartContext;
 //# sourceMappingURL=index.js.map