@justeattakeaway/pie-checkbox 0.2.0 → 0.3.1

package/README.md

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

@@ -11,8 +11,26 @@
     {
       "kind": "javascript-module",
       "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"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -91,7 +109,6 @@
                 "text": "CheckboxProps['required'] | undefined"
               },
               "privacy": "public",
-              "default": "false",
               "attribute": "required",
               "reflects": true
             },
@@ -102,9 +119,17 @@
                 "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",
@@ -180,7 +205,6 @@
               "type": {
                 "text": "CheckboxProps['required'] | undefined"
               },
-              "default": "false",
               "fieldName": "required"
             },
             {
@@ -188,8 +212,14 @@
               "type": {
                 "text": "CheckboxProps['indeterminate'] | undefined"
               },
-              "default": "false",
               "fieldName": "indeterminate"
+            },
+            {
+              "name": "aria",
+              "type": {
+                "text": "CheckboxProps['aria']"
+              },
+              "fieldName": "aria"
             }
           ],
           "mixins": [

package/dist/index.d.ts

@@ -1,9 +1,16 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 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`).
@@ -34,8 +41,16 @@ export declare interface CheckboxProps {
      * If true, the checkbox must be checked for the form to be submittable.
      */
     required?: boolean;
+    /**
+     * Various ARIA attributes.
+     */
+    aria?: AriaProps;
 }
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'required' | 'indeterminate'>;
+
+export declare const defaultProps: DefaultProps;
+
 /**
  * @tagname pie-checkbox
  * @slot - Default slot (checkbox label)
@@ -53,6 +68,7 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
     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.

package/dist/index.js

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

package/dist/react.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { GenericConstructor } from '@justeattakeaway/pie-webc-core';
 import type { LitElement } from 'lit';
@@ -5,6 +6,12 @@ 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`).
@@ -35,8 +42,16 @@ export declare interface CheckboxProps {
      * If true, the checkbox must be checked for the form to be submittable.
      */
     required?: boolean;
+    /**
+     * Various ARIA attributes.
+     */
+    aria?: AriaProps;
 }
 
+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>;
 
 /**
@@ -56,6 +71,7 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
     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.

package/dist/react.js

@@ -1,17 +1,19 @@
 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";
 import "lit/decorators.js";
 import "lit/directives/if-defined.js";
-const i = o({
+const r = o({
   displayName: "PieCheckbox",
   elementClass: t,
   react: e,
   tagName: "pie-checkbox",
   events: {}
-}), x = i;
+}), x = r;
 export {
-  x as PieCheckbox
+  x as PieCheckbox,
+  h as defaultProps
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox",
   "description": "PIE Design System Checkbox built using Web Components",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,7 +40,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.22.0"
+    "@justeattakeaway/pie-webc-core": "0.23.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,3 +1,10 @@
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
+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`).
@@ -34,4 +41,17 @@ export interface CheckboxProps {
      * If true, the checkbox must be checked for the form to be submittable.
      */
     required?: boolean;
+
+    /**
+     * Various ARIA attributes.
+     */
+    aria?: AriaProps;
 }
+
+export type DefaultProps = ComponentDefaultPropsGeneric<CheckboxProps, 'required' | 'indeterminate'>;
+
+export const defaultProps: DefaultProps = {
+    required: false,
+    indeterminate: false,
+};
+

package/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    LitElement, html, unsafeCSS,
+    LitElement, html, unsafeCSS, nothing,
 } from 'lit';
 import {
     RtlMixin,
@@ -10,7 +10,7 @@ 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';
 
 // Valid values available to consumers
 export * from './defs';
@@ -40,10 +40,13 @@ export class PieCheckbox extends RtlMixin(LitElement) implements CheckboxProps {
     public disabled?: CheckboxProps['disabled'];
 
     @property({ type: Boolean, reflect: true })
-    public required?: CheckboxProps['required'] = false;
+    public required?: CheckboxProps['required'] = defaultProps.required;
 
     @property({ type: Boolean })
-    public indeterminate?: CheckboxProps['indeterminate'] = false;
+    public indeterminate?: CheckboxProps['indeterminate'] = defaultProps.indeterminate;
+
+    @property({ type: Object })
+    public aria: CheckboxProps['aria'];
 
     @query('input')
     private checkbox?: HTMLInputElement;
@@ -77,7 +80,9 @@ export class PieCheckbox extends RtlMixin(LitElement) implements CheckboxProps {
             disabled,
             required,
             indeterminate,
+            aria,
         } = this;
+
         return html`
         <label>
             <input
@@ -88,6 +93,9 @@ export class PieCheckbox extends RtlMixin(LitElement) implements CheckboxProps {
                 ?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"
             />