@phillips/seldon 1.81.0 → 1.82.0

package/dist/assets/search.svg.js

@@ -1,5 +1,5 @@
 import * as e from "react";
-const a = (t) => /* @__PURE__ */ e.createElement("svg", { width: 18, height: 18, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "Search" }, /* @__PURE__ */ e.createElement("path", { id: "Vector", d: "M12.0209 10.9563H11.4603L11.2616 10.7647C12.1131 9.77122 12.5531 8.41582 12.3118 6.97527C11.9783 5.00249 10.3319 3.4271 8.34498 3.18583C5.34323 2.81682 2.81694 5.34311 3.18595 8.34486C3.42723 10.3318 5.00261 11.9782 6.97539 12.3117C8.41594 12.553 9.77134 12.113 10.7648 11.2614L10.9564 11.4601V12.0208L13.9724 15.0367C14.2633 15.3276 14.7388 15.3276 15.0297 15.0367C15.3207 14.7457 15.3207 14.2703 15.0297 13.9793L12.0209 10.9563ZM7.76308 10.9563C5.99609 10.9563 4.56973 9.52994 4.56973 7.76296C4.56973 5.99597 5.99609 4.56961 7.76308 4.56961C9.53006 4.56961 10.9564 5.99597 10.9564 7.76296C10.9564 9.52994 9.53006 10.9563 7.76308 10.9563Z", fill: "black" })));
+const t = (l) => /* @__PURE__ */ e.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.7601 17.618C22.5903 14.0843 22.3676 8.91176 19.0919 5.63604C15.5771 2.12132 9.87866 2.12132 6.36394 5.63604C2.84923 9.15076 2.84923 14.8492 6.36394 18.364C9.63965 21.6397 14.8122 21.8624 18.3459 19.0322L19.7989 20.4853C19.4085 20.8758 19.4085 21.509 19.799 21.8995L23.3345 25.435C24.1156 26.2161 25.3819 26.2161 26.1629 25.435C26.944 24.654 26.944 23.3876 26.1629 22.6066L22.6274 19.0711C22.2369 18.6805 21.6037 18.6805 21.2132 19.0711L19.7601 17.618ZM17.6777 16.9497C20.4113 14.2161 20.4113 9.78392 17.6777 7.05025C14.944 4.31658 10.5118 4.31658 7.77816 7.05025C5.04449 9.78392 5.04449 14.2161 7.77816 16.9497C10.5118 19.6834 14.944 19.6834 17.6777 16.9497Z", fill: "black" }));
 export {
-  a as default
+  t as default
 };

package/dist/patterns/HeroBanner/HeroBanner.d.ts

@@ -24,10 +24,6 @@ export interface HeroBannerProps extends HTMLAttributes<HTMLDivElement> {
      * What background image or color to use
      */
     background?: string;
-    /**
-     * What gradient to use
-     */
-    gradient?: string;
     /**
      * Unique id for component testing
      */
@@ -42,5 +38,5 @@ export interface HeroBannerProps extends HTMLAttributes<HTMLDivElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-herobanner--overview)
  */
-declare const HeroBanner: ({ prehead, date, headerText, subHeadText, association, background, gradient, className, ...props }: HeroBannerProps) => import("react/jsx-runtime").JSX.Element;
+declare const HeroBanner: ({ prehead, date, headerText, subHeadText, association, background, className, ...props }: HeroBannerProps) => import("react/jsx-runtime").JSX.Element;
 export default HeroBanner;

package/dist/patterns/HeroBanner/HeroBanner.js

@@ -1,35 +1,34 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
 import { getCommonProps as f } from "../../utils/index.js";
 import u from "../../node_modules/classnames/index.js";
