@phillips/seldon 1.143.2 → 1.145.0

package/dist/scss/_vars.scss

@@ -19,6 +19,7 @@ $soft-black-2: #535050;
 $keyline-gray: #949494;
 $medium-gray: #c3bebb;
 $soft-gray: #fafafa;
+$pale-gray: #f4f4f4;
 $light-gray: #eceae7;
 $off-white: #f4f2f1;
 
@@ -150,6 +151,7 @@ $breakpoint-xl: 1801px;
   --label-size1: 1rem;
   --label-size2: 0.75rem;
   --label-size3: 0.56rem;
+  --label-size4: 0.56rem;
   --link-label-size: 0.75rem;
   --link-label-line-height: 0.75rem;
   --button-label-size: 0.75rem;
@@ -194,6 +196,7 @@ $breakpoint-xl: 1801px;
     --label-size1: 1.25rem;
     --label-size2: 1rem;
     --label-size3: 0.75rem;
+    --label-size4: 0.75rem;
     --link-label-size: 1rem;
     --link-label-line-height: 1rem;
     --button-label-size: 1rem;

package/dist/scss/_vars.scss.js

@@ -19,6 +19,7 @@ $soft-black-2: #535050;
 $keyline-gray: #949494;
 $medium-gray: #c3bebb;
 $soft-gray: #fafafa;
+$pale-gray: #f4f4f4;
 $light-gray: #eceae7;
 $off-white: #f4f2f1;
 
@@ -150,6 +151,7 @@ $breakpoint-xl: 1801px;
   --label-size1: 1rem;
   --label-size2: 0.75rem;
   --label-size3: 0.56rem;
+  --label-size4: 0.56rem;
   --link-label-size: 0.75rem;
   --link-label-line-height: 0.75rem;
   --button-label-size: 0.75rem;
@@ -194,6 +196,7 @@ $breakpoint-xl: 1801px;
     --label-size1: 1.25rem;
     --label-size2: 1rem;
     --label-size3: 0.75rem;
+    --label-size4: 0.75rem;
     --link-label-size: 1rem;
     --link-label-line-height: 1rem;
     --button-label-size: 1rem;

package/dist/scss/componentStyles.scss

@@ -39,6 +39,7 @@
 @use 'components/ContentPeek/contentPeek';
 @use 'components/PageContentWrapper/pageContentWrapper';
 @use 'components/Carousel/carousel';
+@use 'components/ComboBox/combobox';
 @use 'components/Tags/tags';
 @use 'components/Countdown/countdown';
 @use 'components/Countdown/duration';
@@ -70,3 +71,4 @@
 @use 'components/Article/article';
 @use 'components/Divider/divider';
 @use 'components/TextArea/textArea';
+@use 'components/AddToCalendar/addToCalendar';

package/dist/scss/components/AddToCalendar/_addToCalendar.scss

@@ -0,0 +1,64 @@
+@use '../../allPartials' as *;
+
+.#{$px}-add-to-calendar {
+  svg {
+    height: 30px;
+    width: 30px;
+  }
+
+  &-icon-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+
+    &:focus-visible {
+      border-radius: 5px;
+      outline: 1px solid $medium-gray;
+    }
+  }
+
+  &-atcb-list {
+    background: #fff;
+    border: 1px solid#ECEAE7;
+    padding: $spacing-sm;
+  }
+
+  &-atcb-item {
+    margin-bottom: $spacing-xsm;
+  }
+
+  &-atcb-item-link {
+    @include text($body-size2);
+
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-variation-settings: 'wght' 400;
+    outline: none;
+    padding: 0;
+    text-decoration: none;
+
+    p {
+      margin-bottom: 0;
+    }
+
+    &:hover {
+      color: #000;
+      text-decoration: none;
+    }
+
+    &:focus-visible {
+      color: #000;
+      text-decoration: underline;
+      text-decoration-thickness: 1px;
+      text-underline-offset: $spacing-micro;
+    }
+
+    span {
+      @include text($body-size2);
+
+      font-variation-settings: 'wght' 400;
+      text-decoration: none;
+    }
+  }
+}

package/dist/scss/components/ComboBox/_combobox.scss

