Added visibility settings to CTA card

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

Hide file tree

Showing 2 changed files with 96 additions and 55 deletions.
diff --git a/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx b/packages/koenig-lexical/src/components/ui/cards/CtaCard.jsx
@@ -78,6 +78,11 @@ export function CtaCard({
     updateLayout,
     handleColorChange
 }) {
+    const tabs = [
+        {id: 'design', label: 'Design'},
+        {id: 'visibility', label: 'Visibility'}
+    ];
+
     const layoutOptions = [
         {
             label: 'Minimal',
@@ -93,9 +98,88 @@ export function CtaCard({
         }
     ];
 
+    const designSettings = (
+        <>
+            {/* Layout settings */}
+            <ButtonGroupSetting
+                buttons={layoutOptions}
+                label='Layout'
+                selectedName={layout}
+                onClick={updateLayout}
+            />
+            {/* Color picker */}
+            <ColorOptionSetting
+                buttons={calloutColorPicker}
+                dataTestId='callout-color-picker'
+                label='Background'
+                selectedName={color}
+                onClick={handleColorChange}
+            />
+            {/* Sponsor label setting */}
+            <ToggleSetting
+                isChecked={hasSponsorLabel}
+                label='Sponsor label'
+                onChange={updateHasSponsorLabel}
+            />
+            {/* Image setting */}
+            <ToggleSetting
+                isChecked={hasImage}
+                label='Image'
+                onChange={updateHasImage}
+            />
+            {/* Button settings */}
+            <ToggleSetting
+                dataTestId="button-settings"
+                isChecked={showButton}
+                label='Button'
+                onChange={updateShowButton}
+            />
+            {showButton && (
+                <>
+                    <InputSetting
+                        dataTestId="button-text"
+                        label='Button text'
+                        placeholder='Add button text'
+                        value={buttonText}
+                        onChange={updateButtonText}
+                    />
+                    <InputUrlSetting
+                        dataTestId="button-url"
+                        label='Button URL'
+                        value={buttonUrl}
+                        onChange={updateButtonUrl}
+                    />
+                </>
+            )}
+        </>
+    );
+
+    const visibilitySettings = (
+        <>
+            <p className="text-sm font-bold tracking-normal text-grey-900 dark:text-grey-300">Web</p>
+            <ToggleSetting
+                label="Anonymous visitors"
+            />
+            <ToggleSetting
+                label="Free members"
+            />
+            <ToggleSetting
+                label="Paid members"
+            />
+            <hr className="not-kg-prose my-2 block border-t-grey-300 dark:border-t-grey-900" />
+            <p className="text-sm font-bold tracking-normal text-grey-900 dark:text-grey-300">Email</p>
+            <ToggleSetting
+                label="Free members"
+            />
+            <ToggleSetting
+                label="Paid members"
+            />
+        </>
+    );
+
     return (
         <>
-            <div className={`w-full rounded-lg border ${CALLOUT_COLORS[color]} ${(isEditing || isSelected) && color === 'none' ? 'pb-3' : ''}`}>
+            <div className={`w-full rounded-lg border ${CALLOUT_COLORS[color]} ${(isEditing || isSelected) && (color === 'none' && !hasSponsorLabel) ? 'py-3' : color === 'none' ? 'pb-3' : ''}`}>
                 {/* Sponsor label */}
                 {hasSponsorLabel && (
                     <div className={`not-kg-prose py-3 ${color === 'none' ? '' : 'mx-5'}`}>
@@ -145,58 +229,15 @@ export function CtaCard({
             </div>
 
             {isEditing && (
-                <SettingsPanel>
-                    {/* Layout settings */}
-                    <ButtonGroupSetting
-                        buttons={layoutOptions}
-                        label='Layout'
-                        selectedName={layout}
-                        onClick={updateLayout}
-                    />
-                    {/* Color picker */}
-                    <ColorOptionSetting
-                        buttons={calloutColorPicker}
-                        dataTestId='callout-color-picker'
-                        label='Background'
-                        selectedName={color}
-                        onClick={handleColorChange}
-                    />
-                    {/* Sponsor label setting */}
-                    <ToggleSetting
-                        isChecked={hasSponsorLabel}
-                        label='Sponsor label'
-                        onChange={updateHasSponsorLabel}
-                    />
-                    {/* Image setting */}
-                    <ToggleSetting
-                        isChecked={hasImage}
-                        label='Image'
-                        onChange={updateHasImage}
-                    />
-                    {/* Button settings */}
-                    <ToggleSetting
-                        dataTestId="button-settings"
-                        isChecked={showButton}
-                        label='Button'
-                        onChange={updateShowButton}
-                    />
-                    {showButton && (
-                        <>
-                            <InputSetting
-                                dataTestId="button-text"
-                                label='Button text'
-                                placeholder='Add button text'
-                                value={buttonText}
-                                onChange={updateButtonText}
-                            />
-                            <InputUrlSetting
-                                dataTestId="button-url"
-                                label='Button URL'
-                                value={buttonUrl}
-                                onChange={updateButtonUrl}
-                            />
-                        </>
-                    )}
+                <SettingsPanel
+                    defaultTab="design"
+                    tabs={tabs}
+                    onMouseDown={e => e.preventDefault()}
+                >
+                    {{
+                        design: designSettings,
+                        visibility: visibilitySettings
+                    }}
                 </SettingsPanel>
             )}
         </>

diff --git a/packages/koenig-lexical/src/components/ui/cards/CtaCard.stories.jsx b/packages/koenig-lexical/src/components/ui/cards/CtaCard.stories.jsx
@@ -105,13 +105,13 @@ Empty.args = {
 export const Populated = Template.bind({});
 Populated.args = {
     display: 'Editing',
-    value: 'Want to get access to premium content?',
+    value: 'Introducing the Air Stride 90X – where bold design meets unmatched performance. Engineered for ultimate support and breathability, it’s the perfect companion for your active lifestyle. Step up your game, in style.',
     showButton: true,
     hasImage: true,
     hasSponsorLabel: true,
     color: 'green',
     layout: 'immersive',
-    buttonText: 'Upgrade',
+    buttonText: 'Grab 20% discount',
     buttonUrl: 'https://ghost.org/',
     suggestedUrls: [{label: 'Homepage', value: 'https://localhost.org/'}]
 };