@justeattakeaway/pie-checkbox - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240516144918 to 0.0.0-snapshot-release-20240522115923

custom-elements.json

@@ -43,8 +43,2 @@ {
           "name": "PieCheckbox",
-          "slots": [
-            {
-              "description": "Default slot (checkbox label)",
-              "name": ""
-            }
-          ],
           "members": [
@@ -64,5 +58,6 @@ {
               "type": {
-                "text": "CheckboxProps['value']"
+                "text": "CheckboxProps['value'] | undefined"
               },
               "privacy": "public",
+              "default": "'on'",
               "attribute": "value"
@@ -128,2 +123,11 @@ },
               "kind": "field",
+              "name": "aria",
+              "type": {
+                "text": "CheckboxProps['aria']"
+              },
+              "privacy": "public",
+              "attribute": "aria"
+            },
+            {
+              "kind": "field",
               "name": "checkbox",
@@ -136,2 +140,7 @@ "type": {
             {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private"
+            },
+            {
               "kind": "field",
@@ -147,6 +156,25 @@ "name": "validity",
             {
+              "kind": "method",
+              "name": "formDisabledCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "disabled",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "The latest disabled state of the input."
+                }
+              ],
+              "description": "Called after the disabled state of the element changes,\neither because the disabled attribute of this element was added or removed;\nor because the disabled state changed on a <fieldset> that's an ancestor of this element."
+            },
+            {
               "kind": "field",
               "name": "handleChange",
-              "privacy": "private",
-              "description": "The onChange function updates the checkbox state and emits an event for consumers.",
+              "description": "Captures the native change event and wraps it in a custom event.",
               "parameters": [
@@ -167,4 +195,5 @@ {
               "type": {
-                "text": "CheckboxProps['value']"
+                "text": "CheckboxProps['value'] | undefined"
               },
+              "default": "'on'",
               "fieldName": "value"
@@ -213,2 +242,9 @@ },
               "fieldName": "indeterminate"
+            },
+            {
+              "name": "aria",
+              "type": {
+                "text": "CheckboxProps['aria']"
+              },
+              "fieldName": "aria"
             }
@@ -218,2 +254,6 @@ ],
             {
+              "name": "FormControlMixin",
+              "package": "@justeattakeaway/pie-webc-core"
+            },
+            {
               "name": "RtlMixin",
@@ -220,0 +260,0 @@ "package": "@justeattakeaway/pie-webc-core"

dist/index.d.ts

 import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
+import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { PropertyValues } 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 {
@@ -38,2 +46,6 @@ /**
     required?: boolean;
+    /**
+     * Various ARIA attributes.
+     */
+    aria?: AriaProps;
 }
@@ -47,3 +59,3 @@
  * @tagname pie-checkbox
- * @slot - Default slot (checkbox label)
+ *  * @event {CustomEvent} change - when checked state is changed.
  */
@@ -56,3 +68,3 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxProps {
     };
-    value: CheckboxProps['value'];
+    value?: CheckboxProps['value'];
     label?: CheckboxProps['label'];
@@ -64,3 +76,5 @@ name?: CheckboxProps['name'];
     indeterminate?: CheckboxProps['indeterminate'];
+    aria: CheckboxProps['aria'];
     private checkbox?;
+    private handleClick;
     /**
@@ -72,6 +86,14 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
     /**
-     * The onChange function updates the checkbox state and emits an event for consumers.
+     * Called after the disabled state of the element changes,
+     * either because the disabled attribute of this element was added or removed;
+     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+     * @param disabled - The latest disabled state of the input.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    protected updated(_changedProperties: PropertyValues<this>): void;
+    /**
+     * Captures the native change event and wraps it in a custom event.
      * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
      */
-    private handleChange;
+    handleChange: (event: Event) => void;
     render(): TemplateResult<1>;
@@ -81,4 +103,4 @@ static styles: CSSResult;
 
-declare const PieCheckbox_base: GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
 
 export { }

dist/index.js

@@ -1,23 +0,26 @@
-import { LitElement as h, html as m, unsafeCSS as y } from "lit";
-import { RtlMixin as f, wrapNativeEvent as b, defineCustomElement as v } from "@justeattakeaway/pie-webc-core";
-import { property as n, query as g } from "lit/decorators.js";
-import { ifDefined as c } from "lit/directives/if-defined.js";
-const x = `*,*:after,*:before{box-sizing:inherit}
-`, d = {
+import { LitElement as b, html as y, nothing as p, unsafeCSS as f } from "lit";
+import { FormControlMixin as v, RtlMixin as k, wrapNativeEvent as x, defineCustomElement as g } from "@justeattakeaway/pie-webc-core";
+import { property as n, query as $ } from "lit/decorators.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+const C = `*,*:after,*:before{box-sizing:inherit}
+`, u = {
   required: !1,
   indeterminate: !1
 };
-var $ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, o = (l, r, i, a) => {
-  for (var t = a > 1 ? void 0 : a ? q(r, i) : r, p = l.length - 1, s; p >= 0; p--)
-    (s = l[p]) && (t = (a ? s(r, i, t) : s(t)) || t);
-  return a && t && $(r, i, t), t;
+var q = Object.defineProperty, O = Object.getOwnPropertyDescriptor, r = (c, e, l, a) => {
+  for (var i = a > 1 ? void 0 : a ? O(e, l) : e, s = c.length - 1, d; s >= 0; s--)
+    (d = c[s]) && (i = (a ? d(e, l, i) : d(i)) || i);
+  return a && i && q(e, l, i), i;
 };
-const C = "pie-checkbox";
-class e extends f(h) {
+const _ = "pie-checkbox";
+class t extends v(k(b)) {
   constructor() {
-    super(...arguments), this.required = d.required, this.indeterminate = d.indeterminate, this.handleChange = (r) => {
-      const i = b(r);
-      this.dispatchEvent(i);
+    super(...arguments), this.value = "on", this.required = u.required, this.indeterminate = u.indeterminate, this.handleChange = (e) => {
+      const l = x(e);
+      this.dispatchEvent(l);
     };
   }
+  handleClick() {
+    this.checked = !this.checked, this.indeterminate = !1;
+  }
   /**
@@ -30,59 +33,79 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
   }
+  /**
+   * Called after the disabled state of the element changes,
+   * either because the disabled attribute of this element was added or removed;
+   * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+   * @param disabled - The latest disabled state of the input.
+   */
+  formDisabledCallback(e) {
+    this.disabled = e;
+  }
+  updated(e) {
+    super.updated(e), this._internals.setFormValue(this.checked ? this.value || "on" : null);
+  }
   render() {
     const {
-      checked: r,
-      value: i,
+      checked: e,
+      value: l,
       name: a,
-      label: t,
-      disabled: p,
-      required: s,
-      indeterminate: u
+      label: i,
+      disabled: s,
+      required: d,
+      indeterminate: m,
+      aria: o
     } = this;
-    return m`
-        <label>
+    return y`
+        <label data-test-id="checkbox-component">
             <input
                 type="checkbox"
-                ?checked=${c(r)}
-                .value=${c(i)}
-                name=${c(a)}
-                ?disabled=${p}
-                ?required=${s}
-                .indeterminate=${u || d.indeterminate}
+                ?checked=${h(e)}
+                .value=${l}
+                name=${h(a)}
+                ?disabled=${s}
+                .required=${d}
+                .indeterminate=${m}
+                aria-label=${(o == null ? void 0 : o.label) || p}
+                aria-labelledby=${i ? p : (o == null ? void 0 : o.labelledby) || p}
+                aria-describedby= ${(o == null ? void 0 : o.describedby) || p}
+                @click=${this.handleClick}
                 @change=${this.handleChange}
-                data-test-id="pie-checkbox"
+                data-test-id="checkbox-input"
             />
-            ${t}
+            ${i}
         </label>`;
   }
 }
-e.shadowRootOptions = { ...h.shadowRootOptions, delegatesFocus: !0 };
-e.styles = y(x);
-o([
+t.shadowRootOptions = { ...b.shadowRootOptions, delegatesFocus: !0 };
+t.styles = f(C);
+r([
   n({ type: String })
-], e.prototype, "value", 2);
-o([
+], t.prototype, "value", 2);
+r([
   n({ type: String })
-], e.prototype, "label", 2);
-o([
+], t.prototype, "label", 2);
+r([
   n({ type: String })
-], e.prototype, "name", 2);
-o([
+], t.prototype, "name", 2);
+r([
   n({ type: Boolean })
-], e.prototype, "checked", 2);
-o([
+], t.prototype, "checked", 2);
+r([
   n({ type: Boolean, reflect: !0 })
-], e.prototype, "disabled", 2);
-o([
+], t.prototype, "disabled", 2);
+r([
   n({ type: Boolean, reflect: !0 })
-], e.prototype, "required", 2);
-o([
+], t.prototype, "required", 2);
+r([
   n({ type: Boolean })
-], e.prototype, "indeterminate", 2);
-o([
-  g("input")
-], e.prototype, "checkbox", 2);
-v(C, e);
+], t.prototype, "indeterminate", 2);
+r([
+  n({ type: Object })
+], t.prototype, "aria", 2);
+r([
+  $('input[type="checkbox"]')
+], t.prototype, "checkbox", 2);
+g(_, t);
 export {
-  e as PieCheckbox,
-  d as defaultProps
+  t as PieCheckbox,
+  u as defaultProps
 };

dist/react.d.ts

 import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
+import type { FormControlInterface } from '@justeattakeaway/pie-webc-core';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 import * as React_2 from 'react';
@@ -9,2 +11,8 @@ import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 
+export declare type AriaProps = {
+    label?: string;
+    labelledby?: string;
+    describedby?: string;
+};
+
 export declare interface CheckboxProps {
@@ -40,2 +48,6 @@ /**
     required?: boolean;
+    /**
+     * Various ARIA attributes.
+     */
+    aria?: AriaProps;
 }
@@ -51,3 +63,3 @@
  * @tagname pie-checkbox
- * @slot - Default slot (checkbox label)
+ *  * @event {CustomEvent} change - when checked state is changed.
  */
@@ -60,3 +72,3 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
     };
-    value: CheckboxProps['value'];
+    value?: CheckboxProps['value'];
     label?: CheckboxProps['label'];
@@ -68,3 +80,5 @@ name?: CheckboxProps['name'];
     indeterminate?: CheckboxProps['indeterminate'];
+    aria: CheckboxProps['aria'];
     private checkbox?;
+    private handleClick;
     /**
@@ -76,6 +90,14 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
     /**
-     * The onChange function updates the checkbox state and emits an event for consumers.
+     * Called after the disabled state of the element changes,
+     * either because the disabled attribute of this element was added or removed;
+     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+     * @param disabled - The latest disabled state of the input.
+     */
+    formDisabledCallback(disabled: boolean): void;
+    protected updated(_changedProperties: PropertyValues<this>): void;
+    /**
+     * Captures the native change event and wraps it in a custom event.
      * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
      */
-    private handleChange;
+    handleChange: (event: Event) => void;
     render(): TemplateResult<1>;
@@ -85,3 +107,3 @@ static styles: CSSResult;
 
-declare const PieCheckbox_base: GenericConstructor<RTLInterface> & typeof LitElement;
+declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
 
@@ -88,0 +110,0 @@ declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;

package.json

 {
   "name": "@justeattakeaway/pie-checkbox",
   "description": "PIE Design System Checkbox built using Web Components",
-  "version": "0.0.0-snapshot-release-20240516144918",
+  "version": "0.0.0-snapshot-release-20240522115923",
   "type": "module",
@@ -43,3 +43,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.0.0-snapshot-release-20240516144918"
+    "@justeattakeaway/pie-webc-core": "0.23.0"
   },
@@ -46,0 +46,0 @@ "volta": {

README.md

@@ -18,3 +18,4 @@ <p align="center">
 5. [Props](#props)
-6. [Contributing](#contributing)
+6. [Events](#events)
+7. [Contributing](#contributing)
 
@@ -78,3 +79,10 @@ ## pie-checkbox
 |---|---|---|---|
-| - | - | - | - |
+| `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. |
 
@@ -85,10 +93,21 @@ In your markup or JSX, you can then use these to set the properties for the `pie-checkbox` component:
 <!-- 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).

src/defs.ts

 import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 
+export type AriaProps = {
+    label?: string;
+    labelledby?: string;
+    describedby?: string;
+};
 export interface CheckboxProps {
@@ -39,2 +44,7 @@ /**
     required?: boolean;
+
+    /**
+     * Various ARIA attributes.
+     */
+    aria?: AriaProps;
 }
@@ -41,0 +51,0 @@

src/index.ts

 import {
-    LitElement, html, unsafeCSS,
+    LitElement, html, unsafeCSS, PropertyValues, nothing,
 } from 'lit';
@@ -8,2 +8,3 @@ import {
     wrapNativeEvent,
+    FormControlMixin,
 } from '@justeattakeaway/pie-webc-core';
@@ -23,9 +24,11 @@ import { property, query } from 'lit/decorators.js';
  * @tagname pie-checkbox
- * @slot - Default slot (checkbox label)
+ *  * @event {CustomEvent} change - when checked state is changed.
  */
-export class PieCheckbox extends RtlMixin(LitElement) implements CheckboxProps {
+export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxProps {
     static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
 
     @property({ type: String })
-    public value: CheckboxProps['value'];
+    // a default value for the html <input type="checkbox" /> value attribute.
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
+    public value?: CheckboxProps['value'] = 'on';
 
@@ -50,5 +53,13 @@ @property({ type: String })
 
-    @query('input')
+    @property({ type: Object })
+    public aria: CheckboxProps['aria'];
+
+    @query('input[type="checkbox"]')
     private checkbox?: HTMLInputElement;
 
+    private handleClick () {
+        this.checked = !this.checked;
+        this.indeterminate = false;
+    }
+
     /**
@@ -63,6 +74,22 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
     /**
-     * The onChange function updates the checkbox state and emits an event for consumers.
+     * Called after the disabled state of the element changes,
+     * either because the disabled attribute of this element was added or removed;
+     * or because the disabled state changed on a <fieldset> that's an ancestor of this element.
+     * @param disabled - The latest disabled state of the input.
+     */
+    public formDisabledCallback (disabled: boolean): void {
+        this.disabled = disabled;
+    }
+
+    protected updated (_changedProperties: PropertyValues<this>): void {
+        super.updated(_changedProperties);
+
+        this._internals.setFormValue(this.checked ? this.value || 'on' : null);
+    }
+
+    /**
+     * Captures the native change event and wraps it in a custom event.
      * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
      */
-    private handleChange = (event: Event) => {
+    handleChange = (event: Event) => {
         // This is because some events set `composed` to `false`.
@@ -84,15 +111,21 @@ // Reference: https://javascript.info/shadow-dom-events#event-composed
             indeterminate,
+            aria,
         } = this;
+
         return html`
-        <label>
+        <label data-test-id="checkbox-component">
             <input
                 type="checkbox"
                 ?checked=${ifDefined(checked)}
-                .value=${ifDefined(value)}
+                .value=${value}
                 name=${ifDefined(name)}
                 ?disabled=${disabled}
-                ?required=${required}
-                .indeterminate=${indeterminate || defaultProps.indeterminate}
+                .required=${required}
+                .indeterminate=${indeterminate}
+                aria-label=${aria?.label || nothing}
+                aria-labelledby=${label ? nothing : aria?.labelledby || nothing}
+                aria-describedby= ${aria?.describedby || nothing}
+                @click=${this.handleClick}
                 @change=${this.handleChange}
-                data-test-id="pie-checkbox"
+                data-test-id="checkbox-input"
             />
@@ -99,0 +132,0 @@ ${label}

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33865

increased by26.87%

Lines of code

794

increased by21.59%

Number of lines in readme file

110

increased by20.88%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@justeattakeaway/pie-webc-core@0.23.0(transitive)

• - Removed@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240516144918(transitive)

• Updated@justeattakeaway/pie-webc-core@0.23.0