@@ -0,0 +1,149 @@
+@use '../../allPartials' as *;
+
+.#{$px}-combo-box {
+  position: relative;
+  width: 100%;
+
+  &__input {
+    accent-color: $soft-black;
+    border: 1px solid $keyline-gray;
+    border-radius: 0.1875rem;
+    margin-bottom: 0.25rem;
+    outline: none;
+    padding: $padding-xsm;
+    width: 100%;
+
+    @include text($string2);
+
+    &:hover {
+      border: 1px solid $primary-black;
+    }
+
+    &:focus {
+      outline: 1px solid $primary-black;
+    }
+  }
+
+  &__label {
+    @include text($string2);
+
+    color: $pure-black;
+    display: inline-block;
+    font-variation-settings: 'wght' 600;
+    margin-bottom: 0.5rem;
+    width: fit-content;
+    word-break: break-word;
+
+    &--hidden {
+      @include hidden;
+    }
+  }
+
+  &__input-wrapper {
+    position: relative;
+  }
+
+  &__close-button {
+    all: unset;
+    color: $text-color;
+    padding-bottom: 0.25rem;
+    position: absolute;
+    right: 2.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+    transition:
+      visibility 0.2s ease,
+      opacity 0.2s ease;
+    visibility: hidden;
+
+    &:hover {
+      visibility: visible;
+    }
+
+    &:focus {
+      visibility: visible;
+    }
+
+    .#{$px}-combo-box__input:hover + &,
+    .#{$px}-combo-box__input:focus + & {
+      visibility: visible;
+    }
+  }
+
+  &__dropdown-button {
+    all: unset;
+    color: $text-color;
+    cursor: pointer;
+    padding-bottom: 0.25rem;
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &__icon-button {
+    pointer-events: none;
+  }
+
+  &__icon {
+    align-items: center;
+    align-self: normal;
+    background-position: center;
+    border-radius: 50%;
+    display: flex;
+    height: 2rem;
+    justify-content: center;
+    transition: background 0.8s;
+    width: 2rem;
+
+    &:hover {
+      background: $light-gray radial-gradient(circle, transparent 1%, $light-gray 1%) center/15000%;
+      background-color: $light-gray;
+      cursor: pointer;
+    }
+
+    &:active {
+      background-color: $medium-gray;
+      background-size: 100%;
+      transition: background 0s;
+    }
+
+    &--flipped {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__content {
+    transform: translateY(1px);
+    width: var(--radix-popper-anchor-width);
+  }
+
+  &__group {
+    padding: $padding-xsm 0;
+  }
+
+  &__list {
+    max-height: 200px;
+    overflow: hidden;
+    overflow-y: auto;
+    position: relative;
+    transition: height 100ms ease;
+    width: 100%;
+  }
+
+  &__item {
+    background-color: $pale-gray;
+    padding: $padding-micro $padding-xsm;
+
+    @include text($string2);
+
+    &:hover {
+      background-color: $light-gray;
+      cursor: pointer;
+    }
+
+    &[data-selected='true'] {
+      background-color: $light-gray;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.143.2",
+  "version": "1.145.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -45,19 +45,24 @@
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.4",
-    "@radix-ui/react-popover": "^1.1.7",
+    "@radix-ui/react-dropdown-menu": "^2.1.14",
+    "@radix-ui/react-popover": "^1.1.11",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@types/dompurify": "^3.0.5",
     "change-case": "^5.4.4",
     "classnames": "^2.5.1",
+    "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
     "dompurify": "^3.2.4",
     "embla-carousel-class-names": "^8.5.1",
     "embla-carousel-react": "^8.5.1",
     "embla-carousel-wheel-gestures": "^8.0.1",
     "flatpickr": "^4.6.13",
     "html-react-parser": "^5.2.2",
+    "ics": "^3.8.1",
+    "libphonenumber-js": "^1.12.6",
     "react-intersection-observer": "^9.13.1",
     "react-modal": "^3.16.1",
     "react-remove-scroll": "^2.6.3",
@@ -110,6 +115,7 @@
     "eslint-plugin-react-refresh": "^0.4.13",
     "eslint-plugin-storybook": "^0.11.2",
     "husky": "^9.1.6",
+    "jsdom": "^26.1.0",
     "markdownlint-cli": "^0.41.0",
     "prettier": "3.3.3",
     "react": "^18.3.1",