@patternfly/quickstarts 5.3.0-prerelease.1 → 5.4.0-prerelease.1

package/dist/quickstarts-base.css

@@ -811,6 +811,17 @@
   box-shadow: var(--pf-v5-global--BoxShadow--sm-top);
 }
 
+.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__gallery {
   --pf-v5-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important;
 }
@@ -857,15 +868,22 @@
   flex: 1;
 }
 
-.pfext-quick-start-tile {
-  height: 100%;
+.pfext-markdown-view.is-empty {
+  color: #999;
 }
-.pfext-quick-start-tile .catalog-tile-pf-description .has-footer {
+.pfext-markdown-view table {
   display: block;
-  -webkit-line-clamp: unset;
+  margin-bottom: 11.5px;
+  overflow-x: auto;
 }
-.pfext-quick-start-tile .catalog-tile-pf-icon {
-  display: flex;
+.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-catalog-filter__input {
@@ -889,22 +907,14 @@
   --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-quick-start-content {
+  flex: 1 1 0;
+  overflow: auto;
+  padding: var(--pf-v5-global--spacer--lg);
+  font-size: 16px;
 }
-.pfext-markdown-view th {
-  padding-top: 0;
+.pfext-quick-start-content .pf-v5-c-alert__description p {
+  font-size: 13px;
 }
 
 .pfext-quick-start-footer {
@@ -919,16 +929,6 @@
   float: right;
 }
 
-.pfext-quick-start-content {
-  flex: 1 1 0;
-  overflow: auto;
-  padding: var(--pf-v5-global--spacer--lg);
-  font-size: 16px;
-}
-.pfext-quick-start-content .pf-v5-c-alert__description p {
-  font-size: 13px;
-}
-
 .pfext-quick-start-tasks__list button::before {
   content: none;
 }
@@ -1030,6 +1030,20 @@
   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-review-alert {
   margin: var(--pf-v5-global--spacer--lg) 0;
 }
@@ -1058,20 +1072,6 @@
   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;
@@ -1119,6 +1119,10 @@
   color: var(--pf-v5-global--danger-color--100) !important;
 }
 
+.pfext-modal {
+  position: absolute !important;
+}
+
 .pfext-markdown-view .pfext-code-block__pre {
   /* override the styles applied by showdown while parsing <pre /> */
   display: flex;
@@ -1153,10 +1157,6 @@
   word-break: break-word;
 }
 
-.pfext-modal {
-  position: absolute !important;
-}
-
 @keyframes pfext-spotlight-expand {
   0% {
     outline-offset: -4px;

package/dist/quickstarts-full.es.js

@@ -10209,6 +10209,7 @@ const QuickStartContextDefaults = {
     markdown: null,
     loading: false,
     alwaysShowTaskReview: true,
+    focusOnQuickStart: true,
 };
 const QuickStartContext = createContext(QuickStartContextDefaults);
 const getResource = (resource, options, resourceBundle, lng) => {
@@ -31236,12 +31237,13 @@ const TaskIcon = ({ taskIndex, taskStatus }) => {
 };
 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]);
     const classNames = 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),
@@ -31452,7 +31454,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);
@@ -31477,10 +31479,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,