@phillips/seldon 1.22.2 → 1.23.0

package/dist/components/Link/Link.js

@@ -1,30 +1,32 @@
-import { jsx as k } from "react/jsx-runtime";
-import c from "../../node_modules/classnames/index.js";
-import { px as p } from "../../utils/index.js";
-import { getLinkVariantClassName as f, isLinkExternal as x, LinkVariants as d } from "./utils.js";
-const V = ({
-  children: s,
+import { jsx as n } from "react/jsx-runtime";
+import f from "../../node_modules/classnames/index.js";
+import { px as x } from "../../utils/index.js";
+import { getLinkVariantClassName as d, isLinkExternal as L, LinkVariants as s } from "./utils.js";
+import { TextVariants as o } from "../Text/types.js";
+import N from "../Text/Text.js";
+const j = ({
+  children: i,
   id: a,
-  className: r,
+  className: m,
   element: t = "a",
-  variant: e = d.standalone,
-  href: n,
-  ...o
+  variant: r = s.standalone,
+  href: e,
+  ...l
 }) => {
-  const i = c(`${p}-link`, f(e), r), l = a ? `link-${a}` : "link", m = x(n);
-  return /* @__PURE__ */ k(
+  const c = f(`${x}-link`, d(r), m), p = a ? `link-${a}` : "link", k = L(e);
+  return /* @__PURE__ */ n(
     t,
     {
-      ...o,
-      href: n,
-      "data-testid": l,
+      ...l,
+      href: e,
+      "data-testid": p,
       id: a,
-      className: i,
-      ...m && t === "a" ? { rel: "noopener noreferrer", target: "_blank" } : {},
-      children: s
+      className: c,
+      ...k && t === "a" ? { rel: "noopener noreferrer", target: "_blank" } : {},
+      children: /* @__PURE__ */ n(N, { variant: r === s.email ? o.email : o.ctaSm, children: i })
     }
   );
 };
 export {
-  V as default
+  j as default
 };

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

@@ -4,7 +4,7 @@ export declare enum TextVariants {
     display2 = "display2",
     display3 = "display3",
     display4 = "display4",
-    heading1 = "heading1",
+    blockquote = "blockquote",
     heading2 = "heading2",
     heading3 = "heading3",
     heading4 = "heading4",
@@ -16,5 +16,5 @@ export declare enum TextVariants {
     ctaSm = "ctaSm",
     email = "email",
     label = "label",
-    textBadge = "textBadge"
+    badge = "badge"
 }

package/dist/components/Text/types.js

@@ -1,4 +1,4 @@
-var l = /* @__PURE__ */ ((d) => (d.display0 = "display0", d.display1 = "display1", d.display2 = "display2", d.display3 = "display3", d.display4 = "display4", d.heading1 = "heading1", d.heading2 = "heading2", d.heading3 = "heading3", d.heading4 = "heading4", d.body1 = "body1", d.body2 = "body2", d.body3 = "body3", d.button = "button", d.ctaLg = "ctaLg", d.ctaSm = "ctaSm", d.email = "email", d.label = "label", d.textBadge = "textBadge", d))(l || {});
+var l = /* @__PURE__ */ ((d) => (d.display0 = "display0", d.display1 = "display1", d.display2 = "display2", d.display3 = "display3", d.display4 = "display4", d.blockquote = "blockquote", d.heading2 = "heading2", d.heading3 = "heading3", d.heading4 = "heading4", d.body1 = "body1", d.body2 = "body2", d.body3 = "body3", d.button = "button", d.ctaLg = "ctaLg", d.ctaSm = "ctaSm", d.email = "email", d.label = "label", d.badge = "badge", d))(l || {});
 export {
   l as TextVariants
 };

package/dist/components/Text/utils.js

@@ -1,10 +1,10 @@
-import { px as a } from "../../utils/index.js";
-import { TextVariants as r } from "./types.js";
-const c = (e = r.body1) => {
-  const t = e.replace("labelText", "label-text").replace("textBadge", "text-badge").replace("ctaSm", "cta-sm").replace("ctaLg", "cta-lg");
-  return `${a}-text--${t.charAt(0).toLowerCase() + t.slice(1)}`;
-}, s = (e = r.body1) => e.includes("body") ? "p" : e === r.label ? "label" : e.includes("heading") ? `h${isNaN(parseInt(e.slice(-1))) ? 3 : parseInt(e.slice(-1))}` : "span";
+import { px as s } from "../../utils/index.js";
+import { TextVariants as t } from "./types.js";
+const n = (e = t.body1) => {
+  const r = e.replace("ctaSm", "cta-sm").replace("ctaLg", "cta-lg");
+  return `${s}-text--${r.charAt(0).toLowerCase() + r.slice(1)}`;
+}, c = (e = t.body1) => [t.display0, t.display1].includes(e) ? "h1" : [t.display2, t.display3, t.display4].includes(e) ? "h3" : e === t.blockquote ? "blockquote" : e.includes("body") ? "p" : e === t.label ? "label" : e.includes("heading") ? `h${isNaN(parseInt(e.slice(-1))) ? 3 : parseInt(e.slice(-1))}` : "span";
 export {
-  s as determineDefaultTextElement,
-  c as determineTextClassName
+  c as determineDefaultTextElement,
+  n as determineTextClassName
 };

package/dist/scss/_type.scss

@@ -63,8 +63,8 @@
     line-height: 1.25;
   }
 
-  @if $label == 'text-badge' {
-    font-size: $text-badge-label-size;
+  @if $label == 'badge' {
+    font-size: $badge-label-size;
     font-weight: 500;
     letter-spacing: 0.1875rem;
     line-height: 1.25;
@@ -94,8 +94,8 @@
     @include labelText($label);
   }
 
-  @if $token == 'text-badge' {
-    @include labelText($text-badge);
+  @if $token == 'badge' {
+    @include labelText($badge);
   }
 
   // Displays
@@ -120,8 +120,8 @@
   }
 
   // Headings
-  @if $token == 'heading1' {
-    @include hText($heading-size1);
+  @if $token == 'blockquote' {
+    @include hText($heading-size1, $color: $primary-black, $transform-style: initial);
   }
 
   @if $token == 'heading2' {

package/dist/scss/_utils.scss

@@ -43,11 +43,11 @@
 @mixin gridMargins {
   margin: 0 $spacing-md;
 
-  @media (min-width: $breakpoint3) {
+  @media (min-width: $breakpoint-lg) {
     margin: 0 $spacing-lg;
   }
 
-  @media (min-width: $breakpoint4) {
+  @media (min-width: $breakpoint-xl) {
     margin: 0 $spacing-xl;
   }
 }
@@ -67,11 +67,11 @@
   gap: $spacing-md;
   grid-template-columns: repeat(2, 1fr);
 
-  @media (min-width: $breakpoint2) {
+  @media (min-width: $breakpoint-md) {
     grid-template-columns: repeat(4, 1fr);
   }
 
-  @media (min-width: $breakpoint3) {
+  @media (min-width: $breakpoint-lg) {
     grid-template-columns: repeat(12, 1fr);
   }
 
@@ -81,47 +81,47 @@
 }
 
 @mixin media($breakpoint, $type: 'min') {
-  @if $breakpoint == $breakpoint-sm {
-    // $breakpoint2: 961px;
+  @if $breakpoint == $size-sm {
+    // $breakpoint-md: 961px;
     @if $type == 'min' {
-      @media (min-width: $breakpoint2) {
+      @media (min-width: $breakpoint-md) {
         @content;
       }
     }
 
     @if $type == 'max' {
-      @media (max-width: $breakpoint2) {
+      @media (max-width: $breakpoint-md) {
         @content;
       }
     }
   }
 
-  @if $breakpoint == $breakpoint-md {
-    // $breakpoint3: 1401px;
+  @if $breakpoint == $size-md {
+    // $breakpoint-lg: 1401px;
 
     @if $type == 'min' {
-      @media (min-width: $breakpoint3) {
+      @media (min-width: $breakpoint-lg) {
         @content;
       }
     }
 
     @if type == 'max' {
-      @media (max-width: $breakpoint3) {
+      @media (max-width: $breakpoint-lg) {
         @content;
       }
     }
   }
 
-  @if $breakpoint == $breakpoint-lg {
-    // $breakpoint4: 1801px;
+  @if $breakpoint == $size-lg {
+    // $breakpoint-xl: 1801px;
     @if type == 'min' {
-      @media (min-width: $breakpoint4) {
+      @media (min-width: $breakpoint-xl) {
         @content;
       }
     }
 
     @if type == 'max' {
-      @media (max-width: $breakpoint4) {
+      @media (max-width: $breakpoint-xl) {
         @content;
       }
     }

package/dist/scss/_vars.scss

@@ -73,21 +73,21 @@ $cta-sm: 'cta-sm';
 $cta-lg: 'cta-lg';
 $email: 'email';
 $label: 'label';
-$text-badge: 'text-badge';
+$badge: 'badge';
 $display0: 'display0';
 $display1: 'display1';
 $display2: 'display2';
 $display3: 'display3';
 $display4: 'display4';
-$heading1: 'heading1';
+$blockquote: 'blockquote';
 $heading2: 'heading2';
 $heading3: 'heading3';
 $heading4: 'heading4';
 $body1: 'body1';
 $body2: 'body2';
 $body3: 'body3';
-$text-tokens: $button, $cta-sm, $cta-lg, $email, $label, $text-badge, $display0, $display1, $display2, $display3,
-  $display4, $heading1, $heading2, $heading3, $heading4, $body1, $body2, $body3;
+$text-tokens: $button, $cta-sm, $cta-lg, $email, $label, $badge, $display0, $display1, $display2, $display3, $display4,
+  $blockquote, $heading2, $heading3, $heading4, $body1, $body2, $body3;
 
 ////////////////////////
 /// FONT SIZE TOKENS:
@@ -158,7 +158,7 @@ $cta-sm-label-size: var(--label-size2);
 $email-label-size: var(--label-size2);
 $cta-lg-label-size: var(--label-size1);
 $text-label-size: var(--label-size3);
-$text-badge-label-size: var(--label-size3);
+$badge-label-size: var(--label-size3);
 
 ////////////////////////
 /// SPACING TOKENS:
@@ -216,24 +216,22 @@ $margin-lg: var(--spacing-lg);
 $margin-xl: var(--spacing-xl);
 
 ////////////////////////
-/// Breakpoint TOKENS:
+/// Breakpoint TOKENS that map to minimum pixels
 ///////////////////////
-
-$breakpoint2: 961px;
-$breakpoint3: 1401px;
-$breakpoint4: 1801px;
+$breakpoint-sm: 461px;
+$breakpoint-md: 961px;
+$breakpoint-lg: 1401px;
+$breakpoint-xl: 1801px;
 
 ////////////////////////
 /// max-site-width TOKEN:
 ///////////////////////
 $max-site-width: 1560px;
 
-////////////////////////////
-/// Media breakpoint tokens:
-///////////////////////////
-
-$breakpoint-xs: 'xs';
-$breakpoint-sm: 'sm';
-$breakpoint-md: 'md';
-$breakpoint-lg: 'lg';
-$breakpoint-xl: 'xl';
+////////////////////////
+/// Our tokens usually support at least 4 sizes.
+///////////////////////
+$size-sm: 'sm';
+$size-md: 'md';
+$size-lg: 'lg';
+$size-xl: 'xl';

package/dist/scss/components/Footer/_footer.scss

@@ -18,11 +18,11 @@
     padding: $spacing-md $spacing-md $spacing-sm;
     text-align: right;
 
-    @include media($breakpoint-md) {
+    @include media($size-md) {
       padding: $spacing-md $spacing-lg $spacing-sm;
     }
 
-    @include media($breakpoint-lg) {
+    @include media($size-lg) {
       padding: $spacing-md $spacing-xl $spacing-sm;
     }
 
@@ -50,17 +50,17 @@
     flex-direction: column;
     padding: $spacing-lg $spacing-md 0;
 
-    @include media($breakpoint-sm) {
+    @include media($size-sm) {
       align-items: flex-start;
       flex-direction: row;
       justify-content: space-between;
     }
 
-    @include media($breakpoint-md) {
+    @include media($size-md) {
       padding: 3.75rem $spacing-lg;
     }
 
-    @include media($breakpoint-lg) {
+    @include media($size-lg) {
       padding: 3.75rem $spacing-xl;
     }
   }
@@ -68,7 +68,7 @@
   &__content-split-panel__left {
     margin-bottom: $spacing-md;
 
-    @include media($breakpoint-sm) {
+    @include media($size-sm) {
       margin-bottom: 0;
     }
   }
@@ -76,7 +76,7 @@
   &__content-split-panel__right {
     display: flex;
 
-    @include media($breakpoint-sm) {
+    @include media($size-sm) {
       justify-content: flex-end;
     }
   }

package/dist/scss/components/GridItem/_gridItem.scss

@@ -26,7 +26,7 @@
     }
   }
 
-  @include media($breakpoint-sm) {
+  @include media($size-sm) {
     @for $i from 1 through 4 {
       &--span-sm-#{$i} {
         @include gridItemColumnSpan($i, 4);
@@ -34,7 +34,7 @@
     }
   }
 
-  @include media($breakpoint-md) {
+  @include media($size-md) {
     @for $i from 1 through 12 {
       &--span-md-#{$i} {
         @include gridItemColumnSpan($i, 12);
@@ -42,7 +42,7 @@
     }
   }
 
-  @include media($breakpoint-lg) {
+  @include media($size-lg) {
     @for $i from 1 through 12 {
       &--span-lg-#{$i} {
         @include gridItemColumnSpan($i, 12);

package/dist/scss/components/HeroBanner/_heroBanner.scss

@@ -14,7 +14,7 @@
   padding: 1rem;
   width: 100%;
 
-  @media (max-width: 28.8125rem) {
+  @media (max-width: $breakpoint-sm) {
     align-items: center;
     align-self: stretch;
     background: $pure-black;
@@ -71,11 +71,11 @@
     font-size: 0.75rem;
     gap: 1.875rem;
 
-    @media (min-width: 28.8125rem) {
+    @media (min-width: $breakpoint-sm) {
       font-size: 0.875rem;
     }
 
-    @media (max-width: 28.8125rem) {
+    @media (max-width: $breakpoint-sm) {
       align-items: center;
       flex-direction: column;
       gap: 1rem;
@@ -91,7 +91,7 @@
     margin: 1.875rem 0;
     text-align: center;
 
-    @media (min-width: 28.8125rem) {
+    @media (min-width: $breakpoint-sm) {
       font-size: 2.375rem;
     }
 

package/dist/scss/components/Link/_link.scss

@@ -1,8 +1,6 @@
 @import '../../type';
 
 .#{$px}-link {
-  @include text($cta-sm);
-
   color: $cta-blue;
   text-decoration: none;
   white-space: nowrap;
@@ -27,8 +25,4 @@
   &--list {
     color: $soft-black;
   }
-
-  &--email {
-    @include text($email);
-  }
 }

package/dist/scss/components/LinkList/_linkList.scss

@@ -5,7 +5,7 @@
     // mobile first
     grid-column: span 2;
 
-    @include media($breakpoint-md) {
+    @include media($size-md) {
       grid-column: span 4;
     }
   }

package/dist/scss/components/Social/_social.scss

@@ -7,7 +7,7 @@
   display: inline-flex;
   flex-direction: column;
 
-  @include media($breakpoint-sm) {
+  @include media($size-sm) {
     align-items: flex-end;
   }
 
@@ -25,7 +25,7 @@
     margin: 0 0 $spacing-md;
     padding: 0;
 
-    @include media($breakpoint-sm) {
+    @include media($size-sm) {
       gap: 0 1rem;
     }
 

package/dist/scss/components/SplitPanel/_splitPanel.scss

@@ -11,7 +11,7 @@
     flex: 1 1 0px;
   }
 
-  @include media($breakpoint-sm) {
+  @include media($size-sm) {
     align-items: stretch;
     flex-direction: row;
 

package/dist/scss/components/Subscribe/_subscribe.scss

@@ -19,7 +19,7 @@
     text-align: center;
   }
 
-  @include media($breakpoint-sm) {
+  @include media($size-sm) {
     &__title,
     &__blurb {
       text-align: left;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.22.2",
+  "version": "1.23.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -49,7 +49,7 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^10.0.5",
-    "@storybook/addon-essentials": "^8.1.4",
+    "@storybook/addon-essentials": "^8.1.5",
     "@storybook/addon-interactions": "^8.1.4",
     "@storybook/addon-links": "^8.1.4",
     "@storybook/addon-mdx-gfm": "^8.1.5",
@@ -73,14 +73,14 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
-    "prettier": "3.2.5",
+    "prettier": "3.3.0",
     "react": "^18.3.1",
     "react-docgen-typescript": "^2.2.2",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.7",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "sass": "^1.77.3",
+    "sass": "^1.77.4",
     "semantic-release": "^23.1.1",
     "storybook": "^8.1.4",
     "stylelint": "^16.6.1",