@patternfly/quickstarts 5.3.0 → 5.4.0-prerelease.2

package/dist/quickstarts-base.css

@@ -907,6 +907,18 @@
   --pf-v5-c-check__label--FontSize: 14px;
 }
 
+.pfext-quick-start-footer {
+  background-color: var(--pf-v5-global--BackgroundColor--100);
+  flex: 0 0 auto;
+  padding: var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--lg);
+}
+.pfext-quick-start-footer__actionbtn {
+  margin-right: var(--pf-v5-global--spacer--md);
+}
+.pfext-quick-start-footer__restartbtn {
+  float: right;
+}
+
 .pfext-quick-start-content {
   flex: 1 1 0;
   overflow: auto;
@@ -917,16 +929,34 @@
   font-size: 13px;
 }
 
-.pfext-quick-start-footer {
-  background-color: var(--pf-v5-global--BackgroundColor--100);
-  flex: 0 0 auto;
-  padding: var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--lg);
+.pfext-quick-start-intro__prereq {
+  margin-bottom: var(--pf-v5-global--spacer--md);
 }
-.pfext-quick-start-footer__actionbtn {
-  margin-right: var(--pf-v5-global--spacer--md);
+.pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__content {
+  margin-top: var(--pf-v5-global--spacer--sm);
 }
-.pfext-quick-start-footer__restartbtn {
-  float: right;
+.pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle-text {
+  margin-left: var(--pf-v5-global--spacer--sm);
+}
+.pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle-icon {
+  color: var(--pf-v5-c-expandable-section__toggle--Color);
+}
+.pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle-icon:focus, .pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle-icon:hover {
+  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
+}
+.pfext-quick-start-intro__prereq-list {
+  padding-left: 20px;
+}
+.pfext-quick-start-intro__prereq-list__item::marker {
+  font-size: 0.8rem;
+}
+.pfext-quick-start-intro__prereq-list__item-content {
+  position: relative;
+  left: 2px;
 }
 
 .pfext-quick-start-tasks__list button::before {
@@ -1000,36 +1030,6 @@
   font-size: 14px;
 }
 
-.pfext-quick-start-intro__prereq {
-  margin-bottom: var(--pf-v5-global--spacer--md);
-}
-.pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__content {
-  margin-top: var(--pf-v5-global--spacer--sm);
-}
-.pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-.pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle-text {
-  margin-left: var(--pf-v5-global--spacer--sm);
-}
-.pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle-icon {
-  color: var(--pf-v5-c-expandable-section__toggle--Color);
-}
-.pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle-icon:focus, .pfext-quick-start-intro__prereq .pf-v5-c-expandable-section__toggle-icon:hover {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
-}
-.pfext-quick-start-intro__prereq-list {
-  padding-left: 20px;
-}
-.pfext-quick-start-intro__prereq-list__item::marker {
-  font-size: 0.8rem;
-}
-.pfext-quick-start-intro__prereq-list__item-content {
-  position: relative;
-  left: 2px;
-}
-
 .pfext-quick-start-task-header__list {
   padding: 0 !important;
 }
@@ -1044,34 +1044,6 @@
   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-quick-start-task-header {
   margin-bottom: var(--pf-v5-global--spacer--sm);
   display: grid;
@@ -1119,6 +1091,34 @@
   color: var(--pf-v5-global--danger-color--100) !important;
 }
 
+.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;
 }

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,