@patternfly/quickstarts 6.0.0-alpha.1 → 6.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/dist/catalog/QuickStartTile.d.ts +3 -0
  2. package/dist/catalog/QuickStartTileHeader.d.ts +12 -0
  3. package/dist/catalog/index.d.ts +1 -1
  4. package/dist/index.es.js +31 -20
  5. package/dist/index.es.js.map +1 -1
  6. package/dist/index.js +32 -20
  7. package/dist/index.js.map +1 -1
  8. package/dist/quickstarts-base.css +63 -60
  9. package/dist/quickstarts-full.es.js +737 -78
  10. package/dist/quickstarts-full.es.js.map +1 -1
  11. package/dist/quickstarts-standalone.css +6 -0
  12. package/dist/quickstarts-standalone.min.css +1 -1
  13. package/dist/quickstarts.css +63 -60
  14. package/dist/quickstarts.min.css +1 -1
  15. package/dist/utils/quick-start-context.d.ts +2 -0
  16. package/package.json +4 -5
  17. package/src/QuickStartController.tsx +1 -1
  18. package/src/QuickStartPanelContent.tsx +3 -3
  19. package/src/catalog/QuickStartTile.tsx +19 -7
  20. package/src/catalog/QuickStartTileHeader.scss +4 -0
  21. package/src/catalog/QuickStartTileHeader.tsx +31 -4
  22. package/src/catalog/index.ts +1 -1
  23. package/src/controller/QuickStartTaskHeader.tsx +4 -2
  24. package/src/utils/quick-start-context.tsx +2 -0
package/dist/quickstarts.css CHANGED
@@ -188,28 +188,6 @@
188
188
  display: inherit !important;
189
189
  }
190
190
 
191
- .pfext-quick-start-tile {
192
- height: 100%;
193
- }
194
- .pfext-quick-start-tile .catalog-tile-pf-description .has-footer {
195
- display: block;
196
- -webkit-line-clamp: unset;
197
- }
198
- .pfext-quick-start-tile .catalog-tile-pf-icon {
199
- display: flex;
200
- }
201
-
202
- .pfext-quick-start-tile-header__status {
203
- margin: var(--pf-t--global--spacer--sm) 0;
204
- }
205
- .pfext-quick-start-tile-header--margin {
206
- margin-right: var(--pf-t--global--spacer--sm);
207
- margin-bottom: var(--pf-t--global--spacer--sm);
208
- }
209
- .pfext-quick-start-tile-header .pf-v6-c-badge:not(:last-of-type) {
210
- margin-right: var(--pf-t--global--spacer--sm);
211
- }
212
-
213
191
  .pfext-quick-start-tile-description {
214
192
  display: -webkit-box;
215
193
  overflow: hidden;
@@ -235,6 +213,31 @@
235
213
  padding-left: 20px;
236
214
  }
237
215
 
216
+ .pfext-quick-start-tile {
217
+ height: 100%;
218
+ }
219
+ .pfext-quick-start-tile .catalog-tile-pf-description .has-footer {
220
+ display: block;
221
+ -webkit-line-clamp: unset;
222
+ }
223
+ .pfext-quick-start-tile .catalog-tile-pf-icon {
224
+ display: flex;
225
+ }
226
+
227
+ .pfext-quick-start-tile-header__status {
228
+ margin: var(--pf-t--global--spacer--sm) 0;
229
+ }
230
+ .pfext-quick-start-tile-header--margin {
231
+ margin-right: var(--pf-t--global--spacer--sm);
232
+ margin-bottom: var(--pf-t--global--spacer--sm);
233
+ }
234
+ .pfext-quick-start-tile-header .pf-v6-c-badge:not(:last-of-type) {
235
+ margin-right: var(--pf-t--global--spacer--sm);
236
+ }
237
+ .pfext-quick-start-tile-header h3 {
238
+ flex: 1;
239
+ }
240
+
238
241
  .pfext-quick-start-catalog-filter__input {
239
242
  flex-grow: 1;
240
243
  max-width: 500px;
@@ -274,16 +277,6 @@
274
277
  padding-top: 0;
275
278
  }
276
279
 
277
- .pfext-quick-start-content {
278
- flex: 1 1 0;
279
- overflow: auto;
280
- padding: var(--pf-t--global--spacer--lg);
281
- font-size: 16px;
282
- }
283
- .pfext-quick-start-content .pf-v6-c-alert__description p {
284
- font-size: 13px;
285
- }
286
-
287
280
  .pfext-quick-start-footer {
288
281
  background-color: var(--pf-t--global--background--color--primary--default);
289
282
  flex: 0 0 auto;
@@ -296,6 +289,16 @@
296
289
  float: right;
297
290
  }
298
291
 
292
+ .pfext-quick-start-content {
293
+ flex: 1 1 0;
294
+ overflow: auto;
295
+ padding: var(--pf-t--global--spacer--lg);
296
+ font-size: 16px;
297
+ }
298
+ .pfext-quick-start-content .pf-v6-c-alert__description p {
299
+ font-size: 13px;
300
+ }
301
+
299
302
  .pfext-quick-start-intro__prereq {
300
303
  margin-bottom: var(--pf-t--global--spacer--md);
301
304
  }
@@ -412,34 +415,6 @@
412
415
  margin-bottom: var(--pf-t--global--spacer--xs);
413
416
  }
414
417
 
