feat(toast)!: migrate pfe-toast to lit

fix(toast): compose UI events

chore: 2.0 [pfe-toast] update docs (#1826)

* chore: pfe-toast update docs

* chore:docs add .no-header-styles opt-out class for headers

* style(toast): lint

test(pfe-toast): e2e tests

test(pfe-toast): e2e tests with page object model

test(pfe-toast): build demo with optional shadowroot

docs(pfe-toast): rearrange docs urls

Co-Authored-by: Michael Potter <[email protected]>

Author: bennypowers

docs/main.css

@@ -52,7 +52,7 @@ p.subtitle {
 pfe-band.header h1 {
   margin: 0;
 }
-pfe-band h2[id] {
+pfe-band h2[id]:not(.no-header-styles) {
   font-size: 1.5rem;
   line-height: 1.9375rem;
   font-weight: bold;
@@ -627,7 +627,7 @@ blockquote {
 }
 
 @media (min-width: 1200px) {
-  pfe-band h2[id] {
+  pfe-band h2[id]:not(.no-header-styles) {
     font-size: 2rem;
     line-height: 2.3125rem;
   }

elements/pfe-toast/.babelrc

@@ -0,0 +1,5 @@
+import { pfeCustomElementsManifestConfig } from '@patternfly/pfe-tools/custom-elements-manifest.js';
+
+export default pfeCustomElementsManifestConfig({
+  globs: ['pfe-*.ts'],
+});

elements/pfe-toast/.editorconfig

@@ -0,0 +1,32 @@
+<link rel="stylesheet" href="/core/pfe-styles/red-hat-font.min.css">
+<link rel="stylesheet" href="/core/pfe-styles/pfe-base.css">
+<link rel="stylesheet" href="/core/pfe-styles/pfe-context.css">
+<link rel="stylesheet" href="/core/pfe-styles/pfe-layouts.css">
+<link rel="stylesheet" href="/core/pfe-core/pfe.css">
+
+<pfe-band color="lightest" size="small">
+  <pfe-cta priority="secondary"><button data-toast="toast1">Toggle example one</button></pfe-cta>
+  <pfe-cta priority="secondary"><button data-toast="toast2">Toggle example two</button></pfe-cta>
+  <pfe-cta priority="secondary"><button data-toast="toast3">Toggle example three</button></pfe-cta>
+</pfe-band>
+
+<pfe-toast auto-dismiss="3s" id="toast1">
+  <p>Lorem ipsum dolor sit amet.</p>
+</pfe-toast>
+
+<pfe-toast id="toast2">
+  <p>Lorem ipsum dolor sit amet.</p>
+  <pfe-cta priority="secondary"><button>Button 1</button></pfe-cta>
+  <pfe-cta priority="secondary"><button>Button 2</button></pfe-cta>
+</pfe-toast>
+
+<pfe-toast id="toast3" aria-label="Custom alert dialog" close-label="Cerrar">
+  <h2>Lorem ipsum dolor sit amet</h2>
+  <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+    clita
+    kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
+    sadipscing elitr.</p>
+  <pfe-cta priority="secondary"><button>Button 1</button></pfe-cta>
+  <pfe-cta priority="secondary"><button>Button 2</button></pfe-cta>
+</pfe-toast>

elements/pfe-toast/.npmignore

@@ -0,0 +1,11 @@
+import '@patternfly/pfe-band';
+import '@patternfly/pfe-cta';
+import '@patternfly/pfe-toast';
+
+const root = document.querySelector('[data-demo="pfe-toast"]')?.shadowRoot ?? document;
+
+for (const button of root.querySelectorAll('[data-toast]')) {
+  button.addEventListener('click', function(event) {
+    root.getElementById(event.target.dataset.toast).toggle();
+  });
+}