TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 03:44:29 +03:00
Code Issues Projects Releases Wiki Activity

Updated signup form to support configuring background and button color

Browse Source 
refs https://github.com/TryGhost/Team/issues/3338

* background and button color can be passed in the script tag dataset
* text color is calculated automatically from background/button color
This commit is contained in:
Jono Mingard 2023-06-01 14:43:41 +12:00
parent 257d84a4b1
commit 80b9030805
17 changed files with 112 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ghost/signup-form/.storybook/preview.tsx
View File

@ -3,6 +3,8 @@ import React from 'react';
import type { Preview } from "@storybook/react";
import './storybook.css';
const transparencyGrid = `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3ERectangle%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='%23F2F6F8' d='M0 0h24v24H0z'/%3E%3Cpath fill='%23E5ECF0' d='M0 0h12v12H0zM12 12h12v12H12z'/%3E%3C/g%3E%3C/svg%3E")`
const preview: Preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
@ -19,8 +21,11 @@ const preview: Preview = {
},
},
decorators: [
(Story) => (
<div className="signup-form" style={{padding: '24px'}}>
(Story, context) => (
<div className="signup-form" style={{
padding: '24px',
backgroundImage: context.tags.includes('transparency-grid') ? transparencyGrid : undefined
}}>
{/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it */}
<Story />
</div>

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

@ -24,7 +24,8 @@
data-title="My site name"
data-description="An independent publication about embeddable signup forms."
data-logo="https://user-images.githubusercontent.com/65487235/157884383-1b75feb1-45d8-4430-b636-3f7e06577347.png"
data-color="#4664dd"
data-background-color="#eeeeee"
data-button-color="#4664dd"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="With logo"
@ -37,7 +38,8 @@
src="/src/index.tsx?withoutlogo"
data-title="Site without logo"
data-description="An independent publication about embeddable signup forms."
data-color="#4664dd"
data-background-color="#eeeeee"
data-button-color="#4664dd"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Without logo"
@ -49,7 +51,7 @@
<script
type="module"
src="/src/index.tsx?other"
data-color="#ff0095"
data-button-color="#ff0095"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Minimal"
@ -62,7 +64,7 @@
<script
type="module"
src="/src/index.tsx?other2"
data-color="#ff0095"
data-button-color="#ff0095"
data-site="https://invalid/"
></script>
</div>

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

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

10
ghost/signup-form/preview.html
View File

@ -23,7 +23,8 @@
data-title="My site name"
data-description="An independent publication about embeddable signup forms."
data-logo="https://user-images.githubusercontent.com/65487235/157884383-1b75feb1-45d8-4430-b636-3f7e06577347.png"
data-color="#4664dd"
data-background-color="#eeeeee"
data-button-color="#4664dd"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="With logo"
@ -35,7 +36,8 @@
src="http://localhost:6174/signup-form.min.js"
data-title="Site without logo"
data-description="An independent publication about embeddable signup forms."
data-color="#4664dd"
data-background-color="#eeeeee"
data-button-color="#4664dd"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Without logo"
@ -46,7 +48,7 @@
<script
src="http://localhost:6174/signup-form.min.js"
data-color="#ff0095"
data-button-color="#ff0095"
data-site="%VITE_SITE_URL%"
data-label-1="Signup form"
data-label-2="Minimal"
@ -58,7 +60,7 @@
<script
src="http://localhost:6174/signup-form.min.js"
data-color="#ff0095"
data-button-color="#ff0095"
data-site="https://invalid/"
></script>
</div>

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

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

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

@ -75,6 +75,8 @@ export const Full: Story = {
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',
backgroundColor: '#eeeeee',
buttonColor: '#ff0095',
site: 'localhost',
labels: ['label-1', 'label-2'],
simulateApiError: false,
@ -89,6 +91,7 @@ export const Minimal: Story = {
args: {
site: 'localhost',
labels: ['label-1', 'label-2'],
buttonColor: '#ff0095',
simulateApiError: false,
pageBackgroundColor: '#ffffff',
pageTextColor: '#000000'
@ -101,6 +104,7 @@ export const MinimalOnDark: Story = {
args: {
site: 'localhost',
labels: ['label-1', 'label-2'],
buttonColor: '#ff0095',
simulateApiError: false,
pageBackgroundColor: '#122334',
pageTextColor: '#f7f7f7'

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

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

9
ghost/signup-form/src/components/ContentBox.tsx
View File

@ -1,19 +1,12 @@
import React from 'react';
import {useAppContext} from '../AppContext';
type ContentBoxProps = {
children: React.ReactNode
};
export const ContentBox: React.FC<ContentBoxProps> = ({children}) => {
const {color} = useAppContext().options;
const style = {
'--gh-accent-color': color
} as React.CSSProperties;
return (
<section style={style}>
<section>
{children}
</section>
);

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

@ -30,6 +30,8 @@ export const FormPage: React.FC = () => {
};
return <FormView
backgroundColor={options.backgroundColor}
buttonColor={options.buttonColor}
description={options.description}
error={error}
isMinimal={isMinimal(options)}

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

@ -16,6 +16,22 @@ export const Full: Story = {
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',
backgroundColor: '#eeeeee',
buttonColor: '#ff0095',
loading: false,
error: '',
isMinimal: false,
onSubmit: () => {}
}
};
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',
backgroundColor: '#333333',
buttonColor: '#ff0095',
loading: false,
error: '',
isMinimal: false,
@ -25,9 +41,11 @@ export const Full: Story = {
export const Minimal: Story = {
args: {
buttonColor: '#ff0095',
loading: false,
error: '',
isMinimal: true,
onSubmit: () => {}
}
},
tags: ['transparency-grid']
};

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

@ -1,33 +1,41 @@
import React, {FormEventHandler} from 'react';
import {textColorForBackgroundColor} from '@tryghost/color-utils';
export const FormView: React.FC<FormProps & {
isMinimal: boolean
title?: string
description?: string
logo?: string
}> = ({isMinimal, title, description, logo, ...formProps}) => {
backgroundColor?: string
}> = ({isMinimal, title, description, logo, backgroundColor, ...formProps}) => {
if (isMinimal) {
return (
<Form {...formProps} />
);
}
return <div className='flex h-[52vmax] min-h-[320px] flex-col items-center justify-center bg-grey-200 p-6 md:p-8'>
{logo && <img alt={title} src={logo} width='100' />}
{title && <h1 className="text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl">{title}</h1>}
{description && <p className='mb-5 text-center'>{description}</p>}
return (
<div
className='flex h-[52vmax] min-h-[320px] flex-col items-center justify-center p-6 md:p-8'
style={{backgroundColor, color: backgroundColor && textColorForBackgroundColor(backgroundColor)}}
>
{logo && <img alt={title} src={logo} width='100' />}
{title && <h1 className="text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl">{title}</h1>}
{description && <p className='mb-5 text-center'>{description}</p>}
<Form {...formProps} />
</div>;
<Form {...formProps} />
</div>
);
};
type FormProps = {
buttonColor?: string
loading: boolean
error?: string
onSubmit: (values: { email: string }) => void
}
const Form: React.FC<FormProps> = ({loading, error, onSubmit}) => {
const Form: React.FC<FormProps> = ({loading, error, buttonColor, onSubmit}) => {
const [email, setEmail] = React.useState('');
const borderStyle = error ? '!border-red-500' : 'border-grey-300';
@ -41,7 +49,7 @@ const Form: React.FC<FormProps> = ({loading, error, onSubmit}) => {
<>
<form className='relative flex w-full max-w-[440px]' onSubmit={submitHandler}>
<input
className={'flex-1 py-[1rem] pl-3 border rounded-[.5rem] hover:border-grey-400 transition focus-visible:border-grey-500 focus-visible:outline-none ' + borderStyle}
className={'flex-1 py-[1rem] pl-3 border rounded-[.5rem] text-grey-900 hover:border-grey-400 transition focus-visible:border-grey-500 focus-visible:outline-none ' + borderStyle}
data-testid="input"
disabled={loading}
placeholder='jamie@example.com'
@ -50,9 +58,10 @@ const Form: React.FC<FormProps> = ({loading, error, onSubmit}) => {
onChange={e => setEmail(e.target.value)}
/>
<button
className='absolute inset-y-0 right-[.3rem] my-auto h-[3rem] rounded-[.3rem] bg-accent px-3 py-2 text-white'
className='absolute inset-y-0 right-[.3rem] my-auto h-[3rem] rounded-[.3rem] px-3 py-2 text-white'
data-testid="button"
disabled={loading}
style={{backgroundColor: buttonColor, color: buttonColor && textColorForBackgroundColor(buttonColor)}}
type='submit'
>Subscribe</button>
</form>

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

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

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

@ -14,7 +14,16 @@ type Story = StoryObj<typeof meta>;
export const Full: Story = {
args: {
email: 'test@example.com',
isMinimal: false
isMinimal: false,
backgroundColor: '#eeeeee'
}
};
export const FullDark: Story = {
args: {
email: 'test@example.com',
isMinimal: false,
backgroundColor: '#333333'
}
};
@ -22,5 +31,6 @@ export const Minimal: Story = {
args: {
email: 'test@example.com',
isMinimal: true
}
},
tags: ['transparency-grid']
};

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

@ -1,16 +1,26 @@
import React from 'react';
import {textColorForBackgroundColor} from '@tryghost/color-utils';
export const SuccessView: React.FC<{
email: string;
isMinimal: boolean;
}> = ({email,isMinimal}) => {
backgroundColor?: string;
}> = ({email,isMinimal,backgroundColor}) => {
if (isMinimal) {
return <div>
<h1 className="text-xl font-bold">Now check your email!</h1>
</div>;
return (
<div>
<h1 className="text-xl font-bold">Now check your email!</h1>
</div>
);
}
return <div className='flex h-[52vmax] min-h-[320px] flex-col items-center justify-center bg-grey-200 p-6 md:p-8' data-testid="success-page">
<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-5 text-center'>An email has been send to {email}.</p>
</div>;
return (
<div
className='flex h-[52vmax] min-h-[320px] flex-col items-center justify-center bg-grey-200 p-6 md:p-8'
data-testid="success-page"
style={{backgroundColor, color: backgroundColor && textColorForBackgroundColor(backgroundColor)}}
>
<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-5 text-center'>An email has been send to {email}.</p>
</div>
);
};

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

@ -13,7 +13,8 @@ export function useOptions(scriptTag: HTMLElement) {
title: scriptTag.dataset.title || undefined,
description: scriptTag.dataset.description || undefined,
logo: scriptTag.dataset.logo || undefined,
color: scriptTag.dataset.color || undefined,
backgroundColor: scriptTag.dataset.backgroundColor || undefined,
buttonColor: scriptTag.dataset.buttonColor || undefined,
site: scriptTag.dataset.site || window.location.origin,
labels
};

1
ghost/signup-form/tailwind.config.cjs
View File

@ -12,7 +12,6 @@ module.exports = {
xl: '1280px'
},
colors: {
accent: 'var(--gh-accent-color, #ff0095)',
transparent: 'transparent',
current: 'currentColor',
white: '#FFF',

9
yarn.lock
View File

@ -6955,6 +6955,13 @@
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"
@ -28437,7 +28444,7 @@ react-element-to-jsx-string@^15.0.0:
is-plain-object "5.0.0"
react-is "18.1.0"
react-error-overlay@6.0.11, react-error-overlay@^6.0.11:
react-error-overlay@^6.0.11:
version "6.0.11"
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==