@phillips/seldon 1.237.0 → 1.238.0

package/dist/patterns/ViewingsList/ViewingsListCard.js

@@ -1,15 +1,15 @@
-import { jsxs as f, jsx as t, Fragment as g } from "react/jsx-runtime";
-import * as l from "react";
-import ut from "../../node_modules/classnames/index.js";
+import { jsxs as f, jsx as t, Fragment as y } from "react/jsx-runtime";
+import * as a from "react";
+import ut from "../../_virtual/index.js";
 import { px as c } from "../../utils/index.js";
 import v from "../../components/Input/Input.js";
-import o from "../../components/Button/Button.js";
-import { ButtonVariants as r } from "../../components/Button/types.js";
+import l from "../../components/Button/Button.js";
+import { ButtonVariants as o } from "../../components/Button/types.js";
 import ft from "./ViewingsListCardForm.js";
 const s = `${c}-viewings-list-card`, Et = ({
   address1: E,
   address1Label: $,
-  addressUrl: y,
+  addressUrl: g,
   addressUrlLabel: C,
   address2: O,
   address2Label: w,
@@ -34,8 +34,8 @@ const s = `${c}-viewings-list-card`, Et = ({
   locationLabel: R = "Location",
   onCancel: d,
   onEdit: p,
-  onDelete: h,
-  onSave: b,
+  onDelete: b,
+  onSave: h,
   previewDates: q,
   previewDatesLabel: G,
   previewHours1: H,
@@ -54,20 +54,20 @@ const s = `${c}-viewings-list-card`, Et = ({
   viewingHours1: et,
   viewingHours1Label: nt,
   viewingHours2: it,
-  viewingHours2Label: at
+  viewingHours2Label: rt
 }) => {
-  const [lt, ot] = l.useState(m === "true"), a = l.useRef(null);
-  l.useEffect(() => {
-    n && a.current && a.current.focus();
-  }, [n]), l.useEffect(() => {
-    i && a.current && a.current.closest(`.${c}-viewings-list-card`)?.querySelector(`.${c}-input--invalid input`)?.focus();
+  const [at, lt] = a.useState(m === "true"), r = a.useRef(null);
+  a.useEffect(() => {
+    n && r.current && r.current.focus();
+  }, [n]), a.useEffect(() => {
+    i && r.current && r.current.closest(`.${c}-viewings-list-card`)?.querySelector(`.${c}-input--invalid input`)?.focus();
   }, [i]);
-  const rt = () => {
+  const ot = () => {
     typeof d == "function" && d();
   }, st = () => {
     typeof p == "function" && p();
   }, ct = (u) => {
-    typeof b == "function" && b(u);
+    typeof h == "function" && h(u);
   };
   return /* @__PURE__ */ f(
     "section",
@@ -81,7 +81,7 @@ const s = `${c}-viewings-list-card`, Et = ({
         /* @__PURE__ */ t(
           v,
           {
-            ref: a,
+            ref: r,
             id: `location-${e}`,
             defaultValue: D,
             labelText: R,
@@ -97,7 +97,7 @@ const s = `${c}-viewings-list-card`, Et = ({
           {
             address1: E,
             address1Label: $,
-            addressUrl: y,
+            addressUrl: g,
             addressUrlLabel: C,
             address2: O,
             address2Label: w,
@@ -128,7 +128,7 @@ const s = `${c}-viewings-list-card`, Et = ({
             viewingHours1: et,
             viewingHours1Label: nt,
             viewingHours2: it,
-            viewingHours2Label: at
+            viewingHours2Label: rt
           }
         ) : null,
         /* @__PURE__ */ t(
@@ -142,24 +142,33 @@ const s = `${c}-viewings-list-card`, Et = ({
             inline: !0,
             value: "true",
             name: "enableOnSite",
-            onChange: () => ot((u) => !u),
+            onChange: () => lt((u) => !u),
             readOnly: !n
           }
         ),
-        lt ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "enableOnSite", value: "false" }),
+        at ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "enableOnSite", value: "false" }),
         /* @__PURE__ */ t("hr", {}),
-        /* @__PURE__ */ t("div", { className: `${s}__btn-group ${c}-button__group`, children: n ? /* @__PURE__ */ f(g, { children: [
-          /* @__PURE__ */ t(o, { id: `vlc-save-btn-${e}`, variant: r.ghost, type: "submit", onClick: ct, children: X }),
-          /* @__PURE__ */ t(o, { id: `vlc-cancel-btn-${e}`, variant: r.ghost, type: "button", onClick: rt, children: L })
-        ] }) : /* @__PURE__ */ f(g, { children: [
-          /* @__PURE__ */ t(o, { id: `vlc-edit-btn-${e}`, variant: r.ghost, type: "button", onClick: st, children: _ }),
+        /* @__PURE__ */ t("div", { className: `${s}__btn-group ${c}-button__group`, children: n ? /* @__PURE__ */ f(y, { children: [
+          /* @__PURE__ */ t(l, { id: `vlc-save-btn-${e}`, variant: o.tertiary, type: "submit", onClick: ct, children: X }),
           /* @__PURE__ */ t(
-            o,
+            l,
+            {
+              id: `vlc-cancel-btn-${e}`,
+              variant: o.tertiary,
+              type: "button",
+              onClick: ot,
+              children: L
+            }
+          )
+        ] }) : /* @__PURE__ */ f(y, { children: [
+          /* @__PURE__ */ t(l, { id: `vlc-edit-btn-${e}`, variant: o.tertiary, type: "button", onClick: st, children: _ }),
+          /* @__PURE__ */ t(
+            l,
             {
               id: `vlc-delete-btn-${e}`,
-              variant: r.ghost,
+              variant: o.tertiary,
               type: "button",
-              onClick: () => typeof h == "function" && h(e),
+              onClick: () => typeof b == "function" && b(e),
               children: V
             }
           )

package/dist/patterns/ViewingsList/ViewingsListCardForm.js

@@ -1,5 +1,5 @@
 import { jsxs as d, Fragment as B, jsx as a } from "react/jsx-runtime";
-import w from "../../node_modules/classnames/index.js";
+import w from "../../_virtual/index.js";
 import * as m from "react";
 import { px as G } from "../../utils/index.js";
 import s from "../../components/Input/Input.js";

package/dist/providers/SeldonProvider/utils.js

@@ -1,8 +1,7 @@
-import "../../node_modules/@artsy/fresnel/dist/index.js";
-import { BREAKPOINTS as e } from "../../utils/constants.js";
-import { __exports as r } from "../../_virtual/index.js";
-const t = r.createMedia({ breakpoints: e }), s = t.createMediaStyle();
+import { d as e } from "../../_virtual/index2.js";
+import { BREAKPOINTS as r } from "../../utils/constants.js";
+const t = e.createMedia({ breakpoints: r }), i = t.createMediaStyle();
 export {
   t as SSRMediaQuery,
-  s as ssrMediaQueryStyle
+  i as ssrMediaQueryStyle
 };

package/dist/scss/componentStyles.scss

@@ -40,6 +40,7 @@
 @use 'components/Pagination/pagination';
 @use 'components/ContentPeek/contentPeek';
 @use 'components/PageContentWrapper/pageContentWrapper';
+@use 'components/DatePicker/datePicker';
 @use 'components/Carousel/carousel';
 @use 'components/ComboBox/combobox';
 @use 'components/Tags/tags';

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

@@ -21,6 +21,23 @@
     color 0.25s,
     background-color 0.25s;
 
+  &--small {
+    height: 32px; // Explicitly defined by design
+    max-width: 160px; // Explicitly defined by design
+    min-width: 72px; // Explicitly defined by design
+    padding: 0 $padding-sm;
+
+    svg {
+      height: calc($font-size-label-small * 1.1);
+      width: calc($font-size-label-small * 1.1);
+
+      @include media($breakpoint-md) {
+        height: calc($font-size-label-small * 1.2);
+        width: calc($font-size-label-small * 1.2);
+      }
+    }
+  }
+
   svg {
     fill: $pure-white;
     height: calc($font-size-label-small * 1.3);
@@ -39,7 +56,6 @@
 
   &--primary,
   &--secondary,
-  &--ghost,
   &--tertiary {
     &.#{$px}-link {
       text-decoration: none;
@@ -47,8 +63,7 @@
   }
 
   &--primary.#{$px}-link,
-  &--secondary.#{$px}-link,
-  &--ghost.#{$px}-link {
+  &--secondary.#{$px}-link {
     font-variation-settings: 'wght' 600;
 
     .#{$px}-text {
@@ -105,8 +120,7 @@
     }
   }
 
-  &--secondary,
-  &--ghost {
+  &--secondary {
     background-color: $pure-white;
     border: 2px solid $pure-black;
     color: $pure-black;
@@ -154,37 +168,9 @@
     }
   }
 
-  &--ghost {
-    border-color: transparent;
-
-    @include hoverOrActive {
-      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%;
-      }
-    }
-  }
-
   &--tertiary {
     background-color: transparent;
-    border: 0;
     color: $pure-black;
-    padding: 0 $spacing-micro;
 
     svg {
       fill: $pure-black;
@@ -217,7 +203,7 @@
 
   &:disabled {
     background-color: $grey-50;
-    border: 1px solid $grey-50;
+    border: 2px solid $grey-50;
     color: $grey-75;
     cursor: default;
 
@@ -236,8 +222,8 @@
     }
   }
 
-  &--ghost:disabled,
   &--tertiary:disabled {
+    background-color: transparent;
     border-color: transparent;
   }
 

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

@@ -0,0 +1,76 @@
+@use '../../allPartials' as *;
+
+@mixin grid-layout {
+  display: grid;
+  gap: 0;
+  grid-template-columns: 150px repeat(5, 1fr);
+}
+
+@mixin cell-base {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  padding: $spacing-sm;
+}
+
+@mixin cell-border {
+  border-right: 1px solid $bg-border;
+}
+
+.all-variants-grid {
+  background-color: $bg-default;
+  border: 1px solid $bg-border;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+
+  &__header {
+    @include grid-layout;
+
+    background-color: $grey-25;
+    border-bottom: 1px solid $bg-border;
+    font-weight: bold;
+
+    &-cell {
+      @include cell-base;
+      @include cell-border;
+
+      justify-content: center;
+      text-align: center;
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+
+  &__row {
+    @include grid-layout;
+
+    background-color: $pure-white;
+    border-bottom: 1px solid $bg-border;
+  }
+
+  &__label-cell {
+    @include cell-base;
+    @include cell-border;
+
+    background-color: $grey-25;
+    font-weight: 600;
+    justify-content: flex-start;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+
+  &__button-cell {
+    @include cell-base;
+    @include cell-border;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+}

package/dist/scss/components/DatePicker/_datePicker.scss

@@ -65,11 +65,11 @@
   .flatpickr-current-month.flatpickr-current-month {
     @include text($labelLarge);
 
+    padding: 0.65rem 0 0;
+
     .cur-year {
       @include text($labelLarge);
     }
-
-    padding: 0.65rem 0 0;
   }
 
   .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),

package/dist/scss/components/Drawer/_drawer.scss

@@ -1,4 +1,4 @@
-@import '../../_vars';
+@use '../../allPartials' as *;
 
 .#{$px}-drawer {
   align-items: center;

package/dist/scss/components/Icon/_icon.stories.scss

@@ -1,4 +1,4 @@
-@import '../../allPartials';
+@use '../../allPartials' as *;
 
 .story-icon-flex-wrapper {
   box-shadow: 0 0 8px 0 rgba($pure-black, 0.2);

package/dist/scss/patterns/ViewingDetails/_viewingDetails.stories.scss

@@ -1,5 +1,3 @@
-@import '../../allPartials';
-
 .story-center-align {
   text-align: center;
 }

package/dist/site-furniture/Footer/Footer.js

@@ -1,5 +1,5 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import s from "../../node_modules/classnames/index.js";
+import s from "../../_virtual/index.js";
 import { px as r, defaultYear as m } from "../../utils/index.js";
 import { TextVariants as f } from "../../components/Text/types.js";
 import c from "../../components/Text/Text.js";

package/dist/site-furniture/Header/Header.js

@@ -1,5 +1,5 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import c from "../../node_modules/classnames/index.js";
+import c from "../../_virtual/index.js";
 import t, { createContext as D, forwardRef as F, useState as u, useEffect as C } from "react";
 import G from "../../components/Icon/Icon.js";
 import H from "../../components/Navigation/Navigation.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.237.0",
+  "version": "1.238.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -39,7 +39,7 @@
     "create-component": "node --no-warnings --loader ts-node/esm .template/scripts/createComponent.ts",
     "format": "prettier . --write",
     "lint": "tsc --noEmit && npm run lint:js && npm run lint:styles && npm run lint:md",
-    "lint:js": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:js": "eslint . --report-unused-disable-directives --max-warnings 0",
     "lint:styles": "stylelint \"src/**/*.scss\" --fix",
     "lint:md": "markdownlint \"src/**/*.{md,mdx}\" --fix",
     "prepare": "husky install",
@@ -79,25 +79,20 @@
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.3",
+    "@chromatic-com/storybook": "^5.0.1",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
+    "@eslint/js": "^9.15.0",
     "@figma/code-connect": "^0.2.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^12.0.0",
     "@semantic-release/npm": "^13.1.4",
-    "@storybook/addon-a11y": "^8.5.8",
-    "@storybook/addon-essentials": "^8.5.0",
-    "@storybook/addon-interactions": "^8.5.0",
-    "@storybook/addon-links": "^8.5.0",
-    "@storybook/addon-mdx-gfm": "^8.5.0",
-    "@storybook/blocks": "^8.5.0",
-    "@storybook/manager-api": "^8.5.0",
-    "@storybook/preview-api": "^8.5.0",
-    "@storybook/react": "^8.5.0",
-    "@storybook/react-vite": "^8.5.0",
-    "@storybook/theming": "^8.5.0",
+    "@storybook/addon-a11y": "^10.2.8",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/addon-links": "^10.2.8",
+    "@storybook/react": "^10.2.8",
+    "@storybook/react-vite": "^10.2.8",
     "@svgr/cli": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@svgr/plugin-prettier": "^8.1.0",
@@ -111,18 +106,18 @@
     "@types/react-dom": "^18.0.11",
     "@types/react-transition-group": "^4.4.11",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^1.6.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
+    "@typescript-eslint/parser": "^8.18.0",
+    "@vitejs/plugin-react": "^5.1.4",
+    "@vitest/coverage-v8": "^4.0.18",
     "chromatic": "^13.1.4",
     "color": "^4.2.3",
-    "eslint": "^8.57.0",
-    "eslint-plugin-local-rules": "^3.0.2",
-    "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.13",
-    "eslint-plugin-storybook": "^0.11.2",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.5.0",
+    "eslint-plugin-storybook": "^10.2.8",
+    "globals": "^15.14.0",
     "husky": "^9.1.6",
     "jsdom": "^26.1.0",
     "markdownlint-cli": "^0.41.0",
@@ -135,7 +130,8 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "sass": "^1.83.4",
     "semantic-release": "^25.0.0",
-    "storybook": "^8.6.15",
+    "storybook": "^10.2.8",
+    "storybook-addon-pseudo-states": "^10.2.8",
     "stylelint": "^16.8.1",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-config-standard-scss": "^13.1.0",
@@ -144,11 +140,12 @@
     "ts-node": "^10.9.2",
     "type-fest": "^4.27.0",
     "typescript": "^5.5.4",
-    "vite": "^5.4.14",
-    "vite-plugin-dts": "^4.2.4",
-    "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.2",
-    "vitest": "^1.6.0"
+    "typescript-eslint": "^8.18.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-svgr": "^4.5.0",
+    "vite-tsconfig-paths": "^6.1.0",
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "react": "^18.3.1",