Merge branch 'v3' into v3-hero

src/components/employeeCard/EmployeeCard.tsx

@@ -13,12 +13,14 @@ export interface EmployeeCardProps {
   employee: ChewbaccaEmployee;
   employeePageSlug?: string;
   language: string;
+  overrideTitle?: string;
 }
 
 export default function EmployeeCard({
   employee,
   employeePageSlug,
   language,
+  overrideTitle,
 }: EmployeeCardProps) {
   const t = useTranslations("employee_card");
   return (
@@ -51,16 +53,22 @@ export default function EmployeeCard({
             </Text>
 
             <div className={styles.employeeRole}>
-              {employee.competences.map((competence) => (
-                <Text
-                  className={styles.employeeRoleDot}
-                  type="labelRegular"
-                  key={competence}
-                  as="span"
-                >
-                  {t(competence)}
+              {overrideTitle ? (
+                <Text type="labelRegular" as="span">
+                  {overrideTitle}
                 </Text>
-              ))}
+              ) : (
+                employee.competences.map((competence) => (
+                  <Text
+                    className={styles.employeeRoleDot}
+                    type="labelRegular"
+                    key={competence}
+                    as="span"
+                  >
+                    {t(competence)}
+                  </Text>
+                ))
+              )}
             </div>
 
             <Text type="bodyExtraSmall" className={styles.employeeEmail}>

src/components/employeeCard/employeeCard.module.css

@@ -9,6 +9,8 @@
   flex-direction: column;
   justify-content: space-between;
   gap: 0.375rem;
+
+  overflow: hidden;
 }
 
 .contactInfo {
@@ -27,6 +29,12 @@
 .employeePhone a {
   color: currentColor;
 }
+.employeeEmail a {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 
 .employeeWrapper {
   container-type: inline-size;

src/components/sections/article/Article.tsx

@@ -24,7 +24,7 @@ const Article = ({ article }: ArticleProps) => {
         )}
         <div className={styles.content}>
           <div>
-            <Text type="labelSmall">{article.tag}</Text>
+            <Text type="labelRegular">{article.tag}</Text>
             <Text type="h2">{article.basicTitle}</Text>
           </div>
           {article.richText && <RichText value={article.richText} />}

src/components/sections/contact-box/ContactBox.tsx

@@ -2,14 +2,11 @@ import { Suspense } from "react";
 
 import { EmployeeCardSkeleton } from "src/components/employeeCard/EmployeeCard";
 import Text from "src/components/text/Text";
-import { ChewbaccaEmployee } from "src/types/employees";
-import { fetchEmployeesByEmails } from "src/utils/employees";
 import { ContactBoxSection } from "studio/lib/interfaces/pages";
-import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
-import { loadStudioQuery } from "studio/lib/store";
 
+import { fetchEmployeesWithTags, getEmployeesPageSlug } from "./api";
 import styles from "./contact-box.module.css";
-import ContactSelector, { EmployeeAndTag } from "./ContactSelector";
+import ContactSelector from "./ContactSelector";
 
 export interface ContactBoxProps {
   section: ContactBoxSection;
@@ -20,21 +17,13 @@ export default async function ContactBox({
   section,
   language,
 }: ContactBoxProps) {
-  const employeesPageRes = await loadStudioQuery<{ slug: string }>(
-    EMPLOYEE_PAGE_SLUG_QUERY,
-    {
-      language,
-    },
-  );
-  const employeesPageSlug = employeesPageRes.data.slug;
+  const employeesPageSlug = await getEmployeesPageSlug(language);
 
-  const contactPoints = fetchEmployeesByEmails(
-    section.contactPoints.map((contactPoint) => contactPoint.email),
-  ).then((result) =>
-    result.ok
-      ? result.value.map((e) => employeeAndTag(e, section.contactPoints))
-      : [],
-  );
+  if (!employeesPageSlug) {
+    return null;
+  }
+
+  const contactPoints = fetchEmployeesWithTags(section.contactPoints);
 
   const backgroundClass =
     section.background === "light" ? styles["contactBox__inner--light"] : "";
@@ -68,20 +57,3 @@ export default async function ContactBox({
     </section>
   );
 }
-
-function employeeAndTag(
-  employee: ChewbaccaEmployee,
-  contactPoints: ContactBoxSection["contactPoints"],
-): EmployeeAndTag {
-  const tag =
-    contactPoints.find((contactPoint) => contactPoint.email === employee.email)
-      ?.tag ?? "";
-  return {
-    employee,
-    tag,
-    tagSlug: slugify(tag),
-  };
-}
-function slugify(tag: string) {
-  return tag.toLowerCase().replace(/ /g, "-");
-}

src/components/sections/contact-box/ContactSelector.tsx

@@ -4,18 +4,12 @@ import { use, useState } from "react";
 
 import EmployeeCard from "src/components/employeeCard/EmployeeCard";
 import { Tag } from "src/components/tag";
-import { ChewbaccaEmployee } from "src/types/employees";
 
 import styles from "./contact-box.module.css";
-
-export type EmployeeAndTag = {
-  employee: ChewbaccaEmployee;
-  tag: string;
-  tagSlug: string;
-};
+import { EmployeeAndMetadata } from "./types";
 
 export type ContactSelectorProps = {
-  contactPoints: Promise<EmployeeAndTag[]>;
+  contactPoints: Promise<EmployeeAndMetadata[]>;
   employeesPageSlug: string;
   language: string;
   background?: "dark" | "light";
@@ -68,6 +62,7 @@ export default function ContactSelector({
               employee={contactPoint.employee}
               employeePageSlug={employeesPageSlug}
               language={language}
+              overrideTitle={contactPoint.overrideTitle}
             />
           </div>
         ))}

src/components/sections/contact-box/api.ts

@@ -0,0 +1,58 @@
+import { ChewbaccaEmployee } from "src/types/employees";
+import { fetchEmployeesByEmails } from "src/utils/employees";
+import { ContactBoxSection } from "studio/lib/interfaces/pages";
+import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
+import { loadStudioQuery } from "studio/lib/store";
+
+import { EmployeeAndMetadata } from "./types";
+
+export async function getEmployeesPageSlug(
+  language: string,
+): Promise<string | undefined> {
+  const employeesPageRes = await loadStudioQuery<{ slug: string }>(
+    EMPLOYEE_PAGE_SLUG_QUERY,
+    {
+      language,
+    },
+    {
+      cache: "force-cache",
+      next: {
+        // Cache for 1 day.. Not likely to change (or is it???)
+        revalidate: 60 * 60 * 24,
+      },
+    },
+  );
+
+  return employeesPageRes.data?.slug;
+}
+
+export async function fetchEmployeesWithTags(
+  contactPoints: ContactBoxSection["contactPoints"],
+) {
+  const contacts = fetchEmployeesByEmails(
+    contactPoints.map((contactPoint) => contactPoint.email),
+  ).then((result) =>
+    result.ok
+      ? result.value.map((e) => employeeAndMetadata(e, contactPoints))
+      : [],
+  );
+  return contacts;
+}
+
+function employeeAndMetadata(
+  employee: ChewbaccaEmployee,
+  contactPoints: ContactBoxSection["contactPoints"],
+): EmployeeAndMetadata {
+  const metadata = contactPoints.find(
+    (contactPoint) => contactPoint.email === employee.email,
+  );
+  return {
+    employee,
+    tag: metadata?.tag ?? "",
+    tagSlug: slugify(metadata?.tag ?? ""),
+    overrideTitle: metadata?.overrideTitle ?? "",
+  };
+}
+function slugify(tag: string) {
+  return tag.toLowerCase().replace(/ /g, "-");
+}

src/components/sections/contact-box/types.ts

@@ -0,0 +1,8 @@
+import { ChewbaccaEmployee } from "src/types/employees";
+
+export type EmployeeAndMetadata = {
+  employee: ChewbaccaEmployee;
+  tag: string;
+  tagSlug: string;
+  overrideTitle: string;
+};

src/components/text/Text.stories.tsx

@@ -17,7 +17,6 @@ const meta: Meta<typeof Text> = {
           "h4",
           "h5",
           "h6",
-          "labelSmall",
           "labelRegular",
           "quoteItalic",
           "quoteNormal",
@@ -90,13 +89,6 @@ export const H6: Story = {
   },
 };
 
-export const LabelSmall: Story = {
-  args: {
-    type: "labelSmall",
-    children: "This is a Label Small text",
-  },
-};
-
 export const LabelRegular: Story = {
   args: {
     type: "labelRegular",

src/components/text/Text.tsx

@@ -8,8 +8,6 @@ export type TextType =
   | "h5"
   | "h6"
   | "desktopLink"
-  | "desktopLinkBig"
-  | "labelSmall"
   | "labelRegular"
   | "labelLarge"
   | "quoteItalic"
@@ -30,8 +28,6 @@ const elementMap: { [key in TextType]: keyof JSX.IntrinsicElements } = {
   h5: "h5",
   h6: "h6",
   desktopLink: "p",
-  desktopLinkBig: "p",
-  labelSmall: "span",
   labelRegular: "span",
   labelLarge: "span",
   quoteItalic: "p",
@@ -53,8 +49,6 @@ const classMap: { [key in TextType]?: string } = {
   h5: styles.h5,
   h6: styles.h6,
   desktopLink: styles.desktopLink,
-  desktopLinkBig: styles.desktopLinkBig,
-  labelSmall: styles.labelSmall,
   labelRegular: styles.labelRegular,
   labelLarge: styles.labelLarge,
   quoteItalic: styles.quoteItalic,