@patternfly/quickstarts 6.1.0-prerelease.1 → 6.1.0-prerelease.3

package/dist/quickstarts.css

@@ -163,6 +163,10 @@
   border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth) !important;
 }
 
+.pfext-quick-start-footer {
+  padding-top: var(--pf-t--global--spacer--md);
+}
+
 .pfext-quick-start-task {
   flex: 1 1 0;
   overflow: auto;
@@ -171,10 +175,6 @@
   margin-block-end: var(--pf-v6-c-content--MarginBlockEnd);
 }
 
-.pfext-quick-start-footer {
-  padding-top: var(--pf-t--global--spacer--md);
-}
-
 button.pf-v6-c-wizard__nav-link {
   margin-bottom: var(--pf-t--global--spacer--md);
 }

package/dist/quickstarts.min.css

@@ -1 +1 @@
-.pfext-quick-start-panel{--pf-v6-c-drawer__panel--PaddingBlockStart:0}.pfext-popover__base ul{list-style-type:var(--pf-t--global--list-style)}.pfext-markdown-view .h1,.pfext-markdown-view .h2,.pfext-markdown-view .h3,.pfext-markdown-view .h4,.pfext-markdown-view .h5,.pfext-markdown-view .h6,.pfext-markdown-view h1,.pfext-markdown-view h2,.pfext-markdown-view h3,.pfext-markdown-view h4,.pfext-markdown-view h5,.pfext-markdown-view h6{font-family:var(--pf-t--global--font--family--heading);font-weight:var(--pf-t--global--font--weight--heading);line-height:1.1;color:inherit}.pfext-markdown-view .h1,.pfext-markdown-view .h2,.pfext-markdown-view .h3,.pfext-markdown-view h1,.pfext-markdown-view h2,.pfext-markdown-view h3{margin-top:23px;margin-bottom:11.5px}.pfext-markdown-view .h4,.pfext-markdown-view .h5,.pfext-markdown-view .h6,.pfext-markdown-view h4,.pfext-markdown-view h5,.pfext-markdown-view h6{margin-top:11.5px;margin-bottom:11.5px}.pfext-markdown-view .h1,.pfext-markdown-view h1{font-size:var(--pf-t--global--font--size--heading--h1)}.pfext-markdown-view .h2,.pfext-markdown-view h2{font-size:var(--pf-t--global--font--size--heading--h2)}.pfext-markdown-view .h3,.pfext-markdown-view h3{font-size:var(--pf-t--global--font--size--heading--h3)}.pfext-markdown-view .h4,.pfext-markdown-view h4{font-size:var(--pf-t--global--font--size--heading--h4)}.pfext-markdown-view .h5,.pfext-markdown-view h5{font-size:var(--pf-t--global--font--size--heading--h5)}.pfext-markdown-view .h6,.pfext-markdown-view h6{font-size:var(--pf-t--global--font--size--heading--h6)}.pfext-markdown-view p{margin:0 0 11.5px}.pfext-markdown-view ol,.pfext-markdown-view ul{margin-top:0;margin-bottom:11.5px}.pfext-markdown-view ol ol,.pfext-markdown-view ol ul,.pfext-markdown-view ul ol,.pfext-markdown-view ul ul{margin-bottom:0}.pfext-markdown-view dl{margin-top:0;margin-bottom:23px}.pfext-markdown-view dd,.pfext-markdown-view dt{line-height:1.66666667}.pfext-markdown-view dt{font-weight:700}.pfext-markdown-view dd{margin-left:0}.pfext-markdown-view blockquote{padding:11.5px 23px;margin:0 0 23px;font-size:17.5px;border-left:5px solid #f1f1f1}.pfext-markdown-view blockquote ol:last-child,.pfext-markdown-view blockquote p:last-child,.pfext-markdown-view blockquote ul:last-child{margin-bottom:0}.pfext-markdown-view code,.pfext-markdown-view pre{font-family:Menlo,Monaco,Consolas,monospace}.pfext-markdown-view code{padding:2px 4px;font-size:90%;color:#004368;background-color:#def3ff;border-radius:1px}.pfext-markdown-view pre{display:block;padding:11px;margin:0 0 11.5px;font-size:13px;line-height:1.66666667;color:#363636;word-break:break-all;word-wrap:break-word;background-color:#fafafa;border:1px solid #ccc;border-radius:1px}.pfext-markdown-view pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pfext-markdown-view table{background-color:transparent}.pfext-markdown-view table col[class*=col-]{position:static;display:table-column;float:none}.pfext-markdown-view table td[class*=col-],.pfext-markdown-view table th[class*=col-]{position:static;display:table-cell;float:none}.pfext-markdown-view caption{padding-top:10px;padding-bottom:10px;color:#9c9c9c;text-align:left}.pfext-markdown-view th{text-align:left}.pfext-quick-start-panel-content{background-color:var(--pf-t--global--color--brand--default);color:var(--pf-t--global--text--color--inverse);padding:var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg)}.pfext-quick-start-panel-content__body{display:flex;flex-direction:column}.pfext-quick-start-panel-content__close-button button.pf-v6-c-button{--pf-v6-c-button--Color:var(--pf-t--global--text--color--inverse)}.pf-v6-theme-dark .pfext-catalog-item-icon__img{filter:brightness(1.5) invert(1) hue-rotate(180deg) saturate(4)}.pf-v6-c-card__header-main .pf-v6-c-icon__content{display:contents}.pf-v6-c-card.pf-m-clickable::before,.pf-v6-c-card.pf-m-selectable::before{border:var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth)!important}.pfext-quick-start-task{flex:1 1 0;overflow:auto}.pfext-quick-start-task .pf-v6-c-accordion,.pfext-quick-start-task .pf-v6-c-alert,.pfext-quick-start-task .pf-v6-c-code-block{margin-block-end:var(--pf-v6-c-content--MarginBlockEnd)}.pfext-quick-start-footer{padding-top:var(--pf-t--global--spacer--md)}button.pf-v6-c-wizard__nav-link{margin-bottom:var(--pf-t--global--spacer--md)}button.pf-v6-c-wizard__nav-link.pf-m-current{--pf-v6-c-wizard__nav-link-main--BackgroundColor:transparent}button.pf-v6-c-wizard__nav-link::before{background-color:var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);color:var(--pf-v6-c-wizard__nav-link--m-current--before--Color);min-width:var(--pf-v6-c-wizard__nav-link--before--Width)}.pfext-quick-start-task-header button::before{content:none}.pfext-quick-start-task-header__title{font-family:var(--pf-t--global--font--family--body);font-weight:var(---pf-t--global--font--weight--body--bold);font-size:var(--pf-t--global--font--size--body--lg)}.pfext-quick-start-task-header__subtitle{font-size:var(--pf-t--global--font--size--body--default);color:var(--pf-t--global--text--color--subtle);font-weight:var(--pf-t--global--font--weight--body)}.pfext-quick-start-task-header__tryagain{display:block;font-size:var(--pf-t--global--font--size--body--default);color:var(--pf-t--global--text--color--subtle);font-weight:var(--pf-t--global--font--weight--body)}.pf-v6-c-clipboard-copy{--pf-v6-c-clipboard-copy__toggle-icon--Transition:.2s ease-in 0s;--pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate:90deg;--pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor:var(--pf-t--global--background--color--primary--default);--pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderColor:var(--pf-t--global--border--color--default);--pf-v6-c-clipboard-copy__expandable-content--BorderRadius:var(--pf-t--global--border--radius--small);--pf-v6-c-clipboard-copy__expandable-content--OutlineOffset:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy__group--Gap:var(--pf-t--global--spacer--gap--control-to-control--default);--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy--m-inline--BackgroundColor:var(--pf-t--global--background--color--secondary--default);--pf-v6-c-clipboard-copy__actions--Gap:var(--pf-t--global--spacer--gap--action-to-action--plain);--pf-v6-c-clipboard-copy__actions--MarginInlineStart:var(--pf-t--global--spacer--gap--text-to-element--compact);--pf-v6-c-clipboard-copy__actions-item--button--Color:var(--pf-t--global--icon--color--subtle);--pf-v6-c-clipboard-copy__actions-item--button--hover--Color:var(--pf-t--global--icon--color--regular);--pf-v6-c-clipboard-copy__text--m-code--FontFamily:var(--pf-t--global--font--family--mono);--pf-v6-c-clipboard-copy__text--m-code--FontSize:var(--pf-t--global--font--size--body--default)}.pf-v6-c-clipboard-copy.pf-m-inline{display:inline;padding-inline-start:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);white-space:nowrap;background-color:var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor)}.pf-v6-c-clipboard-copy.pf-m-inline.pf-m-block{display:block}.pf-v6-c-clipboard-copy__text{word-break:break-word;white-space:normal}.pf-v6-c-clipboard-copy__actions{display:inline-flex;gap:var(--pf-v6-c-clipboard-copy__actions--Gap);margin-inline-start:var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart)}.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain{--pf-v6-c-button--m-plain__icon--Color:var(--pf-v6-c-clipboard-copy__actions-item--button--Color);--pf-v6-c-button--m-plain--hover__icon--Color:var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color)}.pf-v6-c-code-block{--pf-v6-c-code-block--BackgroundColor:var(--pf-t--global--background--color--secondary--default);--pf-v6-c-code-block--BorderRadius:var(--pf-t--global--border--radius--medium);--pf-v6-c-code-block__header--BorderBlockEndWidth:var(--pf-t--global--border--width--divider--default);--pf-v6-c-code-block__header--BorderBlockEndColor:var(--pf-t--global--border--color--default);--pf-v6-c-code-block__header--PaddingBlockStart:var(--pf-t--global--spacer--xs);--pf-v6-c-code-block__header--PaddingBlockEnd:var(--pf-t--global--spacer--xs);--pf-v6-c-code-block__header--PaddingInlineEnd:var(--pf-t--global--spacer--sm);--pf-v6-c-code-block__header--PaddingInlineStart:var(--pf-t--global--spacer--sm);--pf-v6-c-code-block__content--PaddingBlockStart:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingInlineEnd:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingBlockEnd:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingInlineStart:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__pre--FontFamily:var(--pf-t--global--font--family--mono);--pf-v6-c-code-block__pre--FontSize:var(--pf-t--global--font--size--xs)}.pf-v6-c-code-block{background-color:var(--pf-v6-c-code-block--BackgroundColor);border-radius:var(--pf-v6-c-code-block--BorderRadius)}.pf-v6-c-code-block__header{display:flex;padding-block-start:var(--pf-v6-c-code-block__header--PaddingBlockStart);padding-block-end:var(--pf-v6-c-code-block__header--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-code-block__header--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-code-block__header--PaddingInlineEnd);border-block-end:var(--pf-v6-c-code-block__header--BorderBlockEndWidth) solid var(--pf-v6-c-code-block__header--BorderBlockEndColor)}.pf-v6-c-code-block__actions{display:flex;margin-inline-start:auto}.pf-v6-c-code-block__content{padding-block-start:var(--pf-v6-c-code-block__content--PaddingBlockStart);padding-block-end:var(--pf-v6-c-code-block__content--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-code-block__content--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-code-block__content--PaddingInlineEnd)}.pf-v6-c-code-block__pre{font-family:var(--pf-v6-c-code-block__pre--FontFamily);font-size:var(--pf-v6-c-code-block__pre--FontSize);overflow-wrap:break-word;white-space:pre-wrap}.pf-v6-c-code-block__code{font-family:var(--pf-v6-c-code-block__code--FontFamily,inherit)}
+.pfext-quick-start-panel{--pf-v6-c-drawer__panel--PaddingBlockStart:0}.pfext-popover__base ul{list-style-type:var(--pf-t--global--list-style)}.pfext-markdown-view .h1,.pfext-markdown-view .h2,.pfext-markdown-view .h3,.pfext-markdown-view .h4,.pfext-markdown-view .h5,.pfext-markdown-view .h6,.pfext-markdown-view h1,.pfext-markdown-view h2,.pfext-markdown-view h3,.pfext-markdown-view h4,.pfext-markdown-view h5,.pfext-markdown-view h6{font-family:var(--pf-t--global--font--family--heading);font-weight:var(--pf-t--global--font--weight--heading);line-height:1.1;color:inherit}.pfext-markdown-view .h1,.pfext-markdown-view .h2,.pfext-markdown-view .h3,.pfext-markdown-view h1,.pfext-markdown-view h2,.pfext-markdown-view h3{margin-top:23px;margin-bottom:11.5px}.pfext-markdown-view .h4,.pfext-markdown-view .h5,.pfext-markdown-view .h6,.pfext-markdown-view h4,.pfext-markdown-view h5,.pfext-markdown-view h6{margin-top:11.5px;margin-bottom:11.5px}.pfext-markdown-view .h1,.pfext-markdown-view h1{font-size:var(--pf-t--global--font--size--heading--h1)}.pfext-markdown-view .h2,.pfext-markdown-view h2{font-size:var(--pf-t--global--font--size--heading--h2)}.pfext-markdown-view .h3,.pfext-markdown-view h3{font-size:var(--pf-t--global--font--size--heading--h3)}.pfext-markdown-view .h4,.pfext-markdown-view h4{font-size:var(--pf-t--global--font--size--heading--h4)}.pfext-markdown-view .h5,.pfext-markdown-view h5{font-size:var(--pf-t--global--font--size--heading--h5)}.pfext-markdown-view .h6,.pfext-markdown-view h6{font-size:var(--pf-t--global--font--size--heading--h6)}.pfext-markdown-view p{margin:0 0 11.5px}.pfext-markdown-view ol,.pfext-markdown-view ul{margin-top:0;margin-bottom:11.5px}.pfext-markdown-view ol ol,.pfext-markdown-view ol ul,.pfext-markdown-view ul ol,.pfext-markdown-view ul ul{margin-bottom:0}.pfext-markdown-view dl{margin-top:0;margin-bottom:23px}.pfext-markdown-view dd,.pfext-markdown-view dt{line-height:1.66666667}.pfext-markdown-view dt{font-weight:700}.pfext-markdown-view dd{margin-left:0}.pfext-markdown-view blockquote{padding:11.5px 23px;margin:0 0 23px;font-size:17.5px;border-left:5px solid #f1f1f1}.pfext-markdown-view blockquote ol:last-child,.pfext-markdown-view blockquote p:last-child,.pfext-markdown-view blockquote ul:last-child{margin-bottom:0}.pfext-markdown-view code,.pfext-markdown-view pre{font-family:Menlo,Monaco,Consolas,monospace}.pfext-markdown-view code{padding:2px 4px;font-size:90%;color:#004368;background-color:#def3ff;border-radius:1px}.pfext-markdown-view pre{display:block;padding:11px;margin:0 0 11.5px;font-size:13px;line-height:1.66666667;color:#363636;word-break:break-all;word-wrap:break-word;background-color:#fafafa;border:1px solid #ccc;border-radius:1px}.pfext-markdown-view pre code{padding:0;font-size:inherit;color:inherit;white-space:pre-wrap;background-color:transparent;border-radius:0}.pfext-markdown-view table{background-color:transparent}.pfext-markdown-view table col[class*=col-]{position:static;display:table-column;float:none}.pfext-markdown-view table td[class*=col-],.pfext-markdown-view table th[class*=col-]{position:static;display:table-cell;float:none}.pfext-markdown-view caption{padding-top:10px;padding-bottom:10px;color:#9c9c9c;text-align:left}.pfext-markdown-view th{text-align:left}.pfext-quick-start-panel-content{background-color:var(--pf-t--global--color--brand--default);color:var(--pf-t--global--text--color--inverse);padding:var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg)}.pfext-quick-start-panel-content__body{display:flex;flex-direction:column}.pfext-quick-start-panel-content__close-button button.pf-v6-c-button{--pf-v6-c-button--Color:var(--pf-t--global--text--color--inverse)}.pf-v6-theme-dark .pfext-catalog-item-icon__img{filter:brightness(1.5) invert(1) hue-rotate(180deg) saturate(4)}.pf-v6-c-card__header-main .pf-v6-c-icon__content{display:contents}.pf-v6-c-card.pf-m-clickable::before,.pf-v6-c-card.pf-m-selectable::before{border:var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth)!important}.pfext-quick-start-footer{padding-top:var(--pf-t--global--spacer--md)}.pfext-quick-start-task{flex:1 1 0;overflow:auto}.pfext-quick-start-task .pf-v6-c-accordion,.pfext-quick-start-task .pf-v6-c-alert,.pfext-quick-start-task .pf-v6-c-code-block{margin-block-end:var(--pf-v6-c-content--MarginBlockEnd)}button.pf-v6-c-wizard__nav-link{margin-bottom:var(--pf-t--global--spacer--md)}button.pf-v6-c-wizard__nav-link.pf-m-current{--pf-v6-c-wizard__nav-link-main--BackgroundColor:transparent}button.pf-v6-c-wizard__nav-link::before{background-color:var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);color:var(--pf-v6-c-wizard__nav-link--m-current--before--Color);min-width:var(--pf-v6-c-wizard__nav-link--before--Width)}.pfext-quick-start-task-header button::before{content:none}.pfext-quick-start-task-header__title{font-family:var(--pf-t--global--font--family--body);font-weight:var(---pf-t--global--font--weight--body--bold);font-size:var(--pf-t--global--font--size--body--lg)}.pfext-quick-start-task-header__subtitle{font-size:var(--pf-t--global--font--size--body--default);color:var(--pf-t--global--text--color--subtle);font-weight:var(--pf-t--global--font--weight--body)}.pfext-quick-start-task-header__tryagain{display:block;font-size:var(--pf-t--global--font--size--body--default);color:var(--pf-t--global--text--color--subtle);font-weight:var(--pf-t--global--font--weight--body)}.pf-v6-c-clipboard-copy{--pf-v6-c-clipboard-copy__toggle-icon--Transition:.2s ease-in 0s;--pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate:90deg;--pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart:var(--pf-t--global--spacer--md);--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor:var(--pf-t--global--background--color--primary--default);--pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth:var(--pf-t--global--border--width--control--default);--pf-v6-c-clipboard-copy__expandable-content--BorderColor:var(--pf-t--global--border--color--default);--pf-v6-c-clipboard-copy__expandable-content--BorderRadius:var(--pf-t--global--border--radius--small);--pf-v6-c-clipboard-copy__expandable-content--OutlineOffset:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy__group--Gap:var(--pf-t--global--spacer--gap--control-to-control--default);--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd:var(--pf-t--global--spacer--xs);--pf-v6-c-clipboard-copy--m-inline--BackgroundColor:var(--pf-t--global--background--color--secondary--default);--pf-v6-c-clipboard-copy__actions--Gap:var(--pf-t--global--spacer--gap--action-to-action--plain);--pf-v6-c-clipboard-copy__actions--MarginInlineStart:var(--pf-t--global--spacer--gap--text-to-element--compact);--pf-v6-c-clipboard-copy__actions-item--button--Color:var(--pf-t--global--icon--color--subtle);--pf-v6-c-clipboard-copy__actions-item--button--hover--Color:var(--pf-t--global--icon--color--regular);--pf-v6-c-clipboard-copy__text--m-code--FontFamily:var(--pf-t--global--font--family--mono);--pf-v6-c-clipboard-copy__text--m-code--FontSize:var(--pf-t--global--font--size--body--default)}.pf-v6-c-clipboard-copy.pf-m-inline{display:inline;padding-inline-start:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineEnd);white-space:nowrap;background-color:var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor)}.pf-v6-c-clipboard-copy.pf-m-inline.pf-m-block{display:block}.pf-v6-c-clipboard-copy__text{word-break:break-word;white-space:normal}.pf-v6-c-clipboard-copy__actions{display:inline-flex;gap:var(--pf-v6-c-clipboard-copy__actions--Gap);margin-inline-start:var(--pf-v6-c-clipboard-copy__actions--MarginInlineStart)}.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button.pf-m-plain{--pf-v6-c-button--m-plain__icon--Color:var(--pf-v6-c-clipboard-copy__actions-item--button--Color);--pf-v6-c-button--m-plain--hover__icon--Color:var(--pf-v6-c-clipboard-copy__actions-item--button--hover--Color)}.pf-v6-c-code-block{--pf-v6-c-code-block--BackgroundColor:var(--pf-t--global--background--color--secondary--default);--pf-v6-c-code-block--BorderRadius:var(--pf-t--global--border--radius--medium);--pf-v6-c-code-block__header--BorderBlockEndWidth:var(--pf-t--global--border--width--divider--default);--pf-v6-c-code-block__header--BorderBlockEndColor:var(--pf-t--global--border--color--default);--pf-v6-c-code-block__header--PaddingBlockStart:var(--pf-t--global--spacer--xs);--pf-v6-c-code-block__header--PaddingBlockEnd:var(--pf-t--global--spacer--xs);--pf-v6-c-code-block__header--PaddingInlineEnd:var(--pf-t--global--spacer--sm);--pf-v6-c-code-block__header--PaddingInlineStart:var(--pf-t--global--spacer--sm);--pf-v6-c-code-block__content--PaddingBlockStart:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingInlineEnd:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingBlockEnd:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__content--PaddingInlineStart:var(--pf-t--global--spacer--md);--pf-v6-c-code-block__pre--FontFamily:var(--pf-t--global--font--family--mono);--pf-v6-c-code-block__pre--FontSize:var(--pf-t--global--font--size--xs)}.pf-v6-c-code-block{background-color:var(--pf-v6-c-code-block--BackgroundColor);border-radius:var(--pf-v6-c-code-block--BorderRadius)}.pf-v6-c-code-block__header{display:flex;padding-block-start:var(--pf-v6-c-code-block__header--PaddingBlockStart);padding-block-end:var(--pf-v6-c-code-block__header--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-code-block__header--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-code-block__header--PaddingInlineEnd);border-block-end:var(--pf-v6-c-code-block__header--BorderBlockEndWidth) solid var(--pf-v6-c-code-block__header--BorderBlockEndColor)}.pf-v6-c-code-block__actions{display:flex;margin-inline-start:auto}.pf-v6-c-code-block__content{padding-block-start:var(--pf-v6-c-code-block__content--PaddingBlockStart);padding-block-end:var(--pf-v6-c-code-block__content--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-code-block__content--PaddingInlineStart);padding-inline-end:var(--pf-v6-c-code-block__content--PaddingInlineEnd)}.pf-v6-c-code-block__pre{font-family:var(--pf-v6-c-code-block__pre--FontFamily);font-size:var(--pf-v6-c-code-block__pre--FontSize);overflow-wrap:break-word;white-space:pre-wrap}.pf-v6-c-code-block__code{font-family:var(--pf-v6-c-code-block__code--FontFamily,inherit)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "6.1.0-prerelease.1",
+  "version": "6.1.0-prerelease.3",
   "description": "PatternFly quick starts",
   "files": [
     "src",

package/src/QuickStartContainer.tsx

@@ -0,0 +1,142 @@
+import * as React from 'react';
+import {
+  QuickStartContext,
+  QuickStartContextValues,
+  useValuesForQuickStartContext,
+} from './utils/quick-start-context';
+import QuickStartDrawer from './QuickStartDrawer';
+import { QuickStart, AllQuickStartStates } from './utils/quick-start-types';
+
+export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement> {
+  /** array of quick starts */
+  quickStarts: QuickStart[];
+  /** id of the currently active quick start */
+  activeQuickStartID: string;
+  /** setter for the active quick starts */
+  setActiveQuickStartID: React.Dispatch<React.SetStateAction<string>>;
+  /** quick starts state object */
+  allQuickStartStates: AllQuickStartStates;
+  /** setter for the quick starts state object */
+  setAllQuickStartStates: React.Dispatch<React.SetStateAction<AllQuickStartStates>>;
+  /** content to render within the container */
+  children?: React.ReactNode;
+  /** element to render the drawer panel into */
+  appendTo?: HTMLElement | (() => HTMLElement);
+  /** if true, the panel will take up the full browser width */
+  fullWidth?: boolean;
+  /** callback when an in-progress quick start is closed */
+  onCloseInProgress?: any;
+  /** callback when a not-in-progress quick start is closed */
+  onCloseNotInProgress?: any;
+  /** true to show footer buttons in the catalog tiles (default true) */
+  showCardFooters?: boolean;
+  /** true to use legacy drawer header variant colors */
+  useLegacyHeaderColors?: boolean;
+  /** text resources object */
+  resourceBundle?: any;
+  /** language of the current resource bundle
+   * Add custom strings: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#localization
+   */
+  language?: string;
+  /** if true, will show a loading spinner on the catalog page (default false) */
+  loading?: boolean;
+  /** if true, will update the browser URL with ?quickstart={ID} (default true) */
+  useQueryParams?: boolean;
+  /** if true, the TaskReview component, aka "Check your work", will be shown regardless of task status */
+  alwaysShowTaskReview?: boolean;
+  /**
+   * Additional markdown extensions and renderers to use
+   * Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
+   */
+  markdown?: {
+    extensions?: any[];
+    renderExtension?: (docContext: Document, rootSelector: string) => React.ReactNode;
+  };
+  /** additional quick start context props */
+  contextProps?: QuickStartContextValues;
+  /** Indicates that QuickStart should create and maintain its own drawer. If false, a QuickStartDrawerContent component should be present within the children, replacing the custom Drawer's DrawerContent. */
+  isManagedDrawer?: boolean;
+}
+
+export const QuickStartContainer: React.FC<QuickStartContainerProps> = ({
+  quickStarts,
+  children,
+  activeQuickStartID,
+  allQuickStartStates,
+  setActiveQuickStartID,
+  setAllQuickStartStates,
+  appendTo,
+  fullWidth,
+  onCloseInProgress,
+  onCloseNotInProgress,
+  resourceBundle,
+  showCardFooters,
+  useLegacyHeaderColors,
+  language,
+  loading = false,
+  useQueryParams = true,
+  markdown,
+  contextProps,
+  alwaysShowTaskReview = true,
+  isManagedDrawer = true,
+  ...props
+}: QuickStartContainerProps) => {
+  const valuesForQuickstartContext: QuickStartContextValues = useValuesForQuickStartContext({
+    allQuickStarts: quickStarts,
+    activeQuickStartID,
+    setActiveQuickStartID,
+    allQuickStartStates,
+    setAllQuickStartStates,
+    footer: {
+      show: showCardFooters,
+    },
+    useLegacyHeaderColors,
+    language,
+    resourceBundle: {
+      ...resourceBundle,
+      // Start: "Let's go!",
+      // Continue: 'Resume',
+      // Restart: 'Start over',
+    },
+    loading,
+    useQueryParams,
+    markdown,
+    alwaysShowTaskReview,
+    ...contextProps,
+  });
+
+  React.useEffect(() => {
+    if (
+      quickStarts &&
+      JSON.stringify(quickStarts) !== JSON.stringify(valuesForQuickstartContext.allQuickStarts)
+    ) {
+      valuesForQuickstartContext.setAllQuickStarts(quickStarts);
+    }
+  }, [quickStarts, valuesForQuickstartContext]);
+
+  React.useEffect(() => {
+    if (loading !== valuesForQuickstartContext.loading) {
+      valuesForQuickstartContext.setLoading(loading);
+    }
+  }, [loading, valuesForQuickstartContext]);
+
+  const drawerProps = {
+    appendTo,
+    fullWidth,
+    onCloseInProgress,
+    onCloseNotInProgress,
+    ...props,
+  };
+
+  return (
+    <QuickStartContext.Provider value={valuesForQuickstartContext}>
+      {isManagedDrawer ? (
+        <QuickStartDrawer {...drawerProps}>{children}</QuickStartDrawer>
+      ) : (
+        children
+      )}
+    </QuickStartContext.Provider>
+  );
+};
+
+export default QuickStartContainer;

package/src/QuickStartDrawer.tsx

@@ -1,142 +1,15 @@
 import * as React from 'react';
 import { Drawer, DrawerContent, DrawerContentBody } from '@patternfly/react-core';
 import QuickStartCloseModal from './QuickStartCloseModal';
-import QuickStartPanelContent from './QuickStartPanelContent';
+import QuickStartDrawerContent from './QuickStartDrawerContent';
 import {
   getDefaultQuickStartState,
   QuickStartContext,
   QuickStartContextValues,
-  useValuesForQuickStartContext,
 } from './utils/quick-start-context';
 import { QUICKSTART_ID_FILTER_KEY } from './utils/const';
-import { QuickStart, QuickStartStatus, AllQuickStartStates } from './utils/quick-start-types';
+import { QuickStart, QuickStartStatus } from './utils/quick-start-types';
 import { getQuickStartByName } from './utils/quick-start-utils';
-
-export interface QuickStartContainerProps extends React.HTMLProps<HTMLDivElement> {
-  /** array of quick starts */
-  quickStarts: QuickStart[];
-  /** id of the currently active quick start */
-  activeQuickStartID: string;
-  /** setter for the active quick starts */
-  setActiveQuickStartID: React.Dispatch<React.SetStateAction<string>>;
-  /** quick starts state object */
-  allQuickStartStates: AllQuickStartStates;
-  /** setter for the quick starts state object */
-  setAllQuickStartStates: React.Dispatch<React.SetStateAction<AllQuickStartStates>>;
-  /** content to render within the container */
-  children?: React.ReactNode;
-  /** element to render the drawer panel into */
-  appendTo?: HTMLElement | (() => HTMLElement);
-  /** if true, the panel will take up the full browser width */
-  fullWidth?: boolean;
-  /** callback when an in-progress quick start is closed */
-  onCloseInProgress?: any;
-  /** callback when a not-in-progress quick start is closed */
-  onCloseNotInProgress?: any;
-  /** true to show footer buttons in the catalog tiles (default true) */
-  showCardFooters?: boolean;
-  /** true to use legacy drawer header variant colors */
-  useLegacyHeaderColors?: boolean;
-  /** text resources object */
-  resourceBundle?: any;
-  /** language of the current resource bundle
-   * Add custom strings: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#localization
-   */
-  language?: string;
-  /** if true, will show a loading spinner on the catalog page (default false) */
-  loading?: boolean;
-  /** if true, will update the browser URL with ?quickstart={ID} (default true) */
-  useQueryParams?: boolean;
-  /** if true, the TaskReview component, aka "Check your work", will be shown regardless of task status */
-  alwaysShowTaskReview?: boolean;
-  /**
-   * Additional markdown extensions and renderers to use
-   * Example usage: https://github.com/patternfly/patternfly-quickstarts/tree/main/packages/module#markdown-extensions
-   */
-  markdown?: {
-    extensions?: any[];
-    renderExtension?: (docContext: Document, rootSelector: string) => React.ReactNode;
-  };
-  /** additional quick start context props */
-  contextProps?: QuickStartContextValues;
-}
-
-export const QuickStartContainer: React.FC<QuickStartContainerProps> = ({
-  quickStarts,
-  children,
-  activeQuickStartID,
-  allQuickStartStates,
-  setActiveQuickStartID,
-  setAllQuickStartStates,
-  appendTo,
-  fullWidth,
-  onCloseInProgress,
-  onCloseNotInProgress,
-  resourceBundle,
-  showCardFooters,
-  useLegacyHeaderColors,
-  language,
-  loading = false,
-  useQueryParams = true,
-  markdown,
-  contextProps,
-  alwaysShowTaskReview = true,
-  ...props
-}: QuickStartContainerProps) => {
-  const valuesForQuickstartContext: QuickStartContextValues = useValuesForQuickStartContext({
-    allQuickStarts: quickStarts,
-    activeQuickStartID,
-    setActiveQuickStartID,
-    allQuickStartStates,
-    setAllQuickStartStates,
-    footer: {
-      show: showCardFooters,
-    },
-    useLegacyHeaderColors,
-    language,
-    resourceBundle: {
-      ...resourceBundle,
-      // Start: "Let's go!",
-      // Continue: 'Resume',
-      // Restart: 'Start over',
-    },
-    loading,
-    useQueryParams,
-    markdown,
-    alwaysShowTaskReview,
-    ...contextProps,
-  });
-
-  React.useEffect(() => {
-    if (
-      quickStarts &&
-      JSON.stringify(quickStarts) !== JSON.stringify(valuesForQuickstartContext.allQuickStarts)
-    ) {
-      valuesForQuickstartContext.setAllQuickStarts(quickStarts);
-    }
-  }, [quickStarts, valuesForQuickstartContext]);
-
-  React.useEffect(() => {
-    if (loading !== valuesForQuickstartContext.loading) {
-      valuesForQuickstartContext.setLoading(loading);
-    }
-  }, [loading, valuesForQuickstartContext]);
-
-  const drawerProps = {
-    appendTo,
-    fullWidth,
-    onCloseInProgress,
-    onCloseNotInProgress,
-    ...props,
-  };
-
-  return (
-    <QuickStartContext.Provider value={valuesForQuickstartContext}>
-      <QuickStartDrawer {...drawerProps}>{children}</QuickStartDrawer>
-    </QuickStartContext.Provider>
-  );
-};
-
 export interface QuickStartDrawerProps extends React.HTMLProps<HTMLDivElement> {
   quickStarts?: QuickStart[];
   children?: React.ReactNode;
@@ -159,7 +32,6 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
     activeQuickStartID,
     setActiveQuickStart,
     allQuickStarts = [],
-    activeQuickStartState,
     allQuickStartStates,
     setAllQuickStartStates,
   } = React.useContext<QuickStartContextValues>(QuickStartContext);
@@ -189,9 +61,8 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
   }, [activeQuickStartID, allQuickStartStates, setAllQuickStartStates]);
 
   const [modalOpen, setModalOpen] = React.useState<boolean>(false);
-  const activeQuickStartStatus = activeQuickStartState?.status;
   const onClose = () => setActiveQuickStart('');
-  const handleClose = () => {
+  const handleClose = (activeQuickStartStatus: string | number) => {
     if (activeQuickStartStatus === QuickStartStatus.IN_PROGRESS) {
       if (onCloseInProgress) {
         onCloseInProgress();
@@ -212,14 +83,6 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
 
   const onModalCancel = () => setModalOpen(false);
 
-  const fullWidthPanelStyle = fullWidth
-    ? {
-        style: {
-          flex: 1,
-        },
-      }
-    : {};
-
   const fullWidthBodyStyle = fullWidth
     ? {
         style: {
@@ -228,27 +91,22 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
       }
     : {};
 
-  const panelContent = (
-    <QuickStartPanelContent
-      quickStarts={combinedQuickStarts}
-      handleClose={handleClose}
-      activeQuickStartID={activeQuickStartID}
-      appendTo={appendTo}
-      isResizable={!fullWidth}
-      {...fullWidthPanelStyle}
-    />
-  );
-
   return (
     <>
       <Drawer isExpanded={!!activeQuickStartID} isInline {...props}>
-        {children ? (
-          <DrawerContent panelContent={panelContent} {...fullWidthBodyStyle}>
-            <DrawerContentBody>{children}</DrawerContentBody>
-          </DrawerContent>
-        ) : (
-          <div>{panelContent}</div>
-        )}
+        <DrawerContent
+          panelContent={
+            <QuickStartDrawerContent
+              quickStarts={combinedQuickStarts}
+              handleDrawerClose={handleClose}
+              appendTo={appendTo}
+              fullWidth={fullWidth}
+            />
+          }
+          {...fullWidthBodyStyle}
+        >
+          <DrawerContentBody>{children}</DrawerContentBody>
+        </DrawerContent>
       </Drawer>
       <QuickStartCloseModal
         isOpen={modalOpen}
@@ -258,3 +116,5 @@ export const QuickStartDrawer: React.FC<QuickStartDrawerProps> = ({
     </>
   );
 };
+
+export default QuickStartDrawer;

package/src/QuickStartDrawerContent.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import QuickStartPanelContent from './QuickStartPanelContent';
+import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
+import { QuickStart } from './utils/quick-start-types';
+
+export interface QuickStartDrawerContentProps extends React.HTMLProps<HTMLDivElement> {
+  quickStarts?: QuickStart[];
+  appendTo?: HTMLElement | (() => HTMLElement);
+  fullWidth?: boolean;
+  onCloseInProgress?: any;
+  onCloseNotInProgress?: any;
+  handleDrawerClose?: (quickStartStatus: string | number) => void;
+}
+
+export const QuickStartDrawerContent: React.FC<QuickStartDrawerContentProps> = ({
+  quickStarts = [],
+  appendTo,
+  fullWidth,
+  handleDrawerClose,
+  ...props
+}) => {
+  const {
+    activeQuickStartID,
+    allQuickStarts = [],
+    activeQuickStartState,
+  } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const combinedQuickStarts = allQuickStarts.concat(quickStarts);
+
+  const handleClose = () => {
+    handleDrawerClose && handleDrawerClose(activeQuickStartState?.status);
+  };
+
+  const fullWidthPanelStyle = fullWidth
+    ? {
+        style: {
+          flex: 1,
+        },
+      }
+    : {};
+
+  return (
+    <QuickStartPanelContent
+      quickStarts={combinedQuickStarts}
+      handleClose={handleClose}
+      activeQuickStartID={activeQuickStartID}
+      appendTo={appendTo}
+      isResizable={!fullWidth}
+      {...fullWidthPanelStyle}
+      {...props}
+    />
+  );
+};
+
+export default QuickStartDrawerContent;

package/src/index.ts

@@ -3,7 +3,10 @@ import './styles/style.scss';
 export * from './QuickStartCatalogPage';
 export * from './catalog';
 export * from './ConsoleInternal/components/utils';
+export * from './QuickStartContainer';
 export * from './QuickStartDrawer';
+export * from './QuickStartDrawerContent';
+export * from './QuickStartCloseModal';
 export * from './HelpTopicDrawer';
 export * from './utils/const';
 export * from './utils/quick-start-context';