Added sponsor label toggle to CTA Card (#1420)

ref https://linear.app/ghost/issue/PLG-314/add-sponsor-label-toggle-on-cta-card - Added ability to toggle a sponsor label for Call To Action (CTA) cards.
TryGhost · Jan 27, 2025 · 5329fa2 · 5329fa2
1 parent 52a7224
commit 5329fa2
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx
@@ -125,6 +125,7 @@ export function CtaCard({
             />
             {/* Sponsor label setting */}
             <ToggleSetting
+                dataTestId="sponsor-label-toggle"
                 isChecked={hasSponsorLabel}
                 label='Sponsor label'
                 onChange={updateHasSponsorLabel}
@@ -224,7 +225,7 @@ export function CtaCard({
                         'not-kg-prose py-3',
                         {'mx-5': color !== 'none'}
                     )}>
-                        <p className="font-sans text-2xs font-semibold uppercase leading-8 tracking-normal text-grey-900/40 dark:text-grey-100/40">Sponsored</p>
+                        <p className="font-sans text-2xs font-semibold uppercase leading-8 tracking-normal text-grey-900/40 dark:text-grey-100/40" data-testid="sponsor-label">Sponsored</p>
                     </div>
                 )}
 

diff --git a/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx b/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx
@@ -62,7 +62,13 @@ export const CallToActionNodeComponent = ({
             node.buttonTextColor = matchingTextColor;
         });
     };
-
+    const handleHasSponsorLabelChange = (val) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            // get the current value and toggle it
+            node.hasSponsorLabel = !node.hasSponsorLabel;
+        });
+    };
     const handleBackgroundColorChange = (val) => {
         editor.update(() => {
             const node = $getNodeByKey(nodeKey);
@@ -93,7 +99,7 @@ export const CallToActionNodeComponent = ({
                 text={textValue}
                 updateButtonText={handleButtonTextChange}
                 updateButtonUrl={handleButtonUrlChange}
-                updateHasSponsorLabel={() => {}}
+                updateHasSponsorLabel={handleHasSponsorLabelChange}
                 updateLayout={() => {}}
                 updateShowButton={toggleShowButton}
             />

diff --git a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js b/packages/koenig-lexical/test/e2e/cards/cta-card.test.js
@@ -175,6 +175,16 @@ test.describe('Call To Action Card', async () => {
         expect(await page.getAttribute('[data-testid="cta-button"]', 'style')).toContain('color: rgb(0, 0, 0);');
     });
 
+    test('can toggle has sponsor label', async function () {
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'call-to-action'});
+        await page.click('[data-testid="sponsor-label-toggle"]');
+        expect(await page.isVisible('[data-testid="sponsor-label"]')).toBe(true);
+
+        await page.click('[data-testid="sponsor-label-toggle"]');
+        expect(await page.isVisible('[data-testid="sponsor-label"]')).toBe(false);
+    });
+
     test('can change background colours', async function () {
         const colors = [
             {testId: 'color-picker-none', expectedClass: 'bg-transparent border-transparent'},