@justeattakeaway/pie-list 0.2.0 → 0.3.0

package/README.md

@@ -248,16 +248,18 @@ import '@justeattakeaway/pie-webc/components/thumbnail.js';
 
 ### Selectable lists
 
-`pie-list` itself is a static container with no selection or keyboard behaviour. To build a **selectable** list, do **not** put the controls in `pie-list`. Instead, place `pie-list-item`s inside a [`pie-radio-group`](https://webc.pie.design/?path=/docs/components-radio-group--overview) (single-select) with `selection-type="radio"`, and slot the control into each item's `leading` (or `trailing`) slot. The group lays the rows out as a divided list automatically.
+`pie-list` itself is a static container with no selection or keyboard behaviour. To build a **selectable** list, do **not** put the controls in `pie-list`. Instead, place `pie-list-item`s inside a [`pie-radio-group`](https://webc.pie.design/?path=/docs/components-radio-group--overview) (single-select) or a [`pie-checkbox-group`](https://webc.pie.design/?path=/docs/components-checkbox-group--overview) (multi-select), set each item's `selectionType`, and slot the control into the item's `leading` (or `trailing`) slot.
 
-`selection-type` on each **item** makes that row selectable:
+#### The `selectionType` prop
 
-- takes the correct **role** — `presentation` for `radio`/`checkbox` (so the group owns the controls directly), `listitem` for `switch` and `none`;
-- provides its `primaryText`, `secondaryText` and `metaText` as the slotted control's **accessible name and description** (and `aria-hidden`s the now-duplicated visible text);
-- **forwards a click** anywhere on the row to the control, so the whole row is a hit target;
-- shows **hover and active** states on the row (suppressed when the item's `disabled` is set, or the group is disabled).
+`selectionType` is what makes a row selectable. Set it to `radio` or `checkbox` and it drives the item to:
 
-Provide the label through the item's `primaryText` — not as the control's own content. The group still owns the group-level semantics (its own role, shared `name`, selection coordination and group-disable).
+- take the correct **role** — `presentation` for `radio`/`checkbox` (so the group owns the controls directly), `listitem` for `switch` and `none`;
+- provide its `primaryText`, `secondaryText` and `metaText` as the slotted control's **accessible name and description** (and `aria-hidden` the now-duplicated visible text);
+- **forward a click** anywhere on the row to the control, so the whole row is a hit target;
+- show **hover and active** states on the row (suppressed when the control, or the group, is disabled).
+
+Provide the label through the item's `primaryText` — not as the control's own content. The group still owns the group-level semantics (its own role, shared `name`, selection coordination and group-disable); `selectionType` only governs the item. See the [`pie-radio-group`](https://webc.pie.design/?path=/docs/components-radio-group--overview) and [`pie-checkbox-group`](https://webc.pie.design/?path=/docs/components-checkbox-group--overview) docs for the group behaviour.
 
 Single-select (radios):
 
@@ -268,18 +270,37 @@ import '@justeattakeaway/pie-webc/components/list-item.js';
 ```
 
 ```html
-<!-- `selection-type="radio"` makes each row selectable and the group lays them out as a divided
+<!-- `selectionType="radio"` makes each row selectable and the group lays them out as a divided
      list. `value` on the group selects the matching radio (here, Express). -->
 <pie-radio-group name="delivery" value="express">
-  <pie-list-item selection-type="radio" primaryText="Standard delivery" secondaryText="3 to 5 working days" metaText="Free">
+  <pie-list-item selectionType="radio" primaryText="Standard delivery" secondaryText="3 to 5 working days" metaText="Free">
     <pie-radio slot="leading" value="standard"></pie-radio>
   </pie-list-item>
-  <pie-list-item selection-type="radio" primaryText="Express delivery" secondaryText="Next working day" metaText="£4.99">
+  <pie-list-item selectionType="radio" primaryText="Express delivery" secondaryText="Next working day" metaText="£4.99">
     <pie-radio slot="leading" value="express"></pie-radio>
   </pie-list-item>
 </pie-radio-group>
 ```
 
+Multi-select (checkboxes):
+
+```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 selectionType="checkbox" primaryText="Cheese" secondaryText="Extra mature" metaText="Free">
+    <pie-checkbox slot="leading" name="cheese"></pie-checkbox>
+  </pie-list-item>
+  <pie-list-item selectionType="checkbox" primaryText="Pepperoni" secondaryText="Spicy">
+    <pie-checkbox slot="leading" name="pepperoni"></pie-checkbox>
+  </pie-list-item>
+</pie-checkbox-group>
+```
+
 **For Native JS Applications, Vue, Angular, Svelte etc.:**
 
 ```js

package/custom-elements.json

@@ -163,7 +163,7 @@
             {
               "kind": "field",
               "name": "selectionType",
-              "attribute": "selection-type"
+              "attribute": "selectionType"
             },
             {
               "kind": "field",
@@ -308,7 +308,7 @@
               "fieldName": "hasMedia"
             },
             {
-              "name": "selection-type",
+              "name": "selectionType",
               "fieldName": "selectionType"
             },
             {

package/dist/{PieElement-B3g_8vKy.js → PieElement-ab_PEQpW.js}

@@ -4,7 +4,7 @@ const t = class t extends i {
     this.getAttribute("v") || this.setAttribute("v", t.v);
   }
 };
-t.v = "0.2.0";
+t.v = "0.3.0";
 let s = t;
 export {
   s as P

package/dist/{index-KnN5fPmj.js → index-mqipXuiX.js}

@@ -2,7 +2,7 @@ import { unsafeCSS as x, isServer as f, html as p, nothing as m } from "lit";
 import { property as c, state as y } from "lit/decorators.js";
 import { classMap as k } from "lit/directives/class-map.js";
 import { validPropertyValues as _, safeCustomElement as T, ariaContext as I, parentDisabledContext as C } from "@justeattakeaway/pie-webc-core";
-import { P as w } from "./PieElement-B3g_8vKy.js";
+import { P as w } from "./PieElement-ab_PEQpW.js";
 /**
  * @license
  * Copyright 2021 Google LLC
@@ -245,7 +245,7 @@ l([
   c({ type: Boolean })
 ], n.prototype, "hasMedia", 2);
 l([
-  c({ type: String, attribute: "selection-type" }),
+  c({ type: String }),
   _($, z, d.selectionType)
 ], n.prototype, "selectionType", 2);
 l([

package/dist/index.js

@@ -1,5 +1,5 @@
 import { html as n, unsafeCSS as m } from "lit";
-import { P as f } from "./PieElement-B3g_8vKy.js";
+import { P as f } from "./PieElement-ab_PEQpW.js";
 import { RtlMixin as d, safeCustomElement as p } from "@justeattakeaway/pie-webc-core";
 const c = "*,*: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)}";
 var b = Object.getOwnPropertyDescriptor, u = (s, r, a, l) => {

package/dist/pie-list-item/index.js

@@ -1,9 +1,9 @@
 import "lit";
 import "lit/decorators.js";
 import "lit/directives/class-map.js";
-import { P as s } from "../index-KnN5fPmj.js";
+import { P as s } from "../index-mqipXuiX.js";
 import "@justeattakeaway/pie-webc-core";
-import "../PieElement-B3g_8vKy.js";
+import "../PieElement-ab_PEQpW.js";
 export {
   s as PieListItem
 };

package/dist/pie-list-item/react.js

@@ -1,7 +1,7 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
-import { P as s } from "../index-KnN5fPmj.js";
-import { d as c, s as n } from "../index-KnN5fPmj.js";
+import { P as s } from "../index-mqipXuiX.js";
+import { d as c, s as n } from "../index-mqipXuiX.js";
 const i = t({
   displayName: "PieListItem",
   elementClass: s,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-list",
   "description": "PIE Design System List built using Web Components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,7 +39,7 @@
   "devDependencies": {
     "@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-webc-core": "16.1.0",

package/src/pie-list-item/index.ts

@@ -42,7 +42,7 @@ export class PieListItem extends PieElement implements ListItemProps {
     @property({ type: Boolean })
         hasMedia = defaultProps.hasMedia;
 
-    @property({ type: String, attribute: 'selection-type' })
+    @property({ type: String })
     @validPropertyValues(componentSelector, selectionTypes, defaultProps.selectionType)
         selectionType = defaultProps.selectionType;