From a68ac4b6883f619800cbb46a02fa8fe7e7f8ae56 Mon Sep 17 00:00:00 2001 From: Simon Backx Date: Thu, 8 Jun 2023 13:23:38 +0200 Subject: [PATCH] Renamed data-logo to data-icon in signup embed attributes fixes https://github.com/TryGhost/Team/issues/3401 --- .../modals/settings/signup-form-embed.js | 4 ++-- ghost/signup-form/index.html | 10 +++++----- ghost/signup-form/preview.html | 14 +++++++------- ghost/signup-form/src/AppContext.ts | 2 +- .../signup-form/src/components/pages/FormPage.tsx | 2 +- .../src/components/pages/FormView.stories.ts | 4 ++-- .../signup-form/src/components/pages/FormView.tsx | 6 +++--- .../src/components/pages/SuccessPage.tsx | 2 +- .../src/components/pages/SuccessView.tsx | 6 +++--- ghost/signup-form/src/utils/options.tsx | 2 +- ghost/signup-form/test/utils/e2e.ts | 2 +- 11 files changed, 27 insertions(+), 27 deletions(-) diff --git a/ghost/admin/app/components/modals/settings/signup-form-embed.js b/ghost/admin/app/components/modals/settings/signup-form-embed.js index 3123cfc3f6..a86ed0ce45 100644 --- a/ghost/admin/app/components/modals/settings/signup-form-embed.js +++ b/ghost/admin/app/components/modals/settings/signup-form-embed.js @@ -94,7 +94,7 @@ export default class SignupFormEmbedModal extends Component { if (this.style === 'all-in-one') { // We serve twice the size of the icon to support high resolution screens // (note that you'll need to change the resolution in the backend config as well, as not all resolutions are supported) - options.logo = this.settings.icon.replace(/\/content\/images\//, '/content/images/size/w192h192/'); + options.icon = this.settings.icon.replace(/\/content\/images\//, '/content/images/size/w192h192/'); options.title = this.settings.title; options.description = this.settings.description; @@ -120,7 +120,7 @@ export default class SignupFormEmbedModal extends Component { 'button-text-color', 'title', 'description', - 'logo', + 'icon', 'site', 'locale' ]; diff --git a/ghost/signup-form/index.html b/ghost/signup-form/index.html index 1ad24aecef..5a09fce4f4 100644 --- a/ghost/signup-form/index.html +++ b/ghost/signup-form/index.html @@ -24,30 +24,30 @@ src="/src/index.tsx" data-title="My site name" data-description="An independent publication about embeddable signup forms." - data-logo="https://static.ghost.org/v4.0.0/images/ghost-orb-1.png" + data-icon="https://static.ghost.org/v4.0.0/images/ghost-orb-1.png" data-background-color="#F1F3F4" data-button-color="#ff0095" data-site="%VITE_SITE_URL%" data-label-1="Signup form" - data-label-2="With logo" + data-label-2="With icon" async >
-

Without logo

+

Without icon

diff --git a/ghost/signup-form/preview.html b/ghost/signup-form/preview.html index 4b7083aa95..cb2b7bc718 100644 --- a/ghost/signup-form/preview.html +++ b/ghost/signup-form/preview.html @@ -23,28 +23,28 @@ src="http://localhost:6174/signup-form.min.js" data-title="My site name" data-description="An independent publication about embeddable signup forms." - data-logo="https://static.ghost.org/v4.0.0/images/ghost-orb-1.png" + data-icon="https://static.ghost.org/v4.0.0/images/ghost-orb-1.png" data-background-color="#F1F3F4" data-button-color="#ff0095" data-site="%VITE_SITE_URL%" data-label-1="Signup form" - data-label-2="With logo" + data-label-2="With icon" async >
-

Without logo

+

Without icon

