feat(checkbox): uncontrolled checkbox

elements/package.json

@@ -27,6 +27,7 @@
     "./pf-button/pf-button.js": "./pf-button/pf-button.js",
     "./pf-card/BaseCard.js": "./pf-card/BaseCard.js",
     "./pf-card/pf-card.js": "./pf-card/pf-card.js",
+    "./pf-checkbox/pf-checkbox.js": "./pf-checkbox/pf-checkbox.js",
     "./pf-chip/pf-chip.js": "./pf-chip/pf-chip.js",
     "./pf-chip/pf-chip-group.js": "./pf-chip/pf-chip-group.js",
     "./pf-clipboard-copy/BaseClipboardCopy.js": "./pf-clipboard-copy/BaseClipboardCopy.js",

elements/pf-checkbox/README.md

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

elements/pf-checkbox/demo/demo.css

@@ -0,0 +1,3 @@
+pf-checkbox {
+  /* insert demo styles */
+}

elements/pf-checkbox/demo/pf-checkbox.html

@@ -0,0 +1,6 @@
+<link rel="stylesheet" href="demo.css">
+<script type="module">
+    import '@patternfly/elements/pf-checkbox/pf-checkbox.js';
+</script>
+
+<pf-checkbox></pf-checkbox>

elements/pf-checkbox/docs/pf-checkbox.md

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

elements/pf-checkbox/pf-checkbox.css

@@ -0,0 +1,21 @@
+.container  {
+  /* padding: 12px 8px; */
+  margin: 48px;
+}
+
+.container .heading {
+  margin:0 0 12px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color:#514646;
+}
+
+.container .pf-c-check {
+  padding-left: 16px;
+}
+
+.container .heading__controlled  {
+  margin-top: 8px;
+  margin-bottom: 0px;
+}
+

elements/pf-checkbox/pf-checkbox.ts

@@ -0,0 +1,71 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+
+import styles from './pf-checkbox.css';
+
+/**
+ * Checkbox
+ * @slot - Place element content here
+ */
+@customElement('pf-checkbox')
+export class PfCheckbox extends LitElement {
+  static readonly styles = [styles];
+
+  #getElement() {
+    const checkbox = document.querySelector('pf-checkbox');
+    const checkbasic = checkbox!.shadowRoot!.getElementById('check-basic') as HTMLInputElement;
+    return checkbasic;
+  }
+
+  keydown(event: KeyboardEvent) {
+    const checkbox = this.#getElement();
+    if (event.code === 'Enter' || event.code === 'Space') {
+      event.preventDefault();
+      checkbox.checked = !checkbox.checked;
+      // Optionally, you can also update aria-checked attribute for screen readers
+      checkbox.setAttribute('aria-checked', checkbox.checked ? 'true' : 'false');
+    }
+  }
+
+  click() {
+    const checkbox = this.#getElement();
+    checkbox.setAttribute('aria-checked', checkbox.checked ? 'true' : 'false');
+  }
+
+  render() {
+    return html`
+      <slot>
+      <div class="container">
+          <h1 class="heading">Uncontrolled </h1>
+          <div class="pf-c-check">
+              <input
+                class="pf-c-check__input"
+                type="checkbox"
+                id="check-basic"
+                name="check-basic"
+                @keydown=${this.keydown} 
+                @click=${this.click}
+
+              />
+              <label class="pf-c-check__label" for="check-basic">Uncontrolled CheckBox </label>
+          </div>
+      </div>
+      </slot>
+    `;
+  }
+}
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-checkbox': PfCheckbox;
+  }
+}
+
+//
+
+//     checkbox.addEventListener('click', function(event) {
+//         // Update aria-checked attribute for screen readers
+//         checkbox.setAttribute('aria-checked', checkbox.checked ? 'true' : 'false');
+//     });
+

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

@@ -0,0 +1,12 @@
+import { test } from '@playwright/test';
+import { PfeDemoPage } from '@patternfly/pfe-tools/test/playwright/PfeDemoPage.js';
+
+const tagName = 'pf-checkbox';
+
+test.describe(tagName, () => {
+  test('snapshot', async ({ page }) => {
+    const componentPage = new PfeDemoPage(page, tagName);
+    await componentPage.navigate();
+    await componentPage.snapshot();
+  });
+});

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

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