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 ;
+ return ;
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 (
- {section.images?.map((image) => (
-
-
-
+
+ {section.images?.map((image) => (
+
-
- ))}
+ ))}
+
);
}
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 (
+
+ );
+}
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,
};
},