@patternfly/quickstarts 5.2.0-prerelease.3 → 5.3.0-prerelease.1

package/dist/quickstarts-base.css

@@ -818,28 +818,6 @@
   display: inherit !important;
 }
 
-.pfext-quick-start-tile {
-  height: 100%;
-}
-.pfext-quick-start-tile .catalog-tile-pf-description .has-footer {
-  display: block;
-  -webkit-line-clamp: unset;
-}
-.pfext-quick-start-tile .catalog-tile-pf-icon {
-  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;
@@ -865,22 +843,29 @@
   padding-left: 20px;
 }
 
-.pfext-markdown-view.is-empty {
-  color: #999;
+.pfext-quick-start-tile-header__status {
+  margin: var(--pf-v5-global--spacer--sm) 0;
 }
-.pfext-markdown-view table {
-  display: block;
-  margin-bottom: 11.5px;
-  overflow-x: auto;
+.pfext-quick-start-tile-header--margin {
+  margin-right: var(--pf-v5-global--spacer--sm);
+  margin-bottom: var(--pf-v5-global--spacer--sm);
 }
-.pfext-markdown-view td,
-.pfext-markdown-view th {
-  border-bottom: 1px solid #ededed;
-  padding: 10px;
-  vertical-align: top;
+.pfext-quick-start-tile-header .pf-v5-c-badge:not(:last-of-type) {
+  margin-right: var(--pf-v5-global--spacer--sm);
 }
-.pfext-markdown-view th {
-  padding-top: 0;
+.pfext-quick-start-tile-header h3 {
+  flex: 1;
+}
+
+.pfext-quick-start-tile {
+  height: 100%;
+}
+.pfext-quick-start-tile .catalog-tile-pf-description .has-footer {
+  display: block;
+  -webkit-line-clamp: unset;
+}
+.pfext-quick-start-tile .catalog-tile-pf-icon {
+  display: flex;
 }
 
 .pfext-quick-start-catalog-filter__input {
@@ -904,6 +889,24 @@
   --pf-v5-c-check__label--FontSize: 14px;
 }
 
+.pfext-markdown-view.is-empty {
+  color: #999;
+}
+.pfext-markdown-view table {
+  display: block;
+  margin-bottom: 11.5px;
+  overflow-x: auto;
+}
+.pfext-markdown-view td,
+.pfext-markdown-view th {
+  border-bottom: 1px solid #ededed;
+  padding: 10px;
+  vertical-align: top;
+}
+.pfext-markdown-view th {
+  padding-top: 0;
+}
+
 .pfext-quick-start-footer {
   background-color: var(--pf-v5-global--BackgroundColor--100);
   flex: 0 0 auto;
@@ -1027,6 +1030,48 @@
   left: 2px;
 }
 
+.pfext-quick-start-task-review-alert {
+  margin: var(--pf-v5-global--spacer--lg) 0;
+}
+
+.pfext-quick-start-task-review {
+  font-size: var(--pf-v5-global--FontSize--md);
+  line-height: var(--pf-v5-global--FontSize--xl);
+  font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
+}
+.pfext-quick-start-task-review__actions {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: var(--pf-v5-global--spacer--sm);
+}
+.pfext-quick-start-task-review__actions input[type=radio] {
+  margin-top: 0;
+  margin-right: 0;
+}
+.pfext-quick-start-task-review__radio {
+  margin-right: var(--pf-v5-global--spacer--xl) !important;
+}
+.pfext-quick-start-task-review--success {
+  color: var(--pf-v5-global--success-color--100) !important;
+}
+.pfext-quick-start-task-review--failed {
+  color: var(--pf-chart-global--danger--Color--100);
+}
+
+.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;
@@ -1074,52 +1119,6 @@
   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;
-}
-
-.pfext-quick-start-task-review {
-  font-size: var(--pf-v5-global--FontSize--md);
-  line-height: var(--pf-v5-global--FontSize--xl);
-  font-family: var(--pf-v5-global--FontFamily--heading--sans-serif);
-}
-.pfext-quick-start-task-review__actions {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: var(--pf-v5-global--spacer--sm);
-}
-.pfext-quick-start-task-review__actions input[type=radio] {
-  margin-top: 0;
-  margin-right: 0;
-}
-.pfext-quick-start-task-review__radio {
-  margin-right: var(--pf-v5-global--spacer--xl) !important;
-}
-.pfext-quick-start-task-review--success {
-  color: var(--pf-v5-global--success-color--100) !important;
-}
-.pfext-quick-start-task-review--failed {
-  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;
@@ -1154,6 +1153,10 @@
   word-break: break-word;
 }
 
+.pfext-modal {
+  position: absolute !important;
+}
+
 @keyframes pfext-spotlight-expand {
   0% {
     outline-offset: -4px;

package/dist/quickstarts-full.es.js

@@ -30913,10 +30913,10 @@ const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, acti
     };
     const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon;
     return (React.createElement("div", { className: "pfext-quick-start-tile-header" },
-        React.createElement(Flex, { justifyContent: { default: 'justifyContentCenter' }, flexWrap: { default: 'nowrap' } },
+        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))),
+            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))),
@@ -30924,8 +30924,7 @@ const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, acti
 };
 
 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 { metadata: { name: id }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart;
     const { setActiveQuickStart, footer } = React.useContext(QuickStartContext);
     const ref = React.useRef(null);
     let quickStartIcon;
@@ -30947,26 +30946,31 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, act
     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();
         }
     };
+    const linkProps = link
+        ? {
+            href: link.href,
+            target: '_blank',
+            rel: 'noreferrer',
+        }
+        : {};
     return (React.createElement("div", { ref: ref, onClick: handleClick },
-        React.createElement(CatalogTile, { id: id + '-catalog-tile', style: {
+        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, 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 }) => {