From f876c1b81c61805cbc2b51ebfb4bbcb0399ae0f1 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Tue, 29 Oct 2024 08:45:25 +0100
Subject: [PATCH] feat(imageSection): fullWidth toggle

---
 .../customerCase/CustomerCase.tsx             |  4 ++--
 .../sections/image/ImageSection.tsx           | 22 +++++++++++--------
 .../sections/image/imageSection.module.css    | 12 +++++++++-
 .../sections/richText/RichTextSection.tsx     | 18 +++++++++++++++
 .../richText/richTextSection.module.css       |  9 ++++++++
 studioShared/lib/interfaces/imageBlock.ts     |  1 +
 studioShared/lib/queries/customerCases.ts     |  3 ++-
 studioShared/schemas/objects/imageBlock.ts    | 10 ++++++++-
 8 files changed, 65 insertions(+), 14 deletions(-)
 create mode 100644 src/components/customerCases/customerCase/sections/richText/RichTextSection.tsx
 create mode 100644 src/components/customerCases/customerCase/sections/richText/richTextSection.module.css

diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx
index 1f25fa06f..c5448462e 100644
--- a/src/components/customerCases/customerCase/CustomerCase.tsx
+++ b/src/components/customerCases/customerCase/CustomerCase.tsx
@@ -1,5 +1,4 @@
 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,
@@ -9,6 +8,7 @@ import {
 
 import styles from "./customerCase.module.css";
 import ImageSection from "./sections/image/ImageSection";
+import RichTextSection from "./sections/richText/RichTextSection";
 
 export interface CustomerCaseProps {
   customerCase: CustomerCaseDocument;
@@ -21,7 +21,7 @@ function CustomerCaseSection({
 }) {
   switch (section._type) {
     case "richTextBlock":
-      return <RichText value={section.richText} />;
+      return <RichTextSection section={section} />;
     case "quoteBlock":
       return (
         section.quote && (
diff --git a/src/components/customerCases/customerCase/sections/image/ImageSection.tsx b/src/components/customerCases/customerCase/sections/image/ImageSection.tsx
index fec8f04f2..e38dd0e34 100644
--- a/src/components/customerCases/customerCase/sections/image/ImageSection.tsx
+++ b/src/components/customerCases/customerCase/sections/image/ImageSection.tsx
@@ -10,16 +10,20 @@ export interface ImageSectionProps {
 export default function ImageSection({ section }: ImageSectionProps) {
   return (
     <div className={styles.wrapper}>
-      {section.images?.map((image) => (
-        <div
-          key={image._key ?? `${section._key}-${image.alt}`}
-          className={styles.imageWrapper}
-        >
-          <div className={styles.imageContent}>
-            <SanitySharedImage image={image} />
+      <div
+        className={`${styles.content}${section.fullWidth ? ` ${styles.fullWidth}` : ""}`}
+      >
+        {section.images?.map((image) => (
+          <div
+            key={image._key ?? `${section._key}-${image.alt}`}
+            className={styles.imageWrapper}
+          >
+            <div className={styles.imageContent}>
+              <SanitySharedImage image={image} />
+            </div>
           </div>
-        </div>
-      ))}
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/src/components/customerCases/customerCase/sections/image/imageSection.module.css b/src/components/customerCases/customerCase/sections/image/imageSection.module.css
index 75d8f9f6e..0be775a9c 100644
--- a/src/components/customerCases/customerCase/sections/image/imageSection.module.css
+++ b/src/components/customerCases/customerCase/sections/image/imageSection.module.css
@@ -1,4 +1,11 @@
 .wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  max-width: 960px;
   display: flex;
   gap: 1rem;
   justify-content: center;
@@ -8,6 +15,10 @@
   }
 }
 
+.content.fullWidth {
+  max-width: unset;
+}
+
 .imageWrapper {
   display: flex;
   flex-direction: column;
@@ -15,7 +26,6 @@
 }
 
 .imageContent {
-  max-width: 800px;
   height: 100%;
 }
 
diff --git a/src/components/customerCases/customerCase/sections/richText/RichTextSection.tsx b/src/components/customerCases/customerCase/sections/richText/RichTextSection.tsx
new file mode 100644
index 000000000..b428aeaee
--- /dev/null
+++ b/src/components/customerCases/customerCase/sections/richText/RichTextSection.tsx
@@ -0,0 +1,18 @@
+import { RichText } from "src/components/richText/RichText";
+import { RichTextBlock } from "studioShared/lib/interfaces/richTextBlock";
+
+import styles from "./richTextSection.module.css";
+
+export interface RichTextSectionProps {
+  section: RichTextBlock;
+}
+
+export default function RichTextSection({ section }: RichTextSectionProps) {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.content}>
+        <RichText value={section.richText} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/customerCases/customerCase/sections/richText/richTextSection.module.css b/src/components/customerCases/customerCase/sections/richText/richTextSection.module.css
new file mode 100644
index 000000000..adeff28df
--- /dev/null
+++ b/src/components/customerCases/customerCase/sections/richText/richTextSection.module.css
@@ -0,0 +1,9 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  max-width: 960px;
+}
diff --git a/studioShared/lib/interfaces/imageBlock.ts b/studioShared/lib/interfaces/imageBlock.ts
index 13b6ed562..cd1ff43cc 100644
--- a/studioShared/lib/interfaces/imageBlock.ts
+++ b/studioShared/lib/interfaces/imageBlock.ts
@@ -4,4 +4,5 @@ export interface ImageBlock {
   _key: string;
   _type: "imageBlock";
   images: IImage[];
+  fullWidth?: boolean;
 }
diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts
index a9fa028f1..b0544be5d 100644
--- a/studioShared/lib/queries/customerCases.ts
+++ b/studioShared/lib/queries/customerCases.ts
@@ -50,7 +50,8 @@ export const CUSTOMER_CASE_QUERY = groq`
       _type == "imageBlock" => {
         "images": images[] {
           ${INTERNATIONALIZED_IMAGE_FRAGMENT}
-        } 
+        },
+        fullWidth
       },
       _type == "listBlock" => {
         "description": ${translatedFieldFragment("description")},
diff --git a/studioShared/schemas/objects/imageBlock.ts b/studioShared/schemas/objects/imageBlock.ts
index 065bc41e6..a5368e810 100644
--- a/studioShared/schemas/objects/imageBlock.ts
+++ b/studioShared/schemas/objects/imageBlock.ts
@@ -15,12 +15,19 @@ const imageBlock = defineField({
       type: "array",
       of: [internationalizedImage],
     },
+    {
+      name: "fullWidth",
+      title: "Full Width",
+      description: "Should these images occupy the full width of the page?",
+      type: "boolean",
+    },
   ],
   preview: {
     select: {
       images: "images",
+      fullWidth: "fullWidth",
     },
-    prepare: ({ images }) => {
+    prepare: ({ images, fullWidth }) => {
       const count = Object.keys(images).length;
       const firstImage = count > 0 ? images[0] : undefined;
       let firstImageAlt = null;
@@ -35,6 +42,7 @@ const imageBlock = defineField({
       }
       return {
         title: count > 1 ? `${count} images` : (firstImageAlt ?? undefined),
+        subtitle: fullWidth ? "Full Width" : undefined,
         media: firstImage,
       };
     },