@patternfly/quickstarts 5.2.0-prerelease.2 → 5.2.0-prerelease.3

package/dist/index.js

@@ -24,6 +24,7 @@ require('@patternfly/react-tokens/dist/esm/global_palette_blue_300');
 var okColor = require('@patternfly/react-tokens/dist/esm/global_palette_green_500');
 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 OutlinedBookmarkIcon = require('@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon');
 var ArrowRightIcon = require('@patternfly/react-icons/dist/js/icons/arrow-right-icon');
 var BarsIcon = require('@patternfly/react-icons/dist/js/icons/bars-icon');
 
@@ -64,6 +65,7 @@ var InfoCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleIcon)
 var okColor__default = /*#__PURE__*/_interopDefaultLegacy(okColor);
 var ExternalLinkAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExternalLinkAltIcon);
 var OutlinedClockIcon__default = /*#__PURE__*/_interopDefaultLegacy(OutlinedClockIcon);
+var OutlinedBookmarkIcon__default = /*#__PURE__*/_interopDefaultLegacy(OutlinedBookmarkIcon);
 var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
 var BarsIcon__default = /*#__PURE__*/_interopDefaultLegacy(BarsIcon);
 
@@ -1710,24 +1712,28 @@ const statusColorMap = {
     [exports.QuickStartStatus.IN_PROGRESS]: 'purple',
     [exports.QuickStartStatus.NOT_STARTED]: 'grey',
 };
-const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, }) => {
+const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, action, }) => {
     const { getResource } = React__namespace.useContext(QuickStartContext);
     const statusLocaleMap = {
         [exports.QuickStartStatus.COMPLETE]: getResource('Complete'),
         [exports.QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
         [exports.QuickStartStatus.NOT_STARTED]: getResource('Not started'),
     };
+    const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon__default['default'];
     return (React__namespace.createElement("div", { className: "pfext-quick-start-tile-header" },
-        React__namespace.createElement(reactCore.Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
-            React__namespace.createElement(QuickStartMarkdownView, { content: name })),
+        React__namespace.createElement(reactCore.Flex, { justifyContent: { default: 'justifyContentCenter' }, flexWrap: { default: 'nowrap' } },
+            React__namespace.createElement(reactCore.Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
+                React__namespace.createElement(QuickStartMarkdownView, { content: name })),
+            action && React__namespace.createElement(reactCore.Button, Object.assign({ "aria-label": action['aria-label'], icon: React__namespace.createElement(ActionIcon, null), variant: 'plain', onClick: action.onClick }, action.buttonProps))),
         React__namespace.createElement("div", { className: "pfext-quick-start-tile-header__status" },
             type && (React__namespace.createElement(reactCore.Label, { className: "pfext-quick-start-tile-header--margin", color: type.color }, type.text)),
             duration && (React__namespace.createElement(reactCore.Label, { variant: "outline", "data-test": "duration", icon: React__namespace.createElement(OutlinedClockIcon__default['default'], null), className: "pfext-quick-start-tile-header--margin" }, getResource('{{duration, number}} minutes', duration).replace('{{duration, number}}', duration))),
             status !== exports.QuickStartStatus.NOT_STARTED && (React__namespace.createElement(reactCore.Label, { variant: "outline", color: statusColorMap[status], icon: React__namespace.createElement(StatusIcon, { status: status }), "data-test": "status" }, statusLocaleMap[status])))));
 };
 
-const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, }) => {
-    const { metadata: { name: id }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart;
+const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, action, }) => {
+    const { metadata: { name, id: metaId }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart;
+    const id = metaId || name;
     const { setActiveQuickStart, footer } = React__namespace.useContext(QuickStartContext);
     const ref = React__namespace.useRef(null);
     let quickStartIcon;
@@ -1758,10 +1764,10 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
             onClick();
         }
     };
-    return (React__namespace.createElement("div", { ref: ref },
+    return (React__namespace.createElement("div", { ref: ref, onClick: handleClick },
         React__namespace.createElement(CatalogTile, { id: id + '-catalog-tile', 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, onKeyDown: (event) => {
+            }, 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, action: action }), onKeyDown: (event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
                     setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
                     onClick();