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

.changeset/pf-alert.md

@@ -0,0 +1,15 @@
+---
+"@patternfly/elements": minor
+---
+
+### Minor Changes
+
+- Added `pf-alert` component for displaying alert messages of different types:
+  - Types: info, warning, danger, success, cogear, neutral, custom
+  - Features: optional heading, description, actions, dismiss button
+- Enables consistent alert messaging across apps and demos
+
+```html
+<pf-alert type="warning" heading="Attention!">
+  This is a warning alert with optional description and actions.
+</pf-alert>

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. Alerts support several visual states (for example: `info`, `success`, `warning`, `danger`), an optional header slot, body content, and an `actions` slot for interactive controls.
+
+## 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 state="success">
+	<h3 slot="header">Success</h3>
+	The operation completed successfully.
+	<div slot="actions">
+		<pf-button variant="link">Details</pf-button>
+	</div>
+</pf-alert>
+```
+
+Toast usage (static helper):
+
+```html
+<script type="module">
+	import '@patternfly/elements/pf-alert/pf-alert.js';
+
+	// Show a simple toast notification
+	PfAlert.toast({ message: 'Saved', heading: 'Success', state: 'success' });
+</script>
+```

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

@@ -0,0 +1,32 @@
+<div class="demo-description">
+  <pf-alert class="a" status="cogear">
+    <h3 slot="header">Success alert title</h3>
+  </pf-alert>
+  <pf-alert class="b" status="cogear">
+    <h3 slot="header">Success alert title</h3>
+  </pf-alert>
+</div>
+
+<script type="module">
+    import '@patternfly/elements/pf-alert/pf-alert.js';
+    import '@patternfly/elements/pf-button/pf-button.js';
+</script>
+
+<style>
+    pf-alert.a::part(container) {
+        background-color: #fff;
+        padding: 0.5cm;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    }
+
+    pf-alert.b::part(container) {
+        background-color: #f3faf2;
+        padding: 0.5cm;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+    }
+
+    .demo-description {
+        padding: 1cm;
+        /* Maintain a distance of one centimeter on all sides */
+    }
+</style>

elements/pf-alert/demo/expandable.html

@@ -0,0 +1,47 @@
+<div class="demo-description alerts-page">
+  <pf-alert class="white-alerts-page" status="success" dismissable data-on-close="prevent-default">
+    <h3 slot="header">Success alert title</h3>
+    <pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
+    <pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
+  </pf-alert>
+
+  <pf-alert class="white-alerts-page" status="success" dismissable data-on-close="prevent-default">
+    <h3 slot="header">Success alert title (expanded)</h3>
+    <p>Success alert description. This should tell the user more information about the alert.</p>
+    <pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
+    <pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
+  </pf-alert>
+
+  <pf-alert status="success" dismissable data-on-close="prevent-default">
+    <h3 slot="header">Success alert title</h3>
+    <pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
+    <pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
+  </pf-alert>
+
+  <pf-alert status="success" dismissable data-on-close="prevent-default">
+    <h3 slot="header">Success alert title (expanded)</h3>
+    <p>Success alert description. This should tell the user more information about the alert.</p>
+    <pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
+    <pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
+  </pf-alert>
+</div>
+
+<style>
+  .alerts-page pf-alert::part(container) {
+    padding: 0.5cm;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+  }
+
+  .demo-description {
+    padding: 1cm;
+  }
+
+  pf-alert.white-alerts-page::part(container) {
+    background-color: #fff;
+  }
+</style>
+
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>

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

@@ -0,0 +1,23 @@
+<div class="demo-description alerts-page">
+  <pf-alert status="success">
+    <h3 slot="header">Success alert title</h3>
+  </pf-alert>
+</div>
+
+<style>
+  .alerts-page pf-alert::part(container) {
+    background-color: #fff;
+    border-top-color: transparent;
+    padding: 0.5cm;
+    box-shadow: 0 4px 12px #fff;
+  }
+
+
+  .demo-description {
+    padding: 1cm;
+  }
+</style>
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>

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

@@ -0,0 +1,40 @@
+<div class="demo-description alerts-page">
+
+  <pf-alert status="custom">
+    <h3 slot="header">Custom inline alert title</h3>
+  </pf-alert>
+
+  <pf-alert status="info">
+    <h3 slot="header">Info inline alert title</h3>
+  </pf-alert>
+
+  <pf-alert status="success">
+    <h3 slot="header">Success inline alert title</h3>
+  </pf-alert>
+
+  <pf-alert status="warning">
+    <h3 slot="header">Warning inline alert title</h3>
+  </pf-alert>
+
+
+  <pf-alert status="danger">
+    <h3 slot="header">Danger inline alert title</h3>
+  </pf-alert>
+</div>
+
+
+<style>
+  .alerts-page pf-alert::part(container) {
+    padding: 0.5cm;
+    box-shadow: 0 4px 12px #fff;
+  }
+
+  .demo-description {
+    padding: 1cm;
+  }
+</style>
+
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>

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

