feat(alert): add <pf-alert> element

.changeset/pf-alert.md

@@ -0,0 +1,20 @@
+---
+"@patternfly/elements": minor
+---
+
+### Minor Changes
+
+- Added `pf-alert` component for displaying alert messages of different types:
+  - Types: info, warning, danger, success, neutral, custom
+  - Features: optional title, description, actions, dismiss button
+- Enables consistent alert messaging across apps and demos
+
+```html
+<pf-alert ouia-id="CustomAlert" variant="warning" onClose>
+  <h3 slot="title">Custom alert title</h3>
+  <span>This is the alert description.</span>
+  <div slot="actionLinks">
+    <pf-button>Action 1</pf-button>
+    <pf-button>Action 2</pf-button>
+  </div>
+</pf-alert>

.github/workflows/commitlint.yml

@@ -14,7 +14,7 @@ on:
       - submitted
 
 permissions:
-  pull-requests: read
+  pull-requests: write
 
 # Separate jobs can run concurrently
 jobs:

elements/package.json

@@ -15,6 +15,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/pf-avatar.js": "./pf-avatar/pf-avatar.js",
     "./pf-back-to-top/pf-back-to-top.js": "./pf-back-to-top/pf-back-to-top.js",
     "./pf-background-image/pf-background-image.js": "./pf-background-image/pf-background-image.js",

elements/pf-alert/README.md

@@ -0,0 +1,38 @@
+# pf-alert
+
+The `pf-alert` web component displays PatternFly-styled alerts. It can be used inline in pages or as a toast notification (if a static helper is provided separately). Alerts support several visual **variants** (for example: `info`, `success`, `warning`, `danger`), an optional title slot, body content, and an **action links** slot for interactive controls. Alerts can also be **closable** and **expandable**.
+
+## Installation
+
+Import the element in your page or application as an ES module:
+
+```html
+<script type="module">
+	import '@patternfly/elements/pf-alert/pf-alert.js';
+</script>
+```
+
+## Basic usage
+
+Inline alert example:
+
+```html
+<pf-alert variant="success">
+    <span slot="title">Operation Success</span>
+
+    The operation completed successfully.
+</pf-alert>
+
+<pf-alert variant="info" onClose>
+    <span slot="title">System Update</span>
+
+    A new system update is available.
+
+    <div slot="actionLinks">
+        <pf-button plain>Update Now</pf-button>
+        <pf-button plain>Later</pf-button>
+    </div>
+</pf-alert>
+```
+
+

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

@@ -0,0 +1,32 @@
+<div class="alerts-page">
+
+  <pf-alert ouia-id="CustomAlert">
+    <h3 slot="title">Custom alert title</h3>
+  </pf-alert>
+
+  <pf-alert variant="info" ouia-id="InfoAlert">
+    <h3 slot="title">Info alert title</h3>
+  </pf-alert>
+
+  <pf-alert variant="success" ouia-id="SuccessAlert">
+    <h3 slot="title">Success alert title</h3>
+  </pf-alert>
+
+  <pf-alert variant="warning" ouia-id="WarningAlert">
+    <h3 slot="title">Warning alert title</h3>
+  </pf-alert>
+
+  <pf-alert variant="danger" ouia-id="DangerAlert">
+    <h3 slot="title">Danger alert title</h3>
+  </pf-alert>
+</div>
+
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+</script>
+<style>
+  .alerts-page pf-alert::part(container) {
+    background-color: #fff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  }
+</style>

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

@@ -0,0 +1,64 @@
+<pf-button variant="secondary" id="addAlertButton">Add alert</pf-button>
+<pf-button variant="secondary" id="removeAllAlertsButton">Remove all alerts</pf-button>
+
+<div id="alert-container" style="margin-top: 20px;">
+</div>
+
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+
+  const addAlertButton = document.getElementById('addAlertButton');
+  const removeAllAlertsButton = document.getElementById('removeAllAlertsButton');
+  const alertContainer = document.getElementById('alert-container');
+
+  let alertCounter = 0;
+
+  function addTimeoutAlert() {
+    alertCounter++;
+    const timeoutMilliseconds = 8000;
+
+    const newAlert = document.createElement('pf-alert');
+    newAlert.setAttribute('variant', 'neutral');
+    newAlert.setAttribute('timeout', timeoutMilliseconds.toString());
+    newAlert.innerHTML = `
+                <h4 slot="title">Default timeout Alert</h4>
+                This alert will dismiss after ${timeoutMilliseconds/1000} seconds.
+                <a href="#" slot="actionLinks">View details</a>
+                <a href="#" slot="actionLinks" data-action="ignore">Ignore</a>
+            `;
+
+    alertContainer.prepend(newAlert);
+
+    newAlert.addEventListener('click', (event) => {
+      if (event.target.dataset.action === 'ignore') {
+        event.preventDefault();
+        newAlert.remove();
+      }
+    });
+  }
+
+  if (addAlertButton) {
+    addAlertButton.addEventListener('click', addTimeoutAlert);
+  }
+
+  if (removeAllAlertsButton) {
+    removeAllAlertsButton.addEventListener('click', () => {
+      if (alertContainer) {
+        alertContainer.innerHTML = '';
+      }
+    });
+  }
+</script>
+
+<style>
+  pf-alert::part(container) {
+    background-color: #fff !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+
+  }
+
+  #addAlertButton {
+    margin-inline-end: -0.25rem;
+  }
+</style>

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

@@ -0,0 +1,56 @@
+<div class="alerts-page">
+
+    <pf-alert variant="success">
+        <h3 slot="title">Success alert title</h3>
+        <p>Success alert description. This should tell the user more information about the alert.</p>
+        <a href="#" slot="actionLinks">View details</a>
+        <a href="#" slot="actionLinks">Ignore</a>
+    </pf-alert>
+
+    <pf-alert variant="success">
+        <pf-icon icon="check-circle" slot="icon"></pf-icon>
+        <h3 slot="title">Success alert title</h3>
+        <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 variant="success" onClose>
+        <h3 slot="title">Success alert title</h3>
+        <p>Short alert description.</p>
+    </pf-alert>
+
+    <pf-alert variant="success">
+        <div slot="title">div success alert title</div>
+    </pf-alert>
+
+    <pf-alert variant="success">
+        <h6 slot="title">h6 Success alert title</h6>
+        <p>Short alert description.</p>
+    </pf-alert>
+
+</div>
+
+<script type="module">
+    import '@patternfly/elements/pf-alert/pf-alert.js';
+    import '@patternfly/elements/pf-button/pf-button.js';
+
+</script>
+<style>
+    .alerts-page pf-alert::part(container) {
+        background-color: #fff;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    }
+
+    pf-alert p a {
+        color: #06c;
+        text-decoration: none;
+    }
+
+    pf-alert p a:active,
+    pf-alert p a:hover {
+        text-decoration: underline;
+        color: #004080;
+
+    }
+</style>

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

@@ -0,0 +1,38 @@
+<div class="alerts-page">
+
+    <pf-alert variant="neutral">
+        <pf-icon icon="users" slot="icon"></pf-icon>
+        <h3 slot="title">Default alert title</h3>
+    </pf-alert>
+
+    <pf-alert variant="info">
+        <pf-icon icon="box" slot="icon"></pf-icon>
+        <h3 slot="title">Info alert title</h3>
+    </pf-alert>
+
+    <pf-alert variant="success">
+        <pf-icon icon="database" slot="icon"></pf-icon>
+        <h3 slot="title">Success alert title</h3>
+    </pf-alert>
+
+    <pf-alert variant="warning">
+        <pf-icon icon="server" slot="icon"></pf-icon>
+        <h3 slot="title">Warning alert title</h3>
+    </pf-alert>
+
+    <pf-alert variant="danger">
+        <pf-icon icon="laptop" slot="icon"></pf-icon>
+        <h3 slot="title">Danger alert title</h3>
+    </pf-alert>
+</div>
+
+<script type="module">
+    import '@patternfly/elements/pf-alert/pf-alert.js';
+</script>
+<style>
+    .alerts-page pf-alert::part(container) {
+        background-color: #fff;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    }
+
+</style>

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

@@ -0,0 +1,26 @@
+<div class="alerts-page">
+  <pf-alert variant="success" onClose **isExpandable**>
+    <h3 slot="title">Success alert title</h3>
+    <p slot="isExpandable">Success alert description. This should tell the user more information about the alert.</p>
+  </pf-alert>
+</div>
+
+
+<pf-alert variant="success">
+  <h3 slot="title">Success alert title</h3>
+  <p slot="isExpandable">Success alert description. This should tell the user more information about the alert.</p>
+  <a href="#" slot="actionLinks">View details</a>
+  <a href="#" slot="actionLinks">Ignore</a>
+</pf-alert>
+
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>
+
+<style>
+  .alerts-page pf-alert::part(container) {
+    background-color: #fff;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  }
+</style>

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 %}