@phillips/seldon 1.112.0 → 1.113.0

package/dist/components/Button/Button.d.ts

@@ -11,7 +11,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HT
     /**
      * Optional click handler
      */
-    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement> | undefined;
     /**
      * Is this the principal call to action on the page?
      */
@@ -32,6 +32,10 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HT
      * The target of the link (e.g. _blank). To be combined with href.
      */
     target?: string;
+    /**
+     * prefetch the link
+     */
+    prefetch?: 'none' | 'intent' | 'render' | 'viewport';
 }
 /**
  * ## Overview

package/dist/components/Button/Button.js

@@ -1,61 +1,75 @@
-import { jsx as f } from "react/jsx-runtime";
+import { jsxs as f, Fragment as k, jsx as o } from "react/jsx-runtime";
 import p from "../../node_modules/classnames/index.js";
-import { getCommonProps as c } from "../../utils/index.js";
-import { ButtonVariants as b } from "./types.js";
-import { forwardRef as d } from "react";
-const B = d(
+import { getCommonProps as N } from "../../utils/index.js";
+import { ButtonVariants as v } from "./types.js";
+import { forwardRef as x, useState as P } from "react";
+const j = x(
   ({
-    variant: s = b.primary,
-    children: t,
-    className: r,
-    isIconLast: a = !1,
-    type: u = "button",
-    isDisabled: $ = !1,
-    href: m,
-    target: e,
+    variant: r = v.primary,
+    children: s,
+    className: a,
+    isIconLast: l = !1,
+    type: $ = "button",
+    isDisabled: b = !1,
+    href: t,
+    target: i,
+    prefetch: m = "none",
     ...n
-  }, l) => {
-    const { className: o, ...i } = c(n, "Button");
-    return m ? /* @__PURE__ */ f(
-      "a",
-      {
-        ...i,
-        ref: l,
-        href: m,
-        className: p(
-          `${o}`,
-          `${o}--${s}`,
+  }, d) => {
+    const { className: e, ...c } = N(n, "Button"), [B, C] = P(!1);
+    if (t) {
+      const u = () => /* @__PURE__ */ f(k, { children: [
+        /* @__PURE__ */ o("link", { "data-testid": "prefetch-link", rel: "prefetch", href: t }),
+        /* @__PURE__ */ o("link", { "data-testid": "modulepreload-link", rel: "modulepreload", href: t })
+      ] });
+      return /* @__PURE__ */ f(k, { children: [
+        /* @__PURE__ */ o(
+          "a",
           {
-            [`${o}--icon-last`]: a
-          },
-          r
+            ...c,
+            ref: d,
+            href: t,
+            className: p(
+              `${e}`,
+              `${e}--${r}`,
+              {
+                [`${e}--icon-last`]: l
+              },
+              a
+            ),
+            target: i,
+            rel: i === "_blank" ? "noopener noreferrer" : void 0,
+            onMouseOver: () => C(!0),
+            onClick: n.onClick,
+            children: s
+          }
         ),
-        target: e,
-        rel: e === "_blank" ? "noopener noreferrer" : void 0,
-        children: t
-      }
-    ) : /* @__PURE__ */ f(
-      "button",
-      {
-        ...i,
-        ref: l,
-        type: u,
-        className: p(
-          `${o}`,
-          `${o}--${s}`,
-          {
-            [`${o}--icon-last`]: a
-          },
-          r
-        ),
-        disabled: $,
-        ...n,
-        children: t
-      }
-    );
+        m === "intent" && B && /* @__PURE__ */ o(u, {}),
+        m === "render" && /* @__PURE__ */ o(u, {})
+      ] });
+    } else
+      return /* @__PURE__ */ o(
+        "button",
+        {
+          ...c,
+          ref: d,
+          type: $,
+          className: p(
+            `${e}`,
+            `${e}--${r}`,
+            {
+              [`${e}--icon-last`]: l
+            },
+            a
+          ),
+          disabled: b,
+          ...n,
+          children: s
+        }
+      );
   }
 );
-B.displayName = "Button";
+j.displayName = "Button";
 export {
-  B as default
+  j as default
 };

package/dist/components/Button/Button.stories.d.ts

@@ -24,6 +24,13 @@ export declare const ButtonAsLink: {
         size: string;
     };
 };
