@patternfly/patternfly 4.176.2 → 4.178.0

package/docs/demos/ContextSelector/examples/ContextSelector.md

@@ -5,880 +5,44 @@ section: components
 
 ### Context selector in masthead
 
-```html isFullscreen
-<div class="pf-c-page" id="context-selector-in-masthead">
-  <a
-    class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#context-selector-in-masthead-main"
-  >Skip to content</a>
-  <header class="pf-c-masthead" id="context-selector-in-masthead-masthead">
-    <span class="pf-c-masthead__toggle">
-      <button
-        class="pf-c-button pf-m-plain"
-        type="button"
-        aria-label="Global navigation"
-      >
-        <i class="fas fa-bars" aria-hidden="true"></i>
-      </button>
-    </span>
-
-    <div class="pf-c-masthead__main">
-      <a class="pf-c-masthead__brand" href="#">
-        <picture
-          class="pf-c-brand pf-m-picture"
-          style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
-        >
-          <source
-            media="(min-width: 768px)"
-            srcset="/assets/images/logo__pf--reverse-on-md.svg"
-          />
-          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
-          <img
-            src="/assets/images/logo__pf--reverse--base.png"
-            alt="Fallback patternFly default logo"
-          />
-        </picture>
-      </a>
-    </div>
-    <div class="pf-c-masthead__content">
-      <div
-        class="pf-c-toolbar pf-m-full-height pf-m-static"
-        id="context-selector-in-masthead-masthead-toolbar"
-      >
-        <div class="pf-c-toolbar__content">
-          <div class="pf-c-toolbar__content-section">
-            <div class="pf-c-toolbar__item">
-              <div class="pf-c-context-selector pf-m-full-height">
-                <span
-                  id="context-selector-in-masthead-masthead-context-selector-label"
-                  hidden
-                >Selected project:</span>
-                <button
-                  class="pf-c-context-selector__toggle"
-                  aria-expanded="false"
-                  id="context-selector-in-masthead-masthead-context-selector-toggle"
-                  aria-labelledby="context-selector-in-masthead-masthead-context-selector-label context-selector-in-masthead-masthead-context-selector-toggle"
-                >
-                  <span
-                    class="pf-c-context-selector__toggle-text"
-                  >Context selector</span>
-                  <span class="pf-c-context-selector__toggle-icon">
-                    <i class="fas fa-caret-down" aria-hidden="true"></i>
-                  </span>
-                </button>
-                <div class="pf-c-context-selector__menu" hidden>
-                  <div class="pf-c-context-selector__menu-search">
-                    <div class="pf-c-input-group">
-                      <input
-                        class="pf-c-form-control"
-                        type="search"
-                        placeholder="Search"
-                        id="context-selector-in-masthead-masthead-context-selectortextInput1"
-                        name="context-selector-in-masthead-masthead-context-selectortextInput1"
-                        aria-labelledby="context-selector-in-masthead-masthead-context-selector-search-button"
-                      />
-                      <button
-                        class="pf-c-button pf-m-control"
-                        type="button"
-                        id="context-selector-in-masthead-masthead-context-selector-search-button"
-                        aria-label="Search menu items"
-                      >
-                        <i class="fas fa-search" aria-hidden="true"></i>
-                      </button>
-                    </div>
-                  </div>
-                  <ul class="pf-c-context-selector__menu-list">
-                    <li>
-                      <a
-                        class="pf-c-context-selector__menu-list-item"
-                        href="#"
-                      >Link</a>
-                    </li>
-                    <li>
-                      <button
-                        class="pf-c-context-selector__menu-list-item"
-                        type="button"
-                      >Action</button>
-                    </li>
-                    <li>
-                      <a
-                        class="pf-c-context-selector__menu-list-item pf-m-disabled"
-                        href="#"
-                        aria-disabled="true"
-                        tabindex="-1"
-                      >Disabled link</a>
-                    </li>
-                    <li>
-                      <button
-                        class="pf-c-context-selector__menu-list-item"
-                        type="button"
-                        disabled
-                      >Disabled action</button>
-                    </li>
-                    <li>
-                      <button
-                        class="pf-c-context-selector__menu-list-item"
-                        type="button"
-                      >My project</button>
-                    </li>
-                    <li>
-                      <button
-                        class="pf-c-context-selector__menu-list-item"
-                        type="button"
-                      >OpenShift cluster</button>
-                    </li>
-                    <li>
-                      <button
-                        class="pf-c-context-selector__menu-list-item"
-                        type="button"
-                      >Production Ansible</button>
-                    </li>
-                    <li>
-                      <button
-                        class="pf-c-context-selector__menu-list-item"
-                        type="button"
-                      >AWS</button>
-                    </li>
-                    <li>
-                      <button
-                        class="pf-c-context-selector__menu-list-item"
-                        type="button"
-                      >Azure</button>
-                    </li>
-                    <li>
-                      <button
-                        class="pf-c-context-selector__menu-list-item"
-                        type="button"
-                      >My project</button>
-                    </li>
-                    <li>
-                      <button
-                        class="pf-c-context-selector__menu-list-item"
-                        type="button"
-                      >OpenShift cluster</button>
-                    </li>
-                    <li>
-                      <button
-                        class="pf-c-context-selector__menu-list-item"
-                        type="button"
-                      >Production Ansible</button>
-                    </li>
-                    <li>
-                      <button
-                        class="pf-c-context-selector__menu-list-item"
-                        type="button"
-                      >AWS</button>
-                    </li>
-                    <li>
-                      <button
-                        class="pf-c-context-selector__menu-list-item"
-                        type="button"
-                      >Azure</button>
-                    </li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </header>
-
-  <aside class="pf-c-page__sidebar">
-    <div class="pf-c-page__sidebar-body">
-      <nav
-        class="pf-c-nav"
-        id="context-selector-in-masthead-primary-nav"
-        aria-label="Global"
-      >
-        <ul class="pf-c-nav__list">
-          <li class="pf-c-nav__item">
-            <a
-              href="#"
-              class="pf-c-nav__link pf-m-current"
-              aria-current="page"
-            >System panel</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">Policy</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">Authentication</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">Network services</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">Server</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </aside>
-  <main
-    class="pf-c-page__main"
-    tabindex="-1"
-    id="context-selector-in-masthead-main"
-  >
-    <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
-      <div class="pf-c-page__main-body">
-        <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
-          <ol class="pf-c-breadcrumb__list">
-            <li class="pf-c-breadcrumb__item">
-              <a href="#" class="pf-c-breadcrumb__link">Section home</a>
-            </li>
-            <li class="pf-c-breadcrumb__item">
-              <span class="pf-c-breadcrumb__item-divider">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
-              </span>
-
-              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
-            </li>
-            <li class="pf-c-breadcrumb__item">
-              <span class="pf-c-breadcrumb__item-divider">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
-              </span>
-
-              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
-            </li>
-            <li class="pf-c-breadcrumb__item">
-              <span class="pf-c-breadcrumb__item-divider">
-                <i class="fas fa-angle-right" aria-hidden="true"></i>
-              </span>
-
-              <a
-                href="#"
-                class="pf-c-breadcrumb__link pf-m-current"
-                aria-current="page"
-              >Section landing</a>
-            </li>
-          </ol>
-        </nav>
-      </div>
-    </section>
-
-    <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
-      <div class="pf-c-page__main-body">
-        <div class="pf-c-content">
-          <h1>Main title</h1>
-          <p>This is a demo of the page component.</p>
-        </div>
-      </div>
-    </section>
-
-    <section class="pf-c-page__main-section pf-m-limit-width">
-      <div class="pf-c-page__main-body">
-        <div class="pf-l-gallery pf-m-gutter">
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  </main>
-</div>
-
+```hbs isFullscreen
+{{#> masthead-demo--page masthead-demo--page--id="context-selector-in-masthead"}}
+  {{#> masthead masthead--id=(concat masthead-demo--page--id '-masthead')}}  {{> masthead-toggle}}
+    {{#> masthead-main}}
+      {{#> masthead-brand}}
+        {{> brand
+          brand--attribute='style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"'
+          brand--IsPicture="true"
+          brand--img-url--base='/assets/images/logo__pf--reverse--base.png'
+          brand--img-url='/assets/images/logo__pf--reverse--base.svg'
+          brand--img-url-on-md='/assets/images/logo__pf--reverse-on-md.svg'}}
+      {{/masthead-brand}}
+    {{/masthead-main}}
+    {{#> masthead-content}}
+      {{#> toolbar toolbar--modifier="pf-m-full-height pf-m-static" toolbar--id=(concat masthead--id '-toolbar')}}
+        {{#> toolbar-content}}
+          {{#> toolbar-content-section}}
+            {{#> toolbar-item}}
+              {{> masthead-demo--context-selector}}
+            {{/toolbar-item}}
+          {{/toolbar-content-section}}
+        {{/toolbar-content}}
+      {{/toolbar}}
+    {{/masthead-content}}
+  {{/masthead}}
+{{/masthead-demo--page}}
 ```
 
 ### Context selector in sidebar
 
-```html isFullscreen
-<div class="pf-c-page" id="context-selector-in-sidebar">
-  <header class="pf-c-page__header">
-    <a
-      class="pf-c-skip-to-content pf-c-button pf-m-primary"
-      href="#main-content-context-selector-in-sidebar"
-    >Skip to content</a>
-    <header class="pf-c-masthead" id="context-selector-in-sidebar-masthead">
-      <span class="pf-c-masthead__toggle">
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-label="Global navigation"
-        >
-          <i class="fas fa-bars" aria-hidden="true"></i>
-        </button>
-      </span>
-      <div class="pf-c-masthead__main">
-        <a class="pf-c-masthead__brand" href="#">
-          <img
-            class="pf-c-brand"
-            src="/assets/images/PF-Masthead-Logo.svg"
-            alt="PatternFly logo"
-          />
-        </a>
-      </div>
-      <div class="pf-c-masthead__content">test</div>
-    </header>
-  </header>
-  <div class="pf-c-page__sidebar">
-    <div class="pf-c-page__sidebar-body pf-m-menu">
-      <div class="pf-c-context-selector pf-m-page-insets pf-m-large">
-        <span
-          id="context-selector-collapsed-example-label"
-          hidden
-        >Selected project:</span>
-        <button
-          class="pf-c-context-selector__toggle"
-          aria-expanded="false"
-          id="context-selector-collapsed-example-toggle"
-          aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
-        >
-          <span class="pf-c-context-selector__toggle-text">My project</span>
-          <span class="pf-c-context-selector__toggle-icon">
-            <i class="fas fa-caret-down" aria-hidden="true"></i>
-          </span>
-        </button>
-        <div class="pf-c-context-selector__menu" hidden>
-          <div class="pf-c-context-selector__menu-search">
-            <div class="pf-c-input-group">
-              <input
-                class="pf-c-form-control"
-                type="search"
-                placeholder="Search"
-                id="textInput1"
-                name="textInput1"
-                aria-labelledby="context-selector-collapsed-example-search-button"
-              />
-              <button
-                class="pf-c-button pf-m-control"
-                type="button"
-                id="context-selector-collapsed-example-search-button"
-                aria-label="Search menu items"
-              >
-                <i class="fas fa-search" aria-hidden="true"></i>
-              </button>
-            </div>
-          </div>
-          <ul class="pf-c-context-selector__menu-list">
-            <li>
-              <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >Action</button>
-            </li>
-            <li>
-              <a
-                class="pf-c-context-selector__menu-list-item pf-m-disabled"
-                href="#"
-                aria-disabled="true"
-                tabindex="-1"
-              >Disabled link</a>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-                disabled
-              >Disabled action</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >My project</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >OpenShift cluster</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >Production Ansible</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >AWS</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >Azure</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >My project</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >OpenShift cluster</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >Production Ansible</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >AWS</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >Azure</button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    <div class="pf-c-page__sidebar-body">
-      <nav
-        class="pf-c-nav"
-        id="context-selector-in-sidebar-primary-nav"
-        aria-label="Global"
-      >
-        <ul class="pf-c-nav__list">
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">System panel</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a
-              href="#"
-              class="pf-c-nav__link pf-m-current"
-              aria-current="page"
-            >Policy</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">Authentication</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">Network services</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">Server</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
-  <main
-    class="pf-c-page__main"
-    tabindex="-1"
-    id="main-content-context-selector-in-sidebar"
-  >
-    <section
-      class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom"
-    >
-      <div class="pf-c-page__main-body">
-        <div class="pf-c-content">
-          <h1>Main title</h1>
-          <p>This is a demo of the page component.</p>
-        </div>
-      </div>
-    </section>
-    <section
-      class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
-    >
-      <div class="pf-c-page__main-body">
-        <div class="pf-l-gallery pf-m-gutter">
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    <section
-      class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
-    >
-      <div class="pf-c-page__main-body">
-        <p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
-      </div>
-    </section>
-  </main>
-</div>
-
+```hbs isFullscreen
+{{> page-demo-masthead-component page-demo-default--id="context-selector-in-sidebar" page-demo-masthead-component--HasMenu="true"}}
 ```
 
 ### Context selector in sidebar expanded
 
-```html isFullscreen
-<div class="pf-c-page" id="context-selector-in-sidebar-expanded">
-  <header class="pf-c-page__header">
-    <a
-      class="pf-c-skip-to-content pf-c-button pf-m-primary"
-      href="#main-content-context-selector-in-sidebar-expanded"
-    >Skip to content</a>
-    <header
-      class="pf-c-masthead"
-      id="context-selector-in-sidebar-expanded-masthead"
-    >
-      <span class="pf-c-masthead__toggle">
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          aria-label="Global navigation"
-        >
-          <i class="fas fa-bars" aria-hidden="true"></i>
-        </button>
-      </span>
-      <div class="pf-c-masthead__main">
-        <a class="pf-c-masthead__brand" href="#">
-          <img
-            class="pf-c-brand"
-            src="/assets/images/PF-Masthead-Logo.svg"
-            alt="PatternFly logo"
-          />
-        </a>
-      </div>
-      <div class="pf-c-masthead__content">test</div>
-    </header>
-  </header>
-  <div class="pf-c-page__sidebar">
-    <div class="pf-c-page__sidebar-body pf-m-menu">
-      <div
-        class="pf-c-context-selector pf-m-expanded pf-m-page-insets pf-m-large"
-      >
-        <span
-          id="context-selector-collapsed-example-label"
-          hidden
-        >Selected project:</span>
-        <button
-          class="pf-c-context-selector__toggle"
-          aria-expanded="true"
-          id="context-selector-collapsed-example-toggle"
-          aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
-        >
-          <span class="pf-c-context-selector__toggle-text">My project</span>
-          <span class="pf-c-context-selector__toggle-icon">
-            <i class="fas fa-caret-down" aria-hidden="true"></i>
-          </span>
-        </button>
-        <div class="pf-c-context-selector__menu">
-          <div class="pf-c-context-selector__menu-search">
-            <div class="pf-c-input-group">
-              <input
-                class="pf-c-form-control"
-                type="search"
-                placeholder="Search"
-                id="textInput1"
-                name="textInput1"
-                aria-labelledby="context-selector-collapsed-example-search-button"
-              />
-              <button
-                class="pf-c-button pf-m-control"
-                type="button"
-                id="context-selector-collapsed-example-search-button"
-                aria-label="Search menu items"
-              >
-                <i class="fas fa-search" aria-hidden="true"></i>
-              </button>
-            </div>
-          </div>
-          <ul class="pf-c-context-selector__menu-list">
-            <li>
-              <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >Action</button>
-            </li>
-            <li>
-              <a
-                class="pf-c-context-selector__menu-list-item pf-m-disabled"
-                href="#"
-                aria-disabled="true"
-                tabindex="-1"
-              >Disabled link</a>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-                disabled
-              >Disabled action</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >My project</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >OpenShift cluster</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >Production Ansible</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >AWS</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >Azure</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >My project</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >OpenShift cluster</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >Production Ansible</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >AWS</button>
-            </li>
-            <li>
-              <button
-                class="pf-c-context-selector__menu-list-item"
-                type="button"
-              >Azure</button>
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-    <div class="pf-c-page__sidebar-body">
-      <nav
-        class="pf-c-nav"
-        id="context-selector-in-sidebar-expanded-primary-nav"
-        aria-label="Global"
-      >
-        <ul class="pf-c-nav__list">
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">System panel</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a
-              href="#"
-              class="pf-c-nav__link pf-m-current"
-              aria-current="page"
-            >Policy</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">Authentication</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">Network services</a>
-          </li>
-          <li class="pf-c-nav__item">
-            <a href="#" class="pf-c-nav__link">Server</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </div>
-  <main
-    class="pf-c-page__main"
-    tabindex="-1"
-    id="main-content-context-selector-in-sidebar-expanded"
-  >
-    <section
-      class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom"
-    >
-      <div class="pf-c-page__main-body">
-        <div class="pf-c-content">
-          <h1>Main title</h1>
-          <p>This is a demo of the page component.</p>
-        </div>
-      </div>
-    </section>
-    <section
-      class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
-    >
-      <div class="pf-c-page__main-body">
-        <div class="pf-l-gallery pf-m-gutter">
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-          <div class="pf-l-gallery__item">
-            <div class="pf-c-card">
-              <div class="pf-c-card__body">This is a card</div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-    <section
-      class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
-    >
-      <div class="pf-c-page__main-body">
-        <p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
-      </div>
-    </section>
-  </main>
-</div>
-
+```hbs isFullscreen
+{{> page-demo-masthead-component page-demo-default--id="context-selector-in-sidebar-expanded" page-demo-masthead-component--HasMenu="true" page-demo-masthead-component--MenuIsExpanded="true"}}
 ```
 
 ### Context selector in page content
@@ -911,7 +75,6 @@ section: components
         />
       </a>
     </div>
-
     <div class="pf-c-page__header-tools">
       <div class="pf-c-page__header-tools-group">
         <div
@@ -933,7 +96,7 @@ section: components
             type="button"
             aria-label="Help"
           >
-            <i class="pf-icon pf-icon-help" aria-hidden="true"></i>
+            <i class="fas fa-question-circle" aria-hidden="true"></i>
           </button>
         </div>
       </div>
@@ -1325,7 +488,7 @@ section: components
       <div class="pf-c-page__main-body">
         <div class="pf-c-content">
           <h1>Main title</h1>
-          <p>This is a demo of the page component.</p>
+          <p>This is a full page demo.</p>
         </div>
       </div>
     </section>