feat: support backgroundBox field that changes the background

src/lib/get-topper-settings.js

@@ -106,7 +106,13 @@ const useEditoriallySelectedTopper = (content) => {
 	if (content.topper.layout === 'full-bleed-offset') {
 		backgroundColour = 'wheat';
 	} else if (content.topper.layout === 'deep-landscape') {
-		if (!hasDarkBackground(content.topper.backgroundColour)) {
+		// If the backgroundBox is present, use its color to determine a background colour
+		// The background color won't be visible due to the overlapping image, however, it's needed to
+		// determine the text color
+		if (content.topper.backgroundBox) {
+			backgroundColour =
+				content.topper.backgroundBox === 'light' ? 'white' : 'black';
+		} else if (!hasDarkBackground(content.topper.backgroundColour)) {
 			backgroundColour = 'white';
 		}
 	} else if (

test/lib/get-topper-settings.test.js

@@ -121,6 +121,29 @@ describe('Get topper settings', () => {
 
 			expect(topper.backgroundColour).to.equal('white');
 		});
+
+		describe('When a background Box is present', () => {
+			it('sets the `backgroundColour` to `white` if layout is deep landscape and background Box is light', () => {
+				const topper = getTopperSettings({
+					topper: {
+						layout: 'deep-landscape',
+						backgroundBox: 'light'
+					}
+				});
+
+				expect(topper.backgroundColour).to.equal('white');
+			});
+			it('sets the `backgroundColour` to `black` if layout is deep landscape and background Box is dark', () => {
+				const topper = getTopperSettings({
+					topper: {
+						layout: 'deep-landscape',
+						backgroundBox: 'dark'
+					}
+				});
+
+				expect(topper.backgroundColour).to.equal('black');
+			});
+		});
 	});
 
 	describe('Podcast', () => {