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, }; },