Merge branch 'v3' into v3-petterhh/job-posting-query

varianter · Nov 27, 2024 · 70a0d5c · 70a0d5c
2 parents 55e0e85 + 08593e6
commit 70a0d5c
Show file tree

Hide file tree

Showing 12 changed files with 117 additions and 114 deletions.
diff --git 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
@@ -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
@@ -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.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/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.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
@@ -14,7 +14,7 @@
   gap: 1.5rem;
   display: flex;
   flex-direction: column;
-  flex-wrap: wrap;
+  max-width: 50%;
 }
 
 .badgeWrapper {
@@ -29,7 +29,7 @@
 
 .dotSeperator::after {
   content: "·";
-  margin: 0 0.5rem;
+  margin: 0 0.38rem;
 }
 
 .dotSeperator:last-child:after {
@@ -38,15 +38,15 @@
 }
 
 .varianter {
-  max-width: 537px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  max-width: 80%;
 }
 
 .dotSeperatorVarianter::after {
   content: "·";
-  margin: 0 0.5rem;
+  margin: 0 0.38rem;
 }
 
 .dotSeperatorVarianter:nth-last-child(2)::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/...s/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx b/...s/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
@@ -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;

diff --git 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 {