Updated signup form to support configuring background and button color

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

ghost/signup-form/.storybook/preview.tsx

@@ -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) => (
+		(Story, context) => (
-			<div className="signup-form" style={{padding: '24px'}}>
+			<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>

ghost/signup-form/index.html

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

ghost/signup-form/package.json

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

ghost/signup-form/preview.html

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

ghost/signup-form/src/AppContext.ts

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

ghost/signup-form/src/Preview.stories.tsx

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

ghost/signup-form/src/color-utils.d.ts

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

ghost/signup-form/src/components/ContentBox.tsx

@@ -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>
     );

ghost/signup-form/src/components/pages/FormPage.tsx

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

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

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

ghost/signup-form/src/components/pages/FormView.tsx

@@ -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'>
+    return (
-        {logo && <img alt={title} src={logo} width='100' />}
+        <div
-        {title && <h1 className="text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl">{title}</h1>}
+            className='flex h-[52vmax] min-h-[320px] flex-col items-center justify-center p-6 md:p-8'
-        {description && <p className='mb-5 text-center'>{description}</p>}
+            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} />
+            <Form {...formProps} />
-    </div>;
+        </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>

ghost/signup-form/src/components/pages/SuccessPage.tsx

@@ -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)} />;
 };

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

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

ghost/signup-form/src/components/pages/SuccessView.tsx

@@ -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>
+        return (
-            <h1 className="text-xl font-bold">Now check your email!</h1>
+            <div>
-        </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">
+    return (
-        <h1 className='text-center text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl'>Now check your email!</h1>
+        <div
-        <p className='mb-5 text-center'>An email has been send to {email}.</p>
+            className='flex h-[52vmax] min-h-[320px] flex-col items-center justify-center bg-grey-200 p-6 md:p-8'
-    </div>;
+            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>
+    );
 };

ghost/signup-form/src/utils/options.tsx

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

ghost/signup-form/tailwind.config.cjs

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

yarn.lock

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