@phillips/seldon 1.56.0 → 1.57.1

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

@@ -1,5 +1,6 @@
 export declare enum ButtonVariants {
     primary = "primary",
     secondary = "secondary",
-    ghost = "ghost"
+    ghost = "ghost",
+    tertiary = "tertiary"
 }

package/dist/components/Button/types.js

@@ -1,4 +1,4 @@
-var e = /* @__PURE__ */ ((r) => (r.primary = "primary", r.secondary = "secondary", r.ghost = "ghost", r))(e || {});
+var e = /* @__PURE__ */ ((r) => (r.primary = "primary", r.secondary = "secondary", r.ghost = "ghost", r.tertiary = "tertiary", r))(e || {});
 export {
   e as ButtonVariants
 };

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

@@ -1,3 +1,4 @@
+import { ButtonVariants } from '../Button/types';
 export interface IconButtonProps extends Omit<React.HTMLAttributes<HTMLButtonElement>, 'children'> {
     /**
      * Button contents
@@ -7,6 +8,14 @@ export interface IconButtonProps extends Omit<React.HTMLAttributes<HTMLButtonEle
      * How large should the button be?
      */
     size?: 'sm' | 'md' | 'lg';
+    /**
+     * Mainly used for styling
+     */
+    variant?: ButtonVariants;
+    /**
+     * Should the button be disabled?
+     */
+    isDisabled?: boolean;
 }
