cleanup in variablenames and styling

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "i18n-ally.localesPaths": ["i18n", "messages", "src/i18n"]
+}

messages/en.json

@@ -18,5 +18,10 @@
   "custom_link": {
     "visit_cv": "Visit mini-CV",
     "read_more": "Read more"
+  },
+  "employee_card": {
+    "show": "Show",
+    "of": "of",
+    "consultants": "consultants"
   }
 }

messages/no.json

@@ -18,5 +18,10 @@
   "custom_link": {
     "visit_cv": "Gå til mini-CV",
     "read_more": "Les mer"
+  },
+  "employee_card": {
+    "show": "Vis",
+    "of": "av",
+    "consultants": "konsulenter"
   }
 }

messages/se.json

@@ -18,5 +18,10 @@
   "custom_link": {
     "visit_cv": "Besök mini-CV",
     "read_more": "Läs mer"
+  },
+  "employee_card": {
+    "show": "Visa",
+    "of": "av",
+    "consultants": "konsulentar"
   }
 }

src/components/consultantCard/ConsultantCard.tsx → src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard.tsx

@@ -9,56 +9,62 @@ import { ChewbaccaEmployee } from "src/types/employees";
 import { aliasFromEmail } from "src/utils/employees";
 import { LinkType } from "studio/lib/interfaces/navigation";
 
-import styles from "./consultantCard.module.css";
+import styles from "./customerCaseEmployeeCard.module.css";
 
