@phillips/seldon 1.62.0 → 1.63.0

package/dist/assets/arrowPrev.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "MASTER UI Icon Library (2024)" }, /* @__PURE__ */ e.createElement("path", { id: "Vector", fillRule: "evenodd", clipRule: "evenodd", d: "M20.1594 11.1428C20.6237 11.1428 21 11.5265 21 11.9999C21 12.4733 20.6237 12.857 20.1594 12.857L6.21796 12.857L9.82651 16.5368C10.1548 16.8715 10.1548 17.4142 9.82651 17.7489C9.49825 18.0837 8.96603 18.0837 8.63777 17.7489L3.00002 12L8.63777 6.25105C8.96603 5.91632 9.49825 5.91632 9.82651 6.25105C10.1548 6.58579 10.1548 7.1285 9.82651 7.46323L6.21815 11.1428L20.1594 11.1428Z", fill: "black" })));
+export {
+  l as default
+};

package/dist/assets/chevronNext.svg.js

@@ -1,4 +1,5 @@
-const e = "data:image/svg+xml,%3csvg%20width='6'%20height='10'%20viewBox='0%200%206%2010'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M0.630178%200.73557C0.944399%200.421477%201.45199%200.421477%201.76621%200.73557L5.46435%204.43222C5.77857%204.74631%205.77857%205.25369%205.46435%205.56779L1.76621%209.26443C1.45199%209.57852%200.944399%209.57852%200.630178%209.26443C0.315957%208.95034%200.315957%208.44295%200.630178%208.12886L3.75627%204.99597L0.630178%201.87114C0.315957%201.55705%200.324014%201.04161%200.630178%200.73557Z'%20fill='%23949494'/%3e%3c/svg%3e";
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 8, height: 14, viewBox: "0 0 8 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.65778 7.08207L0.477733 12.2621C0.294674 12.4452 0.261921 12.9302 0.540867 13.2091C0.819813 13.4881 1.30483 13.4553 1.48788 13.2723L7.23313 7.52703C7.32592 7.43424 7.38009 7.26386 7.37462 7.08207C7.38009 6.90028 7.32592 6.7299 7.23313 6.63711L1.48788 0.891872C1.30483 0.708814 0.819813 0.676061 0.540867 0.955007C0.261921 1.23395 0.294674 1.71897 0.477733 1.90202L5.65778 7.08207Z", fill: "#ECEAE7" }));
 export {
-  e as default
+  l as default
 };

package/dist/components/Breadcrumb/Breadcrumb.d.ts

@@ -1,11 +1,27 @@
 import React from 'react';
 import { BreadcrumbItemProps } from './BreadcrumbItem';
 export interface BreadcrumbProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Unique id for component testing
+     */
+    id?: string;
     /**
      * The items to be displayed in the Breadcrumb. The items will be displayed left
      * to right in which they are ordered in the array (0 index being the first element)
      */
     items: BreadcrumbItemProps[];
+    /**
+     * Index of the item to truncate
+     */
+    truncateIndex?: number;
+    /**
+     * Max length for truncation
+     */
+    truncateLength?: number;
+    /**
+     * Custom element to render for the link
+     */
+    linkElement?: React.ElementType<React.ComponentProps<'a'>>;
 }
 /**
  * ## Overview
@@ -16,5 +32,5 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-breadcrumb--overview)
  */
