Wired up button toggle to CTA Card (#1415)

ref https://linear.app/ghost/issue/PLG-318/implement-button-toggle

- Wired up a function to toggle the visibility of the button on the CTA
  card.
- Ensures the Button settings expand and collapse when toggling it.
- Added tests

Author: ronaldlangeveld

packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx

@@ -73,13 +73,13 @@ export function CtaCard({
     isSelected, //
     layout, //
     showButton, //
-    updateButtonText, //
-    updateButtonUrl, //
-    updateShowButton, //
-    updateHasSponsorLabel, //
-    updateLayout, //
-    handleColorChange, //
-    handleButtonColor //
+    updateButtonText,
+    updateButtonUrl,
+    updateShowButton,
+    updateHasSponsorLabel,
+    updateLayout,
+    handleColorChange,
+    handleButtonColor
 }) {
     const [buttonColorPickerExpanded, setButtonColorPickerExpanded] = useState(false);
 

packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx

@@ -1,10 +1,12 @@
 import CardContext from '../context/CardContext';
 import KoenigComposerContext from '../context/KoenigComposerContext.jsx';
 import React from 'react';
+import {$getNodeByKey} from 'lexical';
 import {ActionToolbar} from '../components/ui/ActionToolbar.jsx';
 import {CtaCard} from '../components/ui/cards/CtaCard';
 import {SnippetActionToolbar} from '../components/ui/SnippetActionToolbar.jsx';
 import {ToolbarMenu, ToolbarMenuItem, ToolbarMenuSeparator} from '../components/ui/ToolbarMenu.jsx';
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 
 export const CallToActionNodeComponent = ({
     nodeKey,
@@ -21,7 +23,7 @@ export const CallToActionNodeComponent = ({
     buttonColor,
     htmlEditor
 }) => {
-    // const [editor] = useLexicalComposerContext();
+    const [editor] = useLexicalComposerContext();
     const {isEditing, isSelected, setEditing} = React.useContext(CardContext);
     const {cardConfig} = React.useContext(KoenigComposerContext);
     const [showSnippetToolbar, setShowSnippetToolbar] = React.useState(false);
@@ -30,6 +32,14 @@ export const CallToActionNodeComponent = ({
         event.stopPropagation();
         setEditing(true);
     };
+
+    const toggleShowButton = (event) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            node.showButton = !node.showButton;
+        });
+    };
+
     return (
         <>
             <CtaCard
@@ -54,7 +64,7 @@ export const CallToActionNodeComponent = ({
                 updateButtonUrl={() => {}}
                 updateHasSponsorLabel={() => {}}
                 updateLayout={() => {}}
-                updateShowButton={() => {}}
+                updateShowButton={toggleShowButton}
             />
             <ActionToolbar
                 data-kg-card-toolbar="button"

packages/koenig-lexical/test/e2e/cards/cta-card.test.js

@@ -1,5 +1,5 @@
 import {assertHTML, focusEditor, html, initialize, insertCard} from '../../utils/e2e';
-import {test} from '@playwright/test';
+import {expect, test} from '@playwright/test';
 
 test.describe('Call To Action Card', async () => {
     let page;
@@ -28,4 +28,31 @@ test.describe('Call To Action Card', async () => {
             <p><br /></p>
         `, {ignoreCardContents: true});
     });
+
+    test('can toggle button on card', async function () {
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'call-to-action'});
+        await page.click('[data-testid="button-settings"]');
+        expect(await page.isVisible('[data-testid="cta-button"]')).toBe(true);
+
+        await page.click('[data-testid="button-settings"]');
+
+        expect(await page.isVisible('[data-testid="cta-button"]')).toBe(false);
+    });
+
+    test('button settings expands and collapses when toggled', async function () {
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'call-to-action'});
+        await page.click('[data-testid="button-settings"]');
+        // determine if settings are open byy looking for cta-button-color, button-text & button-url
+        expect(await page.isVisible('[data-testid="cta-button-color"]')).toBe(true);
+        expect(await page.isVisible('[data-testid="button-text"]')).toBe(true);
+        expect(await page.isVisible('[data-testid="button-url"]')).toBe(true);
+
+        await page.click('[data-testid="button-settings"]');
+        // determine if settings are closed by looking for cta-button-color, button-text & button-url
+        expect(await page.isVisible('[data-testid="cta-button-color"]')).toBe(false);
+        expect(await page.isVisible('[data-testid="button-text"]')).toBe(false);
+        expect(await page.isVisible('[data-testid="button-url"]')).toBe(false);
+    });
 });