npm - @justeattakeaway/pie-checkbox - Versions diffs - 0.1.0 → 0.3.0 - Mend

@justeattakeaway/pie-checkbox 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md CHANGED Viewed

@@ -15,7 +15,8 @@
 3. [Importing the component](#importing-the-component)
 4. [Peer Dependencies](#peer-dependencies)
 5. [Props](#props)
-6. [Contributing](#contributing)
+6. [Events](#events)
+7. [Contributing](#contributing)
 ## pie-checkbox
@@ -74,18 +75,36 @@ import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react';
 | Property | Type | Default | Description |
 |---|---|---|---|
-| - | - | - | - |
+| `name` | `string` | - | The name of the checkbox (used as a key/value pair with `value`). This is required in order to work properly with forms. |
+| `value` | `string` | 'on' | The value of the input (used as a key/value pair in HTML forms with `name`). If not passed falls back to the html default value "on". |
+| `required` | `boolean` | `false` | If true, the checkbox is required to be checked before submitting the form. If it is not in checked state, the component validity state will be invalid. |
+| `label` | `string` | '' | Text associated with the checkbox. If there is no label to provide, make sure to pass label, labelledby or describedby to the aria property. |
+| `disabled` | `boolean` | `false` | Indicates whether or not the checkbox is disabled. |
+| `checked` | `boolean` | `false` | Indicates whether or not the checkbox is checked by default (when the page loads). |
+| `indeterminate` | `boolean` | `false` | 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. |
+| `aria` | `object` | {} | accepts `label`, `labeledby` and `describedby` keys with string values. |
 In your markup or JSX, you can then use these to set the properties for the `pie-checkbox` component:
 ```html
 <!-- Native HTML -->
-<pie-checkbox></pie-checkbox>
+<pie-checkbox
+    name="mycheckbox"
+    label="Checkbox Label">
+</pie-checkbox>
 <!-- JSX -->
-<PieCheckbox></PieCheckbox>
+<PieCheckbox
+    name="mycheckbox"
+    label="Checkbox Label">
+</PieCheckbox>
 ```
+## Events
+| Event | Type | Description |
+|-------|------|-------------|
+| `change` | `CustomEvent` | Triggered after the checked state of a checkbox changes. |
 ## Contributing
 Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/custom-elements.json CHANGED Viewed

@@ -22,7 +22,192 @@
           "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": "aria",
+              "type": {
+                "text": "CheckboxProps['aria']"
+              },
+              "privacy": "public",
+              "attribute": "aria"
+            },
+            {
+              "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"
+            },
+            {
+              "name": "aria",
+              "type": {
+                "text": "CheckboxProps['aria']"
+              },
+              "fieldName": "aria"
+            }
+          ],
           "mixins": [
             {
               "name": "RtlMixin",

package/dist/index.d.ts CHANGED Viewed

@@ -4,13 +4,77 @@ import type { LitElement } from 'lit';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
+export declare type AriaProps = {
+    label?: string;
+    labelledby?: string;
+    describedby?: string;
+};
 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;
+    /**
+     * Various ARIA attributes.
+     */
+    aria?: AriaProps;
 }
 /**
  * @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'];
+    aria: CheckboxProps['aria'];
+    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 CHANGED Viewed

@@ -1,14 +1,90 @@
-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 b, html as u, nothing as c, unsafeCSS as m } from "lit";
+import { RtlMixin as f, wrapNativeEvent as v, defineCustomElement as g } from "@justeattakeaway/pie-webc-core";
+import { property as i, query as $ } from "lit/decorators.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+const x = `*,*:after,*:before{box-sizing:inherit}
+`;
+var C = Object.defineProperty, O = Object.getOwnPropertyDescriptor, r = (d, n, p, l) => {
+  for (var t = l > 1 ? void 0 : l ? O(n, p) : n, a = d.length - 1, s; a >= 0; a--)
+    (s = d[a]) && (t = (l ? s(n, p, t) : s(t)) || t);
+  return l && t && C(n, p, t), t;
+};
+const S = "pie-checkbox";
+class e extends f(b) {
+  constructor() {
+    super(...arguments), this.required = !1, this.indeterminate = !1, this.handleChange = (n) => {
+      const p = v(n);
+      this.dispatchEvent(p);
+    };
+  }
+  /**
+   * (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: n,
+      value: p,
+      name: l,
+      label: t,
+      disabled: a,
+      required: s,
+      indeterminate: y,
+      aria: o
+    } = this;
+    return u`
+        <label>
+            <input
+                type="checkbox"
+                ?checked=${h(n)}
+                .value=${h(p)}
+                name=${h(l)}
+                ?disabled=${a}
+                ?required=${s}
+                .indeterminate=${y}
+                aria-label=${(o == null ? void 0 : o.label) || c}
+                aria-labelledby=${t ? c : (o == null ? void 0 : o.labelledby) || c}
+                aria-describedby= ${(o == null ? void 0 : o.describedby) || c}
+                @change=${this.handleChange}
+                data-test-id="pie-checkbox"
+            />
+            ${t}
+        </label>`;
   }
 }
-e.styles = n(s);
-r(l, e);
+e.shadowRootOptions = { ...b.shadowRootOptions, delegatesFocus: !0 };
+e.styles = m(x);
+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([
+  i({ type: Object })
+], e.prototype, "aria", 2);
+r([
+  $("input")
+], e.prototype, "checkbox", 2);
+g(S, e);
 export {
   e as PieCheckbox
 };

package/dist/react.d.ts CHANGED Viewed

@@ -5,15 +5,79 @@ import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
+export declare type AriaProps = {
+    label?: string;
+    labelledby?: string;
+    describedby?: string;
+};
 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;
+    /**
+     * Various ARIA attributes.
+     */
+    aria?: AriaProps;
 }
 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'];
+    aria: CheckboxProps['aria'];
+    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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox",
   "description": "PIE Design System Checkbox built using Web Components",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts CHANGED Viewed

@@ -1,3 +1,47 @@
-// 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 type AriaProps = {
+    label?: string;
+    labelledby?: string;
+    describedby?: string;
+};
+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;
+    /**
+     * Various ARIA attributes.
+     */
+    aria?: AriaProps;
+}

package/src/index.ts CHANGED Viewed

@@ -1,5 +1,13 @@
-import { LitElement, html, unsafeCSS } from 'lit';
-import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import {
+    LitElement, html, unsafeCSS, nothing,
+} 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,88 @@ 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;
+    @property({ type: Object })
+    public aria: CheckboxProps['aria'];
+    @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,
+            aria,
+        } = this;
+        return html`
+        <label>
+            <input
+                type="checkbox"
+                ?checked=${ifDefined(checked)}
+                .value=${ifDefined(value)}
+                name=${ifDefined(name)}
+                ?disabled=${disabled}
+                ?required=${required}
+                .indeterminate=${indeterminate}
+                aria-label=${aria?.label || nothing}
+                aria-labelledby=${label ? nothing : aria?.labelledby || nothing}
+                aria-describedby= ${aria?.describedby || nothing}
+                @change=${this.handleChange}
+                data-test-id="pie-checkbox"
+            />
+            ${label}
+        </label>`;
     }
     // Renders a `CSSResult` generated from SCSS by Vite