TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-27 18:52:14 +03:00
Code Issues Projects Releases Wiki Activity

Update signup form text colours to be passed via attributes

Browse Source
This commit is contained in:
Jono Mingard 2023-06-02 10:59:00 +12:00
parent aa78346dd8
commit 024045b9e3
13 changed files with 41 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
ghost/admin/app/components/settings/signup-form-embed.js
View File

@ -3,6 +3,7 @@ import {action} from '@ember/object';
import {inject} from 'ghost-admin/decorators/inject';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency';
import {textColorForBackgroundColor} from '@tryghost/color-utils';
import {tracked} from '@glimmer/tracking';
function escapeHtml(unsafe) {
@ -42,7 +43,8 @@ export default class SignupFormEmbed extends Component {
const options = {
site: siteUrl,
'button-color': this.settings.accentColor
'button-color': this.settings.accentColor,
'button-text-color': textColorForBackgroundColor(this.settings.accentColor).hex()
};
for (const [i, label] of this.labels.entries()) {
@ -55,7 +57,11 @@ export default class SignupFormEmbed extends Component {
options.logo = this.settings.icon;
options.title = this.settings.title;
options.description = this.settings.description;
options['background-color'] = '#f9f9f9';
const backgroundColor = '#f9f9f9';
options['background-color'] = backgroundColor;
options['text-color'] = textColorForBackgroundColor(backgroundColor).hex();
style = 'height: 40vmin; min-height: 360px;';
}

1
ghost/signup-form/package.json
View File

@ -35,7 +35,6 @@
"prepublishOnly": "yarn build"
},
"dependencies": {
"@tryghost/color-utils": "^0.1.26",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},

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

@ -8,7 +8,9 @@ export type SignupFormOptions = {
description?: string,
logo?: string,
backgroundColor?: string,
textColor?: string,
buttonColor?: string,
buttonTextColor?: string,
site: string,
labels: string[],
};

4
ghost/signup-form/src/Preview.stories.tsx
View File

@ -77,7 +77,9 @@ export const Full: Story = {
description: 'An independent publication about embeddable signup forms.',
logo: 'https://user-images.githubusercontent.com/65487235/157884383-1b75feb1-45d8-4430-b636-3f7e06577347.png',
backgroundColor: '#eeeeee',
textColor: '#000000',
buttonColor: '#ff0095',
buttonTextColor: '#ffffff',
site: 'localhost',
labels: ['label-1', 'label-2'],
simulateApiError: false,
@ -93,6 +95,7 @@ export const Minimal: Story = {
site: 'localhost',
labels: ['label-1', 'label-2'],
buttonColor: '#ff0095',
buttonTextColor: '#ffffff',
simulateApiError: false,
pageBackgroundColor: '#ffffff',
pageTextColor: '#000000'
@ -106,6 +109,7 @@ export const MinimalOnDark: Story = {
site: 'localhost',
labels: ['label-1', 'label-2'],
buttonColor: '#ff0095',
buttonTextColor: '#ffffff',
simulateApiError: false,
pageBackgroundColor: '#122334',
pageTextColor: '#f7f7f7'

4
ghost/signup-form/src/color-utils.d.ts vendored
View File

@ -1,4 +0,0 @@
// TODO: Add types in the package itself
declare module '@tryghost/color-utils' {
export function textColorForBackgroundColor(backgroundColor: string): string;
}

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

@ -32,11 +32,13 @@ export const FormPage: React.FC = () => {
return <FormView
backgroundColor={options.backgroundColor}
buttonColor={options.buttonColor}
buttonTextColor={options.buttonTextColor}
description={options.description}
error={error}
isMinimal={isMinimal(options)}
loading={loading}
logo={options.logo}
textColor={options.textColor}
title={options.title}
onSubmit={submit}
/>;

5
ghost/signup-form/src/components/pages/FormView.stories.ts
View File

@ -17,7 +17,9 @@ export const Full: Story = {
description: 'An independent publication about embeddable signup forms.',
logo: 'https://user-images.githubusercontent.com/65487235/157884383-1b75feb1-45d8-4430-b636-3f7e06577347.png',
backgroundColor: '#eeeeee',
textColor: '#000000',
buttonColor: '#ff0095',
buttonTextColor: '#ffffff',
loading: false,
error: '',
isMinimal: false,
@ -31,7 +33,9 @@ export const FullDark: Story = {
description: 'An independent publication about embeddable signup forms.',
logo: 'https://user-images.githubusercontent.com/65487235/157884383-1b75feb1-45d8-4430-b636-3f7e06577347.png',
backgroundColor: '#333333',
textColor: '#ffffff',
buttonColor: '#ff0095',
buttonTextColor: '#ffffff',
loading: false,
error: '',
isMinimal: false,
@ -42,6 +46,7 @@ export const FullDark: Story = {
export const Minimal: Story = {
args: {
buttonColor: '#ff0095',
buttonTextColor: '#ffffff',
loading: false,
error: '',
isMinimal: true,

11
ghost/signup-form/src/components/pages/FormView.tsx
View File

@ -1,5 +1,4 @@
import React, {FormEventHandler} from 'react';
import {textColorForBackgroundColor} from '@tryghost/color-utils';
export const FormView: React.FC<FormProps & {
isMinimal: boolean
@ -7,7 +6,8 @@ export const FormView: React.FC<FormProps & {
description?: string
logo?: string
backgroundColor?: string
}> = ({isMinimal, title, description, logo, backgroundColor, ...formProps}) => {
textColor?: string
}> = ({isMinimal, title, description, logo, backgroundColor, textColor, ...formProps}) => {
if (isMinimal) {
return (
<Form {...formProps} />
@ -18,7 +18,7 @@ export const FormView: React.FC<FormProps & {
<div
className='flex h-[100vh] flex-col items-center justify-center px-4 sm:px-6 md:px-10'
data-testid="wrapper"
style={{backgroundColor, color: backgroundColor && textColorForBackgroundColor(backgroundColor)}}
style={{backgroundColor, color: textColor}}
>
{logo && <img alt={title} className='mb-2 h-[64px] w-auto' src={logo}/>}
{title && <h1 className="text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl">{title}</h1>}
@ -31,12 +31,13 @@ export const FormView: React.FC<FormProps & {
type FormProps = {
buttonColor?: string
buttonTextColor?: string
loading: boolean
error?: string
onSubmit: (values: { email: string }) => void
}
const Form: React.FC<FormProps> = ({loading, error, buttonColor, onSubmit}) => {
const Form: React.FC<FormProps> = ({loading, error, buttonColor, buttonTextColor, onSubmit}) => {
const [email, setEmail] = React.useState('');
const borderStyle = error ? '!border-red-500' : 'border-grey-300';
@ -62,7 +63,7 @@ const Form: React.FC<FormProps> = ({loading, error, buttonColor, onSubmit}) => {
className='absolute inset-y-0 right-[.2rem] my-auto h-7 rounded-[.3rem] px-2 text-white sm:right-[.3rem] sm:h-[3rem] sm:px-3'
data-testid="button"
disabled={loading}
style={{backgroundColor: buttonColor, color: buttonColor && textColorForBackgroundColor(buttonColor)}}
style={{backgroundColor: buttonColor, color: buttonTextColor}}
type='submit'
>Subscribe</button>
{error && <p className='absolute -bottom-4 left-0 pt-0.5 text-red-500' data-testid="error-message">{error}</p>}

7
ghost/signup-form/src/components/pages/SuccessPage.tsx
View File

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

6
ghost/signup-form/src/components/pages/SuccessView.stories.ts
View File

@ -15,7 +15,8 @@ export const Full: Story = {
args: {
email: 'test@example.com',
isMinimal: false,
backgroundColor: '#eeeeee'
backgroundColor: '#eeeeee',
textColor: '#000000'
}
};
@ -23,7 +24,8 @@ export const FullDark: Story = {
args: {
email: 'test@example.com',
isMinimal: false,
backgroundColor: '#333333'
backgroundColor: '#333333',
textColor: '#ffffff'
}
};

8
ghost/signup-form/src/components/pages/SuccessView.tsx
View File

@ -1,5 +1,4 @@
import React from 'react';
import {textColorForBackgroundColor} from '@tryghost/color-utils';
export const SuccessView: React.FC<{
email: string;
@ -7,7 +6,8 @@ export const SuccessView: React.FC<{
title?: string;
logo?: string;
backgroundColor?: string;
}> = ({isMinimal, title, logo, backgroundColor}) => {
textColor?: string;
}> = ({isMinimal, title, logo, backgroundColor, textColor}) => {
if (isMinimal) {
return (
<div>
@ -19,8 +19,8 @@ export const SuccessView: React.FC<{
<div
className='flex h-[100vh] flex-col items-center justify-center bg-grey-200 px-4 sm:px-6 md:px-10'
data-testid="success-page"
style={{backgroundColor, color: backgroundColor && textColorForBackgroundColor(backgroundColor)}}
>
style={{backgroundColor, color: textColor}}
>
{logo && <img alt={title} className='mb-2 h-[64px] w-auto' src={logo}/>}
<h1 className='text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl'>Now check your email!</h1>
<p className='mb-4 text-center sm:mb-[4.1rem]'>To complete signup, click the confirmation link in your inbox. If it doesn&apos;t arrive within 3 minutes, check your spam folder!</p>

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

@ -14,7 +14,9 @@ export function useOptions(scriptTag: HTMLElement) {
description: scriptTag.dataset.description || undefined,
logo: scriptTag.dataset.logo || undefined,
backgroundColor: scriptTag.dataset.backgroundColor || undefined,
textColor: scriptTag.dataset.textColor || undefined,
buttonColor: scriptTag.dataset.buttonColor || undefined,
buttonTextColor: scriptTag.dataset.buttonTextColor || undefined,
site: scriptTag.dataset.site || window.location.origin,
labels
};

7
yarn.lock
View File

@ -6611,13 +6611,6 @@
dependencies:
color "^3.2.1"
"@tryghost/color-utils@^0.1.26":
version "0.1.26"
resolved "https://registry.yarnpkg.com/@tryghost/color-utils/-/color-utils-0.1.26.tgz#fa832f06a19bf59cfe12435f2f1dbaada5f9af42"
integrity sha512-8XZNqUczXXC32EivXeZL9iAnq8m17yz41sg0YNxJftjEU6kerputpUR0b7qQXeoyxPgQL7pvlJ79geEg9a/BhQ==
dependencies:
color "^3.2.1"
"@tryghost/config-url-helpers@1.0.6":
version "1.0.6"
resolved "https://registry.yarnpkg.com/@tryghost/config-url-helpers/-/config-url-helpers-1.0.6.tgz#0f5193b26305fda48236094be69f0b4b44ee2b92"