@phillips/seldon 1.79.3 → 1.80.0

package/dist/components/Text/types.d.ts

@@ -21,5 +21,7 @@ export declare enum TextVariants {
     link = "link",
     badge = "badge",
     snwFlyoutLink = "snwFlyoutLink",
-    snwHeaderLink = "snwHeaderLink"
+    snwHeaderLink = "snwHeaderLink",
+    snwHeadingHero1 = "snwHeadingHero1",
+    snwHeadingHero2 = "snwHeadingHero2"
 }

package/dist/components/Text/types.js

@@ -1,4 +1,4 @@
-var l = /* @__PURE__ */ ((d) => (d.blockquote = "blockquote", d.heading1 = "heading1", d.heading2 = "heading2", d.heading3 = "heading3", d.heading4 = "heading4", d.heading5 = "heading5", d.title1 = "title1", d.title2 = "title2", d.title3 = "title3", d.title4 = "title4", d.body1 = "body1", d.body2 = "body2", d.body3 = "body3", d.string1 = "string1", d.string2 = "string2", d.string3 = "string3", d.button = "button", d.email = "email", d.label = "label", d.link = "link", d.badge = "badge", d.snwFlyoutLink = "snwFlyoutLink", d.snwHeaderLink = "snwHeaderLink", d))(l || {});
+var g = /* @__PURE__ */ ((d) => (d.blockquote = "blockquote", d.heading1 = "heading1", d.heading2 = "heading2", d.heading3 = "heading3", d.heading4 = "heading4", d.heading5 = "heading5", d.title1 = "title1", d.title2 = "title2", d.title3 = "title3", d.title4 = "title4", d.body1 = "body1", d.body2 = "body2", d.body3 = "body3", d.string1 = "string1", d.string2 = "string2", d.string3 = "string3", d.button = "button", d.email = "email", d.label = "label", d.link = "link", d.badge = "badge", d.snwFlyoutLink = "snwFlyoutLink", d.snwHeaderLink = "snwHeaderLink", d.snwHeadingHero1 = "snwHeadingHero1", d.snwHeadingHero2 = "snwHeadingHero2", d))(g || {});
 export {
-  l as TextVariants
+  g as TextVariants
 };

package/dist/components/Text/utils.js

@@ -1,7 +1,10 @@
-import { px as r } from "../../utils/index.js";
+import { px as s } from "../../utils/index.js";
 import { TextVariants as t } from "./types.js";
-const o = (e = t.body1) => `${r}-text--${e.charAt(0).toLowerCase() + e.slice(1)}`, u = (e = t.body1) => e === t.blockquote ? "blockquote" : e.includes("body") ? "p" : e.includes("string") || e.includes("title") ? "span" : e === t.label ? "label" : e.includes("heading") ? `h${isNaN(parseInt(e.slice(-1))) ? 3 : parseInt(e.slice(-1))}` : "span";
+const i = (e = t.body1) => `${s}-text--${e.charAt(0).toLowerCase() + e.slice(1)}`, u = (e = t.body1) => {
+  const r = e.toLowerCase();
+  return e === t.blockquote ? "blockquote" : e.includes("body") ? "p" : e.includes("string") || e.includes("title") ? "span" : e === t.label ? "label" : r.includes("heading") ? `h${isNaN(parseInt(e.slice(-1))) ? 3 : parseInt(e.slice(-1))}` : "span";
+};
 export {
   u as determineDefaultTextElement,
-  o as determineTextClassName
+  i as determineTextClassName
 };

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

@@ -24,6 +24,10 @@ 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
      */
@@ -38,5 +42,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, className, ...props }: HeroBannerProps) => import("react/jsx-runtime").JSX.Element;
+declare const HeroBanner: ({ prehead, date, headerText, subHeadText, association, background, gradient, className, ...props }: HeroBannerProps) => import("react/jsx-runtime").JSX.Element;
 export default HeroBanner;

package/dist/patterns/HeroBanner/HeroBanner.js

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

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, className, ...props }: HeroBannerProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ prehead, date, headerText, subHeadText, association, background, gradient, className, ...props }: HeroBannerProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/scss/_type.scss

@@ -223,4 +223,16 @@
     line-height: $snw-flyout-link-line-height;
     text-transform: capitalize;
   }
