@phillips/seldon 1.96.1 → 1.97.0

package/dist/patterns/ViewingsList/ViewingsListCardForm.js

@@ -1,6 +1,6 @@
-import { jsxs as a, Fragment as W, jsx as t } from "react/jsx-runtime";
-import b from "../../node_modules/classnames/index.js";
-import * as T from "react";
+import { jsxs as T, Fragment as W, jsx as t } from "react/jsx-runtime";
+import f from "../../node_modules/classnames/index.js";
+import * as a from "react";
 import { px as X } from "../../utils/index.js";
 import u from "../../components/Input/Input.js";
 const o = `${X}-viewings-list-card-form`, l = ({
@@ -12,7 +12,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
   address2Label: h = "City, State, Zip ('New York, NY 10019')",
   address3: z,
   address3Label: L = "Country (United States)",
-  emailOn: O = "false",
+  emailOn: O,
   emailToggleLabel: D = "Include Email Address",
   email: C,
   emailLabel: S = "Email",
@@ -28,7 +28,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
   previewHours2Label: P = "Hours2",
   previewLabel: j = "Label ('Preview', 'Opening Night', etc)",
   previewLabelValue: I,
-  previewOn: p = "false",
+  previewOn: p,
   previewToggleLabel: R = "Additional Hours",
   viewingLabel: Y = "Label ('Open to public')",
   viewingLabelValue: Z,
@@ -39,10 +39,10 @@ const o = `${X}-viewings-list-card-form`, l = ({
   viewingHours2: K,
   viewingHours2Label: M = "Hours2"
 }) => {
-  const [m, f] = T.useState(p === "true"), [w, Q] = T.useState(O === "true");
-  return T.useEffect(() => {
-    f(p === "true");
-  }, [p]), /* @__PURE__ */ a(W, { children: [
+  const [m, b] = a.useState(p === "true"), [w, Q] = a.useState(O === "true");
+  return a.useEffect(() => {
+    b(p === "true");
+  }, [p]), /* @__PURE__ */ T(W, { children: [
     /* @__PURE__ */ t(
       u,
       {
@@ -51,7 +51,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: Z,
         labelText: Y,
         size: "sm",
-        invalid: e == null ? void 0 : e.viewingLabelValue,
+        invalid: !!(e != null && e.viewingLabelValue),
         invalidText: e == null ? void 0 : e.viewingLabelValue
       }
     ),
@@ -63,7 +63,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: q,
         labelText: B,
         size: "sm",
-        invalid: e == null ? void 0 : e.viewingDates,
+        invalid: !!(e != null && e.viewingDates),
         invalidText: e == null ? void 0 : e.viewingDates
       }
     ),
@@ -75,7 +75,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: G,
         labelText: J,
         size: "sm",
-        invalid: e == null ? void 0 : e.viewingHours1,
+        invalid: !!(e != null && e.viewingHours1),
         invalidText: e == null ? void 0 : e.viewingHours1
       }
     ),
@@ -87,7 +87,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: K,
         labelText: M,
         size: "sm",
-        invalid: e == null ? void 0 : e.viewingHours2,
+        invalid: !!(e != null && e.viewingHours2),
         invalidText: e == null ? void 0 : e.viewingHours2
       }
     ),
@@ -100,18 +100,17 @@ const o = `${X}-viewings-list-card-form`, l = ({
         size: "md",
         defaultChecked: m,
         inline: !0,
-        invalid: e == null ? void 0 : e.previewOn,
+        invalid: !!(e != null && e.previewOn),
         invalidText: e == null ? void 0 : e.previewOn,
-        value: !0,
         name: "previewOn",
-        onChange: () => f((x) => !x)
+        onChange: () => b((x) => !x)
       }
     ),
     m ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "previewOn", value: "false" }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ T(
       "div",
       {
-        className: b(`${o}__preview-set`, { [`${o}__preview-set--hidden`]: !m }),
+        className: f(`${o}__preview-set`, { [`${o}__preview-set--hidden`]: !m }),
         children: [
           /* @__PURE__ */ t(
             u,
@@ -121,7 +120,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
               defaultValue: I,
               labelText: j,
               size: "sm",
-              invalid: e == null ? void 0 : e.previewLabelValue,
+              invalid: !!(e != null && e.previewLabelValue),
               invalidText: e == null ? void 0 : e.previewLabelValue,
               hidden: !m
             }
@@ -134,7 +133,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
               defaultValue: y,
               labelText: E,
               size: "sm",
-              invalid: e == null ? void 0 : e.previewDates,
+              invalid: !!(e != null && e.previewDates),
               invalidText: e == null ? void 0 : e.previewDates,
               hidden: !m
             }
@@ -147,7 +146,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
               defaultValue: U,
               labelText: A,
               size: "sm",
-              invalid: e == null ? void 0 : e.previewHours1,
+              invalid: !!(e != null && e.previewHours1),
               invalidText: e == null ? void 0 : e.previewHours1,
               hidden: !m
             }
@@ -160,7 +159,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
               defaultValue: N,
               labelText: P,
               size: "sm",
-              invalid: e == null ? void 0 : e.previewHours2,
+              invalid: !!(e != null && e.previewHours2),
               invalidText: e == null ? void 0 : e.previewHours2,
               hidden: !m
             }
@@ -176,7 +175,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: g,
         labelText: H,
         size: "sm",
-        invalid: e == null ? void 0 : e.address1,
+        invalid: !!(e != null && e.address1),
         invalidText: e == null ? void 0 : e.address1
       }
     ),
