@phillips/seldon 1.179.0 → 1.181.0

package/dist/patterns/UserManagement/UserManagement.js

@@ -1,16 +1,16 @@
 import { jsx as o, Fragment as x, jsxs as s } from "react/jsx-runtime";
 import { forwardRef as A } from "react";
-import { getCommonProps as w, noOp as C } from "../../utils/index.js";
-import $ from "../../node_modules/classnames/index.js";
+import { getCommonProps as M, noOp as w } from "../../utils/index.js";
+import C from "../../node_modules/classnames/index.js";
 import { AuthState as t } from "./types.js";
 import { TextVariants as i } from "../../components/Text/types.js";
 import r from "../../components/Text/Text.js";
 import m from "../../components/Icon/Icon.js";
-const b = A(
+const $ = A(
   ({
     accountDetailsLinkComponent: l = "a",
     className: d,
-    onLogin: g = C,
+    onLogin: g = w,
     authState: a = t.LoggedOut,
     loginLabel: h = "Login",
     accountLabel: u = "Account",
@@ -18,17 +18,17 @@ const b = A(
     disabled: e = !1,
     ...c
   }, p) => {
-    const { className: n, ...N } = w(c, "UserManagement"), _ = a === t.LoggedIn, L = a !== t.Loading;
-    return /* @__PURE__ */ o("div", { ...N, className: $(n, d), ...c, ref: p, children: L && /* @__PURE__ */ o(x, { children: _ ? /* @__PURE__ */ s(l, { className: `${n}__login`, href: f, disabled: e, children: [
+    const { className: n, ...N } = M(c, "UserManagement"), _ = a === t.LoggedIn, L = a !== t.Loading;
+    return /* @__PURE__ */ o("div", { ...N, className: C(n, d), ...c, ref: p, children: L && /* @__PURE__ */ o(x, { children: _ ? /* @__PURE__ */ s(l, { className: `${n}__login`, href: f, disabled: e, children: [
       /* @__PURE__ */ o(m, { icon: "Account", className: `${n}__account-icon`, height: "100%", width: "100%" }),
-      /* @__PURE__ */ o(r, { variant: i.body3, children: u })
+      /* @__PURE__ */ o(r, { variant: i.bodyMd, children: u })
     ] }) : /* @__PURE__ */ s("button", { className: `${n}__login`, onClick: g, disabled: e, children: [
       /* @__PURE__ */ o(m, { icon: "Account", className: `${n}__account-icon`, height: "100%", width: "100%" }),
-      /* @__PURE__ */ o(r, { variant: i.body3, children: h })
+      /* @__PURE__ */ o(r, { variant: i.bodyMd, children: h })
     ] }) }) });
   }
 );
-b.displayName = "UserManagement";
+$.displayName = "UserManagement";
 export {
-  b as default
+  $ as default
 };

package/dist/patterns/ViewingDetails/ViewingDetails.js

@@ -10,28 +10,28 @@ const y = b(
   ({
     className: p,
     children: m,
-    label: o,
-    sessionTimesLabel: s,
+    label: d,
+    sessionTimesLabel: o,
     sessionTimes: n,
     viewingTimes: t,
-    location: c,
-    mapLink: d,
-    onClose: V,
+    location: s,
+    mapLink: c,
+    onClose: M,
     linkElement: f = g,
     ...h
   }, N) => {
     const { className: r, ...v } = x(h, "ViewingDetails");
     return /* @__PURE__ */ a("div", { ...v, ...h, className: $(r, p), ref: N, children: /* @__PURE__ */ _("div", { className: `${r}__content`, children: [
       m && /* @__PURE__ */ a("div", { className: `${r}__children`, children: m }),
-      s && /* @__PURE__ */ a(l, { variant: i.heading4, children: s }),
+      o && /* @__PURE__ */ a(l, { variant: i.heading3, children: o }),
       n && n.length > 0 && n.map((e) => /* @__PURE__ */ _("div", { children: [
-        e.sessionLabel && /* @__PURE__ */ a(l, { variant: i.heading5, className: `${r}__label`, children: e.sessionLabel }),
-        e.sessionTime && /* @__PURE__ */ a(l, { variant: i.body2, className: `${r}__text`, children: e.sessionTime })
+        e.sessionLabel && /* @__PURE__ */ a(l, { variant: i.heading4, className: `${r}__label`, children: e.sessionLabel }),
+        e.sessionTime && /* @__PURE__ */ a(l, { variant: i.bodyMd, className: `${r}__text`, children: e.sessionTime })
       ] }, `${e.sessionLabel ?? ""}-${e.sessionTime ?? ""}`)),
-      o && /* @__PURE__ */ a(l, { variant: i.heading4, children: o }),
-      t && t.length > 0 && t.map((e) => /* @__PURE__ */ a(l, { variant: i.body2, className: `${r}__label`, children: e }, e)),
-      c && /* @__PURE__ */ a(l, { variant: i.body2, className: `${r}__location`, children: c }),
-      d && /* @__PURE__ */ a(l, { variant: i.body2, className: `${r}__map-link`, children: /* @__PURE__ */ a(f, { href: d, children: "(Map)" }) })
+      d && /* @__PURE__ */ a(l, { variant: i.heading3, children: d }),
+      t && t.length > 0 && t.map((e) => /* @__PURE__ */ a(l, { variant: i.bodyMd, className: `${r}__label`, children: e }, e)),
+      s && /* @__PURE__ */ a(l, { variant: i.bodyMd, className: `${r}__location`, children: s }),
+      c && /* @__PURE__ */ a(l, { variant: i.bodyMd, className: `${r}__map-link`, children: /* @__PURE__ */ a(f, { href: c, children: "(Map)" }) })
     ] }) });
   }
 );

package/dist/scss/_type.scss

@@ -44,196 +44,275 @@
 }
 
 @mixin hText(
-  $size: $heading-size1,
+  $size: $font-size-xl,
   $color: $pure-black,
   $transform-style: capitalize,
-  $line-height: $heading-line-height-size1
+  $text-decoration: unset,
+  $font-style: unset,
+  $line-height: $line-height-default
 ) {
   @include DistinctDisplay;
 
   color: $color;
   font-size: $size;
-  font-variation-settings: 'wght' 400;
+  font-style: $font-style;
+  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+  font-weight: 400;
   line-height: $line-height;
-  text-decoration: none;
+  text-decoration: $text-decoration;
   text-transform: $transform-style;
 }
 
-@mixin pText($size: $body-size1, $color: $pure-black, $line-height: 1.5) {
+@mixin pText($size: $body-size1, $color: $pure-black, $line-height: $line-height-body, $font-weight: 400) {
   @include Montserrat;
 
   color: $color;
   font-size: $size;
+  font-variation-settings: 'wght' $font-weight;
   line-height: $line-height;
 }
 
-@mixin labelText($label) {
+@mixin label($size: $font-size-md, $line-height: $line-height-default, $font-weight: 400, $text-decoration: unset) {
   @include Montserrat;
 
-  font-variation-settings: 'wght' 600;
+  font-size: $size;
+  font-variation-settings: 'wght' $font-weight;
+  line-height: $line-height;
+  text-decoration: $text-decoration;
+}
+
+@mixin labelText($label) {
+  @include Montserrat;
 
   @if $label == 'link' {
-    font-size: $link-label-size;
-    letter-spacing: 1px;
-    line-height: $link-label-line-height;
-    text-transform: capitalize;
+    @include label($size: $font-size-sm, $font-weight: 600, $text-decoration: underline);
   }
 
   @if $label == 'button' {
-    font-size: $button-label-size;
+    @include label($size: $font-size-sm, $font-weight: 600);
+
     letter-spacing: 0;
-    line-height: $button-label-line-height;
     text-transform: capitalize;
   }
 
   @if $label == 'email' {
-    font-size: $email-label-size;
+    @include label($size: $font-size-sm, $font-weight: 600);
+
     letter-spacing: 0.0625rem;
-    line-height: 1.25;
     text-transform: lowercase;
   }
 
   @if $label == 'label' {
-    font-size: $text-label-size;
-    font-variation-settings: 'wght' 500;
+    @include label($size: $font-size-xsm, $font-weight: 600);
+
     letter-spacing: 0.0625rem;
-    line-height: 1.25;
   }
 
   @if $label == 'badge' {
-    font-size: $badge-label-size;
-    font-variation-settings: 'wght' 500;
+    @include eyebrow($size: $font-size-xsm);
+
     letter-spacing: 0;
-    line-height: $badge-label-line-height;
-    text-transform: uppercase;
   }
 }
 
+@mixin eyebrow($size: $font-size-xsm, $color: $pure-black, $line-height: $line-height-default, $letter-spacing: 0) {
+  @include Montserrat;
+
+  color: $color;
+  font-size: $size;
+  font-variation-settings: 'wght' 500;
+  letter-spacing: $letter-spacing;
+  line-height: $line-height;
+  text-transform: uppercase;
+}
+
 @mixin text($token) {
   // Labels
+  @if $token == 'labelLg' {
+    @include label($size: $font-size-md);
+  }
+
+  @if $token == 'labelLgBold' {
+    @include label($size: $font-size-md, $font-weight: 600);
+  }
+
+  @if $token == 'labelMd' {
+    @include label($size: $font-size-sm, $font-weight: 400);
+  }
+
+  @if $token == 'labelMdBold' {
+    @include label($size: $font-size-sm, $font-weight: 600);
+  }
+
+  @if $token == 'labelSm' {
+    @include label($size: $font-size-xsm, $font-weight: 400);
+  }
+
+  @if $token == 'labelSmBold' {
+    @include label($size: $font-size-xsm, $font-weight: 600);
+  }
+
   @if $token == 'button' {
-    @include labelText($button);
+    @include label($size: $font-size-sm, $font-weight: 600);
   }
 
   @if $token == 'link' {
-    @include labelText($link);
+    @include label($size: $font-size-sm, $text-decoration: underline);
+  }
+
+  @if $token == 'linkBold' {
+    @include label($size: $font-size-sm, $font-weight: 600, $text-decoration: underline);
   }
 
   @if $token == 'email' {
-    @include labelText($email);
+    @include label($size: $font-size-sm, $font-weight: 600);
   }
 
   @if $token == 'label' {
-    @include labelText($label);
+    @include label($size: $font-size-xsm, $font-weight: 600);
   }
 
   @if $token == 'badge' {
-    @include labelText($badge);
+    @include eyebrow($size: $font-size-xsm);
+  }
+
+  @if $token == 'bodyLg' {
+    @include pText($font-size-md);
+  }
+
+  @if $token == 'bodyMd' {
+    @include pText($font-size-sm);
+  }
+
+  @if $token == 'bodySm' {
+    @include pText($font-size-xsm);
+  }
+
+  @if $token == 'bodyLgBold' {
+    @include pText($font-size-md, $font-weight: 600);
+  }
+
+  @if $token == 'bodyMdBold' {
+    @include pText($font-size-sm, $font-weight: 600);
+  }
+
+  @if $token == 'bodySmBold' {
+    @include pText($font-size-xsm, $font-weight: 600);
   }
 
   // Headings
   @if $token == 'blockquote' {
-    @include hText(
-      $heading-size1,
-      $color: $primary-black,
-      $transform-style: initial,
-      $line-height: $heading-line-height-size1
-    );
+    @include hText($font-size-xl, $color: $primary-black, $transform-style: initial, $line-height: $font-size-xxl);
   }
 
   @if $token == 'heading1' {
-    @include hText($heading-size1, $line-height: $heading-line-height-size1, $transform-style: capitalize);
+    @include hText($font-size-xl);
   }
 
   @if $token == 'heading2' {
-    @include hText($heading-size2, $line-height: $heading-line-height-size2, $transform-style: capitalize);
+    @include hText($font-size-lg);
   }
 
   @if $token == 'heading3' {
-    @include hText($heading-size3, $line-height: $heading-line-height-size3, $transform-style: capitalize);
+    @include hText($font-size-md);
+  }
+
+  @if $token == 'heading3Italic' {
+    @include hText($font-size-md, $font-style: italic);
   }
 
   @if $token == 'heading4' {
-    @include hText($heading-size4, $line-height: $heading-line-height-size4, $transform-style: capitalize);
+    @include hText($font-size-sm);
+  }
+
+  @if $token == 'heading4Italic' {
+    @include hText($font-size-sm, $font-style: italic);
   }
 
   @if $token == 'heading5' {
-    @include hText($heading-size5, $line-height: $heading-line-height-size5, $transform-style: capitalize);
+    @include hText($font-size-xsm);
   }
 
   @if $token == 'title1' {
-    @include hText($heading-size1, $line-height: $heading-line-height-size1, $transform-style: uppercase);
+    @include hText($font-size-xl, $transform-style: uppercase);
+
+    letter-spacing: 0.03rem; // design team request
   }
 
   // the title2 token skips heading 2 because it's the same size currently as heading1
   @if $token == 'title2' {
-    @include hText($heading-size3, $line-height: $heading-line-height-size3, $transform-style: uppercase);
+    @include hText($font-size-lg, $transform-style: uppercase);
+
+    letter-spacing: 0.03rem;
   }
 
   @if $token == 'title3' {
-    @include hText($heading-size4, $line-height: $heading-line-height-size4, $transform-style: uppercase);
+    @include hText($font-size-md, $transform-style: uppercase);
+
+    letter-spacing: 0.03rem;
   }
 
   @if $token == 'title4' {
-    @include hText($heading-size5, $line-height: $heading-line-height-size5, $transform-style: uppercase);
+    @include hText($font-size-sm, $transform-style: uppercase);
+
+    letter-spacing: 0.03rem;
   }
 
   // Body
   @if $token == 'body1' {
-    @include pText($body-size1, $line-height: $body-line-height-size1);
+    @include pText($font-size-md);
   }
 
   @if $token == 'body2' {
-    @include pText($body-size2, $line-height: $body-line-height-size2);
+    @include pText($font-size-sm);
   }
 
   @if $token == 'body3' {
-    @include pText($body-size3, $line-height: $body-line-height-size3);
+    @include pText($font-size-xsm);
   }
 
   // String
   @if $token == 'string1' {
-    @include pText($string-size1, $line-height: $string-line-height-size1);
+    @include label($size: $font-size-md);
   }
 
   @if $token == 'string2' {
-    @include pText($string-size2, $line-height: $string-line-height-size2);
+    @include label($size: $font-size-sm);
   }
 
   @if $token == 'string3' {
-    @include pText($string-size3, $line-height: $string-line-height-size3);
+    @include label($size: $font-size-xsm);
   }
 
   // SNW
   @if $token == 'snwHeaderLink' {
-    @include DistinctDisplay;
+    @include hText($font-size-md, $transform-style: uppercase);
 
-    font-size: $snw-header-link-size;
-    font-variation-settings: 'wght' 400;
-    letter-spacing: 1px;
-    line-height: $snw-header-link-line-height;
-    text-transform: uppercase;
+    letter-spacing: 0.03rem;
   }
 
   @if $token == 'snwFlyoutLink' {
-    @include Montserrat;
-
-    font-size: $snw-flyout-link-size;
-    font-variation-settings: 'wght' 400;
-    letter-spacing: 1px;
-    line-height: $snw-flyout-link-line-height;
-    text-transform: capitalize;
+    @include label($size: $font-size-md);
   }
 
   @if $token == 'snwHeadingHero1' {
-    @include hText($snw-heading-hero-size1, $line-height: $snw-heading-hero-line-height1, $transform-style: uppercase);
+    @include hText($font-size-xl, $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);
+    @include hText($font-size-lg, $transform-style: uppercase);
 
     text-align: center;
   }
+
+  // Eyebrows
+  @if $token == 'eyebrowLg' {
+    @include eyebrow($size: $font-size-sm);
+  }
+
+  @if $token == 'eyebrowSm' {
+    @include eyebrow($size: $font-size-xsm);
+  }
 }

package/dist/scss/_vars.scss

@@ -1,6 +1,41 @@
 // prefix
 $px: seldon;
 
+@mixin font-size-vars--sm {
+  --font-size-micro: 0.25rem;
+  --font-size-xsm: 0.5rem;
+  --font-size-sm: 0.75rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-xxl: 1.75rem;
+  --font-size-xxxl: 2rem;
+}
+
+@mixin font-size-vars--md {
+  @include font-size-vars--sm;
+}
+
+@mixin font-size-vars--lg {
+  --font-size-micro: 0.5rem;
+  --font-size-xsm: 0.75rem;
+  --font-size-sm: 1rem;
+  --font-size-md: 1.25rem;
+  --font-size-lg: 1.5rem;
+  --font-size-xl: 1.75rem;
+  --font-size-xxl: 2rem;
+  --font-size-xxxl: 2.25rem;
+}
+
+$font-size-micro: var(--font-size-micro);
+$font-size-xsm: var(--font-size-xsm);
+$font-size-sm: var(--font-size-sm);
+$font-size-md: var(--font-size-md);
+$font-size-lg: var(--font-size-lg);
+$font-size-xl: var(--font-size-xl);
+$font-size-xxl: var(--font-size-xxl);
+$font-size-xxxl: var(--font-size-xxxl);
+
 ////////////////////////
 /// COlORS:
 ///////////////////////
@@ -83,19 +118,40 @@ $text-family: $DistinctText;
 
 // Used with the labelText mixin
 // @include labelText($label)
+$labelLg: 'labelLg';
+$labelLgBold: 'labelLgBold';
+$labelMd: 'labelMd';
+$labelMdBold: 'labelMdBold';
+$labelSm: 'labelSm';
+$labelSmBold: 'labelSmBold';
 $button: 'button';
 $link: 'link';
+$linkBold: 'linkBold';
 $email: 'email';
 $label: 'label';
 $badge: 'badge';
 
+// Body styles
+$bodyLg: 'bodyLg';
+$bodyMd: 'bodyMd';
+$bodySm: 'bodySm';
+$bodyLgBold: 'bodyLgBold';
+$bodyMdBold: 'bodyMdBold';
+$bodySmBold: 'bodySmBold';
+
 // Used with the hText mixin
 $blockquote: 'blockquote';
 $heading1: 'heading1';
 $heading2: 'heading2';
 $heading3: 'heading3';
+$heading3Italic: 'heading3Italic';
 $heading4: 'heading4';
+$heading4Italic: 'heading4Italic';
 $heading5: 'heading5';
+
+// Eyebrow tokens
+$eyebrowLg: 'eyebrowLg';
+$eyebrowSm: 'eyebrowSm';
 $title1: 'title1';
 $title2: 'title2';
 $title3: 'title3';
@@ -110,9 +166,11 @@ $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, $snwHeadingHero1, $snwHeadingHero2;
+$text-tokens: $labelLg, $labelLgBold, $labelMd, $labelMdBold, $labelSm, $labelSmBold, $button, $link, $linkBold, $email,
+  $label, $badge, $bodyLg, $bodyMd, $bodySm, $bodyLgBold, $bodyMdBold, $bodySmBold, $blockquote, $heading1, $heading2,
+  $heading3, $heading3Italic, $heading4, $heading4Italic, $heading5, $eyebrowLg, $eyebrowSm, $title1, $title2, $title3,
+  $title4, $body1, $body2, $body3, $string1, $string2, $string3, $snwFlyoutLink, $snwHeaderLink, $snwHeadingHero1,
+  $snwHeadingHero2;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts
@@ -127,20 +185,14 @@ $breakpoint-xl: 1801px;
 ///////////////////////
 // @TODO: These tokens need to be aligned with the new values from the design system https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=7263-1361&node-type=canvas&m=dev
 // Once we update ObjectTile and other components will need to be updated to match the new token.
+
+$line-height-default: 1.2;
+$line-height-body: 1.4;
+
 :root {
   --desktop-max-width: 120rem;
   --quote-size: 1.5rem;
   --quote-line-height: 2rem;
-  --heading-size1: 1.5rem;
-  --heading-line-height-size1: 1.75rem;
-  --heading-size2: 1.5rem;
-  --heading-line-height-size2: 1.75rem;
-  --heading-size3: 1.25rem;
-  --heading-line-height-size3: 1.5rem;
-  --heading-size4: 1rem;
-  --heading-line-height-size4: 1.25rem;
-  --heading-size5: 0.75rem;
-  --heading-line-height-size5: 1rem;
   --string-size1: 1rem;
   --string-line-height-size1: 1.25rem;
   --string-size2: 0.75rem;
@@ -173,19 +225,15 @@ $breakpoint-xl: 1801px;
   --snw-heading-hero-size2: 1.625rem;
   --snw-heading-hero-line-height-size2: 1.9375rem;
 
+  // FONT SIZES
+  --font-size-step: 0.25rem;
+  --body-size-step: 0.5rem;
+
+  @include font-size-vars--sm;
+
   @media (min-width: $breakpoint-md) {
     --quote-size: 1.75rem;
     --quote-line-height: 2.25rem;
-    --heading-size1: 1.75rem;
-    --heading-line-height-size1: 2rem;
-    --heading-size2: 1.75rem;
-    --heading-line-height-size2: 2rem;
-    --heading-size3: 1.5rem;
-    --heading-line-height-size3: 1.75rem;
-    --heading-size4: 1.25rem;
-    --heading-line-height-size4: 1.5rem;
-    --heading-size5: 1rem;
-    --heading-line-height-size5: 1.25rem;
     --string-size1: 1.25rem;
     --string-line-height-size1: 1.5rem;
     --string-size2: 1rem;
@@ -224,16 +272,6 @@ $breakpoint-xl: 1801px;
   @media (min-width: $breakpoint-xl) {
     --quote-size: 2rem;
     --quote-line-height: 2.5rem;
-    --heading-size1: 2rem;
-    --heading-line-height-size1: 2.25rem;
-    --heading-size2: 2rem;
-    --heading-line-height-size2: 2.25rem;
-    --heading-size3: 1.75rem;
-    --heading-line-height-size3: 2rem;
-    --heading-size4: 1.5rem;
-    --heading-line-height-size4: 1.75rem;
-    --heading-size5: 1.25rem;
-    --heading-line-height-size5: 1.5rem;
     --string-size1: 1.5rem;
     --string-line-height-size1: 1.75rem;
     --string-size2: 1.25rem;
@@ -259,6 +297,9 @@ $breakpoint-xl: 1801px;
     --snw-header-link-line-height: 1.75rem;
     --snw-flyout-link-size: 1.125rem;
     --snw-flyout-link-line-height: 2.125rem;
+
+    // FONT SIZES
+    @include font-size-vars--lg;
   }
 }
 
@@ -268,18 +309,6 @@ $title-size2: var(--heading-size2);
 $title-size3: var(--heading-size3);
 $title-size4: var(--heading-size4);
 
-// HEADING
-$heading-size1: var(--heading-size1);
-$heading-line-height-size1: var(--heading-line-height-size1);
-$heading-size2: var(--heading-size2);
-$heading-line-height-size2: var(--heading-line-height-size2);
-$heading-size3: var(--heading-size3);
-$heading-line-height-size3: var(--heading-line-height-size3);
-$heading-size4: var(--heading-size4);
-$heading-line-height-size4: var(--heading-line-height-size4);
-$heading-size5: var(--heading-size5);
-$heading-line-height-size5: var(--heading-line-height-size5);
-
 // BODY
 $body-size1: var(--body-size1);
 $body-line-height-size1: var(--body-line-height-size1);