@patternfly/quickstarts 2.2.0 → 2.2.1

package/README.md

@@ -308,7 +308,7 @@ See the [HelpTopicDemo](https://github.com/patternfly/patternfly-quickstarts/blo
 - Load yaml defined `HelpTopic` array
 - Pass `HelpTopicContainerProps`, including loaded `HelpTopics` to the `<HelpTopicContainer/>`
 
-```ts
+```tsx
 import './App.css';
 import { Page } from '@patternfly/react-core';
 import { LoadingBox, HelpTopicContainerProps, HelpTopicContainer } from '@patternfly/quickstarts';
@@ -359,7 +359,7 @@ In the example above `<HelpTopicContainer />` wraps the `<Page/>` element as wel
 
 Live [preview](https://deploy-preview-140--quickstarts.netlify.app/in-context-help) of code below:
 
-```ts
+```tsx
 import * as React from 'react';
 import {
   Banner,

package/dist/HelpTopicPanelContent.d.ts

@@ -5,6 +5,7 @@ declare type HelpTopicPanelContentProps = {
     activeHelpTopic: HelpTopic;
     filteredHelpTopics?: HelpTopic[];
     isResizable?: boolean;
+    onClose: () => void;
 };
 declare const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps>;
 export default HelpTopicPanelContent;

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, 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, OptionsMenu, OptionsMenuToggle, Stack, StackItem } from '@patternfly/react-core';
+import { Card, CardHeader, CardActions, CardTitle, CardBody, CardFooter, Modal as Modal$1, Tooltip, Alert, 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, 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';
@@ -2298,6 +2298,7 @@ const QuickStartDrawer = (_a) => {
 
 const HelpTopicContextDefaults = {
     helpTopics: [],
+    setHelpTopics: () => { },
     activeHelpTopic: null,
     setActiveHelpTopicByName: () => { },
     filteredHelpTopics: [],
@@ -2324,6 +2325,7 @@ const useValuesForHelpTopicContext = (value = {}) => {
     const [filteredHelpTopics, setFilteredHelpTopics] = React__default.useState(combinedValue.filteredHelpTopics || []);
     return {
         helpTopics,
+        setHelpTopics,
         activeHelpTopic,
         setActiveHelpTopicByName,
         filteredHelpTopics,
@@ -2334,7 +2336,7 @@ const useValuesForHelpTopicContext = (value = {}) => {
 };
 
 const HelpTopicPanelContent = (_a) => {
-    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true } = _a, props = __rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable"]);
+    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true, onClose } = _a, props = __rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable", "onClose"]);
     const { setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
     const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React.useState(false);
     const toggleHelpTopicMenu = () => {
@@ -2345,24 +2347,27 @@ const HelpTopicPanelContent = (_a) => {
         setActiveHelpTopicByName(topicName);
         toggleHelpTopicMenu();
     };
-    const menuItems = filteredHelpTopics.map((topic) => {
-        return (React.createElement(OptionsMenuItem, { key: topic.name, onSelect: onSelectHelpTopic, id: topic.name }, topic.title));
-    });
+    const menuItems = filteredHelpTopics.length > 0 &&
+        filteredHelpTopics.map((topic) => {
+            return (React.createElement(OptionsMenuItem, { key: topic.name, onSelect: onSelectHelpTopic, id: topic.name }, topic.title));
+        });
+    const paddingContainer = (children) => React.createElement("div", { style: { padding: '24px' } }, children);
+    const panelBodyItems = (React.createElement(React.Fragment, null,
+        paddingContainer(React.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
+        React.createElement(Divider, null),
+        paddingContainer(activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links.map((link) => {
+            return React.createElement(QuickStartMarkdownView, { key: link, content: link });
+        }))));
     const content = (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base" }, props),
         React.createElement("div", null,
             React.createElement(DrawerHead, null,
                 React.createElement("div", { className: "pfext-quick-start-panel-content__title" },
-                    React.createElement(OptionsMenu, { id: 'helptopics', isPlain: true, isOpen: isHelpTopicMenuOpen, toggle: React.createElement(OptionsMenuToggle, { onToggle: toggleHelpTopicMenu, toggleTemplate: React.createElement(BarsIcon, null) }), menuItems: menuItems }),
-                    React.createElement(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.createElement(OptionsMenu, { id: 'helptopics', isPlain: true, isOpen: isHelpTopicMenuOpen, toggle: React.createElement(OptionsMenuToggle, { style: { paddingLeft: '0px' }, onToggle: toggleHelpTopicMenu, toggleTemplate: React.createElement(BarsIcon, null) }), menuItems: menuItems })),
+                    React.createElement(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.createElement(DrawerActions, null,
+                    React.createElement(DrawerCloseButton, { onClick: onClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))),
             React.createElement(Divider, null),
-            React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
-                React.createElement(Stack, { hasGutter: true },
-                    React.createElement(StackItem, { style: { padding: '20px' } },
-                        React.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
-                    React.createElement(Divider, null),
-                    React.createElement(StackItem, { style: { padding: '20px' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links.map((link) => {
-                        return React.createElement(QuickStartMarkdownView, { key: link, content: link });
-                    })))))));
+            React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" }, panelBodyItems))));
     return content;
 };
 
@@ -2376,6 +2381,12 @@ const HelpTopicContainer = (_a) => {
             valuesForHelpTopicContext.setLoading(loading);
         }
     }, [loading, valuesForHelpTopicContext]);
+    React.useEffect(() => {
+        if (helpTopics &&
+            JSON.stringify(helpTopics) !== JSON.stringify(valuesForHelpTopicContext.helpTopics)) {
+            valuesForHelpTopicContext.setHelpTopics(helpTopics);
+        }
+    }, [helpTopics, valuesForHelpTopicContext]);
     const drawerProps = Object.assign({}, props);
     return (React.createElement(HelpTopicContext.Provider, { value: valuesForHelpTopicContext },
         React.createElement(HelpTopicDrawer, Object.assign({}, drawerProps), children)));
@@ -2384,7 +2395,7 @@ const HelpTopicDrawer = (_a) => {
     var { 
     // helpTopics,
     children } = _a, props = __rest(_a, ["children"]);
-    const { activeHelpTopic, filteredHelpTopics } = React.useContext(HelpTopicContext);
+    const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
     // Leave here if query param is desired for help topics later
     // React.useEffect(() => {
     //   const params = new URLSearchParams(window.location.search);
@@ -2395,7 +2406,10 @@ const HelpTopicDrawer = (_a) => {
     //     setActiveHelpTopicByName(helpTopicNameFromParam);
     //   }
     // }, [inContextHelpTopics, setActiveHelpTopicByName]);
-    const panelContent = (React.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics }));
+    const onClose = () => {
+        setActiveHelpTopicByName('');
+    };
+    const panelContent = (React.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics, onClose: onClose }));
     return (React.createElement(React.Fragment, null,
         React.createElement(Drawer, Object.assign({ isExpanded: !!activeHelpTopic, isInline: true }, props), children ? (React.createElement(DrawerContent, { panelContent: panelContent },
             React.createElement(DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React.createElement("div", { className: "pf-c-drawer__main" }, panelContent)))));