@patternfly/patternfly 4.176.3 → 4.179.0

package/docs/demos/Alert/examples/Alert.md

@@ -5,64 +5,370 @@ section: components
 
 ### Toast
 
-```hbs isFullscreen
-{{> page-demo-default page-demo-default--id="alert-toast-example"}}
-{{#> alert-group alert-group--modifier="pf-m-toast"}}
-  {{#> alert-item}}
-    {{#> alert alert--modifier="pf-m-success" alert--attribute='aria-label="Success alert"'}}
-      {{#> alert-icon alert-icon--type="check-circle"}}
-      {{/alert-icon}}
-      {{#> alert-title}}
-        {{#> screen-reader}}Success alert:{{/screen-reader}}
+```html isFullscreen
+<div class="pf-c-page" id="alert-toast-example">
+  <a
+    class="pf-c-skip-to-content pf-c-button pf-m-primary"
+    href="#main-content-alert-toast-example"
+  >Skip to content</a>
+  <header class="pf-c-page__header">
+    <div class="pf-c-page__header-brand">
+      <div class="pf-c-page__header-brand-toggle">
+        <button
+          class="pf-c-button pf-m-plain"
+          type="button"
+          id="alert-toast-example-nav-toggle"
+          aria-label="Global navigation"
+          aria-expanded="true"
+          aria-controls="alert-toast-example-primary-nav"
+        >
+          <i class="fas fa-bars" aria-hidden="true"></i>
+        </button>
+      </div>
+      <a href="#" class="pf-c-page__header-brand-link">
+        <img
+          class="pf-c-brand"
+          src="/assets/images/PF-Masthead-Logo.svg"
+          alt="PatternFly logo"
+        />
+      </a>
+    </div>
+    <div class="pf-c-page__header-tools">
+      <div class="pf-c-page__header-tools-group">
+        <div
+          class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
+        >
+          <button
+            class="pf-c-button pf-m-plain"
+            type="button"
+            aria-label="Settings"
+          >
+            <i class="fas fa-cog" aria-hidden="true"></i>
+          </button>
+        </div>
+        <div
+          class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
+        >
+          <button
+            class="pf-c-button pf-m-plain"
+            type="button"
+            aria-label="Help"
+          >
+            <i class="fas fa-question-circle" aria-hidden="true"></i>
+          </button>
+        </div>
+      </div>
+      <div class="pf-c-page__header-tools-group">
+        <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
+          <div class="pf-c-dropdown">
+            <button
+              class="pf-c-dropdown__toggle pf-m-plain"
+              id="alert-toast-example-dropdown-kebab-1-button"
+              aria-expanded="false"
+              type="button"
+              aria-label="Actions"
+            >
+              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+            </button>
+            <ul
+              class="pf-c-dropdown__menu pf-m-align-right"
+              aria-labelledby="alert-toast-example-dropdown-kebab-1-button"
+              hidden
+            >
+              <li>
+                <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+              </li>
+              <li>
+                <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+              </li>
+              <li>
+                <a
+                  class="pf-c-dropdown__menu-item pf-m-disabled"
+                  href="#"
+                  aria-disabled="true"
+                  tabindex="-1"
+                >Disabled link</a>
+              </li>
+              <li>
+                <button
+                  class="pf-c-dropdown__menu-item"
+                  type="button"
+                  disabled
+                >Disabled action</button>
+              </li>
+              <li class="pf-c-divider" role="separator"></li>
+              <li>
+                <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div
+          class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
+        >
+          <div class="pf-c-dropdown">
+            <button
+              class="pf-c-dropdown__toggle pf-m-plain"
+              id="alert-toast-example-dropdown-kebab-2-button"
+              aria-expanded="false"
+              type="button"
+            >
+              <span class="pf-c-dropdown__toggle-text">John Smith</span>
+              <span class="pf-c-dropdown__toggle-icon">
+                <i class="fas fa-caret-down" aria-hidden="true"></i>
+              </span>
+            </button>
+            <ul
+              class="pf-c-dropdown__menu"
+              aria-labelledby="alert-toast-example-dropdown-kebab-2-button"
+              hidden
+            >
+              <li>
+                <a class="pf-c-dropdown__menu-item" href="#">Link</a>
+              </li>
+              <li>
+                <button class="pf-c-dropdown__menu-item" type="button">Action</button>
+              </li>
+              <li>
+                <a
+                  class="pf-c-dropdown__menu-item pf-m-disabled"
+                  href="#"
+                  aria-disabled="true"
+                  tabindex="-1"
+                >Disabled link</a>
+              </li>
+              <li>
+                <button
+                  class="pf-c-dropdown__menu-item"
+                  type="button"
+                  disabled
+                >Disabled action</button>
+              </li>
+              <li class="pf-c-divider" role="separator"></li>
+              <li>
+                <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <img
+        class="pf-c-avatar"
+        src="/assets/images/img_avatar.svg"
+        alt="Avatar image"
+      />
+    </div>
+  </header>
+  <div class="pf-c-page__sidebar">
+    <div class="pf-c-page__sidebar-body">
+      <nav
+        class="pf-c-nav"
+        id="alert-toast-example-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-alert-toast-example"
+  >
+    <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 full page demo.</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>
+<ul class="pf-c-alert-group pf-m-toast">
+  <li class="pf-c-alert-group__item">
+    <div class="pf-c-alert pf-m-success" aria-label="Success alert">
+      <div class="pf-c-alert__icon">
+        <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
+      </div>
+      <p class="pf-c-alert__title">
+        <span class="pf-screen-reader">Success alert:</span>
         Newest notification