+
+  @if $token == 'snwHeadingHero1' {
+    @include hText($snw-heading-hero-size1, $line-height: $snw-heading-hero-line-height1, $transform-style: uppercase);
+
+    text-align: center;
+  }
+
+  @if $token == 'snwHeadingHero2' {
+    @include hText($snw-heading-hero-size2, $line-height: $snw-heading-hero-line-height2, $transform-style: uppercase);
+
+    text-align: center;
+  }
 }

package/dist/scss/_vars.scss

@@ -98,9 +98,11 @@ $string2: 'string2';
 $string3: 'string3';
 $snwHeaderLink: 'snwHeaderLink';
 $snwFlyoutLink: 'snwFlyoutLink';
+$snwHeadingHero1: 'snwHeadingHero1';
+$snwHeadingHero2: 'snwHeadingHero2';
 $text-tokens: $button, $link, $email, $label, $badge, $blockquote, $heading1, $heading2, $heading3, $heading4, $heading5,
   $title1, $title2, $title3, $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink,
-  $snwHeaderLink;
+  $snwHeaderLink, $snwHeadingHero1, $snwHeadingHero2;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts
@@ -153,6 +155,10 @@ $breakpoint-xl: 1801px;
   --snw-header-link-line-height: 1.5rem;
   --snw-flyout-link-size: 1rem;
   --snw-flyout-link-line-height: 1.75rem;
