feat(alert): create pf-alert element

Author: chubara62372

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,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/pf-alert.html

@@ -0,0 +1,12 @@
+<pf-alert></pf-alert>
+
+<script type="module">
+  import '@patternfly/elements/pf-alert/pf-alert.js';
+</script>
+
+<style>
+pf-alert {
+  /* insert demo styles */
+}
+</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 %}

elements/pf-alert/pf-alert.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

elements/pf-alert/pf-alert.ts

@@ -0,0 +1,25 @@
+import { LitElement, html, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+
+import styles from './pf-alert.css';
+
+/**
+ * Alert
+ * @slot - Place element content here
+ */
+@customElement('pf-alert')
+export class PfAlert extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+  render(): TemplateResult<1> {
+    return html`
+      <slot></slot>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-alert': PfAlert;
+  }
+}

elements/pf-alert/test/pf-alert.e2e.ts

@@ -0,0 +1,25 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
+
+const tagName = 'pf-alert';
+
+test.describe(tagName, () => {
+  test('snapshot', async ({ page }) => {
+    const componentPage = new PfeDemoPage(page, tagName);
+    await componentPage.navigate();
+    await componentPage.snapshot();
+  });
+
+  test('ssr', async ({ browser }) => {
+    const fixture = new SSRPage({
+      tagName,
+      browser,
+      demoDir: new URL('../demo/', import.meta.url),
+      importSpecifiers: [
+        `@patternfly/elements/${tagName}/${tagName}.js`,
+      ],
+    });
+    await fixture.snapshots();
+  });
+});

elements/pf-alert/test/pf-alert.spec.ts

@@ -0,0 +1,21 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { PfAlert } from '@patternfly/elements/pf-alert/pf-alert.js';
+
+describe('<pf-alert>', function() {
+  describe('simply instantiating', function() {
+    let element: PfAlert;
+    it('imperatively instantiates', function() {
+      expect(document.createElement('pf-alert')).to.be.an.instanceof(PfAlert);
+    });
+
+    it('should upgrade', async function() {
+      element = await createFixture<PfAlert>(html`<pf-alert></pf-alert>`);
+      const klass = customElements.get('pf-alert');
+      expect(element)
+          .to.be.an.instanceOf(klass)
+          .and
+          .to.be.an.instanceOf(PfAlert);
+    });
+  });
+});