@patternfly/quickstarts 2.1.0 → 2.2.2

package/README.md

@@ -207,6 +207,30 @@ You can have inline or block copyable text.
     ```{{copy}}
 ```
 
+## Markdown extensions
+If your source material content is defined in markdown (yaml + markdown / json + markdown), then you can add your own markdown extensions, example:
+```
+const drawerProps: QuickStartContainerProps = {
+  markdown: {
+    extensions: [
+      // variable substitution example
+      // this replaces the strings [APPLICATION] and [PRODUCT]
+      {
+        type: 'output',
+        filter: function(html: string) {
+          html = html.replace(/\[APPLICATION\]/g, 'Mercury');
+          html = html.replace(/\[PRODUCT\]/g, 'Lightning');
+
+          return html;
+        },
+      },
+    ],
+  },
+};
+
+return <QuickStartContainer {...drawerProps}>My page content</QuickStartContainer>
+```
+
 ## Localization
 We use English as the default language. You can override the default by providing your own key/value pairs to the `QuickStartContainer` or `QuickStartContextProvider` resourceBundle prop.
 
@@ -230,3 +254,284 @@ Use this [file](https://github.com/patternfly/patternfly-quickstarts/blob/main/p
 Each language is different, especially when it comes to plurals. Try [this utility](https://jsfiddle.net/6bpxsgd4) sourced from [i18next](https://www.i18next.com/translation-function/plurals#how-to-find-the-correct-plural-suffix) to determine the suffixes for the right plural format.
 
 For localizing the content of quick starts files, we provide the option to include `language` and `countryCode` key to your translated file. Based on these keys you can filter out quick starts. We have a demo of this behaviour in our [demo app](https://quickstarts.netlify.app/quickstarts-localized). You can have a look at the code [here](https://github.com/patternfly/patternfly-quickstarts/blob/main/packages/dev/src/AppLocalized.tsx).
+
+## In-App / In Context Help Panel
+
+The quickstarts package is being extended to support a side panel that displays smaller chunks (defined as the `HelpTopic` type) of documentation.
+
+### Help Topic type definition
+
+```ts
+type HelpTopicLink = {
+  href: string;
+  text?: string;
+  // open link in new tab
+  newTab?: boolean;
+  // add PF icon indicating link is external
+  isExternal?: boolean;
+};
+
+type HelpTopic = {
+  name: string;
+  title: string;
+  tags: string[];
+  content: string;
+  links: HelpTopicLink[];
+};
+```
+
+### Example Help Topic in yaml with markdown support for content and links
+
+```yml
+- name: auto-deploy
+  tags:
+    - page-1
+  title: Automatic Deployment
+  content: |-
+    **An Automatic Deployment** is...
+
+    Etiam viverra et tortor et maximus. Aliquam quis scelerisque metus. Proin luctus pretium sodales. Mauris nibh nibh, auctor eu scelerisque et, hendrerit a metus. Vivamus pharetra bibendum finibus. Sed a pulvinar ipsum. Fusce pharetra venenatis porttitor. Praesent justo metus, consectetur quis erat id, congue varius metus. Suspendisse dui est, tempor nec diam quis, facilisis sodales erat. Curabitur viverra convallis ex. Ut egestas condimentum augue, id euismod leo volutpat vitae. Quisque aliquet ac dolor quis pretium. Nunc at nibh quis arcu maximus elementum vel a mi.
+  links:
+    - text: 'Creating quick starts (external)'
+      href: 'https://docs.openshift.com/container-platform/4.9/web_console/creating-quick-start-tutorials.html'
+      isExternal: true
+    - text: 'Redhat Console (opens in new tab)'
+      href: 'https://console.redhat.com'
+      newTab: true
+```
+
+### Usage Example
+
+See the [HelpTopicDemo](https://github.com/patternfly/patternfly-quickstarts/blob/6b35d3c346b3e92ed0003de955421c8dff58a22b/packages/dev/src/AppHelpTopicDemo.tsx)
+
+- Similar to standard Quickstarts usage
+- Load yaml defined `HelpTopic` array
+- Pass `HelpTopicContainerProps`, including loaded `HelpTopics` to the `<HelpTopicContainer/>`
+
+```tsx
+import './App.css';
+import { Page } from '@patternfly/react-core';
+import { LoadingBox, HelpTopicContainerProps, HelpTopicContainer } from '@patternfly/quickstarts';
+import { helpTopics } from './quickstarts-data/quick-start-test-data';
+import React from 'react';
+import i18n from './i18n/i18n';
+import { AppHeader, AppSidebar } from './common/Page';
+
+type AppProps = {
+  children?: React.ReactNode;
+  showCardFooters?: boolean;
+};
+
+const AppHelpTopicDemo: React.FC<AppProps> = ({ children }) => {
+  const language = localStorage.getItem('bridge/language') || 'en';
+  const resourceBundle = i18n.getResourceBundle(language, 'quickstart');
+
+  const [loading, setLoading] = React.useState(true);
+  React.useEffect(() => {
+    const load = async () => {
+      setLoading(false);
+    };
+    setTimeout(() => {
+      load();
+    }, 500);
+  }, []);
+
+  const inContextHelpProps: HelpTopicContainerProps = {
+    helpTopics,
+    resourceBundle,
+    language,
+    loading,
+  };
+
+  return (
+    <React.Suspense fallback={<LoadingBox />}>
+      <HelpTopicContainer {...inContextHelpProps}>
+        <Page header={AppHeader} sidebar={AppSidebar} isManagedSidebar>
+          {children}
+        </Page>
+      </HelpTopicContainer>
+    </React.Suspense>
+  );
+};
+```
+
+In the example above `<HelpTopicContainer />` wraps the `<Page/>` element as well as a mock "console" showing how to trigger the side panel and allow navigation to all `HelpTopics` available on each console page:
+
+Live [preview](https://deploy-preview-140--quickstarts.netlify.app/in-context-help) of code below:
+
+```tsx
+import * as React from 'react';
+import {
+  Banner,
+  Button,
+  Divider,
+  Form,
+  FormGroup,
+  PageSection,
+  Popover,
+  Split,
+  SplitItem,
+  TextInput,
+  Title,
+} from '@patternfly/react-core';
+import { HelpTopicContext, HelpTopicContextValues } from '@patternfly/quickstarts';
+import HelpIcon from '@patternfly/react-icons/dist/js/icons/help-icon';
+import { HelpTopic } from '@patternfly/quickstarts/dist/utils/help-topic-types';
+
+// Example usage of topics, render certain topics depending on the page
+// used this case when "consolePageState" below is between 4 - 6
+// these HelpTopics with the following names will be rendered
+const helpTopicNamesByPage = [
+  ['auto-deploy', 'code-sample', 'manual-deployment'],
+  ['manual-deployment', 'target-port', 'build-configuration'],
+  ['deploy-configuration', 'environment-variables', 'health-checks'],
+];
+
+interface FormGroupWithHelpTopicPopoverProps extends React.HTMLProps<HTMLDivElement> {
+  topic: HelpTopic;
+}
+
+// Example usage of setActiveHelpTopicByName()
+// render a popover with a learn more link to open the drawer
+const FormGroupWithHelpTopicPopover: React.FC<FormGroupWithHelpTopicPopoverProps> = ({ topic }) => {
+  const { setActiveHelpTopicByName } = React.useContext<HelpTopicContextValues>(HelpTopicContext);
+
+  return (
+    <FormGroup
+      label={topic.title}
+      isRequired
+      fieldId={topic.name}
+      key={topic.name}
+      labelIcon={
+        <Popover
+          bodyContent={(hide) => (
+            <div>
+              {topic.title} is quite amaizing{' '}
+              <Button
+                variant="link"
+                onClick={() => {
+                  setActiveHelpTopicByName(topic.name);
+                  hide();
+                }}
+              >
+                Learn more
+              </Button>
+            </div>
+          )}
+        >
+          <Button variant="plain">
+            <HelpIcon noVerticalAlign />
+          </Button>
+        </Popover>
+      }
+    >
+      <TextInput isRequired type="text" id={topic.name} />
+    </FormGroup>
+  );
+};
+
+export const MockConsole: React.FC = () => {
+  const { helpTopics, setFilteredHelpTopics, filteredHelpTopics, setActiveHelpTopicByName } =
+    React.useContext<HelpTopicContextValues>(HelpTopicContext);
+
+  // mock console page identifiers: 1 - 6
+  // click handlers to change page
+  const [consolePageState, setConsolePageState] = React.useState(1);
+
+  const handleClickNext = () => {
+    setActiveHelpTopicByName('');
+    if (consolePageState === 6) {
+      setConsolePageState(1);
+      return;
+    }
+    setConsolePageState(consolePageState + 1);
+  };
+
+  const handleClickBack = () => {
+    setActiveHelpTopicByName('');
+    if (consolePageState === 6) {
+      setConsolePageState(4);
+      return;
+    }
+    setConsolePageState(consolePageState - 1);
+  };
+
+  // Example usage setFilteredHelpTopics()
+  // After rendering the console, set the filtered help topics
+  React.useEffect(() => {
+    // set filtered topics using tags, matching to the consolePageState
+    if (consolePageState < 4) {
+      const topics = helpTopics.filter((topic: HelpTopic) => {
+        const pageTagNumbers = topic.tags.map((tag: string) => {
+          return Number(tag.slice(-1));
+        });
+        return pageTagNumbers.includes(consolePageState);
+      });
+      setFilteredHelpTopics(topics);
+    } else {
+      // set filtered topics using the appropriate helpTopicNamesByPage array above
+      setFilteredHelpTopics(
+        helpTopics.filter((topic) => {
+          return helpTopicNamesByPage[consolePageState - 4].includes(topic.name);
+        }),
+      );
+    }
+  }, [consolePageState, helpTopics, setFilteredHelpTopics]);
+
+  // Render filteredHelpTopics in a <FormGroupWithHelpTopicPopover />
+  const formGroupsFromTags = filteredHelpTopics.map((topic: HelpTopic, index) => {
+    return <FormGroupWithHelpTopicPopover topic={topic} key={index} />;
+  });
+
+  // From an array of topic names, render all topics in a <FormGroupWithHelpTopicPopover />
+  const formGroupsFromTopicNames = (helpTopicNames: string[]) => {
+    return helpTopicNames.map((topicName: string, index) => {
+      const topicToRender = helpTopics.find((topic) => {
+        return topicName === topic.name;
+      });
+
+      if (topicToRender) {
+        return <FormGroupWithHelpTopicPopover topic={topicToRender} key={index} />;
+      }
+    });
+  };
+
+  return (
+    <>
+      <PageSection>
+        <Banner variant="info">
+          <Title headingLevel="h1">Console Page {consolePageState}</Title>
+        </Banner>
+      </PageSection>
+      <PageSection>
+        <Title headingLevel="h3">
+          Example usage of help topics opened via popover{' '}
+          <b>
+            {consolePageState < 4
+              ? 'using tags that match the Console Page number'
+              : 'by defining which help topics should be present on each page'}
+          </b>
+        </Title>
+        <Divider />
+        <Form>
+          {consolePageState < 4
+            ? formGroupsFromTags
+            : formGroupsFromTopicNames(helpTopicNamesByPage[consolePageState - 4])}
+        </Form>
+      </PageSection>
+      <PageSection>
+        <Split hasGutter>
+          <SplitItem>
+            <Button onClick={handleClickBack} variant="tertiary">
+              Previous
+            </Button>
+          </SplitItem>
+          <SplitItem>
+            <Button onClick={handleClickNext}>Next</Button>
+          </SplitItem>
+        </Split>
+      </PageSection>
+    </>
+  );
+};
+```

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

@@ -0,0 +1,7 @@
+import './showdown-extension.scss';
+declare const useCodeShowdownExtension: () => {
+    type: string;
+    regex: RegExp;
+    replace: (text: string, content: string) => string;
+};
+export default useCodeShowdownExtension;

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

@@ -2,3 +2,4 @@ export { default as MarkdownCopyClipboard } from './MarkdownCopyClipboard';
 export { default as useInlineCopyClipboardShowdownExtension } from './inline-clipboard-extension';
 export { default as useMultilineCopyClipboardShowdownExtension } from './multiline-clipboard-extension';
 export { default as useAdmonitionShowdownExtension } from './admonition-extension';
+export { default as useCodeShowdownExtension } from './code-extension';

package/dist/HelpTopicDrawer.d.ts

@@ -0,0 +1,26 @@
+import './QuickStartDrawer.scss';
+import * as React from 'react';
+import { QuickStartContextValues } from './utils/quick-start-context';
+import { HelpTopic } from './utils/help-topic-types';
+export interface HelpTopicContainerProps extends React.HTMLProps<HTMLDivElement> {
+    helpTopics: HelpTopic[];
+    resourceBundle?: any;
+    language?: string;
+    loading?: boolean;
+    /**
+     * Additional markdown extensions and renderers to use
+     * TODO: example usage - In the meantime you can take a look at:
+     * https://github.com/openshift/console/blob/master/frontend/packages/console-app/src/components/quick-starts/utils/quick-start-context.tsx#L235
+     */
+    markdown?: {
+        extensions?: any[];
+        renderExtension?: (docContext: HTMLDocument, rootSelector: string) => React.ReactNode;
+    };
+    contextProps?: QuickStartContextValues;
+}
+export declare const HelpTopicContainer: React.FC<HelpTopicContainerProps>;
+export interface HelpTopicDrawerProps extends React.HTMLProps<HTMLDivElement> {
+    helpTopics?: HelpTopic[];
+    children?: React.ReactNode;
+}
+export declare const HelpTopicDrawer: React.FC<HelpTopicDrawerProps>;

package/dist/HelpTopicPanelContent.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { HelpTopic } from './utils/help-topic-types';
+import './QuickStartPanelContent.scss';
+declare type HelpTopicPanelContentProps = {
+    activeHelpTopic: HelpTopic;
+    filteredHelpTopics?: HelpTopic[];
+    isResizable?: boolean;
+    onClose: () => void;
+};
+declare const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps>;
+export default HelpTopicPanelContent;

package/dist/index.d.ts

@@ -3,9 +3,12 @@ export * from './QuickStartCatalogPage';
 export * from './catalog';
 export * from './ConsoleInternal/components/utils';
 export * from './QuickStartDrawer';
+export * from './HelpTopicDrawer';
 export * from './utils/const';
 export * from './utils/quick-start-context';
 export * from './utils/quick-start-types';
+export * from './utils/help-topic-context';
+export * from './utils/help-topic-types';
 export * from './utils/quick-start-utils';
 export * from './utils/useLocalStorage';
 export { default as QuickStartPanelContent } from './QuickStartPanelContent';

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 } from '@patternfly/react-core';
+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 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';
@@ -21,6 +21,7 @@ import { Converter } from 'showdown';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -72,7 +73,8 @@ const QUICKSTART_ID_FILTER_KEY = 'quickstart';
 const QUICKSTART_TASKS_INITIAL_STATES = [
     QuickStartTaskStatus.INIT,
     QuickStartTaskStatus.VISITED,
-];
+];
+const HELP_TOPIC_NAME_KEY = 'topic';
 
 let createHistory;
 try {
@@ -1313,6 +1315,20 @@ const useAdmonitionShowdownExtension = () => {
     }), []);
 };
 
+const useCodeShowdownExtension = () => {
+    return React.useMemo(() => ({
+        type: 'output',
+        regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
+        replace: (text, content) => {
+            if (!content) {
+                return text;
+            }
+            const pfCodeBlock = React.createElement(CodeBlock, null, content);
+            return removeTemplateWhitespace(renderToStaticMarkup(pfCodeBlock));
+        },
+    }), []);
+};
+
 const FallbackImg = ({ src, alt, className, fallback }) => {
     const [isSrcValid, setIsSrcValid] = React.useState(true);
     if (src && isSrcValid) {
@@ -1553,6 +1569,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
     const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
     const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
     const admonitionShowdownExtension = useAdmonitionShowdownExtension();
+    const codeShowdownExtension = useCodeShowdownExtension();
     return (React.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
             {
                 type: 'lang',
@@ -1575,11 +1592,14 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
             inlineCopyClipboardShowdownExtension,
             multilineCopyClipboardShowdownExtension,
             admonitionShowdownExtension,
+            codeShowdownExtension,
             ...(markdown ? markdown.extensions : []),
         ], renderExtension: (docContext, rootSelector) => (React.createElement(React.Fragment, null,
             React.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
             React.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, }) => {
@@ -1692,7 +1712,7 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
 
 const QuickStartCatalog = ({ quickStarts }) => {
     const { activeQuickStartID, allQuickStartStates } = React.useContext(QuickStartContext);
-    return (React.createElement("div", { className: "pfext-page-layout__content pfext-is-dark" },
+    return (React.createElement("div", { className: "pfext-page-layout__content" },
         React.createElement(Gallery, { className: "pfext-quick-start-catalog__gallery", hasGutter: true }, quickStarts.map((quickStart) => {
             const { metadata: { name: id }, } = quickStart;
             return (React.createElement(GalleryItem, { key: id, className: "pfext-quick-start-catalog__gallery-item" },
@@ -1897,7 +1917,7 @@ const QuickStartCatalogHeader = ({ title, hint, }) => (React.createElement("div"
     React.createElement("h1", { "data-pf-content": "true", className: "pfext-page-layout__title" }, title),
     hint && React.createElement("div", { className: "pfext-page-layout__hint" }, hint)));
 
-const QuickStartCatalogSection = ({ children }) => (React.createElement("div", { className: "pfext-page-layout__content pfext-is-dark" }, children));
+const QuickStartCatalogSection = ({ children }) => (React.createElement("div", { className: "pfext-page-layout__content" }, children));
 
 const QuickStartCatalogToolbar = ({ children }) => (React.createElement(Toolbar, { usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, children));
 
@@ -2149,11 +2169,10 @@ const useScrollTopOnTaskNumberChange = (node, taskNumber) => {
 };
 const QuickStartPanelContent = (_a) => {
     var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, headerVariant = '' } = _a, props = __rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
-    const { getResource } = React.useContext(QuickStartContext);
+    const { getResource, activeQuickStartState } = React.useContext(QuickStartContext);
     const [contentRef, setContentRef] = React.useState();
     const shadows = useScrollShadows(contentRef);
     const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
-    const { activeQuickStartState } = React.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); });
@@ -2293,6 +2312,115 @@ const QuickStartDrawer = (_a) => {
         React.createElement(QuickStartCloseModal, { isOpen: modalOpen, onConfirm: onModalConfirm, onCancel: onModalCancel })));
 };
 
+const HelpTopicContextDefaults = {
+    helpTopics: [],
+    setHelpTopics: () => { },
+    activeHelpTopic: null,
+    setActiveHelpTopicByName: () => { },
+    filteredHelpTopics: [],
+    setFilteredHelpTopics: () => { },
+    loading: false,
+};
+const HelpTopicContext = React__default.createContext(HelpTopicContextDefaults);
+const useValuesForHelpTopicContext = (value = {}) => {
+    const combinedValue = Object.assign(Object.assign({}, HelpTopicContextDefaults), value);
+    const [loading, setLoading] = React__default.useState(combinedValue.loading);
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+    const [helpTopics, setHelpTopics] = React__default.useState(combinedValue.helpTopics || []);
+    const [activeHelpTopic, setActiveHelpTopic] = React__default.useState(combinedValue.activeHelpTopic || null);
+    const setActiveHelpTopicByName = React__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.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 = __rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable", "onClose"]);
+    const { setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
+    const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React.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.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 })),
+        ((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React.createElement(Divider, null),
+        paddingContainer(React.createElement(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.createElement(StackItem, { key: index },
+                React.createElement(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.createElement(ExternalLinkAltIcon, null) : null, iconPosition: "right", style: { fontSize: 'inherit' } }, text || href)));
+        })))));
+    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" },
+                    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" }, panelBodyItems))));
+    return content;
+};
+
+const HelpTopicContainer = (_a) => {
+    var { helpTopics, children, resourceBundle, language, loading = false, markdown, contextProps } = _a, props = __rest(_a, ["helpTopics", "children", "resourceBundle", "language", "loading", "markdown", "contextProps"]);
+    const valuesForHelpTopicContext = useValuesForHelpTopicContext(Object.assign({ helpTopics,
+        language, resourceBundle: Object.assign({}, resourceBundle), loading,
+        markdown }, contextProps));
+    React.useEffect(() => {
+        if (loading !== valuesForHelpTopicContext.loading) {
+            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)));
+};
+const HelpTopicDrawer = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
+    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)))));
+};
+
 const useLocalStorage = (key, initialValue) => {
     // State to store our value
     // Pass initial state function to useState so logic is only executed once
@@ -2330,5 +2458,5 @@ const useLocalStorage = (key, initialValue) => {
     return [storedValue, setValue];
 };
 
-export { Box, CamelCaseWrap, EmptyBox, Loading, LoadingBox, QUICKSTART_ID_FILTER_KEY, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICK_START_NAME, QuickStartCatalog, QuickStartCatalogEmptyState, QuickStartCatalogFilter, QuickStartCatalogFilterCount, QuickStartCatalogFilterCountWrapper, QuickStartCatalogFilterSearch, QuickStartCatalogFilterSearchWrapper, QuickStartCatalogFilterSelect, QuickStartCatalogFilterStatusWrapper, QuickStartCatalogHeader, QuickStartCatalogPage, QuickStartCatalogSection, QuickStartCatalogToolbar, QuickStartCloseModal, QuickStartContainer, QuickStartContext, QuickStartContextDefaults, QuickStartContextProvider, QuickStartDrawer, QuickStartPanelContent, QuickStartStatus, QuickStartTaskStatus, QuickStartTile, QuickStartTileDescription, QuickStartTileFooter, QuickStartTileFooterExternal, QuickStartTileHeader, camelize, clearFilterParams, equalsIgnoreOrder, filterQuickStarts, getDefaultQuickStartState, getDisabledQuickStarts, getQuickStartByName, getQuickStartStatus, getQuickStartStatusCount, getResource, getTaskStatusKey, history, isDisabledQuickStart, removeQueryArgument, setQueryArgument, useLocalStorage, useValuesForQuickStartContext };
+export { Box, CamelCaseWrap, EmptyBox, HELP_TOPIC_NAME_KEY, HelpTopicContainer, HelpTopicContext, HelpTopicContextDefaults, HelpTopicDrawer, Loading, LoadingBox, QUICKSTART_ID_FILTER_KEY, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICK_START_NAME, QuickStartCatalog, QuickStartCatalogEmptyState, QuickStartCatalogFilter, QuickStartCatalogFilterCount, QuickStartCatalogFilterCountWrapper, QuickStartCatalogFilterSearch, QuickStartCatalogFilterSearchWrapper, QuickStartCatalogFilterSelect, QuickStartCatalogFilterStatusWrapper, QuickStartCatalogHeader, QuickStartCatalogPage, QuickStartCatalogSection, QuickStartCatalogToolbar, QuickStartCloseModal, QuickStartContainer, QuickStartContext, QuickStartContextDefaults, QuickStartContextProvider, QuickStartDrawer, QuickStartPanelContent, QuickStartStatus, QuickStartTaskStatus, QuickStartTile, QuickStartTileDescription, QuickStartTileFooter, QuickStartTileFooterExternal, QuickStartTileHeader, camelize, clearFilterParams, equalsIgnoreOrder, filterQuickStarts, getDefaultQuickStartState, getDisabledQuickStarts, getQuickStartByName, getQuickStartStatus, getQuickStartStatusCount, getResource, getTaskStatusKey, history, isDisabledQuickStart, removeQueryArgument, setQueryArgument, useLocalStorage, useValuesForHelpTopicContext, useValuesForQuickStartContext };
 //# sourceMappingURL=index.es.js.map