-export interface ConsultantCardProps {
+export interface CustomerCaseEmployeeCardProps {
   currentLanguage: string;
-  consultant: ChewbaccaEmployee;
+  employee: ChewbaccaEmployee;
   employeePageSlug?: string;
 }
 
-export default function ConsultantCard({
+export default function CustomerCaseEmployeeCard({
   currentLanguage,
-  consultant,
+  employee,
   employeePageSlug,
-}: ConsultantCardProps) {
-  const title = <p className={styles.consultantName}>{consultant.name}</p>;
+}: CustomerCaseEmployeeCardProps) {
+  const title = <p className={styles.employeeName}>{employee.name}</p>;
   const t = useTranslations("custom_link");
 
   return (
-    consultant.imageThumbUrl &&
-    consultant.name &&
-    consultant.email && (
-      <div key={consultant.email} className={styles.consultant}>
-        <div className={styles.consultantImage}>
+    employee.imageThumbUrl &&
+    employee.name &&
+    employee.email && (
+      <div key={employee.email} className={styles.employee}>
+        <div className={styles.employeeImage}>
           <Image
-            src={consultant.imageUrl ?? consultant.imageThumbUrl}
-            alt={consultant.name}
+            src={employee.imageUrl ?? employee.imageThumbUrl}
+            alt={employee.name}
             objectFit="cover"
             fill={true}
           />
         </div>
-        <div className={styles.consultantInfo}>
+        <div className={styles.employeeInfo}>
           {employeePageSlug !== undefined ? (
             <Link
-              href={`/${currentLanguage}/${employeePageSlug}/${aliasFromEmail(consultant.email)}`}
+              href={`/${currentLanguage}/${employeePageSlug}/${aliasFromEmail(employee.email)}`}
             >
               {title}
             </Link>
           ) : (
             title
           )}
-          {consultant.competences.map((competence) => (
-            <Text type="labelRegular" key={competence}>
-              {competence}
-            </Text>
-          ))}
-          {consultant.email && (
-            <p className={styles.consultantEmail}>{consultant.email}</p>
+          <div className={styles.employeeRole}>
+            {employee.competences.map((competence) => (
+              <Text
+                className={styles.employeeRoleDot}
+                type="labelRegular"
+                key={competence}
+              >
+                {competence}
+              </Text>
+            ))}
+          </div>
+          {employee.email && (
+            <p className={styles.employeeEmail}>{employee.email}</p>
           )}
-          {consultant.telephone && (
-            <p className={styles.consultantTelephone}>
-              {formatPhoneNumber(consultant.telephone)}
+          {employee.telephone && (
+            <p className={styles.employeeTelephone}>
+              {formatPhoneNumber(employee.telephone)}
             </p>
           )}
           {employeePageSlug && (
@@ -71,7 +77,7 @@ export default function ConsultantCard({
                 linkTitle: t("visit_cv"),
                 language: currentLanguage,
                 internalLink: {
-                  _ref: `${employeePageSlug}/${aliasFromEmail(consultant.email)}`,
+                  _ref: `${employeePageSlug}/${aliasFromEmail(employee.email)}`,
                 },
               }}
             />

src/components/consultantCard/consultantCard.module.css → src/components/customerCaseEmployeeCard/customerCaseEmployeeCard.module.css

@@ -1,10 +1,10 @@
-.consultant {
+.employee {
   display: flex;
   width: 100%;
   gap: 1rem;
 }
 
-.consultantImage {
+.employeeImage {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -16,30 +16,49 @@
   position: relative;
 }
 
-.consultantInfo {
+.employeeInfo {
   display: flex;
   flex-direction: column;
-  width: 50%;
+  width: 100%;
   gap: 0.5rem;
+  white-space: nowrap;
+}
+
+.employeeRole {
+  display: flex;
+  flex-direction: row;
+  overflow: visible;
+  align-self: stretch;
+  width: 100%;
+}
+
+.employeeRoleDot::after {
+  content: "·";
+  margin: 0 0.5rem;
+}
+
+.employeeRoleDot:last-child:after {
+  content: "";
+  margin: 0;
 }
 
-.consultantName {
-  color: #282828;
+.employeeName {
+  color: var(--text-primary);
   font-size: 1rem;
   font-weight: 600;
   line-height: 120%;
 }
 
-.consultantRole {
-  color: #282828;
+.employeeRole {
+  color: var(--text-primary);
   font-size: 1rem;
   font-weight: 400;
   line-height: 120%;
 }
 
-.consultantEmail,
-.consultantTelephone {
-  color: #282828;
+.employeeEmail,
+.employeeTelephone {
+  color: var(--text-primary);
   font-size: 0.75rem;
   font-weight: 400;
   line-height: 120%;

src/components/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 
 import Button from "src/components/buttons/Button";
-import ConsultantCard from "src/components/consultantCard/ConsultantCard";
+import CustomerCaseEmployeeCard from "src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard";
 import { ChewbaccaEmployee } from "src/types/employees";
 import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
 
@@ -57,9 +57,9 @@ export default function ContactSelector({
         ))}
       </div>
       <div className={styles.consultantSection}>
-        <ConsultantCard
+        <CustomerCaseEmployeeCard
           currentLanguage={language}
-          consultant={contactByLocation[selectedOrDefaultLocationId]}
+          employee={contactByLocation[selectedOrDefaultLocationId]}
           employeePageSlug={employeePageSlug}
         />
       </div>

src/components/customerCases/customerCase/sections/customerCaseConsultants/CustomerCaseConsultants.tsx

@@ -1,6 +1,6 @@
 import { getTranslations } from "next-intl/server";
 
-import ConsultantCard from "src/components/consultantCard/ConsultantCard";
+import CustomerCaseEmployeeCard from "src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard";
 import Text from "src/components/text/Text";
 import { ChewbaccaEmployee } from "src/types/employees";
 import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
@@ -32,10 +32,10 @@ export default async function CustomerCaseConsultants({
       <Text type={"h3"}>{t("in_project")}</Text>
       <div className={styles.content}>
         {consultants.map((consultant) => (
-          <ConsultantCard
+          <CustomerCaseEmployeeCard
             key={consultant.email}
             currentLanguage={language}
-            consultant={consultant}
+            employee={consultant}
             employeePageSlug={employeePageSlug}
           />
         ))}

src/components/employeeCard/EmployeeCard.tsx

@@ -0,0 +1,67 @@
+import Image from "next/image";
+import Link from "next/link";
+
+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 styles from "./employeeCard.module.css";
+
+export interface EmployeeCardProps {
+  employee: ChewbaccaEmployee;
+  employeePageSlug?: string;
+  language: string;
+}
+
+export default function EmployeeCard({
+  employee,
+  employeePageSlug,
+  language,
+}: EmployeeCardProps) {
+  return (
+    employee.imageUrl &&
+    employee.name &&
+    employee.email && (
+      <div className={styles.employeeWrapper}>
+        <Link
+          href={`/${language}/${employeePageSlug}/${aliasFromEmail(employee.email)}`}
+        >
+          <div className={styles.employeeImage}>
+            <Image
+              src={employee.imageUrl}
+              alt=""
+              style={{ objectFit: "cover" }}
+              fill={true}
+            />
+          </div>
+        </Link>
+        <div className={styles.employeeInfoWrapper}>
+          <div className={styles.employeeInfo}>
+            <p className={styles.employeeName}>{employee.name}</p>
+            <div className={styles.employeeRole}>
+              {employee.competences.map((competence) => (
+                <>
+                  <Text
+                    className={styles.employeeRoleDot}
+                    type="labelRegular"
+                    key={competence}
+                  >
+                    {competence}
+                  </Text>
+                </>
+              ))}
+            </div>
+          </div>
+
+          <div className={styles.employeeContactInfo}>
+            <p>{employee.email}</p>
+            {employee.telephone && (
+              <p>{formatPhoneNumber(employee.telephone)}</p>
+            )}
+          </div>
+        </div>
+      </div>
+    )
+  );
+}