@justeattakeaway/pie-checkbox 0.4.0 → 0.5.0

package/README.md

@@ -30,11 +30,9 @@ This component can be easily integrated into various frontend frameworks and cus
 To install `pie-checkbox` in your application, run the following on your command line:
 
 ```bash
-# npm
-$ npm i @justeattakeaway/pie-checkbox
+npm i @justeattakeaway/pie-checkbox
 
-# yarn
-$ yarn add @justeattakeaway/pie-checkbox
+yarn add @justeattakeaway/pie-checkbox
 ```
 
 For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
@@ -80,7 +78,8 @@ import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react';
 | `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). |
+| `checked` | `boolean` | `false` | Controls whether or not the checkbox is checked. |
+| `defaultChecked` | `boolean` | `false` | Sets the default checked state for the checkbox. This does not directly set the initial checked state when the page loads, use `checked` for that. If the checkbox is inside a form which is reset, the `checked` state will be updated to match `defaultChecked`. |
 | `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. |
 
@@ -107,4 +106,4 @@ In your markup or JSX, you can then use these to set the properties for the `pie
 
 ## 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).
+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

@@ -18,7 +18,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    // a default value for the html <input type=\"checkbox\" /> value attribute.\n    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n    value: 'on',\n    required: false,\n    indeterminate: false,\n    checked: false,\n}"
+          "default": "{\n    // a default value for the html <input type=\"checkbox\" /> value attribute.\n    // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value\n    value: 'on',\n    required: false,\n    defaultChecked: false,\n    indeterminate: false,\n    checked: false,\n}"
         }
       ],
       "exports": [
@@ -81,6 +81,13 @@
               "attribute": "checked",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "defaultChecked",
+              "privacy": "public",
+              "attribute": "defaultChecked",
+              "reflects": true
+            },
             {
               "kind": "field",
               "name": "disabled",
@@ -124,7 +131,7 @@
               "kind": "field",
               "name": "checkbox",
               "type": {
-                "text": "HTMLInputElement | undefined"
+                "text": "HTMLInputElement"
               },
               "privacy": "private"
             },
@@ -183,6 +190,17 @@
                 }
               ],
               "description": "Captures the native change event and wraps it in a custom event."
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Called when the form that contains this component is reset.\nIf the current checked state is different to the default checked state,\nthe checked state is reset to the default checked state and a `change` event is emitted."
             }
           ],
           "events": [
@@ -217,6 +235,10 @@
               "name": "checked",
               "fieldName": "checked"
             },
+            {
+              "name": "defaultChecked",
+              "fieldName": "defaultChecked"
+            },
             {
               "name": "disabled",
               "type": {

package/dist/index.d.ts

@@ -31,7 +31,11 @@ export declare interface CheckboxProps {
      */
     disabled?: boolean;
     /**
-     * Indicates whether or not the checkbox is checked.
+     * The default checked state of the checkbox (not necessarily the same as the current checked state).
+     */
+    defaultChecked?: boolean;
+    /**
+     * The checked state of the checkbox.
      */
     checked?: boolean;
     /**
@@ -49,7 +53,7 @@ export declare interface CheckboxProps {
     aria?: AriaProps;
 }
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked'>;
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked'>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -67,11 +71,12 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
     label?: CheckboxProps['label'];
     name?: CheckboxProps['name'];
     checked: boolean;
+    defaultChecked: boolean;
     disabled?: CheckboxProps['disabled'];
     required?: CheckboxProps['required'];
     indeterminate?: CheckboxProps['indeterminate'];
     aria: CheckboxProps['aria'];
-    private checkbox?;
+    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
@@ -95,6 +100,12 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
      * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
      */
     private handleChange;
+    /**
+     * Called when the form that contains this component is reset.
+     * If the current checked state is different to the default checked state,
+     * the checked state is reset to the default checked state and a `change` event is emitted.
+     */
+    formResetCallback(): void;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }

package/dist/index.js

@@ -1,26 +1,27 @@
-import { LitElement as u, html as b, nothing as d, unsafeCSS as f } from "lit";
-import { FormControlMixin as y, RtlMixin as v, wrapNativeEvent as g, defineCustomElement as k } from "@justeattakeaway/pie-webc-core";
-import { live as x } from "lit/directives/live.js";
-import { property as a, query as $ } from "lit/decorators.js";
-import { ifDefined as C } from "lit/directives/if-defined.js";
+import { LitElement as u, html as f, nothing as h, unsafeCSS as b } from "lit";
+import { FormControlMixin as y, RtlMixin as k, wrapNativeEvent as v, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
+import { live as g } from "lit/directives/live.js";
+import { property as s, query as x } from "lit/decorators.js";
+import { ifDefined as $ } from "lit/directives/if-defined.js";
 const F = `*,*:after,*:before{box-sizing:inherit}
