From c93e6a0075dc96ac9d88d1a2c07a3bef00e4a6c5 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Mon, 27 Jan 2025 08:38:25 +0900
Subject: [PATCH 1/2] Implemented changing background colours

ref https://linear.app/ghost/issue/PLG-317/implement-background-colour-handling-to-cta-card
---
 .../src/nodes/CallToActionNodeComponent.jsx    |  9 ++++++++-
 .../test/e2e/cards/cta-card.test.js            | 18 ++++++++++++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx b/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx
index fd3d9c5c6..97da8e91f 100644
--- a/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx
+++ b/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx
@@ -63,6 +63,13 @@ export const CallToActionNodeComponent = ({
         });
     };
 
+    const handleBackgroundColorChange = (val) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            node.backgroundColor = val;
+        });
+    };
+
     return (
         <>
             <CtaCard
@@ -72,7 +79,7 @@ export const CallToActionNodeComponent = ({
                 buttonUrl={buttonUrl}
                 color={backgroundColor}
                 handleButtonColor={handleButtonColorChange}
-                handleColorChange={() => {}}
+                handleColorChange={handleBackgroundColorChange}
                 hasBackground={hasBackground}
                 hasImage={hasImage}
                 hasSponsorLabel={hasSponsorLabel}
diff --git a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js b/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
index 8e6d3eef1..52a59162e 100644
--- a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
@@ -174,4 +174,22 @@ test.describe('Call To Action Card', async () => {
         await page.click('[data-testid="cta-button-color"] button[title="Black"]');
         expect(await page.getAttribute('[data-testid="cta-button"]', 'style')).toContain('color: rgb(0, 0, 0);');
     });
+
+    test('can change background colours', async function () {
+        const colors = [
+            {testId: 'color-picker-grey', expectedClass: 'bg-grey'},
+            {testId: 'color-picker-green', expectedClass: 'bg-green'},
+            {testId: 'color-picker-blue', expectedClass: 'bg-blue'},
+            {testId: 'color-picker-yellow', expectedClass: 'bg-yellow'},
+            {testId: 'color-picker-red', expectedClass: 'bg-red'}
+        ];
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'call-to-action'});
+        const firstChildSelector = '[data-kg-card="call-to-action"] > :first-child';
+
+        for (const color of colors) {
+            await page.click(`[data-test-id="${color.testId}"]`);
+            await expect(page.locator(firstChildSelector)).toHaveClass(new RegExp(color.expectedClass));
+        }
+    });
 });

From 0da37ec7caf0d11f8cb2ac2ba342e30b671ff2e1 Mon Sep 17 00:00:00 2001
From: Ronald Langeveld <hi@ronaldlangeveld.com>
Date: Mon, 27 Jan 2025 09:27:35 +0900
Subject: [PATCH 2/2] Added more colours to test

---
 packages/koenig-lexical/test/e2e/cards/cta-card.test.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js b/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
index 52a59162e..5394eac72 100644
--- a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
+++ b/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
@@ -177,6 +177,8 @@ test.describe('Call To Action Card', async () => {
 
     test('can change background colours', async function () {
         const colors = [
+            {testId: 'color-picker-none', expectedClass: 'bg-transparent border-transparent'},
+            {testId: 'color-picker-white', expectedClass: 'bg-transparent border-grey'},
             {testId: 'color-picker-grey', expectedClass: 'bg-grey'},
             {testId: 'color-picker-green', expectedClass: 'bg-green'},
             {testId: 'color-picker-blue', expectedClass: 'bg-blue'},
@@ -185,8 +187,9 @@ test.describe('Call To Action Card', async () => {
         ];
         await focusEditor(page);
         await insertCard(page, {cardName: 'call-to-action'});
-        const firstChildSelector = '[data-kg-card="call-to-action"] > :first-child';
 
+        const firstChildSelector = '[data-kg-card="call-to-action"] > :first-child';
+        await expect(page.locator(firstChildSelector)).not.toHaveClass(/bg-(grey|green|blue|yellow|red)/); // shouldn't have any of the classes yet
         for (const color of colors) {
             await page.click(`[data-test-id="${color.testId}"]`);
             await expect(page.locator(firstChildSelector)).toHaveClass(new RegExp(color.expectedClass));