From afb54c85ad4de5a960b820e9e403fe223a91dfd7 Mon Sep 17 00:00:00 2001
From: Ida Marie Andreassen <ima@variant.no>
Date: Fri, 6 Dec 2024 14:19:30 +0100
Subject: [PATCH 1/2] Refactor contact module according to design

---
 .../contactInformation/ContactInformation.tsx | 45 ++++++-----
 .../contactInformation/ContactSelector.tsx    | 75 ++++++++++++++++++
 .../contactInformation.module.css             | 76 ++++++++++++++-----
 .../contactSelector/ContactSelector.tsx       | 72 ------------------
 .../contactSelector.module.css                |  9 ---
 .../customerCase/customerCase.module.css      |  5 --
 6 files changed, 161 insertions(+), 121 deletions(-)
 create mode 100644 src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx
 delete mode 100644 src/components/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx
 delete mode 100644 src/components/customerCases/customerCase/contactInformation/contactSelector/contactSelector.module.css

diff --git a/src/components/customerCases/customerCase/contactInformation/ContactInformation.tsx b/src/components/customerCases/customerCase/contactInformation/ContactInformation.tsx
index 667643fb8..471a2828d 100644
--- a/src/components/customerCases/customerCase/contactInformation/ContactInformation.tsx
+++ b/src/components/customerCases/customerCase/contactInformation/ContactInformation.tsx
@@ -1,5 +1,7 @@
 import { getTranslations } from "next-intl/server";
+import { Suspense } from "react";
 
+import { EmployeeCardSkeleton } from "src/components/employeeCard/EmployeeCard";
 import Text from "src/components/text/Text";
 import { fetchEmployeesByEmails } from "src/utils/employees";
 import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
@@ -8,9 +10,7 @@ import { EMPLOYEE_PAGE_SLUG_QUERY } from "studio/lib/queries/siteSettings";
 import { loadStudioQuery } from "studio/lib/store";
 
 import styles from "./contactInformation.module.css";
