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

**Features**

- add CSS parts
- add static `toast(text)` method
  - allows users to create an ephemeral toast via JS

**Fixes**

- compose UI events
  - rename `pfeEvent` to `deprecatedCustomEvent`
- add {{version}} to element classes

**Docs**
- 2.0 [pfe-toast] update docs (#1826)
  - pfe-toast update docs
  - add .no-header-styles opt-out class for headers
- rearrange docs urls
- inline docs
- refactor docs page
- add changeset
- use pfe-styles

**Tests**

- e2e tests with page object model
- build demo with optional shadowroot

Co-Authored-By: Michael Potter <[email protected]>
Co-Authored-By: Steven Spriggs <[email protected]>

Author: 3 people

.changeset/toast.md

@@ -0,0 +1,18 @@
+---
+"@patternfly/pfe-toast": major
+---
+
+## 🔥 Migrate to Lit
+
+This release migrates `<pfe-toast>` to LitElement.
+
+### NEW: CSS Shadow Parts!
+- Adds `container`, `content`, `close-button` CSS parts
+
+### Breaking Changes
+- Initial render is now [asynchronous](https://lit.dev/docs/components/lifecycle/#reactive-update-cycle).
+  If your code assumes that shadow DOM is ready once the element is constructed, update it to `await element.updateComplete`
+- Deprecates `pfe-toast:open` event. Use `open`
+- Deprecates `pfe-toast:close` event. Use `close`
+
+See [docs](https://patternflyelements.org/components/toast/) for more info

docs/main.css

@@ -57,7 +57,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;
@@ -632,7 +632,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

@@ -1,87 +1,34 @@
-# PFElements Toast Element
+# PatternFly Elements Toast
+     
+`pfe-toast` is a self-contained alert that is hidden on page load and slides in/out of the view when programmatically opened/closed.
 
-## Overview
+Read more about Toast in the [PatternFly Elements Toast documentation](https://patternflyelements.org/components/toast)
 
-`pfe-toast` is a self-contained alert that is hidden on page load and slides in/out of the view when programmatically opened/closed.
+##  Installation
 
-## Usage
+Load `<pfe-toast>` via CDN:
 
 ```html
-<pfe-toast>
-    <p>You've been successfully toasted!</p>
-</pfe-toast>
+<script src="https://unpkg.com/@patternfly/pfe-toast?module"></script>
 ```
 
-## Slots
-
-### Default slot
-The default slot can contain any type of content.
-
-## Attributes
-
-- `auto-dismiss`: This is an optional attribute string that you can provide to automatically dismiss the alert. The auto-dismiss delay value can be provided in seconds or in milliseconds. For example, `auto-dismiss="3s"` and `auto-dismiss="3000ms"` will dismiss the toast alert after three seconds. If no delay value is provided, it will default to eight seconds.
-- `close-label`: This is an optional attribute string that you can provide that sets the aria-label on the close button in the shadow DOM. The aria-label attribute will default to "Close".
-
-## Variables
+Or, if you are using [NPM](https://npm.im), install it
 
-- Max width: Allows you to specify the maximum width of the component. **Variable name:** `--pfe-toast--MaxWidth`.
-- Min width: Allows you to specify the minimum width of the component. **Variable name:** `--pfe-toast--MinWidth`.
-- Top: Allows you to customize the distance between the component and the top of its container. **Variable name:** `--pfe-toast--Top`.
-- Right: Allows you to customize the distance between the component and the right of its container. **Variable name:** ` --pfe-toast--Right`.
-
-## API
-
-### open
-
-Manually opens a toast. Return the toast that has been opened.
-
-```
-document.querySelector("pfe-toast").open();
+```bash
+npm install @patternfly/pfe-toast
 ```
 
-### close
+Then once installed, import it to your application:
 
-Manually closes a toast. Returns the toast that has been closed.
-
-```
-document.querySelector("pfe-toast").close();
+```js
+import '@patternfly/pfe-toast';
 ```
 
-### toggle
-
-Manually toggles a toast. Returns the toast that has been toggled.
+## Usage
 
+```html
+<pfe-toast>
+  <p>You've been successfully toasted!</p>
+</pfe-toast>
 ```
-document.querySelector("pfe-toast").toggle();
-```
-
-## Events
-
-### pfe-toast:open
-Fires when a toast is manually openned.
-
-
-### pfe-toast:close
-Fires when a toast is manually closed.
-
-## Test
-
-    npm run test
-
-## Build
-
-    npm run build
-
-## Demo
-
-From the PFElements root directory, run:
-
-    npm start
-
-## Code style
-
-Toast (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.
 
-[prettier]: https://github.com/prettier/prettier/
-[prettier-ed]: https://prettier.io/docs/en/editors.html
-[web-component-tester]: https://github.com/Polymer/web-component-tester

elements/pfe-toast/.editorconfig

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

elements/pfe-toast/.npmignore

@@ -0,0 +1,39 @@
+<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-styles/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-band color="lightest" size="small">
+  <h2 slot="header">Toast using JS</h2>
+  <label for="content">Toast Content</label>
+  <input id="content" value="Toast this message"/>
+  <pfe-cta priority="secondary"><button id="js-toast">Toast It</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/README.md

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