@patternfly/quickstarts 2.0.1 → 2.2.1

package/dist/index.js

@@ -11,6 +11,8 @@ var tslib = require('tslib');
 var ReactDOM = require('react-dom');
 var server = require('react-dom/server');
 var CopyIcon = require('@patternfly/react-icons/dist/js/icons/copy-icon');
+var LightbulbIcon = require('@patternfly/react-icons/dist/js/icons/lightbulb-icon');
+var FireIcon = require('@patternfly/react-icons/dist/js/icons/fire-icon');
 var SyncAltIcon = require('@patternfly/react-icons/dist/js/icons/sync-alt-icon');
 var CheckCircleIcon = require('@patternfly/react-icons/dist/js/icons/check-circle-icon');
 var ExclamationCircleIcon = require('@patternfly/react-icons/dist/js/icons/exclamation-circle-icon');
@@ -22,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 }; }
 
@@ -51,6 +54,8 @@ var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
 var RocketIcon__default = /*#__PURE__*/_interopDefaultLegacy(RocketIcon);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var CopyIcon__default = /*#__PURE__*/_interopDefaultLegacy(CopyIcon);
+var LightbulbIcon__default = /*#__PURE__*/_interopDefaultLegacy(LightbulbIcon);
+var FireIcon__default = /*#__PURE__*/_interopDefaultLegacy(FireIcon);
 var SyncAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SyncAltIcon);
 var CheckCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckCircleIcon);
 var ExclamationCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExclamationCircleIcon);
@@ -58,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) {
@@ -109,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 {
@@ -164,6 +171,7 @@ var Yes = "Yes";
 var No = "No";
 var Cancel = "Cancel";
 var Leave = "Leave";
+var Type = "Quick start";
 var en = {
 	"No results found": "No results found",
 	"No results match the filter criteria. Remove filters or clear all filters to show results.": "No results match the filter criteria. Remove filters or clear all filters to show results.",
@@ -207,7 +215,8 @@ var en = {
 	"Not available": "Not available",
 	"Copy to clipboard": "Copy to clipboard",
 	"Successfully copied to clipboard!": "Successfully copied to clipboard!",
-	"Quick start • {{duration, number}} minutes": "Quick start • {{duration, number}} minutes"
+	Type: Type,
+	"{{type}} • {{duration, number}} minutes": "{{type}} • {{duration, number}} minutes"
 };
 
 /* eslint-disable */
@@ -620,7 +629,7 @@ const QuickStartContextDefaults = {
     useLegacyHeaderColors: false,
     markdown: null,
     loading: false,
-    alwaysShowTaskReview: false,
+    alwaysShowTaskReview: true,
 };
 const QuickStartContext = React.createContext(QuickStartContextDefaults);
 const getResource = (resource, options, resourceBundle, lng) => {
@@ -717,7 +726,7 @@ const useValuesForQuickStartContext = (value = {}) => {
             useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, id);
             return id;
         });
-        setAllQuickStartStates((qs) => (Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks, exports.QuickStartStatus.IN_PROGRESS) })));
+        setAllQuickStartStates((qs) => (Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks, exports.QuickStartStatus.NOT_STARTED) })));
     }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
     // When alwaysShowTaskReview preference is enabled, skip visited step and go directly to review
     const stepAfterInitial = alwaysShowTaskReview
@@ -1315,6 +1324,39 @@ const useMultilineCopyClipboardShowdownExtension = () => {
     }), [getResource]);
 };
 
