@patternfly/quickstarts 2.2.0 → 2.2.1

package/dist/index.js

@@ -2340,6 +2340,7 @@ const QuickStartDrawer = (_a) => {
 
 const HelpTopicContextDefaults = {
     helpTopics: [],
+    setHelpTopics: () => { },
     activeHelpTopic: null,
     setActiveHelpTopicByName: () => { },
     filteredHelpTopics: [],
@@ -2366,6 +2367,7 @@ const useValuesForHelpTopicContext = (value = {}) => {
     const [filteredHelpTopics, setFilteredHelpTopics] = React__default['default'].useState(combinedValue.filteredHelpTopics || []);
     return {
         helpTopics,
+        setHelpTopics,
         activeHelpTopic,
         setActiveHelpTopicByName,
         filteredHelpTopics,
@@ -2376,7 +2378,7 @@ const useValuesForHelpTopicContext = (value = {}) => {
 };
 
 const HelpTopicPanelContent = (_a) => {
-    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true } = _a, props = tslib.__rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable"]);
+    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 = () => {
@@ -2387,24 +2389,27 @@ const HelpTopicPanelContent = (_a) => {
         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 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 })),
+        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 });
+        }))));
     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))),
+                    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" },
-                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 });
-                    })))))));
+            React__namespace.createElement(reactCore.DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" }, panelBodyItems))));
     return content;
 };
 
@@ -2418,6 +2423,12 @@ const HelpTopicContainer = (_a) => {
             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)));
@@ -2426,7 +2437,7 @@ const HelpTopicDrawer = (_a) => {
     var { 
     // helpTopics,
     children } = _a, props = tslib.__rest(_a, ["children"]);
-    const { activeHelpTopic, filteredHelpTopics } = React__namespace.useContext(HelpTopicContext);
+    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);
@@ -2437,7 +2448,10 @@ const HelpTopicDrawer = (_a) => {
     //     setActiveHelpTopicByName(helpTopicNameFromParam);
     //   }
     // }, [inContextHelpTopics, setActiveHelpTopicByName]);
-    const panelContent = (React__namespace.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics }));
+    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)))));