feat(label-group): add new label-group-element

Author: Sara Dahan

elements/package.json

@@ -36,6 +36,7 @@
     "./pf-jump-links/pf-jump-links-item.js": "./pf-jump-links/pf-jump-links-item.js",
     "./pf-jump-links/pf-jump-links-list.js": "./pf-jump-links/pf-jump-links-list.js",
     "./pf-jump-links/pf-jump-links.js": "./pf-jump-links/pf-jump-links.js",
+    "./pf-label-group/pf-label-group.js": "./pf-label-group/pf-label-group.js",
     "./pf-label/pf-label.js": "./pf-label/pf-label.js",
     "./pf-select/pf-select.js": "./pf-select/pf-select.js",
     "./pf-select/pf-listbox.js": "./pf-select/pf-listbox.js",

elements/pf-label-group/README.md

@@ -0,0 +1,11 @@
+# Label Group
+Add a description of the component here.
+
+## Usage
+Describe how best to use this web component along with best practices.
+
+```html
+<pf-label-group>
+
+</pf-label-group>
+```

elements/pf-label-group/demo/pf-label-group.html

@@ -0,0 +1,12 @@
+<pf-label-group></pf-label-group>
+
+<script type="module">
+  import '@patternfly/elements/pf-label-group/pf-label-group.js';
+</script>
+
+<style>
+pf-label-group {
+  /* insert demo styles */
+}
+</style>
+

elements/pf-label-group/docs/pf-label-group.md

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

elements/pf-label-group/pf-label-group.css

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

elements/pf-label-group/pf-label-group.ts

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

elements/pf-label-group/test/pf-label-group.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-label-group';
+
+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-label-group/test/pf-label-group.spec.ts

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