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

package/dist/quickstarts-base.css

@@ -818,17 +818,6 @@
   display: inherit !important;
 }
 
-.pfext-quick-start-tile-header__status {
-  margin: var(--pf-v5-global--spacer--sm) 0;
-}
-.pfext-quick-start-tile-header--margin {
-  margin-right: var(--pf-v5-global--spacer--sm);
-  margin-bottom: var(--pf-v5-global--spacer--sm);
-}
-.pfext-quick-start-tile-header .pf-v5-c-badge:not(:last-of-type) {
-  margin-right: var(--pf-v5-global--spacer--sm);
-}
-
 .pfext-quick-start-tile {
   height: 100%;
 }
@@ -840,6 +829,17 @@
   display: flex;
 }
 
+.pfext-quick-start-tile-header__status {
+  margin: var(--pf-v5-global--spacer--sm) 0;
+}
+.pfext-quick-start-tile-header--margin {
+  margin-right: var(--pf-v5-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
+}
+.pfext-quick-start-tile-header .pf-v5-c-badge:not(:last-of-type) {
+  margin-right: var(--pf-v5-global--spacer--sm);
+}
+
 .pfext-quick-start-tile-description {
   display: -webkit-box;
   overflow: hidden;
@@ -1027,20 +1027,6 @@
   left: 2px;
 }
 
-.pfext-quick-start-task-header__list {
-  padding: 0 !important;
-}
-.pfext-quick-start-task-header__list button::before {
-  content: none;
-}
-.pfext-quick-start-task-header__list li {
-  list-style-type: none;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin-bottom: var(--pf-v5-global--spacer--xs);
-}
-
 .pfext-quick-start-task-header {
   margin-bottom: var(--pf-v5-global--spacer--sm);
   display: grid;
@@ -1088,6 +1074,20 @@
   color: var(--pf-v5-global--danger-color--100) !important;
 }
 
+.pfext-quick-start-task-header__list {
+  padding: 0 !important;
+}
+.pfext-quick-start-task-header__list button::before {
+  content: none;
+}
+.pfext-quick-start-task-header__list li {
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: var(--pf-v5-global--spacer--xs);
+}
+
 .pfext-quick-start-task-review-alert {
   margin: var(--pf-v5-global--spacer--lg) 0;
 }
@@ -1116,6 +1116,10 @@
   color: var(--pf-chart-global--danger--Color--100);
 }
 
+.pfext-modal {
+  position: absolute !important;
+}
+
 .pfext-markdown-view .pfext-code-block__pre {
   /* override the styles applied by showdown while parsing <pre /> */
   display: flex;
@@ -1150,10 +1154,6 @@
   word-break: break-word;
 }
 
-.pfext-modal {
-  position: absolute !important;
-}
-
 @keyframes pfext-spotlight-expand {
   0% {
     outline-offset: -4px;

package/dist/quickstarts-full.es.js

@@ -30883,29 +30883,49 @@ exports["default"] = exports.OutlinedClockIcon;
 
 var OutlinedClockIcon = /*@__PURE__*/getDefaultExportFromCjs(outlinedClockIcon);
 
+var outlinedBookmarkIcon = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.OutlinedBookmarkIconConfig = {
+  name: 'OutlinedBookmarkIcon',
+  height: 512,
+  width: 384,
+  svgPath: 'M336 0H48C21.49 0 0 21.49 0 48v464l192-112 192 112V48c0-26.51-21.49-48-48-48zm0 428.43l-144-84-144 84V54a6 6 0 0 1 6-6h276c3.314 0 6 2.683 6 5.996V428.43z',
+  yOffset: 0,
+  xOffset: 0,
+};
+exports.OutlinedBookmarkIcon = createIcon_1.createIcon(exports.OutlinedBookmarkIconConfig);
+exports["default"] = exports.OutlinedBookmarkIcon;
+});
+
+var OutlinedBookmarkIcon = /*@__PURE__*/getDefaultExportFromCjs(outlinedBookmarkIcon);
+
 const statusColorMap = {
     [QuickStartStatus.COMPLETE]: 'green',
     [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, { justifyContent: { default: 'justifyContentCenter' }, 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 { 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.useContext(QuickStartContext);
     const ref = React.useRef(null);
     let quickStartIcon;
@@ -30936,10 +30956,10 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
             onClick();
         }
     };
-    return (React.createElement("div", { ref: ref },
+    return (React.createElement("div", { ref: ref, onClick: handleClick },
         React.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.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();