diff --git a/ghost/admin/app/components/settings/signup-form-embed.js b/ghost/admin/app/components/settings/signup-form-embed.js index f1260ac0c9..2627953268 100644 --- a/ghost/admin/app/components/settings/signup-form-embed.js +++ b/ghost/admin/app/components/settings/signup-form-embed.js @@ -42,17 +42,21 @@ export default class SignupFormEmbed extends Component { const options = { site: siteUrl, - color: this.settings.accentColor + 'button-color': this.settings.accentColor }; for (const [i, label] of this.labels.entries()) { options[`label-${i + 1}`] = label.name; } + let style = 'height: 58px'; + if (this.style === 'all-in-one') { options.logo = this.settings.icon; options.title = this.settings.title; options.description = this.settings.description; + options['background-color'] = '#f9f9f9'; + style = 'height: 60vh; min-height: 400px;'; } let dataOptionsString = ''; @@ -60,7 +64,7 @@ export default class SignupFormEmbed extends Component { dataOptionsString += ` data-${key}="${escapeHtml(value)}"`; } - return ``; + return `
`; } @task diff --git a/ghost/signup-form/index.html b/ghost/signup-form/index.html index 3676e2cec3..43215eefe8 100644 --- a/ghost/signup-form/index.html +++ b/ghost/signup-form/index.html @@ -18,55 +18,64 @@

- +
+ +

Without logo

- + +
+ +

Minimal

- +
+ +

With invalid configuration

When you submit this one, it will throw an error.

- +
+ +
diff --git a/ghost/signup-form/src/App.tsx b/ghost/signup-form/src/App.tsx index 72ebb4161e..3b9118a1bf 100644 --- a/ghost/signup-form/src/App.tsx +++ b/ghost/signup-form/src/App.tsx @@ -1,6 +1,6 @@ import React, {ComponentProps} from 'react'; import pages, {Page, PageName} from './pages'; -import {AppContextProvider} from './AppContext'; +import {AppContextProvider, AppContextType} from './AppContext'; import {ContentBox} from './components/ContentBox'; import {Frame} from './components/Frame'; import {setupGhostApi} from './utils/api'; @@ -29,11 +29,12 @@ const App: React.FC = ({scriptTag}) => { } as Page); }; - const context = { + const context: AppContextType = { page, api, options, - setPage: _setPage + setPage: _setPage, + scriptTag }; const PageComponent = pages[page.name]; diff --git a/ghost/signup-form/src/AppContext.ts b/ghost/signup-form/src/AppContext.ts index 5434420e21..0746838e40 100644 --- a/ghost/signup-form/src/AppContext.ts +++ b/ghost/signup-form/src/AppContext.ts @@ -18,6 +18,7 @@ export type AppContextType = { setPage: (name: T, data: ComponentProps) => void, options: SignupFormOptions, api: GhostApi, + scriptTag: HTMLElement } const AppContext = React.createContext({} as any); diff --git a/ghost/signup-form/src/Preview.stories.tsx b/ghost/signup-form/src/Preview.stories.tsx index 1db914be4b..23e2685880 100644 --- a/ghost/signup-form/src/Preview.stories.tsx +++ b/ghost/signup-form/src/Preview.stories.tsx @@ -39,9 +39,10 @@ const Preview: React.FC -
+
diff --git a/ghost/signup-form/src/components/Frame.tsx b/ghost/signup-form/src/components/Frame.tsx index 0f5984009d..56d55a8676 100644 --- a/ghost/signup-form/src/components/Frame.tsx +++ b/ghost/signup-form/src/components/Frame.tsx @@ -1,6 +1,7 @@ import IFrame from './IFrame'; import React, {useCallback, useState} from 'react'; import styles from '../styles/iframe.css?inline'; +import {useAppContext} from '../AppContext'; type FrameProps = { children: React.ReactNode @@ -15,9 +16,9 @@ export const Frame: React.FC = ({children}) => { height: '0px' // = default height }; return ( - + {children} - + ); }; @@ -27,28 +28,46 @@ type ResizableFrameProps = FrameProps & { }; /** - * This TailwindFrame has the same height as it contents and mimics a shadow DOM component + * This TailwindFrame has the same height as its container */ -const ResizableFrame: React.FC = ({children, style, title}) => { +const FullHeightFrame: React.FC = ({children, style, title}) => { + const {scriptTag} = useAppContext(); const [iframeStyle, setIframeStyle] = useState(style); - const onResize = useCallback((iframeRoot: HTMLElement) => { + + const onResize = useCallback((element: HTMLElement) => { setIframeStyle((current) => { return { ...current, - height: `${iframeRoot.scrollHeight}px` + height: `${element.scrollHeight}px`, + width: `${element.scrollWidth}px` }; }); }, []); + React.useEffect(() => { + const element = scriptTag.parentElement; + if (!element) { + return; + } + const observer = new ResizeObserver(_ => onResize(element)); + observer.observe(element); + + return () => { + observer.unobserve(element); + }; + }, [scriptTag, onResize]); + return ( - - {children} - +
+ + {children} + +
); }; type TailwindFrameProps = ResizableFrameProps & { - onResize: (el: HTMLElement) => void + onResize?: (el: HTMLElement) => void }; /** diff --git a/ghost/signup-form/src/components/IFrame.tsx b/ghost/signup-form/src/components/IFrame.tsx index 7e6ede6458..d22e44412a 100644 --- a/ghost/signup-form/src/components/IFrame.tsx +++ b/ghost/signup-form/src/components/IFrame.tsx @@ -10,7 +10,7 @@ export default class IFrame extends Component { iframeHead: any; iframeRoot: any; - constructor(props: {onResize: (el: HTMLElement) => void, children: any}) { + constructor(props: {onResize?: (el: HTMLElement) => void, children: any}) { super(props); this.setNode = this.setNode.bind(this); this.node = null; diff --git a/ghost/signup-form/src/components/pages/FormView.tsx b/ghost/signup-form/src/components/pages/FormView.tsx index 53bf3925e9..521c329eb0 100644 --- a/ghost/signup-form/src/components/pages/FormView.tsx +++ b/ghost/signup-form/src/components/pages/FormView.tsx @@ -16,7 +16,7 @@ export const FormView: React.FC diff --git a/ghost/signup-form/src/components/pages/SuccessView.tsx b/ghost/signup-form/src/components/pages/SuccessView.tsx index 5642581f9c..233df5a827 100644 --- a/ghost/signup-form/src/components/pages/SuccessView.tsx +++ b/ghost/signup-form/src/components/pages/SuccessView.tsx @@ -15,7 +15,7 @@ export const SuccessView: React.FC<{ } return (