@patternfly/quickstarts 6.0.0-alpha.1 → 6.0.0-alpha.2

package/dist/catalog/QuickStartTile.d.ts

@@ -1,11 +1,14 @@
 import * as React from 'react';
 import { QuickStart, QuickStartStatus } from '../utils/quick-start-types';
+import { QuickstartAction } from './QuickStartTileHeader';
 import './QuickStartTile.scss';
 interface QuickStartTileProps {
     quickStart: QuickStart;
     status: QuickStartStatus;
     isActive: boolean;
     onClick?: () => void;
+    /** Action config for button rendered next to title */
+    action?: QuickstartAction;
 }
 declare const QuickStartTile: React.FC<QuickStartTileProps>;
 export default QuickStartTile;

package/dist/catalog/QuickStartTileHeader.d.ts

@@ -1,12 +1,24 @@
 import './QuickStartTileHeader.scss';
 import * as React from 'react';
+import { ButtonProps } from '@patternfly/react-core';
 import { QuickStartType } from '../utils/quick-start-types';
+export interface QuickstartAction {
+    /** Screen reader aria label. */
+    'aria-label': string;
+    /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
+    icon?: React.ComponentType<unknown>;
+    /** Callback with synthetic event parameter. */
+    onClick?: (e: React.SyntheticEvent) => void;
+    /** Additional button props to be rendered as extra props. */
+    buttonProps?: ButtonProps;
+}
 interface QuickStartTileHeaderProps {
     status: string;
     duration: number;
     name: string;
     type?: QuickStartType;
     quickStartId?: string;
+    action?: QuickstartAction;
 }
 declare const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps>;
 export default QuickStartTileHeader;

package/dist/catalog/index.d.ts

@@ -4,6 +4,6 @@ export { default as QuickStartTile } from './QuickStartTile';
 export { default as QuickStartTileDescription } from './QuickStartTileDescription';
 export { default as QuickStartTileFooter } from './QuickStartTileFooter';
 export { default as QuickStartTileFooterExternal } from './QuickStartTileFooterExternal';
-export { default as QuickStartTileHeader } from './QuickStartTileHeader';
+export { default as QuickStartTileHeader, QuickstartAction } from './QuickStartTileHeader';
 export * from './Toolbar/QuickStartCatalogFilterItems';
 export * from './Catalog';

package/dist/index.es.js

@@ -18,6 +18,7 @@ import '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 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 OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
@@ -576,6 +577,7 @@ const QuickStartContextDefaults = {
     markdown: null,
     loading: false,
     alwaysShowTaskReview: true,
+    focusOnQuickStart: true,
 };
 const QuickStartContext = createContext(QuickStartContextDefaults);
 const getResource = (resource, options, resourceBundle, lng) => {
@@ -1662,23 +1664,26 @@ const statusColorMap = {
     [QuickStartStatus.IN_PROGRESS]: 'purple',
     [QuickStartStatus.NOT_STARTED]: 'grey',
 };
-const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, }) => {
+const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, action, }) => {
     const { getResource } = React.useContext(QuickStartContext);
     const statusLocaleMap = {
         [QuickStartStatus.COMPLETE]: getResource('Complete'),
         [QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
         [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
     };
+    const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon;
     return (React.createElement("div", { className: "pfext-quick-start-tile-header" },
-        React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
-            React.createElement(QuickStartMarkdownView, { content: name })),
+        React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
+            React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
+                React.createElement(QuickStartMarkdownView, { content: name })),
+            action && (React.createElement(Button, Object.assign({ "aria-label": action['aria-label'], icon: React.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps)))),
         React.createElement("div", { className: "pfext-quick-start-tile-header__status" },
             type && (React.createElement(Label, { className: "pfext-quick-start-tile-header--margin", color: type.color }, type.text)),
             duration && (React.createElement(Label, { variant: "outline", "data-test": "duration", icon: React.createElement(OutlinedClockIcon, null), className: "pfext-quick-start-tile-header--margin" }, getResource('{{duration, number}} minutes', duration).replace('{{duration, number}}', duration))),
             status !== QuickStartStatus.NOT_STARTED && (React.createElement(Label, { variant: "outline", color: statusColorMap[status], icon: React.createElement(StatusIcon, { status: status }), "data-test": "status" }, statusLocaleMap[status])))));
 };
 