-declare const IconButton: ({ children, size, className, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const IconButton: ({ children, size, variant, isDisabled, className, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default IconButton;

package/dist/components/IconButton/IconButton.js

@@ -1,21 +1,29 @@
-import { jsx as n } from "react/jsx-runtime";
-import c from "../../node_modules/classnames/index.js";
-import e from "../Button/Button.js";
+import { jsx as c } from "react/jsx-runtime";
+import f from "../../node_modules/classnames/index.js";
+import p from "../Button/Button.js";
 import { getCommonProps as i } from "../../utils/index.js";
-import { ButtonVariants as p } from "../Button/types.js";
-const x = ({ children: m, size: r = "md", className: s, ...o }) => {
-  const { className: t, ...a } = i(o, "IconButton");
-  return /* @__PURE__ */ n(
-    e,
+import { ButtonVariants as l } from "../Button/types.js";
+const C = ({
+  children: s,
+  size: r = "md",
+  variant: m = l.primary,
+  isDisabled: a = !1,
+  className: n,
+  ...t
+}) => {
+  const { className: o, ...e } = i(t, "IconButton");
+  return /* @__PURE__ */ c(
+    p,
     {
-      ...a,
-      variant: p.primary,
-      className: c(t, `${t}--${r}`, s),
-      ...o,
-      children: m
+      ...e,
+      variant: m,
+      className: f(o, `${o}--${r}`, `${o}--${m}`, n),
+      isDisabled: a,
+      ...t,
+      children: s
     }
   );
 };
 export {
-  x as default
+  C as default
 };

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

@@ -36,6 +36,10 @@ export interface PaginationProps extends Omit<ComponentProps<'div'>, 'onChange'>
      * Option next label
      */
     nextLabel?: string;
+    /**
+     * Option select aria-label
+     */
+    selectLabel?: string;
 }
 /**
  * ## Overview
@@ -46,5 +50,5 @@ export interface PaginationProps extends Omit<ComponentProps<'div'>, 'onChange'>
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-pagination--overview)
  */
-declare const Pagination: ({ className, onChange, variant, options, value, isDisabled, previousLabel, nextLabel, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+declare const Pagination: ({ className, onChange, variant, options, value, isDisabled, previousLabel, nextLabel, selectLabel, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
 export default Pagination;

package/dist/components/Pagination/Pagination.js

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

package/dist/scss/_vars.scss

@@ -52,6 +52,9 @@ $post-sale-magenta: $post-sale-pink;
 $header-color: $pure-black;
 $text-color: $soft-black;
 
+// Interactive Colors
+$button-hover: #75716f;
+
 ////////////////////////
 /// FONTS:
 ///////////////////////

package/dist/scss/components/Button/_button.scss

@@ -5,52 +5,123 @@
 
   align-items: center;
   background-color: $pure-black;
-  border: 0;
-  border-radius: 3em;
-  color: white;
+  border: 1px solid transparent;
+  border-radius: 100px;
+  color: $pure-white;
   cursor: pointer;
   display: inline-flex;
+  font-weight: 600;
+  gap: $margin-xsm;
   justify-content: center;
-  min-width: 3rem;
-  padding: 0.5em $spacing-md;
+  padding: 0 $padding-md;
+  position: relative;
   transition:
     color 0.25s,
-    background-color 0.25s,
-    font-weight 0.25s;
+    background-color 0.25s;
+
+  svg {
+    fill: $pure-white;
+
+    path {
+      fill: $pure-white;
+      transition: 0.25s;
+    }
+  }
+
+  &:hover {
+    background-color: $button-hover;
+
+    svg {
+      fill: $pure-white;
+    }
+  }
 
-  &:hover,
   &:focus-visible {
-    background-color: $primary-black;
+    outline: 0.5px solid $pure-white;
+    outline-offset: -4.5px;
 
     svg {
       fill: $pure-white;
     }
   }
 
-  svg {
-    fill: $pure-white;
-    margin-inline-end: 0.5rem;
-    transition: fill 0.25s;
-    width: 1em;
+  &--sm {
+    font-size: 0.75rem;
+    height: 44px;
+
+    svg {
+      height: 1rem;
+      width: 1rem;
+    }
+  }
+
+  &--md,
+  &--lg {
+    font-size: 1rem;
+    height: 48px;
+
+    svg {
+      height: 1.25rem;
+      width: 1.25rem;
+    }
   }
 
   &--secondary,
   &--ghost {
-    background-color: transparent;
-    border: 1px solid;
-    color: $text-color;
+    background-color: $pure-white;
+    border: 1px solid $pure-black;
+    color: $pure-black;
+    mix-blend-mode: difference;
+    position: relative;
+    transition: border 0.3s ease-out;
+
+    &::before {
+      border-radius: 100px;
+      box-sizing: border-box;
+      content: '';
+      display: inline-block;
+      height: 0;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transition: all 0.25s ease;
+      width: 0;
+      z-index: -2;
+    }
 
-    &:hover,
-    &:focus-visible {
+    &:hover {
+      background-color: transparent;
+      border: 1px solid transparent;
       color: $pure-white;
 
       svg {
         fill: $pure-white;
+
+        path {
+          fill: $pure-white;
+        }
+      }
+
+      &::before {
+        background: $button-hover;
+        height: 100%;
+        left: 0;
+        top: 0;
+        width: 100%;
       }
     }
 
+    &:focus-visible {
+      background-color: $pure-white;
+      outline-color: $soft-black;
+    }
+
     svg {
-      fill: $text-color;
+      fill: $pure-black;
+
+      path {
+        fill: $pure-black;
+      }
     }
   }
 
@@ -58,35 +129,69 @@
     border-color: transparent;
   }
 
-  &.#{$px}-button--icon-last svg {
-    margin-inline-end: unset;
-    margin-inline-start: 0.5rem;
-  }
+  &--tertiary {
+    background-color: transparent;
+    border: 0;
+    color: $pure-black;
+    height: 28px;
+    padding: 0;
 
-  &--sm {
-    font-size: 0.75rem;
-  }
+    svg {
+      fill: $pure-black;
 
-  &--md {
-    font-size: 1rem;
-  }
+      path {
+        fill: $pure-black;
+      }
+    }
 
-  &--lg {
-    font-size: 1.05rem;
-    padding: 0.75em 1.75em;
+    &:hover {
+      background-color: transparent;
+      color: $button-hover;
+
+      svg {
+        fill: $button-hover;
+
+        path {
+          fill: $button-hover;
+        }
+      }
+    }
+
+    &:focus-visible {
+      background-color: $pure-white;
+      border-radius: 0;
+      outline-color: $soft-black;
+      outline-offset: 4.5px;
+      padding: 0 4px;
+    }
   }
 
   &:disabled {
     background-color: $white;
-    border: 1px solid $medium-gray;
-    color: $medium-gray;
+    border: 1px solid $light-gray;
+    color: $light-gray;
     cursor: default;
 
+    &:hover {
+      &::before {
+        all: unset;
+      }
+    }
+
     svg {
-      fill: $medium-gray;
+      fill: $light-gray;
+
+      path {
+        fill: $light-gray;
+      }
     }
   }
 
+  &--ghost:disabled,
+  &--tertiary:disabled {
+    border-color: transparent;
+  }
+
   * {
     margin: 0;
   }

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

@@ -1,49 +1,103 @@
 @use '../../allPartials' as *;
 
 .#{$px}-icon-button {
-  background-color: unset;
-  border: unset;
-  color: $text-color;
-  min-width: unset;
-  padding: unset;
+  padding: 0;
 
   & > svg {
-    fill: $pure-black;
-    height: 100%;
-    margin-inline-end: unset;
-    width: 100%;
+    position: absolute;
   }
 
-  &:hover {
-    background-color: unset;
-    opacity: 0.75;
+  &:focus {
+    &:focus {
+      outline: 0.5px solid $soft-black;
+      outline-offset: -4.5px;
+
+      svg {
+        fill: $pure-white;
+      }
+    }
+  }
+
+  &--primary,
+  &--ghost {
+    background: $pure-white;
+    color: $pure-black;
+    height: 44px;
+    width: 44px;
 
     & > svg {
       fill: $pure-black;
+      height: 100%;
+      height: 1.5rem;
+      margin-inline-end: unset;
+      position: absolute;
+      width: 100%;
+      width: 1.5rem;
+
+      path {
+        fill: $pure-black;
+      }
+    }
+
+    &:hover {
+      svg {
+        fill: $pure-white;
+
+        path {
+          fill: $pure-white;
+        }
+      }
     }
   }
 
-  &:focus {
-    background-color: unset;
-    fill: $pure-black;
+  &--ghost {
+    border-color: transparent;
+
+    svg {
+      fill: $keyline-gray;
+
+      path {
+        fill: $keyline-gray;
+      }
+    }
+  }
+
+  &--secondary,
+  &--tertiary {
+    height: 28px;
+    width: 28px;
 
     & > svg {
       fill: $pure-black;
+      height: 100%;
+      height: 1rem;
+      margin-inline-end: unset;
+      position: absolute;
+      width: 100%;
+      width: 1rem;
+
+      path {
+        fill: $pure-black;
+      }
     }
   }
 
-  &--sm {
-    height: 1rem;
-    width: 1rem;
+  &--tertiary {
+    &:focus {
+      border-radius: 100px;
+    }
   }
 
-  &--md {
-    height: 1.5rem;
-    width: 1.5rem;
-  }
+  &:disabled {
+    background-color: $white;
+    border: 1px solid $light-gray;
 
-  &--lg {
-    height: 2rem;
-    width: 2rem;
+    svg {
+      fill: $light-gray;
+
+      path {
+        fill: $light-gray;
+      }
+    }
   }
 }

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

@@ -1,6 +1,7 @@
 @use '../../allPartials' as *;
 
 .#{$px}-pagination {
+  align-items: center;
   display: flex;
   flex-direction: row;
   gap: $spacing-md;
@@ -47,10 +48,6 @@
 }
 
 .#{$px}__pagination-button {
-  background: none;
-  flex-direction: row;
-  padding: 0;
-
   svg {
     width: 2rem;
 
@@ -58,15 +55,6 @@
       width: 1rem;
     }
   }
-
-  &:hover,
-  &:focus {
-    background: none;
-  }
-
-  &:disabled {
-    border: none;
-  }
 }
 
 .#{$px}-left-arrow {

package/package.json

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