diff --git a/src/components/customerCases/customerCase/CustomerCase.tsx b/src/components/customerCases/customerCase/CustomerCase.tsx index eb1c75e39..3d1258109 100644 --- a/src/components/customerCases/customerCase/CustomerCase.tsx +++ b/src/components/customerCases/customerCase/CustomerCase.tsx @@ -45,6 +45,11 @@ export default async function CustomerCase({
+ {customerCase.image.figureDescription && ( + + {customerCase.image.figureDescription} + + )}
{customerCase.sections.map((section) => ( diff --git a/src/components/customerCases/customerCase/customerCase.module.css b/src/components/customerCases/customerCase/customerCase.module.css index 426fbee3f..75f2458ea 100644 --- a/src/components/customerCases/customerCase/customerCase.module.css +++ b/src/components/customerCases/customerCase/customerCase.module.css @@ -40,7 +40,7 @@ height: 36.5rem; overflow: hidden; padding-top: 1.5rem; - padding-bottom: 2rem; + padding-bottom: var(--padding-xl); } .mainImageWrapper img { diff --git a/src/components/customerCases/customerCase/sections/image/ImageSection.tsx b/src/components/customerCases/customerCase/sections/image/ImageSection.tsx index 2a6ba0fad..a11bffd90 100644 --- a/src/components/customerCases/customerCase/sections/image/ImageSection.tsx +++ b/src/components/customerCases/customerCase/sections/image/ImageSection.tsx @@ -1,4 +1,5 @@ import { SanitySharedImage } from "src/components/image/SanityImage"; +import Text from "src/components/text/Text"; import { ImageBlock } from "studioShared/lib/interfaces/imageBlock"; import styles from "./imageSection.module.css"; @@ -15,6 +16,9 @@ export default function ImageSection({ section }: ImageSectionProps) { >
+ {section.image.figureDescription && ( + {section.image.figureDescription} + )}
diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx index b52c244e8..10f65eb3e 100644 --- a/src/components/text/Text.tsx +++ b/src/components/text/Text.tsx @@ -18,7 +18,8 @@ export type TextType = | "bodyBig" | "bodyXl" | "mobileH1" - | "mobileBodyNormal"; + | "mobileBodyNormal" + | "imageLabel"; const elementMap: { [key in TextType]: keyof JSX.IntrinsicElements } = { h1: "h1", @@ -39,6 +40,7 @@ const elementMap: { [key in TextType]: keyof JSX.IntrinsicElements } = { bodyXl: "p", mobileH1: "h1", mobileBodyNormal: "p", + imageLabel: "span", }; const classMap: { [key in TextType]?: string } = { @@ -60,6 +62,7 @@ const classMap: { [key in TextType]?: string } = { bodyXl: styles.bodyXl, mobileH1: styles.mobileH1, mobileBodyNormal: styles.mobileBodyNormal, + imageLabel: styles.imageLabel, }; const Text = ({ diff --git a/src/components/text/text.module.css b/src/components/text/text.module.css index cca798362..2f36afd0f 100644 --- a/src/components/text/text.module.css +++ b/src/components/text/text.module.css @@ -10,6 +10,7 @@ .bodySmall, .bodyNormal, .bodyBig, +.imageLabel, .list { font-family: var(--font-britti-sans); line-height: 140%; @@ -182,3 +183,12 @@ line-height: 130%; white-space: pre-line; } + +.imageLabel { + font-size: var(--Font-size-Picture-label, 1rem); + font-style: normal; + font-weight: 400; + line-height: 150%; + letter-spacing: 0.05rem; + padding: 0rem 0.5rem; +} diff --git a/studio/lib/interfaces/media.ts b/studio/lib/interfaces/media.ts index 50e11a647..dc8e4a8d9 100644 --- a/studio/lib/interfaces/media.ts +++ b/studio/lib/interfaces/media.ts @@ -27,6 +27,7 @@ export interface IImage { metadata?: { lqip: string; }; + figureDescription?: string; } export interface ImageExtendedProps extends IImage { diff --git a/studio/schemas/fields/media.ts b/studio/schemas/fields/media.ts index cf2078cc7..e423985e4 100644 --- a/studio/schemas/fields/media.ts +++ b/studio/schemas/fields/media.ts @@ -53,7 +53,16 @@ export const internationalizedImage = defineField({ title: "Image", type: "image", options: { hotspot: true }, - fields: [internationalizedImageAltField], + fields: [ + internationalizedImageAltField, + { + name: "figureDescription", + type: "internationalizedArrayString", + title: "Figure Description", + description: + "Provide a figure description of the image. Leave empty if figure description is not needed.", + }, + ], preview: { select: { alt: "alt", diff --git a/studioShared/lib/queries/customerCases.ts b/studioShared/lib/queries/customerCases.ts index 3d197165c..81276e10a 100644 --- a/studioShared/lib/queries/customerCases.ts +++ b/studioShared/lib/queries/customerCases.ts @@ -8,7 +8,8 @@ const INTERNATIONALIZED_IMAGE_FRAGMENT = groq` "metadata": asset -> metadata { lqip }, - "alt": ${translatedFieldFragment("alt")} + "alt": ${translatedFieldFragment("alt")}, + "figureDescription": ${translatedFieldFragment("figureDescription")} `; const CUSTOMER_CASE_BASE_FRAGMENT = groq`