feat(alert): add pf-alert

.changeset/cold-cars-relate.md

@@ -0,0 +1,8 @@
+---
+"@patternfly/pfe-core": minor
+---
+
+`SlotController`: 
+
+- Add `isEmpty` method to check if a slot is empty.  If no slot name is provided it will check the default slot. (#2603)
+- `hasSlotted` method now returns default slot if no slot name is provided. (#2603)

core/pfe-core/controllers/slot-controller.ts

@@ -41,15 +41,16 @@ function isObjectConfigSpread(config: ([SlotsConfig] | (string | null)[])): conf
  * for the default slot, look for direct children not assigned to a slot
  */
 const isSlot =
-  <T extends Element = Element>(n: string | typeof SlotController.anonymous) =>
+  <T extends Element = Element>(n: string | typeof SlotController.default) =>
     (child: Element): child is T =>
-        n === SlotController.anonymous ? !child.hasAttribute('slot')
+        n === SlotController.default ? !child.hasAttribute('slot')
       : child.getAttribute('slot') === n;
 
 export class SlotController implements ReactiveController {
-  public static anonymous = Symbol('anonymous slot');
+  public static default = Symbol('default slot');
+  public static anonymous = this.default;
 
-  #nodes = new Map<string | typeof SlotController.anonymous, Slot>();
+  #nodes = new Map<string | typeof SlotController.default, Slot>();
 
   #logger: Logger;
 
@@ -105,22 +106,6 @@ export class SlotController implements ReactiveController {
     this.#mo.disconnect();
   }
 
-  /**
-   * Returns a boolean statement of whether or not any of those slots exists in the light DOM.
-   *
-   * @param {String|Array} name The slot name.
-   * @example this.hasSlotted("header");
-   */
-  hasSlotted(...names: string[]): boolean {
-    if (!names.length) {
-      this.#logger.warn(`Please provide at least one slot name for which to search.`);
-      return false;
-    } else {
-      return names.some(x =>
-        this.#nodes.get(x)?.hasContent ?? false);
-    }
-  }
-
   /**
    * Given a slot name or slot names, returns elements assigned to the requested slots as an array.
    * If no value is provided, it returns all children not assigned to a slot (without a slot attribute).
@@ -142,13 +127,40 @@ export class SlotController implements ReactiveController {
    */
   getSlotted<T extends Element = Element>(...slotNames: string[]): T[] {
     if (!slotNames.length) {
-      return (this.#nodes.get(SlotController.anonymous)?.elements ?? []) as T[];
+      return (this.#nodes.get(SlotController.default)?.elements ?? []) as T[];
     } else {
       return slotNames.flatMap(slotName =>
         this.#nodes.get(slotName)?.elements ?? []) as T[];
     }
   }
 
+  /**
+   * Returns a boolean statement of whether or not any of those slots exists in the light DOM.
+   *
+   * @param names The slot names to check.
+   * @example this.hasSlotted('header');
+   */
+  hasSlotted(...names: (string | null | undefined)[]): boolean {
+    const { anonymous } = SlotController;
+    const slotNames = Array.from(names, x => x == null ? anonymous : x);
+    if (!slotNames.length) {
+      slotNames.push(anonymous);
+    }
+    return slotNames.some(x => this.#nodes.get(x)?.hasContent ?? false);
+  }
+
+  /**
+   * Whether or not all the requested slots are empty.
+   *
+   * @param  slots The slot name.  If no value is provided, it returns the default slot.
+   * @example this.isEmpty('header', 'footer');
+   * @example this.isEmpty();
+   * @returns {Boolean}
+   */
+  isEmpty(...names: (string | null | undefined)[]): boolean {
+    return !this.hasSlotted(...names);
+  }
+
   #onSlotChange = (event: Event & { target: HTMLSlotElement }) => {
     const slotName = event.target.name;
     this.#initSlot(slotName);
@@ -168,13 +180,13 @@ export class SlotController implements ReactiveController {
     this.host.requestUpdate();
   };
 
-  #getChildrenForSlot<T extends Element = Element>(name: string | typeof SlotController.anonymous): T[] {
+  #getChildrenForSlot<T extends Element = Element>(name: string | typeof SlotController.default): T[] {
     const children = Array.from(this.host.children) as T[];
     return children.filter(isSlot(name));
   }
 
   #initSlot = (slotName: string | null) => {
-    const name = slotName || SlotController.anonymous;
+    const name = slotName || SlotController.default;
     const elements = this.#nodes.get(name)?.slot?.assignedElements?.() ?? this.#getChildrenForSlot(name);
     const selector = slotName ? `slot[name="${slotName}"]` : 'slot:not([name])';
     const slot = this.host.shadowRoot?.querySelector?.<HTMLSlotElement>(selector) ?? null;

elements/package.json

@@ -16,6 +16,7 @@
     "./pf-accordion/pf-accordion-header.js": "./pf-accordion/pf-accordion-header.js",
     "./pf-accordion/pf-accordion-panel.js": "./pf-accordion/pf-accordion-panel.js",
     "./pf-accordion/pf-accordion.js": "./pf-accordion/pf-accordion.js",
+    "./pf-alert/pf-alert.js": "./pf-alert/pf-alert.js",
     "./pf-avatar/BaseAvatar.js": "./pf-avatar/BaseAvatar.js",
     "./pf-avatar/pf-avatar.js": "./pf-avatar/pf-avatar.js",
     "./pf-badge/BaseBadge.js": "./pf-badge/BaseBadge.js",

elements/pf-alert/README.md

@@ -0,0 +1,28 @@
+# PatternFly Elements Alert
+
+`<pf-alert>` is a web component that provides a standard alert interface for displaying important messages to users.
+
+## Installation
+
+Load `<pf-alert>` via CDN:
+
+```html
+<script src="https://jspm.dev/@patternfly/elements/pf-alert/pf-alert"></script>
+```
+
+Or, if you are using [NPM](https://npm.im), install it
+
+```bash
+npm install @patternfly/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@patternfly/elements/pf-alert/pf-alert.js';
+```
+
+
+```html
+<pf-alert variant="info" header="Info alert title"></pf-alert>
+```

elements/pf-alert/demo/custom-icons.html

@@ -0,0 +1,17 @@
+<link rel="stylesheet" href="demo.css"><script type="module" src="pf-alert.js"></script>
+
+<pf-alert header="Custom icon">
+  <pf-icon slot="icon" set="fas" icon="users" loading="idle"></pf-icon>
+</pf-alert>
+<pf-alert header="Custom info icon" variant="info">
+  <pf-icon slot="icon" set="fas" icon="box" loading="idle"></pf-icon>
+</pf-alert>
+<pf-alert header="Custom success icon" variant="success">
+  <pf-icon slot="icon" set="fas" icon="database" loading="idle"></pf-icon>
+</pf-alert>
+<pf-alert header="Custom warning icon" variant="warning">
+  <pf-icon slot="icon" set="fas" icon="server" loading="idle"></pf-icon>
+</pf-alert>
+<pf-alert header="Custom danger icon" variant="danger">
+  <pf-icon slot="icon" set="fas" icon="laptop" loading="idle"></pf-icon>
+</pf-alert>

elements/pf-alert/demo/demo.css

@@ -0,0 +1,15 @@
+pf-alert {
+  padding: 0.5rem;
+  display: block;
+}
+
+pf-button {
+  display: block;
+  padding-block: 1em;
+}
+
+#timeout-alerts {
+  min-height: 200px;
+  border: 1px solid #000;
+  margin: 0.5rem;
+}

elements/pf-alert/demo/inline.html

@@ -0,0 +1,21 @@
+<link rel="stylesheet" href="demo.css"><script type="module" src="pf-alert.js"></script>
+
+<h2>
+    Inline
+</h2>
+
+<pf-alert header="Default inline" inline></pf-alert>
+<pf-alert variant="info" header="Info inline" inline></pf-alert>
+<pf-alert variant="success" header="Success inline" inline></pf-alert>
+<pf-alert variant="warning" header="Warning inline" inline></pf-alert>
+<pf-alert variant="danger" header="Danger inline" inline></pf-alert>
+
+<h2>
+    Inline Plain
+</h2>
+
+<pf-alert header="Default inline" inline plain></pf-alert>
+<pf-alert variant="info" header="Info inline" inline plain></pf-alert>
+<pf-alert variant="success" header="Success inline" inline plain></pf-alert>
+<pf-alert variant="warning" header="Warning inline" inline plain></pf-alert>
+<pf-alert variant="danger" header="Danger inline" inline plain></pf-alert>

elements/pf-alert/demo/kitchen-sink.html

@@ -0,0 +1,123 @@
+<link rel="stylesheet" href="demo.css"><script type="module" src="pf-alert.js"></script>
+
+<pf-alert header="Default alert title"></pf-alert>
+<pf-alert variant="info" header="Info alert title"></pf-alert>
+<pf-alert variant="success" header="Success alert title"></pf-alert>
+<pf-alert variant="warning" header="Warning alert title"></pf-alert>
+<pf-alert variant="danger" header="Danger alert title"></pf-alert>
+
+<h2>
+    Alert Variations
+</h2>
+
+<pf-alert header="Success alert title" variant="success" dismissable>
+  <p>Success alert description. This should tell the user more information about the alert.</p>
+  <button slot="actions">View details</button>
+  <button slot="actions">Ignore</button>
+</pf-alert>
+
+<pf-alert header="Success alert title" variant="success" dismissable>
+  <p>Success alert description. This should tell the user more information about the alert. <a href="#">This is a link.</a></p>
+  <p>Success alert description. This should tell the user more information about the alert. <a href="#">This is a link.</a></p>
+</pf-alert>
+
+<pf-alert header="Success alert title" variant="success" dismissable>
+  <button slot="actions">View details</button>
+  <button slot="actions">Ignore</button>
+</pf-alert>
+
+<pf-alert header="Success alert title" variant="success" dismissable>
+
+  <p>Success alert description. This should tell the user more information about the alert. <a href="#">This is a link.</a></p>
+  <p>Success alert description. This should tell the user more information about the alert. <a href="#">This is a link.</a></p>
+  <button slot="actions">View details</button>
+  <button slot="actions">Ignore</button>
+  <button slot="actions">Ignore</button>
+  <button slot="actions">Ignore</button>
+  <button slot="actions">Ignore</button>
+  <button slot="actions">Ignore</button>
+</pf-alert>
+
+<pf-alert header="Success alert title" variant="success" dismissable></pf-alert>
+
+<h2>
+    Default Icons
+</h2>
+
+<pf-alert header="Custom icon">
+  <pf-icon slot="icon" set="fas" icon="users" loading="idle"></pf-icon>
+</pf-alert>
+<pf-alert header="Custom info icon" variant="info">
+  <pf-icon slot="icon" set="fas" icon="box" loading="idle"></pf-icon>
+</pf-alert>
+<pf-alert header="Custom success icon" variant="success">
+  <pf-icon slot="icon" set="fas" icon="database" loading="idle"></pf-icon>
+</pf-alert>
+<pf-alert header="Custom warning icon" variant="warning">
+  <pf-icon slot="icon" set="fas" icon="server" loading="idle"></pf-icon>
+</pf-alert>
+<pf-alert header="Custom danger icon" variant="danger">
+  <pf-icon slot="icon" set="fas" icon="laptop" loading="idle"></pf-icon>
+</pf-alert>
+
+<h2>
+    Plain
+</h2>
+
+<pf-alert header="Default plain" plain></pf-alert>
+<pf-alert variant="info" header="Info plain" plain></pf-alert>
+<pf-alert variant="success" header="Success plain" plain dismissable>
+  <p>Success alert description. This should tell the user more information about the alert. <a href="#">This is a link.</a></p>
+  <button slot="actions">Ignore</button>
+</pf-alert>
+<pf-alert variant="warning" header="Warning plain" plain></pf-alert>
+<pf-alert variant="danger" header="Danger plain" plain></pf-alert>
+
+<h2>
+    Inline
+</h2>
+
+<pf-alert header="Default inline" inline></pf-alert>
+<pf-alert variant="info" header="Info inline" inline></pf-alert>
+<pf-alert variant="success" header="Success inline" inline></pf-alert>
+<pf-alert variant="warning" header="Warning inline" inline></pf-alert>
+<pf-alert variant="danger" header="Danger inline" inline></pf-alert>
+
+<h2>
+    Plain
+</h2>
+
+<pf-alert header="Default inline" plain></pf-alert>
+<pf-alert variant="info" header="Info inline" plain></pf-alert>
+<pf-alert variant="success" header="Success inline" plain></pf-alert>
+<pf-alert variant="warning" header="Warning inline" plain></pf-alert>
+<pf-alert variant="danger" header="Danger inline" plain></pf-alert>
+
+<h2>
+    Inline Plain
+</h2>
+
+<pf-alert header="Default inline" inline plain></pf-alert>
+<pf-alert variant="info" header="Info inline" inline plain></pf-alert>
+<pf-alert variant="success" header="Success inline" inline plain></pf-alert>
+<pf-alert variant="warning" header="Warning inline" inline plain></pf-alert>
+<pf-alert variant="danger" header="Danger inline" inline plain></pf-alert>
+
+<h2>
+  Truncated Title
+</h2>
+
+<pf-alert style="width:100px;" truncate-title header="It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of light, it was the season of darkness, it was the spring of hope, it was the winter of despair."></pf-alert>
+
+<h2>
+  Timeout
+</h2>
+
+<pf-button id="create-timeout-alert">Create default timeout alert</pf-button>
+<pf-button id="create-timeout-inline-alert">Create inline timeout alert</pf-button>
+
+<input type="range" id="timeout-range" min="0" max="10000" step="100" value="1000" />
+<label for="timeout-range">Timeout: <span id="timeout-value">1000</span>ms</label>
+<pf-button id="create-Default-timeout-alert">Create Default timeout alert</pf-button>
+
+<section id="timeout-alerts"></section>

elements/pf-alert/demo/pf-alert.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="demo.css"><script type="module" src="pf-alert.js"></script>
+
+<pf-alert header="Default alert title"></pf-alert>

elements/pf-alert/demo/pf-alert.js

@@ -0,0 +1,3 @@
+import '@patternfly/elements/pf-alert/pf-alert.js';
+import '@patternfly/elements/pf-button/pf-button.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';

elements/pf-alert/demo/plain.html

@@ -0,0 +1,24 @@
+<link rel="stylesheet" href="demo.css"><script type="module" src="pf-alert.js"></script>
+
+<h2>
+    Plain
+</h2>
+
+<pf-alert header="Default plain" plain></pf-alert>
+<pf-alert variant="info" header="Info plain" plain></pf-alert>
+<pf-alert variant="success" header="Success plain" plain dismissable>
+  <p>Success alert description. This should tell the user more information about the alert. <a href="#">This is a link.</a></p>
+  <button slot="actions">Ignore</button>
+</pf-alert>
+<pf-alert variant="warning" header="Warning plain" plain></pf-alert>
+<pf-alert variant="danger" header="Danger plain" plain></pf-alert>
+
+<h2>
+    Inline Plain
+</h2>
+
+<pf-alert header="Default inline" inline plain></pf-alert>
+<pf-alert variant="info" header="Info inline" inline plain></pf-alert>
+<pf-alert variant="success" header="Success inline" inline plain></pf-alert>
+<pf-alert variant="warning" header="Warning inline" inline plain></pf-alert>
+<pf-alert variant="danger" header="Danger inline" inline plain></pf-alert>

elements/pf-alert/demo/timeout.html

@@ -0,0 +1,15 @@
+<link rel="stylesheet" href="demo.css"><script type="module" src="timeout.js"></script>
+
+<h2>
+  Timeout
+</h2>
+
+<pf-button id="create-timeout-alert">Create default timeout alert</pf-button>
+<pf-button id="create-timeout-inline-alert">Create inline timeout alert</pf-button>
+<pf-button id="create-custom-timeout-alert">Create custom timeout alert</pf-button>
+
+<input type="range" id="timeout-range" min="0" max="10000" step="100" value="1000" />
+<label for="timeout-range">Timeout: <span id="timeout-value">1000</span>ms</label>
+<pf-button id="create-Default-timeout-alert">Create Default timeout alert</pf-button>
+
+<section id="timeout-alerts"></section>