@phillips/seldon 1.181.0 → 1.182.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 M, noOp as w } from "../../utils/index.js";
-import C from "../../node_modules/classnames/index.js";
+import { getCommonProps as w, noOp as C } from "../../utils/index.js";
+import $ 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 $ = A(
+const b = A(
   ({
     accountDetailsLinkComponent: l = "a",
     className: d,
-    onLogin: g = w,
+    onLogin: g = C,
     authState: a = t.LoggedOut,
     loginLabel: h = "Login",
     accountLabel: u = "Account",
@@ -18,17 +18,17 @@ const $ = A(
     disabled: e = !1,
     ...c
   }, p) => {
-    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: [
+    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: [
       /* @__PURE__ */ o(m, { icon: "Account", className: `${n}__account-icon`, height: "100%", width: "100%" }),
-      /* @__PURE__ */ o(r, { variant: i.bodyMd, children: u })
+      /* @__PURE__ */ o(r, { variant: i.body3, 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.bodyMd, children: h })
+      /* @__PURE__ */ o(r, { variant: i.body3, children: h })
     ] }) }) });
   }
 );
-$.displayName = "UserManagement";
+b.displayName = "UserManagement";
 export {
-  $ as default
+  b as default
 };

package/dist/patterns/ViewingDetails/ViewingDetails.js