415
- .pfext-quick-start-task-review-alert {
416
- margin: var(--pf-t--global--spacer--lg) 0;
417
- }
418
-
419
- .pfext-quick-start-task-review {
420
- font-size: var(--pf-t--global--font--size--md);
421
- line-height: var(--pf-t--global--font--line-height--heading);
422
- font-family: var(--pf-t--global--font--family--heading);
423
- }
424
- .pfext-quick-start-task-review__actions {
425
- display: flex;
426
- align-items: flex-start;
427
- margin-bottom: var(--pf-t--global--spacer--sm);
428
- }
429
- .pfext-quick-start-task-review__actions input[type=radio] {
430
- margin-top: 0;
431
- margin-right: 0;
432
- }
433
- .pfext-quick-start-task-review__radio {
434
- margin-right: var(--pf-t--global--spacer--xl) !important;
435
- }
436
- .pfext-quick-start-task-review--success {
437
- color: var(--pf-t--global--text--color--status--success--default) !important;
438
- }
439
- .pfext-quick-start-task-review--failed {
440
- color: var(--pf-t--global--text--color--status--danger--default);
441
- }
442
-
443
418
  .pfext-quick-start-task-header {
444
419
  margin-bottom: var(--pf-t--global--spacer--sm);
445
420
  display: grid;
@@ -487,6 +462,34 @@
487
462
  color: var(--pf-t--global--text--color--status--danger--default) !important;
488
463
  }
489
464
 
465
+ .pfext-quick-start-task-review-alert {
466
+ margin: var(--pf-t--global--spacer--lg) 0;
467
+ }
468
+
469
+ .pfext-quick-start-task-review {
470
+ font-size: var(--pf-t--global--font--size--md);
471
+ line-height: var(--pf-t--global--font--line-height--heading);
472
+ font-family: var(--pf-t--global--font--family--heading);
473
+ }
474
+ .pfext-quick-start-task-review__actions {
475
+ display: flex;
476
+ align-items: flex-start;
477
+ margin-bottom: var(--pf-t--global--spacer--sm);
478
+ }
479
+ .pfext-quick-start-task-review__actions input[type=radio] {
480
+ margin-top: 0;
481
+ margin-right: 0;
482
+ }
483
+ .pfext-quick-start-task-review__radio {
484
+ margin-right: var(--pf-t--global--spacer--xl) !important;
485
+ }
486
+ .pfext-quick-start-task-review--success {
487
+ color: var(--pf-t--global--text--color--status--success--default) !important;
488
+ }
489
+ .pfext-quick-start-task-review--failed {
490
+ color: var(--pf-t--global--text--color--status--danger--default);
491
+ }
492
+
490
493
  .pfext-modal {
491
494
  position: absolute !important;
492
495
  }
