Merge branch 'main' into fix-ui-state

yext · Nov 15, 2024 · 0dff49c · 0dff49c
2 parents 4462dd9 + 1e0d94a
commit 0dff49c
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 58 deletions.
diff --git a/src/components/puck/Address.tsx b/src/components/puck/Address.tsx
@@ -76,7 +76,7 @@ const Address = ({
 
   return (
     <Section
-      className={`flex flex-col justify-center components ${alignment} font-body-fontWeight text-body-fontSize text-body-color`}
+      className={`flex flex-col justify-center components ${alignment} font-body-fontFamily font-body-fontWeight text-body-fontSize text-body-color`}
       padding={padding}
     >
       {address && (

diff --git a/src/components/puck/Emails.tsx b/src/components/puck/Emails.tsx
@@ -9,9 +9,10 @@ import {
   EntityField,
   YextEntityField,
   YextEntityFieldSelector,
+  getFontWeightOverrideOptions,
 } from "../../index.js";
 
-const emailsVariants = cva("list-inside", {
+const emailsVariants = cva("list-inside font-body-fontFamily", {
   variants: {
     fontSize: {
       default: "text-body-fontSize",
@@ -85,22 +86,6 @@ const EmailsFields: Fields<EmailsProps> = {
       { label: "5xl", value: "5xl" },
     ],
   },
-  fontWeight: {
-    label: "Font Weight",
-    type: "select",
-    options: [
-      { label: "Default", value: "default" },
-      { label: "Thin", value: "thin" },
-      { label: "Extra Light", value: "extralight" },
-      { label: "Light", value: "light" },
-      { label: "Normal", value: "normal" },
-      { label: "Medium", value: "medium" },
-      { label: "Semibold", value: "semibold" },
-      { label: "Bold", value: "bold" },
-      { label: "Extrabold", value: "extrabold" },
-      { label: "Black", value: "black" },
-    ],
-  },
   color: {
     label: "Color",
     type: "select",
@@ -182,6 +167,19 @@ export const EmailsComponent: ComponentConfig<EmailsProps> = {
     includeHyperlink: true,
     listLength: 5,
   },
+  resolveFields: async () => {
+    const fontWeightOptions = await getFontWeightOverrideOptions({
+      fontCssVariable: `--fontFamily-body-fontFamily`,
+    });
+    return {
+      ...EmailsFields,
+      fontWeight: {
+        label: "Font Weight",
+        type: "select",
+        options: fontWeightOptions,
+      },
+    };
+  },
   render: (props) => <Emails {...props} />,
 };
 

diff --git a/src/components/puck/GetDirections.tsx b/src/components/puck/GetDirections.tsx
@@ -121,7 +121,7 @@ const GetDirections = ({
 
   return (
     <Section
-      className={`flex flex-col justify-center components ${alignment} font-body-fontWeight text-body-fontSize text-body-color`}
+      className={`flex flex-col justify-center components ${alignment} font-body-fontFamily font-body-fontWeight text-body-fontSize text-body-color`}
       padding={padding}
     >
       <Button

diff --git a/src/components/puck/HoursStatus.tsx b/src/components/puck/HoursStatus.tsx
@@ -79,7 +79,10 @@ const HoursStatusWrapper: React.FC<HoursStatusProps> = ({
     <EntityField displayName="Hours" fieldId={hoursField.field}>
       <HoursStatus
         hours={hours}
-        className={yextCn("font-semibold mb-2", className)}
+        className={yextCn(
+          "components font-semibold mb-2 font-body-fontFamily",
+          className
+        )}
         currentTemplate={showCurrentStatus ? undefined : () => <></>}
         separatorTemplate={showCurrentStatus ? undefined : () => <></>}
         dayOfWeekTemplate={showDayNames ? undefined : () => <></>}

diff --git a/src/components/puck/HoursTable.tsx b/src/components/puck/HoursTable.tsx
@@ -99,7 +99,7 @@ const HoursTable = ({
 
   return (
     <Section
-      className={`flex flex-col justify-center components ${alignment} font-body-fontWeight text-body-fontSize text-body-color`}
+      className={`flex flex-col justify-center components ${alignment} font-body-fontFamily font-body-fontWeight text-body-fontSize text-body-color`}
       padding={padding}
     >
       <div>

diff --git a/src/components/puck/Phone.tsx b/src/components/puck/Phone.tsx
@@ -7,24 +7,25 @@ import {
   EntityField,
   YextEntityField,
   YextEntityFieldSelector,
+  getFontWeightOverrideOptions,
 } from "../../index.js";
 import { Phone as PhoneIcon } from "lucide-react";
 
 const phoneVariants = cva(
-  "components flex gap-2 items-center text-body-fontSize",
+  "components flex gap-2 items-center text-body-fontSize font-body-fontFamily",
   {
     variants: {
       fontWeight: {
         default: "font-body-fontWeight",
-        thin: "font-thin",
-        extralight: "font-extralight",
-        light: "font-light",
-        normal: "font-normal",
-        medium: "font-medium",
-        semibold: "font-semibold",
-        bold: "font-bold",
-        extrabold: "font-extrabold",
-        black: "font-black",
+        "100": "font-thin",
+        "200": "font-extralight",
+        "300": "font-light",
+        "400": "font-normal",
+        "500": "font-medium",
+        "600": "font-semibold",
+        "700": "font-bold",
+        "800": "font-extrabold",
+        "900": "font-black",
       },
       color: {
         default: "text-body-color",
@@ -145,6 +146,19 @@ export const PhoneComponent: ComponentConfig<PhoneProps> = {
       constantValue: "",
     },
   },
+  resolveFields: async () => {
+    const fontWeightOptions = await getFontWeightOverrideOptions({
+      fontCssVariable: `--fontFamily-body-fontFamily`,
+    });
+    return {
+      ...PhoneFields,
+      fontWeight: {
+        label: "Font Weight",
+        type: "select",
+        options: fontWeightOptions,
+      },
+    };
+  },
   render: (props) => <Phone {...props} />,
 };
 

diff --git a/src/components/puck/TextList.tsx b/src/components/puck/TextList.tsx
@@ -7,23 +7,24 @@ import {
   EntityField,
   YextEntityField,
   YextEntityFieldSelector,
+  getFontWeightOverrideOptions,
 } from "../../index.js";
 
 const textListVariants = cva(
-  "list-disc components list-inside text-body-fontSize",
+  "list-disc components list-inside text-body-fontSize font-body-fontFamily",
   {
     variants: {
       fontWeight: {
         default: "font-body-fontWeight",
-        thin: "font-thin",
-        extralight: "font-extralight",
-        light: "font-light",
-        normal: "font-normal",
-        medium: "font-medium",
-        semibold: "font-semibold",
-        bold: "font-bold",
-        extrabold: "font-extrabold",
-        black: "font-black",
+        "100": "font-thin",
+        "200": "font-extralight",
+        "300": "font-light",
+        "400": "font-normal",
+        "500": "font-medium",
+        "600": "font-semibold",
+        "700": "font-bold",
+        "800": "font-extrabold",
+        "900": "font-black",
       },
       color: {
         default: "text-palette-body-color",
@@ -68,22 +69,6 @@ const textListFields: Fields<TextListProps> = {
       includeListsOnly: true,
     },
   }),
-  fontWeight: {
-    label: "Font Weight",
-    type: "select",
-    options: [
-      { label: "Default", value: "default" },
-      { label: "Thin", value: "thin" },
-      { label: "Extra Light", value: "extralight" },
-      { label: "Light", value: "light" },
-      { label: "Normal", value: "normal" },
-      { label: "Medium", value: "medium" },
-      { label: "Semibold", value: "semibold" },
-      { label: "Bold", value: "bold" },
-      { label: "Extrabold", value: "extrabold" },
-      { label: "Black", value: "black" },
-    ],
-  },
   padding: {
     label: "Padding",
     type: "radio",
@@ -163,6 +148,19 @@ export const TextListComponent: ComponentConfig<TextListProps> = {
       constantValue: [],
     },
   },
+  resolveFields: async () => {
+    const fontWeightOptions = await getFontWeightOverrideOptions({
+      fontCssVariable: `--fontFamily-body-fontFamily`,
+    });
+    return {
+      ...textListFields,
+      fontWeight: {
+        label: "Font Weight",
+        type: "select",
+        options: fontWeightOptions,
+      },
+    };
+  },
   render: (props) => <TextList {...props} />,
 };
 

diff --git a/src/components/puck/atoms/button.tsx b/src/components/puck/atoms/button.tsx
@@ -5,7 +5,7 @@ import { clsx } from "clsx";
 import { NumberOrDefault } from "../../editor/NumberOrDefaultField.tsx";
 
 const buttonVariants = cva(
-  "py-4 components inline-flex items-center justify-center whitespace-nowrap rounded-button-borderRadius text-button-fontSize font-button-fontWeight ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ",
+  "py-4 components inline-flex items-center justify-center whitespace-nowrap rounded-button-borderRadius text-button-fontSize font-body-fontFamily font-button-fontWeight ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ",
   {
     variants: {
       variant: {