From 8fb369c1d41b079b232255e32a2131a6e0eee19b Mon Sep 17 00:00:00 2001
From: anemne <63043552+anemne@users.noreply.github.com>
Date: Wed, 27 Nov 2024 08:42:21 +0100
Subject: [PATCH 1/2] v3 - customer case styling fixes  (#911)

* fix styling on prijectinfo section

* changes consultant card and wrapping in project info container

* linting fixes
---
 messages/no.json                              |  2 +-
 .../CustomerCaseEmployeeCard.tsx              | 75 ++++++-------------
 .../customerCaseEmployeeCard.module.css       | 40 ++++------
 .../customerCase/customerCase.module.css      |  1 -
 .../customerCaseProjectInfo.module.css        |  6 +-
 .../CustomerCaseConsultants.tsx               |  2 +-
 src/components/text/text.module.css           | 14 +++-
 7 files changed, 57 insertions(+), 83 deletions(-)

diff --git a/messages/no.json b/messages/no.json
index cfb522435..31edc26ed 100644
--- a/messages/no.json
+++ b/messages/no.json
@@ -9,7 +9,7 @@
     "industry": "Bransje",
     "delivery": "Leveranse",
     "variants": "Variantene",
-    "in_project": "Varianter i prosjektet",
+    "in_project": "Varianter i arbeid",
     "design": "Design",
     "development": "Utvikling",
     "project_management": "Prosjektledelse",
diff --git a/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx b/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx
index 14ec24d4c..bab24148b 100644
--- a/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx
+++ b/src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx
@@ -1,13 +1,8 @@
 import Image from "next/image";
-import Link from "next/link";
-import { useTranslations } from "next-intl";
 
-import CustomLink from "src/components/link/CustomLink";
 import Text from "src/components/text/Text";
 import formatPhoneNumber from "src/components/utils/formatPhoneNumber";
 import { ChewbaccaEmployee } from "src/types/employees";
-import { aliasFromEmail } from "src/utils/employees";
-import { LinkType } from "studio/lib/interfaces/navigation";
 
 import styles from "./customerCaseEmployeeCard.module.css";
 
@@ -18,13 +13,8 @@ export interface CustomerCaseEmployeeCardProps {
 }
 
 export default function CustomerCaseEmployeeCard({
-  currentLanguage,
   employee,
-  employeePageSlug,
 }: CustomerCaseEmployeeCardProps) {
-  const title = <p className={styles.employeeName}>{employee.name}</p>;
-  const t = useTranslations("custom_link");
-
   return (
     employee.imageThumbUrl &&
     employee.name &&
@@ -39,49 +29,32 @@ export default function CustomerCaseEmployeeCard({
           />
         </div>
         <div className={styles.employeeInfo}>
-          {employeePageSlug !== undefined ? (
-            <Link
-              href={`/${currentLanguage}/${employeePageSlug}/${aliasFromEmail(employee.email)}`}
-            >
-              {title}
-            </Link>
-          ) : (
-            title
-          )}
-          <div className={styles.employeeRole}>
-            {employee.competences.map((competence) => (
-              <Text
-                className={styles.employeeRoleDot}
-                type="labelRegular"
-                key={competence}
-              >
-                {competence}
+          <div className={styles.employeeName}>
+            <Text type="bodyNormal">{employee.name}</Text>
+            <div className={styles.employeeRole}>
+              {employee.competences.map((competence) => (
+                <Text
+                  className={styles.employeeRoleDot}
+                  type="labelRegular"
+                  key={competence}
+                >
+                  {competence}
+                </Text>
+              ))}
+            </div>
+          </div>
+          <div>
+            {employee.email && (
+              <Text type="bodyExtraSmall" className={styles.employeeEmail}>
+                {employee.email}
+              </Text>
+            )}
+            {employee.telephone && (
+              <Text type="bodyExtraSmall" className={styles.employeeTelephone}>
+                {formatPhoneNumber(employee.telephone)}
               </Text>
-            ))}
+            )}
           </div>
-          {employee.email && (
-            <p className={styles.employeeEmail}>{employee.email}</p>
-          )}
-          {employee.telephone && (
-            <p className={styles.employeeTelephone}>
-              {formatPhoneNumber(employee.telephone)}
-            </p>
-          )}
-          {employeePageSlug && (
-            <CustomLink
-              size={"small"}
-              link={{
-                _key: "go-to-mini-cv",
-                _type: "link",
-                linkType: LinkType.Internal,
-                linkTitle: t("visit_cv"),
-                language: currentLanguage,
-                internalLink: {
-                  _ref: `${employeePageSlug}/${aliasFromEmail(employee.email)}`,
-                },
-              }}
-            />
-          )}
         </div>
       </div>
     )
diff --git a/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css b/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css
index fbab4355c..f91cd203a 100644
--- a/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css
+++ b/src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css
@@ -2,6 +2,8 @@
   display: flex;
   width: 100%;
   gap: 1rem;
+  min-width: 400px;
+  width: fit-content;
 }
 
 .employeeImage {
@@ -10,26 +12,28 @@
   align-items: center;
   background-color: var(--primary-black);
   border-radius: 12px;
-  height: 125px;
-  width: 50%;
-  padding: 1rem;
   position: relative;
+  width: 96px;
+  height: 94px;
 }
 
 .employeeInfo {
   display: flex;
   flex-direction: column;
-  width: 100%;
-  gap: 0.5rem;
-  white-space: nowrap;
+  justify-content: space-between;
+  height: 100%;
+}
+
+.employeeName {
+  width: fit-content;
+  display: flex;
+  flex-direction: column;
 }
 
 .employeeRole {
   display: flex;
+  width: fit-content;
   flex-direction: row;
-  overflow: visible;
-  align-self: stretch;
-  width: 100%;
 }
 
 .employeeRoleDot::after {
@@ -42,24 +46,10 @@
   margin: 0;
 }
 
-.employeeName {
-  color: var(--text-primary);
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 120%;
-}
-
 .employeeRole {
-  color: var(--text-primary);
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 120%;
+  color: var(--text-tertiary);
 }
-
 .employeeEmail,
 .employeeTelephone {
-  color: var(--text-primary);
-  font-size: 0.75rem;
-  font-weight: 400;
-  line-height: 120%;
+  color: var(--text-tertiary);
 }
diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css
index 5fd4bfcd3..c5ace422a 100644
--- a/src/components/customerCases/customerCase/customerCase.module.css
+++ b/src/components/customerCases/customerCase/customerCase.module.css
@@ -55,7 +55,6 @@
   flex-direction: column;
   align-self: center;
   width: 100%;
-  max-width: 960px;
 }
 
 .sectionsWrapper {
diff --git a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
index c652f6ff6..5df05baa3 100644
--- a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
+++ b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
@@ -14,7 +14,7 @@
   gap: 1.5rem;
   display: flex;
   flex-direction: column;
-  flex-wrap: wrap;
+  max-width: 50%;
 }
 
 .badgeWrapper {
@@ -38,10 +38,10 @@
 }
 
 .varianter {
-  max-width: 537px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  max-width: 80%;
 }
 
 .dotSeperatorVarianter::after {
@@ -57,6 +57,7 @@
 .projectInfoItem {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
 }
 
 .title {
@@ -67,6 +68,7 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
+  flex-wrap: wrap;
 }
 
 .preFancyCharacter {
diff --git a/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx b/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx
index 0970b56c7..980150d1a 100644
--- a/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx
+++ b/src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx
@@ -29,7 +29,7 @@ export default async function CustomerCaseConsultants({
 
   return (
     <div className={styles.wrapper}>
-      <Text type={"h3"}>{t("in_project")}</Text>
+      <Text type={"h4"}>{t("in_project")}</Text>
       <div className={styles.content}>
         {consultants.map((consultant) => (
           <CustomerCaseEmployeeCard
diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css
index b820bfa94..3b181f971 100644
--- a/src/components/text/text.module.css
+++ b/src/components/text/text.module.css
@@ -1,4 +1,5 @@
 :where(.desktopLink, .h1, .h2, .h3, .h4, .h5, .h6, .bodyXl) {
+  margin: 0;
   font-family: var(--font-britti-sans);
 }
 
@@ -94,8 +95,17 @@
   line-height: 150%;
 }
 
-/* TODO: add font variables */
-/* .bodyExtraSmall */
+.bodyExtraSmall {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.14px;
+
+  @media (max-width: 375px) {
+    font-size: 12px;
+    letter-spacing: 0.12px;
+  }
+}
 
 .labelSmall {
   font-size: 1rem;

From 08593e63e6a4d90c44dc7924fe8030065ed83957 Mon Sep 17 00:00:00 2001
From: Ida Marie Andreassen <43541032+idamand@users.noreply.github.com>
Date: Wed, 27 Nov 2024 10:34:48 +0100
Subject: [PATCH 2/2] V3 add first names to project info (#913)

* Refactor consultants to a list and include first name in Sanity

* Refactor project info to include first names
---
 .../customerCase/CustomerCase.tsx             |  7 +--
 .../projectInfo/CustomerCaseProjectInfo.tsx   | 43 ++++++++++---------
 .../customerCaseProjectInfo.module.css        |  4 +-
 studioShared/lib/interfaces/customerCases.ts  |  8 +++-
 studioShared/lib/queries/customerCases.ts     |  6 ++-
 .../schemas/fields/customerCaseProjectInfo.ts | 23 +++++++++-
 6 files changed, 60 insertions(+), 31 deletions(-)

diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
index dba1236ab..1b499ca35 100644
--- a/src/components/customerCases/customerCase/CustomerCase.tsx
+++ b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -20,7 +20,7 @@ export default async function CustomerCase({
   customerCasesPagePath,
 }: CustomerCaseProps) {
   const consultantsResult = await fetchEmployeesByEmails(
-    customerCase.projectInfo.consultants,
+    customerCase.projectInfo.consultants.map((e) => e.employeeEmail),
   );
 
   return (
@@ -32,10 +32,7 @@ export default async function CustomerCase({
         <hr className={styles.divider} />
         {consultantsResult.ok && (
           <div className={styles.projectInfoWrapper}>
-            <CustomerCaseProjectInfo
-              projectInfo={customerCase.projectInfo}
-              consultantsInProject={consultantsResult.value}
-            />
+            <CustomerCaseProjectInfo projectInfo={customerCase.projectInfo} />
           </div>
         )}
         <div className={styles.mainImageWrapper}>
diff --git a/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx b/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx
index 08cddba02..3a9561cd3 100644
--- a/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx
+++ b/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx
@@ -3,7 +3,6 @@ import { getTranslations } from "next-intl/server";
 import Badge from "src/components/badge/Badge";
 import CustomLink from "src/components/link/CustomLink";
 import Text from "src/components/text/Text";
-import { ChewbaccaEmployee } from "src/types/employees";
 import { LinkType } from "studio/lib/interfaces/navigation";
 import {
   CustomerCaseProjectInfo as CustomerCaseCaseProjectInfoObject,
@@ -14,15 +13,17 @@ import styles from "./customerCaseProjectInfo.module.css";
 
 interface CustomerCaseProjectInfoProps {
   projectInfo: CustomerCaseCaseProjectInfoObject;
-  consultantsInProject: ChewbaccaEmployee[];
 }
 
 export default async function CustomerCaseProjectInfo({
   projectInfo,
-  consultantsInProject,
 }: CustomerCaseProjectInfoProps) {
   const t = await getTranslations("customer_case");
 
+  const consultantsFirstNames = projectInfo.consultants.map(
+    (n) => n.employeeFirstName,
+  );
+
   return (
     <>
       <div className={styles.projectInfo}>
@@ -39,24 +40,26 @@ export default async function CustomerCaseProjectInfo({
               </div>
             </div>
           )}
-          <div>
-            <Text className={styles.title} type="labelRegular">
-              {t("variants").toUpperCase()}
-            </Text>
-            <div className={styles.varianter}>
-              <Text className={styles.preFancyCharacter}>【 </Text>
-              {consultantsInProject.map((c) => (
-                <Text
-                  key={c.name}
-                  type="bodyNormal"
-                  className={styles.dotSeperatorVarianter}
-                >
-                  {c.name}
-                </Text>
-              ))}
-              <Text className={styles.afterFancyCharacter}> 】</Text>
+          {consultantsFirstNames && (
+            <div>
+              <Text className={styles.title} type="labelRegular">
+                {t("variants").toUpperCase()}
+              </Text>
+              <div className={styles.varianter}>
+                <Text className={styles.preFancyCharacter}>【 </Text>
+                {consultantsFirstNames.map((name) => (
+                  <Text
+                    key={name}
+                    type="bodyNormal"
+                    className={styles.dotSeperatorVarianter}
+                  >
+                    {name}
+                  </Text>
+                ))}
+                <Text className={styles.afterFancyCharacter}> 】</Text>
+              </div>
             </div>
-          </div>
+          )}
           {projectInfo.collaborators && (
             <div>
               <Text className={styles.title} type="labelRegular">
diff --git a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
index 5df05baa3..031cb6108 100644
--- a/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
+++ b/src/components/customerCases/customerCase/projectInfo/customerCaseProjectInfo.module.css
@@ -29,7 +29,7 @@
 
 .dotSeperator::after {
   content: "·";
-  margin: 0 0.5rem;
+  margin: 0 0.38rem;
 }
 
 .dotSeperator:last-child:after {
@@ -46,7 +46,7 @@
 
 .dotSeperatorVarianter::after {
   content: "·";
-  margin: 0 0.5rem;
+  margin: 0 0.38rem;
 }
 
 .dotSeperatorVarianter:nth-last-child(2)::after {
diff --git a/studioShared/lib/interfaces/customerCases.ts b/studioShared/lib/interfaces/customerCases.ts
index bb779c5c8..ec320c9c1 100644
--- a/studioShared/lib/interfaces/customerCases.ts
+++ b/studioShared/lib/interfaces/customerCases.ts
@@ -12,7 +12,13 @@ export interface CustomerCaseProjectInfo {
   sector: string[];
   collaborators: string[];
   deliveries: Deliveries;
-  consultants: string[];
+  consultants: Consultants[];
+}
+
+export interface Consultants {
+  employeeEmail: string;
+  employeeFirstName: string;
+  _key: string;
 }
 
 export interface CustomerSector {
diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts
index fade56c2e..fd9055f6b 100644
--- a/studioShared/lib/queries/customerCases.ts
+++ b/studioShared/lib/queries/customerCases.ts
@@ -65,7 +65,11 @@ export const CUSTOMER_CASE_QUERY = groq`
         }
       },
       collaborators,
-      consultants
+      "consultants": consultants[] {
+        _key,  
+        employeeEmail,
+        employeeFirstName,
+      }
     },
     "sections": sections[] {
       _key,
diff --git a/studioShared/schemas/fields/customerCaseProjectInfo.ts b/studioShared/schemas/fields/customerCaseProjectInfo.ts
index ab79f06ee..83d806058 100644
--- a/studioShared/schemas/fields/customerCaseProjectInfo.ts
+++ b/studioShared/schemas/fields/customerCaseProjectInfo.ts
@@ -55,9 +55,28 @@ export const customerCaseProjectInfo = defineField({
     defineField({
       name: "consultants",
       description:
-        "The consultants enrolled in the project. Use employee emails (e.g. 'oms@variant.no').",
+        "The consultants enrolled in the project. Use employee emails and first names  (e.g. 'oms@variant.no' and Odd Morten).",
       type: "array",
-      of: [{ type: "email" }],
+      of: [
+        {
+          type: "object",
+          title: "List of employees in project",
+          name: "employeesInProjectList",
+          fields: [
+            {
+              name: "employeeEmail",
+              title: "Add employee email (e.g. oms@variant.no)",
+              type: "email",
+            },
+            {
+              name: "employeeFirstName",
+              title:
+                "Add the first name(s) of the consultant corresponding to the email above. If there are multiple employees with the same name, feel free to include the initials of the last name (e.g. Odd Morten S.)",
+              type: "string",
+            },
+          ],
+        },
+      ],
     }),
     defineField({
       name: "collaborators",