chore: added radio button component

Author: ArathyKumar

elements/package.json

@@ -36,6 +36,7 @@
     "./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/pf-label.js": "./pf-label/pf-label.js",
+    "./pf-radio/pf-radio.js": "./pf-radio/pf-radio.js",
     "./pf-select/pf-select.js": "./pf-select/pf-select.js",
     "./pf-select/pf-listbox.js": "./pf-select/pf-listbox.js",
     "./pf-select/pf-option-group.js": "./pf-select/pf-option-group.js",

elements/pf-radio/README.md

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

elements/pf-radio/demo/pf-radio.html

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

elements/pf-radio/docs/pf-radio.md

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

elements/pf-radio/pf-radio.css

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

elements/pf-radio/pf-radio.ts

@@ -0,0 +1,46 @@
+import { LitElement, html, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+
+import styles from './pf-radio.css';
+import { property } from 'lit/decorators/property.js';
+
+/**
+ * Radio
+ * @slot - Place element content here
+ */
+@customElement('pf-radio')
+export class PfRadio extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+  @property() checked = false;
+  @property({ reflect: true }) name = 'radio-test';
+  @property({ reflect: true }) label?: string;
+  // #input:any
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback(): void {
+    super.connectedCallback();
+
+    const root = this.getRootNode();
+    if (root instanceof Document || root instanceof ShadowRoot) {
+      const group = root.querySelectorAll(`pf-radio`);
+      // console.log("------------- the group is", group);
+    }
+  }
+
+
+  render(): TemplateResult<1> {
+    return html`
+      <label for=input>${this.label}</label>
+      <input id=input class="pf-radio" .name=${this.name} type="radio" .checked="${this.checked}">
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-radio': PfRadio;
+  }
+}

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

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