diff --git a/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js b/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js index ba20793584..b3bde3ddf4 100644 --- a/packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js +++ b/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'; diff --git a/packages/kg-default-nodes/test/nodes/call-to-action.test.js b/packages/kg-default-nodes/test/nodes/call-to-action.test.js index 296bf3fb3a..4d1cbc1ef6 100644 --- a/packages/kg-default-nodes/test/nodes/call-to-action.test.js +++ b/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; diff --git a/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx index 439ea0578d..725d411f47 100644 --- a/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx +++ b/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, diff --git a/packages/koenig-lexical/src/nodes/CallToActionNode.jsx b/packages/koenig-lexical/src/nodes/CallToActionNode.jsx index 188dd69e26..1846d3794a 100644 --- a/packages/koenig-lexical/src/nodes/CallToActionNode.jsx +++ b/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} diff --git a/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx b/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx index 58553c385e..fd3d9c5c6a 100644 --- a/packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx +++ b/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 ( <> {}} + handleButtonColor={handleButtonColorChange} handleColorChange={() => {}} hasBackground={hasBackground} hasImage={hasImage} 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 6a0908b940..8e6d3eef1d 100644 --- a/packages/koenig-lexical/test/e2e/cards/cta-card.test.js +++ b/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);'); + }); });