+export declare const ButtonAsLinkWithPrefetch: {
+    (props: ButtonProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        variant: ButtonVariants;
+        size: string;
+    };
+};
 export declare const Playground: {
     args: {
         children: string;

package/dist/components/IconButton/IconButton.d.ts

@@ -1,3 +1,4 @@
+import { ButtonProps } from '../Button/Button';
 import { ButtonVariants } from '../Button/types';
 export interface IconButtonProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'children'> {
     /**
@@ -12,6 +13,18 @@ export interface IconButtonProps extends Omit<React.HTMLAttributes<HTMLButtonEle
      * Should the button be disabled?
      */
     isDisabled?: boolean;
+    /**
+     * The href of the button. This will make the button render as an anchor tag.
+     */
+    href?: ButtonProps['href'];
+    /**
+     * The target of the link (e.g. _blank). To be combined with href.
+     */
+    target?: ButtonProps['target'];
+    /**
+     * The prefetch of the link.
+     */
+    prefetch?: ButtonProps['prefetch'];
 }
 declare const IconButton: ({ children, variant, isDisabled, className, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default IconButton;

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

@@ -1,4 +1,5 @@
 import { default as React, ComponentProps } from 'react';
+import { ButtonProps } from '../Button/Button';
 export type PaginationOptionValue = string | number;
 export interface PaginationOption {
     /**
@@ -6,6 +7,14 @@ export interface PaginationOption {
      */
     label: string;
     value: string | number;
+    /**
+     * The href of the button. This will make the button render as an anchor tag. If included, the button will override prevent the default link behavior and leave navigation up to the consumer.
+     */
+    href?: ButtonProps['href'];
+    /**
+     * The prefetch of the link.
+     */
+    prefetch?: ButtonProps['prefetch'];
 }
 export interface PaginationProps extends Omit<ComponentProps<'div'>, 'onChange'> {
     /**

package/dist/components/Pagination/Pagination.js

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

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

@@ -37,6 +37,7 @@ export declare const Playground: {
         };
     };
 };
+export declare const PlaygroundWithHrefAndPrefetch: ({ playgroundWidth, onChange, ...args }: StoryProps) => import("react/jsx-runtime").JSX.Element;
 export declare const StringOptionsPlayground: {
     ({ playgroundWidth, onChange, ...args }: StoryProps): import("react/jsx-runtime").JSX.Element;
     args: {

package/dist/components/Tags/Tags.d.ts

@@ -1,7 +1,8 @@
+import { default as React, ComponentProps } from 'react';
 export interface I18nObject {
     clearAllLabel?: string;
 }
-export interface TagsListProps {
+export interface TagsListProps extends ComponentProps<'ul'> {
     /**
      * Unique id for component testing
      */
@@ -40,8 +41,12 @@ export interface TagProps {
      * Tag item label.
      */
     label: string;
+    /**
+     * Tag button aria-label
+     */
+    removeText?: string;
 }
-export declare const Tag: ({ id, className, onRemove, label }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tag: ({ id, className, onRemove, label, removeText }: TagProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * ## Overview
  *
@@ -51,5 +56,5 @@ export declare const Tag: ({ id, className, onRemove, label }: TagProps) => impo
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-tags--overview)
  */
-declare const TagsList: import('react').ForwardRefExoticComponent<TagsListProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const TagsList: React.ForwardRefExoticComponent<Omit<TagsListProps, "ref"> & React.RefAttributes<HTMLUListElement>>;
 export default TagsList;

package/dist/components/Tags/Tags.js

@@ -1,49 +1,58 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import c from "../../node_modules/classnames/index.js";
-import { getCommonProps as p, px as a } from "../../utils/index.js";
-import u from "../Button/Button.js";
-import N from "../IconButton/IconButton.js";
-import v from "../../assets/chevronRight.svg.js";
-import { ButtonVariants as h } from "../Button/types.js";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import v, { forwardRef as N } from "react";
+import d from "../../node_modules/classnames/index.js";
+import { getCommonProps as y, px as r } from "../../utils/index.js";
+import $ from "../Button/Button.js";
+import { ButtonVariants as p } from "../Button/types.js";
 import b from "../../assets/close.svg.js";
-const P = ({ id: e, className: s, onRemove: o, label: r }) => /* @__PURE__ */ m("div", { className: c(`${a}-tag`, `${a}-button`, s), "aria-label": "Close Tag", children: [
-  /* @__PURE__ */ t("div", { className: `${a}-tag__label`, children: r }),
-  /* @__PURE__ */ t("div", { onClick: () => o(r), className: `${a}-tag__button`, "data-testid": `${e}-item-close-button`, children: /* @__PURE__ */ t(N, { className: `${a}-tag__button--close`, children: /* @__PURE__ */ t(b, {}) }) })
-] }), C = f(
-  ({ className: e, children: s, clearAllLabel: o = "Clear All", onClear: r, ...i }, d) => {
-    const l = "tags-list", { className: g, ...$ } = p(i, "TagsList"), { id: n } = i;
-    return /* @__PURE__ */ m(
-      "div",
+import C from "../../assets/arrowPrev.svg.js";
+const w = ({ id: i, className: a, onRemove: o, label: s, removeText: e = "Remove" }) => /* @__PURE__ */ l(
+  $,
+  {
+    className: d(`${r}-tag`, `${r}-button`, a),
+    "aria-label": `${e} ${s}`,
+    onClick: () => o(s),
+    variant: p.tertiary,
+    children: [
+      /* @__PURE__ */ t("div", { className: `${r}-tag__label`, children: s }),
+      /* @__PURE__ */ t("div", { className: `${r}-tag__button`, "data-testid": `${i}-item-close-button`, children: /* @__PURE__ */ t(b, {}) })
+    ]
+  }
+), _ = N(
+  ({ className: i, children: a, clearAllLabel: o = "Clear All", onClear: s, ...e }, f) => {
+    const m = "tags-list", { className: g, ...u } = y(e, "TagsList"), { id: n } = e;
+    return /* @__PURE__ */ l(
+      "ul",
       {
-        className: c(`${a}-${l}`, g, e),
-        ...$,
-        ...i,
-        "data-testid": `${l}-${n}`,
-        ref: d,
+        className: d(`${r}-${m}`, g, i),
+        ...u,
+        ...e,
+        tabIndex: 0,
+        "data-testid": `${m}-${n}`,
+        ref: f,
         children: [
-          s,
-          Array.isArray(s) && s.length > 0 && /* @__PURE__ */ m(
-            u,
+          Array.isArray(a) ? v.Children.map(a, (c) => /* @__PURE__ */ t("li", { children: c }, c.props.id)) : a,
+          Array.isArray(a) && a.length > 0 && /* @__PURE__ */ t("li", { children: /* @__PURE__ */ l(
+            $,
             {
-              onClick: r,
+              onClick: s,
               "data-testid": `${n}-clear-all-button`,
-              className: `${a}-${l}--clear`,
+              className: `${r}-${m}--clear`,
               "aria-label": o,
-              variant: h.tertiary,
+              variant: p.tertiary,
               children: [
-                /* @__PURE__ */ t("div", { className: `${a}-left-arrow`, children: /* @__PURE__ */ t(v, {}) }),
-                /* @__PURE__ */ t("div", { className: `${a}-label`, children: o })
+                /* @__PURE__ */ t(C, {}),
+                /* @__PURE__ */ t("div", { className: `${r}-label`, children: o })
               ]
             }
-          )
+          ) })
         ]
       }
     );
   }
 );
-C.displayName = "Tags";
+_.displayName = "Tags";
 export {
-  P as Tag,
-  C as default
+  w as Tag,
+  _ as default
 };

package/dist/components/Tags/Tags.stories.d.ts

@@ -1,7 +1,7 @@
 import { TagsListProps } from './Tags';
 declare const meta: {
     title: string;
-    component: import('react').ForwardRefExoticComponent<TagsListProps & import('react').RefAttributes<HTMLDivElement>>;
+    component: import('react').ForwardRefExoticComponent<Omit<TagsListProps, "ref"> & import('react').RefAttributes<HTMLUListElement>>;
 };
 export default meta;
 interface StoryProps extends TagsListProps {

package/dist/node_modules/exenv/index.js

@@ -1,4 +1,4 @@
-import { __module as t } from "../../_virtual/index6.js";
+import { __module as t } from "../../_virtual/index5.js";
 /*!
   Copyright (c) 2015 Jed Watson.
   Based on code that is Copyright 2013-2015, Facebook, Inc.

package/dist/node_modules/prop-types/node_modules/react-is/index.js

@@ -1,4 +1,4 @@
-import { __module as e } from "../../../../_virtual/index5.js";
+import { __module as e } from "../../../../_virtual/index6.js";
 import { __require as o } from "./cjs/react-is.production.min.js";
 import { __require as t } from "./cjs/react-is.development.js";
 var r;

package/dist/scss/components/Tags/_tags.scss

@@ -6,132 +6,102 @@
   flex-flow: row wrap;
   gap: $spacing-sm;
 
+  &:focus-visible {
+    border: unset;
+    outline: 1px solid $button-hover;
+    outline-offset: 1px;
+  }
+
   .#{$px}-tag {
-    align-items: center;
-    background-color: $pure-white;
     border: 1px solid $button-hover;
     border-radius: 6.25rem;
-    cursor: default;
-    display: flex;
-    gap: 0;
-    height: $button-tertiary-height;
-    justify-content: center;
-    padding: 0 $spacing-xsm 0 $spacing-sm;
+    gap: $spacing-micro;
+    padding: $spacing-micro $spacing-xsm $spacing-micro $spacing-sm;
 
     &__label {
       color: $button-hover;
-      font-size: 0.75rem;
+      font-size: $body-size3;
       font-variation-settings: 'wght' 600;
       text-align: center;
+
+      &:hover {
+        color: $pure-black;
+      }
     }
 
-    &__button {
-      align-items: center;
-      display: flex;
-      gap: $spacing-micro;
-      height: $button-tertiary-height;
-      justify-content: center;
-      padding: 0;
-
-      &--close {
-        height: 1.25rem;
-        width: 1.25rem;
-
-        svg {
-          height: 1rem;
-          width: 1rem;
-
-          path {
-            fill: $button-hover;
-          }
-
-          &:focus {
-            fill: $pure-black;
-          }
-        }
+    svg {
+      fill: $button-hover;
 
-        &:hover {
-          background-color: $pure-white;
+      path {
+        fill: $button-hover;
+      }
+    }
 
-          svg {
-            path {
-              fill: $pure-black;
-            }
-          }
-        }
+    &:hover {
+      color: $pure-black;
+
+      svg {
+        fill: $pure-black;
 
-        &:focus {
-          svg {
-            path {
-              fill: $pure-black;
-            }
-          }
+        path {
+          fill: $pure-black;
         }
       }
     }
   }
 
   &--clear {
+    @include text($body3);
+
     align-items: center;
     border-color: $pure-white;
+    border-style: solid;
+    border-width: 1px;
+    color: $button-hover;
     display: flex;
-    gap: 0;
+    gap: $spacing-micro;
     height: 2rem;
+    padding: 0 $spacing-sm;
 
-    &:hover {
-      cursor: pointer;
+    @include media($breakpoint-xl) {
+      padding: $spacing-sm;
+    }
 
-      .#{$px}-left-arrow {
-        svg {
-          fill: $pure-black;
+    svg {
+      fill: $button-hover;
+      height: 1rem;
+      width: 1rem;
 
-          path {
-            fill: $pure-black;
-          }
-        }
+      path {
+        fill: $button-hover;
       }
     }
 
-    &:focus-visible {
-      border-color: $button-hover;
-      border-radius: 6.25rem;
-      gap: 0;
-      outline-offset: 0;
-      padding: 0;
-    }
-
-    .#{$px}-left-arrow {
-      transform: rotateX(-1);
+    &:hover {
+      color: $pure-black;
+      cursor: pointer;
 
       svg {
-        height: 1rem;
-        width: 1rem;
-      }
-
-      &:hover {
-        background: $pure-white;
+        fill: $pure-black;
 
-        svg {
+        path {
           fill: $pure-black;
-
-          path {
-            fill: $pure-black;
-          }
-        }
-      }
-
-      &:focus-visible {
-        &:focus-visible {
-          outline: none;
-          outline-offset: none;
         }
       }
     }
 
-    .#{$px}-label {
-      color: $pure-black;
-      font-size: 0.875rem;
-      font-variation-settings: 'wght' 600;
+    &:focus-visible {
+      border-color: $button-hover;
+      border-radius: 6.25rem;
+      border-style: solid;
+      border-width: 1px;
+      outline-color: transparent;
+      outline-offset: unset;
+      padding: 0 $spacing-sm;
+
+      @include media($breakpoint-xl) {
+        padding: $spacing-sm;
+      }
     }
   }
 }

package/package.json

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