feat(alert): add pf-alert

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

@@ -121,6 +121,10 @@ export class SlotController implements ReactiveController {
     }
   }
 
+  hasAnonymousSlot(): boolean {
+    return this.#nodes.get(SlotController.anonymous)?.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).

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,11 @@
+# Alert
+Add a description of the component here.
+
+## Usage
+Describe how best to use this web component along with best practices.
+
+```html
+<pf-alert>
+
+</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/pf-alert.html

@@ -0,0 +1,124 @@
+<link rel="stylesheet" href="demo.css">
+<script type="module" src="pf-alert.js"></script>
+
+<pf-alert title="Default alert title"></pf-alert>
+<pf-alert variant="info" title="Info alert title"></pf-alert>
+<pf-alert variant="success" title="Success alert title"></pf-alert>
+<pf-alert variant="warning" title="Warning alert title"></pf-alert>
+<pf-alert variant="danger" title="Danger alert title"></pf-alert>
+
+<h1>
+    Alert Variations 
+</h1>
+
+<pf-alert title="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 title="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 title="Success alert title" variant="success" dismissable>
+  <button slot="actions">View details</button>
+  <button slot="actions">Ignore</button>
+</pf-alert>
+
+<pf-alert title="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 title="Success alert title" variant="success" dismissable></pf-alert>
+
+<h1>
+    Default Icons
+</h1>
+
+<pf-alert title="Custom icon">
+  <pf-icon slot="icon" set="fas" icon="users" loading="idle"></pf-icon>
+</pf-alert>
+<pf-alert title="Custom info icon" variant="info">
+  <pf-icon slot="icon" set="fas" icon="box" loading="idle"></pf-icon>
+</pf-alert>
+<pf-alert title="Custom success icon" variant="success">
+  <pf-icon slot="icon" set="fas" icon="database" loading="idle"></pf-icon>
+</pf-alert>
+<pf-alert title="Custom warning icon" variant="warning">
+  <pf-icon slot="icon" set="fas" icon="server" loading="idle"></pf-icon>
+</pf-alert>
+<pf-alert title="Custom danger icon" variant="danger">
+  <pf-icon slot="icon" set="fas" icon="laptop" loading="idle"></pf-icon>
+</pf-alert>
+
+<h1>
+    Plain
+</h1>
+
+<pf-alert title="Default plain" plain></pf-alert>
+<pf-alert variant="info" title="Info plain" plain></pf-alert>
+<pf-alert variant="success" title="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" title="Warning plain" plain></pf-alert>
+<pf-alert variant="danger" title="Danger plain" plain></pf-alert>
+
+<h1>
+    Inline
+</h1>
+
+<pf-alert title="Default inline" inline></pf-alert>
+<pf-alert variant="info" title="Info inline" inline></pf-alert>
+<pf-alert variant="success" title="Success inline" inline></pf-alert>
+<pf-alert variant="warning" title="Warning inline" inline></pf-alert>
+<pf-alert variant="danger" title="Danger inline" inline></pf-alert>
+
+<h1>
+    Plain
+</h1>
+
+<pf-alert title="Default inline" plain></pf-alert>
+<pf-alert variant="info" title="Info inline" plain></pf-alert>
+<pf-alert variant="success" title="Success inline" plain></pf-alert>
+<pf-alert variant="warning" title="Warning inline" plain></pf-alert>
+<pf-alert variant="danger" title="Danger inline" plain></pf-alert>
+
+<h1>
+    Inline Plain
+</h1>
+
+<pf-alert title="Default inline" inline plain></pf-alert>
+<pf-alert variant="info" title="Info inline" inline plain></pf-alert>
+<pf-alert variant="success" title="Success inline" inline plain></pf-alert>
+<pf-alert variant="warning" title="Warning inline" inline plain></pf-alert>
+<pf-alert variant="danger" title="Danger inline" inline plain></pf-alert>
+
+<h1>
+  Truncated Title
+</h1>
+
+<pf-alert style="width:100px;" truncate-title title="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>
+
+<h1>
+  Timeout
+</h1>
+
+<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.js

@@ -0,0 +1,35 @@
+import '@patternfly/elements/pf-alert/pf-alert.js';
+import '@patternfly/elements/pf-button/pf-button.js';
+import '@patternfly/elements/pf-icon/pf-icon.js';
+
+const createTimeoutAlert = document.getElementById('create-timeout-alert');
+const createInlintTimeoutAlert = document.getElementById('create-timeout-inline-alert');
+const timeoutRange = document.getElementById('timeout-range');
+const timeoutValue = document.getElementById('timeout-value');
+const createCustomTimeoutAlert = document.getElementById('create-custom-timeout-alert');
+const timeoutAlertsSection = document.getElementById('timeout-alerts');
+
+createTimeoutAlert.addEventListener('click', () => {
+  const pfeAlert = document.createElement('pf-alert');
+  pfeAlert.title = 'Default Timeout Alert 8000ms';
+  pfeAlert.timeout = true;
+  timeoutAlertsSection.appendChild(pfeAlert);
+});
+
+createInlintTimeoutAlert.addEventListener('click', () => {
+  const pfeAlert = document.createElement('pf-alert');
+  pfeAlert.title = 'Inline Timeout Alert 8000ms';
+  pfeAlert.timeout = true;
+  timeoutAlertsSection.appendChild(pfeAlert);
+});
+
+createCustomTimeoutAlert.addEventListener('click', () => {
+  const pfeAlert = document.createElement('pf-alert');
+  pfeAlert.title = `Custom Timeout Alert ${timeoutRange.value}ms`;
+  pfeAlert.timeout = timeoutRange.value;
+  timeoutAlertsSection.appendChild(pfeAlert);
+});
+
+timeoutRange.addEventListener('change', () => {
+  timeoutValue.innerText = timeoutRange.value;
+});

elements/pf-alert/docs/pf-alert.md

@@ -0,0 +1,17 @@
+{% renderOverview %}
+  <pf-alert></pf-alert>
+{% endrenderOverview %}
+
+{% band header="Usage" %}{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}