Added image toggle to CTA card

Ref https://linear.app/ghost/issue/PLG-309/add-static-html-for-new-cta-card
TryGhost · Jan 20, 2025 · c97ac2b · c97ac2b
1 parent 1b8d30e
commit c97ac2b
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 24 deletions.
diff --git a/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx
@@ -10,6 +10,7 @@ export function CtaCard({
     buttonText,
     buttonUrl,
     hasBackground,
+    hasImage,
     hasSponsorLabel,
     htmlEditor,
     htmlEditorInitialState,
@@ -19,7 +20,8 @@ export function CtaCard({
     updateButtonUrl,
     updateShowButton,
     updateHasBackground,
-    updateHasSponsorLabel
+    updateHasSponsorLabel,
+    updateHasImage
 }) {
     return (
         <>
@@ -32,26 +34,33 @@ export function CtaCard({
                 )}
 
                 <div className={`flex flex-col gap-5 py-5 ${hasSponsorLabel || !hasBackground ? 'border-t border-grey-300 dark:border-grey-800' : ''} ${hasBackground ? 'mx-5' : 'border-b border-grey-300 dark:border-grey-800'}`}>
-                    {/* HTML content */}
-                    <KoenigNestedEditor
-                        autoFocus={true}
-                        hasSettingsPanel={true}
-                        initialEditor={htmlEditor}
-                        initialEditorState={htmlEditorInitialState}
-                        nodes='basic'
-                        placeholderClassName={`bg-transparent whitespace-normal font-serif text-xl !text-grey-500 !dark:text-grey-800 ` }
-                        placeholderText="Write something worth clicking..."
-                        textClassName="w-full bg-transparent whitespace-normal font-serif text-xl text-grey-900 dark:text-grey-200"
-                    >
-                        <ReplacementStringsPlugin />
-                    </KoenigNestedEditor>
-
-                    {/* Button */}
-                    { (showButton && (isEditing || (buttonText && buttonUrl))) &&
-                        <div>
-                            <Button color={'accent'} dataTestId="cta-button" placeholder="Add button text" value={buttonText}/>
+                    {hasImage && (
+                        <div className="flex">
+                            <img alt="Placeholder" className="h-auto w-full rounded-md" src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?q=80&w=3888&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" />
                         </div>
-                    }
+                    )}
+                    <div className="flex flex-col gap-5">
+                        {/* HTML content */}
+                        <KoenigNestedEditor
+                            autoFocus={true}
+                            hasSettingsPanel={true}
+                            initialEditor={htmlEditor}
+                            initialEditorState={htmlEditorInitialState}
+                            nodes='basic'
+                            placeholderClassName={`bg-transparent whitespace-normal font-serif text-xl !text-grey-500 !dark:text-grey-800 ` }
+                            placeholderText="Write something worth clicking..."
+                            textClassName="w-full bg-transparent whitespace-normal font-serif text-xl text-grey-900 dark:text-grey-200"
+                        >
+                            <ReplacementStringsPlugin />
+                        </KoenigNestedEditor>
+
+                        {/* Button */}
+                        { (showButton && (isEditing || (buttonText && buttonUrl))) &&
+                            <div>
+                                <Button color={'accent'} dataTestId="cta-button" placeholder="Add button text" value={buttonText}/>
+                            </div>
+                        }
+                    </div>
                 </div>
 
                 {/* Read-only overlay */}
@@ -60,17 +69,23 @@ export function CtaCard({
 
             {isEditing && (
                 <SettingsPanel>
+                    {/* Background setting */}
+                    <ToggleSetting
+                        isChecked={hasBackground}
+                        label='Background'
+                        onChange={updateHasBackground}
+                    />
                     {/* Sponsor label setting */}
                     <ToggleSetting
                         isChecked={hasSponsorLabel}
                         label='Sponsor label'
                         onChange={updateHasSponsorLabel}
                     />
-                    {/* Background setting */}
+                    {/* Image setting */}
                     <ToggleSetting
-                        isChecked={hasBackground}
-                        label='Background'
-                        onChange={updateHasBackground}
+                        isChecked={hasImage}
+                        label='Image'
+                        onChange={updateHasImage}
                     />
                     {/* Button settings */}
                     <ToggleSetting
@@ -106,6 +121,7 @@ CtaCard.propTypes = {
     buttonText: PropTypes.string,
     buttonUrl: PropTypes.string,
     hasBackground: PropTypes.bool,
+    hasImage: PropTypes.bool,
     hasSponsorLabel: PropTypes.bool,
     isEditing: PropTypes.bool,
     showButton: PropTypes.bool,
@@ -115,17 +131,20 @@ CtaCard.propTypes = {
     updateButtonUrl: PropTypes.func,
     updateHasBackground: PropTypes.func,
     updateHasSponsorLabel: PropTypes.func,
+    updateHasImage: PropTypes.func,
     updateShowButton: PropTypes.func
 };
 
 CtaCard.defaultProps = {
     buttonText: '',
     buttonUrl: '',
     hasBackground: false,
+    hasImage: false,
     hasSponsorLabel: false,
     isEditing: false,
     showButton: false,
     updateHasBackground: () => {},
     updateHasSponsorLabel: () => {},
+    updateHasImage: () => {},
     updateShowButton: () => {}
 };
diff --git a/packages/koenig-lexical/src/components/ui/cards/CtaCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/CtaCard.stories.jsx
@@ -68,6 +68,8 @@ Empty.args = {
     value: '',
     showButton: false,
     hasBackground: false,
+    hasImage: false,
+    hasSponsorLabel: false,
     buttonText: '',
     buttonUrl: '',
     suggestedUrls: []
@@ -78,6 +80,7 @@ Populated.args = {
     display: 'Editing',
     value: 'Want to get access to premium content?',
     showButton: true,
+    hasImage: true,
     hasSponsorLabel: true,
     hasBackground: false,
     buttonText: 'Upgrade',