feat(imageSection): fullWidth toggle

varianter · Oct 29, 2024 · 6133cbf · 6133cbf
1 parent 54f7cff
commit 6133cbf
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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,14 +15,17 @@
   }
 }
 
+.content.fullWidth {
+  max-width: unset;
+}
+
 .imageWrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 .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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,
       };
     },