V3 customer case UI - top section (#820)

* styling changes in customer case * fixes styling top section * media response ui * Add word limit on description in customer case * fix image in header * proper distance between header text and image * change color of header * removed white background from header * top section styling and some tweaks for delieveries * css navbar * update language switch colors and icons * lint fix * add Todo in text file and remove unnecessary css variable * max-width in top image * delivery --> delliveries * character count * item --> delivery in schema * lint * align items to align horisontally * Update src/components/link/link.module.css Co-authored-by: Mathias Oterhals Myklebust <[email protected]> * Update studioShared/schemas/documents/customerCase.ts Co-authored-by: Mathias Oterhals Myklebust <[email protected]> * Update studioShared/schemas/documents/customerCase.ts Co-authored-by: Mathias Oterhals Myklebust <[email protected]> * css fixes * prettier fix --------- Co-authored-by: Mathias Oterhals Myklebust <[email protected]>
varianter · Oct 29, 2024 · f3858b6 · f3858b6
1 parent 2bd7b5c
commit f3858b6
Show file tree

Hide file tree

Showing 15 changed files with 270 additions and 87 deletions.
diff --git a/public/_assets/menu-close.svg b/public/_assets/menu-close.svg
diff --git a/public/_assets/menu.svg b/public/_assets/menu.svg
diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -1,7 +1,10 @@
 import { SanitySharedImage } from "src/components/image/SanityImage";
 import { RichText } from "src/components/richText/RichText";
 import Text from "src/components/text/Text";
-import { CustomerCase as CustomerCaseDocument } from "studioShared/lib/interfaces/customerCases";
+import {
+  CustomerCase as CustomerCaseDocument,
+  Delivery,
+} from "studioShared/lib/interfaces/customerCases";
 
 import styles from "./customerCase.module.css";
 
@@ -20,46 +23,81 @@ export default function CustomerCase({ customerCase }: CustomerCaseProps) {
           <SanitySharedImage image={customerCase.image} />
         </div>
         <div className={styles.ingress}>
-          <Text type={"bodyBig"}>{customerCase.description}</Text>
-          <div className={styles.projectInfo}>
-            <div className={styles.projectInfoItem}>
-              <Text>Kunde</Text>
-              <Text className={styles.projectInfoItemValue}>
-                {customerCase.projectInfo.customer}
-              </Text>
-            </div>
-            <div className={styles.projectInfoItem}>
-              <Text>Prosjekt</Text>
-              <Text className={styles.projectInfoItemValue}>
-                {customerCase.projectInfo.name}
-              </Text>
-            </div>
-            <div className={styles.projectInfoItem}>
-              <Text>Varighet</Text>
-              <Text className={styles.projectInfoItemValue}>
-                {customerCase.projectInfo.duration}
-              </Text>
-            </div>
+          <div className={styles.projectDescription}>
+            <Text type={"bodyBig"}>{customerCase.description}</Text>
           </div>
           <div className={styles.projectInfo}>
-            <div className={styles.projectInfoItem}>
-              <Text>Bransje</Text>
-              <Text className={styles.projectInfoItemValue}>
-                {customerCase.projectInfo.sector}
-              </Text>
-            </div>
-            <div className={styles.projectInfoItem}>
-              <Text>Leveranse</Text>
-              <Text className={styles.projectInfoItemValue}>
-                {customerCase.projectInfo.delivery}
-              </Text>
-            </div>
-            <div className={styles.projectInfoItem}>
-              <Text>Konsulenter</Text>
-              <Text className={styles.projectInfoItemValue}>
-                {customerCase.projectInfo.consultants.join(", ")}
-              </Text>
-            </div>
+            {customerCase.projectInfo.customer && (
+              <div className={styles.projectInfoItem}>
+                <Text type={"labelRegular"}>Kunde</Text>
+                <Text
+                  type={"labelLight"}
+                  className={styles.projectInfoItemValue}
+                >
+                  {customerCase.projectInfo.customer}
+                </Text>
+              </div>
+            )}
+            {customerCase.projectInfo.name && (
+              <div className={styles.projectInfoItem}>
+                <Text type={"labelRegular"}>Prosjekt</Text>
+                <Text
+                  type={"labelLight"}
+                  className={styles.projectInfoItemValue}
+                >
+                  {customerCase.projectInfo.name}
+                </Text>
+              </div>
+            )}
+            {customerCase.projectInfo.duration && (
+              <div className={styles.projectInfoItem}>
+                <Text type={"labelRegular"}>Varighet</Text>
+                <Text
+                  type={"labelLight"}
+                  className={styles.projectInfoItemValue}
+                >
+                  {customerCase.projectInfo.duration}
+                </Text>
+              </div>
+            )}
+            {customerCase.projectInfo.sector && (
+              <div className={styles.projectInfoItem}>
+                <Text type={"labelRegular"}>Bransje</Text>
+                <Text
+                  type={"labelLight"}
+                  className={styles.projectInfoItemBadge}
+                >
+                  {customerCase.projectInfo.sector}
+                </Text>
+              </div>
+            )}
+            {customerCase.projectInfo.deliveries && (
+              <div className={styles.projectInfoItem}>
+                <Text type={"labelRegular"}>Leveranse</Text>
+                {customerCase.projectInfo.deliveries.map(
+                  (delivery: Delivery) => (
+                    <Text
+                      key={delivery.key}
+                      type={"labelLight"}
+                      className={styles.projectInfoItemBadge}
+                    >
+                      {delivery.delivery}
+                    </Text>
+                  ),
+                )}
+              </div>
+            )}
+            {customerCase.projectInfo.consultants && (
+              <div className={styles.projectInfoItem}>
+                <Text type={"labelRegular"}>Konsulenter</Text>
+                <Text
+                  type={"labelLight"}
+                  className={styles.projectInfoItemValue}
+                >
+                  {customerCase.projectInfo.consultants.join(", ")}
+                </Text>
+              </div>
+            )}
           </div>
         </div>
         <div className={styles.sectionsWrapper}>

diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css
@@ -1,40 +1,88 @@
 .wrapper {
   display: flex;
   flex-direction: column;
-  margin: 8rem 0;
+  margin: 4rem 0;
   align-items: center;
+
+  @media (max-width: 1024px) {
+    margin: 2rem 0;
+  }
 }
 
 .content {
   display: flex;
   flex-direction: column;
-  max-width: 1200px;
-  gap: 2rem;
-  padding: 1rem;
+  max-width: 1400px;
 }
 
 .mainTitle {
   font-weight: 600;
+  gap: 1.62rem;
+}
+
+.mainImageWrapper {
+  width: 100%;
+  height: 36.5rem;
+  overflow: hidden;
+  padding-bottom: 2rem;
 }
 
 .mainImageWrapper img {
-  border-radius: 12px;
+  border-radius: 0.75rem;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  min-width: 100%;
 }
 
 .ingress {
   display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-bottom: 6rem;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+}
+
+.projectDescription {
+  flex: 4;
+  max-width: 40%;
+
+  @media (max-width: 1024px) {
+    max-width: 100%;
+  }
 }
 
 .projectInfo {
   display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 6;
+  max-width: 50%;
+  flex-direction: row;
+  flex-wrap: wrap;
+  row-gap: 0rem;
+  column-gap: 0rem;
   gap: 1rem;
-  flex-grow: 1;
+  height: fit-content;
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 100%;
+    align-items: flex-start;
+  }
 }
 
 .projectInfoItem {
   display: flex;
+  height: fit-content;
+  flex-direction: row;
+  align-items: center;
   gap: 1rem;
 }
 
@@ -43,10 +91,17 @@
   white-space: nowrap;
 }
 
