Added new CTA card component

Ref https://linear.app/ghost/issue/PLG-309/add-static-html-for-new-cta-card
- This is a static card that will form the basis of the new CTA card

Author: sanne-san

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

@@ -0,0 +1,67 @@
+import KoenigNestedEditor from '../../KoenigNestedEditor';
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReplacementStringsPlugin from '../../../plugins/ReplacementStringsPlugin';
+import {Button} from '../Button';
+import {ReadOnlyOverlay} from '../ReadOnlyOverlay';
+
+export function CtaCard({
+    buttonText,
+    buttonUrl,
+    htmlEditor,
+    htmlEditorInitialState,
+    isEditing,
+    showButton
+}) {
+    return (
+        <>
+            <div className="w-full">
+                {/* Sponsor label */}
+                <div className="not-kg-prose border-b border-grey-300 py-3 dark:border-grey-900">
+                    <p className="font-sans text-2xs font-semibold uppercase leading-8 tracking-normal text-grey dark:text-grey-800">Sponsored</p>
+                </div>
+
+                <div className="flex flex-col gap-5 border-b border-grey-300 py-5 dark:border-grey-900">
+                    {/* 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>
+
+                {/* Read-only overlay */}
+                {!isEditing && <ReadOnlyOverlay />}
+            </div>
+        </>
+    );
+}
+
+CtaCard.propTypes = {
+    buttonText: PropTypes.string,
+    buttonUrl: PropTypes.string,
+    isEditing: PropTypes.bool,
+    showButton: PropTypes.bool,
+    htmlEditor: PropTypes.object,
+    htmlEditorInitialState: PropTypes.object
+};
+
+CtaCard.defaultProps = {
+    buttonText: '',
+    buttonUrl: '',
+    isEditing: false
+};

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

@@ -0,0 +1,84 @@
+import EmailIndicatorIcon from '../../../assets/icons/kg-indicator-email.svg?react';
+import React from 'react';
+import populateEditor from '../../../utils/storybook/populate-storybook-editor.js';
+import {BASIC_NODES} from '../../../index.js';
+import {CardWrapper} from './../CardWrapper';
+import {CtaCard} from './CtaCard';
+import {createEditor} from 'lexical';
+
+const displayOptions = {
+    Default: {isSelected: false, isEditing: false},
+    Selected: {isSelected: true, isEditing: false},
+    Editing: {isSelected: true, isEditing: true}
+};
+
+const story = {
+    title: 'Primary cards/CTA card',
+    component: CtaCard,
+    subcomponent: {CardWrapper},
+    argTypes: {
+        display: {
+            options: Object.keys(displayOptions),
+            mapping: displayOptions,
+            control: {
+                type: 'radio',
+                labels: {
+                    Default: 'Default',
+                    Selected: 'Selected',
+                    Editing: 'Editing'
+                },
+                defaultValue: displayOptions.Default
+            }
+        }
+    },
+    parameters: {
+        status: {
+            type: 'uiReady'
+        }
+    }
+};
+export default story;
+
+const Template = ({display, value, ...args}) => {
+    const htmlEditor = createEditor({nodes: BASIC_NODES});
+    populateEditor({editor: htmlEditor, initialHtml: `${value}`});
+    return (
+        <div>
+            <div className="kg-prose">
+                <div className="mx-auto my-8 min-w-[initial] max-w-[740px]">
+                    <CardWrapper IndicatorIcon={EmailIndicatorIcon} wrapperStyle='wide' {...display} {...args}>
+                        <CtaCard {...display} {...args} htmlEditor={htmlEditor} />
+                    </CardWrapper>
+                </div>
+            </div>
+            <div className="kg-prose dark bg-black px-4 py-8">
+                <div className="mx-auto my-8 min-w-[initial] max-w-[740px]">
+                    <CardWrapper IndicatorIcon={EmailIndicatorIcon} wrapperStyle='wide' {...display} {...args}>
+                        <CtaCard {...display} {...args} htmlEditor={htmlEditor} />
+                    </CardWrapper>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export const Empty = Template.bind({});
+Empty.args = {
+    display: 'Editing',
+    value: '',
+    showButton: false,
+    buttonText: '',
+    buttonUrl: '',
+    suggestedUrls: []
+};
+
+export const Populated = Template.bind({});
+Populated.args = {
+    display: 'Editing',
+    value: 'Want to get access to premium content?',
+    showButton: true,
+    buttonText: 'Upgrade',
+    buttonUrl: 'https://ghost.org/',
+    suggestedUrls: [{label: 'Homepage', value: 'https://localhost.org/'}]
+};
+