@justeattakeaway/pie-breadcrumb 0.1.1 → 0.2.0

package/custom-elements.json

@@ -11,42 +11,8 @@
     {
       "kind": "javascript-module",
       "path": "src/defs.js",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "componentSelector",
-          "type": {
-            "text": "string"
-          },
-          "default": "'pie-breadcrumb'"
-        },
-        {
-          "kind": "variable",
-          "name": "componentClass",
-          "type": {
-            "text": "string"
-          },
-          "default": "'c-breadcrumb'"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "componentSelector",
-          "declaration": {
-            "name": "componentSelector",
-            "module": "src/defs.js"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "componentClass",
-          "declaration": {
-            "name": "componentClass",
-            "module": "src/defs.js"
-          }
-        }
-      ]
+      "declarations": [],
+      "exports": []
     },
     {
       "kind": "javascript-module",
@@ -56,7 +22,93 @@
           "kind": "class",
           "description": "",
           "name": "PieBreadcrumb",
-          "members": [],
+          "members": [
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "BreadcrumbProps['items']"
+              },
+              "privacy": "public",
+              "default": "[]",
+              "attribute": "items"
+            },
+            {
+              "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": "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.\nConditionally renders either a clickable link or plain text for the last item."
+            },
+            {
+              "kind": "method",
+              "name": "renderBreadcrumbItems",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "BreadcrumbProps['items']"
+                  },
+                  "description": "Array of breadcrumb items to render."
+                }
+              ],
+              "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"
+            }
+          ],
           "mixins": [
             {
               "name": "RtlMixin",

package/dist/index.d.ts

@@ -4,17 +4,56 @@ 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[];
 }
 
-export declare const componentClass = "c-breadcrumb";
-
-export declare const componentSelector = "pie-breadcrumb";
-
 /**
  * @tagname pie-breadcrumb
  */
 export declare class PieBreadcrumb extends PieBreadcrumb_base implements BreadcrumbProps {
+    items: BreadcrumbProps['items'];
+    /**
+     * 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 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 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;
 }

package/dist/index.js

@@ -1,41 +1,122 @@
-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 b, html as a, nothing as c, unsafeCSS as u } from "lit";
+import { property as p } from "lit/decorators.js";
+import { RtlMixin as f, defineCustomElement as v } from "@justeattakeaway/pie-webc-core";
+import { classMap as h } 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 g = Object.defineProperty, y = (s, e, t, l) => {
+  for (var r = void 0, i = s.length - 1, n; i >= 0; i--)
+    (n = s[i]) && (r = n(e, t, r) || r);
+  return r && g(e, t, r), r;
 };
-class l extends c {
+class m extends b {
   constructor() {
-    super(...arguments), this.v = "0.1.1";
+    super(...arguments), this.v = "0.2.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) {
+  p({ type: String, reflect: !0 })
+], m.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-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-list-last-item{overflow:hidden;text-overflow:ellipsis;max-width:250px}";
+var $ = Object.defineProperty, S = (s, e, t, l) => {
+  for (var r = void 0, i = s.length - 1, n; i >= 0; i--)
+    (n = s[i]) && (r = n(e, t, r) || r);
+  return r && $(e, t, r), r;
+};
+const w = "pie-breadcrumb", d = class d extends f(m) {
+  constructor() {
+    super(...arguments), this.items = [];
+  }
+  /**
+   * 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() {
+    return a`
+            <li
+                role="presentation"
+                aria-hidden="true"
+                class="c-breadcrumb-separator"
+                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(e) {
+    return a`
+            <pie-link isStandalone="true" underline="reversed" isBold="true" href="${e.href}">
+                ${e.label}
+            </pie-link>
+        `;
+  }
+  /**
+   * 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(e, t = !1) {
+    return a`
+            <li role="listitem" data-test-id="pie-breadcrumb-item">
+                ${t ? a`<span
+                                    class="c-breadcrumb-list-last-item" 
+                                    data-test-id="pie-breadcrumb-last-item">
+                                        ${e.label}
+                                </span>` : this.renderNavigationLink(e)}
+            </li>
+            ${t ? c : this.renderSeparator()}
+        `;
+  }
+  /**
+   * 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(e) {
+    const t = e.length - 1;
+    return a`
+            <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
+                ${e.map((l, r) => this.renderItem(l, t <= r))}
+            </ol>
+        `;
+  }
   render() {
-    const e = {
-      [C]: !0
-    };
-    return d`
+    const { items: e } = 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="${h({
+      "c-breadcrumb": !0
+    })}">
+                    ${e ? this.renderBreadcrumbItems(e) : c}
             </nav>`;
   }
 };
-s.styles = m(x);
-let n = s;
-u(p, n);
+d.styles = u(x);
+let o = d;
+S([
+  p({ type: Array })
+], o.prototype, "items");
+v(w, o);
 export {
-  n as PieBreadcrumb,
-  C as componentClass,
-  p as componentSelector
+  o as PieBreadcrumb
 };

package/dist/react.d.ts

@@ -5,19 +5,58 @@ 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[];
 }
 
-export declare const componentClass = "c-breadcrumb";
-
-export declare const componentSelector = "pie-breadcrumb";
-
 export declare const PieBreadcrumb: React_2.ForwardRefExoticComponent<BreadcrumbProps & React_2.RefAttributes<PieBreadcrumb_2> & ReactBaseType>;
 
 /**
  * @tagname pie-breadcrumb
  */
 declare class PieBreadcrumb_2 extends PieBreadcrumb_base implements BreadcrumbProps {
+    items: BreadcrumbProps['items'];
+    /**
+     * 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 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 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;
 }

package/dist/react.js

@@ -1,16 +1,13 @@
 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";
+const m = r({
   displayName: "PieBreadcrumb",
-  elementClass: m,
+  elementClass: a,
   react: e,
   tagName: "pie-breadcrumb",
   events: {}
-}), c = a;
+}), o = m;
 export {
-  c as PieBreadcrumb,
-  p as componentClass,
-  s as componentSelector
+  o as PieBreadcrumb
 };

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.2.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

@@ -4,17 +4,26 @@
   --breadcrumb-background-color: var(--dt-color-transparent);
 
   padding: var(--dt-spacing-a) var(--dt-spacing-d) var(--dt-spacing-a) var(--dt-spacing-d);
+}
 
-  ol {
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-flow: row;
+.c-breadcrumb-list {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-flow: row;
+
+  gap: var(--dt-spacing-a);
 
-    gap: var(--dt-spacing-a);
+  li {
+    list-style-type: none;
+    display: flex;
+    align-items: center;
+    white-space: nowrap; 
+  }  
+}
 
-    li {
-      list-style-type: none;
-    }
-  }
-}
+.c-breadcrumb-list-last-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 250px;
+}

package/src/defs.ts

@@ -1,6 +1,8 @@
-// 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 type BreadcrumbItem = {
+  label: string;
+  href: string;
+}
 
-export const componentSelector = 'pie-breadcrumb';
-export const componentClass = 'c-breadcrumb';
+export interface BreadcrumbProps {
+  items: BreadcrumbItem[]
+}

package/src/index.ts

@@ -1,10 +1,21 @@
-import { html, unsafeCSS } from 'lit';
+import { html, nothing, unsafeCSS } from 'lit';
+import { property } from 'lit/decorators.js';
 import { RtlMixin, defineCustomElement } 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,
+} from './defs';
+
+const componentSelector = 'pie-breadcrumb';
 
 // Valid values available to consumers
 export * from './defs';
@@ -13,19 +24,101 @@ export * from './defs';
  * @tagname pie-breadcrumb
  */
 export class PieBreadcrumb extends RtlMixin(PieElement) implements BreadcrumbProps {
+    @property({ type: Array })
+    public items: BreadcrumbProps['items'] = [];
+
+    /**
+     * 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 () {
+        return html`
+            <li
+                role="presentation"
+                aria-hidden="true"
+                class="c-breadcrumb-separator"
+                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) {
+        return html`
+            <pie-link isStandalone="true" underline="reversed" isBold="true" href="${item.href}">
+                ${item.label}
+            </pie-link>
+        `;
+    }
+
+    /**
+     * 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
+                        ? html`<span
+                                    class="c-breadcrumb-list-last-item" 
+                                    data-test-id="pie-breadcrumb-last-item">
+                                        ${item.label}
+                                </span>`
+                        : this.renderNavigationLink(item)
+                }
+            </li>
+            ${isLastItem ? nothing : this.renderSeparator()}
+        `;
+    }
+
+    /**
+     * 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']) {
+        const numberOfSeparators = items.length - 1;
+
+        return html`
+            <ol class="c-breadcrumb-list" data-test-id="pie-breadcrumb-list">
+                ${items.map((item, index) => this.renderItem(item, numberOfSeparators <= index))}
+            </ol>
+        `;
+    }
+
     render () {
+        const { items } = this;
+
         const componentWrapperClasses = {
-            [componentClass]: true,
+            'c-breadcrumb': true,
         };
 
         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) : nothing}
             </nav>`;
     }