Updated CTA card icon in card menu #1423

sanne-san · 2025-01-28T13:13:33Z

Ref https://linear.app/ghost/issue/PLG-320/improve-cta-card-kg-menu-preview-meta

This card will replace the Email CTA card, so it can use the same icon
Changed default background color to grey and sponsor label to true
Removed hasBackground property as this isn't needed
Removed prefilled content in nested editor
Updated card spacing

Summary by CodeRabbit

Release Notes

New Features
- Updated Call to Action (CTA) node with improved default settings.
- Changed default CTA icon to Email CTA icon.
Bug Fixes
- Simplified CTA component prop handling.
- Adjusted wrapper style logic for CTA nodes.
Refactor
- Removed hasBackground property from CTA components.
- Updated default values for CTA node properties.
- Streamlined CTA node and component logic.
- Enhanced test cases for clarity and correctness related to CTA functionality.

Ref https://linear.app/ghost/issue/PLG-320/improve-cta-card-kg-menu-preview-meta - This card will replace the Email CTA card, so it can use the same icon - Changed default background color to grey and sponsor label to true - Removed hasBackground property as this isn't needed - Removed prefilled content in nested editor - Updated card spacing

coderabbitai · 2025-01-28T13:13:41Z

Walkthrough

This pull request introduces modifications to the CallToActionNode across multiple packages, focusing on property management and component rendering. The changes primarily involve removing the hasBackground property, updating default values for hasSponsorLabel and backgroundColor, and replacing the CalloutCardIcon with EmailCtaCardIcon. The modifications streamline the node's configuration and simplify its component structure, affecting both the node implementation and its associated test cases.

Changes

File	Change Summary
`packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js`	- Updated `hasSponsorLabel` default to `true` - Changed `backgroundColor` default to `'grey'` - Removed `hasBackground` property
`packages/kg-default-nodes/test/nodes/call-to-action.test.js`	- Removed `hasBackground` property checks and references
`packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx`	- Removed `isSelected` prop - Simplified styling conditions
`packages/koenig-lexical/src/nodes/CallToActionNode.jsx`	- Replaced `CalloutCardIcon` with `EmailCtaCardIcon` - Modified `wrapperStyle` to be conditionally set
`packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx`	- Removed `hasBackground` prop - Updated method signature

Possibly related PRs

Integrated CTA Node Component into Koenig-Lexical #1413: Changes to CallToActionNode backgroundColor property
Added Button Colour Handling to CTA card #1418: Introduction of buttonTextColor property
Added sponsor label toggle to CTA Card #1420: Addition of toggle for hasSponsorLabel property

Poem

🐰 A Call to Action, sleek and bright,
Icons dance, properties take flight!
Background fades, new colors gleam,
Simplicity reigns in our coding dream.
Hop along, code rabbit's delight! 🚀

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between b2429f2 and 8b5e4ed.

📒 Files selected for processing (1)

packages/koenig-lexical/test/e2e/cards/cta-card.test.js (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (1)

GitHub Check: Node 20.11.1

🔇 Additional comments (2)

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

182-190: LGTM! Test case aligns with default sponsor label behavior.

The test case correctly verifies the sponsor label toggle functionality, with improved naming clarity.

Line range hint 1-1: Consider adding test coverage for missing changes.

The PR objectives mention removing prefilled content and adjusting card spacing, but there are no tests verifying these changes:

Add tests to verify that the nested editor starts empty

Add tests to verify card spacing adjustments

Here's a script to check if there are any existing tests for these scenarios in other test files:

✨ Finishing Touches

📝 Generate Docstrings (Beta)

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx (1)
223-224: Simplified padding logic based on color and sponsor label.

The padding conditions have been streamlined to only depend on:

Background color being 'none'

Presence of sponsor label

However, the current implementation might benefit from a more maintainable approach.

Consider extracting the padding logic into a separate function for better maintainability:
+const getPaddingClasses = (color, hasSponsorLabel) => {
+    if (color !== 'none') return '';
+    return hasSponsorLabel ? 'pb-3' : 'py-3';
+};

 <div className={clsx(
     'w-full rounded-lg border',
     CTA_COLORS[color],
-    {
-        'py-3': color === 'none' && !hasSponsorLabel,
-        'pb-3': color === 'none' && hasSponsorLabel
-    }
+    getPaddingClasses(color, hasSponsorLabel)
 )} data-cta-layout={layout}>

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 94b551a and 05525f6.

📒 Files selected for processing (5)

packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js (2 hunks)
packages/kg-default-nodes/test/nodes/call-to-action.test.js (0 hunks)
packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx (1 hunks)
packages/koenig-lexical/src/nodes/CallToActionNode.jsx (3 hunks)
packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx (0 hunks)

💤 Files with no reviewable changes (2)

packages/kg-default-nodes/test/nodes/call-to-action.test.js
packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx

🔇 Additional comments (4)

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

13-14: Property default values updated to match new design.

The changes align with the PR objectives by:

Setting hasSponsorLabel default to true

Setting backgroundColor default to 'grey'

34-44: Improved property initialization with nullish coalescing.

The switch from logical OR (||) to nullish coalescing (??) is a good improvement as it:

Only applies defaults for null/undefined values

Preserves falsy values like empty strings and false

packages/koenig-lexical/src/nodes/CallToActionNode.jsx (2)

1-1: Icon updated to match new design.

The changes align with the PR objectives by replacing CalloutCardIcon with EmailCtaCardIcon consistently across:

Import statement

Static kgMenu configuration

getIcon method

Also applies to: 18-18, 33-33

47-47: Wrapper style now adapts based on background color.

The conditional logic improves the component's flexibility:

Uses 'wide' style when no background color is set

Uses 'regular' style when a background color is present

Ref https://linear.app/ghost/issue/PLG-320/improve-cta-card-kg-menu-preview-meta

coderabbitai bot reviewed Jan 28, 2025

View reviewed changes

sanne-san added 2 commits January 28, 2025 14:47

Updated CTA card test

b2429f2

Ref https://linear.app/ghost/issue/PLG-320/improve-cta-card-kg-menu-preview-meta

Updated CTA card test to match new default settings

8b5e4ed

Ref https://linear.app/ghost/issue/PLG-320/improve-cta-card-kg-menu-preview-meta

sanne-san merged commit e4839df into main Jan 28, 2025
2 checks passed

sanne-san deleted the cta-card-refinements branch January 28, 2025 15:31

This was referenced Jan 29, 2025

Styled visibility settings for HTML card #1426

Merged

Removed unnecessary constructor in CallToActionNode #1432

Merged

Generalized visibility property logic and added to CallToActionNode #1431

Merged

This was referenced Feb 25, 2025

Changed various UI components. #1451

Merged

Moved CTA card behind beta flag #1458

Merged

coderabbitai bot mentioned this pull request Apr 2, 2025

Fixed CTA card menu capitalisation and matchers #1497

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Updated CTA card icon in card menu #1423

Updated CTA card icon in card menu #1423

Uh oh!

sanne-san commented Jan 28, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jan 28, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Updated CTA card icon in card menu #1423

Updated CTA card icon in card menu #1423

Uh oh!

Conversation

sanne-san commented Jan 28, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Release Notes

Uh oh!

coderabbitai bot commented Jan 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Possibly related PRs

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

sanne-san commented Jan 28, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 28, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)