-declare const Breadcrumb: ({ className, items, ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+declare const Breadcrumb: ({ className, items, truncateIndex, truncateLength, linkElement: CustomElement, ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
 export default Breadcrumb;

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,11 +1,42 @@
-import { jsx as a } from "react/jsx-runtime";
-import { getCommonProps as n } from "../../utils/index.js";
-import t from "../../node_modules/classnames/index.js";
-import b from "./BreadcrumbItem.js";
-const h = ({ className: l, items: e = [], ...m }) => {
-  const { className: o, ...s } = n(m, "Breadcrumb");
-  return /* @__PURE__ */ a("nav", { "aria-label": "Breadcrumb", className: t(o, l), ...s, ...m, children: /* @__PURE__ */ a("ol", { children: e.map((r, c) => /* @__PURE__ */ a(b, { href: r.href, label: r.label, isCurrent: e.length - 1 === c }, r.label)) }) });
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { getCommonProps as f } from "../../utils/index.js";
+import u from "../../node_modules/classnames/index.js";
+import p from "./BreadcrumbItem.js";
+import { SSRMediaQuery as t } from "../../providers/utils.js";
+import N from "../../assets/arrowPrev.svg.js";
+const M = ({
+  className: c,
+  items: e = [],
+  truncateIndex: n,
+  truncateLength: s = 10,
+  linkElement: m = "a",
+  ...a
+}) => {
+  const { className: d, ...i } = f(a, "Breadcrumb"), { id: b } = a;
+  return /* @__PURE__ */ h("nav", { "aria-label": "Breadcrumb", className: u(d, c), ...i, ...a, children: [
+    /* @__PURE__ */ r(t.Media, { lessThan: "md", children: /* @__PURE__ */ r(
+      m,
+      {
+        href: e[1].href ? e[1].href : "/",
+        className: "back-button",
+        "data-testid": `${b}-back-button`,
+        children: /* @__PURE__ */ r(N, {})
+      }
+    ) }),
+    /* @__PURE__ */ r(t.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ r("ol", { children: e.map((l, o) => /* @__PURE__ */ r(
+      p,
+      {
+        href: l.href,
+        label: l.label,
+        element: m,
+        isCurrent: e.length - 1 === o,
+        isTruncateText: n === o,
+        truncateLength: s
+      },
+      l.label
+    )) }) })
+  ] });
 };
 export {
-  h as default
+  M as default
 };

package/dist/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -12,6 +12,18 @@ export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLDivElement
      * Label to display in the breadcrumb
      */
     label?: string;
+    /**
+     * truncate text boolean
+     * */
+    isTruncateText?: boolean;
+    /**
+     * Length to which the text should be truncated
+     * */
+    truncateLength?: number;
+    /**
+     * Custom element to render for the link
+     */
+    element?: React.ElementType<React.ComponentProps<'a'>>;
 }
-declare const BreadcrumbItem: ({ className, href, label, isCurrent, ...props }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const BreadcrumbItem: ({ className, href, label, isCurrent, isTruncateText, truncateLength, element: CustomElement, ...props }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
 export default BreadcrumbItem;

package/dist/components/Breadcrumb/BreadcrumbItem.js

@@ -1,23 +1,32 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import { getCommonProps as i } from "../../utils/index.js";
-import m from "../../node_modules/classnames/index.js";
-import u from "../../assets/chevronNext.svg.js";
-const b = ({ className: a, href: s, label: c, isCurrent: r = !1, ...t }) => {
-  const { className: e, ...n } = i(t, "Breadcrumb"), l = r ? "page" : !1, f = r ? "" : s;
-  return /* @__PURE__ */ p("li", { children: [
-    /* @__PURE__ */ o(
-      "a",
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
+import { getCommonProps as N } from "../../utils/index.js";
+import c from "../../node_modules/classnames/index.js";
+import g from "../../assets/chevronNext.svg.js";
+const B = ({
+  className: m,
+  href: t,
+  label: r,
+  isCurrent: e = !1,
+  isTruncateText: n = !1,
+  truncateLength: a = 30,
+  element: f = "a",
+  ...p
+}) => {
+  const { className: o, ...l } = N(p, "Breadcrumb"), d = e ? "page" : !1, i = e ? "" : t, u = () => r && r.length > a ? `${r.slice(0, a)}...` : r;
+  return /* @__PURE__ */ h("li", { children: [
+    e ? /* @__PURE__ */ s("span", { className: c(o, m, { [`${o}--current`]: e }), children: r }) : /* @__PURE__ */ s(
+      f,
       {
-        "aria-current": l,
-        className: m(e, a, { [`${e}--current`]: r }),
-        href: f,
-        ...n,
-        children: c
+        "aria-current": d,
+        className: c(o, m, { [`${o}--current`]: e }),
+        href: i,
+        ...l,
+        children: n ? u() : r
       }
     ),
-    r ? null : /* @__PURE__ */ o("img", { className: m(e, a, "chevron"), src: u })
+    e ? null : /* @__PURE__ */ s(g, {})
   ] });
 };
 export {
-  b as default
+  B as default
 };

package/dist/index.js

@@ -1,123 +1,124 @@
-import { PaddingTokens as a, SpacingTokens as f, defaultYear as l, emailValidation as p, encodeURLSearchParams as s, findChildrenExcludingTypes as d, findChildrenOfType as m, generatePaddingClassName as u, getCommonProps as n, noOp as x, px as i, useNormalizedInputProps as g } from "./utils/index.js";
-import { default as C } from "./pages/Page.js";
-import { default as L } from "./components/Button/Button.js";
-import { ButtonVariants as I } from "./components/Button/types.js";
-import { default as T } from "./components/IconButton/IconButton.js";
-import { default as B } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as N } from "./site-furniture/Footer/Footer.js";
-import { Grid as v } from "./components/Grid/Grid.js";
-import { default as A } from "./site-furniture/Header/Header.js";
-import { default as D } from "./components/Navigation/Navigation.js";
-import { default as E } from "./components/Navigation/NavigationItem/NavigationItem.js";
-import { default as M } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
-import { default as R } from "./components/Navigation/NavigationList/NavigationList.js";
-import { default as z } from "./patterns/HeroBanner/HeroBanner.js";
-import { default as W } from "./components/Input/Input.js";
-import { default as j } from "./components/Link/Link.js";
-import { LinkVariants as J } from "./components/Link/types.js";
-import { default as Q } from "./components/LinkBlock/LinkBlock.js";
-import { default as Z } from "./components/LinkList/LinkList.js";
-import { default as $ } from "./components/Row/Row.js";
-import { default as oe } from "./components/GridItem/GridItem.js";
-import { GridItemAlign as te } from "./components/GridItem/types.js";
-import { default as fe } from "./components/Search/Search.js";
-import { default as pe } from "./components/Select/Select.js";
-import { default as de } from "./components/SplitPanel/SplitPanel.js";
-import { default as ue } from "./patterns/Subscribe/Subscribe.js";
+import { PaddingTokens as f, SpacingTokens as p, defaultYear as l, emailValidation as s, encodeURLSearchParams as d, findChildrenExcludingTypes as m, findChildrenOfType as u, generatePaddingClassName as i, getCommonProps as n, noOp as x, px as g, useNormalizedInputProps as c } from "./utils/index.js";
+import { default as S } from "./pages/Page.js";
+import { default as P } from "./components/Button/Button.js";
+import { ButtonVariants as k } from "./components/Button/types.js";
+import { default as b } from "./components/IconButton/IconButton.js";
+import { default as V } from "./components/ErrorBoundary/ErrorBoundary.js";
+import { default as h } from "./site-furniture/Footer/Footer.js";
+import { Grid as w } from "./components/Grid/Grid.js";
+import { default as y } from "./site-furniture/Header/Header.js";
+import { default as G } from "./components/Navigation/Navigation.js";
+import { default as H } from "./components/Navigation/NavigationItem/NavigationItem.js";
+import { default as O } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
+import { default as U } from "./components/Navigation/NavigationList/NavigationList.js";
+import { default as F } from "./patterns/HeroBanner/HeroBanner.js";
+import { default as Y } from "./components/Input/Input.js";
+import { default as q } from "./components/Link/Link.js";
+import { LinkVariants as K } from "./components/Link/types.js";
+import { default as X } from "./components/LinkBlock/LinkBlock.js";
+import { default as _ } from "./components/LinkList/LinkList.js";
+import { default as ee } from "./components/Row/Row.js";
+import { default as re } from "./components/GridItem/GridItem.js";
+import { GridItemAlign as ae } from "./components/GridItem/types.js";
+import { default as pe } from "./components/Search/Search.js";
+import { default as se } from "./components/Select/Select.js";
+import { default as me } from "./components/SplitPanel/SplitPanel.js";
+import { default as ie } from "./patterns/Subscribe/Subscribe.js";
 import { SubscriptionState as xe } from "./patterns/Subscribe/types.js";
-import { default as ge } from "./patterns/Social/Social.js";
-import { default as Ce } from "./patterns/ViewingsList/ViewingsList.js";
-import { default as Le } from "./components/Modal/Modal.js";
-import { default as Ie } from "./components/Drawer/Drawer.js";
-import { default as Te } from "./components/Pagination/Pagination.js";
-import { default as Be } from "./patterns/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as Ne } from "./components/Text/types.js";
-import { default as ve } from "./components/Text/Text.js";
-import { default as Ae } from "./components/Accordion/Accordion.js";
-import { default as De } from "./components/Accordion/AccordionItem.js";
-import { default as Ee } from "./patterns/UserManagement/UserManagement.js";
-import { AuthState as Me } from "./patterns/UserManagement/types.js";
-import { SupportedLanguages as Re } from "./types/commonTypes.js";
-import { default as ze } from "./components/Breadcrumb/Breadcrumb.js";
+import { default as ce } from "./patterns/Social/Social.js";
+import { default as Se } from "./patterns/ViewingsList/ViewingsList.js";
+import { default as Pe } from "./components/Modal/Modal.js";
+import { default as ke } from "./components/Drawer/Drawer.js";
+import { default as be } from "./components/Pagination/Pagination.js";
+import { default as Ve } from "./patterns/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as he } from "./components/Text/types.js";
+import { default as we } from "./components/Text/Text.js";
+import { default as ye } from "./components/Accordion/Accordion.js";
+import { default as Ge } from "./components/Accordion/AccordionItem.js";
+import { default as He } from "./patterns/UserManagement/UserManagement.js";
+import { AuthState as Oe } from "./patterns/UserManagement/types.js";
+import { SupportedLanguages as Ue } from "./types/commonTypes.js";
+import { default as Fe } from "./components/Breadcrumb/Breadcrumb.js";
 import "react/jsx-runtime";
 import "./node_modules/classnames/index.js";
-import { default as We } from "./components/Dropdown/Dropdown.js";
-import { default as je } from "./components/Video/Video.js";
-import { default as Je } from "./patterns/LanguageSelector/LanguageSelector.js";
-import { default as Qe } from "./components/ContentPeek/ContentPeek.js";
-import { default as Ze } from "./components/Collapsible/Collapsible.js";
-import { default as $e } from "./components/Collapsible/CollapsibleContent.js";
-import { default as oo } from "./components/Collapsible/CollapsibleTrigger.js";
-import { SeldonProvider as to } from "./providers/SeldonProvider.js";
-import { default as fo } from "./components/PageContentWrapper/PageContentWrapper.js";
-import { default as po } from "./components/Carousel/Carousel.js";
-import { default as mo } from "./components/Carousel/CarouselContent.js";
+import "react";
+import { default as Ye } from "./components/Dropdown/Dropdown.js";
+import { default as qe } from "./components/Video/Video.js";
+import { default as Ke } from "./patterns/LanguageSelector/LanguageSelector.js";
+import { default as Xe } from "./components/ContentPeek/ContentPeek.js";
+import { default as _e } from "./components/Collapsible/Collapsible.js";
+import { default as eo } from "./components/Collapsible/CollapsibleContent.js";
+import { default as ro } from "./components/Collapsible/CollapsibleTrigger.js";
+import { SeldonProvider as ao } from "./providers/SeldonProvider.js";
+import { default as po } from "./components/PageContentWrapper/PageContentWrapper.js";
+import { default as so } from "./components/Carousel/Carousel.js";
+import { default as uo } from "./components/Carousel/CarouselContent.js";
 import { default as no } from "./components/Carousel/CarouselItem.js";
-import { default as io } from "./components/Carousel/CarouselDots.js";
+import { default as go } from "./components/Carousel/CarouselDots.js";
 export {
-  Ae as Accordion,
-  De as AccordionItem,
-  Me as AuthState,
-  ze as Breadcrumb,
-  L as Button,
-  I as ButtonVariants,
-  po as Carousel,
-  mo as CarouselContent,
-  io as CarouselDots,
+  ye as Accordion,
+  Ge as AccordionItem,
+  Oe as AuthState,
+  Fe as Breadcrumb,
+  P as Button,
+  k as ButtonVariants,
+  so as Carousel,
+  uo as CarouselContent,
+  go as CarouselDots,
   no as CarouselItem,
-  Ze as Collapsible,
-  $e as CollapsibleContent,
-  oo as CollapsibleTrigger,
-  Qe as ContentPeek,
-  Ie as Drawer,
-  We as Dropdown,
-  B as ErrorBoundary,
-  N as Footer,
-  v as Grid,
-  oe as GridItem,
-  te as GridItemAlign,
-  A as Header,
-  z as HeroBanner,
-  T as IconButton,
-  W as Input,
-  Je as LanguageSelector,
-  j as Link,
-  Q as LinkBlock,
-  Z as LinkList,
-  J as LinkVariants,
-  Le as Modal,
-  D as Navigation,
-  E as NavigationItem,
-  M as NavigationItemTrigger,
-  R as NavigationList,
-  a as PaddingTokens,
-  C as Page,
-  fo as PageContentWrapper,
-  Te as Pagination,
-  $ as Row,
-  fe as Search,
-  to as SeldonProvider,
-  pe as Select,
-  ge as Social,
-  f as SpacingTokens,
-  de as SplitPanel,
-  Be as StatefulViewingsList,
-  ue as Subscribe,
+  _e as Collapsible,
+  eo as CollapsibleContent,
+  ro as CollapsibleTrigger,
+  Xe as ContentPeek,
+  ke as Drawer,
+  Ye as Dropdown,
+  V as ErrorBoundary,
+  h as Footer,
+  w as Grid,
+  re as GridItem,
+  ae as GridItemAlign,
+  y as Header,
+  F as HeroBanner,
+  b as IconButton,
+  Y as Input,
+  Ke as LanguageSelector,
+  q as Link,
+  X as LinkBlock,
+  _ as LinkList,
+  K as LinkVariants,
+  Pe as Modal,
+  G as Navigation,
+  H as NavigationItem,
+  O as NavigationItemTrigger,
+  U as NavigationList,
+  f as PaddingTokens,
+  S as Page,
+  po as PageContentWrapper,
+  be as Pagination,
+  ee as Row,
+  pe as Search,
+  ao as SeldonProvider,
+  se as Select,
+  ce as Social,
+  p as SpacingTokens,
+  me as SplitPanel,
+  Ve as StatefulViewingsList,
+  ie as Subscribe,
   xe as SubscriptionState,
-  Re as SupportedLanguages,
-  ve as Text,
-  Ne as TextVariants,
-  Ee as UserManagement,
-  je as Video,
-  Ce as ViewingsList,
+  Ue as SupportedLanguages,
+  we as Text,
+  he as TextVariants,
+  He as UserManagement,
+  qe as Video,
+  Se as ViewingsList,
   l as defaultYear,
-  p as emailValidation,
-  s as encodeURLSearchParams,
-  d as findChildrenExcludingTypes,
-  m as findChildrenOfType,
-  u as generatePaddingClassName,
+  s as emailValidation,
+  d as encodeURLSearchParams,
+  m as findChildrenExcludingTypes,
+  u as findChildrenOfType,
+  i as generatePaddingClassName,
   n as getCommonProps,
   x as noOp,
-  i as px,
-  g as useNormalizedInputProps
+  g as px,
+  c as useNormalizedInputProps
 };

package/dist/scss/components/Breadcrumb/_breadcrumb.scss

@@ -1,32 +1,60 @@
 @use '../../allPartials' as *;
 
 .#{$px}-breadcrumb {
-  @include text($body3);
+  @include text($body2);
 
-  color: $soft-black-2;
+  color: $pure-black;
 
   @media (max-width: $breakpoint-sm) {
     display: none;
   }
 
+  .back-button {
+    align-items: center;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    height: 44px;
+    justify-content: center;
+    width: 44px;
+
+    svg {
+      height: 24px;
+      width: 24px;
+    }
+  }
+
   ol {
     display: flex;
     flex-direction: row;
+    padding: 0;
 
     li {
+      align-items: center;
       display: flex;
       flex-direction: row;
 
+      svg {
+        height: 16px;
+        width: 16px;
+      }
+
       a {
         margin: $margin-sm;
         overflow: hidden;
+        text-decoration: none;
         text-wrap: nowrap;
 
         &:hover {
-          color: $widget-blue;
+          color: $button-hover;
           text-decoration: none;
         }
       }
+
+      span {
+        margin: $margin-sm;
+      }
     }
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.62.0",
+  "version": "1.63.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"