Add figure description to sanityImages

src/components/customerCases/customerCase/CustomerCase.tsx

@@ -45,6 +45,11 @@ export default async function CustomerCase({
         </div>
         <div className={styles.mainImageWrapper}>
           <SanitySharedImage image={customerCase.image} />
+          {customerCase.image.figureDescription && (
+            <Text type="imageLabel">
+              {customerCase.image.figureDescription}
+            </Text>
+          )}
         </div>
         <div className={styles.sectionsWrapper}>
           {customerCase.sections.map((section) => (

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 {

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) {
       >
         <div className={styles.imageContent}>
           <SanitySharedImage image={section.image} />
+          {section.image.figureDescription && (
+            <Text type="imageLabel">{section.image.figureDescription}</Text>
+          )}
         </div>
       </div>
     </div>

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 = ({

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

studio/lib/interfaces/media.ts

@@ -27,6 +27,7 @@ export interface IImage {
   metadata?: {
     lqip: string;
   };
+  figureDescription?: string;
 }
 
 export interface ImageExtendedProps extends IImage {

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",

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`