@justeattakeaway/pie-checkbox 0.2.0 → 0.3.0

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

@@ -105,6 +105,15 @@
               "default": "false",
               "attribute": "indeterminate"
             },
+            {
+              "kind": "field",
+              "name": "aria",
+              "type": {
+                "text": "CheckboxProps['aria']"
+              },
+              "privacy": "public",
+              "attribute": "aria"
+            },
             {
               "kind": "field",
               "name": "checkbox",
@@ -190,6 +199,13 @@
               },
               "default": "false",
               "fieldName": "indeterminate"
+            },
+            {
+              "name": "aria",
+              "type": {
+                "text": "CheckboxProps['aria']"
+              },
+              "fieldName": "aria"
             }
           ],
           "mixins": [

package/dist/index.d.ts

@@ -4,6 +4,12 @@ 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,6 +40,10 @@ export declare interface CheckboxProps {
      * If true, the checkbox must be checked for the form to be submittable.
      */
     required?: boolean;
+    /**
+     * Various ARIA attributes.
+     */
+    aria?: AriaProps;
 }
 
 /**
@@ -53,6 +63,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,20 @@
-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}
+import { LitElement as b, html as u, nothing as c, unsafeCSS as m } from "lit";
+import { RtlMixin as f, wrapNativeEvent as v, defineCustomElement as g } from "@justeattakeaway/pie-webc-core";
+import { property as i, query as $ } from "lit/decorators.js";
+import { ifDefined as h } from "lit/directives/if-defined.js";
+const x = `*,*: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;
+var C = Object.defineProperty, O = Object.getOwnPropertyDescriptor, r = (d, n, p, l) => {
+  for (var t = l > 1 ? void 0 : l ? O(n, p) : n, a = d.length - 1, s; a >= 0; a--)
+    (s = d[a]) && (t = (l ? s(n, p, t) : s(t)) || t);
+  return l && t && C(n, p, t), t;
 };
-const C = "pie-checkbox";
-class e extends y(d) {
+const S = "pie-checkbox";
+class e extends f(b) {
   constructor() {
-    super(...arguments), this.required = !1, this.indeterminate = !1, this.handleChange = (o) => {
-      const n = f(o);
-      this.dispatchEvent(n);
+    super(...arguments), this.required = !1, this.indeterminate = !1, this.handleChange = (n) => {
+      const p = v(n);
+      this.dispatchEvent(p);
     };
   }
   /**
@@ -26,24 +26,28 @@ class e extends y(d) {
   }
   render() {
     const {
-      checked: o,
-      value: n,
-      name: p,
+      checked: n,
+      value: p,
+      name: l,
       label: t,
       disabled: a,
       required: s,
-      indeterminate: h
+      indeterminate: y,
+      aria: o
     } = this;
     return u`
         <label>
             <input
                 type="checkbox"
-                ?checked=${c(o)}
-                .value=${c(n)}
-                name=${c(p)}
+                ?checked=${h(n)}
+                .value=${h(p)}
+                name=${h(l)}
                 ?disabled=${a}
                 ?required=${s}
-                .indeterminate=${h}
+                .indeterminate=${y}
+                aria-label=${(o == null ? void 0 : o.label) || c}
+                aria-labelledby=${t ? c : (o == null ? void 0 : o.labelledby) || c}
+                aria-describedby= ${(o == null ? void 0 : o.describedby) || c}
                 @change=${this.handleChange}
                 data-test-id="pie-checkbox"
             />
@@ -51,8 +55,8 @@ class e extends y(d) {
         </label>`;
   }
 }
-e.shadowRootOptions = { ...d.shadowRootOptions, delegatesFocus: !0 };
-e.styles = m(g);
+e.shadowRootOptions = { ...b.shadowRootOptions, delegatesFocus: !0 };
+e.styles = m(x);
 r([
   i({ type: String })
 ], e.prototype, "value", 2);
@@ -75,9 +79,12 @@ r([
   i({ type: Boolean })
 ], e.prototype, "indeterminate", 2);
 r([
-  v("input")
+  i({ type: Object })
+], e.prototype, "aria", 2);
+r([
+  $("input")
 ], e.prototype, "checkbox", 2);
-b(C, e);
+g(S, e);
 export {
   e as PieCheckbox
 };

package/dist/react.d.ts

@@ -5,6 +5,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,6 +41,10 @@ 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 const PieCheckbox: React_2.ForwardRefExoticComponent<CheckboxProps & React_2.RefAttributes<PieCheckbox_2> & ReactBaseType>;
@@ -56,6 +66,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/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.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -1,3 +1,8 @@
+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 +39,9 @@ export interface CheckboxProps {
      * If true, the checkbox must be checked for the form to be submittable.
      */
     required?: boolean;
+
+    /**
+     * Various ARIA attributes.
+     */
+    aria?: AriaProps;
 }

package/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    LitElement, html, unsafeCSS,
+    LitElement, html, unsafeCSS, nothing,
 } from 'lit';
 import {
     RtlMixin,
@@ -45,6 +45,9 @@ export class PieCheckbox extends RtlMixin(LitElement) implements CheckboxProps {
     @property({ type: Boolean })
     public indeterminate?: CheckboxProps['indeterminate'] = false;
 
+    @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"
             />