@justeattakeaway/pie-list 0.0.31 → 0.1.1

package/README.md

@@ -1,91 +1,288 @@
-<p align="center">
-  <img align="center" src="../../../readme_image.png" height="200" alt="">
-</p>
+# @justeattakeaway/pie-list
+[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-list) | [Design Documentation](https://pie.design/components/list) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-list)
 
-<p align="center">
+<p>
   <a href="https://www.npmjs.com/@justeattakeaway/pie-list">
     <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-list.svg">
   </a>
 </p>
 
-# Table of Contents
+`@justeattakeaway/pie-list` is a Web Component built using the Lit library. It provides a simple, accessible list built from two elements: a `pie-list` container and one or more `pie-list-item` children.
 
-1. [Introduction](#pie-list)
-2. [Installation](#installation)
-3. [Importing the component](#importing-the-component)
-4. [Peer Dependencies](#peer-dependencies)
-5. [Props](#props)
-6. [Contributing](#contributing)
+> [!NOTE]
+> This component is still growing. More properties, slots and sub-components will be added over time. This documentation covers what is currently supported.
 
-## pie-list
+## Table of Contents
 
-`pie-list` is a Web Component built using the Lit library.
+- [Installation](#installation)
+- [Documentation](#documentation)
+  - [Properties](#properties)
+  - [Slots](#slots)
+  - [CSS Variables](#css-variables)
+  - [Events](#events)
+- [Accessibility](#accessibility)
+- [Usage Examples](#usage-examples)
+- [Usage Notes and Rules](#usage-notes-and-rules)
+- [Questions and Support](#questions-and-support)
+- [Contributing](#contributing)
 
-This component can be easily integrated into various frontend frameworks and customized through a set of properties.
+## Installation
 
+> To install any of our web components in your application, we would suggest following the [getting started guide](https://webc.pie.design/?path=/docs/introduction-getting-started--docs) to set up your project.
 
-## Installation
+Ideally, you should install the component using the **`@justeattakeaway/pie-webc`** package, which includes all of the components. Or you can install the individual component package.
+
+## Documentation
+
+`pie-list` is a compound component. The `pie-list` element is the container (it applies the `list` role and renders the dividers between items), and each row is a `pie-list-item` (which applies the `listitem` role).
+
+> [!IMPORTANT]
+> Because `pie-list` uses the `list` role, you **must always give it an accessible name** using either `aria-label` or `aria-labelledby`. Without one, screen reader users get no context for what the list contains. See [Accessibility](#accessibility).
+
+### Properties
+
+#### `pie-list`
+
+`pie-list` currently has no configurable properties. It acts as the semantic container for `pie-list-item` children.
+
+#### `pie-list-item`
+
+| Prop | Options | Description | Default |
+|---|---|---|---|
+| `primaryText` | Any string | The main text of the item, providing an overview of the content. | `undefined` |
+| `secondaryText` | Any string | Optional additional detail, rendered on a second line beneath the primary text. | `undefined` |
+| `metaText` | Any string | Optional supporting information about the item's context, status or attributes. Rendered as a trailing text string. **Mutually exclusive with the `trailing` slot**: if `metaText` is set, the `trailing` slot is not rendered. | `undefined` |
+| `isCompact` | `true`, `false` | Decreases the item height to save vertical space. See the [rules](#usage-notes-and-rules) below. | `false` |
+| `isBold` | `true`, `false` | Sets the primary text to a bold font-weight. | `false` |
+| `hasMedia` | `true`, `false` | **Required whenever you slot a media element (e.g. `pie-thumbnail`) into the item.** Reduces the block padding so single-line media sits correctly (this padding adjustment has no effect when `secondaryText` is set, but you should still set `hasMedia`). | `false` |
+
+### Slots
+
+Slots are provided by `pie-list-item`.
+
+| Slot | Description |
+|---|---|
+| `leading` | Content displayed at the start of the item, before the text. Intended for a small icon or a media element (e.g. `pie-thumbnail`). If slotting `pie-thumbnail`, it MUST use `size="40"`; this is the only size that fits the list-item layout correctly. |
+| `trailing` | Content displayed at the end of the item, after the text. Intended for a small icon, a `pie-tag`, etc. Not rendered when `metaText` is set. |
+
+The permitted slotted elements are: a PIE WEBC icon, `pie-tag`, `pie-thumbnail`, `pie-avatar`*, `pie-switch`, and native HTML radio/checkbox inputs.
+Some slotted content is designed with specific properties being used. So please read the entire readme to understand correct slot usage.
 
-To install `pie-list` in your application, run the following on your command line:
+> Slotted PIE icons are always sized by `pie-list-item` (24px). Consumers cannot override this size.
 
-```bash
-# npm
-$ npm i @justeattakeaway/pie-list
+> \* `pie-avatar` is a permitted slot element but is not covered by usage examples here yet, as it is not ready for use in lists.
 
-# yarn
-$ yarn add @justeattakeaway/pie-list
+### CSS Variables
+
+These custom properties can be set on a `pie-list-item` (or on `pie-list` to affect all items) to override the defaults.
+
+| Variable | Description | Accepted values |
+|---|---|---|
+| `--list-item-inline-padding` | Sets the inline (start and end) padding of the item. Defaults to `var(--dt-spacing-d)`. **Must be set on the `pie-list-item`** (directly or via a rule targeting it), not on `pie-list` — the default lives on the item's host, so an inherited value from `pie-list` will not override it. | Any PIE spacing token (e.g. `var(--dt-spacing-f)`) or `0` |
+| `--list-item-alignment` | Sets the vertical alignment of the item's content. Defaults to `flex-start`. **Must be set on the `pie-list-item`** (directly or via a rule targeting it), not on `pie-list` — the default lives on the item's host, so an inherited value from `pie-list` will not override it. | Only `center` is recommended |
+
+### Events
+
+This component does not emit any custom events. To listen for interactions, treat slotted interactive elements like native HTML elements in your application.
+
+## Accessibility
+
+`pie-list` renders with `role="list"` and each `pie-list-item` with `role="listitem"`.
+
+> [!IMPORTANT]
+> **Always provide an accessible name for `pie-list`** via `aria-label` or `aria-labelledby`. A list with the `list` role has no inherent name, so without one a screen reader announces "list" with no indication of what it contains.
+
+- Use **`aria-label`** when there is no visible heading for the list:
+
+  ```html
+  <pie-list aria-label="Payment methods">
+    <pie-list-item primaryText="Credit card"></pie-list-item>
+    <pie-list-item primaryText="PayPal"></pie-list-item>
+  </pie-list>
+  ```
+
+- Use **`aria-labelledby`** to reference a visible heading (preferred when one exists, so the visible and accessible names stay in sync):
+
+  ```html
+  <h2 id="payment-methods-heading">Payment methods</h2>
+  <pie-list aria-labelledby="payment-methods-heading">
+    <pie-list-item primaryText="Credit card"></pie-list-item>
+    <pie-list-item primaryText="PayPal"></pie-list-item>
+  </pie-list>
+  ```
+
+## Usage Examples
+
+**For HTML:**
+
+```js
+// import as modules into a js file e.g. main.js
+import '@justeattakeaway/pie-webc/components/list.js';
+import '@justeattakeaway/pie-webc/components/list-item.js';
 ```
 
-For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
+A basic list with primary, secondary and meta text (note the required `aria-label`):
 
+```html
+<pie-list aria-label="Recent orders">
+  <pie-list-item
+    primaryText="Primary text"
+    secondaryText="Secondary text"
+    metaText="Meta text"></pie-list-item>
+  <pie-list-item
+    primaryText="Primary text"
+    secondaryText="Secondary text"></pie-list-item>
+  <pie-list-item primaryText="Primary text"></pie-list-item>
+</pie-list>
+<script type="module" src="/main.js"></script>
+```
 
-### Importing the component
+**Leading and trailing content (icons):**
 
-#### JavaScript
 ```js
-// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
-import { PieList } from '@justeattakeaway/pie-list';
+import '@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js';
+```
 
-// If you don't need to reference the imported object, you can simply
-// import the module which registers the component as a custom element.
-import '@justeattakeaway/pie-list';
+```html
+<pie-list>
+  <pie-list-item primaryText="Primary text" secondaryText="Secondary text">
+    <icon-placeholder slot="leading"></icon-placeholder>
+    <icon-chevron-right slot="trailing"></icon-chevron-right>
+  </pie-list-item>
+</pie-list>
 ```
 
-#### React
+**Trailing `pie-tag`:**
+
 ```js
-// React
-// For React, you will need to import our React-specific component build
-// which wraps the web component using ​@lit/react
-import { PieList } from '@justeattakeaway/pie-list/dist/react';
+import '@justeattakeaway/pie-webc/components/tag.js';
 ```
 
-> [!NOTE]
-> When using the React version of the component, please make sure to also
-> include React as a [peer dependency](#peer-dependencies) in your project.
+```html
+<pie-list>
+  <pie-list-item primaryText="Primary text" secondaryText="Secondary text">
+    <pie-tag slot="trailing">Label</pie-tag>
+  </pie-list-item>
+</pie-list>
+```
 
+**Meta text** (renders as trailing text; do not combine with the `trailing` slot):
 
-## Peer Dependencies
+```html
+<pie-list>
+  <pie-list-item
+    primaryText="Primary text"
+    secondaryText="Secondary text"
+    metaText="Meta text"></pie-list-item>
+</pie-list>
+```
 
-> [!IMPORTANT]
-> When using `pie-list`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
+**Bold primary text:**
 
+```html
+<pie-list>
+  <pie-list-item isBold primaryText="Primary text"></pie-list-item>
+</pie-list>
+```
 
-## Props
+**Compact list** (reduced height, see [rules](#usage-notes-and-rules)):
 
-| Property | Type | Default | Description |
-|---|---|---|---|
-| - | - | - | - |
+```html
+<pie-list>
+  <pie-list-item isCompact primaryText="Primary text">
+    <icon-chevron-right slot="trailing"></icon-chevron-right>
+  </pie-list-item>
+  <pie-list-item isCompact primaryText="Primary text">
+    <icon-chevron-right slot="trailing"></icon-chevron-right>
+  </pie-list-item>
+</pie-list>
+```
+
+**Media (`pie-thumbnail`) in the leading slot:**
+
+```js
+import '@justeattakeaway/pie-webc/components/thumbnail.js';
+```
 
-In your markup or JSX, you can then use these to set the properties for the `pie-list` component:
+```html
+<!-- `hasMedia` is REQUIRED whenever you slot a thumbnail. Without it the
+     block padding will be incorrect. -->
+<pie-list aria-label="Restaurants">
+  <pie-list-item hasMedia primaryText="Primary text">
+    <pie-thumbnail slot="leading" size="40"></pie-thumbnail>
+  </pie-list-item>
+</pie-list>
+
+<!-- Still set `hasMedia` when there is secondary text. The padding is unchanged
+     in this case, but you should still set it. -->
+<pie-list aria-label="Restaurants">
+  <pie-list-item hasMedia primaryText="Primary text" secondaryText="Secondary text">
+    <pie-thumbnail slot="leading" size="40"></pie-thumbnail>
+  </pie-list-item>
+</pie-list>
+```
+
+**Overriding alignment and padding** (via CSS variables):
 
 ```html
-<!-- Native HTML -->
-<pie-list></pie-list>
+<!-- Vertically centre the content of the items. `--list-item-alignment` must be set on the
+     `pie-list-item` (here via a rule targeting every item), not on `pie-list`. -->
+<style>pie-list-item { --list-item-alignment: center; }</style>
+<pie-list>
+  <pie-list-item primaryText="Primary text" secondaryText="Secondary text">
+    <icon-chevron-right slot="trailing"></icon-chevron-right>
+  </pie-list-item>
+</pie-list>
+
+<!-- Remove the inline padding. `--list-item-inline-padding` must be set on the `pie-list-item`
+     (its default lives on the item's host, so a value on `pie-list` will not override it). -->
+<pie-list>
+  <pie-list-item style="--list-item-inline-padding: 0;" primaryText="Primary text"></pie-list-item>
+</pie-list>
+```
+
+**For Native JS Applications, Vue, Angular, Svelte etc.:**
+
+```js
+// Vue templates (using Nuxt 3)
+import '@justeattakeaway/pie-webc/components/list.js';
+import '@justeattakeaway/pie-webc/components/list-item.js';
 
-<!-- JSX -->
-<PieList></PieList>
+<pie-list>
+  <pie-list-item primaryText="Primary text" secondaryText="Secondary text"></pie-list-item>
+</pie-list>
 ```
 
+**For React Applications:**
+
+```jsx
+import { PieList } from '@justeattakeaway/pie-webc/react/list.js';
+import { PieListItem } from '@justeattakeaway/pie-webc/react/list-item.js';
+
+<PieList>
+  <PieListItem primaryText="Primary text" secondaryText="Secondary text">
+    <PieThumbnail slot="leading" size={40} />
+  </PieListItem>
+</PieList>
+```
+
+## Usage Notes and Rules
+
+To keep lists consistent and correct, follow these rules:
+
+- **Always give `pie-list` an accessible name** with `aria-label` or `aria-labelledby` (use `aria-labelledby` when a visible heading exists). This is required for screen reader users to understand the list. See [Accessibility](#accessibility).
+- **Provide `primaryText`** on every `pie-list-item`; it is the item's main line of content.
+- **`metaText` and the `trailing` slot are mutually exclusive.** If `metaText` is set, any `trailing` slot content is ignored. Choose one.
+- **Slotted `pie-thumbnail` must use `size="40"`.** This is the only size that fits the list-item layout correctly.
+- **Always set `hasMedia` when slotting media** (`pie-thumbnail`, and `pie-avatar` in future), whether or not the item has `secondaryText`. This guarantees the item has the correct block padding.
+- **Do not combine `isCompact` with `secondaryText` or with slotted media.** Compact items are single-line and too short for these.
+- **Only use `center` for `--list-item-alignment`.** Other values are not supported.
+- **`pie-avatar` is not yet ready** for use in lists. Prefer `pie-thumbnail` for media for now.
+
+## 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).
+
 ## Contributing
 
-Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

package/custom-elements.json

@@ -65,8 +65,26 @@
     {
       "kind": "javascript-module",
       "path": "src/pie-list-item/defs.js",
-      "declarations": [],
-      "exports": []
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{ isCompact: false, isBold: false, hasMedia: false, }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/pie-list-item/defs.js"
+          }
+        }
+      ]
     },
     {
       "kind": "javascript-module",
@@ -76,9 +94,93 @@
           "kind": "class",
           "description": "",
           "name": "PieListItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "primaryText",
+              "type": {
+                "text": "ListItemProps['primaryText']"
+              },
+              "attribute": "primaryText"
+            },
+            {
+              "kind": "field",
+              "name": "secondaryText",
+              "type": {
+                "text": "ListItemProps['secondaryText']"
+              },
+              "attribute": "secondaryText"
+            },
+            {
+              "kind": "field",
+              "name": "metaText",
+              "type": {
+                "text": "ListItemProps['metaText']"
+              },
+              "attribute": "metaText"
+            },
+            {
+              "kind": "field",
+              "name": "isCompact",
+              "attribute": "isCompact"
+            },
+            {
+              "kind": "field",
+              "name": "isBold",
+              "attribute": "isBold"
+            },
+            {
+              "kind": "field",
+              "name": "hasMedia",
+              "attribute": "hasMedia"
+            },
+            {
+              "kind": "method",
+              "name": "_renderSecondaryText"
+            },
+            {
+              "kind": "method",
+              "name": "_renderTrailingContent"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "primaryText",
+              "type": {
+                "text": "ListItemProps['primaryText']"
+              },
+              "fieldName": "primaryText"
+            },
+            {
+              "name": "secondaryText",
+              "type": {
+                "text": "ListItemProps['secondaryText']"
+              },
+              "fieldName": "secondaryText"
+            },
+            {
+              "name": "metaText",
+              "type": {
+                "text": "ListItemProps['metaText']"
+              },
+              "fieldName": "metaText"
+            },
+            {
+              "name": "isCompact",
+              "fieldName": "isCompact"
+            },
+            {
+              "name": "isBold",
+              "fieldName": "isBold"
+            },
+            {
+              "name": "hasMedia",
+              "fieldName": "hasMedia"
+            }
+          ],
           "superclass": {
-            "name": "LitElement",
-            "package": "lit"
+            "name": "PieElement",
+            "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
           },
           "tagName": "pie-list-item",
           "customElement": true

package/dist/PieElement-Y2VnHR4y.js

@@ -0,0 +1,11 @@
+import { LitElement as i } from "lit";
+const t = class t extends i {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", t.v);
+  }
+};
+t.v = "0.1.1";
+let s = t;
+export {
+  s as P
+};

package/dist/index-D4OaeeiJ.js

@@ -0,0 +1,79 @@
+import { unsafeCSS as p, html as o, nothing as g } from "lit";
+import { property as n } from "lit/decorators.js";
+import { safeCustomElement as h } from "@justeattakeaway/pie-webc-core";
+import { P as f } from "./PieElement-Y2VnHR4y.js";
+import { classMap as y } from "lit/directives/class-map.js";
+const m = {
+  isCompact: !1,
+  isBold: !1,
+  hasMedia: !1
+}, v = "*,*:after,*:before{box-sizing:inherit}:host{--list-item-inline-padding: var(--dt-spacing-d);--list-item-alignment: flex-start;display:block}.c-listItem-container{--list-item-block-padding: var(--dt-spacing-d);--list-item-block-end-padding: calc(var(--list-item-block-padding) - var(--list-item-size-modifier));padding-inline-start:var(--list-item-inline-padding);padding-inline-end:var(--list-item-inline-padding);padding-block-start:var(--list-item-block-padding);padding-block-end:var(--list-item-block-end-padding, var(--list-item-block-padding));display:flex;align-items:var(--list-item-alignment);gap:var(--dt-spacing-c);min-height:56px;border-bottom:var(--list-item-border-override, none)}.c-listItem-container:has(.c-listItem-secondaryText){align-items:var(--list-item-alignment);min-height:76px}.c-listItem-container.is-compact{--list-item-block-padding: var(--dt-spacing-c);--list-item-alignment: center;align-items:var(--list-item-alignment);min-height:48px}.c-listItem-container.has-media:has(.c-listItem-primaryText:only-child){--list-item-block-padding: var(--dt-spacing-b)}.c-listItem-text{flex:1}slot[name=trailing]::slotted(*),.c-listItem-metaText{padding-inline-start:var(--dt-spacing-a)}.c-listItem-leading,slot[name=leading],.c-listItem-trailing,slot[name=trailing]{display:contents}.c-listItem-text>*{display:block}.c-listItem-trailing{margin-inline-start:auto}.c-listItem-metaText{display:block;max-width:33.3333333333%}::slotted(.c-pieIcon){--icon-size-override: 24px }.c-listItem-primaryText{font-family:var(--dt-font-body-l-family);font-weight:var(--dt-font-body-l-weight);font-size:calc(var(--dt-font-body-l-size) * 1px);line-height:calc(var(--dt-font-body-l-line-height) * 1px);color:var(--dt-color-content-default)}.c-listItem-container.is-bold .c-listItem-primaryText{font-family:var(--dt-font-body-strong-l-family);font-weight:var(--dt-font-body-strong-l-weight);font-size:calc(var(--dt-font-body-strong-l-size) * 1px);line-height:calc(var(--dt-font-body-strong-l-line-height) * 1px)}.c-listItem-secondaryText,.c-listItem-metaText{font-family:var(--dt-font-body-s-family);font-weight:var(--dt-font-body-s-weight);font-size:calc(var(--dt-font-body-s-size) * 1px);line-height:calc(var(--dt-font-body-s-line-height) * 1px);color:var(--dt-color-content-subdued)}";
+var b = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (t, s, r, l) => {
+  for (var e = l > 1 ? void 0 : l ? x(s, r) : s, d = t.length - 1, c; d >= 0; d--)
+    (c = t[d]) && (e = (l ? c(s, r, e) : c(e)) || e);
+  return l && e && b(s, r, e), e;
+};
+let i = class extends f {
+  constructor() {
+    super(...arguments), this.isCompact = m.isCompact, this.isBold = m.isBold, this.hasMedia = m.hasMedia;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "listitem");
+  }
+  _renderSecondaryText() {
+    const { secondaryText: t } = this;
+    return t ? o`<span class="c-listItem-secondaryText">${t}</span>` : g;
+  }
+  // metaText is another form of trailing content. The component can only ever display either slotted trailing content or the metaText string
+  _renderTrailingContent() {
+    const { metaText: t } = this;
+    return t ? o`<span class="c-listItem-metaText c-listItem-trailing">${t}</span>` : o`<div class="c-listItem-trailing"><slot name="trailing"></slot></div>`;
+  }
+  render() {
+    const { primaryText: t } = this, s = {
+      "c-listItem-container": !0,
+      "is-compact": this.isCompact,
+      "is-bold": this.isBold,
+      "has-media": this.hasMedia
+    };
+    return o`
+        <div class=${y(s)}>
+            <div class="c-listItem-leading">
+                <slot name="leading"></slot>
+            </div>
+
+            <div class="c-listItem-text">
+                <span class="c-listItem-primaryText">${t}</span>
+                ${this._renderSecondaryText()}
+            </div>
+
+            ${this._renderTrailingContent()}
+        </div>`;
+  }
+};
+i.styles = p(v);
+a([
+  n({ type: String })
+], i.prototype, "primaryText", 2);
+a([
+  n({ type: String })
+], i.prototype, "secondaryText", 2);
+a([
+  n({ type: String })
+], i.prototype, "metaText", 2);
+a([
+  n({ type: Boolean })
+], i.prototype, "isCompact", 2);
+a([
+  n({ type: Boolean })
+], i.prototype, "isBold", 2);
+a([
+  n({ type: Boolean })
+], i.prototype, "hasMedia", 2);
+i = a([
+  h("pie-list-item")
+], i);
+export {
+  i as P,
+  m as d
+};

package/dist/index.d.ts

@@ -7,6 +7,7 @@ declare const PieList_base: import('@justeattakeaway/pie-webc-core').GenericCons
  * @tagname pie-list
  */
 export declare class PieList extends PieList_base implements ListProps {
+    connectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult;
 }

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAIrF,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,cAAc,QAAQ,CAAC;AAEvB,QAAA,MAAM,iBAAiB,aAAa,CAAC;;AAErC;;GAEG;AACH,qBACa,OAAQ,SAAQ,YAAqB,YAAW,SAAS;IAClE,MAAM;IAKN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAChC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAIrF,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGxC,cAAc,QAAQ,CAAC;AAEvB,QAAA,MAAM,iBAAiB,aAAa,CAAC;;AAErC;;GAEG;AACH,qBACa,OAAQ,SAAQ,YAAqB,YAAW,SAAS;IAClE,iBAAiB,IAAK,IAAI;IAQ1B,MAAM;IAKN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAChC;CACJ"}

package/dist/index.js

@@ -1,26 +1,23 @@
-import { LitElement as f, html as h, unsafeCSS as v } from "lit";
-import { RtlMixin as c, safeCustomElement as d } from "@justeattakeaway/pie-webc-core";
-const e = class e extends f {
-  willUpdate() {
-    this.getAttribute("v") || this.setAttribute("v", e.v);
-  }
-};
-e.v = "0.0.31";
-let r = e;
-const u = "*,*:after,*:before{box-sizing:inherit}:host{display:block}";
-var b = Object.getOwnPropertyDescriptor, m = (l, o, p, a) => {
-  for (var t = a > 1 ? void 0 : a ? b(o, p) : o, s = l.length - 1, n; s >= 0; s--)
-    (n = l[s]) && (t = n(t) || t);
-  return t;
+import { html as a, unsafeCSS as d } from "lit";
+import { P as m } from "./PieElement-Y2VnHR4y.js";
+import { RtlMixin as c, safeCustomElement as f } from "@justeattakeaway/pie-webc-core";
+const p = "*,*:after,*:before{box-sizing:inherit}:host{display:block}:host ::slotted(*:nth-last-child(n+2)){--list-item-size-modifier: 1px;--list-item-border-override: var(--list-item-size-modifier) solid var(--dt-color-divider-default)}";
+var h = Object.getOwnPropertyDescriptor, b = (r, s, n, l) => {
+  for (var e = l > 1 ? void 0 : l ? h(s, n) : s, t = r.length - 1, o; t >= 0; t--)
+    (o = r[t]) && (e = o(e) || e);
+  return e;
 };
-let i = class extends c(r) {
+let i = class extends c(m) {
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "list");
+  }
   render() {
-    return h`<h1 data-test-id="pie-list">Hello world!</h1>`;
+    return a`<slot></slot>`;
   }
 };
-i.styles = v(u);
-i = m([
-  d("pie-list")
+i.styles = d(p);
+i = b([
+  f("pie-list")
 ], i);
 export {
   i as PieList

package/dist/pie-list-item/defs.d.ts

@@ -1,3 +1,34 @@
+import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
 export interface ListItemProps {
+    /**
+     * **Required:** Provides an overview of the content.
+     */
+    primaryText?: string;
+    /**
+     * Provides optional additional detail.
+     */
+    secondaryText?: string;
+    /**
+     * Provides further optional information about the context, status or attributes of the primary content.
+     */
+    metaText?: string;
+    /**
+     * The height of the component is decreased to reduce the vertical space, and used when space needs to be saved.
+     *
+     * **Note**: Do not use if you require secondary text, or if you want to slot a pie-avatar, pie-thumbnail or Icon with Background component into the list item.
+     */
+    isCompact?: boolean;
+    /**
+     * Sets the primary text to use a bold font-weight.
+     */
+    isBold?: boolean;
+    /**
+     * Reduces the block padding to suit larger slotted media (such as a pie-thumbnail).
+     *
+     * **Note**: This has no effect when `secondaryText` is set, and should not be combined with `isCompact`.
+     */
+    hasMedia?: boolean;
 }
+export type DefaultProps = ComponentDefaultProps<ListItemProps, keyof Omit<ListItemProps, 'primaryText' | 'secondaryText' | 'metaText'>>;
+export declare const defaultProps: DefaultProps;
 //# sourceMappingURL=defs.d.ts.map

package/dist/pie-list-item/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/pie-list-item/defs.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;CAAG"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../src/pie-list-item/defs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAE5E,MAAM,WAAW,aAAa;IAC1B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IAEnB;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,MAAM,YAAY,GAAG,qBAAqB,CAAC,aAAa,EAAE,MAAM,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,eAAe,GAAG,UAAU,CAAC,CAAC,CAAC;AAEzI,eAAO,MAAM,YAAY,EAAE,YAI1B,CAAC"}

package/dist/pie-list-item/index.d.ts

@@ -1,10 +1,22 @@
-import { LitElement } from 'lit';
+import { nothing } from 'lit';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
 import { ListItemProps } from './defs';
 declare const componentSelector = "pie-list-item";
 /**
  * @tagname pie-list-item
  */
-export declare class PieListItem extends LitElement implements ListItemProps {
+export declare class PieListItem extends PieElement implements ListItemProps {
+    primaryText: ListItemProps['primaryText'];
+    secondaryText: ListItemProps['secondaryText'];
+    metaText: ListItemProps['metaText'];
+    isCompact: boolean;
+    isBold: boolean;
+    hasMedia: boolean;
+    connectedCallback(): void;
+    _renderSecondaryText(): import('lit-html').TemplateResult<1> | typeof nothing;
+    _renderTrailingContent(): import('lit-html').TemplateResult<1>;
+    render(): import('lit-html').TemplateResult<1>;
+    static styles: import('lit').CSSResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/pie-list-item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-list-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEjC,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,QAAA,MAAM,iBAAiB,kBAAkB,CAAC;AAE1C;;GAEG;AACH,qBACa,WAAY,SAAQ,UAAW,YAAW,aAAa;CAEnE;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;KACpC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pie-list-item/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,OAAO,EAAa,MAAM,KAAK,CAAC;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,yDAAyD,CAAC;AAErF,OAAO,EAAE,KAAK,aAAa,EAAgB,MAAM,QAAQ,CAAC;AAG1D,QAAA,MAAM,iBAAiB,kBAAkB,CAAC;AAE1C;;GAEG;AACH,qBACa,WAAY,SAAQ,UAAW,YAAW,aAAa;IAE5D,WAAW,EAAG,aAAa,CAAC,aAAa,CAAC,CAAC;IAG3C,aAAa,EAAE,aAAa,CAAC,eAAe,CAAC,CAAC;IAG9C,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAGpC,SAAS,UAA0B;IAGnC,MAAM,UAAuB;IAG7B,QAAQ,UAAyB;IAErC,iBAAiB;IAQjB,oBAAoB;IAUpB,sBAAsB;IAStB,MAAM;IA0BN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;KACpC;CACJ"}

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

@@ -1,16 +1,9 @@
-import { LitElement as p } from "lit";
-import { safeCustomElement as n } from "@justeattakeaway/pie-webc-core";
-var a = Object.getOwnPropertyDescriptor, f = (r, s, o, m) => {
-  for (var e = m > 1 ? void 0 : m ? a(s, o) : s, t = r.length - 1, i; t >= 0; t--)
-    (i = r[t]) && (e = i(e) || e);
-  return e;
-};
-let l = class extends p {
-  // component logic
-};
-l = f([
-  n("pie-list-item")
-], l);
+import "lit";
+import "lit/decorators.js";
+import "@justeattakeaway/pie-webc-core";
+import "../PieElement-Y2VnHR4y.js";
+import "lit/directives/class-map.js";
+import { P as s } from "../index-D4OaeeiJ.js";
 export {
-  l as PieListItem
+  s as PieListItem
 };

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

@@ -1,13 +1,15 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
-import { PieListItem as i } from "./index.js";
-const m = t({
+import { P as m } from "../index-D4OaeeiJ.js";
+import { d as c } from "../index-D4OaeeiJ.js";
+const i = t({
   displayName: "PieListItem",
-  elementClass: i,
+  elementClass: m,
   react: e,
   tagName: "pie-list-item",
   events: {}
-}), o = m;
+}), a = i;
 export {
-  o as PieListItem
+  a as PieListItem,
+  c as defaultProps
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-list",
   "description": "PIE Design System List built using Web Components",
-  "version": "0.0.31",
+  "version": "0.1.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -38,14 +38,15 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.2.0",
+    "@justeattakeaway/pie-css": "1.3.0",
     "@justeattakeaway/pie-monorepo-utils": "0.9.6"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "15.1.0"
+    "@justeattakeaway/pie-webc-core": "16.0.0"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [
-    "dist/*.js"
+    "dist/*.js",
+    "dist/**/*.js"
   ]
 }

package/src/index.ts

@@ -15,8 +15,16 @@ const componentSelector = 'pie-list';
  */
 @safeCustomElement('pie-list')
 export class PieList extends RtlMixin(PieElement) implements ListProps {
+    connectedCallback (): void {
+        super.connectedCallback();
+
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'list');
+        }
+    }
+
     render () {
-        return html`<h1 data-test-id="pie-list">Hello world!</h1>`;
+        return html`<slot></slot>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/src/list.scss

@@ -2,4 +2,10 @@
 
 :host {
     display: block;
+
+    ::slotted(*:nth-last-child(n+2)) {
+        // This allows list-items following other list-items to have 1px stripped off of their padding to account for the added border.
+        --list-item-size-modifier: 1px;
+        --list-item-border-override: var(--list-item-size-modifier) solid var(--dt-color-divider-default);
+    }
 }

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

@@ -1,3 +1,43 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface ListItemProps {}
+import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
+
+export interface ListItemProps {
+    /**
+     * **Required:** Provides an overview of the content.
+     */
+    primaryText?: string,
+    /**
+     * Provides optional additional detail.
+     */
+    secondaryText?: string,
+    /**
+     * Provides further optional information about the context, status or attributes of the primary content.
+     */
+    metaText?: string
+
+    /**
+     * The height of the component is decreased to reduce the vertical space, and used when space needs to be saved.
+     *
+     * **Note**: Do not use if you require secondary text, or if you want to slot a pie-avatar, pie-thumbnail or Icon with Background component into the list item.
+     */
+    isCompact?: boolean
+
+    /**
+     * Sets the primary text to use a bold font-weight.
+     */
+    isBold?: boolean
+
+    /**
+     * Reduces the block padding to suit larger slotted media (such as a pie-thumbnail).
+     *
+     * **Note**: This has no effect when `secondaryText` is set, and should not be combined with `isCompact`.
+     */
+    hasMedia?: boolean
+}
+
+export type DefaultProps = ComponentDefaultProps<ListItemProps, keyof Omit<ListItemProps, 'primaryText' | 'secondaryText' | 'metaText'>>;
+
+export const defaultProps: DefaultProps = {
+    isCompact: false,
+    isBold: false,
+    hasMedia: false,
+};

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

@@ -1,6 +1,10 @@
-import { LitElement } from 'lit';
+import { html, nothing, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
 import { safeCustomElement } from '@justeattakeaway/pie-webc-core';
-import { type ListItemProps } from './defs';
+import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+import { classMap } from 'lit/directives/class-map.js';
+import { type ListItemProps, defaultProps } from './defs';
+import styles from './list-item.scss?inline';
 
 const componentSelector = 'pie-list-item';
 
@@ -8,8 +12,79 @@ const componentSelector = 'pie-list-item';
  * @tagname pie-list-item
  */
 @safeCustomElement('pie-list-item')
-export class PieListItem extends LitElement implements ListItemProps {
-    // component logic
+export class PieListItem extends PieElement implements ListItemProps {
+    @property({ type: String })
+        primaryText!: ListItemProps['primaryText'];
+
+    @property({ type: String })
+        secondaryText: ListItemProps['secondaryText'];
+
+    @property({ type: String })
+        metaText: ListItemProps['metaText'];
+
+    @property({ type: Boolean })
+        isCompact = defaultProps.isCompact;
+
+    @property({ type: Boolean })
+        isBold = defaultProps.isBold;
+
+    @property({ type: Boolean })
+        hasMedia = defaultProps.hasMedia;
+
+    connectedCallback () {
+        super.connectedCallback();
+
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'listitem');
+        }
+    }
+
+    _renderSecondaryText () {
+        const { secondaryText } = this;
+        if (secondaryText) {
+            return html`<span class="c-listItem-secondaryText">${secondaryText}</span>`;
+        }
+
+        return nothing;
+    }
+
+    // metaText is another form of trailing content. The component can only ever display either slotted trailing content or the metaText string
+    _renderTrailingContent () {
+        const { metaText } = this;
+        if (metaText) {
+            return html`<span class="c-listItem-metaText c-listItem-trailing">${metaText}</span>`;
+        }
+
+        return html`<div class="c-listItem-trailing"><slot name="trailing"></slot></div>`;
+    }
+
+    render () {
+        const { primaryText } = this;
+
+        const containerClasses = {
+            'c-listItem-container': true,
+            'is-compact': this.isCompact,
+            'is-bold': this.isBold,
+            'has-media': this.hasMedia,
+        };
+
+        return html`
+        <div class=${classMap(containerClasses)}>
+            <div class="c-listItem-leading">
+                <slot name="leading"></slot>
+            </div>
+
+            <div class="c-listItem-text">
+                <span class="c-listItem-primaryText">${primaryText}</span>
+                ${this._renderSecondaryText()}
+            </div>
+
+            ${this._renderTrailingContent()}
+        </div>`;
+    }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
 }
 
 declare global {

package/src/pie-list-item/list-item.scss

@@ -1 +1,112 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+:host {
+    // Defined on the host so consumers can override them directly (a declaration on the element
+    // takes precedence over these defaults). Setting them on `pie-list` does not work, since the
+    // host declaration wins over a value inherited from an ancestor.
+    --list-item-inline-padding: var(--dt-spacing-d);
+    --list-item-alignment: flex-start;
+
+    // Using contents to remove the host from the box model so that the internal container element fully acts as the component shell
+    display: block;
+}
+
+// Using an internal container div rather than applying directly to the host due to safari and firefox compat issues
+.c-listItem-container {
+    --list-item-block-padding: var(--dt-spacing-d);
+
+    // The list component will add a border to each list-item that follows another. This ensures the height accounts for the added border.
+    --list-item-block-end-padding: calc(var(--list-item-block-padding) - var(--list-item-size-modifier));
+
+    padding-inline-start: var(--list-item-inline-padding);
+    padding-inline-end: var(--list-item-inline-padding);
+
+    padding-block-start: var(--list-item-block-padding);
+    padding-block-end: var(--list-item-block-end-padding, var(--list-item-block-padding));
+
+    // Layout
+    display: flex;
+    align-items: var(--list-item-alignment);
+    gap: var(--dt-spacing-c);
+    min-height: 56px;
+    border-bottom: var(--list-item-border-override, none);
+}
+
+// Two lines of text (primary + secondary) need top-alignment so leading/trailing
+// content sits level with the first line, not centred across both lines.
+.c-listItem-container:has(.c-listItem-secondaryText) {
+    align-items: var(--list-item-alignment);
+    min-height: 76px;
+}
+
+.c-listItem-container.is-compact {
+    --list-item-block-padding: var(--dt-spacing-c);
+
+    // Compact items are centre-aligned.
+    --list-item-alignment: center;
+    align-items: var(--list-item-alignment);
+    min-height: 48px;
+}
+
+// Larger slotted media (e.g. pie-thumbnail) reduces the block padding, but only
+// when the primary text stands alone (`:only-child` == no secondary text). With
+// secondary text the default padding is kept so two lines of text sit correctly.
+.c-listItem-container.has-media:has(.c-listItem-primaryText:only-child) {
+    --list-item-block-padding: var(--dt-spacing-b);
+}
+
+.c-listItem-text {
+    flex: 1;
+}
+
+slot[name="trailing"]::slotted(*),
+.c-listItem-metaText {
+    // Add a tiny bit of padding to the flex gap to make up 16px total
+    padding-inline-start: var(--dt-spacing-a);
+}
+
+// Ensures that empty slots do not create a flex-gap in the container.
+.c-listItem-leading, slot[name="leading"],
+.c-listItem-trailing, slot[name="trailing"] {
+    display: contents;
+}
+
+// Vertically stack the text items
+.c-listItem-text > * {
+    display: block;
+}
+
+// Flush trailing content to the end of the list-item
+.c-listItem-trailing {
+    margin-inline-start: auto;
+}
+
+.c-listItem-metaText {
+    display: block;
+    max-width: calc(100% / 3);
+}
+
+::slotted(.c-pieIcon) {
+    --icon-size-override: 24px
+}
+
+// typography
+
+.c-listItem-primaryText {
+    @include p.font-theme('font-body-l');
+    color: var(--dt-color-content-default);
+}
+
+.c-listItem-container.is-bold .c-listItem-primaryText {
+    @include p.font-theme('font-body-strong-l');
+}
+
+.c-listItem-secondaryText {
+    @include p.font-theme('font-body-s');
+    color: var(--dt-color-content-subdued);
+}
+
+.c-listItem-metaText {
+    @include p.font-theme('font-body-s');
+    color: var(--dt-color-content-subdued);
+}