@patternfly/quickstarts 2.3.2 → 2.3.4

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 (41) hide show
  1. package/dist/ConsoleInternal/components/markdown-view.d.ts +1 -1
  2. package/dist/ConsoleShared/src/components/markdown-extensions/accordion-extension.d.ts +7 -0
  3. package/dist/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.d.ts +6 -0
  4. package/dist/ConsoleShared/src/components/markdown-extensions/const.d.ts +2 -0
  5. package/dist/ConsoleShared/src/components/markdown-extensions/index.d.ts +2 -0
  6. package/dist/ConsoleShared/src/components/status/NotStartedIcon.d.ts +0 -1
  7. package/dist/index.es.js +106 -30
  8. package/dist/index.es.js.map +1 -1
  9. package/dist/index.js +104 -28
  10. package/dist/index.js.map +1 -1
  11. package/dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines.md +1 -1
  12. package/dist/patternfly-docs/quick-starts/examples/about.md +28 -21
  13. package/dist/patternfly-docs/quick-starts/examples/basic.md +7 -5
  14. package/dist/patternfly-docs/quick-starts/examples/help-topics.md +8 -5
  15. package/dist/patternfly-global.css +890 -419
  16. package/dist/patternfly-nested.css +12484 -7322
  17. package/dist/quickstarts-base.css +870 -671
  18. package/dist/quickstarts-full.es.js +6466 -6194
  19. package/dist/quickstarts-full.es.js.map +1 -1
  20. package/dist/quickstarts-standalone.css +854 -622
  21. package/dist/quickstarts-standalone.min.css +2 -2
  22. package/dist/quickstarts-vendor.css +84 -55
  23. package/dist/quickstarts.css +953 -726
  24. package/dist/quickstarts.min.css +1 -1
  25. package/dist/utils/quick-start-types.d.ts +0 -1
  26. package/package.json +16 -13
  27. package/src/ConsoleInternal/components/catalog/_catalog.scss +7 -5
  28. package/src/ConsoleInternal/components/markdown-view.tsx +34 -50
  29. package/src/ConsoleShared/src/components/markdown-extensions/accordion-extension.tsx +52 -0
  30. package/src/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.tsx +60 -0
  31. package/src/ConsoleShared/src/components/markdown-extensions/const.ts +2 -0
  32. package/src/ConsoleShared/src/components/markdown-extensions/index.ts +2 -0
  33. package/src/HelpTopicPanelContent.tsx +1 -1
  34. package/src/QuickStartMarkdownView.tsx +5 -0
  35. package/src/QuickStartPanelContent.tsx +17 -2
  36. package/src/catalog/QuickStartTileHeader.tsx +2 -1
  37. package/src/controller/QuickStartTaskHeader.tsx +12 -1
  38. package/src/declaration.d.ts +1 -0
  39. package/src/styles/legacy-bootstrap/_code.scss +4 -2
  40. package/src/styles/legacy-bootstrap/_type.scss +8 -6
  41. package/src/styles/patternfly-nested.scss +9 -9
