@justeattakeaway/pie-checkbox - npm Package Compare versions

Comparing version 0.0.0-snapshot-release-20240611141559 to 0.0.0-snapshot-release-20240618142823

custom-elements.json

@@ -17,2 +17,10 @@ {
           "kind": "variable",
+          "name": "statusTypes",
+          "type": {
+            "text": "['default', 'success', 'error']"
+          },
+          "default": "['default', 'success', 'error']"
+        },
+        {
+          "kind": "variable",
           "name": "defaultProps",
@@ -22,3 +30,3 @@ "type": {
           },
-          "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}"
+          "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    status: 'default',\n}"
         }
@@ -29,2 +37,10 @@ ],
           "kind": "js",
+          "name": "statusTypes",
+          "declaration": {
+            "name": "statusTypes",
+            "module": "src/defs.js"
+          }
+        },
+        {
+          "kind": "js",
           "name": "defaultProps",
@@ -139,6 +155,24 @@ "declaration": {
               },
-              "privacy": "public"
+              "privacy": "private"
             },
             {
               "kind": "field",
+              "name": "assistiveText",
+              "type": {
+                "text": "CheckboxProps['assistiveText'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "assistiveText"
+            },
+            {
+              "kind": "field",
+              "name": "status",
+              "type": {
+                "text": "CheckboxProps['status'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "status"
+            },
+            {
+              "kind": "field",
               "name": "validity",
@@ -273,2 +307,16 @@ "type": {
               "fieldName": "aria"
+            },
+            {
+              "name": "assistiveText",
+              "type": {
+                "text": "CheckboxProps['assistiveText'] | undefined"
+              },
+              "fieldName": "assistiveText"
+            },
+            {
+              "name": "status",
+              "type": {
+                "text": "CheckboxProps['status'] | undefined"
+              },
+              "fieldName": "status"
             }
@@ -275,0 +323,0 @@ ],

dist/index.d.ts

@@ -13,3 +13,2 @@ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
     labelledby?: string;
-    describedby?: string;
 };
@@ -55,5 +54,13 @@
     aria?: AriaProps;
+    /**
+     * An optional assistive text to display below the input element. Must be provided when the status is success or error.
+     */
+    assistiveText?: string;
+    /**
+     * The status of the checkbox component / assistive text. Can be default, success or error.
+     */
+    status?: typeof statusTypes[number];
 }
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked'>;
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked' | 'status'>;
 
@@ -81,3 +88,5 @@ export declare const defaultProps: DefaultProps;
     aria: CheckboxProps['aria'];
