@justeattakeaway/pie-checkbox-group 0.3.0 → 0.4.0

package/README.md

@@ -104,6 +104,7 @@ In your markup or JSX, you can then use these to set the properties for the `pie
 | Event | Type | Description |
 |-------|------|-------------|
 | `pie-checkbox-group-disabled` | `CustomEvent` | Triggered after the disabled state of the checkbox group changes. |
+| `pie-checkbox-group-error` | `CustomEvent` | Triggered after the state of the checkbox group changes to error. |
 
 ## Contributing
 

package/custom-elements.json

@@ -29,6 +29,14 @@
           "default": "'pie-checkbox-group-disabled'",
           "description": "Event name for when checkbox group becomes disabled."
         },
+        {
+          "kind": "variable",
+          "name": "ON_CHECKBOX_GROUP_ERROR",
+          "type": {
+            "text": "string"
+          },
+          "default": "'pie-checkbox-group-error'"
+        },
         {
           "kind": "variable",
           "name": "defaultProps",
@@ -55,6 +63,14 @@
             "module": "src/defs.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "ON_CHECKBOX_GROUP_ERROR",
+          "declaration": {
+            "name": "ON_CHECKBOX_GROUP_ERROR",
+            "module": "src/defs.js"
+          }
+        },
         {
           "kind": "js",
           "name": "defaultProps",
@@ -130,7 +146,7 @@
               "kind": "field",
               "name": "_slottedChildren",
               "type": {
-                "text": "Array<HTMLElement>"
+                "text": "Array<HTMLElement> | undefined"
               }
             },
             {
@@ -161,6 +177,13 @@
               },
               "description": "triggered after the disabled state of the checkbox group changes.",
               "name": "pie-checkbox-group-disabled"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "triggered after the state of the checkbox group changes to error.",
+              "name": "pie-checkbox-group-error"
             }
           ],
           "attributes": [

package/dist/index.d.ts

@@ -45,10 +45,13 @@ export declare const defaultProps: DefaultProps;
  */
 export declare const ON_CHECKBOX_GROUP_DISABLED = "pie-checkbox-group-disabled";
 
+export declare const ON_CHECKBOX_GROUP_ERROR = "pie-checkbox-group-error";
+
 /**
  * @tagname pie-checkbox-group
  * @slot - Default slot
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
+ * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
  */
 export declare class PieCheckboxGroup extends PieCheckboxGroup_base implements CheckboxGroupProps {
     name?: CheckboxGroupProps['name'];
@@ -57,7 +60,7 @@ export declare class PieCheckboxGroup extends PieCheckboxGroup_base implements C
     isInline: boolean;
     status: "default" | "error" | "success";
     disabled: boolean;
-    _slottedChildren: Array<HTMLElement>;
+    _slottedChildren: Array<HTMLElement> | undefined;
     private _handleDisabled;
     private _handleStatus;
     protected updated(_changedProperties: PropertyValues<this>): void;

package/dist/index.js

@@ -1,32 +1,38 @@
 import { LitElement as x, html as d, unsafeCSS as g } from "lit";
-import { property as r, queryAssignedElements as m } from "lit/decorators.js";
-import { FormControlMixin as v, RtlMixin as k, validPropertyValues as y, defineCustomElement as G } from "@justeattakeaway/pie-webc-core";
-import { ifDefined as h } from "lit/directives/if-defined.js";
+import { property as r, queryAssignedElements as v } from "lit/decorators.js";
+import { FormControlMixin as m, RtlMixin as k, validPropertyValues as y, defineCustomElement as G } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as b } from "lit/directives/if-defined.js";
 import { classMap as _ } from "lit/directives/class-map.js";
 import "@justeattakeaway/pie-assistive-text";
 const C = `*,*:after,*:before{box-sizing:inherit}.c-checkboxGroup{--checkbox-group-offset: var(--dt-spacing-c);--checkbox-group-offset--inline: var(--dt-spacing-e);--checkbox-group-label-offset: var(--dt-spacing-a);margin:0;padding:0;border:0;min-width:0}.c-checkboxGroup ::slotted(pie-checkbox){display:flex}.c-checkboxGroup:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:first-child)){margin-block-start:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup-label{max-width:100%;white-space:normal;padding:0;font-size:calc(var(--dt-font-body-strong-s-size) * 1px);line-height:calc(var(--dt-font-body-strong-s-line-height) * 1px);font-weight:var(--dt-font-body-strong-s-weight);color:var(--dt-color-content-default);margin-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset--inline) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset--inline) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline .c-checkboxGroup-label{margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset--inline) / 2 - var(--checkbox-group-label-offset)))}