package/dist/quickstarts.min.css CHANGED
@@ -1 +1 @@
1
- .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-drawer__body{display:flex;flex-direction:column;z-index:0;position:relative}.pfext-quick-start-drawer__modal>.pf-v6-c-modal-box__footer{display:block}.pfext-quick-start-panel-content__header{position:sticky;top:0;background:inherit;z-index:var(--pf-t--global--z-index--xs)}.pfext-quick-start-panel-content__header__shadow{box-shadow:var(--pf-t--global--box-shadow--sm--bottom)}.pfext-quick-start-panel-content__header--blue-white{background-color:var(--pf-t--global--color--brand--default)}.pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__title{color:var(--pf-t--global--text--color--on-brand--default)}.pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration{color:var(--pf-t--global--text--color--on-brand--default)}.pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__close-button button{color:var(--pf-t--global--text--color--on-brand--default)!important}.pfext-quick-start-panel-content__body{display:flex;flex-direction:column}.pfext-quick-start-panel-content__title{display:flex;align-items:center;flex-wrap:wrap}.pfext-quick-start-panel-content__duration{display:inline-block;font-size:var(--pf-t--global--font--size--body--default);font-weight:var(--pf-t--global--font--weight--body);line-height:1;color:var(--pf-t--global--text--color--subtle)}.pfext-quick-start-panel-content__footer__shadow{box-shadow:var(--pf-t--global--box-shadow--sm--top)}.pfext-quick-start-catalog__gallery{--pf-v6-l-gallery--GridTemplateColumns:repeat(auto-fill, 300px)!important}.pfext-quick-start-catalog__gallery-item{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-t--global--spacer--sm) 0}.pfext-quick-start-tile-header--margin{margin-right:var(--pf-t--global--spacer--sm);margin-bottom:var(--pf-t--global--spacer--sm)}.pfext-quick-start-tile-header .pf-v6-c-badge:not(:last-of-type){margin-right:var(--pf-t--global--spacer--sm)}.pfext-quick-start-tile-description{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}.pfext-quick-start-tile-description p{margin:0 0 11.5px}.pfext-quick-start-tile-prerequisites{display:inline-flex}.pfext-quick-start-tile-prerequisites__text{margin-right:var(--pf-t--global--spacer--sm);font-size:var(--pf-t--global--font--size--md);margin-top:11.5px;margin-bottom:11.5px;font-family:var(--pf-t--global--font--family--heading);font-weight:var(--pf-t--global--font--weight--heading);line-height:1.1}.pfext-quick-start-tile-prerequisites-list{padding-left:20px}.pfext-quick-start-catalog-filter__input{flex-grow:1;max-width:500px}.pfext-quick-start-catalog-filter__count{font-weight:var(--pf-t--global--font--weight--body--bold)}.pf-v6-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex{--pf-v6-c-toolbar--PaddingBottom:var(--pf-t--global--spacer--sm);--pf-v6-c-toolbar--PaddingTop:var(--pf-t--global--spacer--sm);--pf-v6-c-toolbar--RowGap:0;font-size:14px}.pf-v6-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex .pf-v6-c-select{--pf-v6-c-select__toggle--FontSize:14px}.pf-v6-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex .pf-v6-c-check{--pf-v6-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-content{flex:1 1 0;overflow:auto;padding:var(--pf-t--global--spacer--lg);font-size:16px}.pfext-quick-start-content .pf-v6-c-alert__description p{font-size:13px}.pfext-quick-start-footer{background-color:var(--pf-t--global--background--color--primary--default);flex:0 0 auto;padding:var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg)}.pfext-quick-start-footer__actionbtn{margin-right:var(--pf-t--global--spacer--md)}.pfext-quick-start-footer__restartbtn{float:right}.pfext-quick-start-intro__prereq{margin-bottom:var(--pf-t--global--spacer--md)}.pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__content{margin-top:var(--pf-t--global--spacer--sm)}.pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle{padding-top:0;padding-bottom:0}.pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle-text{margin-left:var(--pf-t--global--spacer--sm)}.pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle-icon{color:var(--pf-v6-c-expandable-section__toggle--Color)}.pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle-icon:focus,.pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle-icon:hover{--pf-v6-c-expandable-section__toggle--Color:var(--pf-v6-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:.8rem}.pfext-quick-start-intro__prereq-list__item-content{position:relative;left:2px}.pfext-quick-start-tasks__list button::before{content:none}.pfext-quick-start-tasks__list li.pf-v6-c-wizard__nav-item{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;margin-bottom:var(--pf-t--global--spacer--xs)}.pfext-quick-start-tasks__list .pfext-quick-start-task__content{margin-bottom:var(--pf-t--global--spacer--md)}.pfext-quick-start-tasks__list .task-pflist-title{font-size:14px!important;margin-bottom:6px}.pfext-quick-start-tasks__list .task-pflist-subtitle{color:var(--pf-t--global--text--color--subtle);font-size:16px}.pfext-quick-start-tasks__list .task-pflist-list{font-size:16px}.pfext-quick-start-tasks__list .task-pflist-list--prereq{padding-left:var(--pf-t--global--spacer--lg)}.pfext-quick-start-tasks__list .task-pflist-list--prereq li+li{margin-top:4px}.pfext-quick-start-tasks__list .task-pflist-list--proc{padding-left:10px}.pfext-quick-start-tasks__list .task-pflist-list--proc li+li{margin-top:16px}.pfext-quick-start-tasks__list .task-pflist-list__item--prereq::marker{font-size:.8rem}.pfext-quick-start-tasks__list .task-pflist-list__item--prereq .task-pflist-list__item__content{position:relative;left:2px}.pfext-quick-start-tasks__list .task-pflist-list__item--proc{font-size:14px}.pfext-quick-start-tasks__list .task-pflist-list__item--proc .task-pflist-list__item__content{position:relative;left:4px}.pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-v6-c-alert{margin:var(--pf-t--global--spacer--md) 0}.pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-v6-c-alert__title{margin-top:0;margin-bottom:0;font-weight:var(--pf-v6-c-alert__title--FontWeight);font-family:inherit;line-height:inherit;color:var(--pf-v6-c-alert__title--Color);word-break:break-word}.pfext-quick-start-tasks__list .task-pflist-list__item__content .task-pflist-list__item__content__note{background-color:var(--pf-t--global--color--nonstatus--blue--default);border-color:var(--pf-t--global--border--color--brand--default);margin:var(--pf-t--global--spacer--md) 0;color:var(--pf-t--global--text--color--nonstatus--on-blue--default)}.pfext-quick-start-tasks__list .task-pflist-list__item__content .task-pflist-list__item__content__note__body{font-size:14px}.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-t--global--spacer--xs)}.pfext-quick-start-task-review-alert{margin:var(--pf-t--global--spacer--lg) 0}.pfext-quick-start-task-review{font-size:var(--pf-t--global--font--size--md);line-height:var(--pf-t--global--font--line-height--heading);font-family:var(--pf-t--global--font--family--heading)}.pfext-quick-start-task-review__actions{display:flex;align-items:flex-start;margin-bottom:var(--pf-t--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-t--global--spacer--xl)!important}.pfext-quick-start-task-review--success{color:var(--pf-t--global--text--color--status--success--default)!important}.pfext-quick-start-task-review--failed{color:var(--pf-t--global--text--color--status--danger--default)}.pfext-quick-start-task-header{margin-bottom:var(--pf-t--global--spacer--sm);display:grid;grid-template-columns:min-content auto;font-size:var(--pf-t--global--font--size--body--default)}.pfext-quick-start-task-header button::before{content:none}.pfext-quick-start-task-header__title{color:var(--pf-t--global--text--color--brand--default)!important;margin-right:var(--pf-t--global--spacer--md)!important}.pfext-quick-start-task-header__subtitle{font-size:var(--pf-t--global--font--size--body--sm);color:var(--pf-t--global--text--color--subtle)!important}.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)!important}.pfext-quick-start-task-header__title-success{color:var(--pf-t--global--text--color--status--success--default)!important}.pfext-quick-start-task-header__title-failed{color:var(--pf-t--global--text--color--status--danger--default)!important}.pfext-quick-start-task-header__task-icon-init{background-color:var(--pf-t--global--color--brand--default);border-radius:var(--pf-t--global--border--radius--large);color:var(--pf-t--global--text--color--on-brand--default);display:inline-flex;justify-content:center;height:1.5em;width:1.5em}.pfext-quick-start-task-header__task-icon-failed,.pfext-quick-start-task-header__task-icon-success{vertical-align:middle!important}.pfext-quick-start-task-header__task-icon-success{color:var(--pf-t--global--text--color--status--success--default)!important}.pfext-quick-start-task-header__task-icon-failed{color:var(--pf-t--global--text--color--status--danger--default)!important}.pfext-modal{position:absolute!important}.pfext-markdown-view .pfext-code-block__pre{display:flex;border:none;border-radius:none;background-color:transparent;margin:0;padding:0}.pfext-markdown-view .pfext-markdown-execute-snippet__button>i.fa-check{display:none}.pfext-markdown-view .pfext-markdown-execute-snippet__button>i.fa-play{display:inline}.pfext-markdown-view .pfext-markdown-execute-snippet__button[data-executed]>i.fa-check{display:inline}.pfext-markdown-view .pfext-markdown-execute-snippet__button[data-executed]>i.fa-play{display:none}.pfext-markdown-view .pfext-markdown-admonition.pf-v6-c-alert{margin:var(--pf-t--global--spacer--md) 0}.pfext-markdown-view .pfext-markdown-admonition.pf-v6-c-alert .pf-v6-c-alert__title{margin-top:0;margin-bottom:0;font-weight:var(--pf-v6-c-alert__title--FontWeight);font-family:inherit;line-height:inherit;color:var(--pf-v6-c-alert__title--Color);word-break:break-word}@keyframes pfext-spotlight-expand{0%{outline-offset:-4px;outline-width:4px;opacity:1}100%{outline-offset:21px;outline-width:12px;opacity:0}}@keyframes pfext-spotlight-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes pfext-spotlight-fade-out{0%{opacity:1}100%{opacity:0}}.pfext-spotlight{pointer-events:none;position:absolute}.pfext-spotlight__with-backdrop{mix-blend-mode:hard-light}.pfext-spotlight__element-highlight-noanimate{border:var(--pf-t--global--border--width--strong) solid var(--pf-t--global--border--color--brand--default);background-color:var(--pf-t--color--gray--40);z-index:9999}.pfext-spotlight__element-highlight-animate{pointer-events:none;position:absolute;box-shadow:inset 0 0 0 4px var(--pf-t--global--color--brand--default);opacity:0;animation:.4s pfext-spotlight-fade-in 0s ease-in-out,5s pfext-spotlight-fade-out 12.8s ease-in-out;animation-fill-mode:forwards}.pfext-spotlight__element-highlight-animate::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;animation:1.2s pfext-spotlight-expand 1.6s ease-out;animation-fill-mode:forwards;outline:4px solid var(--pf-t--global--color--brand--default);outline-offset:-4px}.pf-v6-c-clipboard-copy.pf-m-inline{display:inline;padding-block-start:var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart);padding-block-end:var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);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}.pf-v6-c-clipboard-copy__actions-item{margin-block-start:calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart));margin-block-end:calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd))}.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button{--pf-v6-c-button--PaddingBlockStart:var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart);--pf-v6-c-button--PaddingInlineEnd:var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd);--pf-v6-c-button--PaddingBlockEnd:var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd);--pf-v6-c-button--PaddingInlineStart:var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart)}.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)}
1
+ .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-drawer__body{display:flex;flex-direction:column;z-index:0;position:relative}.pfext-quick-start-drawer__modal>.pf-v6-c-modal-box__footer{display:block}.pfext-quick-start-panel-content__header{position:sticky;top:0;background:inherit;z-index:var(--pf-t--global--z-index--xs)}.pfext-quick-start-panel-content__header__shadow{box-shadow:var(--pf-t--global--box-shadow--sm--bottom)}.pfext-quick-start-panel-content__header--blue-white{background-color:var(--pf-t--global--color--brand--default)}.pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__title{color:var(--pf-t--global--text--color--on-brand--default)}.pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration{color:var(--pf-t--global--text--color--on-brand--default)}.pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__close-button button{color:var(--pf-t--global--text--color--on-brand--default)!important}.pfext-quick-start-panel-content__body{display:flex;flex-direction:column}.pfext-quick-start-panel-content__title{display:flex;align-items:center;flex-wrap:wrap}.pfext-quick-start-panel-content__duration{display:inline-block;font-size:var(--pf-t--global--font--size--body--default);font-weight:var(--pf-t--global--font--weight--body);line-height:1;color:var(--pf-t--global--text--color--subtle)}.pfext-quick-start-panel-content__footer__shadow{box-shadow:var(--pf-t--global--box-shadow--sm--top)}.pfext-quick-start-catalog__gallery{--pf-v6-l-gallery--GridTemplateColumns:repeat(auto-fill, 300px)!important}.pfext-quick-start-catalog__gallery-item{display:inherit!important}.pfext-quick-start-tile-description{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}.pfext-quick-start-tile-description p{margin:0 0 11.5px}.pfext-quick-start-tile-prerequisites{display:inline-flex}.pfext-quick-start-tile-prerequisites__text{margin-right:var(--pf-t--global--spacer--sm);font-size:var(--pf-t--global--font--size--md);margin-top:11.5px;margin-bottom:11.5px;font-family:var(--pf-t--global--font--family--heading);font-weight:var(--pf-t--global--font--weight--heading);line-height:1.1}.pfext-quick-start-tile-prerequisites-list{padding-left:20px}.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-t--global--spacer--sm) 0}.pfext-quick-start-tile-header--margin{margin-right:var(--pf-t--global--spacer--sm);margin-bottom:var(--pf-t--global--spacer--sm)}.pfext-quick-start-tile-header .pf-v6-c-badge:not(:last-of-type){margin-right:var(--pf-t--global--spacer--sm)}.pfext-quick-start-tile-header h3{flex:1}.pfext-quick-start-catalog-filter__input{flex-grow:1;max-width:500px}.pfext-quick-start-catalog-filter__count{font-weight:var(--pf-t--global--font--weight--body--bold)}.pf-v6-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex{--pf-v6-c-toolbar--PaddingBottom:var(--pf-t--global--spacer--sm);--pf-v6-c-toolbar--PaddingTop:var(--pf-t--global--spacer--sm);--pf-v6-c-toolbar--RowGap:0;font-size:14px}.pf-v6-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex .pf-v6-c-select{--pf-v6-c-select__toggle--FontSize:14px}.pf-v6-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex .pf-v6-c-check{--pf-v6-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-t--global--background--color--primary--default);flex:0 0 auto;padding:var(--pf-t--global--spacer--md) var(--pf-t--global--spacer--lg)}.pfext-quick-start-footer__actionbtn{margin-right:var(--pf-t--global--spacer--md)}.pfext-quick-start-footer__restartbtn{float:right}.pfext-quick-start-content{flex:1 1 0;overflow:auto;padding:var(--pf-t--global--spacer--lg);font-size:16px}.pfext-quick-start-content .pf-v6-c-alert__description p{font-size:13px}.pfext-quick-start-intro__prereq{margin-bottom:var(--pf-t--global--spacer--md)}.pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__content{margin-top:var(--pf-t--global--spacer--sm)}.pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle{padding-top:0;padding-bottom:0}.pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle-text{margin-left:var(--pf-t--global--spacer--sm)}.pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle-icon{color:var(--pf-v6-c-expandable-section__toggle--Color)}.pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle-icon:focus,.pfext-quick-start-intro__prereq .pf-v6-c-expandable-section__toggle-icon:hover{--pf-v6-c-expandable-section__toggle--Color:var(--pf-v6-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:.8rem}.pfext-quick-start-intro__prereq-list__item-content{position:relative;left:2px}.pfext-quick-start-tasks__list button::before{content:none}.pfext-quick-start-tasks__list li.pf-v6-c-wizard__nav-item{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;margin-bottom:var(--pf-t--global--spacer--xs)}.pfext-quick-start-tasks__list .pfext-quick-start-task__content{margin-bottom:var(--pf-t--global--spacer--md)}.pfext-quick-start-tasks__list .task-pflist-title{font-size:14px!important;margin-bottom:6px}.pfext-quick-start-tasks__list .task-pflist-subtitle{color:var(--pf-t--global--text--color--subtle);font-size:16px}.pfext-quick-start-tasks__list .task-pflist-list{font-size:16px}.pfext-quick-start-tasks__list .task-pflist-list--prereq{padding-left:var(--pf-t--global--spacer--lg)}.pfext-quick-start-tasks__list .task-pflist-list--prereq li+li{margin-top:4px}.pfext-quick-start-tasks__list .task-pflist-list--proc{padding-left:10px}.pfext-quick-start-tasks__list .task-pflist-list--proc li+li{margin-top:16px}.pfext-quick-start-tasks__list .task-pflist-list__item--prereq::marker{font-size:.8rem}.pfext-quick-start-tasks__list .task-pflist-list__item--prereq .task-pflist-list__item__content{position:relative;left:2px}.pfext-quick-start-tasks__list .task-pflist-list__item--proc{font-size:14px}.pfext-quick-start-tasks__list .task-pflist-list__item--proc .task-pflist-list__item__content{position:relative;left:4px}.pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-v6-c-alert{margin:var(--pf-t--global--spacer--md) 0}.pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-v6-c-alert__title{margin-top:0;margin-bottom:0;font-weight:var(--pf-v6-c-alert__title--FontWeight);font-family:inherit;line-height:inherit;color:var(--pf-v6-c-alert__title--Color);word-break:break-word}.pfext-quick-start-tasks__list .task-pflist-list__item__content .task-pflist-list__item__content__note{background-color:var(--pf-t--global--color--nonstatus--blue--default);border-color:var(--pf-t--global--border--color--brand--default);margin:var(--pf-t--global--spacer--md) 0;color:var(--pf-t--global--text--color--nonstatus--on-blue--default)}.pfext-quick-start-tasks__list .task-pflist-list__item__content .task-pflist-list__item__content__note__body{font-size:14px}.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-t--global--spacer--xs)}.pfext-quick-start-task-header{margin-bottom:var(--pf-t--global--spacer--sm);display:grid;grid-template-columns:min-content auto;font-size:var(--pf-t--global--font--size--body--default)}.pfext-quick-start-task-header button::before{content:none}.pfext-quick-start-task-header__title{color:var(--pf-t--global--text--color--brand--default)!important;margin-right:var(--pf-t--global--spacer--md)!important}.pfext-quick-start-task-header__subtitle{font-size:var(--pf-t--global--font--size--body--sm);color:var(--pf-t--global--text--color--subtle)!important}.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)!important}.pfext-quick-start-task-header__title-success{color:var(--pf-t--global--text--color--status--success--default)!important}.pfext-quick-start-task-header__title-failed{color:var(--pf-t--global--text--color--status--danger--default)!important}.pfext-quick-start-task-header__task-icon-init{background-color:var(--pf-t--global--color--brand--default);border-radius:var(--pf-t--global--border--radius--large);color:var(--pf-t--global--text--color--on-brand--default);display:inline-flex;justify-content:center;height:1.5em;width:1.5em}.pfext-quick-start-task-header__task-icon-failed,.pfext-quick-start-task-header__task-icon-success{vertical-align:middle!important}.pfext-quick-start-task-header__task-icon-success{color:var(--pf-t--global--text--color--status--success--default)!important}.pfext-quick-start-task-header__task-icon-failed{color:var(--pf-t--global--text--color--status--danger--default)!important}.pfext-quick-start-task-review-alert{margin:var(--pf-t--global--spacer--lg) 0}.pfext-quick-start-task-review{font-size:var(--pf-t--global--font--size--md);line-height:var(--pf-t--global--font--line-height--heading);font-family:var(--pf-t--global--font--family--heading)}.pfext-quick-start-task-review__actions{display:flex;align-items:flex-start;margin-bottom:var(--pf-t--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-t--global--spacer--xl)!important}.pfext-quick-start-task-review--success{color:var(--pf-t--global--text--color--status--success--default)!important}.pfext-quick-start-task-review--failed{color:var(--pf-t--global--text--color--status--danger--default)}.pfext-modal{position:absolute!important}.pfext-markdown-view .pfext-code-block__pre{display:flex;border:none;border-radius:none;background-color:transparent;margin:0;padding:0}.pfext-markdown-view .pfext-markdown-execute-snippet__button>i.fa-check{display:none}.pfext-markdown-view .pfext-markdown-execute-snippet__button>i.fa-play{display:inline}.pfext-markdown-view .pfext-markdown-execute-snippet__button[data-executed]>i.fa-check{display:inline}.pfext-markdown-view .pfext-markdown-execute-snippet__button[data-executed]>i.fa-play{display:none}.pfext-markdown-view .pfext-markdown-admonition.pf-v6-c-alert{margin:var(--pf-t--global--spacer--md) 0}.pfext-markdown-view .pfext-markdown-admonition.pf-v6-c-alert .pf-v6-c-alert__title{margin-top:0;margin-bottom:0;font-weight:var(--pf-v6-c-alert__title--FontWeight);font-family:inherit;line-height:inherit;color:var(--pf-v6-c-alert__title--Color);word-break:break-word}@keyframes pfext-spotlight-expand{0%{outline-offset:-4px;outline-width:4px;opacity:1}100%{outline-offset:21px;outline-width:12px;opacity:0}}@keyframes pfext-spotlight-fade-in{0%{opacity:0}100%{opacity:1}}@keyframes pfext-spotlight-fade-out{0%{opacity:1}100%{opacity:0}}.pfext-spotlight{pointer-events:none;position:absolute}.pfext-spotlight__with-backdrop{mix-blend-mode:hard-light}.pfext-spotlight__element-highlight-noanimate{border:var(--pf-t--global--border--width--strong) solid var(--pf-t--global--border--color--brand--default);background-color:var(--pf-t--color--gray--40);z-index:9999}.pfext-spotlight__element-highlight-animate{pointer-events:none;position:absolute;box-shadow:inset 0 0 0 4px var(--pf-t--global--color--brand--default);opacity:0;animation:.4s pfext-spotlight-fade-in 0s ease-in-out,5s pfext-spotlight-fade-out 12.8s ease-in-out;animation-fill-mode:forwards}.pfext-spotlight__element-highlight-animate::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;animation:1.2s pfext-spotlight-expand 1.6s ease-out;animation-fill-mode:forwards;outline:4px solid var(--pf-t--global--color--brand--default);outline-offset:-4px}.pf-v6-c-clipboard-copy.pf-m-inline{display:inline;padding-block-start:var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart);padding-block-end:var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd);padding-inline-start:var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);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}.pf-v6-c-clipboard-copy__actions-item{margin-block-start:calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart));margin-block-end:calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd))}.pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button{--pf-v6-c-button--PaddingBlockStart:var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart);--pf-v6-c-button--PaddingInlineEnd:var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd);--pf-v6-c-button--PaddingBlockEnd:var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd);--pf-v6-c-button--PaddingInlineStart:var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart)}.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/dist/utils/quick-start-context.d.ts CHANGED
@@ -47,6 +47,7 @@ export interface QuickStartContextValues {
47
47
  setLoading?: any;
48
48
  alwaysShowTaskReview?: boolean;
49
49
  setAlwaysShowTaskReview?: any;
50
+ focusOnQuickStart?: boolean;
50
51
  }
