@phillips/seldon 1.13.0 → 1.15.0

package/dist/components/ViewingsList/ViewingsListCardForm.js

@@ -1,14 +1,14 @@
-import { jsxs as T, Fragment as W, jsx as t } from "react/jsx-runtime";
+import { jsxs as a, Fragment as W, jsx as t } from "react/jsx-runtime";
 import b from "../../node_modules/classnames/index.js";
-import * as a from "react";
+import * as T from "react";
 import { px as X } from "../../utils/index.js";
 import u from "../Input/Input.js";
 const o = `${X}-viewings-list-card-form`, l = ({
   address1: g,
-  address1Label: V = "Address ('432 Park Ave', ETC)",
-  addressUrl: $,
-  addressUrlLabel: c = "URL for map link ('http://www.website.com')",
-  address2: H,
+  address1Label: H = "Address ('432 Park Ave', ETC)",
+  addressUrl: V,
+  addressUrlLabel: $ = "URL for map link ('http://www.website.com')",
+  address2: c,
   address2Label: h = "City, State, Zip ('New York, NY 10019')",
   address3: z,
   address3Label: L = "Country (United States)",
@@ -23,13 +23,13 @@ const o = `${X}-viewings-list-card-form`, l = ({
   previewDates: y,
   previewDatesLabel: E = "Date(s)",
   previewHours1: U,
-  previewHours1Label: N = "Hours1",
-  previewHours2: A,
+  previewHours1Label: A = "Hours1",
+  previewHours2: N,
   previewHours2Label: P = "Hours2",
-  previewLabel: I = "Label ('Preview', 'Opening NIght', etc)",
-  previewLabelValue: R,
+  previewLabel: j = "Label ('Preview', 'Opening Night', etc)",
+  previewLabelValue: I,
   previewOn: p = "false",
-  previewToggleLabel: j = "Preview/ Reception",
+  previewToggleLabel: R = "Additional Hours",
   viewingLabel: Y = "Label ('Open to public')",
   viewingLabelValue: Z,
   viewingDates: q,
@@ -39,22 +39,10 @@ const o = `${X}-viewings-list-card-form`, l = ({
   viewingHours2: K,
   viewingHours2Label: M = "Hours2"
 }) => {
-  const [m, f] = a.useState(p === "true"), [w, Q] = a.useState(O === "true");
-  return a.useEffect(() => {
+  const [m, f] = T.useState(p === "true"), [w, Q] = T.useState(O === "true");
+  return T.useEffect(() => {
     f(p === "true");
-  }, [p]), /* @__PURE__ */ T(W, { children: [
-    /* @__PURE__ */ t(
-      u,
-      {
-        id: `viewingLabel-${r}`,
-        name: "viewingLabelValue",
-        defaultValue: Z,
-        labelText: Y,
-        size: "sm",
-        invalid: e == null ? void 0 : e.viewingLabelValue,
-        invalidText: e == null ? void 0 : e.viewingLabelValue
-      }
-    ),
+  }, [p]), /* @__PURE__ */ a(W, { children: [
     /* @__PURE__ */ t(
       u,
       {
@@ -91,12 +79,24 @@ const o = `${X}-viewings-list-card-form`, l = ({
         invalidText: e == null ? void 0 : e.viewingHours2
       }
     ),
+    /* @__PURE__ */ t(
+      u,
+      {
+        id: `viewingLabel-${r}`,
+        name: "viewingLabelValue",
+        defaultValue: Z,
+        labelText: Y,
+        size: "sm",
+        invalid: e == null ? void 0 : e.viewingLabelValue,
+        invalidText: e == null ? void 0 : e.viewingLabelValue
+      }
+    ),
     /* @__PURE__ */ t(
       u,
       {
         id: `previewOn-${r}`,
         type: "toggle",
-        labelText: j,
+        labelText: R,
         size: "md",
         defaultChecked: m,
         inline: !0,
@@ -108,7 +108,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
       }
     ),
     m ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "previewOn", value: "false" }),
-    /* @__PURE__ */ T(
+    /* @__PURE__ */ a(
       "div",
       {
         className: b(`${o}__preview-set`, { [`${o}__preview-set--hidden`]: !m }),
@@ -132,7 +132,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
               id: `previewHours1-${r}`,
               name: "previewHours1",
               defaultValue: U,
-              labelText: N,
+              labelText: A,
               size: "sm",
               invalid: e == null ? void 0 : e.previewHours1,
               invalidText: e == null ? void 0 : e.previewHours1,
@@ -144,7 +144,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
             {
               id: `previewHours2-${r}`,
               name: "previewHours2",
-              defaultValue: A,
+              defaultValue: N,
               labelText: P,
               size: "sm",
               invalid: e == null ? void 0 : e.previewHours2,
@@ -157,8 +157,8 @@ const o = `${X}-viewings-list-card-form`, l = ({
             {
               id: `previewLabel-${r}`,
               name: "previewLabelValue",
-              defaultValue: R,
-              labelText: I,
+              defaultValue: I,
+              labelText: j,
               size: "sm",
               invalid: e == null ? void 0 : e.previewLabelValue,
               invalidText: e == null ? void 0 : e.previewLabelValue,
@@ -174,7 +174,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
         id: `address1-${r}`,
         name: "address1",
         defaultValue: g,
-        labelText: V,
+        labelText: H,
         size: "sm",
         invalid: e == null ? void 0 : e.address1,
         invalidText: e == null ? void 0 : e.address1
@@ -185,8 +185,8 @@ const o = `${X}-viewings-list-card-form`, l = ({
       {
         id: `addressUrl-${r}`,
         name: "addressUrl",
-        defaultValue: $,
-        labelText: c,
+        defaultValue: V,
+        labelText: $,
         size: "sm",
         type: "url",
         invalid: e == null ? void 0 : e.addressUrl,
@@ -198,7 +198,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
       {
         id: `address2-${r}`,
         name: "address2",
-        defaultValue: H,
+        defaultValue: c,
         labelText: h,
         size: "sm",
         invalid: e == null ? void 0 : e.address2,
@@ -234,7 +234,7 @@ const o = `${X}-viewings-list-card-form`, l = ({
       }
     ),
     w ? null : /* @__PURE__ */ t("input", { type: "hidden", name: "emailOn", value: "false" }),
-    /* @__PURE__ */ T(
+    /* @__PURE__ */ a(
       "div",
       {
         className: b(`${o}__preview-set`, { [`${o}__preview-set--hidden`]: !w }),

package/dist/scss/_type.scss

@@ -0,0 +1,124 @@
+@use './vars' as *;
+
+@mixin hText($size: $heading-size1, $color: $primary-black, $transform-style: capitalize) {
+  color: $color;
+  font-family: 'DistinctDisplay';
+  font-size: $size;
+  font-weight: 400;
+  line-height: 1.25;
+  text-transform: $transform-style;
+}
+
+@mixin pText($size: $body-size1, $color: $soft-black) {
+  color: $color;
+  font-family: 'Montserrat';
+  font-size: $size;
+  line-height: 1.5;
+  letter-spacing: 0.0625rem;
+}
+
+@mixin labelText($label) {
+  font-family: 'Montserrat';
+
+  @if $label == 'button' {
+    font-size: $button-label-size;
+    font-weight: 500;
+    letter-spacing: 0.0625rem;
+    text-transform: capitalize;
+  }
+  @if $label == 'cta-sm' {
+    font-size: $cta-sm-label-size;
+    font-weight: 600;
+    letter-spacing: 0.0625rem;
+    line-height: 1.25;
+    text-transform: uppercase;
+  }
+  @if $label == 'cta-lg' {
+    font-size: $cta-lg-label-size;
+    font-weight: 700;
+    letter-spacing: 0.125rem;
+    line-height: 1.25;
+    text-transform: uppercase;
+  }
+  @if $label == 'email' {
+    font-size: $email-label-size;
+    font-weight: 600;
+    letter-spacing: 0.0625rem;
+    line-height: 1.25;
+    text-transform: lowercase;
+  }
+  @if $label == 'text' {
+    font-size: $text-label-size;
+    font-weight: 500;
+    letter-spacing: 0.0625rem;
+    line-height: 1.25;
+  }
+  @if $label == 'text-badge' {
+    font-size: $text-badge-label-size;
+    font-weight: 500;
+    letter-spacing: 0.1875rem;
+    line-height: 1.25;
+    text-transform: uppercase;
+  }
+}
+
+@mixin text($token) {
+  // Labels
+  @if $token == 'button' {
+    @include labelText($button);
+  }
+  @if $token == 'cta-sm' {
+    @include labelText($cta-sm);
+  }
+  @if $token == 'cta-lg' {
+    @include labelText($cta-lg);
+  }
+  @if $token == 'email' {
+    @include labelText($email);
+  }
+  @if $token == 'text' {
+    @include labelText($text);
+  }
+  @if $token == 'text-badge' {
+    @include labelText($text-badge);
+  }
+  // Displays
+  @if $token == 'display0' {
+    @include hText($display-size0, null, uppercase);
+  }
+  @if $token == 'display1' {
+    @include hText($display-size1, null, uppercase);
+  }
+  @if $token == 'display2' {
+    @include hText($display-size2, null, uppercase);
+  }
+  @if $token == 'display3' {
+    @include hText($display-size3, null, uppercase);
+  }
+  @if $token == 'display4' {
+    @include hText($display-size4, null, uppercase);
+  }
+  // Headings
+  @if $token == 'heading1' {
+    @include hText($heading-size1);
+  }
+  @if $token == 'heading2' {
+    @include hText($heading-size2);
+  }
+  @if $token == 'heading3' {
+    @include hText($heading-size3);
+  }
+  @if $token == 'heading4' {
+    @include hText($heading-size4);
+  }
+  // Body
+  @if $token == 'body1' {
+    @include pText($body-size1);
+  }
+  @if $token == 'body2' {
+    @include pText($body-size2);
+  }
+  @if $token == 'body3' {
+    @include pText($body-size3);
+  }
+}

package/dist/scss/_typography.scss

@@ -1,18 +1,21 @@
 @import './vars';
 
+html,
 body {
   font-family:
-    SeroWebPro,
-    'Helvetica Neue',
-    Helvetica,
+    'Montserrat',
     -apple-system,
-    '.SFNSText-Regular',
-    'San Francisco',
     BlinkMacSystemFont,
-    'Segoe UI',
-    'Helvetica Neue',
-    Helvetica,
-    Arial,
+    avenir next,
+    avenir,
+    segoe ui,
+    helvetica neue,
+    helvetica,
+    Cantarell,
+    Ubuntu,
+    roboto,
+    noto,
+    arial,
     sans-serif;
   font-size: 16px;
   margin: 0;
@@ -29,61 +32,48 @@ body {
   src: url('../fonts/Distinct-Display.woff2') format('woff2');
 }
 @mixin DistinctDisplay {
-  font-family: $DistinctDisplay;
+  font-family: 'DistinctDisplay';
 }
 
 @font-face {
-  font-family: 'DistinctDisplayItalic';
+  font-family: 'DistinctDisplay';
   src: url('../fonts/Distinct-DisplayItalic.woff') format('woff');
   src: url('../fonts/Distinct-DisplayItalic.woff2') format('woff2');
-}
-@mixin DistinctDisplayItalic {
-  font-family: $DistinctDisplayItalic;
+  font-style: italic;
 }
 
-@font-face {
-  font-family: 'DistinctItalic';
-  src: url('../fonts/Distinct-Italic.woff') format('woff');
-  src: url('../fonts/Distinct-Italic.woff2') format('woff2');
-}
-@mixin DistinctItalic {
-  font-family: $DistinctItalic;
+@mixin DistinctDisplayItalic {
+  font-family: 'DistinctDisplay';
+  font-style: italic;
 }
 
 @font-face {
-  font-family: 'DistinctText';
+  font-family: 'Distinct';
   src: url('../fonts/Distinct-Text.woff') format('woff');
   src: url('../fonts/Distinct-Text.woff2') format('woff2');
 }
 @mixin DistinctText {
-  font-family: $DistinctText;
+  font-family: 'Distinct';
+}
+@font-face {
+  font-family: 'Distinct';
+  src: url('../fonts/Distinct-Italic.woff') format('woff');
+  src: url('../fonts/Distinct-Italic.woff2') format('woff2');
+  font-style: italic;
+}
+
+@mixin DistinctItalic {
+  font-family: 'Distinct';
+  font-style: italic;
 }
 
 @mixin headerText {
   @include DistinctDisplay();
   color: $primary-black;
   font-weight: 400;
+  font-style: italic;
 }
 
 @mixin bodyText {
   color: $soft-black;
 }
-
-// @TODO: uncomment when site is able to be refactored
-// h1,
-// h2,
-// h3,
-// h4 {
-//   color: $primary-black;
-//   @include DistinctDisplay();
-// }
-
-// p,
-// input,
-// label,
-// div,
-// a,
-// button {
-//   color: $soft-black;
-//   @include DistinctText();
-// }

package/dist/scss/_vars.scss

@@ -1,21 +1,22 @@
 // prefix
 $px: phillips;
 
+////////////////////////
+/// COlORS:
+///////////////////////
+
 // Primary color palette
 $pure-black: #000000;
 $primary-black: #323232;
 $pure-white: #ffffff;
-
 // Secondary color palette
 $soft-black: #545454;
 $dark-gray: #75715f;
-
 // Utilititarian color palette
 $keyline-gray: #949494;
 $medium-gray: #c3bebb;
 $light-gray: #eceae7;
 $off-white: #f4f2f1;
-
 // Notification color palette
 $error-red: #ff0000;
 $error-pink: rgba(255, 229, 229, 0.9);
@@ -25,20 +26,124 @@ $clock-widget-blue: #4a90e2;
 $clock-widget-green: #6a9c53;
 $clock-widget-maroon: #6b0000;
 $clock-widget-red: #b00000;
-
 // Articker color palette
 $articker-red: #fc1e2b;
 $articker-orange: #ff8201;
 $articker-red-orange-gradient: linear-gradient(90deg, #fc1e2b, #ff8201);
+// Text variables
+$header-color: $pure-black;
+$text-color: $soft-black;
 
+////////////////////////
+/// FONTS:
+///////////////////////
 // Font-variables
 $DistinctDisplay: 'DistinctDisplay';
 $DistinctDisplayItalic: 'DistinctDisplayItalic';
 $DistinctItalic: 'DistinctItalic';
 $DistinctText: 'DistinctText';
-
-// Text variables
-$header-color: $pure-black;
+$Distinct: 'Distinct';
 $header-family: $DistinctDisplay;
-$text-color: $soft-black;
 $text-family: $DistinctText;
+
+////////////////////////
+/// LABEL TOKENS:
+///////////////////////
+
+// Used with the labelText mixin
+// @include labelText($label)
+$button: 'button';
+$cta-sm: 'cta-sm';
+$cta-lg: 'cta-lg';
+$email: 'email';
+$text: 'text';
+$text-badge: 'text-badge';
+
+$display0: 'display0';
+$display1: 'display1';
+$display2: 'display2';
+$display3: 'display3';
+$display4: 'display4';
+
+$heading1: 'heading1';
+$heading2: 'heading2';
+$heading3: 'heading3';
+$heading4: 'heading4';
+
+$body1: 'body1';
+$body2: 'body2';
+$body3: 'body3';
+
+////////////////////////
+/// FONT SIZE TOKENS:
+///////////////////////
+
+:root {
+  --heading-size0: 3.25rem;
+  --heading-size1: 2.44rem;
+  --heading-size2: 1.95rem;
+  --heading-size3: 1.56rem;
+  --heading-size4: 1.56rem;
+
+  --body-size1: 1.25rem;
+  --body-size2: 1rem;
+  --body-size3: 0.75rem;
+
+  --label-size1: 1.25rem;
+  --label-size2: 1rem;
+  --label-size2: 0.75rem;
+
+  @media (max-width: 960px) {
+    --heading-size0: 2.59rem;
+    --heading-size1: 1.83rem;
+    --heading-size2: 1.46rem;
+    --heading-size3: 1.17rem;
+    --heading-size4: 0.94rem;
+
+    --body-size1: 0.94rem;
+    --body-size2: 0.75rem;
+    --body-size3: 0.56rem;
+
+    --label-size1: 1rem;
+    --label-size2: 0.75rem;
+    --label-size2: 0.56rem;
+  }
+
+  @media (min-width: 1800px) {
+    --heading-size0: 4.06rem;
+    --heading-size1: 3.05rem;
+    --heading-size2: 2.44rem;
+    --heading-size3: 1.95rem;
+
+    --body-size1: 1.56rem;
+    --body-size2: 1.25rem;
+    --body-size3: 0.94rem;
+
+    --label-size1: 1.56rem;
+    --label-size2: 1.25rem;
+    --label-size3: 1rem;
+  }
+}
+
+// DISPLAY
+$display-size0: var(--heading-size0);
+$display-size1: var(--heading-size1);
+$display-size2: var(--heading-size2);
+$display-size3: var(--heading-size3);
+$display-size4: var(--heading-size4);
+// HEADING
+$heading-size1: var(--heading-size1);
+$heading-size2: var(--heading-size2);
+$heading-size3: var(--heading-size3);
+$heading-size4: var(--heading-size4);
+// BODY
+$body-size1: var(--body-size1);
+$body-size2: var(--body-size2);
+$body-size3: var(--body-size3);
+// LABELS
+$button-label-size: var(--label-size2);
+$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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.13.0",
+  "version": "1.15.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",