@@ -0,0 +1,44 @@
+<div class="demo-description alerts-page">
+
+    <pf-alert  status="success" dismissable data-on-close="prevent-default">
+      <h3 slot="header">Success alert title</h3>
+      <p>Success alert description. This should tell the user more information about the alert.</p>
+      <pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
+      <pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
+    </pf-alert>
+
+    <pf-alert  status="success" dismissable data-on-close="prevent-default">
+      <h3 slot="header">Success alert title</h3>
+      <p>Success alert description. This should tell the user more information about the alert.
+        <pf-button slot="actions" variant="link" style="text-decoration:none; color:#06c; font-size:0.875rem;">This is
+          a link.</pf-button>
+      </p>
+    </pf-alert>
+
+    <pf-alert status="success" dismissable data-on-close="prevent-default">
+      <h3 slot="header">Success alert title</h3>
+      <pf-button slot="actions" variant="link" data-action="dismiss">View details</pf-button>
+      <pf-button slot="actions" variant="link" data-action="confirm">lgnore</pf-button>
+    </pf-alert>
+
+    <pf-alert status="success" dismissable data-on-close="prevent-default">
+      <h3 slot="header">Success alert title</h3>
+    </pf-alert>
+</div>
+
+<style>
+
+  .alerts-page pf-alert::part(container) {
+    padding: 0.5cm;
+    box-shadow: 0 4px 12px #fff;
+  }
+
+  .demo-description {
+    padding: 1cm;
+  }
+</style>
+
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>

elements/pf-alert/demo/types.html

@@ -0,0 +1,42 @@
+<div class="demo-description alerts-page">
+
+  <pf-alert status="custom">
+    <h3 slot="header">Default alert title</h3>
+  </pf-alert>
+
+  <pf-alert status="info">
+    <h3 slot="header">Info alert title</h3>
+  </pf-alert>
+
+  <pf-alert status="success">
+    <h3 slot="header">Success alert title</h3>
+  </pf-alert>
+
+  <pf-alert status="warning">
+    <h3 slot="header">Warning alert title</h3>
+  </pf-alert>
+
+  <pf-alert status="danger">
+    <h3 slot="header">Danger alert title</h3>
+  </pf-alert>
+</div>
+
+
+
+<style>
+  .alerts-page pf-alert::part(container) {
+    background-color: #fff;
+    padding: 0.5cm;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+
+  }
+
+  .demo-description {
+    padding: 1cm;
+  }
+</style>
+
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+  import '@patternfly/elements/pf-button/pf-button.js';
+</script>

elements/pf-alert/demo/variations.html

@@ -0,0 +1,66 @@
+<div class="demo-description alerts-page">
+
+    <pf-alert status="success" dismissable>
+      <h3 slot="header">Success alert title</h3>
+      <p>Success alert description. This should tell the user more information about the alert.</p>
+      <pf-button slot="actions" variant="link" data-action="confirm">View details</pf-button>
+      <pf-button slot="actions" variant="link" data-action="dismiss">lgnore</pf-button>
+    </pf-alert>
+
+    <pf-alert status="success" dismissable>
+      <h3 slot="header">Success alert title</h3>
+      <p>Success alert description. This should tell the user more information about the alert. This is a link.</p>
+    </pf-alert>
+
+    <pf-alert status="success" toast dismissable>
+      <h3 slot="header">Success alert title</h3>
+      <pf-button slot="actions" variant="link" data-action="confirm">View details</pf-button>
+      <pf-button slot="actions" variant="link" data-action="dismiss">lgnore</pf-button>
+    </pf-alert>
+
+    <pf-alert status="success" dismissable data-on-close="prevent-default">
+      <h3 slot="header">Success alert title</h3>
+    </pf-alert>
+
+    <pf-alert status="success">
+      <h3 slot="header">Success alert title</h3>
+    </pf-alert>
+
+
+    <pf-alert status="success">
+      <h3 slot="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus
+        enim
+        fringilla...</h3>
+      <p>This example uses ".pf-m-truncate" to limit the title to a single line and truncate any overflow text with
+        ellipses.</p>
+    </pf-alert>
+
+
+    <pf-alert status="success">
+      <h3 slot="header">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus
+        enim
+        fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus
+        pellentesque...</h3>
+      <p>This example uses ".pf-m-truncate" and sets "--pf-c-alert__title--max-lines: 2" to limit title to two lines and
+        truncate any overflow text with ellipses.</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: var(--pf-global--BackgroundColor--100);
+    padding: 0.5cm;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+
+  }
+
+  .demo-description {
+    padding: 1cm;
+  }
+</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 %}