Contact Form Block: Fix Missing Button Color Attributes (#14898)

- Add missing button color attributes to the Contact Form block. - Externalize the `colorValidator` utility that was being copypasted around.
Automattic · Mar 5, 2020 · 698a72b · 698a72b
1 parent e14653e
commit 698a72b
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 106 deletions.
diff --git a/extensions/blocks/amazon/attributes.js b/extensions/blocks/amazon/attributes.js
@@ -1,18 +1,20 @@
-const hexRegex = /^#?[A-Fa-f0-9]{6}$/;
-const colourValidator = value => hexRegex.test( value );
+/**
+ * Internal dependencies
+ */
+import colorValidator from '../../shared/colorValidator';
 
 export default {
 	backgroundColor: {
 		type: 'string',
-		validator: colourValidator,
+		validator: colorValidator,
 	},
 	textColor: {
 		type: 'string',
-		validator: colourValidator,
+		validator: colorValidator,
 	},
 	buttonAndLinkColor: {
 		type: 'string',
-		validator: colourValidator,
+		validator: colorValidator,
 	},
 	style: {
 		type: 'string',

diff --git a/extensions/blocks/calendly/attributes.js b/extensions/blocks/calendly/attributes.js
@@ -3,17 +3,18 @@
  */
 import { __ } from '@wordpress/i18n';
 
-const hexRegex = /^#?[A-Fa-f0-9]{6}$/;
-
-const colourValidator = value => hexRegex.test( value );
+/**
+ * Internal dependencies
+ */
+import colorValidator from '../../shared/colorValidator';
 
 const urlValidator = url => ! url || url.startsWith( 'https://calendly.com/' );
 
 export default {
 	backgroundColor: {
 		type: 'string',
 		default: 'ffffff',
-		validator: colourValidator,
+		validator: colorValidator,
 	},
 	submitButtonText: {
 		type: 'string',
@@ -33,12 +34,12 @@ export default {
 	primaryColor: {
 		type: 'string',
 		default: '00A2FF',
-		validator: colourValidator,
+		validator: colorValidator,
 	},
 	textColor: {
 		type: 'string',
 		default: '4D5055',
-		validator: colourValidator,
+		validator: colorValidator,
 	},
 	style: {
 		type: 'string',
@@ -57,10 +58,10 @@ export default {
 	},
 	customBackgroundButtonColor: {
 		type: 'string',
-		validator: colourValidator,
+		validator: colorValidator,
 	},
 	customTextButtonColor: {
 		type: 'string',
-		validator: colourValidator,
+		validator: colorValidator,
 	},
 };
diff --git a/extensions/blocks/contact-form/index.js b/extensions/blocks/contact-form/index.js
@@ -17,6 +17,7 @@ import JetpackFieldTextarea from './components/jetpack-field-textarea';
 import JetpackFieldCheckbox from './components/jetpack-field-checkbox';
 import JetpackFieldMultiple from './components/jetpack-field-multiple';
 import renderMaterialIcon from '../../shared/render-material-icon';
+import colorValidator from '../../shared/colorValidator';
 
 export const name = 'contact-form';
 
@@ -48,8 +49,20 @@ export const settings = {
 			type: 'string',
 			default: __( 'Submit', 'jetpack' ),
 		},
-		customBackgroundButtonColor: { type: 'string' },
-		customTextButtonColor: { type: 'string' },
+		backgroundButtonColor: {
+			type: 'string',
+		},
+		textButtonColor: {
+			type: 'string',
+		},
+		customBackgroundButtonColor: {
+			type: 'string',
+			validator: colorValidator,
+		},
+		customTextButtonColor: {
+			type: 'string',
+			validator: colorValidator,
+		},
 		submitButtonClasses: { type: 'string' },
 		hasFormSettingsSet: {
 			type: 'string',

diff --git a/extensions/shared/colorValidator.js b/extensions/shared/colorValidator.js
@@ -0,0 +1,5 @@
+const hexRegex = /^#?[A-Fa-f0-9]{6}$/;
+
+export default function colorValidator( value ) {
+	return hexRegex.test( value );
+}
diff --git a/extensions/shared/test/get-validated-attributes.js b/extensions/shared/test/get-validated-attributes.js
@@ -1,12 +1,9 @@
 /**
  * Internal dependencies
  */
+import colorValidator from '../colorValidator';
 import { getValidatedAttributes } from '../get-validated-attributes';
 
-const hexRegex = /^#?[A-Fa-f0-9]{6}$/;
-
-const colourValidator = value => hexRegex.test( value );
-
 const urlValidator = url => ! url || url.startsWith( 'http' );
 
 const defaultAttributes = {
@@ -17,7 +14,7 @@ const defaultAttributes = {
 	color: {
 		default: 'ffffff',
 		type: 'string',
-		validator: colourValidator,
+		validator: colorValidator,
 	},
 	language: {
 		default: 'en',
@@ -36,116 +33,80 @@ const defaultAttributes = {
 
 describe( 'getValidatedAttributes', () => {
 	test( 'boolean attributes', () => {
-		expect(
-			getValidatedAttributes( defaultAttributes, { boolean: true } )
-		).toStrictEqual(
-			{ boolean: true }
-        );
-
-		expect(
-			getValidatedAttributes( defaultAttributes, { boolean: 'true' } )
-		).toStrictEqual(
-			{ boolean: true }
-        );
+		expect( getValidatedAttributes( defaultAttributes, { boolean: true } ) ).toStrictEqual( {
+			boolean: true,
+		} );
 
-		expect(
-			getValidatedAttributes( defaultAttributes, { boolean: false } )
-		).toStrictEqual(
-			{ boolean: false }
-		);
+		expect( getValidatedAttributes( defaultAttributes, { boolean: 'true' } ) ).toStrictEqual( {
+			boolean: true,
+		} );
 
-        expect(
-			getValidatedAttributes( defaultAttributes, { boolean: 'false' } )
-		).toStrictEqual(
-			{ boolean: false }
-		);
+		expect( getValidatedAttributes( defaultAttributes, { boolean: false } ) ).toStrictEqual( {
+			boolean: false,
+		} );
 
+		expect( getValidatedAttributes( defaultAttributes, { boolean: 'false' } ) ).toStrictEqual( {
+			boolean: false,
+		} );
 	} );
 
 	test( 'attributes with a validator function', () => {
-		expect(
-			getValidatedAttributes( defaultAttributes, { color: 'ffffff' } )
-		).toStrictEqual(
-			{ color: 'ffffff' }
-        );
+		expect( getValidatedAttributes( defaultAttributes, { color: 'ffffff' } ) ).toStrictEqual( {
+			color: 'ffffff',
+		} );
 
-		expect(
-			getValidatedAttributes( defaultAttributes, { color: 'white' } )
-		).toStrictEqual(
-			{ color: 'ffffff' }
-        );
+		expect( getValidatedAttributes( defaultAttributes, { color: 'white' } ) ).toStrictEqual( {
+			color: 'ffffff',
+		} );
 
-		expect(
-			getValidatedAttributes( defaultAttributes, { color: '000000' } )
-		).toStrictEqual(
-			{ color: '000000' }
-        );
+		expect( getValidatedAttributes( defaultAttributes, { color: '000000' } ) ).toStrictEqual( {
+			color: '000000',
+		} );
 
-		expect(
-			getValidatedAttributes( defaultAttributes, { color: 'black' } )
-		).toStrictEqual(
-			{ color: 'ffffff' }
-        );
-    } );
+		expect( getValidatedAttributes( defaultAttributes, { color: 'black' } ) ).toStrictEqual( {
+			color: 'ffffff',
+		} );
+	} );
 
 	test( 'attributes with valid values', () => {
-		expect(
-			getValidatedAttributes( defaultAttributes, { language: 'en' } )
-		).toStrictEqual(
-			{ language: 'en' }
-        );
+		expect( getValidatedAttributes( defaultAttributes, { language: 'en' } ) ).toStrictEqual( {
+			language: 'en',
+		} );
 
-		expect(
-			getValidatedAttributes( defaultAttributes, { language: 'fr' } )
-		).toStrictEqual(
-			{ language: 'fr' }
-        );
+		expect( getValidatedAttributes( defaultAttributes, { language: 'fr' } ) ).toStrictEqual( {
+			language: 'fr',
+		} );
 
-		expect(
-			getValidatedAttributes( defaultAttributes, { language: 'pt' } )
-		).toStrictEqual(
-			{ language: 'en' }
-        );
-    } );
+		expect( getValidatedAttributes( defaultAttributes, { language: 'pt' } ) ).toStrictEqual( {
+			language: 'en',
+		} );
+	} );
 
 	test( 'attributes without a default values', () => {
 		expect(
 			getValidatedAttributes( defaultAttributes, { url: 'http://jetpack.com' } )
-		).toStrictEqual(
-			{ url: 'http://jetpack.com' }
-        );
+		).toStrictEqual( { url: 'http://jetpack.com' } );
 
 		expect(
 			getValidatedAttributes( defaultAttributes, { url: 'https://jetpack.com' } )
-		).toStrictEqual(
-			{ url: 'https://jetpack.com' }
-        );
+		).toStrictEqual( { url: 'https://jetpack.com' } );
 
-
-		expect(
-			getValidatedAttributes( defaultAttributes, { url: 'jetpack.com' } )
-		).toStrictEqual(
-			{ url: undefined }
-        );
+		expect( getValidatedAttributes( defaultAttributes, { url: 'jetpack.com' } ) ).toStrictEqual( {
+			url: undefined,
+		} );
 	} );
 
 	test( 'attributes without validation', () => {
-		expect(
-			getValidatedAttributes( defaultAttributes, { freeform: 'one' } )
-		).toStrictEqual(
-			{ freeform: 'one' }
-        );
+		expect( getValidatedAttributes( defaultAttributes, { freeform: 'one' } ) ).toStrictEqual( {
+			freeform: 'one',
+		} );
 
-		expect(
-			getValidatedAttributes( defaultAttributes, { freeform: 'two' } )
-		).toStrictEqual(
-			{ freeform: 'two' }
-        );
-
-        expect(
-			getValidatedAttributes( defaultAttributes, { freeform: undefined } )
-		).toStrictEqual(
-			{ freeform: undefined }
-        );
+		expect( getValidatedAttributes( defaultAttributes, { freeform: 'two' } ) ).toStrictEqual( {
+			freeform: 'two',
+		} );
+
+		expect( getValidatedAttributes( defaultAttributes, { freeform: undefined } ) ).toStrictEqual( {
+			freeform: undefined,
+		} );
 	} );
 } );