@phillips/seldon 1.68.0 → 1.69.0

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

@@ -14,10 +14,6 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLDivElement> {
      * Index of the item to truncate
      */
     truncateIndex?: number;
-    /**
-     * Max length for truncation
-     */
-    truncateLength?: number;
     /**
      * Custom element to render for the link
      */
@@ -32,5 +28,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, truncateIndex, truncateLength, linkElement: CustomElement, ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
+declare const Breadcrumb: ({ className, items, truncateIndex, linkElement: CustomElement, ...props }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element;
 export default Breadcrumb;

package/dist/components/Breadcrumb/Breadcrumb.js

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

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

@@ -16,14 +16,10 @@ export interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLDivElement
      * 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, isTruncateText, truncateLength, element: CustomElement, ...props }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
+declare const BreadcrumbItem: ({ className, href, label, isCurrent, isTruncateText, element: CustomElement, ...props }: BreadcrumbItemProps) => import("react/jsx-runtime").JSX.Element;
 export default BreadcrumbItem;

package/dist/components/Breadcrumb/BreadcrumbItem.js

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

package/dist/components/Drawer/Drawer.js

@@ -1,39 +1,39 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
 import { getCommonProps as d, noOp as p } from "../../utils/index.js";
-import o from "../../node_modules/classnames/index.js";
+import e from "../../node_modules/classnames/index.js";
 import { Root as f, Portal as C, Overlay as h, Content as N, Title as u, Description as v, Close as w } from "../../node_modules/@radix-ui/react-dialog/dist/index.js";
 import y from "../../assets/close.svg.js";
 import _ from "../IconButton/IconButton.js";
 import { ButtonVariants as g } from "../Button/types.js";
-const B = ({ className: i, isOpen: l = !1, onClose: a = p, children: m, ...t }) => {
-  const { className: e, ...n } = d(t, "Drawer");
+const B = ({ className: i, isOpen: l = !1, onClose: o = p, children: m, ...t }) => {
+  const { className: a, ...n } = d(t, "Drawer");
   return /* @__PURE__ */ r(
     f,
     {
       open: l,
       onOpenChange: (c) => {
-        c || a();
+        c || o();
       },
       children: /* @__PURE__ */ s(C, { children: [
         /* @__PURE__ */ r(
           h,
           {
-            onClick: a,
-            className: o(`${e}__overlay`),
+            onClick: o,
+            className: e(`${a}__overlay`),
             "data-testid": "drawer-overlay"
           }
         ),
-        /* @__PURE__ */ s(N, { className: o(e, i), id: t.id, ...n, children: [
+        /* @__PURE__ */ s(N, { className: e(a, i), id: t.id, ...n, children: [
           /* @__PURE__ */ r(u, {}),
           /* @__PURE__ */ r(v, {}),
           /* @__PURE__ */ r(w, { asChild: !0, children: /* @__PURE__ */ r(
             _,
             {
-              onClick: a,
-              className: o(`${e}__close`),
+              onClick: o,
+              className: e(`${a}__close`),
               "aria-label": "Close",
               "data-testid": "drawer-close",
-              variant: g.tertiary,
+              variant: g.secondary,
               children: /* @__PURE__ */ r(y, {})
             }
           ) }),

package/dist/components/Modal/Modal.js

@@ -37,7 +37,7 @@ const g = ({
             onClick: a,
             "aria-label": "Close Modal",
             className: t(`${e}__close`),
-            variant: v.tertiary,
+            variant: v.secondary,
             children: /* @__PURE__ */ s(y, {})
           }
         ),

package/dist/components/Pagination/Pagination.d.ts

@@ -1,4 +1,12 @@
 import React, { ComponentProps } from 'react';
+export type PaginationOptionValue = string | number;
+export interface PaginationOption {
+    /**
+     * label is translatable
+     */
+    label: string;
+    value: string | number;
+}
 export interface PaginationProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     /**
      * Unique id for component testing
@@ -11,7 +19,7 @@ export interface PaginationProps extends Omit<ComponentProps<'div'>, 'onChange'>
     /**
      * Options Array of string
      */
-    options?: string[];
+    options: (PaginationOption | PaginationOptionValue)[];
     /**
      * Boolean to specify whether the `<Pagination>` should be disabled
      */
@@ -19,11 +27,11 @@ export interface PaginationProps extends Omit<ComponentProps<'div'>, 'onChange'>
     /**
      * Current value of the `<Pagination>` component
      */
-    value: string | number;
+    value: PaginationOptionValue;
     /**
      * `onChange` handler that is called whenever the `<Pagination>` value is changed
      */
-    onChange: (selectedValue: string, event?: React.ChangeEvent<HTMLSelectElement>) => void;
+    onChange: (selectedValue: PaginationOptionValue, event?: React.ChangeEvent<HTMLSelectElement>) => void;
     /**
      * Specify the variant style of the `<Pagination>`
      */

package/dist/components/Pagination/Pagination.js

@@ -1,65 +1,78 @@
-import { jsxs as _, jsx as r } from "react/jsx-runtime";
-import s from "../../node_modules/classnames/index.js";
+import { jsxs as O, jsx as n } from "react/jsx-runtime";
+import u from "../../node_modules/classnames/index.js";
 import { getCommonProps as P, px as i } from "../../utils/index.js";
-import C from "../Select/Select.js";
-import d from "../../assets/chevronRight.svg.js";
-import u from "../IconButton/IconButton.js";
-import { ButtonVariants as f } from "../Button/types.js";
-const B = ({
-  className: g,
-  onChange: e,
-  variant: p = "inline",
-  options: t = [],
-  value: n,
-  isDisabled: o,
-  previousLabel: $ = "Previous",
-  nextLabel: b = "Next",
-  selectLabel: h = "Select",
-  ...l
+import S from "../Select/Select.js";
+import f from "../../assets/chevronRight.svg.js";
+import g from "../IconButton/IconButton.js";
+import { ButtonVariants as x } from "../Button/types.js";
+import { determineOptionValue as r, findOptionFromSelectString as v } from "./utils.js";
+const R = ({
+  className: b,
+  onChange: o,
+  variant: $ = "inline",
+  options: e = [],
+  value: l,
+  isDisabled: c,
+  previousLabel: h = "Previous",
+  nextLabel: N = "Next",
+  selectLabel: _ = "Select",
+  ...m
 }) => {
-  const x = "pagination", { className: c, ...N } = P(l, "Pagination"), { id: m } = l;
-  return /* @__PURE__ */ _(
+  const y = "pagination", { className: p, ...I } = P(m, "Pagination"), { id: s } = m;
+  return /* @__PURE__ */ O(
     "div",
     {
-      className: s(`${i}-${x}`, { [`${c}__wrapper`]: c }, g),
-      ...N,
-      ...l,
+      className: u(`${i}-${y}`, { [`${p}__wrapper`]: p }, b),
+      ...I,
+      ...m,
       children: [
-        /* @__PURE__ */ r(
-          u,
+        /* @__PURE__ */ n(
+          g,
           {
-            className: s(`${i}__pagination-button`, `${i}-left-arrow`),
-            onClick: () => e(t.at(t.findIndex((a) => a === n) - 1) || ""),
-            "data-testid": `${m}-previous-button`,
-            isDisabled: o,
-            "aria-label": $,
-            variant: f.tertiary,
-            children: /* @__PURE__ */ r(d, {})
+            className: u(`${i}__pagination-button`, `${i}-left-arrow`),
+            onClick: () => {
+              const t = e.findIndex((d) => r(d) === l) - 1, a = e.at(t) || "";
+              o(r(a));
+            },
+            "data-testid": `${s}-previous-button`,
+            isDisabled: c,
+            "aria-label": h,
+            variant: x.tertiary,
+            children: /* @__PURE__ */ n(f, {})
           }
         ),
-        /* @__PURE__ */ r(
-          C,
+        /* @__PURE__ */ n(
+          S,
           {
-            className: p === "inline" && `${i}--inline-pagination`,
-            "aria-label": h,
-            value: n,
-            onChange: (a) => e(a == null ? void 0 : a.currentTarget.value, a),
-            "data-testid": `${m}-select-button`,
+            className: $ === "inline" && `${i}--inline-pagination`,
+            "aria-label": _,
+            value: l,
+            onChange: (t) => {
+              const a = v(e, t == null ? void 0 : t.currentTarget.value);
+              a && o(r(a), t);
+            },
+            "data-testid": `${s}-select-button`,
             hideLabel: !0,
-            disabled: o,
-            children: t.map((a) => /* @__PURE__ */ r("option", { value: a, children: a }, a))
+            disabled: c,
+            children: e.map((t) => {
+              const a = r(t);
+              return /* @__PURE__ */ n("option", { value: a, children: typeof t == "string" || typeof t == "number" ? t : t.label }, a);
+            })
           }
         ),
-        /* @__PURE__ */ r(
-          u,
+        /* @__PURE__ */ n(
+          g,
           {
             className: `${i}__pagination-button`,
-            onClick: () => e(t[(t.findIndex((a) => a === n) + 1) % t.length] || ""),
-            "data-testid": `${m}-next-button`,
-            isDisabled: o,
-            "aria-label": b,
-            variant: f.tertiary,
-            children: /* @__PURE__ */ r(d, {})
+            onClick: () => {
+              const t = (e.findIndex((d) => r(d) === l) + 1) % e.length, a = e[t];
+              o(r(a));
+            },
+            "data-testid": `${s}-next-button`,
+            isDisabled: c,
+            "aria-label": N,
+            variant: x.tertiary,
+            children: /* @__PURE__ */ n(f, {})
           }
         )
       ]
@@ -67,5 +80,5 @@ const B = ({
   );
 };
 export {
-  B as default
+  R as default
 };

package/dist/components/Pagination/utils.d.ts

@@ -0,0 +1,3 @@
+import { PaginationOption, PaginationOptionValue } from './Pagination';
+export declare const determineOptionValue: (option: PaginationOption | PaginationOptionValue) => string | number;
+export declare const findOptionFromSelectString: (options: (PaginationOption | PaginationOptionValue)[], value: string) => PaginationOptionValue | PaginationOption | undefined;

package/dist/components/Pagination/utils.js

@@ -0,0 +1,7 @@
+const n = (e) => typeof e == "string" || typeof e == "number" ? e : e == null ? void 0 : e.value, f = (e, r) => e.find(
+  (t) => n(t) === r || n(t) === parseInt(r)
+);
+export {
+  n as determineOptionValue,
+  f as findOptionFromSelectString
+};

package/dist/index.d.ts

@@ -29,7 +29,7 @@ export { default as Social, type SocialProps } from './patterns/Social/Social';
 export { default as ViewingsList, type ViewingsListProps } from './patterns/ViewingsList/ViewingsList';
 export { default as Modal, type ModalProps } from './components/Modal/Modal';
 export { default as Drawer } from './components/Drawer/Drawer';
-export { default as Pagination, type PaginationProps } from './components/Pagination/Pagination';
+export { default as Pagination, type PaginationProps, type PaginationOption, type PaginationOptionValue, } from './components/Pagination/Pagination';
 export { default as StatefulViewingsList, type StatefulViewingsListProps, } from './patterns/ViewingsList/StatefulViewingsList';
 export * from './components/Text';
 export * from './components/TextSymbol';

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

@@ -5,61 +5,66 @@
 
   color: $pure-black;
 
-  @media (max-width: $breakpoint-sm) {
-    display: none;
+  &__back-button {
+    svg {
+      height: 1rem;
+      width: 1rem;
+    }
   }
 
-  .back-button {
+  &__item {
     align-items: center;
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
     display: flex;
-    height: 44px;
-    justify-content: center;
-    width: 44px;
+    flex-direction: row;
+    flex-shrink: 0;
 
-    svg {
-      height: 24px;
-      width: 24px;
+    a {
+      margin: $margin-sm;
+      outline: none;
+      text-decoration: none;
+      text-wrap: nowrap;
+
+      &:hover {
+        color: $button-hover;
+        text-decoration: none;
+      }
+
+      &:focus-visible {
+        border-radius: 5px;
+        outline: 1px solid $medium-gray;
+      }
+    }
+
+    span {
+      margin: $margin-sm;
     }
   }
 
+  &__chevron {
+    height: 1rem;
+    width: 1rem;
+  }
+
   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;
+  &--truncate {
+    flex-shrink: 1;
+    overflow: hidden;
 
-        &:hover {
-          color: $button-hover;
-          text-decoration: none;
-        }
-      }
-
-      span {
-        margin: $margin-sm;
-      }
+    a {
+      flex-shrink: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 
   &--current {
     color: $primary-black;
     font-variation-settings: 'wght' 700;
+    white-space: nowrap;
   }
 }

package/dist/scss/components/IconButton/_iconButton.scss

@@ -1,12 +1,11 @@
 @use '../../allPartials' as *;
 
 .#{$px}-icon-button {
+  align-items: center;
+  display: flex;
+  justify-content: center;
   padding: 0;
 
-  & > svg {
-    position: absolute;
-  }
-
   &:focus-visible {
     &:focus-visible {
       outline: 0.5px solid $soft-black;
@@ -27,11 +26,8 @@
 
     & > svg {
       fill: $pure-black;
-      height: 100%;
       height: 1.5rem;
       margin-inline-end: unset;
-      position: absolute;
-      width: 100%;
       width: 1.5rem;
 
       path {
@@ -63,18 +59,21 @@
   }
 
   &--secondary,
-  &--tertiary {
+  &--tertiary.#{$px}-icon-button {
     height: 28px;
+    padding: $spacing-xsm;
     width: 28px;
 
+    &:focus-visible {
+      border-radius: 100px;
+    }
+
     & > svg {
       fill: $pure-black;
-      height: 100%;
-      height: 1rem;
+      height: 1.25rem;
       margin-inline-end: unset;
       position: absolute;
-      width: 100%;
-      width: 1rem;
+      width: 1.25rem;
 
       path {
         fill: $pure-black;
@@ -83,7 +82,7 @@
   }
 
   &--tertiary {
-    &:focus {
+    &:focus-visible {
       border-radius: 100px;
     }
   }

package/dist/scss/components/Modal/_modal.scss

@@ -6,7 +6,7 @@
   max-height: 100%;
   max-width: 100%;
   overflow: auto;
-  padding: 2rem;
+  padding: $padding-md;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);

package/dist/scss/components/Pagination/_pagination.scss

@@ -35,7 +35,7 @@
         cursor: pointer;
       }
 
-      &:focus {
+      &:focus-visible {
         outline: 1px solid $medium-gray;
       }
     }
@@ -47,16 +47,6 @@
   }
 }
 
-.#{$px}__pagination-button {
-  svg {
-    width: 2rem;
-
-    @include media($size-md, $type: 'max') {
-      width: 1rem;
-    }
-  }
-}
-
 .#{$px}-left-arrow {
   transform: scaleX(-1);
 }

package/package.json

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