@phillips/seldon 1.59.0 → 1.60.0

package/dist/scss/componentStyles.scss

@@ -35,6 +35,7 @@
 @use 'components/Pagination/pagination';
 @use 'components/ContentPeek/contentPeek';
 @use 'components/PageContentWrapper/pageContentWrapper';
+@use 'components/Carousel/carousel';
 
 // Patterns
 @use 'patterns/HeroBanner/heroBanner';

package/dist/scss/components/Carousel/_carousel.scss

@@ -0,0 +1,84 @@
+@use '../../allPartials' as *;
+
+.#{$px}-carousel {
+  position: relative;
+
+  &-content {
+    overflow: hidden;
+  }
+
+  &-content-inner {
+    display: flex;
+
+    @each $spacing-size in $spacing-sizes {
+      &--gap-#{$spacing-size} {
+        margin-left: calc(-1 * var(--spacing-#{$spacing-size}));
+      }
+    }
+  }
+
+  &-item {
+    flex: 0 0 100%;
+    min-width: 0;
+
+    @each $spacing-size in $spacing-sizes {
+      &--gap-#{$spacing-size} {
+        padding-left: var(--spacing-#{$spacing-size});
+      }
+    }
+  }
+
+  &-pagination {
+    align-items: center;
+    display: flex;
+    gap: 12px;
+    justify-content: center;
+    margin-top: 1rem;
+
+    button {
+      background: none;
+      border: none;
+      cursor: pointer;
+    }
+
+    &-on-content {
+      bottom: 16px;
+      left: 50%;
+      overflow: hidden;
+      position: absolute;
+      transform: translateX(-50%);
+    }
+
+    &-container {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+    }
+
+    &-container-inner {
+      display: flex;
+      gap: 12px;
+    }
+
+    &-dot-container {
+      align-items: center;
+      display: flex;
+      height: 8px;
+      justify-content: center;
+      padding: 0;
+      width: 8px;
+    }
+
+    &-dot {
+      border: 1px solid #adadad;
+      border-radius: 50%;
+      height: 100%;
+      width: 100%;
+
+      &-selected {
+        background-color: #525050;
+        border-color: #525050;
+      }
+    }
+  }
+}

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

@@ -7,8 +7,8 @@
     position: absolute;
   }
 
-  &:focus {
-    &:focus {
+  &:focus-visible {
+    &:focus-visible {
       outline: 0.5px solid $soft-black;
       outline-offset: -4.5px;
 

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

@@ -160,6 +160,7 @@ $lg: #{$px}-input--lg;
   width: fit-content;
 }
 .#{$px}-select-input .#{$px}-input__input {
+  background: transparent;
   width: fit-content;
 }
 

package/dist/scss/components/Modal/_modal.scss

@@ -25,5 +25,6 @@
     position: absolute;
     right: 0.4rem;
     top: 0.4rem;
+    z-index: 100;
   }
 }

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

@@ -4,7 +4,7 @@
   align-items: center;
   display: flex;
   flex-direction: row;
-  gap: $spacing-md;
+  gap: $spacing-sm;
 }
 
 .#{$px} {

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

@@ -4,7 +4,7 @@ import { px as r, defaultYear as m } from "../../utils/index.js";
 import f from "../../assets/PhillipsLogo.svg.js";
 import { TextVariants as c } from "../../components/Text/types.js";
 import d from "../../components/Text/Text.js";
-const $ = ({
+const N = ({
   children: a,
   className: i,
   copyright: s = `© ${m} Phillips Auctioneers, LLC`,
@@ -17,5 +17,5 @@ const $ = ({
   ] })
 ] });
 export {
-  $ as default
+  N as default
 };

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

@@ -18,8 +18,8 @@ const I = O(R), L = T(
     logoText: x = "Home Page",
     ...C
   }, y) => {
-    const E = s(r, p), m = s(r, g), [c, M] = h(!1), $ = s(r, f), b = P(r, [f, p, g]), [n, N] = h(!1), S = n ? v : _, H = function() {
-      N((t) => !t);
+    const E = s(r, p), m = s(r, g), [c, M] = h(!1), N = s(r, f), $ = P(r, [f, p, g]), [n, b] = h(!1), S = n ? v : _, H = function() {
+      b((t) => !t);
     };
     return /* @__PURE__ */ o("header", { ...C, className: d(`${e}-header`, u), ref: y, children: [
       /* @__PURE__ */ o("div", { className: `${e}-header__top-row`, children: [
@@ -53,7 +53,7 @@ const I = O(R), L = T(
           },
           children: [
             l.Children.map(
-              $,
+              N,
               (t) => l.isValidElement(t) ? l.cloneElement(t, {
                 children: [
                   ...l.Children.toArray(t.props.children),
@@ -61,7 +61,7 @@ const I = O(R), L = T(
                 ]
               }) : t
             ),
-            b
+            $
           ]
         }
       ) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.59.0",
+  "version": "1.60.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -49,6 +49,8 @@
     "change-case": "^5.4.4",
     "classnames": "^2.5.1",
     "dompurify": "^3.1.6",
+    "embla-carousel-react": "^8.3.0",
+    "embla-carousel-wheel-gestures": "^8.0.1",
     "flatpickr": "^4.6.13",
     "html-react-parser": "^5.1.12",
     "react-modal": "^3.16.1",