+var AdmonitionType;
+(function (AdmonitionType) {
+    AdmonitionType["TIP"] = "TIP";
+    AdmonitionType["NOTE"] = "NOTE";
+    AdmonitionType["IMPORTANT"] = "IMPORTANT";
+    AdmonitionType["WARNING"] = "WARNING";
+    AdmonitionType["CAUTION"] = "CAUTION";
+})(AdmonitionType || (AdmonitionType = {}));
+const admonitionToAlertVariantMap = {
+    [AdmonitionType.NOTE]: { variant: 'info' },
+    [AdmonitionType.TIP]: { variant: 'default', customIcon: React__namespace.createElement(LightbulbIcon__default['default'], null) },
+    [AdmonitionType.IMPORTANT]: { variant: 'danger' },
+    [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: React__namespace.createElement(FireIcon__default['default'], null) },
+    [AdmonitionType.WARNING]: { variant: 'warning' },
+};
+const useAdmonitionShowdownExtension = () => {
+    // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+    return React__namespace.useMemo(() => ({
+        type: 'lang',
+        regex: /\[([\d\w\s-()$!]+)]{{(admonition) ([\w-]+)}}/g,
+        replace: (text, content, admonitionLabel, admonitionType, groupId) => {
+            if (!content || !admonitionLabel || !admonitionType || !groupId) {
+                return text;
+            }
+            admonitionType = admonitionType.toUpperCase();
+            const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
+            const style = admonitionType === AdmonitionType.CAUTION ? { backgroundColor: '#ec7a0915' } : {};
+            const pfAlert = (React__namespace.createElement(reactCore.Alert, { variant: variant, customIcon: customIcon && customIcon, isInline: true, title: admonitionType, className: "pfext-markdown-admonition", style: style }, content));
+            return removeTemplateWhitespace(server.renderToStaticMarkup(pfAlert));
+        },
+    }), []);
+};
+
 const FallbackImg = ({ src, alt, className, fallback }) => {
     const [isSrcValid, setIsSrcValid] = React__namespace.useState(true);
     if (src && isSrcValid) {
@@ -1392,13 +1434,31 @@ const markdownConvert = (markdown, extensions) => {
     if (extensions) {
         converter.addExtension(extensions);
     }
-    // add hook to transform anchor tags
     DOMPurify.addHook('beforeSanitizeElements', function (node) {
         // nodeType 1 = element type
+        // transform anchor tags
         if (node.nodeType === 1 && node.nodeName.toLowerCase() === 'a') {
             node.setAttribute('rel', 'noopener noreferrer');
             return node;
         }
+        // add PF class to ul and ol lists
+        if (node.nodeType === 1 &&
+            (node.nodeName.toLowerCase() === 'ul' || node.nodeName.toLowerCase() === 'ol')) {
+            node.setAttribute('class', 'pf-c-list');
+            return node;
+        }
+    });
+    // Add a hook to make all links open a new window
+    DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+        // set all elements owning target to target=_blank
+        if ('target' in node) {
+            node.setAttribute('target', '_blank');
+        }
+        // set non-HTML/MathML links to xlink:show=new
+        if (!node.hasAttribute('target') &&
+            (node.hasAttribute('xlink:href') || node.hasAttribute('href'))) {
+            node.setAttribute('xlink:show', 'new');
+        }
     });
     return DOMPurify.sanitize(converter.makeHtml(markdown), {
         USE_PROFILES: {
@@ -1536,6 +1596,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
     const { markdown } = React__namespace.useContext(QuickStartContext);
     const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
     const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
+    const admonitionShowdownExtension = useAdmonitionShowdownExtension();
     return (React__namespace.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
             {
                 type: 'lang',
@@ -1557,11 +1618,14 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
             },
             inlineCopyClipboardShowdownExtension,
             multilineCopyClipboardShowdownExtension,
+            admonitionShowdownExtension,
             ...(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, }) => {
@@ -1667,7 +1731,9 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
             // @ts-ignore
             component: "div", style: {
                 cursor: 'pointer',
-            }, icon: quickStartIcon, className: "pfext-quick-start-tile", "data-testid": `qs-card-${camelize(displayName)}`, featured: isActive, title: React__namespace.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type, quickStartId: id }), onClick: handleClick, "data-test": `tile ${id}`, description: React__namespace.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent })));
+            }, icon: quickStartIcon, className: "pfext-quick-start-tile", "data-testid": `qs-card-${camelize(displayName)}`, featured: isActive, title: React__namespace.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type, quickStartId: id }), onClick: handleClick, 
+            // https://github.com/patternfly/patternfly-react/issues/7039
+            href: "#", "data-test": `tile ${id}`, description: React__namespace.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent })));
 };
 
 const QuickStartCatalog = ({ quickStarts }) => {
@@ -1818,7 +1884,9 @@ const QuickStartCatalogPage = ({ quickStarts, showFilter, sortFnc = (q1, q2) =>
         const filteredQs = showFilter
             ? filterQuickStarts(allQuickStarts, filter.keyword, filter.status.statusFilters, allQuickStartStates).sort(sortFncCallback)
             : allQuickStarts;
-        if (filteredQs.length !== filteredQuickStarts.length) {
+        // also needs a check whether the content of the QS changed
+        if (filteredQs.length !== filteredQuickStarts.length ||
+            JSON.stringify(filteredQs) !== JSON.stringify(filteredQuickStarts)) {
             setFilteredQuickStarts(filteredQs);
         }
     }, [
@@ -1907,14 +1975,17 @@ const TaskIcon = ({ taskIndex, taskStatus }) => {
     }
     return React__namespace.createElement("span", { className: classNames }, content);
 };
-const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, }) => {
+const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, children, }) => {
     const classNames = reactStyles.css('pfext-quick-start-task-header__title', {
         'pfext-quick-start-task-header__title-success': taskStatus === exports.QuickStartTaskStatus.SUCCESS,
         'pfext-quick-start-task-header__title-failed': taskStatus === (exports.QuickStartTaskStatus.FAILED || exports.QuickStartTaskStatus.VISITED),
     });
-    const notCompleted = taskStatus === exports.QuickStartTaskStatus.VISITED;
-    const skippedReviewOrFailed = taskStatus === exports.QuickStartTaskStatus.REVIEW || taskStatus === exports.QuickStartTaskStatus.FAILED;
-    const tryAgain = !isActiveTask && (skippedReviewOrFailed || notCompleted) && (React__namespace.createElement(React__namespace.Fragment, null,
+    // const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
+    // const skippedReview = taskStatus === QuickStartTaskStatus.REVIEW;
+    const failedReview = taskStatus === exports.QuickStartTaskStatus.FAILED;
+    // TODO: toned down when this is shown, investigate further when we should display it
+    // related: https://github.com/patternfly/patternfly-quickstarts/issues/104
+    const tryAgain = failedReview && (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement("div", null),
         React__namespace.createElement("div", { className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
     const content = (React__namespace.createElement("div", { className: "pfext-quick-start-task-header" },
@@ -1925,7 +1996,7 @@ const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, is
                 ' ',
                 subtitle))),
         tryAgain));
-    return (React__namespace.createElement(reactCore.WizardNavItem, { content: content, step: taskIndex, onNavItemClick: () => onTaskSelect(taskIndex - 1), navItemComponent: "button", isCurrent: isActiveTask }));
+    return (React__namespace.createElement(reactCore.WizardNavItem, { content: content, step: taskIndex, onNavItemClick: () => onTaskSelect(taskIndex - 1), navItemComponent: "button", isCurrent: isActiveTask }, children));
 };
 
 const QuickStartTaskHeaderList = ({ tasks, allTaskStatuses, onTaskSelect, }) => {
@@ -1959,7 +2030,8 @@ const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequi
     const prereqList = (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React__namespace.createElement(reactCore.ExpandableSection, { toggleText: getResource('View Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length), onToggle: () => setIsPrereqsExpanded(!isPrereqsExpanded), className: "pfext-quick-start-intro__prereq" },
         React__namespace.createElement(reactCore.List, { className: "pfext-quick-start-intro__prereq-list" }, prereqs.map((pr) => {
             return (React__namespace.createElement(reactCore.ListItem, { key: pr, className: "pfext-quick-start-intro__prereq-list__item" },
-                React__namespace.createElement("span", { className: "pfext-quick-start-intro__prereq-list__item-content" }, pr)));
+                React__namespace.createElement("span", { className: "pfext-quick-start-intro__prereq-list__item-content" },
+                    React__namespace.createElement(QuickStartMarkdownView, { content: pr }))));
         }))));
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement(QuickStartMarkdownView, { content: introduction }),
@@ -1988,7 +2060,7 @@ const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
         'pfext-quick-start-task-review--failed': taskStatus === exports.QuickStartTaskStatus.FAILED,
     });
     const title = React__namespace.createElement("span", { className: alertClassNames }, getResource('Check your work'));
-    return (React__namespace.createElement(reactCore.Alert, { className: "pfext-quick-start-task-review-alert", variant: getAlertVariant(taskStatus), title: title, isInline: true },
+    return (React__namespace.createElement(reactCore.Alert, { className: "pfext-quick-start-task-review-alert", variant: getAlertVariant(taskStatus), title: title, isInline: true, role: "alert" },
         React__namespace.createElement(QuickStartMarkdownView, { content: instructions }),
         React__namespace.createElement("span", { className: "pfext-quick-start-task-review__actions" },
             React__namespace.createElement(reactCore.Radio, { id: "review-success", name: "review-success", "data-testid": "qs-drawer-check-yes", label: getResource('Yes'), className: "pfext-quick-start-task-review__radio", isChecked: taskStatus === exports.QuickStartTaskStatus.SUCCESS, onChange: () => onTaskReview(exports.QuickStartTaskStatus.SUCCESS) }),
@@ -1998,22 +2070,22 @@ const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
 
 const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onTaskSelect, }) => {
     const { getResource, alwaysShowTaskReview } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement("div", { className: "pfext-quick-start-tasks__list" }, tasks
-        .filter((_, index) => allTaskStatuses[index] !== exports.QuickStartTaskStatus.INIT)
-        .map((task, index) => {
-        const { title, description, review } = task;
-        const isActiveTask = index === taskNumber;
-        const taskStatus = allTaskStatuses[index];
-        const shouldShowTaskReview = (!QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) || alwaysShowTaskReview) &&
-            review;
-        return (React__namespace.createElement(React__namespace.Fragment, { key: title },
-            React__namespace.createElement(QuickStartTaskHeader, { taskIndex: index + 1, title: title, size: "md", subtitle: getResource('{{index, number}} of {{tasks, number}}')
-                    .replace('{{index, number}}', index + 1)
-                    .replace('{{tasks, number}}', tasks.length), taskStatus: taskStatus, isActiveTask: isActiveTask, onTaskSelect: onTaskSelect }),
-            isActiveTask && (React__namespace.createElement("div", { className: "pfext-quick-start-task__content" },
-                React__namespace.createElement(QuickStartMarkdownView, { content: description }),
-                shouldShowTaskReview && (React__namespace.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview }))))));
-    })));
+    return (React__namespace.createElement("div", { className: "pfext-quick-start-tasks__list" },
+        React__namespace.createElement("ul", null, tasks
+            .filter((_, index) => allTaskStatuses[index] !== exports.QuickStartTaskStatus.INIT)
+            .map((task, index) => {
+            const { title, description, review } = task;
+            const isActiveTask = index === taskNumber;
+            const taskStatus = allTaskStatuses[index];
+            const shouldShowTaskReview = (!QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) || alwaysShowTaskReview) &&
+                review;
+            return (React__namespace.createElement(React__namespace.Fragment, { key: title },
+                React__namespace.createElement(QuickStartTaskHeader, { taskIndex: index + 1, title: title, size: "md", subtitle: getResource('{{index, number}} of {{tasks, number}}')
+                        .replace('{{index, number}}', index + 1)
+                        .replace('{{tasks, number}}', tasks.length), taskStatus: taskStatus, isActiveTask: isActiveTask, onTaskSelect: onTaskSelect }, isActiveTask && (React__namespace.createElement("div", { className: "pfext-quick-start-task__content" },
+                    React__namespace.createElement(QuickStartMarkdownView, { content: description }),
+                    shouldShowTaskReview && (React__namespace.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview })))))));
+        }))));
 };
 
 const QuickStartContent = React__namespace.forwardRef(({ quickStart, nextQuickStarts = [], taskNumber, allTaskStatuses, onTaskSelect, onTaskReview, onQuickStartChange, }, ref) => {
@@ -2123,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); });
@@ -2155,7 +2226,10 @@ const QuickStartPanelContent = (_a) => {
                     React__namespace.createElement(reactCore.Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } }, quickStart === null || quickStart === void 0 ? void 0 :
                         quickStart.spec.displayName,
                         ' ',