-`, p = {
+`, d = {
   // a default value for the html <input type="checkbox" /> value attribute.
   // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
   value: "on",
   required: !1,
+  defaultChecked: !1,
   indeterminate: !1,
   checked: !1
 };
-var _ = Object.defineProperty, q = Object.getOwnPropertyDescriptor, i = (h, e, n, s) => {
-  for (var o = s > 1 ? void 0 : s ? q(e, n) : e, l = h.length - 1, c; l >= 0; l--)
-    (c = h[l]) && (o = (s ? c(e, n, o) : c(o)) || o);
-  return s && o && _(e, n, o), o;
+var E = Object.defineProperty, q = Object.getOwnPropertyDescriptor, r = (p, e, n, a) => {
+  for (var o = a > 1 ? void 0 : a ? q(e, n) : e, c = p.length - 1, l; c >= 0; c--)
+    (l = p[c]) && (o = (a ? l(e, n, o) : l(o)) || o);
+  return a && o && E(e, n, o), o;
 };
-const O = "pie-checkbox";
-class t extends y(v(u)) {
+const A = "pie-checkbox";
+class t extends y(k(u)) {
   constructor() {
-    super(...arguments), this.value = p.value, this.checked = p.checked, this.required = p.required, this.indeterminate = p.indeterminate;
+    super(...arguments), this.value = d.value, this.checked = d.checked, this.defaultChecked = d.defaultChecked, this.required = d.required, this.indeterminate = d.indeterminate;
   }
   /**
    * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -33,7 +34,7 @@ class t extends y(v(u)) {
    * Ensures that the form value is in sync with the component.
    */
   handleFormAssociation() {
-    !!this._internals.form && !!this.name && this._internals.setFormValue(this.checked ? this.value : null);
+    !!this.form && !!this.name && this._internals.setFormValue(this.checked ? this.value : null);
   }
   /**
    * Called after the disabled state of the element changes,
@@ -57,33 +58,45 @@ class t extends y(v(u)) {
   handleChange(e) {
     const { checked: n } = e == null ? void 0 : e.currentTarget;
     this.checked = n;
-    const s = g(e);
-    this.dispatchEvent(s), this.handleFormAssociation();
+    const a = v(e);
+    this.dispatchEvent(a), this.handleFormAssociation();
+  }
+  /**
+   * Called when the form that contains this component is reset.
+   * If the current checked state is different to the default checked state,
+   * the checked state is reset to the default checked state and a `change` event is emitted.
+   */
+  formResetCallback() {
+    if (this.checked === this.defaultChecked)
+      return;
+    this.checked = this.defaultChecked;
+    const e = new Event("change", { bubbles: !0, composed: !0 });
+    this.dispatchEvent(e), this.handleFormAssociation();
   }
   render() {
     const {
       checked: e,
       value: n,
-      name: s,
+      name: a,
       label: o,
-      disabled: l,
-      required: c,
+      disabled: c,
+      required: l,
       indeterminate: m,
-      aria: r
+      aria: i
     } = this;
-    return b`
+    return f`
         <label data-test-id="checkbox-component">
             <input
                 type="checkbox"
                 .value=${n}
-                ?checked=${x(e)}
-                name=${C(s)}
-                ?disabled=${l}
-                ?required=${c}
-                .indeterminate=${m}
-                aria-label=${(r == null ? void 0 : r.label) || d}
-                aria-labelledby=${o ? d : (r == null ? void 0 : r.labelledby) || d}
-                aria-describedby= ${(r == null ? void 0 : r.describedby) || d}
+                .checked=${g(e)}
+                name=${$(a)}
+                ?disabled=${c}
+                ?required=${l}
+                .indeterminate=${!!m}
+                aria-label=${(i == null ? void 0 : i.label) || h}
+                aria-labelledby=${o ? h : (i == null ? void 0 : i.labelledby) || h}
+                aria-describedby= ${(i == null ? void 0 : i.describedby) || h}
                 @change=${this.handleChange}
                 data-test-id="checkbox-input"
             />
@@ -92,36 +105,39 @@ class t extends y(v(u)) {
   }
 }
 t.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 };
-t.styles = f(F);
-i([
-  a({ type: String })
+t.styles = b(F);
+r([
+  s({ type: String })
 ], t.prototype, "value", 2);
-i([
-  a({ type: String })
+r([
+  s({ type: String })
 ], t.prototype, "label", 2);
-i([
-  a({ type: String })
+r([
+  s({ type: String })
 ], t.prototype, "name", 2);
-i([
-  a({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "checked", 2);
-i([
-  a({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
+], t.prototype, "defaultChecked", 2);
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
-i([
-  a({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "required", 2);
-i([
-  a({ type: Boolean, reflect: !0 })
+r([
+  s({ type: Boolean, reflect: !0 })
 ], t.prototype, "indeterminate", 2);
-i([
-  a({ type: Object })
+r([
+  s({ type: Object })
 ], t.prototype, "aria", 2);
-i([
-  $('input[type="checkbox"]')
+r([
+  x('input[type="checkbox"]')
 ], t.prototype, "checkbox", 2);
-k(O, t);
+C(A, t);
 export {
   t as PieCheckbox,
-  p as defaultProps
+  d as defaultProps
 };

package/dist/react.d.ts

@@ -32,7 +32,11 @@ export declare interface CheckboxProps {
      */
     disabled?: boolean;
     /**
-     * Indicates whether or not the checkbox is checked.
+     * The default checked state of the checkbox (not necessarily the same as the current checked state).
+     */
+    defaultChecked?: boolean;
+    /**
+     * The checked state of the checkbox.
      */
     checked?: boolean;
     /**
@@ -50,7 +54,7 @@ export declare interface CheckboxProps {
     aria?: AriaProps;
 }
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked'>;
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked'>;
 
 export declare const defaultProps: DefaultProps;
 
@@ -70,11 +74,12 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
     label?: CheckboxProps['label'];
     name?: CheckboxProps['name'];
     checked: boolean;
+    defaultChecked: boolean;
     disabled?: CheckboxProps['disabled'];
     required?: CheckboxProps['required'];
     indeterminate?: CheckboxProps['indeterminate'];
     aria: CheckboxProps['aria'];
-    private checkbox?;
+    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
@@ -98,6 +103,12 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
      * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
      */
     private handleChange;
+    /**
+     * Called when the form that contains this component is reset.
+     * If the current checked state is different to the default checked state,
+     * the checked state is reset to the default checked state and a `change` event is emitted.
+     */
+    formResetCallback(): void;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }

package/package.json

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

package/src/defs.ts

@@ -27,7 +27,12 @@ export interface CheckboxProps {
     disabled?: boolean;
 
     /**
-     * Indicates whether or not the checkbox is checked.
+     * The default checked state of the checkbox (not necessarily the same as the current checked state).
+     */
+    defaultChecked?: boolean;
+
+    /**
+     * The checked state of the checkbox.
      */
     checked?: boolean;
 
@@ -48,14 +53,14 @@ export interface CheckboxProps {
     aria?: AriaProps;
 }
 
-export type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' >;
+export type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked'>;
 
 export const defaultProps: DefaultProps = {
     // a default value for the html <input type="checkbox" /> value attribute.
     // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
     value: 'on',
     required: false,
+    defaultChecked: false,
     indeterminate: false,
     checked: false,
 };
-

package/src/index.ts

@@ -38,6 +38,9 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
     @property({ type: Boolean, reflect: true })
     public checked = defaultProps.checked;
 
+    @property({ type: Boolean, reflect: true })
+    public defaultChecked = defaultProps.defaultChecked;
+
     @property({ type: Boolean, reflect: true })
     public disabled?: CheckboxProps['disabled'];
 
@@ -51,7 +54,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
     public aria: CheckboxProps['aria'];
 
     @query('input[type="checkbox"]')
-    private checkbox?: HTMLInputElement;
+    private checkbox!: HTMLInputElement;
 
     /**
      * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -65,7 +68,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
      * Ensures that the form value is in sync with the component.
      */
     private handleFormAssociation () : void {
-        const isFormAssociated = !!this._internals.form && !!this.name;
+        const isFormAssociated = !!this.form && !!this.name;
         if (isFormAssociated) {
             this._internals.setFormValue(this.checked ? this.value : null);
         }
@@ -108,6 +111,24 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
         this.handleFormAssociation();
     }
 
+    /**
+     * Called when the form that contains this component is reset.
+     * If the current checked state is different to the default checked state,
+     * the checked state is reset to the default checked state and a `change` event is emitted.
+     */
+    public formResetCallback () : void {
+        if (this.checked === this.defaultChecked) {
+            return;
+        }
+
+        this.checked = this.defaultChecked;
+
+        const changeEvent = new Event('change', { bubbles: true, composed: true });
+        this.dispatchEvent(changeEvent);
+
+        this.handleFormAssociation();
+    }
+
     render () {
         const {
             checked,
@@ -125,11 +146,11 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
             <input
                 type="checkbox"
                 .value=${value}
-                ?checked=${live(checked)}
+                .checked=${live(checked)}
                 name=${ifDefined(name)}
                 ?disabled=${disabled}
                 ?required=${required}
-                .indeterminate=${indeterminate}
+                .indeterminate=${!!indeterminate}
                 aria-label=${aria?.label || nothing}
                 aria-labelledby=${label ? nothing : aria?.labelledby || nothing}
                 aria-describedby= ${aria?.describedby || nothing}