Merge branch 'v3' into v3-customercase-entry

varianter · Nov 29, 2024 · 7c02656 · 7c02656
2 parents b9c17c7 + 9ea7faa
commit 7c02656
Show file tree

Hide file tree

Showing 15 changed files with 283 additions and 130 deletions.
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1 @@
+npm run fix
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "fix": "run-s lint format",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test-storybook": "test-storybook"
+    "test-storybook": "test-storybook",
+    "prepare": "husky"
   },
   "dependencies": {
     "@sanity/color-input": "^4.0.1",
@@ -20,6 +21,7 @@
     "@sanity/preview-url-secret": "^1.6.11",
     "@sanity/react-loader": "^1.10.7",
     "@sanity/vision": "^3.39.1",
+    "husky": "^9.1.7",
     "negotiator": "^0.6.3",
     "next": "^14.2.15",
     "next-intl": "^3.24.0",

diff --git a/src/components/badge/Badge.tsx b/src/components/badge/Badge.tsx
@@ -8,14 +8,13 @@ interface IBadge {
   textColor?: string;
 }
 
-const Badge = ({
-  children,
-  badgeColor = "#EAEAEA",
-  textColor = "#222424",
-}: IBadge) => {
+const DEFAULT_BADGE_COLOR = "#EAEAEA";
+const DEFAULT_TEXT_COLOR = "#222424";
+
+const Badge = ({ children, badgeColor, textColor }: IBadge) => {
   const badgeColors = {
-    backgroundColor: badgeColor,
-    color: textColor,
+    backgroundColor: badgeColor || DEFAULT_BADGE_COLOR,
+    color: textColor || DEFAULT_TEXT_COLOR,
   };
   return (
     <div className={styles.badgeWrapper} style={badgeColors}>

diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -79,7 +79,7 @@ function ColoredTitle({
   colorPart?: string;
   color?: string;
 }) {
-  if (colorPart === undefined || colorPart === "")
+  if (!colorPart)
     return (
       <Text type={"h1"} className={styles.mainTitle}>
         {title}

diff --git a/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx b/src/components/customerCases/customerCase/projectInfo/CustomerCaseProjectInfo.tsx
@@ -58,7 +58,9 @@ export default async function CustomerCaseProjectInfo({
               {t("variants").toUpperCase()}
             </Text>
             <div className={styles.varianter}>
-              <Text className={styles.preFancyCharacter}>【 </Text>
+              <Text className={styles.preFancyCharacter}>
+                <span style={{ color: clientColors.color }}>【 </span>
+              </Text>
               {consultantsFirstNames.map((name) => (
                 <Text
                   key={name}
@@ -68,7 +70,9 @@ export default async function CustomerCaseProjectInfo({
                   {name}
                 </Text>
               ))}
-              <Text className={styles.afterFancyCharacter}> 】</Text>
+              <Text className={styles.afterFancyCharacter}>
+                <span style={{ color: clientColors.color }}> 】</span>
+              </Text>
             </div>
           </div>
         )}

diff --git a/src/components/employeeCard/EmployeeCard.tsx b/src/components/employeeCard/EmployeeCard.tsx
@@ -30,38 +30,58 @@ export default function EmployeeCard({
           <div className={styles.employeeImage}>
             <Image
               src={employee.imageUrl}
-              alt=""
+              alt={employee.name}
               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>
+          <Text type="h4" as="h3">
+            <Link
+              href={`/${language}/${employeePageSlug}/${aliasFromEmail(employee.email)}`}
+              className={styles.employeeNameLink}
+            >
+              {employee.name}
+            </Link>
+          </Text>
 
-          <div className={styles.employeeContactInfo}>
-            <p>{employee.email}</p>
-            {employee.telephone && (
-              <p>{formatPhoneNumber(employee.telephone)}</p>
-            )}
+          <div className={styles.employeeRole}>
+            {employee.competences.map((competence) => (
+              <Text
+                className={styles.employeeRoleDot}
+                type="labelRegular"
+                key={competence}
+              >
+                {competence}
+              </Text>
+            ))}
           </div>
+
+          <Text type="bodyExtraSmall">
+            <a href={`mailto:${employee.email}`}>{employee.email}</a>
+          </Text>
+          {employee.telephone && (
+            <Text type="bodyExtraSmall">
+              <a href={`tel:${employee.telephone}`}>
+                {formatPhoneNumber(employee.telephone)}
+              </a>
+            </Text>
+          )}
         </div>
       </div>
     )
   );
 }
+
+export function EmployeeCardSkeleton() {
+  return (
+    <div className={`${styles.employeeWrapper} ${styles.skeletonCard}`}>
+      <div className={styles.employeeImage} />
+      <div className={`${styles.skeletonText} ${styles.skeletonName}`} />
+      <div className={`${styles.skeletonText} ${styles.skeletonTitle}`} />
+      <div className={`${styles.skeletonText} ${styles.skeletonContact}`} />
+      <div className={`${styles.skeletonText} ${styles.skeletonContact}`} />
+    </div>
+  );
+}
diff --git a/src/components/employeeCard/employeeCard.module.css b/src/components/employeeCard/employeeCard.module.css
@@ -20,7 +20,7 @@
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 100%;
+  gap: 0.375rem;
 }
 
 .contactInfo {
@@ -30,17 +30,14 @@
   gap: 0.375rem;
 }
 
-.employeeName {
-  font-size: 1rem;
-  font-weight: 600;
-  line-height: 120%;
+.employeeNameLink {
+  text-decoration: none;
 }
 
 .employeeWrapper {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin: 1rem;
   min-width: 280px;
   max-width: var(--Text-paragraph, 537px);
   gap: var(--small, 6px);
@@ -88,7 +85,7 @@
 
 .employeeRoleDot::after {
   content: "·";
-  margin: 0 0.5rem;
+  margin: 0 0.25rem;
 }
 
 .employeeRoleDot:last-child:after {
@@ -103,3 +100,37 @@
   font-size: 1rem;
   color: var(--text-tertiary, #5e5e5e);
 }
+
+/* Update the skeleton styles */
+.skeletonCard {
+  animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+.skeletonText {
+  height: 20px;
+  background-color: var(--background-bg-light-primary);
+  border-radius: 4px;
+  align-self: flex-start;
+}
+
+.skeletonName {
+  width: 150px;
+}
+
+.skeletonTitle {
+  width: 100px;
+}
+
+.skeletonContact {
+  width: 130px;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}