npm - @justeattakeaway/pie-checkbox - Versions diffs - 0.5.0 → 0.7.0 - Mend

@justeattakeaway/pie-checkbox 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md CHANGED Viewed

@@ -71,17 +71,19 @@ import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react';
 ## Props
-| 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. |
 In your markup or JSX, you can then use these to set the properties for the `pie-checkbox` component:

package/custom-elements.json CHANGED Viewed

@@ -12,16 +12,32 @@
       "kind": "javascript-module",
       "path": "src/defs.js",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "statusTypes",
+          "type": {
+            "text": "['default', 'success', 'error']"
+          },
+          "default": "['default', 'success', 'error']"
+        },
         {
           "kind": "variable",
           "name": "defaultProps",
           "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    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}"
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "statusTypes",
+          "declaration": {
+            "name": "statusTypes",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "defaultProps",
@@ -101,9 +117,6 @@
             {
               "kind": "field",
               "name": "required",
-              "type": {
-                "text": "CheckboxProps['required'] | undefined"
-              },
               "privacy": "public",
               "attribute": "required",
               "reflects": true
@@ -111,9 +124,6 @@
             {
               "kind": "field",
               "name": "indeterminate",
-              "type": {
-                "text": "CheckboxProps['indeterminate'] | undefined"
-              },
               "privacy": "public",
               "attribute": "indeterminate",
               "reflects": true
@@ -135,6 +145,21 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "assistiveText",
+              "type": {
+                "text": "CheckboxProps['assistiveText'] | undefined"
+              },
+              "privacy": "public",
+              "attribute": "assistiveText"
+            },
+            {
+              "kind": "field",
+              "name": "status",
+              "privacy": "public",
+              "attribute": "status"
+            },
             {
               "kind": "field",
               "name": "validity",
@@ -248,16 +273,10 @@
             },
             {
               "name": "required",
-              "type": {
-                "text": "CheckboxProps['required'] | undefined"
-              },
               "fieldName": "required"
             },
             {
               "name": "indeterminate",
-              "type": {
-                "text": "CheckboxProps['indeterminate'] | undefined"
-              },
               "fieldName": "indeterminate"
             },
             {
@@ -266,6 +285,17 @@
                 "text": "CheckboxProps['aria']"
               },
               "fieldName": "aria"
+            },
+            {
+              "name": "assistiveText",
+              "type": {
+                "text": "CheckboxProps['assistiveText'] | undefined"
+              },
+              "fieldName": "assistiveText"
+            },
+            {
+              "name": "status",
+              "fieldName": "status"
             }
           ],
           "mixins": [

package/dist/index.d.ts CHANGED Viewed

@@ -10,7 +10,6 @@ import type { TemplateResult } from 'lit-html';
 export declare type AriaProps = {
     label?: string;
     labelledby?: string;
-    describedby?: string;
 };
 export declare interface CheckboxProps {
@@ -51,9 +50,17 @@ export declare interface CheckboxProps {
      * Various ARIA attributes.
      */
     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'>;
 export declare const defaultProps: DefaultProps;
@@ -73,10 +80,12 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
     checked: boolean;
     defaultChecked: boolean;
     disabled?: CheckboxProps['disabled'];
-    required?: CheckboxProps['required'];
-    indeterminate?: CheckboxProps['indeterminate'];
+    required: boolean;
+    indeterminate: boolean;
     aria: CheckboxProps['aria'];
     private checkbox;
+    assistiveText?: CheckboxProps['assistiveText'];
+    status: "default" | "error" | "success";
     /**
      * (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
@@ -112,4 +121,6 @@ export declare class PieCheckbox extends PieCheckbox_base implements CheckboxPro
 declare const PieCheckbox_base: GenericConstructor<FormControlInterface> & GenericConstructor<RTLInterface> & typeof LitElement;
+export declare const statusTypes: readonly ["default", "success", "error"];
 export { }

package/dist/index.js CHANGED Viewed

@@ -1,27 +1,29 @@
-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 g, html as u, nothing as h, unsafeCSS as w } from "lit";
+import { property as c, query as $ } from "lit/decorators.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { live as x } from "lit/directives/live.js";
+import { FormControlMixin as C, RtlMixin as F, wrapNativeEvent as E, validPropertyValues as S, defineCustomElement as q } from "@justeattakeaway/pie-webc-core";
+import "@justeattakeaway/pie-assistive-text";
+const A = `*,*:after,*:before{box-sizing:inherit}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(.7)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick[data-pie-disabled]{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick[data-pie-status=error]{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick[data-pie-checked]{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick[data-pie-checked]:not([data-pie-disabled]){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick[data-pie-checked][data-pie-status=error]{--checkbox-border-color: var(--dt-color-support-error);--checkbox-bg-color: var(--dt-color-support-error)}.c-checkbox-tick[data-pie-checked]:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%;animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}@media (prefers-reduced-motion: reduce){.c-checkbox-tick[data-pie-checked]:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick[data-pie-checked]:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick[data-pie-indeterminate]:not([data-pie-disabled]){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--dt-color-interactive-brand)}.c-checkbox-tick[data-pie-indeterminate][data-pie-status=error]{--checkbox-border-color: var(--dt-color-support-error);--checkbox-bg-color: var(--dt-color-support-error)}.c-checkbox-tick[data-pie-indeterminate]:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick[data-pie-indeterminate]:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-size:var(--checkbox-font-size);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-size: var(--dt-font-body-l-size);--checkbox-font-weight: var(--dt-font-weight-regular);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-interactive-form);--checkbox-content-color: var(--dt-color-content-default);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))));transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-active-01))));transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}.c-checkbox[data-pie-disabled] label{cursor:default;pointer-events:none}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox[data-pie-disabled]:hover .c-checkbox-tick,.c-checkbox[data-pie-disabled]:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox[data-pie-status=error]:hover .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))))}.c-checkbox[data-pie-status=error]:active .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-active-01))))}.c-checkbox[data-pie-checked]:not([data-pie-disabled]):hover .c-checkbox-tick,.c-checkbox[data-pie-indeterminate]:not([data-pie-disabled]):hover .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-hover-01))));--checkbox-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-hover-01))))}.c-checkbox[data-pie-checked][data-pie-status=error]:hover .c-checkbox-tick,.c-checkbox[data-pie-indeterminate][data-pie-status=error]:hover .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-hover-01))));--checkbox-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-hover-01))))}.c-checkbox[data-pie-checked]:not([data-pie-disabled]):active .c-checkbox-tick,.c-checkbox[data-pie-indeterminate]:not([data-pie-disabled]):active .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-active-01))));--checkbox-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-active-01))))}.c-checkbox[data-pie-checked][data-pie-status=error]:active .c-checkbox-tick,.c-checkbox[data-pie-indeterminate][data-pie-status=error]:active .c-checkbox-tick{--checkbox-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-active-01))));--checkbox-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-active-01))))}
+`, O = ["default", "success", "error"], n = {
   // 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
+  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 P = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, o = (b, e, d, i) => {
+  for (var r = i > 1 ? void 0 : i ? _(e, d) : e, a = b.length - 1, s; a >= 0; a--)
+    (s = b[a]) && (r = (i ? s(e, d, r) : s(r)) || r);
+  return i && r && P(e, d, r), r;
 };
-const A = "pie-checkbox";
-class t extends y(k(u)) {
+const y = "pie-checkbox", m = "assistive-text";
+class t extends C(F(g)) {
   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;
   }
   /**
    * (Read-only) returns a ValidityState with the validity states that this element is in.
@@ -56,10 +58,10 @@ class t extends y(k(u)) {
    * @param {Event} event - This should be the change event that was listened for on an input element with `type="checkbox"`.
    */
   handleChange(e) {
-    const { checked: n } = e == null ? void 0 : e.currentTarget;
-    this.checked = n;
-    const a = v(e);
-    this.dispatchEvent(a), this.handleFormAssociation();
+    const { checked: d } = e == null ? void 0 : e.currentTarget;
+    this.checked = d;
+    const i = E(e);
+    this.dispatchEvent(i), this.handleFormAssociation();
   }
   /**
    * Called when the form that contains this component is reset.
@@ -76,68 +78,99 @@ class t extends y(k(u)) {
   render() {
     const {
       checked: e,
-      value: n,
-      name: a,
-      label: o,
-      disabled: c,
-      required: l,
-      indeterminate: m,
-      aria: i
+      value: d,
+      name: i,
+      label: r,
+      disabled: a,
+      required: s,
+      indeterminate: p,
+      aria: l,
+      assistiveText: k,
+      status: v
     } = this;
-    return f`
-        <label data-test-id="checkbox-component">
+    return u`
+        <div
+            class="c-checkbox"
+            data-pie-status=${!a && v}
+            ?data-pie-disabled=${x(a)}
+            ?data-pie-checked=${e}
+            ?data-pie-indeterminate=${p && !e}>
             <input
                 type="checkbox"
-                .value=${n}
-                .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}
+                id="inputId"
+                .value=${d}
+                .checked=${x(e)}
+                name=${f(i)}
+                ?disabled=${a}
+                ?required=${s}
+                .indeterminate=${p}
+                aria-label=${(l == null ? void 0 : l.label) || h}
+                aria-labelledby=${r ? h : (l == null ? void 0 : l.labelledby) || h}
+                aria-describedby=${f(k ? m : void 0)}
                 @change=${this.handleChange}
                 data-test-id="checkbox-input"
             />
-            ${o}
-        </label>`;
+            <label for="inputId" data-test-id="checkbox-component">
+                <span
+                    class="c-checkbox-tick"
+                    ?data-pie-checked=${e}
+                    ?data-pie-disabled=${x(a)}
+                    data-pie-status=${!a && v}
+                    ?data-pie-indeterminate=${p && !e}></span>
+                <span class="c-checkbox-text">${r}</span>
+            </label>
+            ${k ? u`
+                <pie-assistive-text
+                    id="${m}"
+                    variant=${v}
+                    data-test-id="pie-checkbox-assistive-text">
+                        ${k}
+                </pie-assistive-text>` : h}
+        </div>`;
   }
 }
-t.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 };
-t.styles = b(F);
-r([
-  s({ type: String })
+t.shadowRootOptions = { ...g.shadowRootOptions, delegatesFocus: !0 };
+t.styles = w(A);
+o([
+  c({ type: String })
 ], t.prototype, "value", 2);
-r([
-  s({ type: String })
+o([
+  c({ type: String })
 ], t.prototype, "label", 2);
-r([
-  s({ type: String })
+o([
+  c({ type: String })
 ], t.prototype, "name", 2);
-r([
-  s({ type: Boolean, reflect: !0 })
+o([
+  c({ type: Boolean, reflect: !0 })
 ], t.prototype, "checked", 2);
-r([
-  s({ type: Boolean, reflect: !0 })
+o([
+  c({ type: Boolean, reflect: !0 })
 ], t.prototype, "defaultChecked", 2);
-r([
-  s({ type: Boolean, reflect: !0 })
+o([
+  c({ type: Boolean, reflect: !0 })
 ], t.prototype, "disabled", 2);
-r([
-  s({ type: Boolean, reflect: !0 })
+o([
+  c({ type: Boolean, reflect: !0 })
 ], t.prototype, "required", 2);
-r([
-  s({ type: Boolean, reflect: !0 })
+o([
+  c({ type: Boolean, reflect: !0 })
 ], t.prototype, "indeterminate", 2);
-r([
-  s({ type: Object })
+o([
+  c({ type: Object })
 ], t.prototype, "aria", 2);
-r([
-  x('input[type="checkbox"]')
+o([
+  $('input[type="checkbox"]')
 ], t.prototype, "checkbox", 2);
-C(A, t);
+o([
+  c({ type: String })
+], t.prototype, "assistiveText", 2);
+o([
+  c({ type: String }),
+  S(y, O, n.status)
+], t.prototype, "status", 2);
+q(y, t);
 export {
   t as PieCheckbox,
-  d as defaultProps
+  n as defaultProps,
+  O as statusTypes
 };

package/dist/react.d.ts CHANGED Viewed

@@ -11,7 +11,6 @@ import type { TemplateResult } from 'lit-html';
 export declare type AriaProps = {
     label?: string;
     labelledby?: string;
-    describedby?: string;
 };
 export declare interface CheckboxProps {
@@ -52,9 +51,17 @@ export declare interface CheckboxProps {
      * Various ARIA attributes.
      */
     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'>;
 export declare const defaultProps: DefaultProps;
@@ -76,10 +83,12 @@ declare class PieCheckbox_2 extends PieCheckbox_base implements CheckboxProps {
     checked: boolean;
     defaultChecked: boolean;
     disabled?: CheckboxProps['disabled'];
-    required?: CheckboxProps['required'];
-    indeterminate?: CheckboxProps['indeterminate'];
+    required: boolean;
+    indeterminate: boolean;
     aria: CheckboxProps['aria'];
     private checkbox;
+    assistiveText?: CheckboxProps['assistiveText'];
+    status: "default" | "error" | "success";
     /**
      * (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
@@ -121,4 +130,6 @@ declare type PieCheckboxEvents = {
 declare type ReactBaseType = React_2.InputHTMLAttributes<HTMLInputElement>;
+export declare const statusTypes: readonly ["default", "success", "error"];
 export { }

package/dist/react.js CHANGED Viewed

@@ -1,12 +1,13 @@
 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 k, statusTypes as P } from "./index.js";
 import "lit";
-import "@justeattakeaway/pie-webc-core";
-import "lit/directives/live.js";
 import "lit/decorators.js";
 import "lit/directives/if-defined.js";
+import "lit/directives/live.js";
+import "@justeattakeaway/pie-webc-core";
+import "@justeattakeaway/pie-assistive-text";
 const r = o({
   displayName: "PieCheckbox",
   elementClass: t,
@@ -16,8 +17,9 @@ const r = o({
     onChange: "change"
     // when checked state is changed.
   }
-}), h = r;
+}), x = r;
 export {
-  h as PieCheckbox,
-  b as defaultProps
+  x as PieCheckbox,
+  k as defaultProps,
+  P as statusTypes
 };

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox",
   "description": "PIE Design System Checkbox built using Web Components",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -40,6 +40,7 @@
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
+    "@justeattakeaway/pie-assistive-text": "0.5.0",
     "@justeattakeaway/pie-webc-core": "0.23.0"
   },
   "volta": {

package/src/checkbox.scss CHANGED Viewed

@@ -1 +1,299 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+@keyframes checkboxCheck {
+    0% {
+        width: 0;
+        height: 0;
+        border-color: #fff;
+        transform: translate3d(0, 0, 0) rotate(45deg);
+    }
+    33% {
+        width: 8px;
+        height: 0;
+        transform: translate3d(0, 0, 0) rotate(45deg);
+    }
+    100% {
+        width: 8px;
+        height: 16px;
+        border-color: #fff;
+        border-bottom-right-radius: 2px;
+        transform: translate3d(0, -16px, 0) rotate(45deg);
+    }
+}
+@keyframes scaleDown {
+    0% {
+        transform: scale(0.7);
+    }
+    100% {
+        transform: scale(0);
+    }
+}
+@keyframes scaleUp {
+    0% {
+        transform: scale(0);
+    }
+    33% {
+        transform: scale(0.5);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+.c-checkbox-tick {
+    content: "";
+    display: flex;
+    flex: 0 0 auto;
+    width: var(--checkbox-width);
+    height: var(--checkbox-height);
+    margin: var(--checkbox-margin);
+    border: 1px solid var(--checkbox-border-color);
+    border-radius: var(--checkbox-radius);
+    background-color: var(--checkbox-bg-color);
+    @media (prefers-reduced-motion: no-preference) {
+        transition: background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
+        animation: scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing);
+    }
+    &[data-pie-disabled] {
+        --checkbox-bg-color: var(--dt-color-container-strong);
+        --checkbox-border-color: var(--dt-color-disabled-01);
+    }
+    &[data-pie-status="error"] {
+        --checkbox-border-color: var(--dt-color-support-error);
+    }
+    &[data-pie-checked] {
+        @media (prefers-reduced-motion: no-preference) {
+            animation: scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing);
+        }
+        &:not([data-pie-disabled]) {
+            --checkbox-bg-color: var(--dt-color-interactive-brand);
+            --checkbox-border-color: var(--dt-color-interactive-brand);
+        }
+        &[data-pie-status="error"] {
+            --checkbox-border-color: var(--dt-color-support-error);
+            --checkbox-bg-color: var(--dt-color-support-error);
+        }
+    }
+    &[data-pie-checked]:before {
+        content: "";
+        position: relative;
+        top: 55%;
+        left: 14%;
+        border-right: 2px solid transparent;
+        border-bottom: 2px solid transparent;
+        transform: rotate(45deg);
+        transform-origin: 0% 100%;
+        animation: checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards;
+        @media (prefers-reduced-motion: reduce) {
+            animation: none;
+            width: 8px;
+            height: 16px;
+            border-color: #fff;
+            border-bottom-right-radius: 2px;
+            transform: translate3d(0, -16px, 0) rotate(45deg);
+        }
+        @media only percy {
+            animation: none;
+            width: 8px;
+            height: 16px;
+            border-color: #fff;
+            border-bottom-right-radius: 2px;
+            transform: translate3d(0, -16px, 0) rotate(45deg);
+        }
+    }
+    &[data-pie-indeterminate] {
+        &:not([data-pie-disabled]) {
+            --checkbox-bg-color: var(--dt-color-interactive-brand);
+            --checkbox-border-color: var(--dt-color-interactive-brand);
+        }
+        &[data-pie-status="error"] {
+            --checkbox-border-color: var(--dt-color-support-error);
+            --checkbox-bg-color: var(--dt-color-support-error);
+        }
+    }
+    &[data-pie-indeterminate]:after {
+        width: 16px;
+        @media (prefers-reduced-motion: no-preference) {
+            transition: width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100);
+        }
+    }
+}
+.c-checkbox-text {
+    display: inline;
+    flex: 1 1 auto;
+    align-self: center;
+    min-width: 0;
+    margin-inline-start: var(--checkbox-gap);
+    white-space: normal;
+    color: var(--checkbox-content-color);
+    font-size: var(--checkbox-font-size);
+    font-weight: var(--checkbox-font-weight);
+}
+// initial styles for indeterminate state
+.c-checkbox-tick:after {
+    content: "";
+    position: relative;
+    top: 47%;
+    left: 14%;
+    width: 0;
+    height: 2px;
+    background-color: white;
+}
+.c-checkbox {
+    --checkbox-height: 24px;
+    --checkbox-width: 24px;
+    --checkbox-radius: var(--dt-radius-rounded-a);
+    --checkbox-margin: 1px;
+    --checkbox-gap: var(--dt-spacing-b);
+    --checkbox-font-size: var(--dt-font-body-l-size);
+    --checkbox-font-weight: var(--dt-font-weight-regular);
+    --checkbox-bg-color: var(--dt-color-container-default);
+    --checkbox-border-color: var(--dt-color-interactive-form);
+    --checkbox-content-color: var(--dt-color-content-default);
+    --checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);
+    display: flex;
+    flex-direction: column;
+    input {
+        display: block;
+        position: absolute;
+        height: 1px;
+        width: 1px;
+        overflow: hidden;
+        clip: rect(1px, 1px, 1px, 1px);
+        clip-path: inset(1px);
+        white-space: nowrap;
+    }
+    label {
+        display: flex;
+        max-width: 100%;
+        white-space: nowrap;
+        cursor: pointer;
+    }
+    &:hover {
+        .c-checkbox-tick {
+            --checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))));
+            transition: background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing);
+        }
+    }
+    &:active {
+        .c-checkbox-tick {
+            --checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-active-01))));
+            transition: background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing);
+        }
+    }
+    &[data-pie-disabled] {
+        label {
+            cursor: default;
+            pointer-events: none;
+        }
+    }
+    input:focus-visible + label {
+        .c-checkbox-tick {
+            @include p.focus;
+        }
+    }
+    &[data-pie-disabled] {
+        &:hover,
+        &:active {
+            .c-checkbox-tick {
+                --checkbox-bg-color: var(--dt-color-container-strong);
+                --checkbox-border-color: var(--dt-color-disabled-01);
+            }
+        }
+    }
+    &[data-pie-status="error"] {
+        &:hover {
+            .c-checkbox-tick {
+                --checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))));
+            }
+        }
+        &:active {
+            .c-checkbox-tick {
+                --checkbox-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-active-01))));
+            }
+        }
+    }
+    &[data-pie-checked],
+    &[data-pie-indeterminate] {
+        &:not([data-pie-disabled]):hover {
+            .c-checkbox-tick {
+                --checkbox-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-hover-01))));
+                --checkbox-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-hover-01))));
+            }
+        }
+        &[data-pie-status="error"]:hover {
+            .c-checkbox-tick {
+                --checkbox-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-hover-01))));
+                --checkbox-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-hover-01))));
+            }
+        }
+        &:not([data-pie-disabled]):active {
+            .c-checkbox-tick {
+                --checkbox-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-active-01))));
+                --checkbox-border-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + calc(-1 * var(--dt-color-active-01))));
+            }
+        }
+        &[data-pie-status="error"]:active {
+            .c-checkbox-tick {
+                --checkbox-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-active-01))));
+                --checkbox-border-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + calc(-1 * var(--dt-color-active-01))));
+            }
+        }
+    }
+}

package/src/defs.ts CHANGED Viewed

@@ -1,9 +1,10 @@
 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;
 };
 export interface CheckboxProps {
     /**
@@ -51,9 +52,19 @@ export interface CheckboxProps {
      * Various ARIA attributes.
      */
     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'>;
 export const defaultProps: DefaultProps = {
     // a default value for the html <input type="checkbox" /> value attribute.
@@ -63,4 +74,5 @@ export const defaultProps: DefaultProps = {
     defaultChecked: false,
     indeterminate: false,
     checked: false,
+    status: 'default',
 };

package/src/index.ts CHANGED Viewed

@@ -1,23 +1,27 @@
 import {
     LitElement, html, unsafeCSS, PropertyValues, nothing,
 } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
 import {
     RtlMixin,
     defineCustomElement,
     wrapNativeEvent,
     FormControlMixin,
+    validPropertyValues,
 } from '@justeattakeaway/pie-webc-core';
-import { live } from 'lit/directives/live.js';
-import { property, query } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
+import '@justeattakeaway/pie-assistive-text';
 import styles from './checkbox.scss?inline';
-import { CheckboxProps, defaultProps } from './defs';
+import { CheckboxProps, defaultProps, statusTypes } from './defs';
 // Valid values available to consumers
 export * from './defs';
 const componentSelector = 'pie-checkbox';
+const assistiveTextIdValue = 'assistive-text';
 /**
  * @tagname pie-checkbox
@@ -45,10 +49,10 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
     public disabled?: CheckboxProps['disabled'];
     @property({ type: Boolean, reflect: true })
-    public required?: CheckboxProps['required'] = defaultProps.required;
+    public required = defaultProps.required;
     @property({ type: Boolean, reflect: true })
-    public indeterminate?: CheckboxProps['indeterminate'] = defaultProps.indeterminate;
+    public indeterminate = defaultProps.indeterminate;
     @property({ type: Object })
     public aria: CheckboxProps['aria'];
@@ -56,6 +60,13 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
     @query('input[type="checkbox"]')
     private checkbox!: HTMLInputElement;
+    @property({ type: String })
+    public assistiveText?: CheckboxProps['assistiveText'];
+    @property({ type: String })
+    @validPropertyValues(componentSelector, statusTypes, defaultProps.status)
+    public status = defaultProps.status;
     /**
      * (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
@@ -139,26 +150,49 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
             required,
             indeterminate,
             aria,
+            assistiveText,
+            status,
         } = this;
         return html`
-        <label data-test-id="checkbox-component">
+        <div
+            class="c-checkbox"
+            data-pie-status=${!disabled && status}
+            ?data-pie-disabled=${live(disabled)}
+            ?data-pie-checked=${checked}
+            ?data-pie-indeterminate=${indeterminate && !checked}>
             <input
                 type="checkbox"
+                id="inputId"
                 .value=${value}
                 .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}
+                aria-describedby=${ifDefined(assistiveText ? assistiveTextIdValue : undefined)}
                 @change=${this.handleChange}
                 data-test-id="checkbox-input"
             />
-            ${label}
-        </label>`;
+            <label for="inputId" data-test-id="checkbox-component">
+                <span
+                    class="c-checkbox-tick"
+                    ?data-pie-checked=${checked}
+                    ?data-pie-disabled=${live(disabled)}
+                    data-pie-status=${!disabled && status}
+                    ?data-pie-indeterminate=${indeterminate && !checked}></span>
+                <span class="c-checkbox-text">${label}</span>
+            </label>
+            ${assistiveText ? html`
+                <pie-assistive-text
+                    id="${assistiveTextIdValue}"
+                    variant=${status}
+                    data-test-id="pie-checkbox-assistive-text">
+                        ${assistiveText}
+                </pie-assistive-text>` : nothing}
+        </div>`;
     }
     // Renders a `CSSResult` generated from SCSS by Vite