Updated CTA card icon in card menu

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

@@ -10,9 +10,8 @@ export class CallToActionNode extends generateDecoratorNode({nodeType: 'call-to-
         {name: 'buttonUrl', default: ''},
         {name: 'buttonColor', default: ''},
         {name: 'buttonTextColor', default: ''},
-        {name: 'hasSponsorLabel', default: false},
-        {name: 'hasBackground', default: false},
-        {name: 'backgroundColor', default: 'none'},
+        {name: 'hasSponsorLabel', default: true},
+        {name: 'backgroundColor', default: 'grey'},
         {name: 'hasImage', default: false},
         {name: 'imageUrl', default: ''}
     ]}
@@ -27,24 +26,22 @@ export class CallToActionNode extends generateDecoratorNode({nodeType: 'call-to-
         buttonColor,
         buttonTextColor,
         hasSponsorLabel,
-        hasBackground,
         backgroundColor,
         hasImage,
         imageUrl
     } = {}, key) {
         super(key);
-        this.__layout = layout || 'minimal';
-        this.__textValue = textValue || '';
-        this.__showButton = showButton || false;
-        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';
-        this.__hasImage = hasImage || false;
-        this.__imageUrl = imageUrl || '';
+        this.__layout = layout ?? 'minimal';
+        this.__textValue = textValue ?? '';
+        this.__showButton = showButton ?? false;
+        this.__buttonText = buttonText ?? '';
+        this.__buttonUrl = buttonUrl ?? '';
+        this.__buttonColor = buttonColor ?? 'none';
+        this.__buttonTextColor = buttonTextColor ?? 'none';
+        this.__hasSponsorLabel = hasSponsorLabel ?? true;
+        this.__backgroundColor = backgroundColor ?? 'grey';
+        this.__hasImage = hasImage ?? false;
+        this.__imageUrl = imageUrl ?? '';
     }
 }
 

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

@@ -36,7 +36,6 @@ describe('CallToActionNode', function () {
             buttonColor: 'none',
             buttonTextColor: 'none',
             hasSponsorLabel: true,
-            hasBackground: true,
             backgroundColor: 'none',
             hasImage: true,
             imageUrl: 'http://blog.com/image1.jpg'
@@ -63,7 +62,6 @@ describe('CallToActionNode', function () {
             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);
             callToActionNode.hasImage.should.equal(dataset.hasImage);
             callToActionNode.imageUrl.should.equal(dataset.imageUrl);
@@ -103,9 +101,6 @@ describe('CallToActionNode', function () {
             callToActionNode.hasSponsorLabel.should.equal(false);
             callToActionNode.hasSponsorLabel = true;
 
-            callToActionNode.hasBackground.should.equal(false);
-            callToActionNode.hasBackground = true;
-
             callToActionNode.backgroundColor.should.equal('none');
             callToActionNode.backgroundColor = '#654321';
             callToActionNode.backgroundColor.should.equal('#654321');

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

@@ -70,7 +70,6 @@ export function CtaCard({
     htmlEditorInitialState,
     imageSrc,
     isEditing,
-    isSelected,
     layout,
     showButton,
     updateButtonText,
@@ -221,8 +220,8 @@ export function CtaCard({
                 'w-full rounded-lg border',
                 CTA_COLORS[color],
                 {
-                    'py-3': (isEditing || isSelected) && color === 'none' && !hasSponsorLabel,
-                    'pb-3': color === 'none' && !((isEditing || isSelected) && !hasSponsorLabel)
+                    'py-3': color === 'none' && !hasSponsorLabel,
+                    'pb-3': color === 'none' && hasSponsorLabel
                 }
             )} data-cta-layout={layout}>
                 {/* Sponsor label */}
@@ -324,7 +323,6 @@ CtaCard.propTypes = {
     hasSponsorLabel: PropTypes.bool,    
     imageSrc: PropTypes.string,
     isEditing: PropTypes.bool,
-    isSelected: PropTypes.bool,
     layout: PropTypes.oneOf(['minimal', 'immersive']),
     showButton: PropTypes.bool,
     htmlEditor: PropTypes.object,
@@ -350,7 +348,6 @@ CtaCard.defaultProps = {
     hasSponsorLabel: false,
     imageSrc: '',
     isEditing: false,
-    isSelected: false,
     layout: 'immersive',
     showButton: false,
     updateHasSponsorLabel: () => {},

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

@@ -1,10 +1,10 @@
-import CalloutCardIcon from '../assets/icons/kg-card-type-callout.svg?react';
+import EmailCtaCardIcon from '../assets/icons/kg-card-type-email-cta.svg?react';
 import KoenigCardWrapper from '../components/KoenigCardWrapper';
 import {BASIC_NODES} from '../index.js';
 import {CallToActionNode as BaseCallToActionNode} from '@tryghost/kg-default-nodes';
 import {CallToActionNodeComponent} from './CallToActionNodeComponent';
 import {createCommand} from 'lexical';
-import {populateNestedEditor, setupNestedEditor} from '../utils/nested-editors';
+import {setupNestedEditor} from '../utils/nested-editors';
 
 export const INSERT_CTA_COMMAND = createCommand();
 
@@ -15,7 +15,7 @@ export class CallToActionNode extends BaseCallToActionNode {
     static kgMenu = {
         label: 'Call to Action',
         desc: 'Add a call to action to your post',
-        Icon: CalloutCardIcon, // TODO: Replace with correct icon
+        Icon: EmailCtaCardIcon,
         insertCommand: INSERT_CTA_COMMAND,
         matches: ['cta', 'call-to-action'],
         priority: 10,
@@ -30,35 +30,28 @@ export class CallToActionNode extends BaseCallToActionNode {
     }
 
     getIcon() {
-        // TODO: replace with correct icon
-        return CalloutCardIcon;
+        return EmailCtaCardIcon;
     }
 
     constructor(dataset = {}, key) {
         super(dataset, key);
 
         // set up nested editor instances
         setupNestedEditor(this, '__htmlEditor', {editor: dataset.htmlEditor, nodes: BASIC_NODES});
-
-        // populate nested editors on initial construction
-        if (!dataset.htmlEditor) {
-            populateNestedEditor(this, '__htmlEditor', dataset.html || '<p>Hey <code>{first_name, "there"}</code>,</p>');
-        }
     }
 
     decorate() {
         return (
             <KoenigCardWrapper
                 nodeKey={this.getKey()}
-                wrapperStyle="wide"
+                wrapperStyle={this.backgroundColor === 'none' ? 'wide' : 'regular'}
             >
                 <CallToActionNodeComponent
                     backgroundColor={this.backgroundColor}
                     buttonColor={this.buttonColor}
                     buttonText={this.buttonText}
                     buttonTextColor={this.buttonTextColor}
                     buttonUrl={this.buttonUrl}
-                    hasBackground={this.hasBackground}
                     hasImage={this.hasImage}
                     hasSponsorLabel={this.hasSponsorLabel}
                     htmlEditor={this.__htmlEditor}

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

@@ -13,7 +13,6 @@ export const CallToActionNodeComponent = ({
     backgroundColor,
     buttonText,
     buttonUrl,
-    hasBackground,
     hasImage,
     hasSponsorLabel,
     imageUrl,
@@ -119,7 +118,6 @@ export const CallToActionNodeComponent = ({
                 color={backgroundColor}
                 handleButtonColor={handleButtonColorChange}
                 handleColorChange={handleBackgroundColorChange}
-                hasBackground={hasBackground}
                 hasImage={hasImage}
                 hasSponsorLabel={hasSponsorLabel}
                 htmlEditor={htmlEditor}