@justeattakeaway/pie-breadcrumb 0.1.1 → 0.3.0

package/custom-elements.json

@@ -14,35 +14,35 @@
       "declarations": [
         {
           "kind": "variable",
-          "name": "componentSelector",
+          "name": "variants",
           "type": {
-            "text": "string"
+            "text": "['default', 'scrim']"
           },
-          "default": "'pie-breadcrumb'"
+          "default": "['default', 'scrim']"
         },
         {
           "kind": "variable",
-          "name": "componentClass",
+          "name": "defaultProps",
           "type": {
-            "text": "string"
+            "text": "Pick<BreadcrumbProps, 'variant' | 'isCompact'>"
           },
-          "default": "'c-breadcrumb'"
+          "default": "{\n    variant: 'default',\n    isCompact: false,\n}"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "componentSelector",
+          "name": "variants",
           "declaration": {
-            "name": "componentSelector",
+            "name": "variants",
             "module": "src/defs.js"
           }
         },
         {
           "kind": "js",
-          "name": "componentClass",
+          "name": "defaultProps",
           "declaration": {
-            "name": "componentClass",
+            "name": "defaultProps",
             "module": "src/defs.js"
           }
         }
@@ -56,7 +56,170 @@
           "kind": "class",
           "description": "",
           "name": "PieBreadcrumb",
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "BreadcrumbProps['items']"
+              },
+              "privacy": "public",
+              "default": "[]",
+              "attribute": "items"
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "privacy": "public",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "isCompact",
+              "privacy": "public",
+              "attribute": "isCompact"
+            },
+            {
+              "kind": "method",
+              "name": "renderSeparator",
+              "privacy": "private",
+              "description": "Renders a separator icon between breadcrumb items.\nThe icon direction depends on the RTL (Right-to-Left) setting.",
+              "return": {
+                "type": {
+                  "text": "TemplateResult"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "renderNavigationLink",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "BreadcrumbItem"
+                  },
+                  "description": "The breadcrumb item containing label and URL."
+                }
+              ],
+              "description": "Renders a navigation link for a breadcrumb item."
+            },
+            {
+              "kind": "method",
+              "name": "renderLastItem",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "BreadcrumbItem"
+                  },
+                  "description": "The breadcrumb item containing label and URL."
+                }
+              ],
+              "description": "Renders the last breadcrumb item.\nIt has 250px of max-width. If the label reaches this width the text truncates."
+            },
+            {
+              "kind": "method",
+              "name": "renderItem",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "BreadcrumbItem"
+                  },
+                  "description": "The breadcrumb item to render."
+                },
+                {
+                  "name": "isLastItem",
+                  "default": "false",
+                  "description": "Indicates if the item is the last in the breadcrumb trail.",
+                  "optional": true,
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Renders an individual breadcrumb item.\n\nConditionally renders either a clickable link or plain text for the last item."
+            },
+            {
+              "kind": "method",
+              "name": "renderDefaultBreadcrumb",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "BreadcrumbProps['items']"
+                  },
+                  "description": "Breadcrumb items to render."
+                }
+              ],
+              "description": "Renders breadcrumb items using the default variant style."
+            },
+            {
+              "kind": "method",
+              "name": "renderCompactBreadcrumbSeparator",
+              "privacy": "private",
+              "description": "Renders a separator icon specifically for the back variant.\nThe icon direction depends on the RTL (Right-to-Left) setting."
+            },
+            {
+              "kind": "method",
+              "name": "renderCompactBreadcrumb",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "BreadcrumbProps['items']"
+                  },
+                  "description": "Breadcrumb items to render."
+                }
+              ],
+              "description": "Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator."
+            },
+            {
+              "kind": "method",
+              "name": "renderBreadcrumbItems",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "BreadcrumbProps['items']"
+                  },
+                  "description": "Array of breadcrumb items to render."
+                },
+                {
+                  "name": "isCompact",
+                  "type": {
+                    "text": "BreadcrumbProps['isCompact']"
+                  }
+                }
+              ],
+              "description": "Renders a complete breadcrumb list.\nIterates over breadcrumb items to generate the breadcrumb trail."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "items",
+              "type": {
+                "text": "BreadcrumbProps['items']"
+              },
+              "default": "[]",
+              "fieldName": "items"
+            },
+            {
+              "name": "variant",
+              "fieldName": "variant"
+            },
+            {
+              "name": "isCompact",
+              "fieldName": "isCompact"
+            }
+          ],
           "mixins": [
             {
               "name": "RtlMixin",

package/dist/index.d.ts

@@ -4,21 +4,107 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
 
+export declare type BreadcrumbItem = {
+    label: string;
+    href: string;
+};
+
 export declare interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    /**
+     * Optional variant for styling the breadcrumb component.
+     */
+    variant?: typeof variants[number];
+    /**
+     * Optional property for rendering a compact variation of the breadcrumb.
+     */
+    isCompact?: boolean;
 }
 
-export declare const componentClass = "c-breadcrumb";
-
-export declare const componentSelector = "pie-breadcrumb";
+export declare const defaultProps: Pick<BreadcrumbProps, 'variant' | 'isCompact'>;
 
 /**
  * @tagname pie-breadcrumb
  */
 export declare class PieBreadcrumb extends PieBreadcrumb_base implements BreadcrumbProps {
+    items: BreadcrumbProps['items'];
+    variant: "default" | "scrim" | undefined;
+    isCompact: boolean | undefined;
+    /**
+     * Renders a separator icon between breadcrumb items.
+     * The icon direction depends on the RTL (Right-to-Left) setting.
+     *
+     * @returns {TemplateResult} HTML template for the separator icon.
+     *
+     * @private
+     */
+    private renderSeparator;
+    /**
+     * Renders a navigation link for a breadcrumb item.
+     *
+     * @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
+     *
+     * @private
+     */
+    private renderNavigationLink;
+    /**
+     * Renders the last breadcrumb item.
+     * It has 250px of max-width. If the label reaches this width the text truncates.
+     *
+     * @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
+     *
+     * @private
+     */
+    private renderLastItem;
+    /**
+     * Renders an individual breadcrumb item.
+
+     * Conditionally renders either a clickable link or plain text for the last item.
+     *
+     * @param {BreadcrumbItem} item - The breadcrumb item to render.
+     * @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
+     *
+     * @private
+     */
+    private renderItem;
+    /**
+     * Renders breadcrumb items using the default variant style.
+     *
+     * @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
+     *
+     * @private
+     */
+    private renderDefaultBreadcrumb;
+    /**
+     * Renders a separator icon specifically for the back variant.
+     * The icon direction depends on the RTL (Right-to-Left) setting.
+     *
+     * @private
+     */
+    private renderCompactBreadcrumbSeparator;
+    /**
+     * Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator.
+     *
+     * @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
+     *
+     * @private
+     */
+    private renderCompactBreadcrumb;
+    /**
+     * Renders a complete breadcrumb list.
+     * Iterates over breadcrumb items to generate the breadcrumb trail.
+     *
+     * @param {BreadcrumbProps['items']} items - Array of breadcrumb items to render.
+     *
+     * @private
+     */
+    private renderBreadcrumbItems;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
 
 declare const PieBreadcrumb_base: GenericConstructor<RTLInterface> & typeof PieElement;
 
+export declare const variants: readonly ["default", "scrim"];
+
 export { }

package/dist/index.js

@@ -1,41 +1,189 @@
-import { LitElement as c, html as d, unsafeCSS as m } from "lit";
-import { RtlMixin as f, defineCustomElement as u } from "@justeattakeaway/pie-webc-core";
-import { classMap as v } from "lit/directives/class-map.js";
-import { property as g } from "lit/decorators.js";
-var b = Object.defineProperty, y = (t, e, o, h) => {
-  for (var r = void 0, a = t.length - 1, i; a >= 0; a--)
-    (i = t[a]) && (r = i(e, o, r) || r);
-  return r && b(e, o, r), r;
+import { LitElement as f, html as a, nothing as u, unsafeCSS as g } from "lit";
+import { property as d } from "lit/decorators.js";
+import { RtlMixin as $, validPropertyValues as y, defineCustomElement as C } from "@justeattakeaway/pie-webc-core";
+import { classMap as b } from "lit/directives/class-map.js";
+import "@justeattakeaway/pie-link";
+import "@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js";
+import "@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js";
+var k = Object.defineProperty, x = (s, r, e, o) => {
+  for (var t = void 0, i = s.length - 1, c; i >= 0; i--)
+    (c = s[i]) && (t = c(r, e, t) || t);
+  return t && k(r, e, t), t;
 };
-class l extends c {
+class v extends f {
   constructor() {
-    super(...arguments), this.v = "0.1.1";
+    super(...arguments), this.v = "0.3.0";
   }
 }
-y([
-  g({ type: String, reflect: !0 })
-], l.prototype, "v");
-const x = "*,*:after,*:before{box-sizing:inherit}.c-breadcrumb{--breadcrumb-background-color: var(--dt-color-transparent);padding:var(--dt-spacing-a) var(--dt-spacing-d) var(--dt-spacing-a) var(--dt-spacing-d)}.c-breadcrumb ol{margin:0;padding:0;display:flex;flex-flow:row;gap:var(--dt-spacing-a)}.c-breadcrumb ol li{list-style-type:none}", p = "pie-breadcrumb", C = "c-breadcrumb", s = class s extends f(l) {
-  render() {
+x([
+  d({ type: String, reflect: !0 })
+], v.prototype, "v");
+const S = "*,*:after,*:before{box-sizing:inherit}.c-breadcrumb{--breadcrumb-background-color: var(--dt-color-transparent);background-color:var(--breadcrumb-background-color);padding:var(--dt-spacing-a) var(--dt-spacing-d) var(--dt-spacing-a) var(--dt-spacing-d)}.c-breadcrumb-list{margin:0;padding:0;display:flex;flex-flow:row;gap:var(--dt-spacing-a)}.c-breadcrumb-list li{list-style-type:none;display:flex;align-items:center;white-space:nowrap}.c-breadcrumb--scrim{--breadcrumb-background-color: var(--dt-color-overlay);border-radius:var(--dt-radius-rounded-e)}.c-breadcrumb-list-last-item{overflow:hidden;text-overflow:ellipsis;max-width:250px;color:var(--dt-color-content-subdued)}.c-breadcrumb-list-last-item--scrim{color:var(--dt-color-content-link-light)}.c-breadcrumb-separator{color:var(--dt-color-content-subdued)}.c-breadcrumb-separator--scrim{color:var(--dt-color-content-link-light)}", w = ["default", "scrim"], l = {
+  variant: "default",
+  isCompact: !1
+};
+var B = Object.defineProperty, m = (s, r, e, o) => {
+  for (var t = void 0, i = s.length - 1, c; i >= 0; i--)
+    (c = s[i]) && (t = c(r, e, t) || t);
+  return t && B(r, e, t), t;
+};
+const h = "pie-breadcrumb", p = class p extends $(v) {
+  constructor() {
+    super(...arguments), this.items = [], this.variant = l.variant, this.isCompact = l.isCompact;
+  }
+  /**
+   * Renders a separator icon between breadcrumb items.
+   * The icon direction depends on the RTL (Right-to-Left) setting.
+   *
+   * @returns {TemplateResult} HTML template for the separator icon.
+   *
+   * @private
+   */
+  renderSeparator() {
+    const r = this.variant === "scrim" ? "c-breadcrumb-separator--scrim" : "c-breadcrumb-separator";
+    return a`
+            <li
+                role="presentation"
+                aria-hidden="true"
+                class="${r}"
+                data-test-id="pie-breadcrumb-separator">
+                    ${this.isRTL ? a`<icon-chevron-left></icon-chevron-left>` : a`<icon-chevron-right></icon-chevron-right>`}
+            </li>
+        `;
+  }
+  /**
+   * Renders a navigation link for a breadcrumb item.
+   *
+   * @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
+   *
+   * @private
+   */
+  renderNavigationLink(r) {
+    const e = this.variant === "scrim" ? "inverse" : "default";
+    return a`
+            <pie-link variant="${e}" isStandalone underline="reversed" isBold href="${r.href}">
+                ${r.label}
+            </pie-link>
+        `;
+  }
+  /**
+   * Renders the last breadcrumb item.
+   * It has 250px of max-width. If the label reaches this width the text truncates.
+   *
+   * @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
+   *
+   * @private
+   */
+  renderLastItem(r) {
     const e = {
-      [C]: !0
+      "c-breadcrumb-list-last-item": !0,
+      "c-breadcrumb-list-last-item--scrim": this.variant === "scrim"
     };
-    return d`
+    return a`<span class="${b(e)}">${r.label}</span>`;
+  }
+  /**
+       * Renders an individual breadcrumb item.
+  
+       * Conditionally renders either a clickable link or plain text for the last item.
+       *
+       * @param {BreadcrumbItem} item - The breadcrumb item to render.
+       * @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
+       *
+       * @private
+       */
+  renderItem(r, e = !1) {
+    return a`
+            <li role="listitem" data-test-id="pie-breadcrumb-item">
+                ${e ? this.renderLastItem(r) : this.renderNavigationLink(r)}
+            </li>
+            ${e ? u : this.renderSeparator()}
+        `;
+  }
+  /**
+   * Renders breadcrumb items using the default variant style.
+   *
+   * @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
+   *
+   * @private
+   */
+  renderDefaultBreadcrumb(r) {
+    const e = r.length - 1;
+    return a`${r.map((o, t) => this.renderItem(o, e <= t))}`;
+  }
+  /**
+   * Renders a separator icon specifically for the back variant.
+   * The icon direction depends on the RTL (Right-to-Left) setting.
+   *
+   * @private
+   */
+  renderCompactBreadcrumbSeparator() {
+    const r = this.variant === "scrim" ? "c-breadcrumb-separator--scrim" : "c-breadcrumb-separator";
+    return a`
+            <li role="presentation" aria-hidden="true" class="${r}" data-test-id="pie-breadcrumb-separator">
+                ${this.isRTL ? a`<icon-chevron-right></icon-chevron-right>` : a`<icon-chevron-left></icon-chevron-left>`}
+            </li>
+        `;
+  }
+  /**
+   * Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator.
+   *
+   * @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
+   *
+   * @private
+   */
+  renderCompactBreadcrumb(r) {
+    const e = r[r.length - 1];
+    return a`
+            ${this.renderCompactBreadcrumbSeparator()}
+            <li role="listitem" data-test-id="pie-breadcrumb-item">
+                ${this.renderNavigationLink(e)}    
+            </li>
+        `;
+  }
+  /**
+   * Renders a complete breadcrumb list.
+   * Iterates over breadcrumb items to generate the breadcrumb trail.
+   *
+   * @param {BreadcrumbProps['items']} items - Array of breadcrumb items to render.
+   *
+   * @private
+   */
+  renderBreadcrumbItems(r, e) {
+    return a`
+            <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
+                ${e ? this.renderCompactBreadcrumb(r) : this.renderDefaultBreadcrumb(r)}
+            </ol>
+        `;
+  }
+  render() {
+    const { items: r, variant: e, isCompact: o } = this;
+    return a`
             <nav
-                data-test-id="${p}"
-                class="${v(e)}">
-                <ol>
-                    <li><span>Previous Page</span></li>
-                    <li><span>Current Page</span></li>
-                </ol>
+                aria-label="breadcrumb"
+                data-test-id="pie-breadcrumb"
+                class="${b({
+      "c-breadcrumb": !0,
+      "c-breadcrumb--scrim": e === "scrim"
+    })}">
+                ${r ? this.renderBreadcrumbItems(r, o) : u}
             </nav>`;
   }
 };
-s.styles = m(x);
-let n = s;
-u(p, n);
+p.styles = g(S);
+let n = p;
+m([
+  d({ type: Array })
+], n.prototype, "items");
+m([
+  d({ type: String }),
+  y(h, w, l.variant)
+], n.prototype, "variant");
+m([
+  d({ type: Boolean })
+], n.prototype, "isCompact");
+C(h, n);
 export {
   n as PieBreadcrumb,
-  C as componentClass,
-  p as componentSelector
+  l as defaultProps,
+  w as variants
 };

package/dist/react.d.ts

@@ -5,12 +5,24 @@ import * as React_2 from 'react';
 import type { RTLInterface } from '@justeattakeaway/pie-webc-core';
 import type { TemplateResult } from 'lit-html';
 
+export declare type BreadcrumbItem = {
+    label: string;
+    href: string;
+};
+
 export declare interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    /**
+     * Optional variant for styling the breadcrumb component.
+     */
+    variant?: typeof variants[number];
+    /**
+     * Optional property for rendering a compact variation of the breadcrumb.
+     */
+    isCompact?: boolean;
 }
 
-export declare const componentClass = "c-breadcrumb";
-
-export declare const componentSelector = "pie-breadcrumb";
+export declare const defaultProps: Pick<BreadcrumbProps, 'variant' | 'isCompact'>;
 
 export declare const PieBreadcrumb: React_2.ForwardRefExoticComponent<BreadcrumbProps & React_2.RefAttributes<PieBreadcrumb_2> & ReactBaseType>;
 
@@ -18,6 +30,78 @@ export declare const PieBreadcrumb: React_2.ForwardRefExoticComponent<Breadcrumb
  * @tagname pie-breadcrumb
  */
 declare class PieBreadcrumb_2 extends PieBreadcrumb_base implements BreadcrumbProps {
+    items: BreadcrumbProps['items'];
+    variant: "default" | "scrim" | undefined;
+    isCompact: boolean | undefined;
+    /**
+     * Renders a separator icon between breadcrumb items.
+     * The icon direction depends on the RTL (Right-to-Left) setting.
+     *
+     * @returns {TemplateResult} HTML template for the separator icon.
+     *
+     * @private
+     */
+    private renderSeparator;
+    /**
+     * Renders a navigation link for a breadcrumb item.
+     *
+     * @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
+     *
+     * @private
+     */
+    private renderNavigationLink;
+    /**
+     * Renders the last breadcrumb item.
+     * It has 250px of max-width. If the label reaches this width the text truncates.
+     *
+     * @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
+     *
+     * @private
+     */
+    private renderLastItem;
+    /**
+     * Renders an individual breadcrumb item.
+
+     * Conditionally renders either a clickable link or plain text for the last item.
+     *
+     * @param {BreadcrumbItem} item - The breadcrumb item to render.
+     * @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
+     *
+     * @private
+     */
+    private renderItem;
+    /**
+     * Renders breadcrumb items using the default variant style.
+     *
+     * @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
+     *
+     * @private
+     */
+    private renderDefaultBreadcrumb;
+    /**
+     * Renders a separator icon specifically for the back variant.
+     * The icon direction depends on the RTL (Right-to-Left) setting.
+     *
+     * @private
+     */
+    private renderCompactBreadcrumbSeparator;
+    /**
+     * Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator.
+     *
+     * @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
+     *
+     * @private
+     */
+    private renderCompactBreadcrumb;
+    /**
+     * Renders a complete breadcrumb list.
+     * Iterates over breadcrumb items to generate the breadcrumb trail.
+     *
+     * @param {BreadcrumbProps['items']} items - Array of breadcrumb items to render.
+     *
+     * @private
+     */
+    private renderBreadcrumbItems;
     render(): TemplateResult<1>;
     static styles: CSSResult;
 }
@@ -26,4 +110,6 @@ declare const PieBreadcrumb_base: GenericConstructor<RTLInterface> & typeof PieE
 
 declare type ReactBaseType = React_2.HTMLAttributes<HTMLElement>;
 
+export declare const variants: readonly ["default", "scrim"];
+
 export { }

package/dist/react.js

@@ -1,16 +1,16 @@
 import * as e from "react";
 import { createComponent as r } from "@lit/react";
-import { PieBreadcrumb as m } from "./index.js";
-import { componentClass as p, componentSelector as s } from "./index.js";
-const a = r({
+import { PieBreadcrumb as a } from "./index.js";
+import { defaultProps as p, variants as d } from "./index.js";
+const m = r({
   displayName: "PieBreadcrumb",
-  elementClass: m,
+  elementClass: a,
   react: e,
   tagName: "pie-breadcrumb",
   events: {}
-}), c = a;
+}), c = m;
 export {
   c as PieBreadcrumb,
-  p as componentClass,
-  s as componentSelector
+  p as defaultProps,
+  d as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-breadcrumb",
   "description": "PIE Design System Breadcrumb built using Web Components",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -33,7 +33,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.19.1",
+    "@justeattakeaway/pie-components-config": "0.20.0",
     "@justeattakeaway/pie-css": "0.16.0",
     "@justeattakeaway/pie-monorepo-utils": "0.5.0",
     "cem-plugin-module-file-extensions": "0.0.5"

package/src/breadcrumb.scss

@@ -2,19 +2,46 @@
 
 .c-breadcrumb {
   --breadcrumb-background-color: var(--dt-color-transparent);
-
+  background-color: var(--breadcrumb-background-color);
   padding: var(--dt-spacing-a) var(--dt-spacing-d) var(--dt-spacing-a) var(--dt-spacing-d);
+}
+
+.c-breadcrumb-list {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-flow: row;
+
+  gap: var(--dt-spacing-a);
 
-  ol {
-    margin: 0;
-    padding: 0;
+  li {
+    list-style-type: none;
     display: flex;
-    flex-flow: row;
+    align-items: center;
+    white-space: nowrap; 
+  }  
+}
+
+.c-breadcrumb--scrim {
+  --breadcrumb-background-color: var(--dt-color-overlay);
+  border-radius: var(--dt-radius-rounded-e);
+}
+
+.c-breadcrumb-list-last-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 250px;
+  color: var(--dt-color-content-subdued);
+}
+
+.c-breadcrumb-list-last-item--scrim {
+  color: var(--dt-color-content-link-light);
+}
 
-    gap: var(--dt-spacing-a);
+.c-breadcrumb-separator {
+  color: var(--dt-color-content-subdued);
+}
 
-    li {
-      list-style-type: none;
-    }
-  }
-}
+.c-breadcrumb-separator--scrim {
+  color: var(--dt-color-content-link-light);
+}

package/src/defs.ts

@@ -1,6 +1,26 @@
-// 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 BreadcrumbProps {}
+export const variants = ['default', 'scrim'] as const;
+
+export type BreadcrumbItem = {
+  label: string;
+  href: string;
+}
+
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[];
+
+  /**
+   * Optional variant for styling the breadcrumb component.
+   */
+  variant?: typeof variants[number];
+
+  /**
+   * Optional property for rendering a compact variation of the breadcrumb.
+   */
+  isCompact?: boolean;
+}
+
+export const defaultProps: Pick<BreadcrumbProps, 'variant' | 'isCompact'> = {
+    variant: 'default',
+    isCompact: false,
+};
 
-export const componentSelector = 'pie-breadcrumb';
-export const componentClass = 'c-breadcrumb';

package/src/index.ts

@@ -1,10 +1,23 @@
-import { html, unsafeCSS } from 'lit';
-import { RtlMixin, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import { html, nothing, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
+import { RtlMixin, defineCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
 import { classMap } from 'lit/directives/class-map.js';
 
 import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
+
+import '@justeattakeaway/pie-link';
+import '@justeattakeaway/pie-icons-webc/dist/IconChevronRight.js';
+import '@justeattakeaway/pie-icons-webc/dist/IconChevronLeft.js';
+
 import styles from './breadcrumb.scss?inline';
-import { type BreadcrumbProps, componentSelector, componentClass } from './defs';
+import {
+    type BreadcrumbProps,
+    type BreadcrumbItem,
+    variants,
+    defaultProps,
+} from './defs';
+
+const componentSelector = 'pie-breadcrumb';
 
 // Valid values available to consumers
 export * from './defs';
@@ -13,19 +26,172 @@ export * from './defs';
  * @tagname pie-breadcrumb
  */
 export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbProps {
+    @property({ type: Array })
+    public items: BreadcrumbProps['items'] = [];
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, variants, defaultProps.variant)
+    public variant = defaultProps.variant;
+
+    @property({ type: Boolean })
+    public isCompact = defaultProps.isCompact;
+
+    /**
+     * Renders a separator icon between breadcrumb items.
+     * The icon direction depends on the RTL (Right-to-Left) setting.
+     *
+     * @returns {TemplateResult} HTML template for the separator icon.
+     *
+     * @private
+     */
+    private renderSeparator () {
+        const separatorVariant = this.variant === 'scrim' ? 'c-breadcrumb-separator--scrim' : 'c-breadcrumb-separator';
+
+        return html`
+            <li
+                role="presentation"
+                aria-hidden="true"
+                class="${separatorVariant}"
+                data-test-id="pie-breadcrumb-separator">
+                    ${this.isRTL ? html`<icon-chevron-left></icon-chevron-left>` : html`<icon-chevron-right></icon-chevron-right>`}
+            </li>
+        `;
+    }
+
+    /**
+     * Renders a navigation link for a breadcrumb item.
+     *
+     * @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
+     *
+     * @private
+     */
+    private renderNavigationLink (item: BreadcrumbItem) {
+        const linkVariant = this.variant === 'scrim' ? 'inverse' : 'default';
+
+        return html`
+            <pie-link variant="${linkVariant}" isStandalone underline="reversed" isBold href="${item.href}">
+                ${item.label}
+            </pie-link>
+        `;
+    }
+
+    /**
+     * Renders the last breadcrumb item.
+     * It has 250px of max-width. If the label reaches this width the text truncates.
+     *
+     * @param {BreadcrumbItem} item - The breadcrumb item containing label and URL.
+     *
+     * @private
+     */
+    private renderLastItem (item: BreadcrumbItem) {
+        const wrapperClasses = {
+            'c-breadcrumb-list-last-item': true,
+            'c-breadcrumb-list-last-item--scrim': this.variant === 'scrim',
+        };
+
+        return html`<span class="${classMap(wrapperClasses)}">${item.label}</span>`;
+    }
+
+    /**
+     * Renders an individual breadcrumb item.
+
+     * Conditionally renders either a clickable link or plain text for the last item.
+     *
+     * @param {BreadcrumbItem} item - The breadcrumb item to render.
+     * @param {boolean} [isLastItem=false] - Indicates if the item is the last in the breadcrumb trail.
+     *
+     * @private
+     */
+    private renderItem (item: BreadcrumbItem, isLastItem = false) {
+        return html`
+            <li role="listitem" data-test-id="pie-breadcrumb-item">
+                ${
+                    isLastItem
+                        ? this.renderLastItem(item)
+                        : this.renderNavigationLink(item)
+                }
+            </li>
+            ${isLastItem ? nothing : this.renderSeparator()}
+        `;
+    }
+
+    /**
+     * Renders breadcrumb items using the default variant style.
+     *
+     * @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
+     *
+     * @private
+     */
+    private renderDefaultBreadcrumb (items: BreadcrumbProps['items']) {
+        const numberOfSeparators = items.length - 1;
+
+        return html`${items.map((item, index) => this.renderItem(item, numberOfSeparators <= index))}`;
+    }
+
+    /**
+     * Renders a separator icon specifically for the back variant.
+     * The icon direction depends on the RTL (Right-to-Left) setting.
+     *
+     * @private
+     */
+    private renderCompactBreadcrumbSeparator () {
+        const separatorVariant = this.variant === 'scrim' ? 'c-breadcrumb-separator--scrim' : 'c-breadcrumb-separator';
+
+        return html`
+            <li role="presentation" aria-hidden="true" class="${separatorVariant}" data-test-id="pie-breadcrumb-separator">
+                ${this.isRTL ? html`<icon-chevron-right></icon-chevron-right>` : html`<icon-chevron-left></icon-chevron-left>`}
+            </li>
+        `;
+    }
+
+    /**
+     * Renders breadcrumb items using the back variant style, displaying only the last item with a preceding separator.
+     *
+     * @param {BreadcrumbProps['items']} items - Breadcrumb items to render.
+     *
+     * @private
+     */
+    private renderCompactBreadcrumb (items: BreadcrumbProps['items']) {
+        const lastItem = items[items.length - 1];
+
+        return html`
+            ${this.renderCompactBreadcrumbSeparator()}
+            <li role="listitem" data-test-id="pie-breadcrumb-item">
+                ${this.renderNavigationLink(lastItem)}    
+            </li>
+        `;
+    }
+
+    /**
+     * Renders a complete breadcrumb list.
+     * Iterates over breadcrumb items to generate the breadcrumb trail.
+     *
+     * @param {BreadcrumbProps['items']} items - Array of breadcrumb items to render.
+     *
+     * @private
+     */
+    private renderBreadcrumbItems (items: BreadcrumbProps['items'], isCompact: BreadcrumbProps['isCompact']) {
+        return html`
+            <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
+                ${isCompact ? this.renderCompactBreadcrumb(items) : this.renderDefaultBreadcrumb(items)}
+            </ol>
+        `;
+    }
+
     render () {
+        const { items, variant, isCompact } = this;
+
         const componentWrapperClasses = {
-            [componentClass]: true,
+            'c-breadcrumb': true,
+            'c-breadcrumb--scrim': variant === 'scrim',
         };
 
         return html`
             <nav
-                data-test-id="${componentSelector}"
+                aria-label="breadcrumb"
+                data-test-id="pie-breadcrumb"
                 class="${classMap(componentWrapperClasses)}">
-                <ol>
-                    <li><span>Previous Page</span></li>
-                    <li><span>Current Page</span></li>
-                </ol>
+                ${items ? this.renderBreadcrumbItems(items, isCompact) : nothing}
             </nav>`;
     }