@@ -10,28 +10,28 @@ const y = b(
   ({
     className: p,
     children: m,
-    label: d,
-    sessionTimesLabel: o,
+    label: o,
+    sessionTimesLabel: s,
     sessionTimes: n,
     viewingTimes: t,
-    location: s,
-    mapLink: c,
-    onClose: M,
+    location: c,
+    mapLink: d,
+    onClose: V,
     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 }),
-      o && /* @__PURE__ */ a(l, { variant: i.heading3, children: o }),
+      s && /* @__PURE__ */ a(l, { variant: i.heading4, children: s }),
       n && n.length > 0 && n.map((e) => /* @__PURE__ */ _("div", { children: [
-        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 && /* @__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 ?? ""}-${e.sessionTime ?? ""}`)),
-      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)" }) })
+      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)" }) })
     ] }) });
   }
 );

package/dist/scss/_type.scss

@@ -44,275 +44,196 @@
 }
 
 @mixin hText(
-  $size: $font-size-xl,
+  $size: $heading-size1,
   $color: $pure-black,
   $transform-style: capitalize,
-  $text-decoration: unset,
-  $font-style: unset,
-  $line-height: $line-height-default
+  $line-height: $heading-line-height-size1
 ) {
   @include DistinctDisplay;
 
   color: $color;
   font-size: $size;
-  font-style: $font-style;
-  /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-  font-weight: 400;
+  font-variation-settings: 'wght' 400;
   line-height: $line-height;
-  text-decoration: $text-decoration;
+  text-decoration: none;
   text-transform: $transform-style;
 }
 
-@mixin pText($size: $body-size1, $color: $pure-black, $line-height: $line-height-body, $font-weight: 400) {
+@mixin pText($size: $body-size1, $color: $pure-black, $line-height: 1.5) {
   @include Montserrat;
 
   color: $color;
   font-size: $size;
-  font-variation-settings: 'wght' $font-weight;
-  line-height: $line-height;
-}
-
-@mixin label($size: $font-size-md, $line-height: $line-height-default, $font-weight: 400, $text-decoration: unset) {
-  @include Montserrat;
-
-  font-size: $size;
-  font-variation-settings: 'wght' $font-weight;
   line-height: $line-height;
-  text-decoration: $text-decoration;
 }
 
 @mixin labelText($label) {
   @include Montserrat;
 
+  font-variation-settings: 'wght' 600;
+
   @if $label == 'link' {
-    @include label($size: $font-size-sm, $font-weight: 600, $text-decoration: underline);
+    font-size: $link-label-size;
+    letter-spacing: 1px;
+    line-height: $link-label-line-height;
+    text-transform: capitalize;
   }
 
   @if $label == 'button' {
-    @include label($size: $font-size-sm, $font-weight: 600);
-
+    font-size: $button-label-size;
     letter-spacing: 0;
+    line-height: $button-label-line-height;
     text-transform: capitalize;
   }
 
   @if $label == 'email' {
-    @include label($size: $font-size-sm, $font-weight: 600);
-
+    font-size: $email-label-size;
     letter-spacing: 0.0625rem;
+    line-height: 1.25;
     text-transform: lowercase;
   }
 
   @if $label == 'label' {
-    @include label($size: $font-size-xsm, $font-weight: 600);
-
+    font-size: $text-label-size;
+    font-variation-settings: 'wght' 500;
     letter-spacing: 0.0625rem;
+    line-height: 1.25;
   }
 
   @if $label == 'badge' {
-    @include eyebrow($size: $font-size-xsm);
-
+    font-size: $badge-label-size;
+    font-variation-settings: 'wght' 500;
     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 label($size: $font-size-sm, $font-weight: 600);
+    @include labelText($button);
   }
 
   @if $token == '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);
+    @include labelText($link);
   }
 
   @if $token == 'email' {
-    @include label($size: $font-size-sm, $font-weight: 600);
+    @include labelText($email);
   }
 
   @if $token == 'label' {
-    @include label($size: $font-size-xsm, $font-weight: 600);
+    @include labelText($label);
   }
 
   @if $token == '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);
+    @include labelText($badge);
   }
 
   // Headings
   @if $token == 'blockquote' {
-    @include hText($font-size-xl, $color: $primary-black, $transform-style: initial, $line-height: $font-size-xxl);
+    @include hText(
+      $heading-size1,
+      $color: $primary-black,
+      $transform-style: initial,
+      $line-height: $heading-line-height-size1
+    );
   }
 
   @if $token == 'heading1' {
-    @include hText($font-size-xl);
+    @include hText($heading-size1, $line-height: $heading-line-height-size1, $transform-style: capitalize);
   }
 
   @if $token == 'heading2' {
-    @include hText($font-size-lg);
+    @include hText($heading-size2, $line-height: $heading-line-height-size2, $transform-style: capitalize);
   }
 
   @if $token == 'heading3' {
-    @include hText($font-size-md);
-  }
-
-  @if $token == 'heading3Italic' {
-    @include hText($font-size-md, $font-style: italic);
+    @include hText($heading-size3, $line-height: $heading-line-height-size3, $transform-style: capitalize);
   }
 
   @if $token == 'heading4' {
-    @include hText($font-size-sm);
-  }
-
-  @if $token == 'heading4Italic' {
-    @include hText($font-size-sm, $font-style: italic);
+    @include hText($heading-size4, $line-height: $heading-line-height-size4, $transform-style: capitalize);
   }
 
   @if $token == 'heading5' {
-    @include hText($font-size-xsm);
+    @include hText($heading-size5, $line-height: $heading-line-height-size5, $transform-style: capitalize);
   }
 
   @if $token == 'title1' {
-    @include hText($font-size-xl, $transform-style: uppercase);
-
-    letter-spacing: 0.03rem; // design team request
+    @include hText($heading-size1, $line-height: $heading-line-height-size1, $transform-style: uppercase);
   }
 
   // the title2 token skips heading 2 because it's the same size currently as heading1
   @if $token == 'title2' {
-    @include hText($font-size-lg, $transform-style: uppercase);
-
-    letter-spacing: 0.03rem;
+    @include hText($heading-size3, $line-height: $heading-line-height-size3, $transform-style: uppercase);
   }
 
   @if $token == 'title3' {
-    @include hText($font-size-md, $transform-style: uppercase);
-
-    letter-spacing: 0.03rem;
+    @include hText($heading-size4, $line-height: $heading-line-height-size4, $transform-style: uppercase);
   }
 
   @if $token == 'title4' {
-    @include hText($font-size-sm, $transform-style: uppercase);
-
-    letter-spacing: 0.03rem;
+    @include hText($heading-size5, $line-height: $heading-line-height-size5, $transform-style: uppercase);
   }
 
   // Body
   @if $token == 'body1' {
-    @include pText($font-size-md);
+    @include pText($body-size1, $line-height: $body-line-height-size1);
   }
 
   @if $token == 'body2' {
-    @include pText($font-size-sm);
+    @include pText($body-size2, $line-height: $body-line-height-size2);
   }
 
   @if $token == 'body3' {
-    @include pText($font-size-xsm);
+    @include pText($body-size3, $line-height: $body-line-height-size3);
   }
 
   // String
   @if $token == 'string1' {
-    @include label($size: $font-size-md);
+    @include pText($string-size1, $line-height: $string-line-height-size1);
   }
 
   @if $token == 'string2' {
-    @include label($size: $font-size-sm);
+    @include pText($string-size2, $line-height: $string-line-height-size2);
   }
 
   @if $token == 'string3' {
-    @include label($size: $font-size-xsm);
+    @include pText($string-size3, $line-height: $string-line-height-size3);
   }
 
   // SNW
   @if $token == 'snwHeaderLink' {
-    @include hText($font-size-md, $transform-style: uppercase);
+    @include DistinctDisplay;
 
-    letter-spacing: 0.03rem;
+    font-size: $snw-header-link-size;
+    font-variation-settings: 'wght' 400;
+    letter-spacing: 1px;
+    line-height: $snw-header-link-line-height;
+    text-transform: uppercase;
   }
 
   @if $token == 'snwFlyoutLink' {
-    @include label($size: $font-size-md);
+    @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;
   }
 
   @if $token == 'snwHeadingHero1' {
-    @include hText($font-size-xl, $transform-style: uppercase);
+    @include hText($snw-heading-hero-size1, $line-height: $snw-heading-hero-line-height1, $transform-style: uppercase);
 
     text-align: center;
   }
 
   @if $token == 'snwHeadingHero2' {
-    @include hText($font-size-lg, $transform-style: uppercase);
+    @include hText($snw-heading-hero-size2, $line-height: $snw-heading-hero-line-height2, $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,41 +1,6 @@
 // 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:
 ///////////////////////
@@ -118,40 +83,19 @@ $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';
@@ -166,11 +110,9 @@ $snwHeaderLink: 'snwHeaderLink';
 $snwFlyoutLink: 'snwFlyoutLink';
 $snwHeadingHero1: 'snwHeadingHero1';
 $snwHeadingHero2: '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;
+$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;
 
 ////////////////////////
 /// Breakpoint TOKENS to be used for min-width comparisons, make sure they match BREAKPOINTS in constants.ts
@@ -185,14 +127,20 @@ $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;
@@ -225,15 +173,19 @@ $line-height-body: 1.4;
   --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;
@@ -272,6 +224,16 @@ $line-height-body: 1.4;
   @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;
@@ -297,9 +259,6 @@ $line-height-body: 1.4;
     --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;
   }
 }
 
@@ -309,6 +268,18 @@ $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);