Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Renamed data-logo to data-icon in signup embed attributes

Browse source 
fixes https://github.com/TryGhost/Team/issues/3401
This commit is contained in:
Simon Backx 2023-06-08 13:23:38 +02:00
parent a1e632abe0
commit a68ac4b688
11 changed files with 27 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ghost/admin/app/components/modals/settings/signup-form-embed.js
View file

@ -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'
];

10
ghost/signup-form/index.html
View file

@ -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
></script>
</div>
<hr>
<h1>Without logo</h1>
<h1>Without icon</h1>
<div style="height: 40vmin; min-height: 360px;">
<script
type="module"
src="/src/index.tsx?withoutlogo"
data-title="Site without logo"
data-title="Site without icon"
data-description="An independent publication about embeddable signup forms."
data-background-color="#F1F3F4"
data-button-color="#ff0095"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Without logo"
data-label-2="Without icon"
async
></script>
</div>

14
ghost/signup-form/preview.html
View file

@ -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
></script>
</div>
<hr>
<h1>Without logo</h1>
<h1>Without icon</h1>
<div style="height: 40vmin; min-height: 360px;">
<script
src="http://localhost:6174/signup-form.min.js"
data-title="Site without logo"
data-title="Site without icon"
data-description="An independent publication about embeddable signup forms."
data-background-color="#F1F3F4"
data-button-color="#ff0095"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Without logo"
data-label-2="Without icon"
async
></script>
</div>
@ -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
></script>

2
ghost/signup-form/src/AppContext.ts
View file

@ -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,

2
ghost/signup-form/src/components/pages/FormPage.tsx
View file

@ -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}

4
ghost/signup-form/src/components/pages/FormView.stories.ts
View file

@ -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',

6
ghost/signup-form/src/components/pages/FormView.tsx
View file

@ -6,10 +6,10 @@ export const FormView: React.FC<FormProps & {
isMinimal: boolean
title?: string
description?: string
logo?: string
icon?: string
backgroundColor?: string
textColor?: string
}> = ({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<FormProps & {
data-testid="wrapper"
style={{backgroundColor, color: textColor}}
>
{logo && <img alt={title} className='mb-2 h-[64px] w-auto' src={logo}/>}
{icon && <img alt={title} className='mb-2 h-[64px] w-auto' src={icon}/>}
{title && <h1 className="text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl">{title}</h1>}
{description && <p className='mb-4 text-center font-medium md:mb-5'>{description}</p>}
<div className='relative w-full max-w-[440px]'>

2
ghost/signup-form/src/components/pages/SuccessPage.tsx
View file

@ -13,8 +13,8 @@ export const SuccessPage: React.FC<SuccessPageProps> = ({email}) => {
return <SuccessView
backgroundColor={options.backgroundColor}
email={email}
icon={options.icon}
isMinimal={isMinimal(options)}
logo={options.logo}
textColor={options.textColor}
title={options.title} />;
};

6
ghost/signup-form/src/components/pages/SuccessView.tsx
View file

@ -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 && <img alt={title} className='mb-2 h-[64px] w-auto' src={logo}/>}
{icon && <img alt={title} className='mb-2 h-[64px] w-auto' src={icon}/>}
<h1 className='text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl'>{t(`Now check your email!`)}</h1>
<p className='mb-4 max-w-[600px] text-center sm:mb-[4.1rem]'>{t(`To complete signup, click the confirmation link in your inbox. If it doesn't arrive within 3 minutes, check your spam folder!`)}</p>
</div>

2
ghost/signup-form/src/utils/options.tsx
View file

@ -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,

2
ghost/signup-form/test/utils/e2e.ts
View file

@ -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({