-`, w = ["default", "success", "error"], S = "pie-checkbox-group-disabled", n = {
+`, E = ["default", "success", "error"], w = "pie-checkbox-group-disabled", O = "pie-checkbox-group-error", n = {
   status: "default",
   disabled: !1,
   isInline: !1
 };
-var $ = Object.defineProperty, E = Object.getOwnPropertyDescriptor, s = (p, e, i, c) => {
-  for (var t = c > 1 ? void 0 : c ? E(e, i) : e, a = p.length - 1, l; a >= 0; a--)
-    (l = p[a]) && (t = (c ? l(e, i, t) : l(t)) || t);
-  return c && t && $(e, i, t), t;
+var S = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, i = (p, e, t, c) => {
+  for (var s = c > 1 ? void 0 : c ? $(e, t) : e, a = p.length - 1, l; a >= 0; a--)
+    (l = p[a]) && (s = (c ? l(e, t, s) : l(s)) || s);
+  return c && s && S(e, t, s), s;
 };
-const f = "pie-checkbox-group", b = "assistive-text";
-class o extends v(k(x)) {
+const u = "pie-checkbox-group", h = "assistive-text";
+class o extends m(k(x)) {
   constructor() {
     super(...arguments), this.isInline = n.isInline, this.status = n.status, this.disabled = n.disabled;
   }
   _handleDisabled() {
-    this._slottedChildren && this._slottedChildren.forEach((e) => {
-      e.dispatchEvent(new CustomEvent(S, { bubbles: !1, composed: !1, detail: { disabled: this.disabled } }));
-    });
+    var e;
+    (e = this._slottedChildren) == null || e.forEach((t) => t.dispatchEvent(new CustomEvent(w, {
+      bubbles: !1,
+      composed: !1,
+      detail: { disabled: this.disabled }
+    })));
   }
   _handleStatus() {
-    this._slottedChildren && this._slottedChildren.forEach((e) => e.setAttribute("status", this.status));
+    var e;
+    (e = this._slottedChildren) == null || e.forEach((t) => {
+      t.setAttribute("status", this.status), this.status === "error" && this.assistiveText && (t.setAttribute("assistiveText", this.assistiveText), t.dispatchEvent(new CustomEvent(O, { bubbles: !1, composed: !1, detail: { error: !0 } })));
+    });
   }
   updated(e) {
     e.has("disabled") && this._handleDisabled(), e.has("status") && this._handleStatus();
@@ -34,63 +40,64 @@ class o extends v(k(x)) {
   render() {
     const {
       name: e,
-      label: i,
+      label: t,
       isInline: c,
-      assistiveText: t,
+      assistiveText: s,
       status: a,
       disabled: l
-    } = this, u = {
+    } = this, f = {
       "c-checkboxGroup": !0,
       "c-checkboxGroup--inline": c
     };
     return d`
             <fieldset
-                name=${h(e)}
+                name=${b(e)}
                 ?disabled=${l}
-                aria-describedby="${h(t ? b : void 0)}"
+                aria-describedby="${b(s ? h : void 0)}"
                 data-test-id="pie-checkbox-group"
-                class="${_(u)}"
+                class="${_(f)}"
             >
-                ${i && d`<legend class="c-checkboxGroup-label">${i}</legend>`}
+                ${t && d`<legend class="c-checkboxGroup-label">${t}</legend>`}
                 <slot></slot>
             </fieldset>
-            ${t && d`
+            ${s && d`
                 <pie-assistive-text
-                    id="${b}"
+                    id="${h}"
                     variant=${a}
                     data-test-id="pie-checkbox-group-assistive-text">
-                        ${t}
+                        ${s}
                 </pie-assistive-text>`}
         `;
   }
 }
 o.styles = g(C);
-s([
+i([
   r({ type: String })
 ], o.prototype, "name", 2);
-s([
+i([
   r({ type: String })
 ], o.prototype, "label", 2);
-s([
+i([
   r({ type: String })
 ], o.prototype, "assistiveText", 2);
-s([
+i([
   r({ type: Boolean })
 ], o.prototype, "isInline", 2);
-s([
+i([
   r({ type: String }),
-  y(f, w, n.status)
+  y(u, E, n.status)
 ], o.prototype, "status", 2);
-s([
+i([
   r({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
-s([
-  m({})
+i([
+  v({ selector: "pie-checkbox" })
 ], o.prototype, "_slottedChildren", 2);
-G(f, o);
+G(u, o);
 export {
-  S as ON_CHECKBOX_GROUP_DISABLED,
+  w as ON_CHECKBOX_GROUP_DISABLED,
+  O as ON_CHECKBOX_GROUP_ERROR,
   o as PieCheckboxGroup,
   n as defaultProps,
-  w as statusTypes
+  E as statusTypes
 };

package/dist/react.d.ts

@@ -46,12 +46,15 @@ export declare const defaultProps: DefaultProps;
  */
 export declare const ON_CHECKBOX_GROUP_DISABLED = "pie-checkbox-group-disabled";
 
+export declare const ON_CHECKBOX_GROUP_ERROR = "pie-checkbox-group-error";
+
 export declare const PieCheckboxGroup: React_2.ForwardRefExoticComponent<CheckboxGroupProps & React_2.RefAttributes<PieCheckboxGroup_2> & PieCheckboxGroupEvents & ReactBaseType>;
 
 /**
  * @tagname pie-checkbox-group
  * @slot - Default slot
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
+ * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
  */
 declare class PieCheckboxGroup_2 extends PieCheckboxGroup_base implements CheckboxGroupProps {
     name?: CheckboxGroupProps['name'];
@@ -60,7 +63,7 @@ declare class PieCheckboxGroup_2 extends PieCheckboxGroup_base implements Checkb
     isInline: boolean;
     status: "default" | "error" | "success";
     disabled: boolean;
-    _slottedChildren: Array<HTMLElement>;
+    _slottedChildren: Array<HTMLElement> | undefined;
     private _handleDisabled;
     private _handleStatus;
     protected updated(_changedProperties: PropertyValues<this>): void;
@@ -72,6 +75,7 @@ declare const PieCheckboxGroup_base: GenericConstructor<FormControlInterface> &
 
 declare type PieCheckboxGroupEvents = {
     onPieCheckboxGroupDisabled?: (event: CustomEvent) => void;
+    onPieCheckboxGroupError?: (event: CustomEvent) => void;
 };
 
 declare type ReactBaseType = React_2.FieldsetHTMLAttributes<HTMLFieldSetElement>;

package/dist/react.js

@@ -1,7 +1,7 @@
 import * as o from "react";
 import { createComponent as e } from "@lit/react";
 import { PieCheckboxGroup as r } from "./index.js";
-import { ON_CHECKBOX_GROUP_DISABLED as k, defaultProps as P, statusTypes as n } from "./index.js";
+import { ON_CHECKBOX_GROUP_DISABLED as k, ON_CHECKBOX_GROUP_ERROR as P, defaultProps as G, statusTypes as n } from "./index.js";
 import "lit";
 import "lit/decorators.js";
 import "@justeattakeaway/pie-webc-core";
@@ -14,13 +14,16 @@ const p = e({
   react: o,
   tagName: "pie-checkbox-group",
   events: {
-    onPieCheckboxGroupDisabled: "pie-checkbox-group-disabled"
+    onPieCheckboxGroupDisabled: "pie-checkbox-group-disabled",
     // triggered after the disabled state of the checkbox group changes.
+    onPieCheckboxGroupError: "pie-checkbox-group-error"
+    // triggered after the state of the checkbox group changes to error.
   }
-}), x = p;
+}), u = p;
 export {
   k as ON_CHECKBOX_GROUP_DISABLED,
-  x as PieCheckboxGroup,
-  P as defaultProps,
+  P as ON_CHECKBOX_GROUP_ERROR,
+  u as PieCheckboxGroup,
+  G as defaultProps,
   n as statusTypes
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox-group",
   "description": "PIE Design System Checkbox Group built using Web Components",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "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-assistive-text": "0.5.1",
+    "@justeattakeaway/pie-assistive-text": "0.6.0",
     "@justeattakeaway/pie-webc-core": "0.24.0"
   },
   "volta": {

package/src/defs.ts

@@ -40,6 +40,7 @@ export interface CheckboxGroupProps {
  * @constant
  */
 export const ON_CHECKBOX_GROUP_DISABLED = 'pie-checkbox-group-disabled';
+export const ON_CHECKBOX_GROUP_ERROR = 'pie-checkbox-group-error';
 
 export type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled' | 'isInline'>;
 

package/src/index.ts

@@ -13,6 +13,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import styles from './checkbox-group.scss?inline';
 import {
     ON_CHECKBOX_GROUP_DISABLED,
+    ON_CHECKBOX_GROUP_ERROR,
     CheckboxGroupProps,
     defaultProps,
     statusTypes,
@@ -29,6 +30,7 @@ const assistiveTextId = 'assistive-text';
  * @tagname pie-checkbox-group
  * @slot - Default slot
  * @event {CustomEvent} pie-checkbox-group-disabled - triggered after the disabled state of the checkbox group changes.
+ * @event {CustomEvent} pie-checkbox-group-error - triggered after the state of the checkbox group changes to error.
  */
 export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) implements CheckboxGroupProps {
     @property({ type: String })
@@ -50,20 +52,23 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(LitElement)) imp
     @property({ type: Boolean, reflect: true })
     public disabled = defaultProps.disabled;
 
-    @queryAssignedElements({}) _slottedChildren!: Array<HTMLElement>;
+    @queryAssignedElements({ selector: 'pie-checkbox' }) _slottedChildren: Array<HTMLElement> | undefined;
 
     private _handleDisabled () : void {
-        if (this._slottedChildren) {
-            this._slottedChildren.forEach((child) => {
-                child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_DISABLED, { bubbles: false, composed: false, detail: { disabled: this.disabled } }));
-            });
-        }
+        this._slottedChildren?.forEach((child) => child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_DISABLED, {
+            bubbles: false, composed: false, detail: { disabled: this.disabled },
+        })));
     }
 
     private _handleStatus () : void {
-        if (this._slottedChildren) {
-            this._slottedChildren.forEach((child) => child.setAttribute('status', this.status));
-        }
+        this._slottedChildren?.forEach((child) => {
+            child.setAttribute('status', this.status);
+
+            if (this.status === 'error' && this.assistiveText) {
+                child.setAttribute('assistiveText', this.assistiveText);
+                child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_ERROR, { bubbles: false, composed: false, detail: { error: true } }));
+            }
+        });
     }
 
     protected updated (_changedProperties: PropertyValues<this>): void {

package/src/react.ts

@@ -12,6 +12,7 @@ const PieCheckboxGroupReact = createComponent({
     tagName: 'pie-checkbox-group',
     events: {
         onPieCheckboxGroupDisabled: 'pie-checkbox-group-disabled' as EventName<CustomEvent>, // triggered after the disabled state of the checkbox group changes.
+        onPieCheckboxGroupError: 'pie-checkbox-group-error' as EventName<CustomEvent>, // triggered after the state of the checkbox group changes to error.
     },
 });
 
@@ -19,6 +20,7 @@ type ReactBaseType = React.FieldsetHTMLAttributes<HTMLFieldSetElement>
 
 type PieCheckboxGroupEvents = {
     onPieCheckboxGroupDisabled?: (event: CustomEvent) => void;
+    onPieCheckboxGroupError?: (event: CustomEvent) => void;
 };
 
 export const PieCheckboxGroup = PieCheckboxGroupReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<CheckboxGroupProps>