-const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, }) => {
+const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, action, }) => {
     const { metadata: { name: id }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart;
     const { setActiveQuickStart, footer } = React.useContext(QuickStartContext);
     const ref = React.useRef(null);
@@ -1702,26 +1707,31 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
     const handleClick = (e) => {
         var _a;
         if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
-            if (link) {
-                window.open(link.href);
-            }
-            else {
+            if (!link) {
                 setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
             }
             onClick();
         }
     };
-    return (React.createElement("div", { ref: ref },
-        React.createElement(CatalogTile, { id: id + '-catalog-tile', style: {
+    const linkProps = link
+        ? {
+            href: link.href,
+            target: '_blank',
+            rel: 'noreferrer',
+        }
+        : {};
+    return (React.createElement("div", { ref: ref, onClick: handleClick },
+        React.createElement(CatalogTile, Object.assign({ id: id + '-catalog-tile', style: {
                 cursor: 'pointer',
-            }, icon: quickStartIcon, className: "pfext-quick-start-tile", "data-testid": `qs-card-${camelize(displayName)}`, featured: isActive, title: React.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type, quickStartId: id }), onClick: handleClick, onKeyDown: (event) => {
+            }, icon: quickStartIcon, className: "pfext-quick-start-tile", "data-testid": `qs-card-${camelize(displayName)}`, featured: isActive, title: React.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type, quickStartId: id, action: action }), onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
                     onClick();
                 }
-            }, 
-            // https://github.com/patternfly/patternfly-react/issues/7039
-            href: link === null || link === void 0 ? void 0 : link.href, "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent, tabIndex: 0 })));
+            } }, linkProps, { "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent, tabIndex: 0, 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore-next-line
+            isSelectableRaised: true }))));
 };
 
 const QuickStartCatalog = ({ quickStarts }) => {
@@ -1948,12 +1958,13 @@ const QuickStartCloseModal = ({ isOpen, onConfirm, onCancel, }) => {
 
 const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, children, }) => {
     const titleRef = React.useRef(null);
+    const { focusOnQuickStart } = React.useContext(QuickStartContext);
     React.useEffect(() => {
-        if (isActiveTask) {
+        if (focusOnQuickStart && isActiveTask) {
             // Focus the WizardNavItem button element that contains the title
             titleRef.current.parentNode.focus();
         }
-    }, [isActiveTask]);
+    }, [focusOnQuickStart, isActiveTask]);
     css('pfext-quick-start-task-header__title', {
         'pfext-quick-start-task-header__title-success': taskStatus === QuickStartTaskStatus.SUCCESS,
         'pfext-quick-start-task-header__title-failed': taskStatus === (QuickStartTaskStatus.FAILED || QuickStartTaskStatus.VISITED),
@@ -2120,7 +2131,7 @@ const QuickStartController = ({ quickStart, nextQuickStarts, contentRef, footerC
     const getQuickStartActiveTask = React.useCallback(() => {
         let activeTaskNumber = 0;
         while (activeTaskNumber !== totalTasks &&
-            activeQuickStartState[`taskStatus${activeTaskNumber}`] !== QuickStartTaskStatus.INIT) {
+            activeQuickStartState[`taskStatus${activeTaskNumber}`] === QuickStartTaskStatus.SUCCESS) {
             activeTaskNumber++;
         }
         return activeTaskNumber;
@@ -2163,7 +2174,7 @@ 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 titleRef = React.useRef(null);
-    const { getResource, activeQuickStartState } = React.useContext(QuickStartContext);
+    const { getResource, activeQuickStartState, focusOnQuickStart } = React.useContext(QuickStartContext);
     const [contentRef, setContentRef] = React.useState();
     const shadows = useScrollShadows(contentRef);
     const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
@@ -2188,10 +2199,10 @@ const QuickStartPanelContent = (_a) => {
         return Number.parseInt(taskNumber) + 1;
     };
     React.useEffect(() => {
-        if (quickStart) {
+        if (focusOnQuickStart && quickStart) {
             titleRef.current.focus();
         }
-    }, [quickStart]);
+    }, [focusOnQuickStart, quickStart]);
     const content = quickStart ? (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base", "data-testid": `qs-drawer-${camelize(quickStart.spec.displayName)}`, "data-qs": `qs-step-${getStep()}`, "data-test": "quickstart drawer" }, props),
         React.createElement("div", { className: headerClasses },
             React.createElement(DrawerHead, null,