-    checkbox: HTMLInputElement;
+    private checkbox;
+    assistiveText?: CheckboxProps['assistiveText'];
+    status?: CheckboxProps['status'];
     /**
@@ -118,2 +127,4 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
 
+export declare const statusTypes: readonly ["default", "success", "error"];
+
 export { }

dist/index.js

@@ -1,8 +0,8 @@
-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}
-`, d = {
+import { LitElement as y, html as m, nothing as p, unsafeCSS as g } from "lit";
+import { FormControlMixin as C, RtlMixin as $, wrapNativeEvent as F, validPropertyValues as E, defineCustomElement as S } from "@justeattakeaway/pie-webc-core";
+import { live as q } from "lit/directives/live.js";
+import { property as i, query as A } from "lit/decorators.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+const O = `*,*:after,*:before{box-sizing:inherit}
+`, P = ["default", "success", "error"], n = {
   // a default value for the html <input type="checkbox" /> value attribute.
@@ -14,13 +14,14 @@ // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
   indeterminate: !1,
-  checked: !1
+  checked: !1,
+  status: "default"
 };
-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;
+var _ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (h, e, r, a) => {
+  for (var o = a > 1 ? void 0 : a ? w(e, r) : e, d = h.length - 1, l; d >= 0; d--)
+    (l = h[d]) && (o = (a ? l(e, r, o) : l(o)) || o);
+  return a && o && _(e, r, o), o;
 };
-const A = "pie-checkbox";
-class t extends y(k(u)) {
+const v = "pie-checkbox", b = "assistive-text";
+class t extends C($(y)) {
   constructor() {
-    super(...arguments), this.value = d.value, this.checked = d.checked, this.defaultChecked = d.defaultChecked, this.required = d.required, this.indeterminate = d.indeterminate;
+    super(...arguments), this.value = n.value, this.checked = n.checked, this.defaultChecked = n.defaultChecked, this.required = n.required, this.indeterminate = n.indeterminate, this.status = n.status;
   }
@@ -60,5 +61,5 @@ /**
   handleChange(e) {
-    const { checked: n } = e == null ? void 0 : e.currentTarget;
-    this.checked = n;
-    const a = v(e);
+    const { checked: r } = e == null ? void 0 : e.currentTarget;
+    this.checked = r;
+    const a = F(e);
     this.dispatchEvent(a), this.handleFormAssociation();
@@ -81,23 +82,25 @@ }
       checked: e,
-      value: n,
+      value: r,
       name: a,
       label: o,
-      disabled: c,
+      disabled: d,
       required: l,
-      indeterminate: m,
-      aria: i
+      indeterminate: k,
+      aria: c,
+      assistiveText: u,
+      status: x
     } = this;
-    return f`
+    return m`
         <label data-test-id="checkbox-component">
             <input
                 type="checkbox"
-                .value=${n}
-                .checked=${g(e)}
-                name=${$(a)}
-                ?disabled=${c}
+                .value=${r}
+                .checked=${q(e)}
+                name=${f(a)}
+                ?disabled=${d}
                 ?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}
+                .indeterminate=${!!k}
+                aria-label=${(c == null ? void 0 : c.label) || p}
+                aria-labelledby=${o ? p : (c == null ? void 0 : c.labelledby) || p}
+                aria-describedby=${f(u ? b : void 0)}
                 @change=${this.handleChange}
@@ -107,41 +110,50 @@ data-test-id="checkbox-input"
             ${o}
-        </label>`;
+        </label>
+        ${u ? m`<pie-assistive-text id="${b}" variant=${f(x)} data-test-id="pie-checkbox-assistive-text">${u}</pie-assistive-text>` : p}`;
   }
 }
-t.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 };
-t.styles = b(F);
-r([
-  s({ type: String })
+t.shadowRootOptions = { ...y.shadowRootOptions, delegatesFocus: !0 };
+t.styles = g(O);
+s([
+  i({ type: String })
 ], t.prototype, "value", 2);
-r([
-  s({ type: String })
+s([
+  i({ type: String })
 ], t.prototype, "label", 2);
-r([
-  s({ type: String })
+s([
+  i({ type: String })
 ], t.prototype, "name", 2);
-r([
-  s({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "checked", 2);
-r([
-  s({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "defaultChecked", 2);
-r([
-  s({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
-r([
-  s({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "required", 2);
-r([
-  s({ type: Boolean, reflect: !0 })
+s([
+  i({ type: Boolean, reflect: !0 })
 ], t.prototype, "indeterminate", 2);
-r([
-  s({ type: Object })
+s([
+  i({ type: Object })
 ], t.prototype, "aria", 2);
-r([
-  x('input[type="checkbox"]')
+s([
+  A('input[type="checkbox"]')
 ], t.prototype, "checkbox", 2);
-C(A, t);
+s([
+  i({ type: String })
+], t.prototype, "assistiveText", 2);
+s([
+  i({ type: String }),
+  E(v, P, n.status)
+], t.prototype, "status", 2);
+S(v, t);
 export {
   t as PieCheckbox,
-  d as defaultProps
+  n as defaultProps,
+  P as statusTypes
 };

dist/react.d.ts

@@ -14,3 +14,2 @@ import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
     labelledby?: string;
-    describedby?: string;
 };
@@ -56,5 +55,13 @@
     aria?: AriaProps;
+    /**
+     * An optional assistive text to display below the input element. Must be provided when the status is success or error.
+     */
+    assistiveText?: string;
+    /**
+     * The status of the checkbox component / assistive text. Can be default, success or error.
+     */
+    status?: typeof statusTypes[number];
 }
 
-export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked'>;
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked' | 'status'>;
 
@@ -84,3 +91,5 @@ export declare const defaultProps: DefaultProps;
     aria: CheckboxProps['aria'];
