Added Button Colour Handling to CTA card

packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js

@@ -9,6 +9,7 @@ export class CallToActionNode extends generateDecoratorNode({nodeType: 'call-to-
         {name: 'buttonText', default: ''},
         {name: 'buttonUrl', default: ''},
         {name: 'buttonColor', default: ''},
+        {name: 'buttonTextColor', default: ''},
         {name: 'hasSponsorLabel', default: false},
         {name: 'hasBackground', default: false},
         {name: 'backgroundColor', default: 'none'},
@@ -24,6 +25,7 @@ export class CallToActionNode extends generateDecoratorNode({nodeType: 'call-to-
         buttonText,
         buttonUrl,
         buttonColor,
+        buttonTextColor,
         hasSponsorLabel,
         hasBackground,
         backgroundColor,
@@ -37,6 +39,7 @@ export class CallToActionNode extends generateDecoratorNode({nodeType: 'call-to-
         this.__buttonText = buttonText || '';
         this.__buttonUrl = buttonUrl || '';
         this.__buttonColor = buttonColor || 'none';
+        this.__buttonTextColor = buttonTextColor || 'none';
         this.__hasSponsorLabel = hasSponsorLabel || false;
         this.__hasBackground = hasBackground || false;
         this.__backgroundColor = backgroundColor || 'none';

packages/kg-default-nodes/test/nodes/call-to-action.test.js

@@ -34,6 +34,7 @@ describe('CallToActionNode', function () {
             buttonText: 'click me',
             buttonUrl: 'http://blog.com/post1',
             buttonColor: 'none',
+            buttonTextColor: 'none',
             hasSponsorLabel: true,
             hasBackground: true,
             backgroundColor: 'none',
@@ -60,6 +61,7 @@ describe('CallToActionNode', function () {
             callToActionNode.buttonText.should.equal(dataset.buttonText);
             callToActionNode.buttonUrl.should.equal(dataset.buttonUrl);
             callToActionNode.buttonColor.should.equal(dataset.buttonColor);
+            callToActionNode.buttonTextColor.should.equal(dataset.buttonTextColor);
             callToActionNode.hasSponsorLabel.should.equal(dataset.hasSponsorLabel);
             callToActionNode.hasBackground.should.equal(dataset.hasBackground);
             callToActionNode.backgroundColor.should.equal(dataset.backgroundColor);
@@ -94,6 +96,10 @@ describe('CallToActionNode', function () {
             callToActionNode.buttonColor = 'red';
             callToActionNode.buttonColor.should.equal('red');
 
+            callToActionNode.buttonTextColor.should.equal('none');
+            callToActionNode.buttonTextColor = 'black';
+            callToActionNode.buttonTextColor.should.equal('black');
+
             callToActionNode.hasSponsorLabel.should.equal(false);
             callToActionNode.hasSponsorLabel = true;
 

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

@@ -60,19 +60,19 @@ export const ctaColorPicker = [
 ];
 
 export function CtaCard({
-    buttonText, //
-    buttonUrl, //
-    buttonColor, //
+    buttonText,
+    buttonUrl,
+    buttonColor,
     buttonTextColor,
     color, //
-    hasSponsorLabel, //
+    hasSponsorLabel,
     htmlEditor,
     htmlEditorInitialState,
-    imageSrc, //
-    isEditing, //
-    isSelected, //
-    layout, //
-    showButton, //
+    imageSrc,
+    isEditing,
+    isSelected,
+    layout,
+    showButton,
     updateButtonText,
     updateButtonUrl,
     updateShowButton,

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

@@ -56,6 +56,7 @@ export class CallToActionNode extends BaseCallToActionNode {
                     backgroundColor={this.backgroundColor}
                     buttonColor={this.buttonColor}
                     buttonText={this.buttonText}
+                    buttonTextColor={this.buttonTextColor}
                     buttonUrl={this.buttonUrl}
                     hasBackground={this.hasBackground}
                     hasImage={this.hasImage}

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

@@ -21,7 +21,8 @@ export const CallToActionNodeComponent = ({
     showButton,
     textValue,
     buttonColor,
-    htmlEditor
+    htmlEditor,
+    buttonTextColor
 }) => {
     const [editor] = useLexicalComposerContext();
     const {isEditing, isSelected, setEditing} = React.useContext(CardContext);
@@ -54,14 +55,23 @@ export const CallToActionNodeComponent = ({
         });
     };
 
+    const handleButtonColorChange = (val, matchingTextColor) => {
+        editor.update(() => {
+            const node = $getNodeByKey(nodeKey);
+            node.buttonColor = val;
+            node.buttonTextColor = matchingTextColor;
+        });
+    };
+
     return (
         <>
             <CtaCard
                 buttonColor={buttonColor}
                 buttonText={buttonText}
+                buttonTextColor={buttonTextColor}
                 buttonUrl={buttonUrl}
                 color={backgroundColor}
-                handleButtonColor={() => {}}
+                handleButtonColor={handleButtonColorChange}
                 handleColorChange={() => {}}
                 hasBackground={hasBackground}
                 hasImage={hasImage}

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

@@ -124,4 +124,54 @@ test.describe('Call To Action Card', async () => {
 
         expect(await page.isVisible('[data-testid="cta-button"]')).toBe(true);
     });
+
+    test('default button colour is accent', async function () {
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'call-to-action'});
+        await page.click('[data-testid="button-settings"]');
+        expect(await page.getAttribute('[data-testid="cta-button"]', 'class')).toContain('bg-accent');
+    });
+
+    test('can change button colour to black', async function () {
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'call-to-action'});
+        await page.click('[data-testid="button-settings"]');
+        // find the parent element cta-button-color and select child button with title=black
+        await page.click('[data-testid="cta-button-color"] button[title="Black"]');
+        // check if the button has style="background-color: rgb(0, 0, 0);"
+        expect(await page.getAttribute('[data-testid="cta-button"]', 'style')).toContain('background-color: rgb(0, 0, 0);');
+    });
+
+    test('can change button colour to grey', async function () {
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'call-to-action'});
+        await page.click('[data-testid="button-settings"]');
+        // find the parent element cta-button-color and select child button with title=white
+        await page.click('[data-testid="cta-button-color"] button[title="Grey"]');
+        // check if the button has style="background-color: rgb(255, 255, 255);"
+        expect(await page.getAttribute('[data-testid="cta-button"]', 'style')).toContain('background-color: rgb(240, 240, 240);');
+    });
+
+    test('can use colour picker to change button colour', async function () {
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'call-to-action'});
+        await page.click('[data-testid="button-settings"]');
+        await page.click('button[aria-label="Pick color"]');
+        await page.fill('input[aria-label="Color value"]', 'ff0000');
+        expect(await page.getAttribute('[data-testid="cta-button"]', 'style')).toContain('background-color: rgb(255, 0, 0);');
+    });
+
+    test('button text colour changes with button colour', async function () {
+        await focusEditor(page);
+        await insertCard(page, {cardName: 'call-to-action'});
+        await page.click('[data-testid="button-settings"]');
+        await page.fill('[data-testid="button-text"]', 'Click me');
+        await page.click('button[aria-label="Pick color"]');
+        await page.fill('input[aria-label="Color value"]', 'FFFFFF');
+        expect(await page.getAttribute('[data-testid="cta-button"]', 'style')).toContain('color: rgb(255, 255, 255);');
+
+        // change button colour to black
+        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);');
+    });
 });