@@ -188,7 +187,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: c,
         labelText: h,
         size: "sm",
-        invalid: e == null ? void 0 : e.address2,
+        invalid: !!(e != null && e.address2),
         invalidText: e == null ? void 0 : e.address2
       }
     ),
@@ -200,7 +199,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         defaultValue: z,
         labelText: L,
         size: "sm",
-        invalid: e == null ? void 0 : e.address3,
+        invalid: !!(e != null && e.address3),
         invalidText: e == null ? void 0 : e.address3
       }
     ),
@@ -213,7 +212,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         labelText: $,
         size: "sm",
         type: "url",
-        invalid: e == null ? void 0 : e.addressUrl,
+        invalid: !!(e != null && e.addressUrl),
         invalidText: e == null ? void 0 : e.addressUrl
       }
     ),
@@ -226,18 +225,17 @@ const o = `${X}-viewings-list-card-form`, l = ({
         size: "md",
         defaultChecked: w,
         inline: !0,
-        invalid: e == null ? void 0 : e.emailOn,
+        invalid: !!(e != null && e.emailOn),
         invalidText: e == null ? void 0 : e.emailOn,
-        value: !0,
         name: "emailOn",
         onChange: () => Q((x) => !x)
       }
     ),
     w ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "emailOn", value: "false" }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ T(
       "div",
       {
-        className: b(`${o}__preview-set`, { [`${o}__preview-set--hidden`]: !w }),
+        className: f(`${o}__preview-set`, { [`${o}__preview-set--hidden`]: !w }),
         children: [
           /* @__PURE__ */ t(
             u,
@@ -247,7 +245,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
               defaultValue: C,
               labelText: S,
               size: "sm",
-              invalid: e == null ? void 0 : e.address2,
+              invalid: !!(e != null && e.address2),
               invalidText: e == null ? void 0 : e.address2,
               hidden: !w
             }
@@ -260,7 +258,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
               defaultValue: _,
               labelText: k,
               size: "sm",
-              invalid: e == null ? void 0 : e.address3,
+              invalid: !!(e != null && e.address3),
               invalidText: e == null ? void 0 : e.address3,
               hidden: !w
             }

package/dist/scss/componentStyles.scss

@@ -40,6 +40,11 @@
 @use 'components/Tags/tags';
 @use 'components/Countdown/countdown';
 @use 'components/Countdown/duration';
+@use 'components/Detail/detail';
+@use 'components/PinchZoom/pinchZoom';
+@use 'components/Tabs/tabs';
+@use 'components/SeldonImage/seldonImage';
+@use 'components/Filter/filter';
 
 // Patterns
 @use 'patterns/HeroBanner/heroBanner';
@@ -49,14 +54,11 @@
 @use 'patterns/Subscribe/subscribe';
 @use 'patterns/Social/social';
 @use 'patterns/SaleHeaderBanner/saleHeaderBanner';
+@use 'patterns/ObjectTile/objectTile';
+@use 'patterns/BidSnapshot/bidSnapshot';
+@use 'patterns/FilterMenu/filterMenu';
+@use 'patterns/DetailList/detailList';
 
 // Site Furniture
 @use 'site-furniture/Header/header';
 @use 'site-furniture/Footer/footer';
-@use 'components/Detail/detail';
-@use 'patterns/DetailList/detailList';
-@use 'components/PinchZoom/pinchZoom';
-@use 'components/Tabs/tabs';
-@use 'components/SeldonImage/seldonImage';
-@use 'patterns/ObjectTile/objectTile';
-@use 'patterns/BidSnapshot/bidSnapshot';

package/dist/scss/components/Filter/_filter.scss

@@ -0,0 +1,112 @@
+@use '../../allPartials' as *;
+
+$default-transition-duration: 0.3s;
+$default-easing: ease-in-out;
+$chevron-scale: 0.8;
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+.#{$px}-filter {
+  &-header {
+    margin-bottom: $spacing-md;
+
+    legend {
+      padding-inline: 0; // needed for default browser styles
+    }
+
+    &__back {
+      @include text($body2); // workaround where the tertiary button text is not scaling at different breakpoints
+
+      margin-top: $spacing-sm;
+    }
+
+    &__chevron {
+      transform: rotateY(180deg) scale($chevron-scale);
+    }
+  }
+
+  &__chevron {
+    transform: scale($chevron-scale);
+  }
+
+  &__fieldset {
+    border: 0;
+    margin: 0 3px 0 0; // save room for input borders
+    padding: 0;
+  }
+
+  &__filters {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+    padding-bottom: $spacing-sm;
+
+    .#{$px}-input {
+      align-items: center;
+      height: unset;
+
+      &__label {
+        @include text($body2);
+
+        color: inherit;
+        margin-bottom: 0;
+      }
+
+      &__input {
+        align-self: center;
+        height: $body-line-height-size3;
+        margin-bottom: 0;
+        width: $body-line-height-size3;
+      }
+
+      &__validation {
+        display: none;
+      }
+    }
+  }
+
+  &__view-all {
+    @include text($body2); // workaround where the tertiary button text is not scaling at different breakpoints
+  }
+
+  &.is-opening {
+    animation: slide-in $default-transition-duration $default-easing forwards;
+  }
+
+  &.is-closing {
+    animation: slide-out $default-transition-duration $default-easing forwards;
+  }
+}
+
+.#{$px}-filter-input {
+  &__input {
+    &__wrapper {
+      display: flex;
+      flex-direction: row;
+      height: 40px;
+      justify-content: space-between;
+    }
+  }
+}

package/dist/scss/components/Input/_input.scss

@@ -40,7 +40,7 @@ $lg: #{$px}-input--lg;
       font-variation-settings: 'wght' 400;
     }
 
-    &:focus-within {
+    &:focus-visible {
       outline: 1px solid $pure-black;
     }
   }

package/dist/scss/patterns/FilterMenu/_filterMenu.scss

@@ -0,0 +1,15 @@
+@use '../../allPartials' as *;
+
+.#{$px}-filter-menu {
+  overflow-y: scroll;
+  width: 100%;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  .#{$px}-filter:not([hidden]) + .#{$px}-filter {
+    border-top: 1px solid $light-gray;
+    margin-top: $spacing-sm;
+    padding-top: $spacing-md;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.96.1",
+  "version": "1.97.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -115,6 +115,7 @@
     "stylelint-order": "^6.0.4",
     "stylelint-scss": "^6.4.1",
     "ts-node": "^10.9.2",
+    "type-fest": "^4.27.0",
     "typescript": "^5.5.4",
     "vite": "^5.4.6",
     "vite-plugin-dts": "^4.2.4",