-    checkbox: HTMLInputElement;
+    private checkbox;
+    assistiveText?: CheckboxProps['assistiveText'];
+    status?: CheckboxProps['status'];
     /**
@@ -127,2 +136,4 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
 
+export declare const statusTypes: readonly ["default", "success", "error"];
+
 export { }

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 b } from "./index.js";
+import { defaultProps as b, statusTypes as k } from "./index.js";
 import "lit";
@@ -22,3 +22,4 @@ import "@justeattakeaway/pie-webc-core";
   h as PieCheckbox,
-  b as defaultProps
+  b as defaultProps,
+  k as statusTypes
 };

package.json

 {
   "name": "@justeattakeaway/pie-checkbox",
   "description": "PIE Design System Checkbox built using Web Components",
-  "version": "0.0.0-snapshot-release-20240611141559",
+  "version": "0.0.0-snapshot-release-20240618142823",
   "type": "module",
@@ -6,0 +6,0 @@ "main": "dist/index.js",

README.md

@@ -74,13 +74,15 @@ <p align="center">
 
-| 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` | 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. |
+| 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`   | 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. |
+| `assistiveText` | `string`                            | `''`      | Allows assistive text to be displayed below the checkbox element. |
+| `status` | `'default'`, `'error'`, `'success'` | `'default'` | The status of the checkbox component / assistive text. If you use `status` you must provide an `assistiveText` prop value for accessibility purposes. |
 
@@ -87,0 +89,0 @@ In your markup or JSX, you can then use these to set the properties for the `pie-checkbox` component:

src/defs.ts

 import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 
+export const statusTypes = ['default', 'success', 'error'] as const;
+
 export type AriaProps = {
     label?: string;
     labelledby?: string;
-    describedby?: string;
 };
@@ -54,5 +55,15 @@ export interface CheckboxProps {
     aria?: AriaProps;
+
+    /**
+     * An optional assistive text to display below the input element. Must be provided when the status is success or error.
+     */
+    assistiveText?: string;
+
+    /**
+     * The status of the checkbox component / assistive text. Can be default, success or error.
+     */
+    status?: typeof statusTypes[number];
 }
 
-export type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked'>;
+export type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'value' | 'required' | 'indeterminate' | 'checked' | 'defaultChecked' | 'status'>;
 
@@ -67,2 +78,3 @@ export const defaultProps: DefaultProps = {
     checked: false,
+    status: 'default',
 };

src/index.ts

@@ -9,2 +9,3 @@ import {
     FormControlMixin,
+    validPropertyValues,
 } from '@justeattakeaway/pie-webc-core';
@@ -16,3 +17,3 @@ import { live } from 'lit/directives/live.js';
 import styles from './checkbox.scss?inline';
-import { CheckboxProps, defaultProps } from './defs';
+import { CheckboxProps, defaultProps, statusTypes } from './defs';
 
@@ -23,2 +24,3 @@ // Valid values available to consumers
 const componentSelector = 'pie-checkbox';
+const assistiveTextIdValue = 'assistive-text';
 
@@ -60,4 +62,11 @@ /**
     @query('input[type="checkbox"]')
-    public checkbox!: HTMLInputElement;
+    private checkbox!: HTMLInputElement;
 
+    @property({ type: String })
+    public assistiveText?: CheckboxProps['assistiveText'];
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, statusTypes, defaultProps.status)
+    public status?: CheckboxProps['status'] = defaultProps.status;
+
     /**
@@ -146,2 +155,4 @@ * (Read-only) returns a ValidityState with the validity states that this element is in.
             aria,
+            assistiveText,
+            status,
         } = this;
@@ -161,3 +172,3 @@
                 aria-labelledby=${label ? nothing : aria?.labelledby || nothing}
-                aria-describedby= ${aria?.describedby || nothing}
+                aria-describedby=${ifDefined(assistiveText ? assistiveTextIdValue : undefined)}
                 @change=${this.handleChange}
@@ -167,3 +178,4 @@ data-test-id="checkbox-input"
             ${label}
-        </label>`;
+        </label>
+        ${assistiveText ? html`<pie-assistive-text id="${assistiveTextIdValue}" variant=${ifDefined(status)} data-test-id="pie-checkbox-assistive-text">${assistiveText}</pie-assistive-text>` : nothing}`;
     }
@@ -170,0 +182,0 @@

No alert changes

Improved metrics

Total package byte prevSize

43728

increased by11.72%

Lines of code

1025

increased by10.93%

Number of lines in readme file

112

increased by1.82%

No dependency changes