@justeattakeaway/pie-checkbox 0.0.0 → 0.2.0

package/custom-elements.json

@@ -22,7 +22,176 @@
           "kind": "class",
           "description": "",
           "name": "PieCheckbox",
-          "members": [],
+          "slots": [
+            {
+              "description": "Default slot (checkbox label)",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "object"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true }"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "CheckboxProps['value']"
+              },
+              "privacy": "public",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "CheckboxProps['label'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "CheckboxProps['name'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "CheckboxProps['checked'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "checked"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "CheckboxProps['disabled'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "CheckboxProps['required'] | undefined"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "CheckboxProps['indeterminate'] | undefined"
+              },
+              "privacy": "public",
+              "default": "false",
+              "attribute": "indeterminate"
+            },
+            {
+              "kind": "field",
+              "name": "checkbox",
+              "type": {
+                "text": "HTMLInputElement | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "type": {
+                "text": "ValidityState"
+              },
+              "privacy": "public",
+              "description": "(Read-only) returns a ValidityState with the validity states that this element is in.\nhttps://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "handleChange",
+              "privacy": "private",
+              "description": "The onChange function updates the checkbox state and emits an event for consumers.",
+              "parameters": [
+                {
+                  "description": "This should be the change event that was listened for on an input element with `type=\"checkbox\"`.",
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "CheckboxProps['value']"
+              },
+              "fieldName": "value"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "CheckboxProps['label'] | undefined"
+              },
+              "fieldName": "label"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "CheckboxProps['name'] | undefined"
+              },
+              "fieldName": "name"
+            },
+            {
+              "name": "checked",
+              "type": {
+                "text": "CheckboxProps['checked'] | undefined"
+              },
+              "fieldName": "checked"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "CheckboxProps['disabled'] | undefined"
+              },
+              "fieldName": "disabled"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "CheckboxProps['required'] | undefined"
+              },
+              "default": "false",
+              "fieldName": "required"
+            },
+            {
+              "name": "indeterminate",
+              "type": {
+                "text": "CheckboxProps['indeterminate'] | undefined"
+              },
+              "default": "false",
+              "fieldName": "indeterminate"
+            }
+          ],
           "mixins": [
             {
               "name": "RtlMixin",

package/dist/index.d.ts

@@ -5,12 +5,65 @@ import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
 
 export declare interface CheckboxProps {
+    /**
+     * The value of the checkbox (used as a key/value pair in HTML forms with `name`).
+     */
+    value?: string;
+    /**
+     * The label value of the component
+     */
+    label?: string;
+    /**
+     * The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
+    /**
+     * Same as the HTML disabled attribute - indicates whether or not the checkbox is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Same as the HTML checked attribute - indicates whether or not the checkbox is checked by default (when the page loads).
+     */
+    checked?: boolean;
+    /**
+     * Indicates whether the checkbox visually shows a horizontal line in the box instead of a check/tick.
+     * It has no impact on whether the checkbox's value is used in a form submission. That is decided by the checked state, regardless of the indeterminate state.
+     */
+    indeterminate?: boolean;
+    /**
+     * If true, the checkbox must be checked for the form to be submittable.
+     */
+    required?: boolean;
 }
 
 /**
  * @tagname pie-checkbox
+ * @slot - Default slot (checkbox label)
  */
 export declare class PieCheckbox extends PieCheckbox_base implements CheckboxProps {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    value: CheckboxProps['value'];
+    label?: CheckboxProps['label'];
+    name?: CheckboxProps['name'];
+    checked?: CheckboxProps['checked'];
+    disabled?: CheckboxProps['disabled'];
+    required?: CheckboxProps['required'];
+    indeterminate?: CheckboxProps['indeterminate'];
+    private checkbox?;
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    get validity(): ValidityState;
+    /**
+     * The onChange function updates the checkbox state and emits an event for consumers.
+     * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
+     */
+    private handleChange;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }

package/dist/index.js

@@ -1,14 +1,83 @@
-import { LitElement as t, html as o, unsafeCSS as n } from "lit";
-import { RtlMixin as i, defineCustomElement as r } from "@justeattakeaway/pie-webc-core";
-const s = `*,*:after,*:before{box-sizing:inherit}
-`, l = "pie-checkbox";
-class e extends i(t) {
+import { LitElement as d, html as u, unsafeCSS as m } from "lit";
+import { RtlMixin as y, wrapNativeEvent as f, defineCustomElement as b } from "@justeattakeaway/pie-webc-core";
+import { property as i, query as v } from "lit/decorators.js";
+import { ifDefined as c } from "lit/directives/if-defined.js";
+const g = `*,*:after,*:before{box-sizing:inherit}
+`;
+var x = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (l, o, n, p) => {
+  for (var t = p > 1 ? void 0 : p ? $(o, n) : o, a = l.length - 1, s; a >= 0; a--)
+    (s = l[a]) && (t = (p ? s(o, n, t) : s(t)) || t);
+  return p && t && x(o, n, t), t;
+};
+const C = "pie-checkbox";
+class e extends y(d) {
+  constructor() {
+    super(...arguments), this.required = !1, this.indeterminate = !1, this.handleChange = (o) => {
+      const n = f(o);
+      this.dispatchEvent(n);
+    };
+  }
+  /**
+   * (Read-only) returns a ValidityState with the validity states that this element is in.
+   * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+   */
+  get validity() {
+    return this.checkbox.validity;
+  }
   render() {
-    return o`<h1 data-test-id="pie-checkbox">Hello world!</h1>`;
+    const {
+      checked: o,
+      value: n,
+      name: p,
+      label: t,
+      disabled: a,
+      required: s,
+      indeterminate: h
+    } = this;
+    return u`
+        <label>
+            <input
+                type="checkbox"
+                ?checked=${c(o)}
+                .value=${c(n)}
+                name=${c(p)}
+                ?disabled=${a}
+                ?required=${s}
+                .indeterminate=${h}
+                @change=${this.handleChange}
+                data-test-id="pie-checkbox"
+            />
+            ${t}
+        </label>`;
   }
 }
-e.styles = n(s);
-r(l, e);
+e.shadowRootOptions = { ...d.shadowRootOptions, delegatesFocus: !0 };
+e.styles = m(g);
+r([
+  i({ type: String })
+], e.prototype, "value", 2);
+r([
+  i({ type: String })
+], e.prototype, "label", 2);
+r([
+  i({ type: String })
+], e.prototype, "name", 2);
+r([
+  i({ type: Boolean })
+], e.prototype, "checked", 2);
+r([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+r([
+  i({ type: Boolean, reflect: !0 })
+], e.prototype, "required", 2);
+r([
+  i({ type: Boolean })
+], e.prototype, "indeterminate", 2);
+r([
+  v("input")
+], e.prototype, "checkbox", 2);
+b(C, e);
 export {
   e as PieCheckbox
 };

package/dist/react.d.ts

@@ -6,14 +6,67 @@ import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
 
 export declare interface CheckboxProps {
+    /**
+     * The value of the checkbox (used as a key/value pair in HTML forms with `name`).
+     */
+    value?: string;
+    /**
+     * The label value of the component
+     */
+    label?: string;
+    /**
+     * The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
+    /**
+     * Same as the HTML disabled attribute - indicates whether or not the checkbox is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Same as the HTML checked attribute - indicates whether or not the checkbox is checked by default (when the page loads).
+     */
+    checked?: boolean;
+    /**
+     * Indicates whether the checkbox visually shows a horizontal line in the box instead of a check/tick.
+     * It has no impact on whether the checkbox's value is used in a form submission. That is decided by the checked state, regardless of the indeterminate state.
+     */
+    indeterminate?: boolean;
+    /**
+     * If true, the checkbox must be checked for the form to be submittable.
+     */
+    required?: boolean;
 }
 
 export declare const PieCheckbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<PieCheckbox_2> & ReactBaseType>;
 
 /**
  * @tagname pie-checkbox
+ * @slot - Default slot (checkbox label)
  */
 declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        slotAssignment?: SlotAssignmentMode | undefined;
+    };
+    value: CheckboxProps['value'];
+    label?: CheckboxProps['label'];
+    name?: CheckboxProps['name'];
+    checked?: CheckboxProps['checked'];
+    disabled?: CheckboxProps['disabled'];
+    required?: CheckboxProps['required'];
+    indeterminate?: CheckboxProps['indeterminate'];
+    private checkbox?;
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    get validity(): ValidityState;
+    /**
+     * The onChange function updates the checkbox state and emits an event for consumers.
+     * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
+     */
+    private handleChange;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }

package/dist/react.js

@@ -3,13 +3,15 @@ import { createComponent as o } from "@lit/react";
 import { PieCheckbox as t } from "./index.js";
 import "lit";
 import "@justeattakeaway/pie-webc-core";
-const c = o({
+import "lit/decorators.js";
+import "lit/directives/if-defined.js";
+const i = o({
   displayName: "PieCheckbox",
   elementClass: t,
   react: e,
   tagName: "pie-checkbox",
   events: {}
-}), p = c;
+}), x = i;
 export {
-  p as PieCheckbox
+  x as PieCheckbox
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox",
   "description": "PIE Design System Checkbox built using Web Components",
-  "version": "0.0.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,7 +40,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.21.1"
+    "@justeattakeaway/pie-webc-core": "0.22.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,3 +1,37 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface CheckboxProps {}
+export interface CheckboxProps {
+    /**
+     * The value of the checkbox (used as a key/value pair in HTML forms with `name`).
+     */
+    value?: string;
+
+    /**
+     * The label value of the component
+     */
+    label?: string;
+
+    /**
+     * The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms.
+     */
+    name?: string;
+
+    /**
+     * Same as the HTML disabled attribute - indicates whether or not the checkbox is disabled.
+     */
+    disabled?: boolean;
+
+    /**
+     * Same as the HTML checked attribute - indicates whether or not the checkbox is checked by default (when the page loads).
+     */
+    checked?: boolean;
+
+    /**
+     * Indicates whether the checkbox visually shows a horizontal line in the box instead of a check/tick.
+     * It has no impact on whether the checkbox's value is used in a form submission. That is decided by the checked state, regardless of the indeterminate state.
+     */
+    indeterminate?: boolean;
+
+    /**
+     * If true, the checkbox must be checked for the form to be submittable.
+     */
+    required?: boolean;
+}

package/src/index.ts

@@ -1,5 +1,13 @@
-import { LitElement, html, unsafeCSS } from 'lit';
-import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import {
+    LitElement, html, unsafeCSS,
+} from 'lit';
+import {
+    RtlMixin,
+    defineCustomElement,
+    wrapNativeEvent,
+} from '@justeattakeaway/pie-webc-core';
+import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 import styles from './checkbox.scss?inline';
 import { CheckboxProps } from './defs';
@@ -11,10 +19,80 @@ const componentSelector = 'pie-checkbox';
 
 /**
  * @tagname pie-checkbox
+ * @slot - Default slot (checkbox label)
  */
 export class PieCheckbox extends RtlMixin(LitElement) implements CheckboxProps {
+    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+
+    @property({ type: String })
+    public value: CheckboxProps['value'];
+
+    @property({ type: String })
+    public label?: CheckboxProps['label'];
+
+    @property({ type: String })
+    public name?: CheckboxProps['name'];
+
+    @property({ type: Boolean })
+    public checked?: CheckboxProps['checked'];
+
+    @property({ type: Boolean, reflect: true })
+    public disabled?: CheckboxProps['disabled'];
+
+    @property({ type: Boolean, reflect: true })
+    public required?: CheckboxProps['required'] = false;
+
+    @property({ type: Boolean })
+    public indeterminate?: CheckboxProps['indeterminate'] = false;
+
+    @query('input')
+    private checkbox?: HTMLInputElement;
+
+    /**
+     * (Read-only) returns a ValidityState with the validity states that this element is in.
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validity
+     */
+    public get validity (): ValidityState {
+        return (this.checkbox as HTMLInputElement).validity;
+    }
+
+    /**
+     * The onChange function updates the checkbox state and emits an event for consumers.
+     * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
+     */
+    private handleChange = (event: Event) => {
+        // This is because some events set `composed` to `false`.
+        // Reference: https://javascript.info/shadow-dom-events#event-composed
+        const customChangeEvent = wrapNativeEvent(event);
+
+        this.dispatchEvent(customChangeEvent);
+    };
+
     render () {
-        return html`<h1 data-test-id="pie-checkbox">Hello world!</h1>`;
+        const {
+            checked,
+            value,
+            name,
+            label,
+            disabled,
+            required,
+            indeterminate,
+        } = this;
+        return html`
+        <label>
+            <input
+                type="checkbox"
+                ?checked=${ifDefined(checked)}
+                .value=${ifDefined(value)}
+                name=${ifDefined(name)}
+                ?disabled=${disabled}
+                ?required=${required}
+                .indeterminate=${indeterminate}
+                @change=${this.handleChange}
+                data-test-id="pie-checkbox"
+            />
+            ${label}
+        </label>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite