@justeattakeaway/pie-checkbox - npm Package Compare versions

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

custom-elements.json

@@ -14,4 +14,22 @@ {
       "path": "src/defs.js",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    required: false,\n    indeterminate: false,\n}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
+        }
+      ]
     },
@@ -26,3 +44,168 @@ {
           "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",
+              "attribute": "required",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "CheckboxProps['indeterminate'] | undefined"
+              },
+              "privacy": "public",
+              "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"
+              },
+              "fieldName": "required"
+            },
+            {
+              "name": "indeterminate",
+              "type": {
+                "text": "CheckboxProps['indeterminate'] | undefined"
+              },
+              "fieldName": "indeterminate"
+            }
+          ],
           "mixins": [
@@ -29,0 +212,0 @@ {

dist/index.d.ts

@@ -0,1 +1,2 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
@@ -8,8 +9,65 @@ import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 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 type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'required' | 'indeterminate'>;
+
+export declare const defaultProps: DefaultProps;
+
 /**
  * @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>;
@@ -16,0 +74,0 @@ static styles: CSSResult;

dist/index.js

@@ -1,14 +0,87 @@
-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 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 = {
+  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;
+};
+const C = "pie-checkbox";
+class e extends f(h) {
+  constructor() {
+    super(...arguments), this.required = d.required, this.indeterminate = d.indeterminate, this.handleChange = (r) => {
+      const i = b(r);
+      this.dispatchEvent(i);
+    };
+  }
+  /**
+   * (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: r,
+      value: i,
+      name: a,
+      label: t,
+      disabled: p,
+      required: s,
+      indeterminate: u
+    } = this;
+    return m`
+        <label>
+            <input
+                type="checkbox"
+                ?checked=${c(r)}
+                .value=${c(i)}
+                name=${c(a)}
+                ?disabled=${p}
+                ?required=${s}
+                .indeterminate=${u || d.indeterminate}
+                @change=${this.handleChange}
+                data-test-id="pie-checkbox"
+            />
+            ${t}
+        </label>`;
   }
 }
-e.styles = n(s);
-r(l, e);
+e.shadowRootOptions = { ...h.shadowRootOptions, delegatesFocus: !0 };
+e.styles = y(x);
+o([
+  n({ type: String })
+], e.prototype, "value", 2);
+o([
+  n({ type: String })
+], e.prototype, "label", 2);
+o([
+  n({ type: String })
+], e.prototype, "name", 2);
+o([
+  n({ type: Boolean })
+], e.prototype, "checked", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+o([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "required", 2);
+o([
+  n({ type: Boolean })
+], e.prototype, "indeterminate", 2);
+o([
+  g("input")
+], e.prototype, "checkbox", 2);
+v(C, e);
 export {
-  e as PieCheckbox
+  e as PieCheckbox,
+  d as defaultProps
 };

dist/react.d.ts

@@ -0,1 +1,2 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
@@ -9,4 +10,37 @@ import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 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 type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'required' | 'indeterminate'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const PieCheckbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<PieCheckbox_2> & ReactBaseType>;
@@ -16,4 +50,28 @@
  * @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>;
@@ -20,0 +78,0 @@ static styles: CSSResult;

dist/react.js

 import * as e from "react";
 import { createComponent as o } from "@lit/react";
 import { PieCheckbox as t } from "./index.js";
+import { defaultProps as h } from "./index.js";
 import "lit";
 import "@justeattakeaway/pie-webc-core";
-const c = o({
+import "lit/decorators.js";
+import "lit/directives/if-defined.js";
+const r = o({
   displayName: "PieCheckbox",
@@ -12,5 +15,6 @@ elementClass: t,
   events: {}
-}), p = c;
+}), x = r;
 export {
-  p as PieCheckbox
+  x as PieCheckbox,
+  h as defaultProps
 };

package.json

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

src/defs.ts

@@ -1,3 +0,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 {}
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
+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;
+}
+
+export type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'required' | 'indeterminate'>;
+
+export const defaultProps: DefaultProps = {
+    required: false,
+    indeterminate: false,
+};
+

src/index.ts

@@ -1,6 +0,14 @@
-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';
+import { CheckboxProps, defaultProps } from './defs';
 
@@ -14,6 +22,76 @@ // Valid values available to consumers
  * @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'] = defaultProps.required;
+
+    @property({ type: Boolean })
+    public indeterminate?: CheckboxProps['indeterminate'] = defaultProps.indeterminate;
+
+    @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 || defaultProps.indeterminate}
+                @change=${this.handleChange}
+                data-test-id="pie-checkbox"
+            />
+            ${label}
+        </label>`;
     }
@@ -20,0 +98,0 @@

New 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

26692

increased by152.38%

Lines of code

653

increased by260.77%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

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

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

• Updated@justeattakeaway/pie-webc-core@0.0.0-snapshot-release-20240516144918