fix: Title block should refresh image on lead image change - refs #25…

…7544

package.json

@@ -32,9 +32,9 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "md5": "^2.3.0",
     "husky": "*",
-    "lint-staged": "*"
+    "lint-staged": "*",
+    "md5": "^2.3.0"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json}": [

src/ui/Banner/Banner.jsx

@@ -26,7 +26,12 @@ const socialPlatforms = {
 };
 
 export const getImageSource = (image) => {
+  if (image?.data && image?.encoding === 'base64') {
+    return `data:${image.contentType};base64,${image.data}`;
+  }
   if (image?.scales?.huge) return flattenToAppURL(image.scales.huge.download);
+  if (image?.scales?.great) return flattenToAppURL(image.scales.great.download);
+  if (image?.scales?.large) return flattenToAppURL(image.scales.large.download);
   return null;
 };
 

src/ui/Banner/Banner.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import Banner from './Banner';
-import { sharePage } from './Banner';
+import { sharePage, getImageSource } from './Banner';
 import '@testing-library/jest-dom/extend-expect';
 
 describe('Banner', () => {
@@ -290,3 +290,46 @@ describe('sharePage', () => {
     expect(mockLink.click).toHaveBeenCalled();
   });
 });
+
+describe('getImageSource', () => {
+  it('returns the base64-encoded image source when given a base64-encoded image', () => {
+    const source = getImageSource({
+      data: 'base64-encoded-image-data',
+      encoding: 'base64',
+      contentType: 'image/png',
+    });
+    expect(source).toBe('data:image/png;base64,base64-encoded-image-data');
+  });
+
+  it('returns the URL of the huge image scale when given an image with a huge scale', () => {
+    const source = getImageSource({
+      scales: {
+        huge: { download: '/path/to/huge/image.png' },
+      },
+    });
+    expect(source).toBe('/path/to/huge/image.png');
+  });
+
+  it('returns the URL of the great image scale when given an image with a great scale', () => {
+    const source = getImageSource({
+      scales: {
+        great: { download: '/path/to/great/image.png' },
+      },
+    });
+    expect(source).toBe('/path/to/great/image.png');
+  });
+
+  it('returns the URL of the large image scale when given an image with a large scale', () => {
+    const source = getImageSource({
+      scales: {
+        large: { download: '/path/to/large/image.png' },
+      },
+    });
+    expect(source).toBe('/path/to/large/image.png');
+  });
+
+  it('returns null when given an image with no data or scales', () => {
+    const source = getImageSource({});
+    expect(source).toBeNull();
+  });
+});