@@ -1 +1 @@
1
- .pfext-quick-start-panel-content__body dl{margin:0}.pfext-quick-start-panel-content__body dt{font-weight:var(--pf-global--FontWeight--bold)}.pfext-quick-start-panel-content__body dd{margin-bottom:20px}.pfext-quick-start-panel-content__body dd:last-child{margin-bottom:0}.pfext-quick-start-panel-content__body input[type=number]{-webkit-appearance:textfield;appearance:textfield;max-width:100px}.pfext-quick-start-panel-content__body input[type=number]::-webkit-inner-spin-button,.pfext-quick-start-panel-content__body input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.pfext-quick-start-panel-content__body input[type=radio]{margin-right:7px}.pfext-quick-start-panel-content__body .pf-c-list{--pf-c-list--PaddingLeft:20px}.pfext-page-layout__content,.pfext-popover__base,.pfext-quick-start-panel-content__body,.pfext-quick-start-panel-content__header{--pf-global--FontSize--md:14px;--pf-global--FontSize--sm:13px}.pfext-page-layout__content ul,.pfext-popover__base ul,.pfext-quick-start-panel-content__body ul,.pfext-quick-start-panel-content__header ul{list-style-type:disc}.pfext-page-layout__content input[type=checkbox],.pfext-page-layout__content input[type=radio],.pfext-popover__base input[type=checkbox],.pfext-popover__base input[type=radio],.pfext-quick-start-panel-content__body input[type=checkbox],.pfext-quick-start-panel-content__body input[type=radio],.pfext-quick-start-panel-content__header input[type=checkbox],.pfext-quick-start-panel-content__header input[type=radio]{margin-top:1px!important}.pf-theme-dark .pfext-catalog-item-icon__img--large{filter:brightness(1.5) invert(1) hue-rotate(180deg) saturate(4)}.pf-theme-dark .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration{color:var(--pf-global--Color--light-100)}.pf-theme-dark .pfext-quick-start-task-header__subtitle{color:var(--pf-global--palette--black-200)!important}.pf-theme-dark .pfext-quick-start-task-header__task-icon-init{background-color:var(--pf-global--primary-color--300)}.pf-theme-dark .pfext-quick-start-task-header__tryagain{color:var(--pf-global--palette--black-200)!important}.pf-theme-dark .pfext-markdown-view pre{background-color:var(--pf-global--BackgroundColor--100);border-color:var(--pf-global--BorderColor--100)}.pf-theme-dark .pfext-markdown-view code{color:var(--pf-global--Color--100);background-color:var(--pf-global--palette--black-600)}.pf-theme-dark .pfext-markdown-view .pf-c-code-block,.pf-theme-dark .pfext-markdown-view .pf-c-code-block code{background-color:var(--pf-global--BackgroundColor--400)}.pf-theme-dark :where(.pfext-markdown-view) .pf-c-clipboard-copy.pf-m-inline{--pf-c-clipboard-copy--m-inline--BackgroundColor:var(--pf-global--BackgroundColor--400)}.pf-theme-dark .pfext-page-layout__content{background-color:var(--pf-global--BackgroundColor--200)}.pf-theme-dark .pfext-quick-start-catalog__gallery-item .pf-c-card{--pf-c-card--BackgroundColor:var(--pf-global--BackgroundColor--100)}.pf-theme-dark .pf-c-alert{--pf-c-alert--BackgroundColor:var(--pf-global--palette--black-700);--pf-c-alert--m-inline--BackgroundColor:var(--pf-global--palette--black-700);--pf-c-alert--m-inline--m-success--BackgroundColor:var(--pf-global--palette--black-700);--pf-c-alert--m-inline--m-danger--BackgroundColor:var(--pf-global--palette--black-700);--pf-c-alert--m-inline--m-warning--BackgroundColor:var(--pf-global--palette--black-700);--pf-c-alert--m-inline--m-info--BackgroundColor:var(--pf-global--palette--black-700)}.pfext-icon-and-text{align-items:baseline;display:flex}.pf-c-label__icon .pfext-icon-and-text{display:block}.pfext-icon-and-text__icon{flex-shrink:0;margin-right:5px}.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}.catalog-item-header-pf-subtitle{font-size:13px}.catalog-tile-pf-body .catalog-tile-pf-subtitle{font-size:13px}.pfext-catalog{display:flex;flex-direction:column;min-height:100%;min-width:515px}.pfext-catalog-tile-view{display:flex;flex-wrap:wrap;--pf-l-gallery--GridTemplateColumns:repeat(auto-fill, 260px)!important}.pfext-catalog__body{min-width:575px}@media (min-width:768px){.pfext-catalog__body{min-width:590px}}.pfext-catalog-item-details{display:flex;margin:0 0 10px}.pfext-catalog-item-details__description{white-space:pre-wrap}.pfext-catalog-item-details__kind-label{font-weight:var(--pf-global--FontWeight--bold)}.pfext-catalog-item-details__name{margin-bottom:10px}.pfext-catalog-item-details__provider,.pfext-catalog-item-details__tags{margin-bottom:5px}.pfext-catalog-item-details__tag{color:#72767b;font-size:13px;margin-right:5px;text-transform:uppercase}.pfext-catalog-item-icon{padding-right:10px}.pfext-catalog-item-icon__icon{font-size:24px}.pfext-catalog-item-icon__icon--large{font-size:40px}.pfext-catalog-item-icon__img{max-height:24px;max-width:24px}.pfext-catalog-item-icon__img[src$='.svg']{width:24px}.pfext-catalog-item-icon__img--large{max-height:40px;max-width:40px}.pfext-catalog-item-icon__img--large[src$='.svg']{width:40px}.pfext-catalog-page{background:#fff;border:1px solid var(--pf-global--BorderColor--300);display:flex;flex:1;padding-top:15px}.pfext-catalog-page--with-sidebar{margin:0 15px;padding-bottom:15px}.pfext-catalog-page__btn-group__group-by{display:inline;margin-left:var(--pf-global--spacer--md)}.pfext-catalog-page__content{flex:1 1 auto;overflow:hidden}.pfext-catalog-page__description{margin-top:-10px;padding:0 15px 10px}@media (min-width:768px){.pfext-catalog-page__description{padding-left:30px;padding-right:30px}}.pfext-catalog-page__filter{display:flex;justify-content:space-between}.pfext-catalog-page__filter-toggle{margin-top:5px}.pfext-catalog-page__grid{background-color:#f5f5f5}.pfext-catalog-page__grouped-items{margin-bottom:var(--pf-global--spacer--md)}.pfext-catalog-page__group-title{margin-bottom:var(--pf-global--spacer--sm)}.pfext-catalog-page__header{margin:0 30px 0 0}.pfext-catalog-page__heading{font-size:16px;margin:0 0 20px 30px}.pfext-catalog-page__hint{margin:0 0 var(--pf-global--spacer--md) 0}.pfext-catalog-page__input{display:inline-flex!important;margin:0 0 20px 30px;width:auto!important}.pfext-catalog-page__sort{display:inline;margin-left:var(--pf-global--spacer--md)}.pfext-catalog-page__num-items{font-weight:var(--pf-global--FontWeight--bold);padding:0 0 20px}.pfext-catalog-page__info-icon{vertical-align:middle;color:#6a6e73}.pfext-catalog-page__info-icon:hover{color:#151515}.pfext-catalog-page__overlay{border:0!important}.pfext-catalog-page__overlay .modal-body .pfext-hint-block{margin-bottom:10px}.pfext-catalog-page__overlay .properties-side-panel-pf{flex:0 0 auto}.pfext-catalog-page__overlay--right{bottom:0;padding:0!important;right:0;top:4.75rem}.pfext-catalog-page__overlay--right .pf-c-modal-box__body{display:flex;flex-direction:column;margin:0!important;padding:0}.pfext-catalog-page__overlay--right .modal-body-inner-shadow-covers{padding-left:0!important;padding-right:0!important}.pfext-catalog-page__overlay--right h1{white-space:normal}.pfext-catalog-page__overlay-action{align-items:baseline;display:inline-flex!important;margin:var(--pf-global--spacer--sm) var(--pf-global--spacer--sm) 0 0;overflow-x:hidden}.pfext-catalog-page__overlay-action-icon{flex-shrink:0;font-size:14px;margin-left:6px}.pfext-catalog-page__overlay-action-label{overflow-x:hidden;text-overflow:ellipsis}.pfext-catalog-page__overlay-actions{display:flex;flex-wrap:wrap;margin-bottom:var(--pf-global--spacer--md);white-space:normal}.pfext-catalog-page__overlay-header{margin-bottom:var(--pf-global--spacer--md)}.pfext-catalog-page__overlay-body{margin:0;padding-left:var(--pf-global--spacer--lg);padding-right:var(--pf-global--spacer--lg);padding-top:var(--pf-global--spacer--md)}@media (min-width:768px){.pfext-catalog-page__overlay-body{display:flex}}.pfext-catalog-page__overlay-description{margin:20px 0 0;white-space:pre-wrap}.pfext-catalog-page__overlay-description h1,.pfext-catalog-page__overlay-description h2,.pfext-catalog-page__overlay-description h3{color:#333}.pfext-catalog-page__overlay-description h2{font-size:20px}.pfext-catalog-page__overlay-description li,.pfext-catalog-page__overlay-description ol,.pfext-catalog-page__overlay-description p{color:#333;font-size:14px!important}@media (min-width:768px){.pfext-catalog-page__overlay-description{flex:1 1 auto;margin-left:20px;margin-top:0}}.pfext-catalog-page__tabs{flex:0 0 220px;margin:0 15px 0 0}@media screen and (min-width:768px){.pf-c-modal-box.pfext-catalog-page__overlay{width:600px}}@media screen and (min-width:992px){.pf-c-modal-box.pfext-catalog-page__overlay{width:900px}}.pfext-catalog-tab__empty{color:#72767b}.pfext-modal-ignore-warning{height:initial}.pfext-modal-ignore-warning__checkbox.checkbox{margin-bottom:0;padding-top:15px}.pfext-modal-ignore-warning__content{display:flex}.pfext-modal-ignore-warning__icon{font-size:30px;margin-right:15px;min-width:30px}.pfext-modal-ignore-warning__link{display:block;margin:10px 0}.properties-side-panel-pf-property-label{font-size:13px}.properties-side-panel-pf-property-value__capability-level{color:var(--pf-global--Color--400);margin-bottom:5px;position:relative}.properties-side-panel-pf-property-value__capability-level--active{color:inherit}.properties-side-panel-pf-property-value__capability-level--active::before{display:none}.properties-side-panel-pf-property-value__capability-level::before{border:1px solid var(--pf-global--Color--400);border-radius:10px;content:'';height:14px;left:-20px;position:absolute;top:4px;width:14px}.properties-side-panel-pf-property-value__capability-level:not(:last-child)::after{background:var(--pf-global--Color--400);content:'';height:6px;left:-13px;position:absolute;top:21px;width:1px}.properties-side-panel-pf-property-value__capability-level-icon{left:-20px;position:absolute;top:4px}.properties-side-panel-pf-property-value__capability-levels{list-style:none}.pfext-status-box{padding:40px 20px}.pfext-status-box__loading-message{margin-top:var(--pf-global--spacer--sm)}.pfext-status-box--loading{align-items:center;display:flex;height:100%;justify-content:center;min-height:50px;width:100%;flex-direction:column}.pfext-m-loader{min-width:18px}.pfext-m-loader-dot__one,.pfext-m-loader-dot__three,.pfext-m-loader-dot__two{animation-delay:0;animation-direction:normal;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:bouncedelay;animation-play-state:running;animation-timing-function:ease-in-out;background:#419eda;border-radius:100%;display:inline-block;height:6px;width:6px}.pfext-m-loader-dot__one{animation-delay:-.32s}.pfext-m-loader-dot__two{animation-delay:-.16s}@keyframes bouncedelay{0%,100%,80%{transform:scale(.25,.25)}40%{transform:scale(1,1)}}.pfext-page-layout__content{padding:var(--pf-global--spacer--lg);flex:1}.pfext-page-layout__header{padding-top:1px;background-color:var(--pf-global--BackgroundColor--light-100)}.pfext-page-layout__hint{padding-left:var(--pf-global--spacer--lg);padding-right:var(--pf-global--spacer--lg);padding-bottom:var(--pf-global--spacer--md);font-size:14px}.pfext-page-layout__title{padding-left:var(--pf-global--spacer--lg);padding-right:var(--pf-global--spacer--lg);font-size:var(--pf-global--FontSize--2xl);margin-top:23px;margin-bottom:11.5px;font-family:var(--pf-global--FontFamily--heading--sans-serif);font-weight:var(--pf-global--FontWeight--normal);line-height:1.1}.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-c-alert{margin:var(--pf-global--spacer--md) 0}.pfext-markdown-view .pfext-markdown-admonition.pf-c-alert .pf-c-alert__title{margin-top:0;margin-bottom:0;font-weight:var(--pf-c-alert__title--FontWeight);font-family:inherit;line-height:inherit;color:var(--pf-c-alert__title--Color);word-break:break-word}.pfext-modal{position:absolute!important}@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-global--BorderWidth--xl) solid var(--pf-global--palette--blue-200);background-color:var(--pf-global--palette--black-500);z-index:9999}.pfext-spotlight__element-highlight-animate{pointer-events:none;position:absolute;box-shadow:inset 0 0 0 4px var(--pf-global--palette--blue-200);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-global--palette--blue-200);outline-offset:-4px}.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-global--FontFamily--heading--sans-serif);font-weight:var(--pf-global--FontWeight--normal);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-global--FontSize--2xl)}.pfext-markdown-view .h2,.pfext-markdown-view h2{font-size:20px}.pfext-markdown-view .h3,.pfext-markdown-view h3{font-size:var(--pf-global--FontSize--lg)}.pfext-markdown-view .h4,.pfext-markdown-view h4{font-size:var(--pf-global--FontSize--md)}.pfext-markdown-view .h5,.pfext-markdown-view h5{font-size:var(--pf-global--FontSize--md)}.pfext-markdown-view .h6,.pfext-markdown-view h6{font-size:var(--pf-global--FontSize--md)}.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.66667}.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.66667;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-c-modal-box__footer{display:block}.pfext-quick-start-panel-content__header{position:sticky;top:0;background:inherit;z-index:var(--pf-global--ZIndex--xs)}.pfext-quick-start-panel-content__header__shadow{box-shadow:var(--pf-global--BoxShadow--sm-bottom)}.pfext-quick-start-panel-content__header--blue-white{background-color:var(--pf-global--palette--blue-400)}.pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__title{color:var(--pf-global--Color--light-100)}.pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration{color:var(--pf-global--Color--light-200)}.pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__close-button button{color:var(--pf-global--Color--light-100)!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-global--FontSize--md);font-weight:400;line-height:1;color:#9c9c9c}.pfext-quick-start-panel-content__footer__shadow{box-shadow:var(--pf-global--BoxShadow--sm-top)}.pfext-quick-start-catalog__gallery{--pf-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-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-global--spacer--sm);font-size:var(--pf-global--FontSize--md);margin-top:11.5px;margin-bottom:11.5px;font-family:var(--pf-global--FontFamily--heading--sans-serif);font-weight:var(--pf-global--FontWeight--normal);line-height:1.1}.pfext-quick-start-tile-prerequisites-list{padding-left:20px}.pfext-quick-start-tile-header__status{margin:var(--pf-global--spacer--sm) 0}.pfext-quick-start-tile-header--margin{margin-right:var(--pf-global--spacer--sm);margin-bottom:var(--pf-global--spacer--sm)}.pfext-quick-start-tile-header .pf-c-badge:not(:last-of-type){margin-right:var(--pf-global--spacer--sm)}.pfext-quick-start-catalog-filter__input{flex-grow:1;max-width:500px}.pfext-quick-start-catalog-filter__count{font-weight:var(--pf-global--FontWeight--bold)}.pf-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex{--pf-c-toolbar--PaddingBottom:var(--pf-global--spacer--sm);--pf-c-toolbar--PaddingTop:var(--pf-global--spacer--sm);--pf-c-toolbar--RowGap:0;font-size:14px}.pf-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex .pf-c-select{--pf-c-select__toggle--FontSize:14px}.pf-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex .pf-c-check{--pf-c-check__label--FontSize:14px}.pfext-quick-start-content{flex:1 1 0;overflow:auto;padding:var(--pf-global--spacer--lg);font-size:16px}.pfext-quick-start-content .pf-c-alert__description p{font-size:13px}.pfext-quick-start-footer{background-color:var(--pf-global--BackgroundColor--100);flex:0 0 auto;padding:var(--pf-global--spacer--md) var(--pf-global--spacer--lg)}.pfext-quick-start-footer__actionbtn{margin-right:var(--pf-global--spacer--md)}.pfext-quick-start-footer__restartbtn{float:right}.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-intro__prereq{margin-bottom:var(--pf-global--spacer--md)}.pfext-quick-start-intro__prereq .pf-c-expandable-section__content{margin-top:var(--pf-global--spacer--sm)}.pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle{padding-top:0;padding-bottom:0}.pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-text{margin-left:var(--pf-global--spacer--sm)}.pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon{color:var(--pf-c-expandable-section__toggle--Color)}.pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon:focus,.pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon:hover{--pf-c-expandable-section__toggle--Color:var(--pf-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-c-wizard__nav-item{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;margin-bottom:var(--pf-global--spacer--xs)}.pfext-quick-start-tasks__list .pfext-quick-start-task__content{margin-bottom:var(--pf-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-global--Color--200);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-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-c-alert{margin:var(--pf-global--spacer--md) 0}.pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-c-alert__title{margin-top:0;margin-bottom:0;font-weight:var(--pf-c-alert__title--FontWeight);font-family:inherit;line-height:inherit;color:var(--pf-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-global--palette--blue-50);border-color:var(--pf-global--active-color--200);margin:var(--pf-global--spacer--md) 0}.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-global--spacer--xs)}.pfext-quick-start-task-header{margin-bottom:var(--pf-global--spacer--sm);display:grid;grid-template-columns:min-content auto;font-size:var(--pf-global--FontSize--md)}.pfext-quick-start-task-header button::before{content:none}.pfext-quick-start-task-header__title{color:var(--pf-global--primary-color--100)!important;margin-right:var(--pf-global--spacer--md)!important}.pfext-quick-start-task-header__subtitle{font-size:var(--pf-global--FontSize--sm);color:var(--pf-global--Color--dark-200)!important}.pfext-quick-start-task-header__tryagain{display:block;font-size:var(--pf-global--FontSize--md);color:var(--pf-global--Color--300)!important}.pfext-quick-start-task-header__title-success{color:var(--pf-global--success-color--100)!important}.pfext-quick-start-task-header__title-failed{color:var(--pf-global--danger-color--100)!important}.pfext-quick-start-task-header__task-icon-init{background-color:var(--pf-global--primary-color--100);border-radius:var(--pf-global--BorderRadius--lg);color:var(--pf-global--Color--light-100);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-global--success-color--100)!important}.pfext-quick-start-task-header__task-icon-failed{color:var(--pf-global--danger-color--100)!important}.pfext-quick-start-task-review-alert{margin:var(--pf-global--spacer--lg) 0}.pfext-quick-start-task-review{font-size:var(--pf-global--FontSize--md);line-height:var(--pf-global--FontSize--xl);font-family:var(--pf-global--FontFamily--heading--sans-serif)}.pfext-quick-start-task-review__actions{display:flex;align-items:flex-start;margin-bottom:var(--pf-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-global--spacer--xl)!important}.pfext-quick-start-task-review--success{color:var(--pf-global--success-color--100)!important}.pfext-quick-start-task-review--failed{color:var(--pf-chart-global--danger--Color--100)}.pfext-modal{position:absolute!important}.pfext-markdown-view .pfext-code-block__pre{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-c-alert{margin:var(--pf-global--spacer--md) 0}.pfext-markdown-view .pfext-markdown-admonition.pf-c-alert .pf-c-alert__title{margin-top:0;margin-bottom:0;font-weight:var(--pf-c-alert__title--FontWeight);font-family:inherit;line-height:inherit;color:var(--pf-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-global--BorderWidth--xl) solid var(--pf-global--palette--blue-200);background-color:var(--pf-global--palette--black-500);z-index:9999}.pfext-spotlight__element-highlight-animate{pointer-events:none;position:absolute;box-shadow:inset 0 0 0 4px var(--pf-global--palette--blue-200);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-global--palette--blue-200);outline-offset:-4px}.catalog-tile-pf.featured{border-top:2px solid #2b9af3}.catalog-tile-pf:active,.catalog-tile-pf:focus,.catalog-tile-pf:hover,.catalog-tile-pf:visited{color:inherit;text-decoration:none}.catalog-tile-pf .pf-c-card__actions{padding-left:5px}.catalog-tile-pf-header{font-size:16px;font-weight:400;padding-bottom:16px}.catalog-tile-pf-header .catalog-tile-pf-title{font-size:15px;font-weight:400}.catalog-tile-pf-header .catalog-tile-pf-subtitle{color:#8a8d90;font-size:13px;font-weight:initial}.catalog-tile-pf-header .catalog-tile-pf-subtitle a{color:#2b9af3;text-decoration:none}.catalog-tile-pf-header .catalog-tile-pf-subtitle a:hover{color:#73bcf7;text-decoration:none}.catalog-tile-pf-icon{font-size:40px;height:40px;max-width:60px;min-width:40px}.catalog-tile-pf-badge-container{display:flex;flex:1;justify-content:flex-end}.catalog-tile-pf-description{margin-top:0}.catalog-tile-pf-description span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}.catalog-tile-pf-description .has-footer{-webkit-line-clamp:1}.pf-c-clipboard-copy{--pf-c-clipboard-copy__toggle-icon--Transition:.2s ease-in 0s;--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate:90deg;--pf-c-clipboard-copy__expandable-content--PaddingTop:var(--pf-global--spacer--md);--pf-c-clipboard-copy__expandable-content--PaddingRight:var(--pf-global--spacer--md);--pf-c-clipboard-copy__expandable-content--PaddingBottom:var(--pf-global--spacer--md);--pf-c-clipboard-copy__expandable-content--PaddingLeft:var(--pf-global--spacer--md);--pf-c-clipboard-copy__expandable-content--BackgroundColor:var(--pf-global--BackgroundColor--light-100);--pf-c-clipboard-copy__expandable-content--BorderTopWidth:0;--pf-c-clipboard-copy__expandable-content--BorderRightWidth:var(--pf-global--BorderWidth--sm);--pf-c-clipboard-copy__expandable-content--BorderBottomWidth:var(--pf-global--BorderWidth--sm);--pf-c-clipboard-copy__expandable-content--BorderLeftWidth:var(--pf-global--BorderWidth--sm);--pf-c-clipboard-copy__expandable-content--BorderColor:var(--pf-global--BorderColor--100);--pf-c-clipboard-copy__expandable-content--OutlineOffset:calc(-1 * var(--pf-global--spacer--xs));--pf-c-clipboard-copy--m-inline--PaddingTop:0.25rem;--pf-c-clipboard-copy--m-inline--PaddingBottom:0.3125rem;--pf-c-clipboard-copy--m-inline--PaddingLeft:var(--pf-global--spacer--xs);--pf-c-clipboard-copy--m-inline--BackgroundColor:var(--pf-global--BackgroundColor--200);--pf-c-clipboard-copy__text--m-code--FontFamily:var(--pf-global--FontFamily--monospace);--pf-c-clipboard-copy__text--m-code--FontSize:var(--pf-global--FontSize--sm);--pf-c-clipboard-copy__actions-item--MarginTop:calc(-1 * var(--pf-global--spacer--form-element));--pf-c-clipboard-copy__actions-item--MarginBottom:calc(-1 * var(--pf-global--spacer--form-element));--pf-c-clipboard-copy__actions-item--button--PaddingTop:var(--pf-global--spacer--xs);--pf-c-clipboard-copy__actions-item--button--PaddingRight:var(--pf-global--spacer--sm);--pf-c-clipboard-copy__actions-item--button--PaddingBottom:var(--pf-global--spacer--xs);--pf-c-clipboard-copy__actions-item--button--PaddingLeft:var(--pf-global--spacer--sm)}.pf-c-clipboard-copy.pf-m-inline{display:inline;padding-top:var(--pf-c-clipboard-copy--m-inline--PaddingTop);padding-bottom:var(--pf-c-clipboard-copy--m-inline--PaddingBottom);padding-left:var(--pf-c-clipboard-copy--m-inline--PaddingLeft);white-space:nowrap;background-color:var(--pf-c-clipboard-copy--m-inline--BackgroundColor)}.pf-c-clipboard-copy.pf-m-inline.pf-m-block{display:block}.pf-c-clipboard-copy__text{word-break:break-word;white-space:normal}.pf-c-clipboard-copy__actions{display:inline-flex}.pf-c-clipboard-copy__actions-item{margin-top:calc(-1 * var(--pf-c-clipboard-copy__actions-item--button--PaddingTop));margin-bottom:calc(-1 * var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom))}.pf-c-clipboard-copy__actions-item .pf-c-button{--pf-c-button--PaddingTop:var(--pf-c-clipboard-copy__actions-item--button--PaddingTop);--pf-c-button--PaddingRight:var(--pf-c-clipboard-copy__actions-item--button--PaddingRight);--pf-c-button--PaddingBottom:var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom);--pf-c-button--PaddingLeft:var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft)}.pf-c-code-block{--pf-c-code-block--BackgroundColor:var(--pf-global--BackgroundColor--200);--pf-c-code-block__header--BorderBottomWidth:var(--pf-global--BorderWidth--sm);--pf-c-code-block__header--BorderBottomColor:var(--pf-global--BorderColor--100);--pf-c-code-block__content--PaddingTop:var(--pf-global--spacer--md);--pf-c-code-block__content--PaddingRight:var(--pf-global--spacer--md);--pf-c-code-block__content--PaddingBottom:var(--pf-global--spacer--md);--pf-c-code-block__content--PaddingLeft:var(--pf-global--spacer--md);--pf-c-code-block__pre--FontFamily:var(--pf-global--FontFamily--monospace);--pf-c-code-block__pre--FontSize:var(--pf-global--FontSize--sm);background-color:var(--pf-c-code-block--BackgroundColor)}.pf-c-code-block__header{display:flex;border-bottom:var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor)}.pf-c-code-block__actions{display:flex;margin-left:auto}.pf-c-code-block__content{padding:var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft)}.pf-c-code-block__pre{font-family:var(--pf-c-code-block__pre--FontFamily);font-size:var(--pf-c-code-block__pre--FontSize);overflow-wrap:break-word;white-space:pre-wrap}.pf-c-code-block__code{font-family:var(--pf-c-code-block__code--FontFamily,inherit)}
1
+ @charset "UTF-8";.pfext-quick-start-panel-content__body dl{margin:0}.pfext-quick-start-panel-content__body dt{font-weight:var(--pf-global--FontWeight--bold)}.pfext-quick-start-panel-content__body dd{margin-bottom:20px}.pfext-quick-start-panel-content__body dd:last-child{margin-bottom:0}.pfext-quick-start-panel-content__body input[type=number]{-webkit-appearance:textfield;appearance:textfield;max-width:100px}.pfext-quick-start-panel-content__body input[type=number]::-webkit-inner-spin-button,.pfext-quick-start-panel-content__body input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.pfext-quick-start-panel-content__body input[type=radio]{margin-right:7px}.pfext-quick-start-panel-content__body .pf-c-list{--pf-c-list--PaddingLeft:20px}.pfext-page-layout__content,.pfext-popover__base,.pfext-quick-start-panel-content__body,.pfext-quick-start-panel-content__header{--pf-global--FontSize--md:14px;--pf-global--FontSize--sm:13px}.pfext-page-layout__content ul,.pfext-popover__base ul,.pfext-quick-start-panel-content__body ul,.pfext-quick-start-panel-content__header ul{list-style-type:disc}.pfext-page-layout__content input[type=checkbox],.pfext-page-layout__content input[type=radio],.pfext-popover__base input[type=checkbox],.pfext-popover__base input[type=radio],.pfext-quick-start-panel-content__body input[type=checkbox],.pfext-quick-start-panel-content__body input[type=radio],.pfext-quick-start-panel-content__header input[type=checkbox],.pfext-quick-start-panel-content__header input[type=radio]{margin-top:1px!important}.pf-theme-dark .pfext-catalog-item-icon__img--large{filter:brightness(1.5) invert(1) hue-rotate(180deg) saturate(4)}.pf-theme-dark .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration{color:var(--pf-global--Color--light-100)}.pf-theme-dark .pfext-quick-start-task-header__subtitle{color:var(--pf-global--palette--black-200)!important}.pf-theme-dark .pfext-quick-start-task-header__task-icon-init{background-color:var(--pf-global--primary-color--300)}.pf-theme-dark .pfext-quick-start-task-header__tryagain{color:var(--pf-global--palette--black-200)!important}.pf-theme-dark .pfext-markdown-view pre{background-color:var(--pf-global--BackgroundColor--100);border-color:var(--pf-global--BorderColor--100)}.pf-theme-dark .pfext-markdown-view code{color:var(--pf-global--Color--100);background-color:var(--pf-global--palette--black-600)}.pf-theme-dark .pfext-markdown-view .pf-c-code-block,.pf-theme-dark .pfext-markdown-view .pf-c-code-block code{background-color:var(--pf-global--BackgroundColor--400)}.pf-theme-dark :where(.pfext-markdown-view) .pf-c-clipboard-copy.pf-m-inline{--pf-c-clipboard-copy--m-inline--BackgroundColor:var(--pf-global--BackgroundColor--400)}.pf-theme-dark .pfext-page-layout__content{background-color:var(--pf-global--BackgroundColor--200)}.pf-theme-dark .pfext-quick-start-catalog__gallery-item .pf-c-card{--pf-c-card--BackgroundColor:var(--pf-global--BackgroundColor--100)}.pf-theme-dark .pf-c-alert{--pf-c-alert--BackgroundColor:var(--pf-global--palette--black-700);--pf-c-alert--m-inline--BackgroundColor:var(--pf-global--palette--black-700);--pf-c-alert--m-inline--m-success--BackgroundColor:var(--pf-global--palette--black-700);--pf-c-alert--m-inline--m-danger--BackgroundColor:var(--pf-global--palette--black-700);--pf-c-alert--m-inline--m-warning--BackgroundColor:var(--pf-global--palette--black-700);--pf-c-alert--m-inline--m-info--BackgroundColor:var(--pf-global--palette--black-700)}.pfext-icon-and-text{align-items:baseline;display:flex}.pf-c-label__icon .pfext-icon-and-text{display:block}.pfext-icon-and-text__icon{flex-shrink:0;margin-right:5px}.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}.catalog-item-header-pf-subtitle{font-size:13px}.catalog-tile-pf-body .catalog-tile-pf-subtitle{font-size:13px}.pfext-catalog{display:flex;flex-direction:column;min-height:100%;min-width:515px}.pfext-catalog-tile-view{display:flex;flex-wrap:wrap;--pf-l-gallery--GridTemplateColumns:repeat(auto-fill, 260px)!important}.pfext-catalog__body{min-width:575px}@media (min-width:768px){.pfext-catalog__body{min-width:590px}}.pfext-catalog-item-details{display:flex;margin:0 0 10px}.pfext-catalog-item-details__description{white-space:pre-wrap}.pfext-catalog-item-details__kind-label{font-weight:var(--pf-global--FontWeight--bold)}.pfext-catalog-item-details__name{margin-bottom:10px}.pfext-catalog-item-details__provider,.pfext-catalog-item-details__tags{margin-bottom:5px}.pfext-catalog-item-details__tag{color:#72767b;font-size:13px;margin-right:5px;text-transform:uppercase}.pfext-catalog-item-icon{padding-right:10px}.pfext-catalog-item-icon__icon{font-size:24px}.pfext-catalog-item-icon__icon--large{font-size:40px}.pfext-catalog-item-icon__img{max-height:24px;max-width:24px}.pfext-catalog-item-icon__img[src$=".svg"]{width:24px}.pfext-catalog-item-icon__img--large{max-height:40px;max-width:40px}.pfext-catalog-item-icon__img--large[src$=".svg"]{width:40px}.pfext-catalog-page{background:#fff;border:1px solid var(--pf-global--BorderColor--300);display:flex;flex:1;padding-top:15px}.pfext-catalog-page--with-sidebar{margin:0 15px;padding-bottom:15px}.pfext-catalog-page__btn-group__group-by{display:inline;margin-left:var(--pf-global--spacer--md)}.pfext-catalog-page__content{flex:1 1 auto;overflow:hidden}.pfext-catalog-page__description{margin-top:-10px;padding:0 15px 10px}@media (min-width:768px){.pfext-catalog-page__description{padding-left:30px;padding-right:30px}}.pfext-catalog-page__filter{display:flex;justify-content:space-between}.pfext-catalog-page__filter-toggle{margin-top:5px}.pfext-catalog-page__grid{background-color:#f5f5f5}.pfext-catalog-page__grouped-items{margin-bottom:var(--pf-global--spacer--md)}.pfext-catalog-page__group-title{margin-bottom:var(--pf-global--spacer--sm)}.pfext-catalog-page__header{margin:0 30px 0 0}.pfext-catalog-page__heading{font-size:16px;margin:0 0 20px 30px}.pfext-catalog-page__hint{margin:0 0 var(--pf-global--spacer--md) 0}.pfext-catalog-page__input{display:inline-flex!important;margin:0 0 20px 30px;width:auto!important}.pfext-catalog-page__sort{display:inline;margin-left:var(--pf-global--spacer--md)}.pfext-catalog-page__num-items{font-weight:var(--pf-global--FontWeight--bold);padding:0 0 20px}.pfext-catalog-page__info-icon{vertical-align:middle;color:#6a6e73}.pfext-catalog-page__info-icon:hover{color:#151515}.pfext-catalog-page__overlay{border:0!important}.pfext-catalog-page__overlay .modal-body .pfext-hint-block{margin-bottom:10px}.pfext-catalog-page__overlay .properties-side-panel-pf{flex:0 0 auto}.pfext-catalog-page__overlay--right{bottom:0;padding:0!important;right:0;top:4.75rem}.pfext-catalog-page__overlay--right .pf-c-modal-box__body{display:flex;flex-direction:column;margin:0!important;padding:0}.pfext-catalog-page__overlay--right .modal-body-inner-shadow-covers{padding-left:0!important;padding-right:0!important}.pfext-catalog-page__overlay--right h1{white-space:normal}.pfext-catalog-page__overlay-action{align-items:baseline;display:inline-flex!important;margin:var(--pf-global--spacer--sm) var(--pf-global--spacer--sm) 0 0;overflow-x:hidden}.pfext-catalog-page__overlay-action-icon{flex-shrink:0;font-size:14px;margin-left:6px}.pfext-catalog-page__overlay-action-label{overflow-x:hidden;text-overflow:ellipsis}.pfext-catalog-page__overlay-actions{display:flex;flex-wrap:wrap;margin-bottom:var(--pf-global--spacer--md);white-space:normal}.pfext-catalog-page__overlay-header{margin-bottom:var(--pf-global--spacer--md)}.pfext-catalog-page__overlay-body{margin:0;padding-left:var(--pf-global--spacer--lg);padding-right:var(--pf-global--spacer--lg);padding-top:var(--pf-global--spacer--md)}@media (min-width:768px){.pfext-catalog-page__overlay-body{display:flex}}.pfext-catalog-page__overlay-description{margin:20px 0 0;white-space:pre-wrap}.pfext-catalog-page__overlay-description h1,.pfext-catalog-page__overlay-description h2,.pfext-catalog-page__overlay-description h3{color:#333}.pfext-catalog-page__overlay-description h2{font-size:20px}.pfext-catalog-page__overlay-description li,.pfext-catalog-page__overlay-description ol,.pfext-catalog-page__overlay-description p{color:#333;font-size:14px!important}@media (min-width:768px){.pfext-catalog-page__overlay-description{flex:1 1 auto;margin-left:20px;margin-top:0}}.pfext-catalog-page__tabs{flex:0 0 220px;margin:0 15px 0 0}@media screen and (min-width:768px){.pf-c-modal-box.pfext-catalog-page__overlay{width:600px}}@media screen and (min-width:992px){.pf-c-modal-box.pfext-catalog-page__overlay{width:900px}}.pfext-catalog-tab__empty{color:#72767b}.pfext-modal-ignore-warning{height:initial}.pfext-modal-ignore-warning__checkbox.checkbox{margin-bottom:0;padding-top:15px}.pfext-modal-ignore-warning__content{display:flex}.pfext-modal-ignore-warning__icon{font-size:30px;margin-right:15px;min-width:30px}.pfext-modal-ignore-warning__link{display:block;margin:10px 0}.properties-side-panel-pf-property-label{font-size:13px}.properties-side-panel-pf-property-value__capability-level{color:var(--pf-global--Color--400);margin-bottom:5px;position:relative}.properties-side-panel-pf-property-value__capability-level--active{color:inherit}.properties-side-panel-pf-property-value__capability-level--active::before{display:none}.properties-side-panel-pf-property-value__capability-level::before{border:1px solid var(--pf-global--Color--400);border-radius:10px;content:"";height:14px;left:-20px;position:absolute;top:4px;width:14px}.properties-side-panel-pf-property-value__capability-level:not(:last-child)::after{background:var(--pf-global--Color--400);content:"";height:6px;left:-13px;position:absolute;top:21px;width:1px}.properties-side-panel-pf-property-value__capability-level-icon{left:-20px;position:absolute;top:4px}.properties-side-panel-pf-property-value__capability-levels{list-style:none}.pfext-status-box{padding:40px 20px}.pfext-status-box__loading-message{margin-top:var(--pf-global--spacer--sm)}.pfext-status-box--loading{align-items:center;display:flex;height:100%;justify-content:center;min-height:50px;width:100%;flex-direction:column}.pfext-m-loader{min-width:18px}.pfext-m-loader-dot__one,.pfext-m-loader-dot__three,.pfext-m-loader-dot__two{animation-delay:0;animation-direction:normal;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:bouncedelay;animation-play-state:running;animation-timing-function:ease-in-out;background:#419eda;border-radius:100%;display:inline-block;height:6px;width:6px}.pfext-m-loader-dot__one{animation-delay:-.32s}.pfext-m-loader-dot__two{animation-delay:-.16s}@keyframes bouncedelay{0%,100%,80%{transform:scale(.25,.25)}40%{transform:scale(1,1)}}.pfext-page-layout__content{padding:var(--pf-global--spacer--lg);flex:1}.pfext-page-layout__header{padding-top:1px;background-color:var(--pf-global--BackgroundColor--light-100)}.pfext-page-layout__hint{padding-left:var(--pf-global--spacer--lg);padding-right:var(--pf-global--spacer--lg);padding-bottom:var(--pf-global--spacer--md);font-size:14px}.pfext-page-layout__title{padding-left:var(--pf-global--spacer--lg);padding-right:var(--pf-global--spacer--lg);font-size:var(--pf-global--FontSize--2xl);margin-top:23px;margin-bottom:11.5px;font-family:var(--pf-global--FontFamily--heading--sans-serif);font-weight:var(--pf-global--FontWeight--normal);line-height:1.1}.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-c-alert{margin:var(--pf-global--spacer--md) 0}.pfext-markdown-view .pfext-markdown-admonition.pf-c-alert .pf-c-alert__title{margin-top:0;margin-bottom:0;font-weight:var(--pf-c-alert__title--FontWeight);font-family:inherit;line-height:inherit;color:var(--pf-c-alert__title--Color);word-break:break-word}.pfext-modal{position:absolute!important}@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-global--BorderWidth--xl) solid var(--pf-global--palette--blue-200);background-color:var(--pf-global--palette--black-500);z-index:9999}.pfext-spotlight__element-highlight-animate{pointer-events:none;position:absolute;box-shadow:inset 0 0 0 4px var(--pf-global--palette--blue-200);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-global--palette--blue-200);outline-offset:-4px}.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-global--FontFamily--heading--sans-serif);font-weight:var(--pf-global--FontWeight--normal);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-global--FontSize--2xl)}.pfext-markdown-view .h2,.pfext-markdown-view h2{font-size:20px}.pfext-markdown-view .h3,.pfext-markdown-view h3{font-size:var(--pf-global--FontSize--lg)}.pfext-markdown-view .h4,.pfext-markdown-view h4{font-size:var(--pf-global--FontSize--md)}.pfext-markdown-view .h5,.pfext-markdown-view h5{font-size:var(--pf-global--FontSize--md)}.pfext-markdown-view .h6,.pfext-markdown-view h6{font-size:var(--pf-global--FontSize--md)}.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-c-modal-box__footer{display:block}.pfext-quick-start-panel-content__header{position:sticky;top:0;background:inherit;z-index:var(--pf-global--ZIndex--xs)}.pfext-quick-start-panel-content__header__shadow{box-shadow:var(--pf-global--BoxShadow--sm-bottom)}.pfext-quick-start-panel-content__header--blue-white{background-color:var(--pf-global--palette--blue-400)}.pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__title{color:var(--pf-global--Color--light-100)}.pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration{color:var(--pf-global--Color--light-200)}.pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__close-button button{color:var(--pf-global--Color--light-100)!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-global--FontSize--md);font-weight:400;line-height:1;color:#9c9c9c}.pfext-quick-start-panel-content__footer__shadow{box-shadow:var(--pf-global--BoxShadow--sm-top)}.pfext-quick-start-tile{height:100%}.pfext-quick-start-tile .catalog-tile-pf-description .has-footer{display:block;-webkit-line-clamp:unset}.pfext-quick-start-tile .catalog-tile-pf-icon{display:flex}.pfext-quick-start-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-global--spacer--sm);font-size:var(--pf-global--FontSize--md);margin-top:11.5px;margin-bottom:11.5px;font-family:var(--pf-global--FontFamily--heading--sans-serif);font-weight:var(--pf-global--FontWeight--normal);line-height:1.1}.pfext-quick-start-tile-prerequisites-list{padding-left:20px}.pfext-quick-start-tile-header__status{margin:var(--pf-global--spacer--sm) 0}.pfext-quick-start-tile-header--margin{margin-right:var(--pf-global--spacer--sm);margin-bottom:var(--pf-global--spacer--sm)}.pfext-quick-start-tile-header .pf-c-badge:not(:last-of-type){margin-right:var(--pf-global--spacer--sm)}.pfext-quick-start-catalog__gallery{--pf-l-gallery--GridTemplateColumns:repeat(auto-fill, 300px)!important}.pfext-quick-start-catalog__gallery-item{display:inherit!important}.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-catalog-filter__input{flex-grow:1;max-width:500px}.pfext-quick-start-catalog-filter__count{font-weight:var(--pf-global--FontWeight--bold)}.pf-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex{--pf-c-toolbar--PaddingBottom:var(--pf-global--spacer--sm);--pf-c-toolbar--PaddingTop:var(--pf-global--spacer--sm);--pf-c-toolbar--RowGap:0;font-size:14px}.pf-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex .pf-c-select{--pf-c-select__toggle--FontSize:14px}.pf-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex .pf-c-check{--pf-c-check__label--FontSize:14px}.pfext-quick-start-content{flex:1 1 0;overflow:auto;padding:var(--pf-global--spacer--lg);font-size:16px}.pfext-quick-start-content .pf-c-alert__description p{font-size:13px}.pfext-quick-start-footer{background-color:var(--pf-global--BackgroundColor--100);flex:0 0 auto;padding:var(--pf-global--spacer--md) var(--pf-global--spacer--lg)}.pfext-quick-start-footer__actionbtn{margin-right:var(--pf-global--spacer--md)}.pfext-quick-start-footer__restartbtn{float:right}.pfext-quick-start-tasks__list button::before{content:none}.pfext-quick-start-tasks__list li.pf-c-wizard__nav-item{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;margin-bottom:var(--pf-global--spacer--xs)}.pfext-quick-start-tasks__list .pfext-quick-start-task__content{margin-bottom:var(--pf-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-global--Color--200);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-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-c-alert{margin:var(--pf-global--spacer--md) 0}.pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-c-alert__title{margin-top:0;margin-bottom:0;font-weight:var(--pf-c-alert__title--FontWeight);font-family:inherit;line-height:inherit;color:var(--pf-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-global--palette--blue-50);border-color:var(--pf-global--active-color--200);margin:var(--pf-global--spacer--md) 0}.pfext-quick-start-tasks__list .task-pflist-list__item__content .task-pflist-list__item__content__note__body{font-size:14px}.pfext-quick-start-intro__prereq{margin-bottom:var(--pf-global--spacer--md)}.pfext-quick-start-intro__prereq .pf-c-expandable-section__content{margin-top:var(--pf-global--spacer--sm)}.pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle{padding-top:0;padding-bottom:0}.pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-text{margin-left:var(--pf-global--spacer--sm)}.pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon{color:var(--pf-c-expandable-section__toggle--Color)}.pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon:focus,.pfext-quick-start-intro__prereq .pf-c-expandable-section__toggle-icon:hover{--pf-c-expandable-section__toggle--Color:var(--pf-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-task-header{margin-bottom:var(--pf-global--spacer--sm);display:grid;grid-template-columns:min-content auto;font-size:var(--pf-global--FontSize--md)}.pfext-quick-start-task-header button::before{content:none}.pfext-quick-start-task-header__title{color:var(--pf-global--primary-color--100)!important;margin-right:var(--pf-global--spacer--md)!important}.pfext-quick-start-task-header__subtitle{font-size:var(--pf-global--FontSize--sm);color:var(--pf-global--Color--dark-200)!important}.pfext-quick-start-task-header__tryagain{display:block;font-size:var(--pf-global--FontSize--md);color:var(--pf-global--Color--300)!important}.pfext-quick-start-task-header__title-success{color:var(--pf-global--success-color--100)!important}.pfext-quick-start-task-header__title-failed{color:var(--pf-global--danger-color--100)!important}.pfext-quick-start-task-header__task-icon-init{background-color:var(--pf-global--primary-color--100);border-radius:var(--pf-global--BorderRadius--lg);color:var(--pf-global--Color--light-100);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-global--success-color--100)!important}.pfext-quick-start-task-header__task-icon-failed{color:var(--pf-global--danger-color--100)!important}.pfext-quick-start-task-review-alert{margin:var(--pf-global--spacer--lg) 0}.pfext-quick-start-task-review{font-size:var(--pf-global--FontSize--md);line-height:var(--pf-global--FontSize--xl);font-family:var(--pf-global--FontFamily--heading--sans-serif)}.pfext-quick-start-task-review__actions{display:flex;align-items:flex-start;margin-bottom:var(--pf-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-global--spacer--xl)!important}.pfext-quick-start-task-review--success{color:var(--pf-global--success-color--100)!important}.pfext-quick-start-task-review--failed{color:var(--pf-chart-global--danger--Color--100)}.pfext-quick-start-task-header__list{padding:0!important}.pfext-quick-start-task-header__list button::before{content:none}.pfext-quick-start-task-header__list li{list-style-type:none;display:flex;flex-wrap:wrap;align-items:center;margin-bottom:var(--pf-global--spacer--xs)}.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-c-alert{margin:var(--pf-global--spacer--md) 0}.pfext-markdown-view .pfext-markdown-admonition.pf-c-alert .pf-c-alert__title{margin-top:0;margin-bottom:0;font-weight:var(--pf-c-alert__title--FontWeight);font-family:inherit;line-height:inherit;color:var(--pf-c-alert__title--Color);word-break:break-word}.pfext-modal{position:absolute!important}@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-global--BorderWidth--xl) solid var(--pf-global--palette--blue-200);background-color:var(--pf-global--palette--black-500);z-index:9999}.pfext-spotlight__element-highlight-animate{pointer-events:none;position:absolute;box-shadow:inset 0 0 0 4px var(--pf-global--palette--blue-200);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-global--palette--blue-200);outline-offset:-4px}:root{--vertical-tab-pf-color:var(--pf-global--Color--100);--vertical-tab-pf-active-color:var(--pf-global--active-color--100)}.catalog-tile-pf.featured{border-top:2px solid var(--pf-global--active-color--100)}.catalog-tile-pf:active,.catalog-tile-pf:focus,.catalog-tile-pf:hover,.catalog-tile-pf:visited{color:inherit;text-decoration:none}.catalog-tile-pf .pf-c-card__actions{padding-left:5px}.catalog-tile-pf-header{font-size:16px;font-weight:400;padding-bottom:16px}.catalog-tile-pf-header .catalog-tile-pf-title{font-size:15px;font-weight:400}.catalog-tile-pf-header .catalog-tile-pf-subtitle{color:var(--pf-global--Color--200);font-size:13px;font-weight:initial}.catalog-tile-pf-header .catalog-tile-pf-subtitle a,.catalog-tile-pf-header .catalog-tile-pf-subtitle a:hover{text-decoration:none}.catalog-tile-pf-icon{font-size:40px;height:40px;max-width:60px;min-width:40px}.catalog-tile-pf-badge-container{display:flex;flex:1;justify-content:flex-end}.catalog-tile-pf-description{margin-top:0}.catalog-tile-pf-description span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}.catalog-tile-pf-description .has-footer{-webkit-line-clamp:1}.pf-c-clipboard-copy{--pf-c-clipboard-copy__toggle-icon--Transition:.2s ease-in 0s;--pf-c-clipboard-copy--m-expanded__toggle-icon--Rotate:90deg;--pf-c-clipboard-copy__expandable-content--PaddingTop:var(--pf-global--spacer--md);--pf-c-clipboard-copy__expandable-content--PaddingRight:var(--pf-global--spacer--md);--pf-c-clipboard-copy__expandable-content--PaddingBottom:var(--pf-global--spacer--md);--pf-c-clipboard-copy__expandable-content--PaddingLeft:var(--pf-global--spacer--md);--pf-c-clipboard-copy__expandable-content--BackgroundColor:var(--pf-global--BackgroundColor--light-100);--pf-c-clipboard-copy__expandable-content--BorderTopWidth:0;--pf-c-clipboard-copy__expandable-content--BorderRightWidth:var(--pf-global--BorderWidth--sm);--pf-c-clipboard-copy__expandable-content--BorderBottomWidth:var(--pf-global--BorderWidth--sm);--pf-c-clipboard-copy__expandable-content--BorderLeftWidth:var(--pf-global--BorderWidth--sm);--pf-c-clipboard-copy__expandable-content--BorderColor:var(--pf-global--BorderColor--100);--pf-c-clipboard-copy__expandable-content--OutlineOffset:calc(-1 * var(--pf-global--spacer--xs));--pf-c-clipboard-copy--m-inline--PaddingTop:0;--pf-c-clipboard-copy--m-inline--PaddingBottom:0;--pf-c-clipboard-copy--m-inline--PaddingLeft:var(--pf-global--spacer--xs);--pf-c-clipboard-copy--m-inline--BackgroundColor:var(--pf-global--BackgroundColor--200);--pf-c-clipboard-copy__text--m-code--FontFamily:var(--pf-global--FontFamily--monospace);--pf-c-clipboard-copy__text--m-code--FontSize:var(--pf-global--FontSize--sm);--pf-c-clipboard-copy__actions-item--MarginTop:calc(-1 * var(--pf-global--spacer--form-element));--pf-c-clipboard-copy__actions-item--MarginBottom:calc(-1 * var(--pf-global--spacer--form-element));--pf-c-clipboard-copy__actions-item--button--PaddingTop:var(--pf-global--spacer--xs);--pf-c-clipboard-copy__actions-item--button--PaddingRight:var(--pf-global--spacer--sm);--pf-c-clipboard-copy__actions-item--button--PaddingBottom:var(--pf-global--spacer--xs);--pf-c-clipboard-copy__actions-item--button--PaddingLeft:var(--pf-global--spacer--sm)}.pf-c-clipboard-copy.pf-m-inline{display:inline;padding-top:var(--pf-c-clipboard-copy--m-inline--PaddingTop);padding-bottom:var(--pf-c-clipboard-copy--m-inline--PaddingBottom);padding-left:var(--pf-c-clipboard-copy--m-inline--PaddingLeft);white-space:nowrap;background-color:var(--pf-c-clipboard-copy--m-inline--BackgroundColor)}.pf-c-clipboard-copy.pf-m-inline.pf-m-block{display:block}.pf-c-clipboard-copy__text{word-break:break-word;white-space:normal}.pf-c-clipboard-copy__actions{display:inline-flex}.pf-c-clipboard-copy__actions-item{margin-top:calc(-1 * var(--pf-c-clipboard-copy__actions-item--button--PaddingTop));margin-bottom:calc(-1 * var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom))}.pf-c-clipboard-copy__actions-item .pf-c-button{--pf-c-button--PaddingTop:var(--pf-c-clipboard-copy__actions-item--button--PaddingTop);--pf-c-button--PaddingRight:var(--pf-c-clipboard-copy__actions-item--button--PaddingRight);--pf-c-button--PaddingBottom:var(--pf-c-clipboard-copy__actions-item--button--PaddingBottom);--pf-c-button--PaddingLeft:var(--pf-c-clipboard-copy__actions-item--button--PaddingLeft)}:where(.pf-theme-dark) .pf-c-clipboard-copy{--pf-c-clipboard-copy__expandable-content--BackgroundColor:var(--pf-global--BackgroundColor--400)}.pf-c-code-block{--pf-c-code-block--BackgroundColor:var(--pf-global--BackgroundColor--200);--pf-c-code-block__header--BorderBottomWidth:var(--pf-global--BorderWidth--sm);--pf-c-code-block__header--BorderBottomColor:var(--pf-global--BorderColor--100);--pf-c-code-block__content--PaddingTop:var(--pf-global--spacer--md);--pf-c-code-block__content--PaddingRight:var(--pf-global--spacer--md);--pf-c-code-block__content--PaddingBottom:var(--pf-global--spacer--md);--pf-c-code-block__content--PaddingLeft:var(--pf-global--spacer--md);--pf-c-code-block__pre--FontFamily:var(--pf-global--FontFamily--monospace);--pf-c-code-block__pre--FontSize:var(--pf-global--FontSize--sm);background-color:var(--pf-c-code-block--BackgroundColor)}.pf-c-code-block__header{display:flex;border-bottom:var(--pf-c-code-block__header--BorderBottomWidth) solid var(--pf-c-code-block__header--BorderBottomColor)}.pf-c-code-block__actions{display:flex;margin-left:auto}.pf-c-code-block__content{padding:var(--pf-c-code-block__content--PaddingTop) var(--pf-c-code-block__content--PaddingRight) var(--pf-c-code-block__content--PaddingBottom) var(--pf-c-code-block__content--PaddingLeft)}.pf-c-code-block__pre{font-family:var(--pf-c-code-block__pre--FontFamily);font-size:var(--pf-c-code-block__pre--FontSize);overflow-wrap:break-word;white-space:pre-wrap}.pf-c-code-block__code{font-family:var(--pf-c-code-block__code--FontFamily,inherit)}
@@ -1,4 +1,3 @@
1
- /// <reference types="react" />
2
1
  import { AccessReviewResourceAttributes, ObjectMetadata } from '../ConsoleInternal/module/k8s/types';
3
2
  export declare type QuickStart = {
4
3
  apiVersion?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/quickstarts",
3
- "version": "2.3.2",
3
+ "version": "2.3.4",
4
4
  "description": "PatternFly quick starts",
5
5
  "files": [
6
6
  "src",
@@ -9,6 +9,10 @@
9
9
  "main": "dist/index.js",
10
10
  "module": "dist/index.es.js",
11
11
  "types": "dist/index.d.ts",
12
+ "publishConfig": {
13
+ "access": "public",
14
+ "tag": "prerelease"
15
+ },
12
16
  "repository": {
13
17
  "type": "git",
14
18
  "url": "git+https://github.com/patternfly/patternfly-quickstarts.git"
@@ -44,20 +48,20 @@
44
48
  "@patternfly/react-core": ">=4.115.2",
45
49
  "react": ">=16.8.0",
46
50
  "react-dom": ">=16.8.0",
47
- "showdown": ">=1.8.6"
51
+ "marked": "^4.0.0"
48
52
  },
49
53
  "dependencies": {
50
- "@patternfly/react-catalog-view-extension": "4.12.15",
54
+ "@patternfly/react-catalog-view-extension": "^4.93.15",
51
55
  "dompurify": "^2.2.6",
52
- "history": "^5.0.0",
53
- "showdown": "1.8.6"
56
+ "history": "^5.0.0"
54
57
  },
55
58
  "devDependencies": {
56
- "@patternfly/patternfly": "4.122.2",
57
- "@patternfly/react-core": "4.135.15",
58
- "@patternfly/react-icons": "4.11.4",
59
- "@patternfly/react-styles": "4.11.4",
60
- "@patternfly/react-tokens": "4.12.5",
59
+ "@patternfly/documentation-framework": "^1.8.0",
60
+ "@patternfly/patternfly": "^4.222.4",
61
+ "@patternfly/react-core": "^4.267.6",
62
+ "@patternfly/react-icons": "4.93.6",
63
+ "@patternfly/react-styles": "4.92.6",
64
+ "@patternfly/react-tokens": "4.94.6",
61
65
  "@rollup/plugin-commonjs": "^17.0.0",
62
66
  "@rollup/plugin-json": "^4.1.0",
63
67
  "@rollup/plugin-node-resolve": "^11.1.0",
@@ -71,10 +75,10 @@
71
75
  "@types/react-dom": "^16.8.0",
72
76
  "clean-css-cli": "^4.3.0",
73
77
  "concat-files": "^0.1.1",
78
+ "dart-sass": "^1.25.0",
74
79
  "enzyme": "^3.7.0",
75
80
  "enzyme-adapter-react-16": "^1.15.5",
76
81
  "enzyme-to-json": "^3.6.1",
77
- "node-sass": "^6.0.1",
78
82
  "node-sass-glob-importer": "^5.3.2",
79
83
  "prettier": "^2.1.2",
80
84
  "purgecss": "^4.0.0",
@@ -92,7 +96,6 @@
92
96
  "rollup-plugin-typescript2": "^0.29.0",
93
97
  "rollup-plugin-visualizer": "^5.5.0",
94
98
  "sass": "^1.35.2",
95
- "tslib": "^2.0.3",
96
- "@patternfly/documentation-framework": "1.0.2"
99
+ "tslib": "^2.0.3"
97
100
  }
98
101
  }
@@ -1,3 +1,5 @@
1
+ @use 'sass:math';
2
+
1
3
  // frontend/public/style/_vars.scss
2
4
  $font-size-base: 14px;
3
5
  $pfext-m-catalog-tile-height: 100%;
@@ -104,11 +106,11 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
104
106
  border: 1px solid var(--pf-global--BorderColor--300);
105
107
  display: flex;
106
108
  flex: 1;
107
- padding-top: ($grid-gutter-width / 2);
109
+ padding-top: math.div($grid-gutter-width, 2);
108
110
 
109
111
  &--with-sidebar {
110
- margin: 0 ($grid-gutter-width / 2);
111
- padding-bottom: ($grid-gutter-width / 2);
112
+ margin: 0 math.div($grid-gutter-width, 2);
113
+ padding-bottom: math.div($grid-gutter-width, 2);
112
114
  }
113
115
 
114
116
  &__btn-group__group-by {
@@ -123,7 +125,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
123
125
 
124
126
  &__description {
125
127
  margin-top: -10px;
126
- padding: 0 ($grid-gutter-width / 2) 10px;
128
+ padding: 0 math.div($grid-gutter-width, 2) 10px;
127
129
  @media (min-width: $grid-float-breakpoint) {
128
130
  padding-left: $grid-gutter-width;
129
131
  padding-right: $grid-gutter-width;
@@ -296,7 +298,7 @@ $catalog-tile-width: $pfext-m-catalog-tile-width;
296
298
 
297
299
  &__tabs {
298
300
  flex: 0 0 220px;
299
- margin: 0 ($grid-gutter-width / 2) 0 0;
301
+ margin: 0 math.div($grid-gutter-width, 2) 0 0;
300
302
  }
301
303
  }
302
304
 
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { css } from '@patternfly/react-styles';
3
- import { Converter } from 'showdown';
3
+ import { marked } from 'marked';
4
4
  import { useForceRender } from '@console/shared';
5
5
  import { QuickStartContext, QuickStartContextValues } from '../../utils/quick-start-context';
6
6
  import './_markdown-view.scss';
@@ -16,18 +16,7 @@ type ShowdownExtension = {
16
16
  replace?: (...args: any[]) => string;
17
17
  };
18
18
 
19
- export const markdownConvert = (markdown, extensions?: ShowdownExtension[]) => {
20
- const converter = new Converter({
21
- tables: true,
22
- openLinksInNewWindow: true,
23
- strikethrough: true,
24
- emoji: false,
25
- });
26
-
27
- if (extensions) {
28
- converter.addExtension(extensions);
29
- }
30
-
19
+ export const markdownConvert = async (markdown: string, extensions?: ShowdownExtension[]) => {
31
20
  DOMPurify.addHook('beforeSanitizeElements', function(node) {
32
21
  // nodeType 1 = element type
33
22
 
@@ -62,40 +51,26 @@ export const markdownConvert = (markdown, extensions?: ShowdownExtension[]) => {
62
51
  }
63
52
  });
64
53
 
65
- return DOMPurify.sanitize(converter.makeHtml(markdown), {
66
- USE_PROFILES: {
67
- html: true,
68
- svg: true,
69
- },
70
- // ALLOWED_TAGS: [
71
- // 'b',
72
- // 'i',
73
- // 'strike',
74
- // 's',
75
- // 'del',
76
- // 'em',
77
- // 'strong',
78
- // 'a',
79
- // 'p',
80
- // 'h1',
81
- // 'h2',
82
- // 'h3',
83
- // 'h4',
84
- // 'ul',
85
- // 'ol',
86
- // 'li',
87
- // 'code',
88
- // 'pre',
89
- // 'button',
90
- // ...tableTags,
91
- // 'div',
92
- // 'img',
93
- // 'span',
94
- // 'svg',
95
- // ],
96
- // ALLOWED_ATTR: ['href', 'target', 'rel', 'class', 'src', 'alt', 'id'],
97
- // ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|didact):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i,
98
- });
54
+ // Replace code fences with non markdown formatting relates tokens so that marked doesn't try to parse them as code spans
55
+ const markdownWithSubstitutedCodeFences = markdown.replace(/```/g, '@@@');
56
+ const parsedMarkdown = await marked.parse(markdownWithSubstitutedCodeFences);
57
+ // Swap the temporary tokens back to code fences before we run the extensions
58
+ let md = parsedMarkdown.replace(/@@@/g, '```');
59
+
60
+ if (extensions) {
61
+ // Convert code spans back to md format before we run the custom extension regexes
62
+ md = md.replace(/<code>(.*)<\/code>/g, '`$1`');
63
+
64
+ extensions.forEach(({ regex, replace }) => {
65
+ if (regex) {
66
+ md = md.replace(regex, replace);
67
+ }
68
+ });
69
+
70
+ // Convert any remaining backticks back into code spans
71
+ md = md.replace(/`(.*)`/g, '<code>$1</code>');
72
+ }
73
+ return DOMPurify.sanitize(md);
99
74
  };
100
75
 
101
76
  type SyncMarkdownProps = {
@@ -126,9 +101,18 @@ export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
126
101
  className,
127
102
  }) => {
128
103
  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
129
- const markup = React.useMemo(() => {
130
- return markdownConvert(content || emptyMsg || getResource('Not available'), extensions);
131
- }, [content, emptyMsg, extensions, getResource]);
104
+ const [markup, setMarkup] = React.useState<string>('');
105
+
106
+ React.useEffect(() => {
107
+ async function getMd() {
108
+ const md = await markdownConvert(
109
+ content || emptyMsg || getResource('Not available'),
110
+ extensions,
111
+ );
112
+ setMarkup(md);
113
+ }
114
+ getMd();
115
+ }, [content, emptyMsg, getResource, extensions]);
132
116
  const innerProps: InnerSyncMarkdownProps = {
133
117
  renderExtension: extensions?.length > 0 ? renderExtension : undefined,
134
118
  exactHeight,
@@ -0,0 +1,52 @@
1
+ import * as React from 'react';
2
+ import {
3
+ Accordion,
4
+ AccordionItem,
5
+ AccordionToggle,
6
+ AccordionContent,
7
+ } from '@patternfly/react-core';
8
+ import { renderToStaticMarkup } from 'react-dom/server';
9
+ import { removeTemplateWhitespace } from './utils';
10
+ import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
11
+ import './showdown-extension.scss';
12
+
13
+ const useAccordionShowdownExtension = () => {
14
+ return React.useMemo(
15
+ () => ({
16
+ type: 'lang',
17
+ regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
18
+ replace: (
19
+ _text: string,
20
+ accordionContent: string,
21
+ _command: string,
22
+ accordionHeading: string,
23
+ ): string => {
24
+ const accordionId = new String(accordionHeading).replace(/\s/g, '-');
25
+
26
+ return removeTemplateWhitespace(
27
+ renderToStaticMarkup(
28
+ <Accordion asDefinitionList>
29
+ <AccordionItem>
30
+ <AccordionToggle
31
+ isExpanded={false}
32
+ id={`${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}`}
33
+ >
34
+ {accordionHeading}
35
+ </AccordionToggle>
36
+ <AccordionContent
37
+ id={`${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`}
38
+ isHidden={!false}
39
+ >
40
+ {accordionContent}
41
+ </AccordionContent>
42
+ </AccordionItem>
43
+ </Accordion>,
44
+ ),
45
+ );
46
+ },
47
+ }),
48
+ [],
49
+ );
50
+ };
51
+
52
+ export default useAccordionShowdownExtension;
@@ -0,0 +1,60 @@
1
+ import * as React from 'react';
2
+ import { useEventListener } from '../../hooks';
3
+ import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
4
+
5
+ type AccordionShowdownComponentProps = {
6
+ buttonElement: HTMLElement;
7
+ contentElement: HTMLElement;
8
+ };
9
+
10
+ const AccordionShowdownHandler: React.FC<AccordionShowdownComponentProps> = ({
11
+ buttonElement,
12
+ contentElement,
13
+ }) => {
14
+ const [expanded, setExpanded] = React.useState<boolean>(false);
15
+
16
+ const handleClick = () => {
17
+ const expandedModifier = 'pf-m-expanded';
18
+
19
+ buttonElement.className = `pf-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
20
+ contentElement.hidden = expanded;
21
+ contentElement.className = `pf-c-accordion__expanded-content ${
22
+ !expanded ? expandedModifier : ''
23
+ }`;
24
+ setExpanded(!expanded);
25
+ };
26
+
27
+ useEventListener(buttonElement, 'click', handleClick);
28
+
29
+ return <></>;
30
+ };
31
+
32
+ type accordionRenderExtensionProps = {
33
+ docContext: HTMLDocument;
34
+ };
35
+
36
+ const AccordionRenderExtension: React.FC<accordionRenderExtensionProps> = ({ docContext }) => {
37
+ const buttonElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_BUTTON_ID}]`);
38
+ const contentElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_CONTENT_ID}]`);
39
+
40
+ return buttonElements.length > 0 ? (
41
+ <>
42
+ {Array.from(buttonElements).map((elm) => {
43
+ const content = Array.from(contentElements).find((elm2) => {
44
+ const elmId = elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1];
45
+ const elm2Id = elm2.id.split(ACCORDION_MARKDOWN_CONTENT_ID)[1];
46
+ return elmId === elm2Id;
47
+ });
48
+ return (
49
+ <AccordionShowdownHandler
50
+ key={elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1]}
51
+ buttonElement={elm as HTMLElement}
52
+ contentElement={content as HTMLElement}
53
+ />
54
+ );
55
+ })}
56
+ </>
57
+ ) : null;
58
+ };
59
+
60
+ export default AccordionRenderExtension;
@@ -1,3 +1,5 @@
1
1
  export const MARKDOWN_COPY_BUTTON_ID = 'data-copy-for';
2
2
  export const MARKDOWN_EXECUTE_BUTTON_ID = 'data-execute-for';
3
3
  export const MARKDOWN_SNIPPET_ID = 'data-snippet-id';
4
+ export const ACCORDION_MARKDOWN_BUTTON_ID = `accordion-markdown-button-id`;
5
+ export const ACCORDION_MARKDOWN_CONTENT_ID = `accordion-markdown-content-id`;
@@ -3,3 +3,5 @@ export { default as useInlineCopyClipboardShowdownExtension } from './inline-cli
3
3
  export { default as useMultilineCopyClipboardShowdownExtension } from './multiline-clipboard-extension';
4
4
  export { default as useAdmonitionShowdownExtension } from './admonition-extension';
5
5
  export { default as useCodeShowdownExtension } from './code-extension';
6
+ export { default as useAccordionShowdownExtension } from './accordion-extension';
7
+ export { default as AccordionRenderExtension } from './accordion-render-extension';
@@ -52,7 +52,7 @@ const HelpTopicPanelContent: React.FC<HelpTopicPanelContentProps> = ({
52
52
  };
53
53
 
54
54
  const menuItems =
55
- filteredHelpTopics.length > 0 &&
55
+ filteredHelpTopics.length > 1 &&
56
56
  filteredHelpTopics.map((topic) => {
57
57
  return (
58
58
  <OptionsMenuItem key={topic.name} onSelect={onSelectHelpTopic} id={topic.name}>
@@ -1,12 +1,14 @@
1
1
  import * as React from 'react';
2
2
  import { SyncMarkdownView } from '@console/internal/components/markdown-view';
3
3
  import {
4
+ AccordionRenderExtension,
4
5
  MarkdownCopyClipboard,
5
6
  MarkdownHighlightExtension,
6
7
  useInlineCopyClipboardShowdownExtension,
7
8
  useMultilineCopyClipboardShowdownExtension,
8
9
  useAdmonitionShowdownExtension,
9
10
  useCodeShowdownExtension,
11
+ useAccordionShowdownExtension,
10
12
  } from '@console/shared';
11
13
  import { HIGHLIGHT_REGEXP } from '@console/shared/src/components/markdown-highlight-extension/highlight-consts';
12
14
  import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
@@ -29,6 +31,7 @@ const QuickStartMarkdownView: React.FC<QuickStartMarkdownViewProps> = ({
29
31
  const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
30
32
  const admonitionShowdownExtension = useAdmonitionShowdownExtension();
31
33
  const codeShowdownExtension = useCodeShowdownExtension();
34
+ const accordionShowdownExtension = useAccordionShowdownExtension();
32
35
  return (
33
36
  <SyncMarkdownView
34
37
  inline
@@ -57,10 +60,12 @@ const QuickStartMarkdownView: React.FC<QuickStartMarkdownViewProps> = ({
57
60
  multilineCopyClipboardShowdownExtension,
58
61
  admonitionShowdownExtension,
59
62
  codeShowdownExtension,
63
+ accordionShowdownExtension,
60
64
  ...(markdown ? markdown.extensions : []),
61
65
  ]}
62
66
  renderExtension={(docContext, rootSelector) => (
63
67
  <>
68
+ <AccordionRenderExtension docContext={docContext} />
64
69
  <MarkdownHighlightExtension docContext={docContext} rootSelector={rootSelector} />
65
70
  <MarkdownCopyClipboard docContext={docContext} rootSelector={rootSelector} />
66
71
  {markdown &&
@@ -15,6 +15,8 @@ import QuickStartController from './QuickStartController';
15
15
  import { QuickStartContext, QuickStartContextValues } from './utils/quick-start-context';
16
16
  import { QuickStart } from './utils/quick-start-types';
17
17
  import { camelize } from './utils/quick-start-utils';
18
+ import { removeParagraphWrap } from './QuickStartMarkdownView';
19
+ import { markdownConvert } from './ConsoleInternal/components/markdown-view';
18
20
 
19
21
  type HandleClose = () => void;
20
22
 
@@ -58,6 +60,7 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
58
60
  QuickStartContext,
59
61
  );
60
62
  const [contentRef, setContentRef] = React.useState<HTMLDivElement>();
63
+ const [displayName, setDisplayName] = React.useState<string>('');
61
64
  const shadows = useScrollShadows(contentRef);
62
65
  const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
63
66
  const taskNumber = activeQuickStartState?.taskNumber;
@@ -94,6 +97,14 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
94
97
  }
95
98
  }, [quickStart]);
96
99
 
100
+ React.useEffect(() => {
101
+ async function getDisplayName() {
102
+ const convertedMdDisplayName = await markdownConvert(quickStart?.spec.displayName);
103
+ setDisplayName(removeParagraphWrap(convertedMdDisplayName));
104
+ }
105
+ getDisplayName();
106
+ }, [quickStart]);
107
+
97
108
  const content = quickStart ? (
98
109
  <DrawerPanelContent
99
110
  isResizable={isResizable}
@@ -107,12 +118,16 @@ const QuickStartPanelContent: React.FC<QuickStartPanelContentProps> = ({
107
118
  <DrawerHead>
108
119
  <div className="pfext-quick-start-panel-content__title" tabIndex={-1} ref={titleRef}>
109
120
  <Title
110
- headingLevel="h1"
121
+ headingLevel="h2"
111
122
  size="xl"
112
123
  className="pfext-quick-start-panel-content__name"
113
124
  style={{ marginRight: 'var(--pf-global--spacer--md)' }}
114
125
  >
115
- {quickStart?.spec.displayName}{' '}
126
+ <span
127
+ dangerouslySetInnerHTML={{
128
+ __html: displayName,
129
+ }}
130
+ />{' '}
116
131
  <small className="pfext-quick-start-panel-content__duration">
117
132
  {quickStart?.spec.durationMinutes
118
133
  ? getResource(
@@ -5,6 +5,7 @@ import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-cl
5
5
  import { StatusIcon } from '@console/shared';
6
6
  import { QuickStartContext, QuickStartContextValues } from '../utils/quick-start-context';
7
7
  import { QuickStartStatus, QuickStartType } from '../utils/quick-start-types';
8
+ import QuickStartMarkdownView from '../QuickStartMarkdownView';
8
9
 
9
10
  type QuickStartTileHeaderProps = {
10
11
  status: string;
@@ -38,7 +39,7 @@ const QuickStartTileHeader: React.FC<QuickStartTileHeaderProps> = ({
38
39
  return (
39
40
  <div className="pfext-quick-start-tile-header">
40
41
  <Title headingLevel="h3" data-test="title" id={quickStartId}>
41
- {name}
42
+ <QuickStartMarkdownView content={name} />
42
43
  </Title>
43
44
  <div className="pfext-quick-start-tile-header__status">
44
45
  {type && (