-import { TextVariants as i } from "../../components/Text/types.js";
-import c from "../../components/Text/Text.js";
+import { TextVariants as c } from "../../components/Text/types.js";
+import i from "../../components/Text/Text.js";
 const w = ({
-  prehead: a,
-  date: e,
+  prehead: e,
+  date: a,
   headerText: t,
   subHeadText: l,
   association: s,
-  background: d,
-  gradient: p = "linear-gradient(rgba(0, 0, 0, 50%), rgba(0, 0, 0, 50%))",
-  className: h,
+  background: p,
+  className: d,
   ...o
 }) => {
-  const { className: n, ...g } = f(o, "HeroBanner");
-  return /* @__PURE__ */ r(
+  const { className: r, ...h } = f(o, "HeroBanner");
+  return /* @__PURE__ */ n(
     "header",
     {
-      ...g,
-      className: u(n, h),
-      style: { "--background": d, "--gradient": p },
+      ...h,
+      className: u(r, d),
+      style: { "--background": p },
       ...o,
-      children: /* @__PURE__ */ m("span", { className: `${n}__content-wrapper`, children: [
-        a || e ? /* @__PURE__ */ m("p", { className: `${n}__pre-head`, children: [
-          a ? /* @__PURE__ */ r("span", { children: a }) : null,
-          e ? /* @__PURE__ */ r("span", { children: e }) : null
+      children: /* @__PURE__ */ m("span", { className: `${r}__content-wrapper`, children: [
+        e || a ? /* @__PURE__ */ m("p", { className: `${r}__pre-head`, children: [
+          e ? /* @__PURE__ */ n("span", { children: e }) : null,
+          a ? /* @__PURE__ */ n("span", { children: a }) : null
         ] }) : null,
-        /* @__PURE__ */ r(c, { variant: i.snwHeadingHero1, children: t }),
-        l ? /* @__PURE__ */ r(c, { variant: i.snwHeadingHero2, children: l }) : null,
-        s ? /* @__PURE__ */ r("p", { className: `${n}__after-head`, children: s }) : null
+        /* @__PURE__ */ n(i, { variant: c.snwHeadingHero1, children: t }),
+        l ? /* @__PURE__ */ n(i, { variant: c.snwHeadingHero2, children: l }) : null,
+        s ? /* @__PURE__ */ n("p", { className: `${r}__after-head`, children: s }) : null
       ] })
     }
   );

package/dist/patterns/HeroBanner/HeroBanner.stories.d.ts

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 import { HeroBannerProps } from './HeroBanner';
 declare const meta: {
     title: string;
-    component: ({ prehead, date, headerText, subHeadText, association, background, gradient, className, ...props }: HeroBannerProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ prehead, date, headerText, subHeadText, association, background, className, ...props }: HeroBannerProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/scss/_vars.scss

@@ -196,12 +196,17 @@ $breakpoint-xl: 1801px;
     --badge-label-line-height: 1rem;
     --snw-header-link-size: 1rem;
     --snw-header-link-line-height: 1.5rem;
-    --snw-flyout-link-size: 1rem;
-    --snw-flyout-link-line-height: 1.875rem;
+    --snw-flyout-link-size: 0.875rem;
+    --snw-flyout-link-line-height: 1.75rem;
     --snw-heading-hero-size1: 2.375rem;
     --snw-heading-hero-line-height-size1: 2.875rem;
   }
 
+  @media (min-width: $breakpoint-lg) {
+    --snw-flyout-link-size: 0.875rem;
+    --snw-flyout-link-line-height: 1.75rem;
+  }
+
   @media (min-width: $breakpoint-xl) {
     --quote-size: 2rem;
     --quote-line-height: 2.5rem;
@@ -367,7 +372,7 @@ $margin-xxl: var(--spacing-xxl);
 ///////////////////////
 /* stylelint-disable-next-line no-duplicate-selectors */
 :root {
-  --header-height: 73px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
+  --header-height: 56px; // ideally we would calculate the size from the current text size plus spacing components so that it scales with the text size and spacing
   --search-size: 2.625rem; // This should be calculated from the scaling text and scaling spacing tokens instead of hardcoding in case they change
 
   @media (min-width: $breakpoint-md) {

package/dist/scss/patterns/HeroBanner/_heroBanner.scss

@@ -1,8 +1,13 @@
 @use '../../allPartials' as *;
 
+body:has(.seldon-header__toggle-btn--open) {
+  // targeting this button cause header itself has closed state only
+  overflow: hidden;
+}
+
 .#{$px}-hero-banner {
   align-items: center;
-  background: var(--gradient), var(--background);
+  background: var(--background);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -25,7 +30,7 @@
     padding: 1.875rem 0.9375rem;
 
     &::before {
-      background: var(--gradient), var(--background);
+      background: var(--background);
       background-position: center center;
       background-repeat: no-repeat;
       background-size: cover;

package/dist/scss/patterns/UserManagement/_userManagement.scss

@@ -50,8 +50,8 @@
   }
 
   &__account-icon {
-    height: 2rem;
-    width: 2rem;
+    height: 1.5rem;
+    width: 1.5rem;
 
     a {
       align-items: center;

package/dist/scss/site-furniture/Header/_header.scss

@@ -33,7 +33,7 @@
       height: 2px;
       position: relative;
       transition: background-color 0.25s ease 0.25s;
-      width: 1.5rem;
+      width: 1rem;
 
       &::before,
       &::after {
@@ -45,15 +45,15 @@
         position: absolute;
         top: 0;
         transition: transform 0.25s ease;
-        width: 1.5rem;
+        width: 1rem;
       }
 
       &::before {
-        transform: translateY(-8px);
+        transform: translateY(-6px);
       }
 
       &::after {
-        transform: translateY(8px);
+        transform: translateY(6px);
       }
     }
 
@@ -77,12 +77,17 @@
     padding-top: 6px; // small adjustment to center the logo
 
     svg {
-      height: 25.73px; // 25.73px is the height of the logo's container to make logo 20px
+      height: 20.58px; // 20.58px is the height of the logo's container to make logo 16px
       width: 100%;
     }
 
     @include isHeaderDesktop {
       padding-top: 0;
+
+      svg {
+        height: 25.73px; // 25.73px is the height of the logo's container to make logo 20px
+        width: 100%;
+      }
     }
   }
 
@@ -90,8 +95,12 @@
     align-items: center;
     display: flex;
     justify-content: space-between;
-    padding: $padding-sm $spacing-md;
+    padding: 3px $spacing-md;
     width: 100%;
+
+    @include isHeaderDesktop {
+      padding: $padding-sm $spacing-md;
+    }
   }
 
   &__nav {

package/package.json

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