-      {{/alert-title}}
-      {{#> alert-action}}
-        {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close success alert: Newest notification"'}}
+      </p>
+      <div class="pf-c-alert__action">
+        <button
+          class="pf-c-button pf-m-plain"
+          type="button"
+          aria-label="Close success alert: Newest notification"
+        >
           <i class="fas fa-times" aria-hidden="true"></i>
-        {{/button}}
-      {{/alert-action}}
-      {{#> alert-description}}
-        This is a description of the notification content.
-      {{/alert-description}}
-    {{/alert}}
-  {{/alert-item}}
-  {{#> alert-item}}
-    {{#> alert alert--modifier="pf-m-warning" alert--attribute='aria-label="Warning alert"'}}
-      {{#> alert-icon alert-icon--type="exclamation-triangle"}}
-      {{/alert-icon}}
-      {{#> alert-title}}
-        {{#> screen-reader}}Info alert:{{/screen-reader}}
+        </button>
+      </div>
+      <div class="pf-c-alert__description">
+        <p>This is a description of the notification content.</p>
+      </div>
+    </div>
+  </li>
+  <li class="pf-c-alert-group__item">
+    <div class="pf-c-alert pf-m-warning" aria-label="Warning alert">
+      <div class="pf-c-alert__icon">
+        <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
+      </div>
+      <p class="pf-c-alert__title">
+        <span class="pf-screen-reader">Info alert:</span>
         Second newest notification
-      {{/alert-title}}
-      {{#> alert-action}}
-        {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close warning alert: second newest notification"'}}
+      </p>
+      <div class="pf-c-alert__action">
+        <button
+          class="pf-c-button pf-m-plain"
+          type="button"
+          aria-label="Close warning alert: second newest notification"
+        >
           <i class="fas fa-times" aria-hidden="true"></i>
-        {{/button}}
-      {{/alert-action}}
-      {{#> alert-description}}
-        This is a description of the notification content.
-      {{/alert-description}}
-    {{/alert}}
-  {{/alert-item}}
-  {{#> alert-item}}
-    {{#> alert alert--modifier="pf-m-danger" alert--attribute='aria-label="Danger alert"'}}
-      {{#> alert-icon alert-icon--type="exclamation-circle"}}
-      {{/alert-icon}}
-      {{#> alert-title}}
-        {{#> screen-reader}}Last notification{{/screen-reader}}
+        </button>
+      </div>
+      <div class="pf-c-alert__description">
+        <p>This is a description of the notification content.</p>
+      </div>
+    </div>
+  </li>
+  <li class="pf-c-alert-group__item">
+    <div class="pf-c-alert pf-m-danger" aria-label="Danger alert">
+      <div class="pf-c-alert__icon">
+        <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+      </div>
+      <p class="pf-c-alert__title">
+        <span class="pf-screen-reader">Last notification</span>
         Last notification
-      {{/alert-title}}
-      {{#> alert-action}}
-        {{#> button button--modifier="pf-m-plain" button--attribute='aria-label="Close danger alert: Last notification"'}}
+      </p>
+      <div class="pf-c-alert__action">
+        <button
+          class="pf-c-button pf-m-plain"
+          type="button"
+          aria-label="Close danger alert: Last notification"
+        >
           <i class="fas fa-times" aria-hidden="true"></i>
-        {{/button}}
-      {{/alert-action}}
-      {{#> alert-description}}
-        This is a description of the notification content.
-      {{/alert-description}}
-    {{/alert}}
-  {{/alert-item}}
-{{/alert-group}}
+        </button>
+      </div>
+      <div class="pf-c-alert__description">
+        <p>This is a description of the notification content.</p>
+      </div>
+    </div>
+  </li>
+</ul>
+
 ```
 
 ### Inline Alert in Horizontal Form
@@ -116,7 +422,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>
@@ -489,7 +795,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>