+  --snw-heading-hero-size1: 2rem;
+  --snw-heading-hero-line-height-size1: 2.375rem;
+  --snw-heading-hero-size2: 1.625rem;
+  --snw-heading-hero-line-height-size2: 1.9375rem;
 
   @media (min-width: $breakpoint-md) {
     --quote-size: 1.75rem;
@@ -192,6 +198,8 @@ $breakpoint-xl: 1801px;
     --snw-header-link-line-height: 1.5rem;
     --snw-flyout-link-size: 1rem;
     --snw-flyout-link-line-height: 1.875rem;
+    --snw-heading-hero-size1: 2.375rem;
+    --snw-heading-hero-line-height-size1: 2.875rem;
   }
 
   @media (min-width: $breakpoint-xl) {
@@ -283,10 +291,18 @@ $snw-header-link-size: var(--snw-header-link-size);
 $snw-header-link-line-height: var(--snw-header-link-line-height);
 $snw-flyout-link-size: var(--snw-flyout-link-size);
 $snw-flyout-link-line-height: var(--snw-flyout-link-line-height);
+$snw-heading-hero-size1: var(--snw-heading-hero-size1);
+$snw-heading-hero-line-height1: var(--snw-heading-hero-line-height-size1);
+$snw-heading-hero-size2: var(--snw-heading-hero-size2);
+$snw-heading-hero-line-height2: var(--snw-heading-hero-line-height-size2);
 
 ////////////////////////
 /// SPACING TOKENS:
 ///////////////////////
+
+// SNOWFLAKES
+$snowflake-menu-padding: 1.25rem;
+
 /* stylelint-disable-next-line no-duplicate-selectors */
 :root {
   --spacing-micro: 0.25rem;

package/dist/scss/components/Accordion/_accordion.scss

@@ -9,7 +9,7 @@
   width: 100%;
 
   &--large {
-    padding: $spacing-md 0;
+    padding: $snowflake-menu-padding 0;
   }
 
   svg {
@@ -103,7 +103,7 @@
   padding: $spacing-sm 0;
 
   &--large {
-    padding: $spacing-md 0;
+    padding: $snowflake-menu-padding 0;
   }
 
   &--hoverable {

package/dist/scss/components/Navigation/NavigationList/_navigationList.scss

@@ -70,7 +70,7 @@ $top-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     .#{$px}-link--snwHeaderLink {
       border-bottom: 1px solid $light-gray;
       flex-wrap: wrap;
-      padding: $spacing-md 0;
+      padding: $snowflake-menu-padding 0;
     }
     .#{$px}-link--snwFlyoutLink {
       padding: 0;

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

@@ -2,7 +2,7 @@
 
 .#{$px}-hero-banner {
   align-items: center;
-  background: linear-gradient(rgba(0, 0, 0, 60%), rgba(0, 0, 0, 60%)), var(--background);
+  background: var(--gradient), var(--background);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
@@ -11,19 +11,21 @@
   justify-content: center;
   min-height: 25rem;
   padding: 1rem;
+  text-transform: uppercase;
   width: 100%;
 
   @include media($size-md, $type: 'max') {
     align-items: center;
     align-self: stretch;
     background: transparent;
+    background-color: $pure-black;
     flex-direction: column;
     gap: 1.875rem;
     min-height: unset;
-    padding: 1.875rem 0 0;
+    padding: 1.875rem 0.9375rem;
 
-    &::after {
-      background: var(--background);
+    &::before {
+      background: var(--gradient), var(--background);
       background-position: center center;
       background-repeat: no-repeat;
       background-size: cover;
@@ -38,19 +40,11 @@
     margin: 0;
   }
 
-  p {
-    margin: 1.875rem 0;
-  }
-
   h1,
   h2,
   p {
     color: $pure-white;
     text-align: center;
-
-    @include media($size-md, $type: 'max') {
-      color: $pure-black;
-    }
   }
 
   p {
@@ -72,6 +66,7 @@
     display: flex;
     font-size: 0.75rem;
     gap: 1.875rem;
+    padding-bottom: 1.875rem;
 
     @include media($size-md) {
       font-size: 0.875rem;
@@ -83,4 +78,8 @@
       gap: 1rem;
     }
   }
+
+  & .#{$px}-hero-banner__after-head {
+    padding-top: 1.875rem;
+  }
 }

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

@@ -77,17 +77,12 @@
     padding-top: 6px; // small adjustment to center the logo
 
     svg {
-      height: 24px;
+      height: 25.73px; // 25.73px is the height of the logo's container to make logo 20px
       width: 100%;
     }
 
     @include isHeaderDesktop {
       padding-top: 0;
-
-      svg {
-        height: 28px;
-        width: 100%;
-      }
     }
   }
 

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

@@ -1,7 +1,7 @@
 import { jsxs as o, jsx as a } from "react/jsx-runtime";
 import l, { createContext as T, forwardRef as P, useState as h } from "react";
 import d from "../../node_modules/classnames/index.js";
-import { findChildrenOfType as s, findChildrenExcludingTypes as j, px as e } from "../../utils/index.js";
+import { findChildrenOfType as i, findChildrenExcludingTypes as j, px as e } from "../../utils/index.js";
 import R from "../../assets/PhillipsLogo.svg.js";
 import p from "../../patterns/UserManagement/UserManagement.js";
 import g from "../../patterns/LanguageSelector/LanguageSelector.js";
@@ -10,7 +10,7 @@ import { defaultHeaderContext as w } from "./utils.js";
 import { SSRMediaQuery as I } from "../../providers/SeldonProvider/utils.js";
 const L = T(w), k = P(
   ({
-    logo: i = /* @__PURE__ */ a(R, {}),
+    logo: s = /* @__PURE__ */ a(R, {}),
     logoHref: u = "/",
     className: _,
     children: r,
@@ -19,7 +19,7 @@ const L = T(w), k = P(
     logoText: C = "Home Page",
     ...y
   }, E) => {
-    const M = s(r, p), m = s(r, g), [c, $] = h(!1), b = s(r, f), N = j(r, [f, p, g]), [n, S] = h(!1), H = n ? x : v, O = function() {
+    const M = i(r, p), m = i(r, g), [c, $] = h(!1), b = i(r, f), N = j(r, [f, p, g]), [n, S] = h(!1), H = n ? x : v, O = function() {
       S((t) => !t);
     };
     return /* @__PURE__ */ o("header", { ...y, className: d(`${e}-header`, _), ref: E, children: [
@@ -41,7 +41,7 @@ const L = T(w), k = P(
             ]
           }
         ),
-        /* @__PURE__ */ a("h1", { "data-testid": "header-logo", className: `${e}-header__logo`, children: /* @__PURE__ */ a("a", { href: u, "aria-label": C, children: typeof i == "object" ? i : /* @__PURE__ */ a("img", { alt: "Phillips", "data-testid": "header-logo-img", src: i, height: "14" }) }) }),
+        /* @__PURE__ */ a("h1", { "data-testid": "header-logo", className: `${e}-header__logo`, children: /* @__PURE__ */ a("a", { href: u, "aria-label": C, children: typeof s == "object" ? s : /* @__PURE__ */ a("img", { alt: "Phillips", "data-testid": "header-logo-img", src: s }) }) }),
         M
       ] }),
       /* @__PURE__ */ a("div", { className: d(`${e}-header__nav`, { [`${e}-header__nav--closed`]: !n }), children: /* @__PURE__ */ o(

package/package.json

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