@phillips/seldon 1.103.0 → 1.103.2

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

@@ -16,10 +16,6 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HT
      * Is this the principal call to action on the page?
      */
     variant?: ButtonVariants;
-    /**
-     * How large should the button be?
-     */
-    size?: 'sm' | 'md' | 'lg';
     /**
      * The type of the button.
      */

package/dist/components/Button/Button.js

@@ -1,64 +1,61 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import p from "../../node_modules/classnames/index.js";
-import { getCommonProps as d } from "../../utils/index.js";
+import { getCommonProps as c } from "../../utils/index.js";
 import { ButtonVariants as b } from "./types.js";
-import { forwardRef as B } from "react";
-const N = B(
+import { forwardRef as d } from "react";
+const B = d(
   ({
-    variant: t = b.primary,
-    size: s = "md",
-    children: r,
-    className: a,
-    isIconLast: m = !1,
+    variant: s = b.primary,
+    children: t,
+    className: r,
+    isIconLast: a = !1,
     type: u = "button",
-    isDisabled: c = !1,
-    href: e,
-    target: n,
-    ...l
-  }, $) => {
-    const { className: o, ...f } = d(l, "Button");
-    return e ? /* @__PURE__ */ i(
+    isDisabled: $ = !1,
+    href: m,
+    target: e,
+    ...n
+  }, l) => {
+    const { className: o, ...i } = c(n, "Button");
+    return m ? /* @__PURE__ */ f(
       "a",
       {
-        ...f,
-        ref: $,
-        href: e,
+        ...i,
+        ref: l,
+        href: m,
         className: p(
           `${o}`,
           `${o}--${s}`,
-          `${o}--${t}`,
           {
-            [`${o}--icon-last`]: m
+            [`${o}--icon-last`]: a
           },
-          a
+          r
         ),
-        target: n,
-        rel: n === "_blank" ? "noopener noreferrer" : void 0,
-        children: r
+        target: e,
+        rel: e === "_blank" ? "noopener noreferrer" : void 0,
+        children: t
       }
-    ) : /* @__PURE__ */ i(
+    ) : /* @__PURE__ */ f(
       "button",
       {
-        ...f,
-        ref: $,
+        ...i,
+        ref: l,
         type: u,
         className: p(
           `${o}`,
           `${o}--${s}`,
-          `${o}--${t}`,
           {
-            [`${o}--icon-last`]: m
+            [`${o}--icon-last`]: a
           },
-          a
+          r
         ),
-        disabled: c,
-        ...l,
-        children: r
+        disabled: $,
+        ...n,
+        children: t
       }
     );
   }
 );
-N.displayName = "Button";
+B.displayName = "Button";
 export {
-  N as default
+  B as default
 };

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

@@ -4,12 +4,6 @@ declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
     argTypes: {
-        size: {
-            options: string[];
-            control: {
-                type: "select";
-            };
-        };
         variant: {
             options: ButtonVariants[];
             control: {

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

@@ -4,10 +4,6 @@ export interface IconButtonProps extends Omit<React.HTMLAttributes<HTMLButtonEle
      * Button contents
      */
     children?: React.ReactElement<SVGElement>;
-    /**
-     * How large should the button be?
-     */
-    size?: 'sm' | 'md' | 'lg';
     /**
      * Mainly used for styling
      */
@@ -17,5 +13,5 @@ export interface IconButtonProps extends Omit<React.HTMLAttributes<HTMLButtonEle
      */
     isDisabled?: boolean;
 }
-declare const IconButton: ({ children, size, variant, isDisabled, className, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const IconButton: ({ children, variant, isDisabled, className, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default IconButton;

package/dist/components/IconButton/IconButton.js

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

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

@@ -1,14 +1,8 @@
 import { ButtonVariants } from '../Button/types';
 declare const meta: {
     title: string;
-    component: ({ children, size, variant, isDisabled, className, ...props }: import('./IconButton').IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ children, variant, isDisabled, className, ...props }: import('./IconButton').IconButtonProps) => import("react/jsx-runtime").JSX.Element;
     argTypes: {
-        size: {
-            options: string[];
-            control: {
-                type: "select";
-            };
-        };
         variant: {
             options: ButtonVariants[];
             control: {

package/dist/components/Tabs/TabsContent.js

@@ -1,21 +1,20 @@
 import { jsx as n } from "react/jsx-runtime";
-import { Content as i } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
-import { forwardRef as p } from "react";
-import { getCommonProps as c } from "../../utils/index.js";
-import f from "../../node_modules/classnames/index.js";
-const l = p(
-  ({ className: b, value: o, containerClassName: a, children: s, ...t }, e) => {
-    const { className: m, ...r } = c(t, "TabsContainer");
+import { Content as p } from "../../node_modules/@radix-ui/react-tabs/dist/index.js";
+import { forwardRef as c } from "react";
+import { getCommonProps as f } from "../../utils/index.js";
+import i from "../../node_modules/classnames/index.js";
+const l = c(
+  ({ className: b, value: o, containerClassName: s, children: a, ...t }, m) => {
+    const { className: e, ...r } = f(t, "TabsContainer");
     return /* @__PURE__ */ n(
-      i,
+      p,
       {
         value: o,
-        className: f(`${m}__tabs-content`, a),
+        className: i(`${e}__tabs-content`, s),
         ...r,
-        ref: e,
+        ref: m,
         tabIndex: -1,
-        "aria-hidden": !0,
-        children: s
+        children: a
       }
     );
   }

package/dist/patterns/ViewingsList/ViewingsList.js

@@ -5,7 +5,7 @@ import S from "../../node_modules/classnames/index.js";
 import { getCommonProps as M } from "../../utils/index.js";
 import P from "./ViewingsListCard.js";
 import R from "../../components/Button/Button.js";
-const $ = () => Math.floor(Math.random() * 100) + Date.now(), G = ({
+const $ = () => Math.floor(Math.random() * 100) + Date.now(), H = ({
   cardTitle: C = "Viewing Details",
   className: E,
   i18n: f = {},
@@ -16,28 +16,28 @@ const $ = () => Math.floor(Math.random() * 100) + Date.now(), G = ({
   viewings: c,
   ...i
 }) => {
-  const [a, h] = d.useState(c), [m, n] = d.useState(""), [s, u] = d.useState(), { className: p, ...D } = M(i, "ViewingsList");
+  const [a, h] = d.useState(c), [m, s] = d.useState(""), [o, u] = d.useState(), { className: p, ...D } = M(i, "ViewingsList");
   d.useEffect(() => {
     h(c);
   }, [c]);
   const { addViewingsBtnLabel: y = "ADD VIEWINGS" } = f, b = () => {
     const t = `${$()}${a ? "-" + a.length : ""}`;
-    n(t), u(t), r && r(t);
+    s(t), u(t), r && r(t);
   }, V = (t) => {
-    n(""), typeof e == "function" && e(t);
+    s(""), typeof e == "function" && e(t);
   }, k = (t) => {
-    n(t), u(a == null ? void 0 : a.find((o) => o.id === t));
+    s(t), u(a == null ? void 0 : a.find((n) => n.id === t));
   }, x = (t) => {
-    N(t) && n("");
+    N(t) && s("");
   }, B = () => {
-    typeof s == "string" ? typeof e == "function" && e(s) : m === (s == null ? void 0 : s.id) && h((t) => t == null ? void 0 : t.map((o) => o.id === s.id ? s : o)), n("");
+    typeof o == "string" ? typeof e == "function" && e(o) : m === (o == null ? void 0 : o.id) && h((t) => t == null ? void 0 : t.map((n) => n.id === o.id ? o : n)), s("");
   };
-  return /* @__PURE__ */ L("div", { ...D, className: S(p, E), key: m, ...i }, /* @__PURE__ */ l("h2", { className: S(`${p}__title`), children: O }), a == null ? void 0 : a.map((t, o) => /* @__PURE__ */ l(
+  return /* @__PURE__ */ L("div", { ...D, className: S(p, E), key: m, ...i }, /* @__PURE__ */ l("h2", { className: S(`${p}__title`), children: O }), a == null ? void 0 : a.map((t, n) => /* @__PURE__ */ l(
     P,
     {
       ...t,
       ...f,
-      cardTitle: t.location ? `${C} ${o + 1}` : void 0,
+      cardTitle: t.location ? `${C} ${n + 1}` : void 0,
       isEditState: m === t.id,
       onCancel: B,
       onDelete: V,
@@ -45,8 +45,8 @@ const $ = () => Math.floor(Math.random() * 100) + Date.now(), G = ({
       onSave: x
     },
     `${t.id}`
-  )), /* @__PURE__ */ l(R, { id: `viewings-list-add-btn-${i.id || $()}`, size: "sm", onClick: b, children: y }));
+  )), /* @__PURE__ */ l(R, { id: `viewings-list-add-btn-${i.id || $()}`, onClick: b, children: y }));
 };
 export {
-  G as default
+  H as default
 };

package/dist/patterns/ViewingsList/ViewingsListCard.js

@@ -1,31 +1,31 @@
-import { jsxs as m, jsx as t, Fragment as $ } from "react/jsx-runtime";
-import * as a from "react";
-import mt from "../../node_modules/classnames/index.js";
-import { px as u } from "../../utils/index.js";
+import { jsxs as f, jsx as t, Fragment as $ } from "react/jsx-runtime";
+import * as c from "react";
+import ft from "../../node_modules/classnames/index.js";
+import { px as i } from "../../utils/index.js";
 import y from "../../components/Input/Input.js";
-import c from "../../components/Button/Button.js";
+import s from "../../components/Button/Button.js";
 import { ButtonVariants as l } from "../../components/Button/types.js";
-import ft from "./ViewingsListCardForm.js";
-const i = `${u}-viewings-list-card`, dt = ({
+import mt from "./ViewingsListCardForm.js";
+const u = `${i}-viewings-list-card`, dt = ({
   address1: d,
   address1Label: C,
   addressUrl: O,
   addressUrlLabel: w,
   address2: v,
   address2Label: x,
-  address3: z,
-  address3Label: A,
-  cancelBtnLabel: L = "CANCEL",
-  cardTitle: T = "Add New Viewing",
-  deleteBtnLabel: V = "DELETE",
-  editBtnLabel: _ = "EDIT",
+  address3: A,
+  address3Label: L,
+  cancelBtnLabel: T = "CANCEL",
+  cardTitle: V = "Add New Viewing",
+  deleteBtnLabel: _ = "DELETE",
+  editBtnLabel: k = "EDIT",
   isEditState: o,
-  enableOnSite: f = "false",
-  enableOnSiteToggleLabel: k = "Enabled on website",
-  email: I,
-  emailLabel: N = "Email",
-  emailLink: S,
-  emailLinkLabel: j = "Email Address",
+  enableOnSite: m = "false",
+  enableOnSiteToggleLabel: I = "Enabled on website",
+  email: N,
+  emailLabel: S = "Email",
+  emailLink: j,
+  emailLinkLabel: z = "Email Address",
   emailOn: B = "false",
   emailToggleLabel: D = "Include Email Address",
   id: e,
@@ -54,35 +54,35 @@ const i = `${u}-viewings-list-card`, dt = ({
   viewingHours1: nt,
   viewingHours1Label: ot,
   viewingHours2: rt,
-  viewingHours2Label: st
+  viewingHours2Label: at
 }) => {
-  const [at, ct] = a.useState(f === "true"), s = a.useRef(null);
-  a.useEffect(() => {
-    o && s.current && s.current.focus();
-  }, [o]), a.useEffect(() => {
+  const [ct, st] = c.useState(m === "true"), a = c.useRef(null);
+  c.useEffect(() => {
+    o && a.current && a.current.focus();
+  }, [o]), c.useEffect(() => {
     var r, E;
-    n && s.current && ((E = (r = s.current.closest(`.${u}-viewings-list-card`)) == null ? void 0 : r.querySelector(`.${u}-input--invalid input`)) == null || E.focus());
+    n && a.current && ((E = (r = a.current.closest(`.${i}-viewings-list-card`)) == null ? void 0 : r.querySelector(`.${i}-input--invalid input`)) == null || E.focus());
   }, [n]);
   const lt = () => {
     typeof p == "function" && p();
-  }, it = () => {
+  }, ut = () => {
     typeof h == "function" && h();
-  }, ut = (r) => {
+  }, it = (r) => {
     typeof g == "function" && g(r);
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ f(
     "section",
     {
       "data-testid": `viewings-list-card-${e}`,
       id: e,
-      className: mt(`${i}`, { [`${i}--edit-state`]: o }),
+      className: ft(`${u}`, { [`${u}--edit-state`]: o }),
       children: [
-        /* @__PURE__ */ t("h3", { className: `${i}__title`, children: T }),
+        /* @__PURE__ */ t("h3", { className: `${u}__title`, children: V }),
         /* @__PURE__ */ t("input", { type: "hidden", name: "id", value: e }),
         /* @__PURE__ */ t(
           y,
           {
-            ref: s,
+            ref: a,
             id: `location-${e}`,
             defaultValue: R,
             labelText: q,
@@ -94,7 +94,7 @@ const i = `${u}-viewings-list-card`, dt = ({
           }
         ),
         o ? /* @__PURE__ */ t(
-          ft,
+          mt,
           {
             address1: d,
             address1Label: C,
@@ -102,12 +102,12 @@ const i = `${u}-viewings-list-card`, dt = ({
             addressUrlLabel: w,
             address2: v,
             address2Label: x,
-            address3: z,
-            address3Label: A,
-            email: I,
-            emailLabel: N,
-            emailLink: S,
-            emailLinkLabel: j,
+            address3: A,
+            address3Label: L,
+            email: N,
+            emailLabel: S,
+            emailLink: j,
+            emailLinkLabel: z,
             emailOn: B,
             emailToggleLabel: D,
             id: e,
@@ -129,7 +129,7 @@ const i = `${u}-viewings-list-card`, dt = ({
             viewingHours1: nt,
             viewingHours1Label: ot,
             viewingHours2: rt,
-            viewingHours2Label: st
+            viewingHours2Label: at
           }
         ) : null,
         /* @__PURE__ */ t(
@@ -137,62 +137,31 @@ const i = `${u}-viewings-list-card`, dt = ({
           {
             id: `enableOnSite-${e}`,
             type: "toggle",
-            defaultChecked: f === "true",
-            labelText: k,
+            defaultChecked: m === "true",
+            labelText: I,
             size: "md",
             inline: !0,
             value: "true",
             name: "enableOnSite",
-            onChange: () => ct((r) => !r),
+            onChange: () => st((r) => !r),
             readOnly: !o
           }
         ),
-        at ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "enableOnSite", value: "false" }),
+        ct ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "enableOnSite", value: "false" }),
         /* @__PURE__ */ t("hr", {}),
-        /* @__PURE__ */ t("div", { className: `${i}__btn-group ${u}-button__group`, children: o ? /* @__PURE__ */ m($, { children: [
+        /* @__PURE__ */ t("div", { className: `${u}__btn-group ${i}-button__group`, children: o ? /* @__PURE__ */ f($, { children: [
+          /* @__PURE__ */ t(s, { id: `vlc-save-btn-${e}`, variant: l.ghost, type: "submit", onClick: it, children: Y }),
+          /* @__PURE__ */ t(s, { id: `vlc-cancel-btn-${e}`, variant: l.ghost, type: "button", onClick: lt, children: T })
+        ] }) : /* @__PURE__ */ f($, { children: [
+          /* @__PURE__ */ t(s, { id: `vlc-edit-btn-${e}`, variant: l.ghost, type: "button", onClick: ut, children: k }),
           /* @__PURE__ */ t(
-            c,
-            {
-              id: `vlc-save-btn-${e}`,
-              variant: l.ghost,
-              type: "submit",
-              size: "sm",
-              onClick: ut,
-              children: Y
-            }
-          ),
-          /* @__PURE__ */ t(
-            c,
-            {
-              id: `vlc-cancel-btn-${e}`,
-              variant: l.ghost,
-              type: "button",
-              size: "sm",
-              onClick: lt,
-              children: L
-            }
-          )
-        ] }) : /* @__PURE__ */ m($, { children: [
-          /* @__PURE__ */ t(
-            c,
-            {
-              id: `vlc-edit-btn-${e}`,
-              variant: l.ghost,
-              type: "button",
-              size: "sm",
-              onClick: it,
-              children: _
-            }
-          ),
-          /* @__PURE__ */ t(
-            c,
+            s,
             {
               id: `vlc-delete-btn-${e}`,
               variant: l.ghost,
               type: "button",
-              size: "sm",
               onClick: () => typeof b == "function" && b(e),
-              children: V
+              children: _
             }
           )
         ] }) })

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

@@ -2,6 +2,7 @@
 
 .#{$px}-button {
   @include bodyText;
+  @include labelText($button);
 
   align-items: center;
   background-color: $pure-black;
@@ -13,7 +14,7 @@
   font-variation-settings: 'wght' 600;
   gap: $margin-xsm;
   justify-content: center;
-  padding: 0 $padding-md;
+  padding: $padding-sm $padding-md;
   position: relative;
   transition:
     color 0.25s,
@@ -21,6 +22,8 @@
 
   svg {
     fill: $pure-white;
+    height: $button-label-line-height;
+    width: $button-label-line-height;
 
     path {
       fill: $pure-white;
@@ -45,27 +48,6 @@
     }
   }
 
-  &--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;
-    }
-  }
-
   &--link {
     background-color: transparent;
     border: 0;
@@ -146,8 +128,7 @@
     background-color: transparent;
     border: 0;
     color: $pure-black;
-    height: 28px;
-    padding: 0;
+    padding: 0 $spacing-micro;
 
     svg {
       fill: $pure-black;

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

@@ -3,8 +3,15 @@
 .#{$px}-icon-button {
   align-items: center;
   display: flex;
+  height: $spacing-md;
   justify-content: center;
   padding: 0;
+  width: $spacing-md;
+
+  & > svg {
+    height: $button-label-line-height;
+    width: $button-label-line-height;
+  }
 
   &:focus-visible {
     &:focus-visible {
@@ -21,14 +28,12 @@
   &--ghost {
     background: $pure-white;
     color: $pure-black;
-    height: 44px;
-    width: 44px;
 
     & > svg {
       fill: $pure-black;
-      height: 1.5rem;
+      height: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
       margin-inline-end: unset;
-      width: 1.5rem;
+      width: calc($button-label-line-height * 1.5); // design-cheats-for-button-large
 
       path {
         fill: $pure-black;
@@ -58,22 +63,21 @@
     }
   }
 
+  &--secondary {
+    height: $spacing-lg;
+    width: $spacing-lg;
+  }
+
   &--secondary,
   &--tertiary.#{$px}-icon-button {
-    height: 28px;
-    padding: $spacing-xsm;
-    width: 28px;
-
     &:focus-visible {
       border-radius: 100px;
     }
 
     & > svg {
       fill: $pure-black;
-      height: 1.25rem;
       margin-inline-end: unset;
       position: absolute;
-      width: 1.25rem;
 
       path {
         fill: $pure-black;
@@ -85,6 +89,20 @@
     &:focus-visible {
       border-radius: 100px;
     }
+
+    &:hover {
+      background-color: $button-hover;
+
+      & > svg {
+        fill: $pure-white;
+        margin-inline-end: unset;
+        position: absolute;
+
+        path {
+          fill: $pure-white;
+        }
+      }
+    }
   }
 
   &:disabled {

package/package.json

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