Merge pull request #19360 from mozilla/FXA-12188

feat(cms): Allow background-images and split layout

Author: LZoog

assets/other/cms/backgrounds/abstract_colorful.jpg

@@ -28,6 +28,7 @@ export const RelyingPartyResultFactory = (
     description: faker.string.sample(),
     primaryButtonText: faker.string.sample(),
     pageTitle: faker.string.sample(),
+    splitLayout: faker.datatype.boolean(),
   },
   SignupSetPasswordPage: {
     logoUrl: faker.internet.url(),
@@ -36,6 +37,7 @@ export const RelyingPartyResultFactory = (
     description: faker.string.sample(),
     primaryButtonText: faker.string.sample(),
     pageTitle: faker.string.sample(),
+    splitLayout: faker.datatype.boolean(),
   },
   SignupConfirmCodePage: {
     logoUrl: faker.internet.url(),
@@ -44,6 +46,7 @@ export const RelyingPartyResultFactory = (
     description: faker.string.sample(),
     primaryButtonText: faker.string.sample(),
     pageTitle: faker.string.sample(),
+    splitLayout: faker.datatype.boolean(),
   },
   SignupConfirmedSyncPage: {
     logoUrl: faker.internet.url(),
@@ -56,6 +59,7 @@ export const RelyingPartyResultFactory = (
       url: faker.internet.url(),
       altText: faker.string.sample(),
     },
+    splitLayout: faker.datatype.boolean(),
   },
   shared: {
     buttonColor: faker.color.rgb(),
@@ -65,8 +69,12 @@ export const RelyingPartyResultFactory = (
     emailLogoUrl: faker.internet.url(),
     emailLogoAltText: faker.string.sample(),
     emailLogoWidth: `${faker.number.int({ min: 10, max: 1000 })}px`,
-    backgroundColor: faker.color.rgb(),
-    headerBackground: faker.color.rgb(),
+    backgrounds: {
+      defaultLayout: faker.color.rgb(),
+      splitLayout: faker.color.rgb(),
+      header: faker.color.rgb(),
+      splitLayoutAltText: faker.string.sample(),
+    },
     pageTitle: faker.string.sample(),
     headerLogoUrl: faker.internet.url(),
     headerLogoAltText: faker.string.sample(),
@@ -82,20 +90,23 @@ export const RelyingPartyResultFactory = (
     subject: faker.string.sample(),
     headline: faker.string.sample(),
     description: faker.string.sample(),
+    splitLayout: faker.datatype.boolean(),
   },
   VerifyLoginCodeEmail: {
     logoUrl: faker.internet.url(),
     logoAltText: faker.internet.url(),
     subject: faker.string.sample(),
     headline: faker.string.sample(),
     description: faker.string.sample(),
+    splitLayout: faker.datatype.boolean(),
   },
   VerifyShortCodeEmail: {
     logoUrl: faker.internet.url(),
     logoAltText: faker.internet.url(),
     subject: faker.string.sample(),
     headline: faker.string.sample(),
     description: faker.string.sample(),
+    splitLayout: faker.datatype.boolean(),
   },
   SigninPage: {
     logoUrl: faker.internet.url(),
@@ -104,6 +115,7 @@ export const RelyingPartyResultFactory = (
     description: faker.string.sample(),
     primaryButtonText: faker.string.sample(),
     pageTitle: faker.string.sample(),
+    splitLayout: faker.datatype.boolean(),
   },
   SigninTokenCodePage: {
     logoUrl: faker.internet.url(),
@@ -112,6 +124,7 @@ export const RelyingPartyResultFactory = (
     description: faker.string.sample(),
     primaryButtonText: faker.string.sample(),
     pageTitle: faker.string.sample(),
+    splitLayout: faker.datatype.boolean(),
   },
   SigninUnblockCodePage: {
     logoUrl: faker.internet.url(),
@@ -120,6 +133,7 @@ export const RelyingPartyResultFactory = (
     description: faker.string.sample(),
     primaryButtonText: faker.string.sample(),
     pageTitle: faker.string.sample(),
+    splitLayout: faker.datatype.boolean(),
   },
   ...override,
 });

assets/other/cms/backgrounds/abstract_pastel_transparent.png

@@ -21,15 +21,19 @@ export const relyingPartyQuery = graphql(`
         emailLogoUrl
         emailLogoAltText
         emailLogoWidth
-        backgroundColor
-        headerBackground
         pageTitle
         headerLogoUrl
         headerLogoAltText
         featureFlags {
           syncConfirmedPageHideCTA
           syncHidePromoAfterLogin
         }
+        backgrounds {
+          defaultLayout
+          header
+          splitLayout
+          splitLayoutAltText
+        }
         favicon
       }
       EmailFirstPage {
@@ -39,6 +43,7 @@ export const relyingPartyQuery = graphql(`
         description
         primaryButtonText
         pageTitle
+        splitLayout
       }
       SignupSetPasswordPage {
         logoUrl
@@ -47,12 +52,14 @@ export const relyingPartyQuery = graphql(`
         description
         primaryButtonText
         pageTitle
+        splitLayout
       }
       SignupConfirmCodePage {
         headline
         description
         primaryButtonText
         pageTitle
+        splitLayout
       }
       SignupConfirmedSyncPage {
         headline
@@ -63,33 +70,28 @@ export const relyingPartyQuery = graphql(`
           url
           altText
         }
+        splitLayout
       }
       SigninPage {
         headline
         description
         primaryButtonText
         pageTitle
+        splitLayout
       }
       SigninTokenCodePage {
         headline
         description
         primaryButtonText
         pageTitle
+        splitLayout
       }
       SigninUnblockCodePage {
         headline
         description
         primaryButtonText
         pageTitle
-      }
-      shared {
-        buttonColor
-        logoUrl
-        logoAltText
-        emailFromName
-        emailLogoUrl
-        emailLogoAltText
-        emailLogoWidth
+        splitLayout
       }
       NewDeviceLoginEmail {
         subject

assets/other/cms/backgrounds/fox_galaxy.png

@@ -10,6 +10,7 @@ export interface Page {
   logoAltText: string | null;
   pageTitle: string | null;
   primaryImage: Image | null;
+  splitLayout: boolean | null;
 }
 
 export interface Email {
@@ -26,8 +27,12 @@ export interface Shared {
   emailLogoUrl: string | null;
   emailLogoAltText: string | null;
   emailLogoWidth: string | null;
-  backgroundColor: string | null;
-  headerBackground: string | null;
+  backgrounds: {
+    defaultLayout: string | null;
+    header: string | null;
+    splitLayout: string | null;
+    splitLayoutAltText: string | null;
+  };
   pageTitle: string | null;
   headerLogoUrl: string | null;
   headerLogoAltText: string | null;

libs/shared/cms/src/__generated__/gql.ts

@@ -130,20 +130,17 @@ class PairIndexView extends FormView {
       }
     }
 
-    // Apply CMS background gradient
+    // Apply CMS background
     if (
       this.cmsConfig &&
       this.cmsConfig.shared &&
-      this.cmsConfig.shared.backgroundColor
+      this.cmsConfig.shared.backgrounds.defaultLayout
     ) {
-      // Validate the background color is a valid CSS graident
-      const isValidGradient = /^linear-gradient\(/.test(
-        this.cmsConfig.shared.backgroundColor
-      );
       // Not ideal, but the pairing page will be going away
       const screenWidth = window.innerWidth;
-      if (isValidGradient && screenWidth > 768) {
-        document.body.style.background = this.cmsConfig.shared.backgroundColor;
+      if (screenWidth > 768) {
+        document.body.style.background =
+          this.cmsConfig.shared.backgrounds.defaultLayout;
       }
     }
 
@@ -172,10 +169,10 @@ class PairIndexView extends FormView {
     if (
       this.cmsConfig &&
       this.cmsConfig.shared &&
-      this.cmsConfig.shared.backgroundColor
+      this.cmsConfig.shared.backgrounds.defaultLayout
     ) {
       const textColorClass = getTextColorClassName(
-        this.cmsConfig.shared.backgroundColor.trim()
+        this.cmsConfig.shared.backgrounds.defaultLayout.trim()
       );
       switch (textColorClass) {
         case 'text-white':

libs/shared/cms/src/__generated__/graphql.ts

@@ -23,6 +23,12 @@ exports[`<AppLayout /> snapshots renders correctly with CMS: header logo 1`] = `
 />
 `;
 
+exports[`<AppLayout /> snapshots renders correctly with CMS: split layout main 1`] = `
+<main
+  class="mobileLandscape:flex mobileLandscape:items-center mobileLandscape:flex-1"
+/>
+`;
+
 exports[`<AppLayout /> snapshots renders correctly with CMS: title 1`] = `"MOCK Shared Title | Mozilla accounts"`;
 
 exports[`<AppLayout /> snapshots renders correctly without CMS: background wrapper 1`] = `