@@ -84,12 +84,12 @@ src="http://localhost:6174/signup-form.min.js" data-title="My site name" data-description="An independent publication about embeddable signup forms." - data-logo="https://static.ghost.org/v4.0.0/images/ghost-orb-1.png" + data-icon="https://static.ghost.org/v4.0.0/images/ghost-orb-1.png" data-background-color="#F1F3F4" data-button-color="#ff0095" data-site="%VITE_SITE_URL%" data-label-1="Signup form" - data-label-2="With logo" + data-label-2="With icon" data-locale="nl-BE" async > diff --git a/ghost/signup-form/src/AppContext.ts b/ghost/signup-form/src/AppContext.ts index 4bc1c8bbf0..4d466a3ab6 100644 --- a/ghost/signup-form/src/AppContext.ts +++ b/ghost/signup-form/src/AppContext.ts @@ -6,7 +6,7 @@ import {GhostApi} from './utils/api'; export type SignupFormOptions = { title?: string, description?: string, - logo?: string, + icon?: string, backgroundColor?: string, textColor?: string, buttonColor?: string, diff --git a/ghost/signup-form/src/components/pages/FormPage.tsx b/ghost/signup-form/src/components/pages/FormPage.tsx index 8e1c9bdaab..124bb2b763 100644 --- a/ghost/signup-form/src/components/pages/FormPage.tsx +++ b/ghost/signup-form/src/components/pages/FormPage.tsx @@ -35,9 +35,9 @@ export const FormPage: React.FC = () => { buttonTextColor={options.buttonTextColor} description={options.description} error={error} + icon={options.icon} isMinimal={isMinimal(options)} loading={loading} - logo={options.logo} textColor={options.textColor} title={options.title} onSubmit={submit} diff --git a/ghost/signup-form/src/components/pages/FormView.stories.ts b/ghost/signup-form/src/components/pages/FormView.stories.ts index 131901844f..c7a69b8ec5 100644 --- a/ghost/signup-form/src/components/pages/FormView.stories.ts +++ b/ghost/signup-form/src/components/pages/FormView.stories.ts @@ -15,7 +15,7 @@ export const Full: Story = { args: { title: 'Signup Forms Weekly', description: 'An independent publication about embeddable signup forms.', - logo: 'https://user-images.githubusercontent.com/65487235/157884383-1b75feb1-45d8-4430-b636-3f7e06577347.png', + icon: 'https://user-images.githubusercontent.com/65487235/157884383-1b75feb1-45d8-4430-b636-3f7e06577347.png', backgroundColor: '#eeeeee', textColor: '#000000', buttonColor: '#ff0095', @@ -31,7 +31,7 @@ export const FullDark: Story = { args: { title: 'Signup Forms Weekly', description: 'An independent publication about embeddable signup forms.', - logo: 'https://user-images.githubusercontent.com/65487235/157884383-1b75feb1-45d8-4430-b636-3f7e06577347.png', + icon: 'https://user-images.githubusercontent.com/65487235/157884383-1b75feb1-45d8-4430-b636-3f7e06577347.png', backgroundColor: '#333333', textColor: '#ffffff', buttonColor: '#ff0095', diff --git a/ghost/signup-form/src/components/pages/FormView.tsx b/ghost/signup-form/src/components/pages/FormView.tsx index 9c6c01ad02..4d3547a218 100644 --- a/ghost/signup-form/src/components/pages/FormView.tsx +++ b/ghost/signup-form/src/components/pages/FormView.tsx @@ -6,10 +6,10 @@ export const FormView: React.FC = ({isMinimal, title, description, logo, backgroundColor, textColor, error, ...formProps}) => { +}> = ({isMinimal, title, description, icon, backgroundColor, textColor, error, ...formProps}) => { if (isMinimal) { return ( <> @@ -25,7 +25,7 @@ export const FormView: React.FC - {logo && {title}} + {icon && {title}} {title &&

{title}

} {description &&

{description}

}
diff --git a/ghost/signup-form/src/components/pages/SuccessPage.tsx b/ghost/signup-form/src/components/pages/SuccessPage.tsx index 6243a77398..85a94be0fc 100644 --- a/ghost/signup-form/src/components/pages/SuccessPage.tsx +++ b/ghost/signup-form/src/components/pages/SuccessPage.tsx @@ -13,8 +13,8 @@ export const SuccessPage: React.FC = ({email}) => { return ; }; diff --git a/ghost/signup-form/src/components/pages/SuccessView.tsx b/ghost/signup-form/src/components/pages/SuccessView.tsx index 296b4392fa..a9821628cf 100644 --- a/ghost/signup-form/src/components/pages/SuccessView.tsx +++ b/ghost/signup-form/src/components/pages/SuccessView.tsx @@ -5,10 +5,10 @@ export const SuccessView: React.FC<{ email: string; isMinimal: boolean; title?: string; - logo?: string; + icon?: string; backgroundColor?: string; textColor?: string; -}> = ({isMinimal, title, logo, backgroundColor, textColor}) => { +}> = ({isMinimal, title, icon, backgroundColor, textColor}) => { const {t} = useAppContext(); if (isMinimal) { return ( @@ -23,7 +23,7 @@ export const SuccessView: React.FC<{ data-testid="success-page" style={{backgroundColor, color: textColor}} > - {logo && {title}} + {icon && {title}}

{t(`Now check your email!`)}

{t(`To complete signup, click the confirmation link in your inbox. If it doesn't arrive within 3 minutes, check your spam folder!`)}

diff --git a/ghost/signup-form/src/utils/options.tsx b/ghost/signup-form/src/utils/options.tsx index 4c98af95be..bb6c507082 100644 --- a/ghost/signup-form/src/utils/options.tsx +++ b/ghost/signup-form/src/utils/options.tsx @@ -12,7 +12,7 @@ export function useOptions(scriptTag: HTMLElement) { return { title: scriptTag.dataset.title || undefined, description: scriptTag.dataset.description || undefined, - logo: scriptTag.dataset.logo || undefined, + icon: scriptTag.dataset.icon || undefined, backgroundColor: scriptTag.dataset.backgroundColor || undefined, textColor: scriptTag.dataset.textColor || undefined, buttonColor: scriptTag.dataset.buttonColor || undefined, diff --git a/ghost/signup-form/test/utils/e2e.ts b/ghost/signup-form/test/utils/e2e.ts index ceccdff05e..671eaa8300 100644 --- a/ghost/signup-form/test/utils/e2e.ts +++ b/ghost/signup-form/test/utils/e2e.ts @@ -7,7 +7,7 @@ type LastApiRequest = { body: null | any }; -export async function initialize({page, path, ...options}: {page: Page, path?: string; title?: string, description?: string, logo?: string, backgroundColor?: string, buttonColor?: string, site?: string, 'label-1'?: string, 'label-2'?: string}) { +export async function initialize({page, path, ...options}: {page: Page, path?: string; title?: string, description?: string, icon?: string, backgroundColor?: string, buttonColor?: string, site?: string, 'label-1'?: string, 'label-2'?: string}) { const sitePath = `${MOCKED_SITE_URL}${path ?? ''}`; await page.route(sitePath, async (route) => { await route.fulfill({