Skip to content

Added setting for link color to CTA card #1477

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Mar 17, 2025
Merged

Added setting for link color to CTA card #1477

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2cfead6
Added setting for link color to CTA card
sanne-san Mar 13, 2025
9fa1cbb
Added link-accent class to the call to action renderer
sanne-san Mar 13, 2025
6fab0b2
Updated test to include link color
sanne-san Mar 13, 2025
146d255
Fixed CTA link color in nested editors
sanne-san Mar 17, 2025
6538be5
Merge branch 'main' into link-color
kevinansfield Mar 17, 2025
6ba7750
Updated tests to accommodate for three tabs in settings panel
sanne-san Mar 17, 2025
0bd8ae7
Added test for link color functionality
sanne-san Mar 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/kg-default-nodes/lib/nodes/call-to-action/CallToActionNode.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export class CallToActionNode extends generateDecoratorNode({
{name: 'hasSponsorLabel', default: true},
{name: 'sponsorLabel', default: '<p><span style="white-space: pre-wrap;">SPONSORED</span></p>'},
{name: 'backgroundColor', default: 'grey'}, // Since this is one of a few fixed options, we stick to colour names.
{name: 'linkColor', default: 'text'},
{name: 'imageUrl', default: ''},
{name: 'imageWidth', default: null},
{name: 'imageHeight', default: null}
Expand Down
7 changes: 4 additions & 3 deletions packages/kg-default-nodes/lib/nodes/call-to-action/calltoaction-renderer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ function ctaCardTemplate(dataset) {
? `style="color: ${dataset.buttonTextColor};"`
: `style="background-color: ${dataset.buttonColor}; color: ${dataset.buttonTextColor};"`;
return `
<div class="kg-card kg-cta-card kg-cta-bg-${dataset.backgroundColor} kg-cta-${dataset.layout} ${dataset.imageUrl ? 'kg-cta-has-img' : ''}" data-layout="${dataset.layout}">
<div class="kg-card kg-cta-card kg-cta-bg-${dataset.backgroundColor} kg-cta-${dataset.layout} ${dataset.imageUrl ? 'kg-cta-has-img' : ''} ${dataset.linkColor === 'accent' ? 'kg-cta-link-accent' : ''}" data-layout="${dataset.layout}">
${dataset.hasSponsorLabel ? `
<div class="kg-cta-sponsor-label-wrapper">
<div class="kg-cta-sponsor-label">
Expand Down Expand Up @@ -177,7 +177,7 @@ function emailCTATemplate(dataset, options = {}) {
};

return `
<table class="kg-card kg-cta-card kg-cta-bg-${dataset.backgroundColor} kg-cta-${dataset.layout} ${dataset.hasSponsorLabel ? '' : 'kg-cta-no-label'} ${dataset.textValue ? '' : 'kg-cta-no-text'} ${dataset.imageUrl ? 'kg-cta-has-img' : ''}" border="0" cellpadding="0" cellspacing="0" width="100%">
<table class="kg-card kg-cta-card kg-cta-bg-${dataset.backgroundColor} kg-cta-${dataset.layout} ${dataset.hasSponsorLabel ? '' : 'kg-cta-no-label'} ${dataset.textValue ? '' : 'kg-cta-no-text'} ${dataset.imageUrl ? 'kg-cta-has-img' : ''} ${dataset.linkColor === 'accent' ? 'kg-cta-link-accent' : ''}" border="0" cellpadding="0" cellspacing="0" width="100%">
${dataset.hasSponsorLabel ? `
<tr>
<td>
Expand Down Expand Up @@ -212,7 +212,8 @@ export function renderCallToActionNode(node, options = {}) {
sponsorLabel: node.sponsorLabel,
imageUrl: node.imageUrl,
imageWidth: node.imageWidth,
imageHeight: node.imageHeight
imageHeight: node.imageHeight,
linkColor: node.linkColor
};

// Add validation for backgroundColor
Expand Down
2 changes: 1 addition & 1 deletion packages/koenig-lexical/src/components/ui/TabView.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const TabView = ({tabs, defaultTab, tabContent}) => {

return (
<>
<div className={`no-scrollbar flex gap-5 border-b border-grey-300 dark:border-grey-900 ${tabs.length > 1 ? 'w-full px-6' : 'mx-6'}`}>
<div className={`no-scrollbar flex gap-3 border-b border-grey-300 dark:border-grey-900 ${tabs.length > 1 ? 'w-full px-6' : 'mx-6'}`}>
{tabs.map(tab => (
<button
key={tab.id}
Expand Down
127 changes: 82 additions & 45 deletions packages/koenig-lexical/src/components/ui/cards/CallToActionCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ export const CALLTOACTION_COLORS = {
purple: 'bg-purple/10 border-transparent'
};

const sponsoredLabelTheme = {
const getTheme = linkColor => ({
...defaultTheme,
link: 'text-accent'
};
link: linkColor === 'accent' ? 'text-accent' : 'text-black dark:text-white'
});

export const callToActionColorPicker = [
{
Expand Down Expand Up @@ -79,6 +79,19 @@ export const callToActionColorPicker = [
}
];

export const callToActionLinkColorPicker = [
{
label: 'Text',
name: 'text',
color: 'bg-black border-black'
},
{
label: 'Accent',
name: 'accent',
color: 'bg-accent border-accent'
}
];

export function CallToActionCard({
buttonColor = '',
buttonText = '',
Expand All @@ -97,6 +110,7 @@ export function CallToActionCard({
visibilityOptions = {},
handleButtonColor = () => {},
handleColorChange = () => {},
handleLinkColorChange = () => {},
onFileChange = () => {},
onRemoveMedia = () => {},
setFileInputRef = () => {},
Expand All @@ -106,11 +120,13 @@ export function CallToActionCard({
updateLayout = () => {},
updateShowButton = () => {},
toggleVisibility = () => {},
imageDragHandler = {}
imageDragHandler = {},
linkColor = 'text'
}) {
const [buttonColorPickerExpanded, setButtonColorPickerExpanded] = useState(false);

const tabs = [
{id: 'content', label: 'Content'},
{id: 'design', label: 'Design'},
{id: 'visibility', label: 'Visibility'}
];
Expand All @@ -136,24 +152,10 @@ export function CallToActionCard({
return bgColor === 'transparent' ? '' : textColorForBackgroundColor(bgColor === 'accent' ? getAccentColor() : bgColor).hex();
};

const designSettings = (
const theme = getTheme(linkColor);

const contentSettings = (
<>
{/* Layout settings */}
<ButtonGroupSettingBeta
buttons={layoutOptions}
hasTooltip={false}
label='Layout'
selectedName={layout}
onClick={updateLayout}
/>
{/* Color picker */}
<ColorOptionSettingBeta
buttons={callToActionColorPicker}
dataTestId='cta-background-color-picker'
label='Background'
selectedName={color}
onClick={handleColorChange}
/>
{/* Sponsor label setting */}
<ToggleSetting
dataTestId="sponsor-label-toggle"
Expand Down Expand Up @@ -188,26 +190,6 @@ export function CallToActionCard({
/>
{showButton && (
<>
<ColorPickerSettingBeta
dataTestId='cta-button-color'
eyedropper={true}
isExpanded={buttonColorPickerExpanded}
label='Button Color'
swatches={[
{title: 'Black', hex: '#000000'},
{title: 'Grey', hex: '#F0F0F0'},
{title: 'Brand color', accent: true}
]}
value={buttonColor}
onPickerChange={bgColor => handleButtonColor(bgColor, matchingTextColor(bgColor))}
onSwatchChange={(bgColor) => {
handleButtonColor(bgColor, matchingTextColor(bgColor));
setButtonColorPickerExpanded(false);
}}
onTogglePicker={(isExpanded) => {
setButtonColorPickerExpanded(isExpanded);
}}
/>
<InputSetting
dataTestId="button-text"
label='Button text'
Expand All @@ -226,6 +208,57 @@ export function CallToActionCard({
</>
);

const designSettings = (
<>
{/* Layout settings */}
<ButtonGroupSettingBeta
buttons={layoutOptions}
hasTooltip={false}
label='Layout'
selectedName={layout}
onClick={updateLayout}
/>
{/* Color picker */}
<ColorOptionSettingBeta
buttons={callToActionColorPicker}
dataTestId='cta-background-color-picker'
label='Background'
selectedName={color}
onClick={handleColorChange}
/>
{/* Link color setting */}
<ColorOptionSettingBeta
buttons={callToActionLinkColorPicker}
dataTestId='cta-link-color-picker'
label='Link color'
selectedName={linkColor}
onClick={handleLinkColorChange}
/>
{showButton && (
<ColorPickerSettingBeta
dataTestId='cta-button-color'
eyedropper={true}
isExpanded={buttonColorPickerExpanded}
label='Button Color'
swatches={[
{title: 'Black', hex: '#000000'},
{title: 'Grey', hex: '#F0F0F0'},
{title: 'Brand color', accent: true}
]}
value={buttonColor}
onPickerChange={bgColor => handleButtonColor(bgColor, matchingTextColor(bgColor))}
onSwatchChange={(bgColor) => {
handleButtonColor(bgColor, matchingTextColor(bgColor));
setButtonColorPickerExpanded(false);
}}
onTogglePicker={(isExpanded) => {
setButtonColorPickerExpanded(isExpanded);
}}
/>
)}
</>
);

const visibilitySettings = (
<VisibilitySettings
toggleVisibility={toggleVisibility}
Expand Down Expand Up @@ -256,7 +289,7 @@ export function CallToActionCard({
hasSettingsPanel={true}
initialEditor={sponsorLabelHtmlEditor}
initialEditorState={sponsorLabelHtmlEditorInitialState}
initialTheme={sponsoredLabelTheme}
initialTheme={theme}
nodes='basic'
textClassName={clsx(
'koenig-lexical-cta-label not-kg-prose w-full whitespace-normal font-sans !text-xs font-semibold uppercase leading-8 tracking-normal text-grey-900/50 dark:text-grey-200/40'
Expand Down Expand Up @@ -300,8 +333,9 @@ export function CallToActionCard({
hasSettingsPanel={true}
initialEditor={htmlEditor}
initialEditorState={htmlEditorInitialState}
initialTheme={theme}
nodes='basic'
placeholderClassName={`bg-transparent whitespace-normal font-serif text-xl !text-grey-500 !dark:text-grey-800 ` }
placeholderClassName={`bg-transparent whitespace-normal font-serif text-xl !text-grey-500 !dark:text-grey-800 `}
placeholderText="Write something worth clicking..."
textClassName="koenig-lexical-cta-text w-full whitespace-normal text-pretty bg-transparent font-serif text-xl text-grey-900 dark:text-grey-200"
>
Expand Down Expand Up @@ -334,11 +368,12 @@ export function CallToActionCard({

{isEditing && (
<SettingsPanel
defaultTab="design"
defaultTab="content"
tabs={tabs}
onMouseDown={e => e.preventDefault()}
>
{{
content: contentSettings,
design: designSettings,
visibility: visibilitySettings
}}
Expand Down Expand Up @@ -376,5 +411,7 @@ CallToActionCard.propTypes = {
visibilityOptions: PropTypes.array,
toggleVisibility: PropTypes.func,
imageUploadHandler: PropTypes.func,
imageDragHandler: PropTypes.object
imageDragHandler: PropTypes.object,
linkColor: PropTypes.oneOf(['text', 'accent']),
handleLinkColorChange: PropTypes.func
};
1 change: 1 addition & 0 deletions packages/koenig-lexical/src/nodes/CallToActionNode.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ export class CallToActionNode extends BaseCallToActionNode {
htmlEditorInitialState={this.__callToActionHtmlEditorInitialState}
imageUrl={this.imageUrl}
layout={this.layout}
linkColor={this.linkColor}
nodeKey={this.getKey()}
showButton={this.showButton}
sponsorLabelHtmlEditor={this.__sponsorLabelHtmlEditor}
Expand Down
10 changes: 10 additions & 0 deletions packages/koenig-lexical/src/nodes/CallToActionNodeComponent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export const CallToActionNodeComponent = ({
hasSponsorLabel,
imageUrl,
layout,
linkColor,
showButton,
textValue,
buttonColor,
Expand Down Expand Up @@ -89,6 +90,13 @@ export const CallToActionNodeComponent = ({
});
};

const handleLinkColorChange = (val) => {
editor.update(() => {
const node = $getNodeByKey(nodeKey);
node.linkColor = val;
});
};

const handleImageChange = async (files) => {
const imgPreviewUrl = URL.createObjectURL(files[0]);
try {
Expand Down Expand Up @@ -143,6 +151,7 @@ export const CallToActionNodeComponent = ({
color={backgroundColor}
handleButtonColor={handleButtonColorChange}
handleColorChange={handleBackgroundColorChange}
handleLinkColorChange={handleLinkColorChange}
hasSponsorLabel={hasSponsorLabel}
htmlEditor={htmlEditor}
htmlEditorInitialState={htmlEditorInitialState}
Expand All @@ -151,6 +160,7 @@ export const CallToActionNodeComponent = ({
imageUploader={imageUploader}
isEditing={isEditing}
layout={layout}
linkColor={linkColor}
setEditing={setEditing}
setFileInputRef={ref => fileInputRef.current = ref}
showButton={showButton}
Expand Down
8 changes: 0 additions & 8 deletions packages/koenig-lexical/src/styles/components/kg-prose.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -981,14 +981,6 @@
}
}

.koenig-lexical-cta-label a {
@apply !text-grey-900 dark:!text-grey-200 underline;
}

.koenig-lexical-cta-text a {
@apply !text-grey-900 dark:!text-grey-200;
}

/* stylelint-enable at-rule-disallowed-list */


Expand Down
Loading