+.projectInfoItemBadge {
+  compose: projectInfoItemValue;
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--primary-black);
+  border-radius: 32.18156rem;
+}
+
 .sectionsWrapper {
   display: flex;
   flex-direction: column;
-  gap: 2rem;
+  gap: 4.5rem;
 }
 
 .imageBlockWrapper {

diff --git a/src/components/customerCases/customerCases.module.css b/src/components/customerCases/customerCases.module.css
@@ -8,9 +8,8 @@
 .content {
   display: flex;
   flex-direction: column;
+  max-width: 1400px;
   gap: 5rem;
-  max-width: 1200px;
-  padding: 1rem;
 }
 
 .section {
@@ -30,5 +29,5 @@
 }
 
 .caseImageWrapper img {
-  border-radius: 12px;
+  border-radius: 0.75rem;
 }
diff --git a/src/components/languageSwitcher/LanguageSwitcher.tsx b/src/components/languageSwitcher/LanguageSwitcher.tsx
@@ -22,13 +22,16 @@ export default function LanguageSwitcher({
           return null;
         }
         const linkText = (
-          <Text type={"bodySmall"}>{pathTranslation._key.toUpperCase()}</Text>
+          <Text type={"bodySmall"} className={styles.link}>
+            {pathTranslation._key.toUpperCase()}
+          </Text>
         );
         return (
           <Fragment key={pathTranslation._key}>
             <li>
               {pathTranslation._key !== currentLanguage ? (
                 <Link
+                  className={styles.link}
                   href={`/${pathTranslation._key}/${pathTranslation.value}`}
                 >
                   {linkText}

diff --git a/src/components/languageSwitcher/languageSwitcher.module.css b/src/components/languageSwitcher/languageSwitcher.module.css
@@ -6,6 +6,10 @@
 }
 
 .divider {
-  border-left: 1px solid var(--primary-black);
+  border-left: 1px solid var(--primary-white);
   flex-grow: 1;
 }
+
+.link {
+  color: var(--primary-white);
+}
diff --git a/src/components/link/link.module.css b/src/components/link/link.module.css
@@ -53,19 +53,25 @@
 }
 
 .headerLink {
-  color: var(--primary-black);
+  color: var(--primary-white);
   cursor: pointer;
   text-decoration: none;
   font-family: var(--font-britti-sans);
-  font-size: 1.25rem;
+  font-size: 1.125rem;
   font-weight: 500;
 
   &:hover {
-    color: var(--primary-dark);
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
   }
 
   &:active {
-    color: var(--primary-darker);
+    font-size: 1.125rem;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
   }
 }
 
@@ -87,5 +93,7 @@
 }
 
 .selected {
-  color: var(--primary-dark);
+  color: var(--primary-white);
+  font-weight: 700;
+  line-height: normal;
 }
diff --git a/src/components/navigation/header/header.module.css b/src/components/navigation/header/header.module.css
@@ -3,13 +3,11 @@
   top: 0;
   overflow: hidden;
   z-index: 9999;
+  background-color: var(--primary-black);
+}
 
-  & > header {
-    padding: 1rem 2.5rem;
-    transition: background-color 0.4s ease;
-    position: sticky;
-    top: 0;
-  }
+.scrolled {
+  background-color: var(--primary-black);
 }
 
 .isOpen {
@@ -18,7 +16,7 @@
   flex-direction: column;
 
   @media (max-width: 1024px) {
-    background: var(--primary-bg-dark);
+    background: var(--primary-black);
 
     & > header {
       flex: 1;
@@ -37,8 +35,6 @@
 }
 
 .wrapper {
-  background-color: var(--primary-white-bright);
-  border-radius: 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;