@patternfly/quickstarts 2.1.0 → 2.2.0

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 {
@@ -1620,7 +1623,9 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
         ], 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, }) => {
@@ -2190,11 +2195,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 +2338,111 @@ const QuickStartDrawer = (_a) => {
         React__namespace.createElement(QuickStartCloseModal, { isOpen: modalOpen, onConfirm: onModalConfirm, onCancel: onModalCancel })));
 };
 
+const HelpTopicContextDefaults = {
+    helpTopics: [],
+    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,
+        activeHelpTopic,
+        setActiveHelpTopicByName,
+        filteredHelpTopics,
+        setFilteredHelpTopics,
+        loading,
+        setLoading,
+    };
+};
+
+const HelpTopicPanelContent = (_a) => {
+    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true } = _a, props = tslib.__rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable"]);
+    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.map((topic) => {
+        return (React__namespace.createElement(reactCore.OptionsMenuItem, { key: topic.name, onSelect: onSelectHelpTopic, id: topic.name }, topic.title));
+    });
+    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" },
+                    React__namespace.createElement(reactCore.OptionsMenu, { id: 'helptopics', isPlain: true, isOpen: isHelpTopicMenuOpen, toggle: React__namespace.createElement(reactCore.OptionsMenuToggle, { 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.Divider, null),
+            React__namespace.createElement(reactCore.DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
+                React__namespace.createElement(reactCore.Stack, { hasGutter: true },
+                    React__namespace.createElement(reactCore.StackItem, { style: { padding: '20px' } },
+                        React__namespace.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
+                    React__namespace.createElement(reactCore.Divider, null),
+                    React__namespace.createElement(reactCore.StackItem, { style: { padding: '20px' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links.map((link) => {
+                        return React__namespace.createElement(QuickStartMarkdownView, { key: link, content: link });
+                    })))))));
+    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]);
+    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 { 
+    // helpTopics,
+    children } = _a, props = tslib.__rest(_a, ["children"]);
+    const { activeHelpTopic, filteredHelpTopics } = 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 panelContent = (React__namespace.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics }));
+    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 +2483,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 +2536,6 @@ exports.isDisabledQuickStart = isDisabledQuickStart;
 exports.removeQueryArgument = removeQueryArgument;
 exports.setQueryArgument = setQueryArgument;
 exports.useLocalStorage = useLocalStorage;
+exports.useValuesForHelpTopicContext = useValuesForHelpTopicContext;
 exports.useValuesForQuickStartContext = useValuesForQuickStartContext;
 //# sourceMappingURL=index.js.map