51
52
  export declare const QuickStartContextDefaults: {
52
53
  allQuickStarts: any[];
@@ -71,6 +72,7 @@ export declare const QuickStartContextDefaults: {
71
72
  markdown: any;
72
73
  loading: boolean;
73
74
  alwaysShowTaskReview: boolean;
75
+ focusOnQuickStart: boolean;
74
76
  };
75
77
  export declare const QuickStartContext: React.Context<QuickStartContextValues>;
76
78
  export declare const getResource: (resource: string, options: any, resourceBundle: any, lng: string) => any;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/quickstarts",
3
- "version": "6.0.0-alpha.1",
3
+ "version": "6.0.0-alpha.2",
4
4
  "description": "PatternFly quick starts",
5
5
  "files": [
6
6
  "src",
@@ -52,9 +52,8 @@
52
52
  },
53
53
  "dependencies": {
54
54
  "@patternfly/react-catalog-view-extension": "^6.0.0-alpha.2",
55
- "dompurify": "^2.2.6",
56
- "history": "^5.0.0",
57
- "showdown": "1.8.6"
55
+ "dompurify": "^2.4.9",
56
+ "history": "^5.0.0"
58
57
  },
59
58
  "devDependencies": {
60
59
  "@patternfly/documentation-framework": "6.0.0-alpha.41",
@@ -69,7 +68,7 @@
69
68
  "@rollup/plugin-json": "^4.1.0",
70
69
  "@rollup/plugin-node-resolve": "^11.1.0",
71
70
  "@testing-library/react": "^11.2.2",
72
- "@types/dompurify": "^2.2.2",
71
+ "@types/dompurify": "^2.4.0",
73
72
  "@types/enzyme": "^3.10.7",
74
73
  "@types/enzyme-adapter-react-16": "^1.0.6",
75
74
  "@types/history": "^4.7.8",
package/src/QuickStartController.tsx CHANGED
@@ -50,7 +50,7 @@ const QuickStartController: React.FC<QuickStartControllerProps> = ({
50
50
  let activeTaskNumber = 0;
51
51
  while (
52
52
  activeTaskNumber !== totalTasks &&
53
- activeQuickStartState[`taskStatus${activeTaskNumber}`] !== QuickStartTaskStatus.INIT
53
+ activeQuickStartState[`taskStatus${activeTaskNumber}`] === QuickStartTaskStatus.SUCCESS
54
54
  ) {
55
55
  activeTaskNumber++;
56
56
  }
package/src/QuickStartPanelContent.tsx CHANGED
@@ -56,7 +56,7 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
56
56
  ...props
57
57
  }) => {
58
58
  const titleRef = React.useRef(null);
59
- const { getResource, activeQuickStartState } =
59
+ const { getResource, activeQuickStartState, focusOnQuickStart } =
60
60
  React.useContext<QuickStartContextValues>(QuickStartContext);
61
61
  const [contentRef, setContentRef] = React.useState<HTMLDivElement>();
62
62
  const shadows = useScrollShadows(contentRef);
@@ -90,10 +90,10 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
90
90
  };
91
91
 
92
92
  React.useEffect(() => {
93
- if (quickStart) {
93
+ if (focusOnQuickStart && quickStart) {
94
94
  titleRef.current.focus();
95
95
  }
96
- }, [quickStart]);
96
+ }, [focusOnQuickStart, quickStart]);
97
97
 
98
98
  const content = quickStart ? (
99
99
  <DrawerPanelContent
package/src/catalog/QuickStartTile.tsx CHANGED
@@ -8,7 +8,7 @@ import { camelize } from '../utils/quick-start-utils';
8
8
  import QuickStartTileDescription from './QuickStartTileDescription';
9
9
  import QuickStartTileFooter from './QuickStartTileFooter';
10
10
  import QuickStartTileFooterExternal from './QuickStartTileFooterExternal';
11
- import QuickStartTileHeader from './QuickStartTileHeader';
11
+ import QuickStartTileHeader, { QuickstartAction } from './QuickStartTileHeader';
12
12
  import { Icon } from '@patternfly/react-core';
13
13
 
14
14
  import './QuickStartTile.scss';
@@ -18,6 +18,8 @@ interface QuickStartTileProps {
18
18
  status: QuickStartStatus;
19
19
  isActive: boolean;
20
20
  onClick?: () => void;
21
+ /** Action config for button rendered next to title */
22
+ action?: QuickstartAction;
21
23
  }
22
24
 
23
25
  const QuickStartTile: React.FC<QuickStartTileProps> = ({
@@ -25,6 +27,7 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
25
27
  status,
26
28
  isActive,
27
29
  onClick = () => {},
30
+ action,
28
31
  }) => {
29
32
  const {
30
33
  metadata: { name: id },
@@ -68,17 +71,23 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
68
71
  e: React.FormEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>,
69
72
  ) => {
70
73
  if (ref.current?.contains(e.target as Node)) {
71
- if (link) {
72
- window.open(link.href);
73
- } else {
74
+ if (!link) {
74
75
  setActiveQuickStart(id, tasks?.length);
75
76
  }
76
77
  onClick();
77
78
  }
78
79
  };
79
80
 
81
+ const linkProps = link
82
+ ? {
83
+ href: link.href,
84
+ target: '_blank',
85
+ rel: 'noreferrer',
86
+ }
87
+ : {};
88
+
80
89
  return (
81
- <div ref={ref}>
90
+ <div ref={ref} onClick={handleClick}>
82
91
  <CatalogTile
83
92
  id={id + '-catalog-tile'}
84
93
  style={{
@@ -95,9 +104,9 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
95
104
  duration={durationMinutes}
96
105
  type={type}
97
106
  quickStartId={id}
107
+ action={action}
98
108
  />
99
109
  }
100
- onClick={handleClick}
101
110
  onKeyDown={(event) => {
102
111
  if (event.key === 'Enter' || event.key === ' ') {
103
112
  setActiveQuickStart(id, tasks?.length);
@@ -105,13 +114,16 @@ const QuickStartTile: React.FC<QuickStartTileProps> = ({
105
114
  }
106
115
  }}
107
116
  // https://github.com/patternfly/patternfly-react/issues/7039
108
- href={link?.href}
117
+ {...linkProps}
109
118
  data-test={`tile ${id}`}
110
119
  description={
111
120
  <QuickStartTileDescription description={description} prerequisites={prerequisites} />
112
121
  }
113
122
  footer={footerComponent}
114
123
  tabIndex={0}
124
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
125
+ // @ts-ignore-next-line
126
+ isSelectableRaised
115
127
  />
116
128
  </div>
117
129
  );
package/src/catalog/QuickStartTileHeader.scss CHANGED
@@ -9,4 +9,8 @@
9
9
  & .pf-v6-c-badge:not(:last-of-type) {
10
10
  margin-right: var(--pf-t--global--spacer--sm);
11
11
  }
12
+
13
+ h3 {
14
+ flex: 1;
15
+ }
12
16
  }
package/src/catalog/QuickStartTileHeader.tsx CHANGED
@@ -1,18 +1,31 @@
1
1
  import './QuickStartTileHeader.scss';
2
2
  import * as React from 'react';
3
- import { Label, Title } from '@patternfly/react-core';
3
+ import { Button, ButtonProps, Flex, Label, Title } from '@patternfly/react-core';
4
4
  import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
5
+ import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
5
6
  import { StatusIcon } from '@console/shared';
6
7
  import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
7
8
  import { QuickStartStatus, QuickStartType } from '../utils/quick-start-types';
8
9
  import QuickStartMarkdownView from '../QuickStartMarkdownView';
9
10
 
11
+ export interface QuickstartAction {
12
+ /** Screen reader aria label. */
13
+ 'aria-label': string;
14
+ /** Icon to be rendered as a plain button, by default Bookmark outlined will be used. */
15
+ icon?: React.ComponentType<unknown>;
16
+ /** Callback with synthetic event parameter. */
17
+ onClick?: (e: React.SyntheticEvent) => void;
18
+ /** Additional button props to be rendered as extra props. */
19
+ buttonProps?: ButtonProps;
20
+ }
21
+
10
22
  interface QuickStartTileHeaderProps {
11
23
  status: string;
12
24
  duration: number;
13
25
  name: string;
14
26
  type?: QuickStartType;
15
27
  quickStartId?: string;
28
+ action?: QuickstartAction;
16
29
  }
17
30
 
18
31
  const statusColorMap = {
@@ -27,6 +40,7 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
27
40
  name,
28
41
  type,
29
42
  quickStartId,
43
+ action,
30
44
  }) => {
31
45
  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
32
46
 
@@ -36,11 +50,24 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
36
50
  [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
37
51
  };
38
52
 
53
+ const ActionIcon = action?.icon || OutlinedBookmarkIcon;
54
+
39
55
  return (
40
56
  <div className="pfext-quick-start-tile-header">
41
- <Title headingLevel="h3" data-test="title" id={quickStartId}>
42
- <QuickStartMarkdownView content={name} />
43
- </Title>
57
+ <Flex flexWrap={{ default: 'nowrap' }}>
58
+ <Title headingLevel="h3" data-test="title" id={quickStartId}>
59
+ <QuickStartMarkdownView content={name} />
60
+ </Title>
61
+ {action && (
62
+ <Button
63
+ aria-label={action['aria-label']}
64
+ icon={<ActionIcon />}
65
+ variant="plain"
66
+ onClick={action.onClick}
67
+ {...action.buttonProps}
68
+ />
69
+ )}
70
+ </Flex>
44
71
  <div className="pfext-quick-start-tile-header__status">
45
72
  {type && (
46
73
  <Label className="pfext-quick-start-tile-header--margin" color={type.color}>
package/src/catalog/index.ts CHANGED
@@ -4,6 +4,6 @@ export { default as QuickStartTile } from './QuickStartTile';
4
4
  export { default as QuickStartTileDescription } from './QuickStartTileDescription';
5
5
  export { default as QuickStartTileFooter } from './QuickStartTileFooter';
6
6
  export { default as QuickStartTileFooterExternal } from './QuickStartTileFooterExternal';
7
- export { default as QuickStartTileHeader } from './QuickStartTileHeader';
7
+ export { default as QuickStartTileHeader, QuickstartAction } from './QuickStartTileHeader';
8
8
  export * from './Toolbar/QuickStartCatalogFilterItems';
9
9
  export * from './Catalog';
package/src/controller/QuickStartTaskHeader.tsx CHANGED
@@ -66,12 +66,14 @@ const QuickStartTaskHeader: React.FC<QuickStartTaskHeaderProps> = ({
66
66
  children,
67
67
  }) => {
68
68
  const titleRef = React.useRef(null);
69
+ const { focusOnQuickStart } = React.useContext(QuickStartContext);
70
+
69
71
  React.useEffect(() => {
70
- if (isActiveTask) {
72
+ if (focusOnQuickStart && isActiveTask) {
71
73
  // Focus the WizardNavItem button element that contains the title
72
74
  titleRef.current.parentNode.focus();
73
75
  }
74
- }, [isActiveTask]);
76
+ }, [focusOnQuickStart, isActiveTask]);
75
77
  const classNames = css('pfext-quick-start-task-header__title', {
76
78
  'pfext-quick-start-task-header__title-success': taskStatus === QuickStartTaskStatus.SUCCESS,
77
79
  'pfext-quick-start-task-header__title-failed':
package/src/utils/quick-start-context.tsx CHANGED
@@ -79,6 +79,7 @@ export interface QuickStartContextValues {
79
79
  setLoading?: any;
80
80
  alwaysShowTaskReview?: boolean;
81
81
  setAlwaysShowTaskReview?: any;
82
+ focusOnQuickStart?: boolean;
82
83
  }
83
84
 
84
85
  export const QuickStartContextDefaults = {
@@ -104,6 +105,7 @@ export const QuickStartContextDefaults = {
104
105
  markdown: null,
105
106
  loading: false,
106
107
  alwaysShowTaskReview: true,
108
+ focusOnQuickStart: true,
107
109
  };
108
110
  export const QuickStartContext = createContext<QuickStartContextValues>(QuickStartContextDefaults);
109
111