-                        React__namespace.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, getResource('Quick start • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes).replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)))),
+                        React__namespace.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, (quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes) ? getResource('{{type}} • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                            .replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                            .replace('{{type}}', getResource('Type'))
+                            : getResource('Type')))),
                 showClose && (React__namespace.createElement(reactCore.DrawerActions, null,
                     React__namespace.createElement(reactCore.DrawerCloseButton, { onClick: handleClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))))),
         React__namespace.createElement(reactCore.DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
@@ -2167,7 +2241,7 @@ const QuickStartPanelContent = (_a) => {
 };
 
 const QuickStartContainer = (_a) => {
-    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, useLegacyHeaderColors, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = false } = _a, props = tslib.__rest(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "useLegacyHeaderColors", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview"]);
+    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, useLegacyHeaderColors, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = true } = _a, props = tslib.__rest(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "useLegacyHeaderColors", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview"]);
     const valuesForQuickstartContext = useValuesForQuickStartContext(Object.assign({ allQuickStarts: quickStarts, activeQuickStartID,
         setActiveQuickStartID,
         allQuickStartStates,
@@ -2205,7 +2279,7 @@ const QuickStartDrawer = (_a) => {
         // 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 quickStartIdFromParam = params.get(QUICKSTART_ID_FILTER_KEY) || '';
-        if (quickStartIdFromParam && !activeQuickStartID) {
+        if (quickStartIdFromParam && activeQuickStartID !== quickStartIdFromParam) {
             const activeQuickStart = getQuickStartByName(quickStartIdFromParam, combinedQuickStarts);
             // don't try to load a quick start that is actually just an external resource (spec.link)
             if (combinedQuickStarts.length > 0 && activeQuickStart && !activeQuickStart.spec.link) {
@@ -2264,6 +2338,125 @@ 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 { 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 })),
+        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" },
+                    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 { 
+    // helpTopics,
+    children } = _a, props = tslib.__rest(_a, ["children"]);
+    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);
+    //   // 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 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
@@ -2304,6 +2497,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;
@@ -2352,5 +2550,6 @@ exports.isDisabledQuickStart = isDisabledQuickStart;
 exports.removeQueryArgument = removeQueryArgument;
 exports.setQueryArgument = setQueryArgument;
 exports.useLocalStorage = useLocalStorage;
+exports.useValuesForHelpTopicContext = useValuesForHelpTopicContext;
 exports.useValuesForQuickStartContext = useValuesForQuickStartContext;
 //# sourceMappingURL=index.js.map