-import ContactSelector, {
-  ContactByLocationMap,
-} from "./contactSelector/ContactSelector";
+import ContactSelector, { ContactByLocationMap } from "./ContactSelector";
 
 interface ContactInformationProps {
   language: string;
@@ -54,21 +54,30 @@ export default async function ContactInformation({
   );
   const t = await getTranslations("contact_information");
   return (
-    <div className={styles.wrapper}>
-      <div className={styles.content}>
-        <div className={styles.titleSection}>
-          <Text type={"bodyXl"}>{t("help")}</Text>
-          <Text type="bodyBig">{t("contact_sale")} </Text>
+    <>
+      <section className={styles.contactBox}>
+        <div
+          className={`${styles.contactBox__inner} ${styles["contactBox__inner--light"]}`}
+        >
+          <div className={styles.textContent}>
+            <Text type="h3" as="h2">
+              {t("help")}
+            </Text>
+            <Text type="bodyBig">{t("contact_sale")} </Text>
+          </div>
+          <div className={styles.contactSelectorWrapper}>
+            <Suspense fallback={<EmployeeCardSkeleton background={"light"} />}>
+              <ContactSelector
+                language={language}
+                locations={locationsWithContact}
+                contactByLocation={contactByLocation}
+                employeePageSlug={employeePageSlug}
+                background={"light"}
+              />
+            </Suspense>
+          </div>
         </div>
-        <div className={styles.contactSection}>
-          <ContactSelector
-            language={language}
-            locations={locationsWithContact}
-            contactByLocation={contactByLocation}
-            employeePageSlug={employeePageSlug}
-          />
-        </div>
-      </div>
-    </div>
+      </section>
+    </>
   );
 }
diff --git a/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx b/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx
new file mode 100644
index 000000000..35bec9ada
--- /dev/null
+++ b/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { useState } from "react";
+
+import EmployeeCard from "src/components/employeeCard/EmployeeCard";
+import { Tag } from "src/components/tag";
+import { ChewbaccaEmployee } from "src/types/employees";
+import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
+
+import styles from "./contactInformation.module.css";
+
+export type ContactByLocationMap = {
+  [locationId: string]: ChewbaccaEmployee;
+};
+
+export interface ContactSelectorProps {
+  language: string;
+  locations: CompanyLocation[];
+  contactByLocation: ContactByLocationMap;
+  employeePageSlug?: string;
+  background: "dark" | "light";
+}
+
+export default function ContactSelector({
+  language,
+  locations,
+  contactByLocation,
+  employeePageSlug,
+  background = "light",
+}: ContactSelectorProps) {
+  const locationIds = Object.keys(contactByLocation);
+
+  const [selectedLocationId, setSelectedLocationId] = useState<string | null>(
+    locationIds[0],
+  );
+
+  if (locationIds.length === 0) {
+    return;
+  }
+
+  const selectedOrDefaultLocationId = selectedLocationId ?? locationIds[0];
+  console.log(selectedLocationId);
+
+  return (
+    <>
+      <div className={styles.contactSelector}>
+        <div className={styles.tagList} role="tabList">
+          {locations.map((location) => (
+            <Tag
+              key={location._id}
+              type="button"
+              role="tab"
+              background={background}
+              aria-selected={selectedLocationId === location._id}
+              aria-controls={`panel-${location._id}`}
+              id={`tab-${location._id}`}
+              active={selectedLocationId === location._id}
+              onClick={() => setSelectedLocationId(location._id)}
+              text={location.companyLocationName}
+            />
+          ))}
+        </div>
+        <div className={styles.employeeCard}>
+          <div>
+            <EmployeeCard
+              language={language}
+              employee={contactByLocation[selectedOrDefaultLocationId]}
+              employeePageSlug={employeePageSlug}
+            />
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/src/components/customerCases/customerCase/contactInformation/contactInformation.module.css b/src/components/customerCases/customerCase/contactInformation/contactInformation.module.css
index e86f6bf9c..c79175a9d 100644
--- a/src/components/customerCases/customerCase/contactInformation/contactInformation.module.css
+++ b/src/components/customerCases/customerCase/contactInformation/contactInformation.module.css
@@ -1,32 +1,74 @@
-.wrapper {
-  display: flex;
+.contactBox {
+  max-width: var(--max-content-width-large);
+}
+
+.contactBox__inner {
+  --_contactBox__background: var(--background-bg-dark);
+  --_contactBox__color: var(--text-primary-light);
+
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+
+  padding: 1.5rem 3rem;
   flex-direction: column;
-  margin: 4rem 0;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: var(--Padding-l, 48px);
+  align-self: stretch;
 
-  @media (min-width: 1024px) {
-    align-items: center;
-  }
+  border-radius: var(--radius-small);
+  background: var(--_contactBox__background);
+  color: var(--_contactBox__color);
+}
+.contactBox__inner--light {
+  --_contactBox__background: var(--background-bg-light-secondary);
+  --_contactBox__color: var(--text-primary);
 }
 
-.content {
+.textContent {
+  height: 100%;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   gap: 1rem;
-  max-width: 960px;
 
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    gap: 2rem;
-  }
+  justify-content: flex-end;
 }
 
-.titleSection {
+.contactSelectorWrapper {
+  container-type: inline-size;
+  container-name: contactSelectorWrapper;
+}
+
+.contactSelector {
+  display: flex;
+  gap: 1rem;
+}
+
+.tagList {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
+
+  align-items: flex-start;
+  min-width: 120px;
 }
 
-.contactSection {
-  display: flex;
-  gap: 1.5rem;
+.employeeCard {
+  flex: 1;
+}
+
+@media (max-width: 400px) {
+  .contactBox__inner {
+    padding: 1rem 1rem;
+  }
+}
+
+@container contactSelectorWrapper (max-width: 350px) {
+  .contactSelector {
+    flex-direction: column;
+  }
+
+  .tagList {
+    flex-direction: row;
+  }
 }
diff --git a/src/components/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx b/src/components/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx
deleted file mode 100644
index e086b10b2..000000000
--- a/src/components/customerCases/customerCase/contactInformation/contactSelector/ContactSelector.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-"use client";
-
-import { useState } from "react";
-
-import Button from "src/components/buttons/Button";
-import CustomerCaseEmployeeCard from "src/components/customerCaseEmployeeCard/CustomerCaseEmployeeCard";
-import { ChewbaccaEmployee } from "src/types/employees";
-import { CompanyLocation } from "studio/lib/interfaces/companyDetails";
-
-import styles from "./contactSelector.module.css";
-
-export type ContactByLocationMap = {
-  [locationId: string]: ChewbaccaEmployee;
-};
-
-export interface ContactSelectorProps {
-  language: string;
-  locations: CompanyLocation[];
-  contactByLocation: ContactByLocationMap;
-  employeePageSlug?: string;
-}
-
-export default function ContactSelector({
-  language,
-  locations,
-  contactByLocation,
-  employeePageSlug,
-}: ContactSelectorProps) {
-  const locationIds = Object.keys(contactByLocation);
-
-  const [selectedLocationId, setSelectedLocationId] = useState<string | null>(
-    locationIds.length === 0 ? locationIds[0] : null,
-  );
-
-  if (locationIds.length === 0) {
-    return;
-  }
-
-  const selectedOrDefaultLocationId = selectedLocationId ?? locationIds[0];
-
-  return (
-    <>
-      <div className={styles.locationSection}>
-        {locations.map((location) => (
-          //Todo: replace this with tag component
-          <Button
-            type={
-              location._id === selectedOrDefaultLocationId
-                ? "primary"
-                : "secondary"
-            }
-            size={"medium"}
-            background={
-              location._id === selectedOrDefaultLocationId ? "dark" : "light"
-            }
-            key={location._id}
-            onClick={() => setSelectedLocationId(location._id)}
-          >
-            {location.companyLocationName}
-          </Button>
-        ))}
-      </div>
-      <div className={styles.consultantSection}>
-        <CustomerCaseEmployeeCard
-          currentLanguage={language}
-          employee={contactByLocation[selectedOrDefaultLocationId]}
-          employeePageSlug={employeePageSlug}
-        />
-      </div>
-    </>
-  );
-}
diff --git a/src/components/customerCases/customerCase/contactInformation/contactSelector/contactSelector.module.css b/src/components/customerCases/customerCase/contactInformation/contactSelector/contactSelector.module.css
deleted file mode 100644
index e0f2ce2ef..000000000
--- a/src/components/customerCases/customerCase/contactInformation/contactSelector/contactSelector.module.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.locationSection {
-  display: flex;
-  flex-direction: column;
-  gap: 0.75rem;
-}
-
-.consultantSection {
-  min-width: 400px;
-}
diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css
index 2ba40cd06..4ed6ca46e 100644
--- a/src/components/customerCases/customerCase/customerCase.module.css
+++ b/src/components/customerCases/customerCase/customerCase.module.css
@@ -1,13 +1,8 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  margin: 4rem 2rem;
   align-items: center;
   justify-content: center;
-
-  @media (max-width: 1024px) {
-    margin: 2rem 1rem;
-  }
 }
 
 .content {

From 7e22640402057b4d76af2f97f9b37aae4639fb3c Mon Sep 17 00:00:00 2001
From: Ida Marie Andreassen <ima@variant.no>
Date: Fri, 6 Dec 2024 14:27:14 +0100
Subject: [PATCH 2/2] Fix aria-role

---
 .../customerCase/contactInformation/ContactSelector.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx b/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx
index 35bec9ada..9ff75782a 100644
--- a/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx
+++ b/src/components/customerCases/customerCase/contactInformation/ContactSelector.tsx
@@ -44,7 +44,7 @@ export default function ContactSelector({
   return (
     <>
       <div className={styles.contactSelector}>
-        <div className={styles.tagList} role="tabList">
+        <div className={styles.tagList} role="tablist">
           {locations.map((location) => (
             <Tag
               key={location._id}