@justeattakeaway/pie-checkbox-group 1.1.6 → 1.2.0

package/README.md

@@ -43,7 +43,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
 
 | **Slot**     | **Description**                                                                 |
 |--------------|----------------------------------------------------------------------------------|
-| `default`    | Pass `PieCheckbox` components as direct children for the `CheckboxGroup`.       |
+| `default`    | Either `pie-checkbox` components, or [`pie-list-item`](https://webc.pie.design/?path=/docs/components-list--overview) components that each slot a `pie-checkbox` for a list-style layout (see [List items in a checkbox group](#list-items-in-a-checkbox-group)). Do not add other HTML. |
 | `label`      | Pass `PieFormLabel` to render the checkbox group label.                         |
 
 ### CSS Variables
@@ -107,6 +107,44 @@ import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';
 </PieCheckboxGroup>
 ```
 
+### List items in a checkbox group
+
+For a list-style layout (each option on its own row with primary and secondary text, and dividers between rows), wrap each `pie-checkbox` in a [`pie-list-item`](https://webc.pie.design/?path=/docs/components-list--overview) with `selection-type="checkbox"` and place them inside the group. The checkbox goes in the item's `leading` (or `trailing`) slot, and you provide the label through the item's `primaryText` rather than as the checkbox's content.
+
+`selection-type="checkbox"` makes each item a selectable row:
+
+- the item takes a `presentation` role, so the group still owns its checkbox descendants directly;
+- the item's `primaryText` becomes the checkbox's accessible name, and its `secondaryText` and `metaText` its description (applied to the checkbox's internal input), so you do not pass label text to the checkbox itself;
+- the visible item text is hidden from assistive technology so it is not announced twice;
+- clicking anywhere on a row toggles that row's checkbox.
+
+Set `disabled` on a `pie-list-item` to disable that row (alongside the checkbox's own `disabled`); disabling the group disables every row.
+
+The group lays the items out as a single divided list; selection is independent per checkbox, exactly as in a standard checkbox group.
+
+```js
+import '@justeattakeaway/pie-webc/components/checkbox-group.js';
+import '@justeattakeaway/pie-webc/components/checkbox.js';
+import '@justeattakeaway/pie-webc/components/list-item.js';
+```
+
+```html
+<pie-checkbox-group>
+  <pie-list-item selection-type="checkbox" primaryText="Cheese" secondaryText="Extra mature" metaText="Free">
+    <pie-checkbox slot="leading" name="cheese"></pie-checkbox>
+  </pie-list-item>
+  <pie-list-item selection-type="checkbox" primaryText="Pepperoni" secondaryText="Spicy">
+    <pie-checkbox slot="leading" name="pepperoni"></pie-checkbox>
+  </pie-list-item>
+  <pie-list-item selection-type="checkbox" disabled primaryText="Mushrooms">
+    <pie-checkbox slot="leading" name="mushrooms" disabled></pie-checkbox>
+  </pie-list-item>
+  <pie-list-item selection-type="checkbox" primaryText="Olives" metaText="£0.50">
+    <pie-checkbox slot="leading" name="olives"></pie-checkbox>
+  </pie-list-item>
+</pie-checkbox-group>
+```
+
 ## Questions and Support
 
 If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).

package/custom-elements.json

@@ -147,12 +147,20 @@
               "attribute": "disabled",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_disabledProvider",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "_slottedChildren",
               "type": {
-                "text": "Array<HTMLElement>"
-              }
+                "text": "HTMLElement[]"
+              },
+              "privacy": "private",
+              "description": "The checkboxes in the group. This uses a subtree query rather than immediate slotted\nchildren so checkboxes wrapped in other components (at any depth) are discovered.",
+              "readonly": true
             },
             {
               "kind": "method",

package/dist/index.d.ts

@@ -57,7 +57,12 @@ export declare class PieCheckboxGroup extends PieCheckboxGroup_base implements C
     isInline: boolean;
     status: "default" | "success" | "error";
     disabled: boolean;
-    _slottedChildren: Array<HTMLElement>;
+    private _disabledProvider;
+    /**
+     * The checkboxes in the group. This uses a subtree query rather than immediate slotted
+     * children so checkboxes wrapped in other components (at any depth) are discovered.
+     */
+    private get _slottedChildren();
     private _handleDisabled;
     private _handleStatus;
     /**

package/dist/index.js

@@ -1,41 +1,122 @@
-import { LitElement as x, html as n, unsafeCSS as g } from "lit";
-import { state as v, property as l, queryAssignedElements as k } from "lit/decorators.js";
-import { FormControlMixin as m, RtlMixin as y, validPropertyValues as _, safeCustomElement as G } from "@justeattakeaway/pie-webc-core";
-import { ifDefined as u } from "lit/directives/if-defined.js";
-import { classMap as C } from "lit/directives/class-map.js";
+import { LitElement as m, isServer as k, html as p, unsafeCSS as y } from "lit";
+import { state as C, property as d } from "lit/decorators.js";
+import { FormControlMixin as _, RtlMixin as G, parentDisabledContext as E, validPropertyValues as S, safeCustomElement as O } from "@justeattakeaway/pie-webc-core";
+import { ifDefined as v } from "lit/directives/if-defined.js";
+import { classMap as P } from "lit/directives/class-map.js";
 import "@justeattakeaway/pie-assistive-text";
-const d = class d extends x {
+const u = class u extends m {
   willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", d.v);
+    this.getAttribute("v") || this.setAttribute("v", u.v);
   }
 };
-d.v = "1.1.6";
-let b = d;
-const S = "*,*:after,*:before{box-sizing:inherit}:host{display:block}.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 ::slotted(pie-form-label){display:block;padding-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:last-child)){margin-block-end:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-form-label){margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset) / 2 - var(--checkbox-group-label-offset)));padding-block-end:0}.c-checkboxGroup-assistiveText{--checkbox-group-assistive-text-offset: var(--dt-spacing-a);display:block;margin-block-start:var(--checkbox-group-assistive-text-offset)}", E = ["default", "success", "error"], O = "pie-checkbox-group-disabled", $ = "pie-checkbox-group-error", p = {
+u.v = "1.2.0";
+let x = u;
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let w = class extends Event {
+  constructor(t, e, o, i) {
+    super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e, this.callback = o, this.subscribe = i ?? !1;
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class T {
+  get value() {
+    return this.o;
+  }
+  set value(t) {
+    this.setValue(t);
+  }
+  setValue(t, e = !1) {
+    const o = e || !Object.is(t, this.o);
+    this.o = t, o && this.updateObservers();
+  }
+  constructor(t) {
+    this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
+      for (const [e, { disposer: o }] of this.subscriptions) e(this.o, o);
+    }, t !== void 0 && (this.value = t);
+  }
+  addCallback(t, e, o) {
+    if (!o) return void t(this.value);
+    this.subscriptions.has(t) || this.subscriptions.set(t, { disposer: () => {
+      this.subscriptions.delete(t);
+    }, consumerHost: e });
+    const { disposer: i } = this.subscriptions.get(t);
+    t(this.value, i);
+  }
+  clearCallbacks() {
+    this.subscriptions.clear();
+  }
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class L extends Event {
+  constructor(t, e) {
+    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e;
+  }
+}
+class $ extends T {
+  constructor(t, e, o) {
+    var i, c;
+    super(e.context !== void 0 ? e.initialValue : o), this.onContextRequest = (r) => {
+      if (r.context !== this.context) return;
+      const n = r.contextTarget ?? r.composedPath()[0];
+      n !== this.host && (r.stopPropagation(), this.addCallback(r.callback, n, r.subscribe));
+    }, this.onProviderRequest = (r) => {
+      if (r.context !== this.context || (r.contextTarget ?? r.composedPath()[0]) === this.host) return;
+      const n = /* @__PURE__ */ new Set();
+      for (const [b, { consumerHost: f }] of this.subscriptions) n.has(b) || (n.add(b), f.dispatchEvent(new w(this.context, f, b, !0)));
+      r.stopPropagation();
+    }, this.host = t, e.context !== void 0 ? this.context = e.context : this.context = e, this.attachListeners(), (c = (i = this.host).addController) == null || c.call(i, this);
+  }
+  attachListeners() {
+    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
+  }
+  hostConnected() {
+    this.host.dispatchEvent(new L(this.context, this.host));
+  }
+}
+const R = "*,*:after,*:before{box-sizing:inherit}:host{display:block}:host ::slotted(pie-list-item:not(:last-of-type)){--list-item-size-modifier: 1px;--list-item-border: var(--list-item-size-modifier) solid var(--dt-color-divider-default)}.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 ::slotted(pie-form-label){display:block;padding-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:last-child)){margin-block-end:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-form-label){margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset) / 2 - var(--checkbox-group-label-offset)));padding-block-end:0}.c-checkboxGroup-assistiveText{--checkbox-group-assistive-text-offset: var(--dt-spacing-a);display:block;margin-block-start:var(--checkbox-group-assistive-text-offset)}", D = ["default", "success", "error"], q = "pie-checkbox-group-disabled", A = "pie-checkbox-group-error", h = {
   status: "default",
   disabled: !1,
   isInline: !1
 };
-var T = Object.defineProperty, w = Object.getOwnPropertyDescriptor, i = (e, o, a, c) => {
-  for (var s = c > 1 ? void 0 : c ? w(o, a) : o, r = e.length - 1, h; r >= 0; r--)
-    (h = e[r]) && (s = (c ? h(o, a, s) : h(s)) || s);
-  return c && s && T(o, a, s), s;
+var I = Object.defineProperty, V = Object.getOwnPropertyDescriptor, l = (s, t, e, o) => {
+  for (var i = o > 1 ? void 0 : o ? V(t, e) : t, c = s.length - 1, r; c >= 0; c--)
+    (r = s[c]) && (i = (o ? r(t, e, i) : r(i)) || i);
+  return o && i && I(t, e, i), i;
 };
-const L = "pie-checkbox-group", f = "assistive-text";
-let t = class extends m(y(b)) {
+const B = "pie-checkbox-group", g = "assistive-text";
+let a = class extends _(G(x)) {
   constructor() {
-    super(...arguments), this._hasLabel = !1, this.isInline = p.isInline, this.status = p.status, this.disabled = p.disabled;
+    super(...arguments), this._hasLabel = !1, this.isInline = h.isInline, this.status = h.status, this.disabled = h.disabled, this._disabledProvider = k ? void 0 : new $(this, { context: E, initialValue: h.disabled });
+  }
+  /**
+   * The checkboxes in the group. This uses a subtree query rather than immediate slotted
+   * children so checkboxes wrapped in other components (at any depth) are discovered.
+   */
+  get _slottedChildren() {
+    return Array.from(this.querySelectorAll("pie-checkbox"));
   }
   _handleDisabled() {
-    this._slottedChildren.forEach((e) => e.dispatchEvent(new CustomEvent(O, {
+    this._slottedChildren.forEach((s) => s.dispatchEvent(new CustomEvent(q, {
       bubbles: !1,
       composed: !1,
       detail: { disabled: this.disabled }
     })));
   }
   _handleStatus() {
-    this._slottedChildren.forEach((e) => {
-      e.setAttribute("status", this.status), this.status === "error" && this.assistiveText && (e.setAttribute("assistiveText", this.assistiveText), e.dispatchEvent(new CustomEvent($, { bubbles: !1, composed: !1, detail: { error: !0 } })));
+    this._slottedChildren.forEach((s) => {
+      s.setAttribute("status", this.status), this.status === "error" && this.assistiveText && (s.setAttribute("assistiveText", this.assistiveText), s.dispatchEvent(new CustomEvent(A, { bubbles: !1, composed: !1, detail: { error: !0 } })));
     });
   }
   /**
@@ -43,9 +124,9 @@ let t = class extends m(y(b)) {
    * when the label slot receives content.
    * @private
    */
-  handleSlotChange(e) {
-    const o = e.target.assignedNodes({ flatten: !0 });
-    this._hasLabel = o.length > 0;
+  handleSlotChange(s) {
+    const t = s.target.assignedNodes({ flatten: !0 });
+    this._hasLabel = t.length > 0;
   }
   /**
    * Template for the label slot to correctly wrap it into a legend element when it has content.
@@ -53,74 +134,72 @@ let t = class extends m(y(b)) {
    * @private
    */
   renderWrappedLabel() {
-    return this._hasLabel ? n`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : n`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
+    return this._hasLabel ? p`<legend><slot name='label' @slotchange=${this.handleSlotChange}></slot></legend>` : p`<slot name='label' @slotchange=${this.handleSlotChange}></slot>`;
   }
-  updated(e) {
-    e.has("disabled") && this._handleDisabled(), e.has("status") && this._handleStatus();
+  updated(s) {
+    var t;
+    s.has("disabled") && ((t = this._disabledProvider) == null || t.setValue(this.disabled), this._handleDisabled()), s.has("status") && this._handleStatus();
   }
   render() {
     const {
-      name: e,
-      isInline: o,
-      assistiveText: a,
-      status: c,
-      disabled: s
-    } = this, r = {
+      name: s,
+      isInline: t,
+      assistiveText: e,
+      status: o,
+      disabled: i
+    } = this, c = {
       "c-checkboxGroup": !0,
-      "c-checkboxGroup--inline": o
+      "c-checkboxGroup--inline": t
     };
-    return n`
+    return p`
             <fieldset
-                name=${u(e)}
-                ?disabled=${s}
-                aria-describedby="${u(a ? f : void 0)}"
+                name=${v(s)}
+                ?disabled=${i}
+                aria-describedby="${v(e ? g : void 0)}"
                 data-test-id="pie-checkbox-group-fieldset"
-                class="${C(r)}"
+                class="${P(c)}"
             >
                 ${this.renderWrappedLabel()}
                 <slot></slot>
             </fieldset>
-            ${a && n`
+            ${e && p`
                 <pie-assistive-text
-                    id="${f}"
-                    variant=${c}
-                    message=${a}
+                    id="${g}"
+                    variant=${o}
+                    message=${e}
                     class="c-checkboxGroup-assistiveText"
                     data-test-id="pie-checkbox-group-assistive-text">
                 </pie-assistive-text>`}
         `;
   }
 };
-t.styles = g(S);
-i([
-  v()
-], t.prototype, "_hasLabel", 2);
-i([
-  l({ type: String, reflect: !0 })
-], t.prototype, "name", 2);
-i([
-  l({ type: String })
-], t.prototype, "assistiveText", 2);
-i([
-  l({ type: Boolean })
-], t.prototype, "isInline", 2);
-i([
-  l({ type: String }),
-  _(L, E, p.status)
-], t.prototype, "status", 2);
-i([
-  l({ type: Boolean, reflect: !0 })
-], t.prototype, "disabled", 2);
-i([
-  k({ selector: "pie-checkbox" })
-], t.prototype, "_slottedChildren", 2);
-t = i([
-  G("pie-checkbox-group")
-], t);
+a.styles = y(R);
+l([
+  C()
+], a.prototype, "_hasLabel", 2);
+l([
+  d({ type: String, reflect: !0 })
+], a.prototype, "name", 2);
+l([
+  d({ type: String })
+], a.prototype, "assistiveText", 2);
+l([
+  d({ type: Boolean })
+], a.prototype, "isInline", 2);
+l([
+  d({ type: String }),
+  S(B, D, h.status)
+], a.prototype, "status", 2);
+l([
+  d({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+a = l([
+  O("pie-checkbox-group")
+], a);
 export {
-  O as ON_CHECKBOX_GROUP_DISABLED,
-  $ as ON_CHECKBOX_GROUP_ERROR,
-  t as PieCheckboxGroup,
-  p as defaultProps,
-  E as statusTypes
+  q as ON_CHECKBOX_GROUP_DISABLED,
+  A as ON_CHECKBOX_GROUP_ERROR,
+  a as PieCheckboxGroup,
+  h as defaultProps,
+  D as statusTypes
 };

package/dist/react.d.ts

@@ -60,7 +60,12 @@ declare class PieCheckboxGroup_2 extends PieCheckboxGroup_base implements Checkb
     isInline: boolean;
     status: "default" | "success" | "error";
     disabled: boolean;
-    _slottedChildren: Array<HTMLElement>;
+    private _disabledProvider;
+    /**
+     * The checkboxes in the group. This uses a subtree query rather than immediate slotted
+     * children so checkboxes wrapped in other components (at any depth) are discovered.
+     */
+    private get _slottedChildren();
     private _handleDisabled;
     private _handleStatus;
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-checkbox-group",
   "description": "PIE Design System Checkbox Group built using Web Components",
-  "version": "1.1.6",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -43,14 +43,15 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-checkbox": "1.3.6",
+    "@justeattakeaway/pie-checkbox": "1.4.0",
     "@justeattakeaway/pie-components-config": "0.21.3",
     "@justeattakeaway/pie-css": "1.3.1",
-    "@justeattakeaway/pie-monorepo-utils": "0.9.7"
+    "@justeattakeaway/pie-monorepo-utils": "0.9.8"
   },
   "dependencies": {
     "@justeattakeaway/pie-assistive-text": "1.0.6",
-    "@justeattakeaway/pie-webc-core": "16.1.0"
+    "@justeattakeaway/pie-webc-core": "16.1.0",
+    "@lit/context": "1.1.6"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [

package/src/checkbox-group.scss

@@ -2,6 +2,10 @@
 
 :host {
     display: block;
+
+    // Applies the divider between adjacent `pie-list-item`s when checkboxes are wrapped in them.
+    // Direct-child checkboxes are unaffected (the selector only matches `pie-list-item`).
+    @include p.list-item-divider;
 }
 
 .c-checkboxGroup {

package/src/index.ts

@@ -1,15 +1,17 @@
 import {
-    html, unsafeCSS, type PropertyValues, type TemplateResult,
+    html, isServer, unsafeCSS, type PropertyValues, type TemplateResult,
 } from 'lit';
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import {
-    property, queryAssignedElements, state,
+    property, state,
 } from 'lit/decorators.js';
+import { ContextProvider } from '@lit/context';
 import {
     RtlMixin,
     FormControlMixin,
     validPropertyValues,
     safeCustomElement,
+    parentDisabledContext,
 } from '@justeattakeaway/pie-webc-core';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
@@ -57,7 +59,26 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(PieElement)) imp
     @property({ type: Boolean, reflect: true })
     public disabled = defaultProps.disabled;
 
-    @queryAssignedElements({ selector: 'pie-checkbox' }) _slottedChildren!: Array<HTMLElement>;
+    // Provided to descendant `pie-list-item`s so a fully-disabled group also disables the list rows
+    // (suppressing their hover/active states), and kept in sync in `updated()`.
+    //
+    // Created manually (rather than via the `@provide` decorator) so it can be guarded with
+    // `isServer`: `@lit/context`'s ContextProvider attaches `context-request` listeners to the host
+    // in its constructor (via `host.addEventListener`). During SSR/prerender the element is
+    // constructed without a DOM host, so that call throws and breaks the build. The provider is
+    // client-only anyway (context is delivered after `connectedCallback`, which SSR never runs), so
+    // it is safe to skip on the server.
+    private _disabledProvider = isServer
+        ? undefined
+        : new ContextProvider(this, { context: parentDisabledContext, initialValue: defaultProps.disabled });
+
+    /**
+     * The checkboxes in the group. This uses a subtree query rather than immediate slotted
+     * children so checkboxes wrapped in other components (at any depth) are discovered.
+     */
+    private get _slottedChildren (): HTMLElement[] {
+        return Array.from(this.querySelectorAll('pie-checkbox'));
+    }
 
     private _handleDisabled () : void {
         this._slottedChildren.forEach((child) => child.dispatchEvent(new CustomEvent(ON_CHECKBOX_GROUP_DISABLED, {
@@ -97,6 +118,7 @@ export class PieCheckboxGroup extends FormControlMixin(RtlMixin(PieElement)) imp
 
     protected updated (_changedProperties: PropertyValues<this>): void {
         if (_changedProperties.has('disabled')) {
+            this._disabledProvider?.setValue(this.disabled);
             this._handleDisabled();
         }