Merge pull request #40 from Financial-Times/feat/CI-1517-deep-landscape

CI-1517: Add styling changes for topic and myft for deep landscape

src/lib/get-topper-settings.js

@@ -1,3 +1,4 @@
+const { hasDarkBackground } = require('./utils');
 const themeImageRatio = {
 	'split-text-center': 'split',
 	'split-text-left': 'split',
@@ -104,6 +105,10 @@ const useEditoriallySelectedTopper = (content) => {
 	// Convert old palette colours to new palette colours from Methode
 	if (content.topper.layout === 'full-bleed-offset') {
 		backgroundColour = 'wheat';
+	} else if (content.topper.layout === 'deep-landscape') {
+		if (!hasDarkBackground(content.topper.backgroundColour)) {
+			backgroundColour = 'white';
+		}
 	} else if (
 		content.topper.backgroundColour === 'pink' ||
 		content.topper.backgroundColour === 'auto'

src/lib/utils.js

@@ -0,0 +1,14 @@
+const hasDarkBackground = (backgroundColour) => {
+	const darkBackgrounds = ['black', 'slate', 'oxford', 'claret', 'crimson'];
+	return darkBackgrounds.includes(backgroundColour);
+};
+
+const hasLightBackground = (backgroundColour) => {
+	const lightBackgrounds = ['paper', 'wheat', 'white'];
+	return lightBackgrounds.includes(backgroundColour);
+};
+
+module.exports = {
+	hasDarkBackground,
+	hasLightBackground
+};

src/map-content-to-topper.js

@@ -4,15 +4,15 @@ const {
 	getTopperSettings
 } = require('./lib/get-topper-settings');
 
-const myFtButtonVariant = (backgroundColour) => {
-	const lightBackgrounds = ['paper', 'wheat', 'white'];
-	const hasLightBackground = lightBackgrounds.indexOf(backgroundColour) > -1;
-	return !backgroundColour || hasLightBackground ? 'standard' : 'monochrome';
-};
+const { hasDarkBackground, hasLightBackground } = require('./lib/utils');
 
-const hasDarkBackground = (backgroundColour) => {
-	const darkBackgrounds = ['black', 'slate', 'oxford', 'claret', 'crimson'];
-	return darkBackgrounds.indexOf(backgroundColour) > -1;
+const myFtButtonVariant = (backgroundColour, layout) => {
+	if (layout === 'deep-landscape' && hasLightBackground(backgroundColour)) {
+		return 'inverse-monochrome';
+	}
+	return !backgroundColour || hasLightBackground(backgroundColour)
+		? 'standard'
+		: 'monochrome';
 };
 
 module.exports = (content, flags = {}) => {
@@ -27,7 +27,7 @@ module.exports = (content, flags = {}) => {
 			standfirst:
 				content.descriptionHTML || topper.standfirst || content.standfirst,
 			myFtButton: {
-				variant: myFtButtonVariant(settings.backgroundColour),
+				variant: myFtButtonVariant(settings.backgroundColour, settings.layout),
 				followPlusDigestEmail: followPlusDigestEmail(flags)
 			},
 			themeImageRatio: themeImageRatio[settings.layout]

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

@@ -113,6 +113,14 @@ describe('Get topper settings', () => {
 
 			expect(topper.backgroundColour).to.equal('wheat');
 		});
+
+		it('sets the `backgroundColour` to `white` if layout is deep landscape and background is light', () => {
+			const topper = getTopperSettings({
+				topper: { layout: 'deep-landscape', backgroundColour: 'paper' }
+			});
+
+			expect(topper.backgroundColour).to.equal('white');
+		});
 	});
 
 	describe('Podcast', () => {