mod-build 4.0.0-alpha.16 → 4.0.0-alpha.18

package/.eslintignore

@@ -1,3 +1,5 @@
 src/scripts/vendor/**/*.js
 src/resources/scripts/**/*.js
-src/compiled/**/*.js
+src/compiled/**/*.js
+src/accessible-components/**/*.js
+src/shared-components/**/*.js

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mod-build",
-  "version": "4.0.0-alpha.16",
+  "version": "4.0.0-alpha.18",
   "description": "Share components for S3 sites.",
   "type": "module",
   "scripts": {

package/siteconfig.js

@@ -1,3 +1,23 @@
-export const siteData = () => {
-	return {};
-};
+/**
+ * Site-specific information that can be used
+ * inside HTML template using Handlebars
+ */
+export let siteData = () => {
+	return {
+		primary_trade: 'Home Warranty',
+		service: 'home_warranty',
+		gtm_container_ID: 'GTM-PZGPJR6',
+		qs_gtm_container_ID: 'GTM-PZGPJR6',
+		email: 'support@bestcompany.com',
+		email_unsub: 'unsubscribe@bestcompany.com',
+		domain: 'bestcompany.com',
+		company_name: 'BestCompany',
+		website_name: 'BestCompany.com',
+		useCDN: true,
+		isWhiteLabel: true,
+		isQSPage: true,
+		useAccessibleConfig: true,
+		isVite: true,
+		pathSubdirectory: 'src/'
+	};
+};

package/src/data/footer.js

@@ -1,5 +1,7 @@
 /* contains data for qs-footer and quote-footer */
 export default function(siteData) {
+	const { isQSPage } = siteData;
+
 	let trade = '';
 	if (siteData?.contractor_trade) {
 		trade = `&trade=${siteData.contractor_trade}`;
@@ -7,7 +9,7 @@ export default function(siteData) {
 		trade = `&trade=${siteData.primary_trade.replace(/[\s]+|_/g, '-').toLowerCase()}`;
 	}
 
-	const footerKey = siteData.isQSPage ? 'qsFooterData' : 'quoteFooterData';
+	const footerKey = isQSPage ? 'qsFooterData' : 'quoteFooterData';
 
 	const qsLinks = [
 		{
@@ -101,15 +103,15 @@ export default function(siteData) {
 	const data = {
 		[footerKey]: {
 			links: [
-				...siteData.isQSPage ? qsLinks : quoteLinks,
+				isQSPage ? qsLinks : quoteLinks,
 			],
-			copyright: `${siteData.isQSPage ? 'QuinStreet, Inc.' : ''} All Rights Reserved.`,
+			copyright: `${isQSPage ? 'QuinStreet, Inc.' : ''} All Rights Reserved.`,
 			contractor: {
 				text: 'Are you a contractor?',
 				linkText: 'Join Our Contractor Network',
 				link: 'https://modernize.com/pro/register/leads/?utm_campaign=quinstreet-referral' + trade
 			},
-			...siteData.isQSPage ? null : quoteSpecific,
+			...isQSPage ? null : quoteSpecific,
 		}
 	}
 

package/tasks/grab-cdn.js

@@ -4,6 +4,25 @@ import { createWriteStream } from 'node:fs';
 import * as stream from 'node:stream';
 import { promisify } from 'node:util';
 import fs from 'node:fs';
+import path from 'node:path';
+
+async function duplicateHtmlFiles(externalResources) {
+	for (const inputPath in externalResources) {
+		const [destPath, fileName] = externalResources[inputPath];
+		const fileExtension = path.extname(fileName);
+
+		if (fileExtension === '.html') {
+			const newFileName = fileName.replace('.html', '.hbs');
+			const sourceFilePath = path.join('src', destPath, fileName);
+			const destinationFilePath = path.join('src', destPath, newFileName);
+
+			if (fs.existsSync(sourceFilePath) && !fs.existsSync(destinationFilePath)) {
+				fs.copyFileSync(sourceFilePath, destinationFilePath);
+				console.log(`${sourceFilePath} duplicated as ${destinationFilePath}`);
+			}
+		}
+	}
+}
 
 function streamToDestination(inputPath, destPath, fileName) {
 	const finished = promisify(stream.finished);
@@ -109,4 +128,5 @@ export default async function(config) {
 	});
 
 	await Promise.all(filesPromiseMap);
+	await duplicateHtmlFiles(externalResources);
 }

package/template.js

@@ -3,5 +3,599 @@
  * inside HTML templates using Handlebars
  */
 export const templateData = () => {
-	return {};
+	return {
+		page: {
+			headConfig: {
+				hideTitleCompanyName: true,
+				title: 'Testttt',
+				description: 'test test test',
+				keywords: '',
+				faviconPath: '/images/favicon.ico',
+				inverseTitle: true,
+				useDynamicGtm: true,
+				useModAnalytics: true,
+				disableOgTags: true,
+				noBsBaseStyles: true,
+				vwoSetup: {
+					vwoPathArray: ['none']
+				}
+			},
+			footAssetsConfig: {
+				disableJquery: true,
+				disableFormJs: true,
+				disableExpandCollapse: true,
+				includeCallRailJs: true,
+			},
+			cssThemes: [
+				'best-company',
+				'best-company-default',
+				'best-company-thankyou-sorry'
+			]
+		},
+		footer: {
+			attributes: {
+				class: 'footer--best-company',
+				data: {
+					'hide-contractor': ''
+				}
+			}
+		},
+		header: {
+			logo: {
+				picture: {
+					img: {
+						attributes: {
+							src: '/src/assets/images/logo/logo.svg',
+							alt: 'Company Name'
+						}
+					}
+				}
+			},
+			callRail: {
+				mobileText: '<span class="hidden visible-sm-up">Call&nbsp;</span>(555) 555-5555',
+				phoneNumber: '5555555555'
+			}
+		},
+		hero: {
+			formTemplateInclude: 'src/templates/_partials/form.html',
+			title: {
+				text: 'Lorem ipsum dolor sit amet.'
+			},
+			subtitle: {
+				text: ''
+			},
+			callRail: {
+				text: 'or call (555) 555-5555 '
+			},
+			/* gradient + graphic option: */
+			background: {},
+			picture: {
+				img: {
+					attributes: {
+						src: '/src/assets/images/hero/hero.png',
+						alt: ''
+					}
+				}
+			}
+			/* full-width background image option */
+			// background: {
+			// 	includeOverlay: true,
+			// 	picture: {
+			// 		img: {
+			// 			attributes: {
+			// 				class: 'hero__background-image',
+			// 				alt: '',
+			// 				src: '/images/hero/hero-background-full.jpg'
+			// 			}
+			// 		}
+			// 	}
+			// }
+		},
+		progressbar: {
+			attributes: {
+				class: 'text-align-center'
+			},
+			includeStepCount: true
+		},
+		steps: {
+			template: 'src/accessible-components/steps/steps.html',
+			carouselOptions: {
+				attributes: {
+					id: 'swiperForm',
+					class: 'swiper--form swiper--dynamic-step-height',
+					role: 'group',
+					tabindex: '0',
+					aria: {
+						label: 'Multi-Step Form',
+						describedby: 'steps-description'
+					}
+				},
+				description: 'Use the buttons on each slide (Go, Next, or Back) or click Enter to move throughout the form steps. Use tab to navigate between input fields. On the final step, the form information will be submitted. When your results load, you will be redirected  to a new web page.'
+			},
+			items: [
+				{
+					attributes: {
+						data: {
+							'step-name': 'zip'
+						}
+					},
+					stepContent: {
+						title: {
+							text: 'What is your zip code?'
+						},
+						fields: [
+							{
+								attributes: {
+									name: 'zip',
+									class: 'form-input--border-bottom-only'
+								}
+							}
+						],
+						button: {
+							attributes: {
+								class: 'btn--primary'
+							},
+							text: 'Next Step'
+						}
+					}
+				},
+				{
+					attributes: {
+						data: {
+							'step-name': 'OwnHome'
+						}
+					},
+					stepContent: {
+						fields: [
+							{
+								fieldType: 'radio',
+								radioOptionType: 'group',
+								attributes: {
+									id: 'OwnHome'
+								},
+								legend: {
+									text: 'Do you own or rent your home?'
+								},
+								options: [
+									{
+										attributes: {
+											name: 'OwnHome',
+											id: 'YesOwnHome',
+											value: 'Yes',
+											data: {
+												required: 'nonempty'
+											}
+										},
+										text: 'Own'
+									},
+									{
+										attributes: {
+											name: 'OwnHome',
+											id: 'NoRentHome',
+											value: 'No',
+											data: {
+												required: 'nonempty'
+											}
+										},
+										text: 'Rent'
+									}
+								],
+								errorMessage: 'Professionals need this info to generate a quote.'
+							}
+						],
+						button: {
+							attributes: {
+								class: 'btn--primary'
+							},
+							text: 'Next Step'
+						}
+					}
+				},
+				{
+					attributes: {
+						data: {
+							'step-name': 'ElectricBill'
+						}
+					},
+					stepContent: {
+						fields: [
+							{
+								label: {
+									attributes: {
+										class: 'step__title',
+										for: 'ElectricBill'
+									},
+									text: 'What‘s your monthly electric bill?'
+								},
+								fieldType: 'select',
+								attributes: {
+									class: 'select--border-bottom-only',
+									name: 'ElectricBill',
+									id: 'ElectricBill'
+								},
+								options: [
+									{
+										attributes: {
+											value: '',
+											disabled: ''
+										},
+										text: 'Please Select'
+									},
+									{
+										attributes: {
+											value: '$300+'
+										},
+										text: '$300+'
+									},
+									{
+										attributes: {
+											value: '$200 - $300'
+										},
+										text: '$200 - $300'
+									},
+									{
+										attributes: {
+											value: '$100 - $200',
+											selected: ''
+										},
+										text: '$100 - $200'
+									},
+									{
+										attributes: {
+											value: 'Under $100'
+										},
+										text: 'Under $100'
+									}
+								],
+								errorMessage: 'Professionals need this info to generate a quote.'
+							}
+						],
+						button: {
+							attributes: {
+								class: 'btn--primary'
+							},
+							text: 'Next Step'
+						}
+					}
+				},
+				{
+					attributes: {
+						data: {
+							'step-name': 'MultipleCheckMarks'
+						}
+					},
+					stepContent: {
+						fields: [
+							{
+								fieldType: 'checkbox-group',
+								legend: {
+									text: 'What are you most concerned about?',
+									disclaimer: 'Check all that apply.'
+								},
+								options: [
+									{
+										attributes: {
+											name: 'MultipleCheckMarks',
+											value: 'Falling',
+											data: {
+												required: 'nonempty'
+											}
+										},
+										text: 'Falling'
+									},
+									{
+										attributes: {
+											name: 'MultipleCheckMarks',
+											value: 'Medical Emergency',
+											data: {
+												required: 'nonempty'
+											}
+										},
+										text: 'Medical Emergency'
+									},
+									{
+										attributes: {
+											name: 'MultipleCheckMarks',
+											value: 'Allergy Attack',
+											data: {
+												required: 'nonempty'
+											}
+										},
+										text: 'Allergy Attack'
+									},
+									{
+										attributes: {
+											name: 'MultipleCheckMarks',
+											value: 'Other',
+											data: {
+												required: 'nonempty'
+											}
+										},
+										text: 'Other'
+									}
+								],
+								errorMessage: 'Professionals need this info to generate a quote.'
+							}
+						],
+						button: {
+							attributes: {
+								class: 'btn--primary'
+							},
+							text: 'Next Step'
+						}
+					}
+				},
+				{
+					attributes: {
+						data: {
+							'step-name': 'UtilityProvider'
+						}
+					},
+					stepContent: {
+						fields: [
+							{
+								fieldType: 'select',
+								label: {
+									attributes: {
+										class: 'step__title',
+										for: 'UtilityProvider'
+									},
+									text: 'Who is your current utility provider?'
+								},
+								attributes: {
+									class: 'select--border-bottom-only',
+									name: 'UtilityProvider',
+									id: 'UtilityProvider'
+								},
+								options: [
+									{
+										text: 'Other',
+										value: 'Other'
+									}
+								]
+							}
+						],
+						button: {
+							attributes: {
+								class: 'btn--primary'
+							},
+							text: 'Next Step'
+						}
+					}
+				},
+				{
+					attributes: {
+						class: 'step--last',
+						data: {
+							'step-name': 'personalInfo'
+						}
+					},
+					stepContent: {
+						fields: [
+							{
+								formGroup: {
+									attributes: {
+										class: 'form-group--flex-50'
+									}
+								},
+								attributes: {
+									name: 'firstName',
+									class: 'form-input--border-bottom-only'
+								}
+							},
+							{
+								formGroup: {
+									attributes: {
+										class: 'form-group--flex-50'
+									}
+								},
+								attributes: {
+									name: 'lastName',
+									class: 'form-input--border-bottom-only'
+								}
+							},
+							{
+								attributes: {
+									name: 'email',
+									class: 'form-input--border-bottom-only'
+								}
+							},
+							{
+								attributes: {
+									name: 'homePhone',
+									class: 'form-input--border-bottom-only'
+								}
+							},
+							{
+								attributes: {
+									name: 'address',
+									class: 'form-input--border-bottom-only'
+								},
+								labelInInput: 'Street Address'
+							},
+							{
+								formGroup: {
+									attributes: {
+										class: 'form-group--flex-33'
+									}
+								},
+								fieldType: 'input',
+								attributes: {
+									class: 'form-input--border-bottom-only',
+									name: 'visualCity',
+									disabled: '',
+									value: ''
+								},
+								labelInInput: 'City'
+							},
+							{
+								formGroup: {
+									attributes: {
+										class: 'form-group--flex-33'
+									}
+								},
+								fieldType: 'input',
+								attributes: {
+									class: 'form-input--border-bottom-only',
+									name: 'visualState',
+									disabled: '',
+									value: ''
+								},
+								labelInInput: 'State'
+							},
+							{
+								formGroup: {
+									attributes: {
+										class: 'form-group--flex-33'
+									}
+								},
+								attributes: {
+									name: 'zip1',
+									class: 'form-input--border-bottom-only'
+								}
+							},
+							{
+								fieldType: 'input',
+								attributes: {
+									name: 'city',
+									type: 'hidden',
+									value: ''
+								}
+							},
+							{
+								fieldType: 'input',
+								attributes: {
+									name: 'state',
+									type: 'hidden',
+									value: ''
+								}
+							}
+						],
+						tcpa: {
+							placement: 'below-cta'
+						},
+						button: {
+							attributes: {
+								class: 'btn--primary'
+							},
+							text: 'Get Quote'
+						}
+					}
+				}
+			]
+		},
+		featuredBlock: {
+			title: {
+				attributes: {
+					class: 'text-align-center'
+				},
+				text: 'About [ Company Name ]'
+			},
+			columns: [
+				{
+					attributes: {
+						class: 'hidden visible-lg-up'
+					},
+					picture: {
+						img: {
+							attributes: {
+								src: '/src/assets/images/logo/logo.svg',
+								alt: '',
+								loading: 'lazy'
+							}
+						}
+					},
+					button: {
+						tag: 'a',
+						attributes: {
+							class: 'btn--secondary',
+							href: 'tel:5555555555'
+						},
+						text: 'Call (555) 555-5555'
+					}
+				},
+				{
+					description: {
+						text: 'Vivamus gravida facilisis arcu, eu vestibulum massa molestie eget. Curabitur sollicitudin justo quis dignissim iaculis. Donec venenatis ullamcorper odio, vel placerat sem porttitor at. Maecenas in enim suscipit, elementum est eget, dignissim ipsum. Nam nec orci id enim congue viverra quis eget dui.'
+					}
+				},
+				{
+					attributes: {
+						class: 'visible-sm-down hidden visible-md'
+					},
+					picture: {
+						img: {
+							attributes: {
+								src: '/src/assets/images/logo/logo.svg',
+								alt: '',
+								loading: 'lazy'
+							}
+						}
+					},
+					button: {
+						tag: 'a',
+						attributes: {
+							class: 'btn--secondary',
+							href: 'tel:5555555555'
+						},
+						text: 'Call (555) 555-5555'
+					}
+				}
+			]
+		},
+		reviews: {
+			title: {
+				text: 'What People Are Saying'
+			},
+			items: [
+				{
+					starRating: '50',
+					showRatingNextToAuthor: true,
+					reviewText: 'Duis dui odio, eleifend ac mauris cursus, feugiat mollis felis. Praesent sit amet justo pharetra, tristique purus nec, accumsan leo. Donec viverra, nunc in efficitur sagittis, tortor magna venenatis ante, vel vestibulum sem ex sit amet est. Quisque efficitur, purus eget congue porttitor, dui metus egestas erat, eu auctor quam mi ac metus.',
+					excludeQuotes: true,
+					authorName: 'Lorem Ipsum',
+					date: 'Month Day, Year',
+					location: 'City, State'
+				},
+				{
+					starRating: '50',
+					showRatingNextToAuthor: true,
+					reviewText: 'Donec imperdiet vitae arcu vel dictum. Mauris tempus elit nec orci tempus, non egestas odio semper. Duis laoreet venenatis neque eget euismod. Duis dapibus et orci ac facilisis.',
+					excludeQuotes: true,
+					authorName: 'Lorem Ipsum',
+					date: 'Month Day, Year',
+					location: 'City, State'
+				},
+				{
+					starRating: '50',
+					showRatingNextToAuthor: true,
+					reviewText: 'Suspendisse dapibus felis ut diam egestas, ac tristique sapien laoreet. Maecenas pellentesque vel odio vitae egestas. Vestibulum posuere viverra luctus. Ut ornare ut ligula non accumsan. Etiam hendrerit ex sit amet turpis pretium rhoncus sit amet non est.',
+					excludeQuotes: true,
+					authorName: 'Lorem Ipsum',
+					date: 'Month Day, Year',
+					location: 'City, State'
+				}
+			]
+		},
+		matched: {
+			icon: '/images/icons/tick.svg',
+			heading: 'Thank you!',
+			subheading: 'A representative will contact you shortly.',
+			call: {
+				icon: '/images/icons/call.svg',
+				text: 'To get help immediately, please call:',
+				phone: '5555555555'
+			}
+		},
+		unmatched: {
+			icon: '/images/icons/error.svg',
+			heading: 'Whoops, something&nbsp;<br class="visible-sm-down">went wrong...',
+			subheading: 'A representative will contact you shortly.',
+			call: {
+				icon: '/images/icons/call.svg',
+				text: 'To get help immediately, please call:',
+				phone: '5555555555'
+			}
+		}
+	};
 };

package/tasks/build.js

@@ -1,13 +0,0 @@
-import gulp from 'gulp';
-import grabSharedComponents from './grab-shared-components.js';
-import grabSharedScripts from './grab-shared-scripts.js';
-import clean from './clean.js';
-import grabCdn from './grab-cdn.js';
-import grabFormHelpers from './grab-form-helpers.js';
-import templates from './templates.js';
-
-export function done() {
-	console.log('build done');
-}
-
-export default gulp.series(clean, grabCdn, grabSharedComponents, grabSharedScripts, grabFormHelpers, templates, done);