mod-build 4.0.0-alpha.7 → 4.0.0-alpha.9

package/package.json

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

package/tasks/grab-cdn.js

@@ -43,7 +43,7 @@ function streamToDestination(inputPath, destPath, fileName) {
 	}); 
 } 
 
-export default async function(config, done) {
+export default async function(config) {
 	const { nodeEnv, isLocal } = defaultSettings;
 	const { isQSPage, isWhiteLabel, domain, page } = config;
 	const { themeFile, cssThemes } = page;
@@ -109,5 +109,4 @@ export default async function(config, done) {
 	});
 
 	await Promise.all(filesPromiseMap);
-	done();
 }

package/tasks/grab-form-helpers.js

@@ -76,7 +76,7 @@ async function getHelpers() {
 	return helpers;
 }
 
-export default async function(done) {
+export default async function() {
 	const { nodeEnv } = defaultSettings;
 	const helpers = await getHelpers(defaultSettings);
 
@@ -90,5 +90,4 @@ export default async function(done) {
 	});
 
 	await Promise.all(filesPromiseMap);
-	done();
 }

package/tasks/grab-shared-components.js

@@ -69,9 +69,8 @@ const getListOfSharedComponents = (defaultSettings, componentFolders) => {
 	});
 }
 
-export default function(config, done) {
+export default function(config) {
 	const componentFolders = config.useAccessibleConfig ? ['accessible-components'] : ['shared-components'];
 	console.log('running grab-shared-components');
 	getListOfSharedComponents(defaultSettings, componentFolders);
-	done();
 }

package/tasks/grab-shared-scripts.js

@@ -237,7 +237,7 @@ function getResource(task, fileNames, resourcePath = 'quote/resources') {
 	})
 }
 
-export default async function(config, done) {
+export default async function(config) {
 	const { isLocal } = defaultSettings;
 	const isQuotePage = config.siteData?.isQuotePage || config.isQuotePage;
 	const useAccessibleComponents = config.siteData?.useAccessibleConfig || config.useAccessibleConfig;
@@ -261,6 +261,5 @@ export default async function(config, done) {
 		});
 
 		await Promise.all(getAllResources);
-		done();
 	}
 }

package/tasks/serve.js

@@ -1,15 +1,9 @@
-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('done');
-}
-
-export default function(config) {
-	return gulp.series(clean, () => grabCdn(config), () => grabSharedComponents(config), () => grabSharedScripts(config), () => grabFormHelpers(config), () => templates(config), done);
-}
+export function startModBuild(config) {
+	return [ grabCdn(config), grabSharedComponents(config), grabSharedScripts(config), grabFormHelpers(config), templates(config) ]
+}

package/tasks/templates.js

@@ -128,7 +128,7 @@ const fetchTcpaFromSitegenie = async () => {
 	});
 };
 
-export default async function(done) {
+export default async function() {
 	if (Object.keys(siteData).length > 0) {
 		if (!tempSiteData.doNotUseDefaultFieldConfig && !tempSiteData.defaultConfigCompleted) {
 			if (tempSiteData.useAccessibleConfig) {
@@ -148,5 +148,4 @@ export default async function(done) {
 
 	fs.writeFileSync(`${defaultSettings.srcFolder}/${defaultSettings.tmpFolder}/tempSiteData.json`, JSON.stringify(tempSiteData, null, 2));
 
-	done();
 }

package/vite.config.js

@@ -1,15 +1,13 @@
 import handlebars from '@vituum/vite-plugin-handlebars'
 import vituum from 'vituum'
-import { siteData } from './siteconfig.js'
 import { defaultSettings } from './src/data/config.js'
 import { defineConfig } from 'vite'
-import gulpServe from './tasks/serve.js'
-import { templateData } from './template.js'
+import { grabCdnAssets, grabFormHelperAssets, grabSharedComponentAssets, grabSharedScriptAssets, templateAssets } from './tasks/serve.js'
 import { handlebarsHelpers } from './src/scripts/utils.js'
 import gulpHandlebarsFileInclude from 'gulp-handlebars-file-include'
 import eslint from 'vite-plugin-eslint'
 
-const themeSettings = { ...siteData(), ...templateData() }
+const themeSettings = { }
 
 export default defineConfig((config = themeSettings) => ({
 	build: {
@@ -17,6 +15,11 @@ export default defineConfig((config = themeSettings) => ({
 		emptyOutDir: false
 	},
 	plugins: [
+		grabCdnAssets(config),
+		grabSharedComponentAssets(config),
+		grabSharedScriptAssets(config),
+		grabFormHelperAssets(config),
+		templateAssets(config),
 		vituum(),
 		handlebars({
 			data: ['src/**/*.json'],
@@ -27,10 +30,6 @@ export default defineConfig((config = themeSettings) => ({
 			}
 		}),
 		gulpHandlebarsFileInclude({}, { handlebarsHelpers }),
-		{
-			...gulpServe(config),
-			apply: 'serve'
-		},
 		{
 			...eslint(),
 			apply: 'build',

package/src/accessible-components/button/_button.scss

@@ -1,199 +0,0 @@
-$button-border-radius: 2px !default;
-$button-cursor: pointer !default;
-$button-display: inline-block !default;
-$button-font-family: $base-font-family !default;
-$button-font-size: 1.25rem !default;
-$button-font-size-desktop: $button-font-size !default;
-$button-font-style: normal !default;
-$button-font-weight: 700 !default;
-$button-height: 50px !default;
-$button-height-desktop: $button-height !default;
-$button-letter-spacing: 0 !default;
-$button-line-height: 1.05 !default;
-$button-margin: 10px 0 !default;
-$button-padding: 15px 30px !default;
-$button-position: relative !default;
-$button-text-align: center !default;
-$button-text-decoration: none !default;
-$button-text-transform: uppercase !default;
-$button-transition: color .15s ease-in-out, background-color .15s ease-in-out, border .15s ease-in-out !default;
-$button-width: 100% !default;
-$button-z-index: 0 !default;
-
-$back-button-align-items: center !default;
-$back-button-background-color: transparent !default;
-$back-button-border: 0 !default;
-$back-button-border-radius: 0 !default;
-$back-button-color: $color-charcoal4 !default;
-$back-button-display: flex !default;
-$back-button-initial-display: none !default;
-$back-button-font-size: .875rem !default;
-$back-button-font-weight: 400 !default;
-$back-button-height: auto !default;
-$back-button-line-height: $button-line-height !default;
-$back-button-margin: 10px 0 0 !default;
-$back-button-padding: 2px 5px !default;
-$back-button-hover-background-color: transparent !default;
-$back-button-hover-color: darken($back-button-color, 20%) !default;
-$back-button-icon-font-size: 90% !default;
-$back-button-icon-margin-right: 4px !default;
-
-$back-button-focus-outline: 1px solid rgba($back-button-color, .5) !default;
-$back-button-focus-outline-offset: 2px !default;
-
-$button-primary-background-color: $color-a11y-default-button !default;
-$button-primary-border: 0 !default;
-$button-primary-color: $color-white !default;
-$button-primary-max-width: 100% !default;
-$button-primary-hover-background-color: $color-a11y-default-button-hover !default;
-$button-primary-hover-border: $button-primary-border !default;
-$button-primary-hover-color: $color-white !default;
-
-$button-secondary-background-color: $button-primary-background-color !default;
-$button-secondary-border: $button-primary-border !default;
-$button-secondary-color: $button-primary-color !default;
-$button-secondary-font-size: $button-font-size !default;
-$button-secondary-font-size-desktop: $button-secondary-font-size !default;
-$button-secondary-height: $button-height !default;
-$button-secondary-height-desktop: $button-secondary-height !default;
-$button-secondary-max-width: 100% !default;
-$button-secondary-padding: $button-padding !default;
-$button-secondary-text-transform: $button-text-transform !default;
-$button-secondary-hover-background-color: $button-primary-hover-background-color !default;
-$button-secondary-hover-border: $button-primary-hover-border !default;
-$button-secondary-hover-color: $button-primary-hover-color !default;
-
-$button-icon-position: absolute !default;
-$button-icon-font-family: 'modicons-fill' !default;
-$button-icon-font-size: .875rem !default;
-$button-icon-bottom: unset !default;
-$button-icon-left: unset !default;
-$button-icon-right: 15px !default;
-$button-icon-top: 50% !default;
-$button-icon-transform: translateY(-50%) !default;
-
-.btn {
-	border-radius: $button-border-radius;
-	cursor: $button-cursor;
-	display: $button-display;
-	font-family: $button-font-family;
-	font-size: $button-font-size;
-	font-style: $button-font-style;
-	font-weight: $button-font-weight;
-	height: $button-height;
-	letter-spacing: $button-letter-spacing;
-	line-height: $button-line-height;
-	margin: $button-margin;
-	padding: $button-padding;
-	position: $button-position;
-	text-align: $button-text-align;
-	text-decoration: $button-text-decoration;
-	text-transform: $button-text-transform;
-	transition: $button-transition;
-	width: $button-width;
-	z-index: $button-z-index;
-
-	&__icon {
-		bottom: $button-icon-bottom;
-		font-family: $button-icon-font-family;
-		font-size: $button-icon-font-size;
-		left: $button-icon-left;
-		position: $button-icon-position;
-		right: $button-icon-right;
-		top: $button-icon-top;
-		transform: $button-icon-transform;
-	}
-
-	&--back {
-		align-items: $back-button-align-items;
-		background-color: $back-button-background-color;
-		border: $back-button-border;
-		border-radius: $back-button-border-radius;
-		color: $back-button-color;
-		cursor: $button-cursor;
-		display: $back-button-initial-display;
-		font-size: $back-button-font-size;
-		font-family: $button-font-family;
-		font-weight: $back-button-font-weight;
-		height: $back-button-height;
-		line-height: $back-button-line-height;
-		margin: $back-button-margin;
-		padding: $back-button-padding;
-		transition: $button-transition;
-
-		i {
-			font-size: $back-button-icon-font-size;
-			margin-right: $back-button-icon-margin-right;
-		}
-
-		&:focus {
-			outline: $back-button-focus-outline;
-			outline-offset: $back-button-focus-outline-offset;
-		}
-	}
-
-	&--primary {
-		background-color: $button-primary-background-color;
-		border: $button-primary-border;
-		color: $button-primary-color;
-		max-width: $button-primary-max-width;
-	}
-
-	&--secondary {
-		background-color: $button-secondary-background-color;
-		border: $button-secondary-border;
-		color: $button-secondary-color;
-		font-size: $button-secondary-font-size;
-		height: $button-secondary-height;
-		max-width: $button-secondary-max-width;
-		padding: $button-secondary-padding;
-		text-transform: $button-secondary-text-transform;
-	}
-}
-
-.form-in-progress {
-	.btn--back {
-		display: $back-button-display;
-	}
-}
-
-@include breakpoint-md {
-	.btn {
-		font-size: $button-font-size-desktop;
-		height: $button-height-desktop;
-
-		&--back {
-			&:hover,
-			&:active,
-			&:focus {
-				background-color: $back-button-hover-background-color;
-				color: $back-button-hover-color;
-			}
-		}
-
-		&--primary {
-			&:hover,
-			&:active,
-			&:focus {
-				background-color: $button-primary-hover-background-color;
-				border: $button-primary-hover-border;
-				color: $button-primary-hover-color;
-			}
-
-		}
-
-		&--secondary {
-			font-size: $button-secondary-font-size-desktop;
-			height: $button-secondary-height-desktop;
-
-			&:hover,
-			&:active,
-			&:focus {
-				background-color: $button-secondary-hover-background-color;
-				border: $button-secondary-hover-border;
-				color: $button-secondary-hover-color;
-			}
-
-		}
-	}
-}

package/src/accessible-components/button/back-button.html

@@ -1,8 +0,0 @@
-<button class="btn--back back-btn{{#if class}} {{class}}{{/if}}" data-btn="back" type="button">
-	<i class="{{#if icon}}{{icon}}{{else}}icon-caret-left{{/if}}"></i>
-	{{#if iconOnly}}
-		<span class="visually-hidden">Back</span>
-	{{else}}
-		Back
-	{{/if}}
-</button>

package/src/accessible-components/button/button.html

@@ -1,17 +0,0 @@
-{{#xif 'this.button.tag && this.button.tag === "a"'}}
-<a class="btn{{#xif 'this.button.attributes && this.button.attributes.class || this.class'}}{{#if this.button.attributes.class}} {{this.button.attributes.class}}{{/if}}{{#if this.class}} {{this.class}}{{/if}}{{/xif}}" {{{addAttributes this.button 'class'}}}>
-{{else}}
-<button class="btn{{#xif 'this.button.attributes && this.button.attributes.class'}} {{this.button.attributes.class}}{{/xif}}" {{{addAttributes this.button 'class'}}}>
-{{/xif}}
-	<span class="btn__text">{{{this.button.text}}}</span>
-	{{#if this.button.icon}}
-		<i class="btn__icon{{#xif 'this.button.icon.attributes && this.button.icon.attributes.class'}} {{this.button.icon.attributes.class}}{{/xif}}" {{{addAttributes this.button.icon 'class'}}}></i>
-	{{/if}}
-{{#xif 'this.button.tag && this.button.tag === "a"'}}
-</a>
-{{else}}
-	{{#unless this.button.hideSpinner}}
-		<span class="btn__spinner"></span>
-	{{/unless}}
-</button>
-{{/xif}}

package/src/accessible-components/carousel/_carousel.scss

@@ -1,112 +0,0 @@
-$swiper-margin-top: 0 !default;
-$swiper-padding-top: 0 !default;
-
-$swiper-controls-padding: 30px 15px !default;
-$swiper-controls-padding-desktop: 50px 15px !default;
-$swiper-navigation-color: $color-charcoal4 !default;
-$swiper-navigation-hover-color: darken($swiper-navigation-color, 20%) !default;
-$swiper-pagination-margin: 0 10px !default;
-$swiper-pagination-bottom-alignment: 0 !default;
-$swiper-pagination-bullet-background-color: transparent !default;
-$swiper-pagination-bullet-border: 1px solid $swiper-navigation-color !default;
-$swiper-pagination-bullet-margin: 0 8px !default;
-$swiper-pagination-bullet-height: 8px !default;
-$swiper-pagination-bullet-width: 8px !default;
-$swiper-pagination-bullet-hover-background-color: darken($swiper-navigation-color, 20%) !default;
-$swiper-pagination-bullet-hover-border: 0 !default;
-$swiper-pagination-bullet-active-background-color: $swiper-navigation-color !default;
-$swiper-pagination-bullet-active-border: 0 !default;
-
-$swiper-scrollbar-background-color: $color-charcoal1 !default;
-$swiper-scrollbar-drag-color: $color-charcoal4 !default;
-$swiper-scrollbar-height: 4px !default;
-
-.swiper {
-	margin-top: $swiper-margin-top;
-	overflow: hidden;
-	padding-top: $swiper-padding-top;
-
-	.swiper-wrapper{
-		display: flex;
-	}
-
-	.swiper-controls {
-		align-items: center;
-		display: flex;
-		justify-content: center;
-		padding: $swiper-controls-padding;
-
-		i.icon {
-			color: $swiper-navigation-color;
-			cursor: pointer;
-			transition: $base-transition;
-
-			&:not(.swiper-button-disabled) {
-				&:active,
-				&:focus,
-				&:hover {
-					color: $swiper-navigation-hover-color;
-				}
-			}
-		}
-
-		.swiper-pagination {
-			margin: $swiper-pagination-margin;
-			position: relative;
-
-			.swiper-pagination-bullet {
-				background-color: $swiper-pagination-bullet-background-color;
-				border: $swiper-pagination-bullet-border;
-				height: $swiper-pagination-bullet-height;
-				opacity: 1;
-				transition: $base-transition;
-				width: $swiper-pagination-bullet-width;
-
-				&:active,
-				&:focus,
-				&:hover {
-					background-color: $swiper-pagination-bullet-hover-background-color;
-					border: $swiper-pagination-bullet-hover-border;
-					outline: 0;
-				}
-
-				&-active {
-					background-color: $swiper-pagination-bullet-active-background-color;
-					border: $swiper-pagination-bullet-active-border;
-				}
-			}
-
-			&.swiper-pagination-horizontal {
-				bottom: $swiper-pagination-bottom-alignment;
-				width: auto;
-
-				.swiper-pagination-bullet {
-					margin: $swiper-pagination-bullet-margin;
-				}
-			}
-		}
-	}
-
-	&-scrollbar {
-		background: $swiper-scrollbar-background-color;
-		height: $swiper-scrollbar-height;
-
-		&-drag {
-			background-color: $swiper-scrollbar-drag-color;
-			height: 100%;
-			width: 100%;
-		}
-	}
-
-	&--reviews {
-		padding-top: 50px !important;
-	}
-}
-
-@include breakpoint-md {
-	.swiper {
-		.swiper-controls {
-			padding: $swiper-controls-padding-desktop;
-		}
-	}
-}

package/src/accessible-components/carousel/carousel.html

@@ -1,25 +0,0 @@
-<div class="swiper{{#xif 'this.carousel.carouselOptions.attributes && this.carousel.carouselOptions.attributes.class'}} {{this.carousel.carouselOptions.attributes.class}}{{/xif}}" {{{addAttributes this.carousel.carouselOptions 'class'}}}>
-	{{#if this.carousel.carouselOptions.attributes.aria.describedby}}
-		<p class="visually-hidden" id="{{this.carousel.carouselOptions.attributes.aria.describedby}}">{{{this.carousel.carouselOptions.description}}}</p>
-	{{/if}}
-	<ul class="swiper-wrapper"{{#if this.carousel.carouselOptions.wrapper}} {{{addAttributes this.carousel.carouselOptions.wrapper 'class'}}}{{/if}}>
-		{{#if this.carousel.template}}
-			{{fileInclude this.carousel.template
-				items = this.carousel.items
-				classModifier = this.carousel.classModifier
-				carouselOptions = this.carousel.carouselOptions
-			}}
-		{{/if}}
-	</ul>
-
-	{{#xif "this.carousel.carouselOptions.hasNavigation === true || this.carousel.carouselOptions.hasPagination === true" }}
-	<div class="swiper-controls">
-		{{#if this.carousel.carouselOptions.previousSlideIcon }}{{{ this.carousel.carouselOptions.previousSlideIcon }}}{{/if}}
-		{{#if this.carousel.carouselOptions.hasPagination }}<div class="swiper-pagination"></div>{{/if}}
-		{{#if this.carousel.carouselOptions.nextSlideIcon }}{{{ this.carousel.carouselOptions.nextSlideIcon }}}{{/if}}
-	</div>
-	{{/xif}}
-	{{#if this.carousel.carouselOptions.hasScrollbar }}
-	<div class="swiper-scrollbar"></div>
-	{{/if}}
-</div>

package/src/accessible-components/checkbox/_checkbox.scss

@@ -1,96 +0,0 @@
-$checkbox-background-color: transparent !default;
-$checkbox-border: 0 !default;
-$checkbox-border-radius: 4px !default;
-$checkbox-font-size: 1rem !default;
-$checkbox-font-weight: normal !default;
-$checkbox-line-height: 1 !default;
-$checkbox-color: $color-charcoal8 !default;
-$checkbox-margin: 15px 0 !default;
-$checkbox-padding: 0 !default;
-$checkbox-text-align: left !default;
-$checkbox-transition: color .15s ease-in-out !default;
-
-$checkbox-label-padding-left: 30px !default;
-$checkbox-label-width: auto !default;
-
-$checkbox-input-background-color: $color-white !default;
-$checkbox-input-border: 1px solid $color-charcoal4 !default;
-$checkbox-input-border-radius: 2px !default;
-$checkbox-input-box-shadow: 0 !default;
-$checkbox-input-checked-background-color: $color-charcoal6 !default;
-$checkbox-input-checked-border: 1px solid $checkbox-input-checked-background-color !default;
-$checkbox-input-checked-color: $color-white !default;
-$checkbox-input-cursor: pointer !default;
-$checkbox-input-font-size: 1.125rem !default;
-$checkbox-input-margin: 0 !default;
-$checkbox-input-position-left: 0 !default;
-$checkbox-input-position-top: -2px !default;
-$checkbox-input-size: 1.25rem !default;
-
-// Focus
-$checkbox-focus-outline: 1px solid rgba($color-charcoal4, .5) !default;
-$checkbox-focus-outline-offset: 5px !default;
-
-
-.checkbox {
-	background-color: $checkbox-background-color;
-	border: $checkbox-border;
-	border-radius: $checkbox-border-radius;
-	color: $checkbox-color;
-	margin: $checkbox-margin;
-	padding: $checkbox-padding;
-	text-align: $checkbox-text-align;
-
-	+ .checkbox {
-		margin-top: 0;
-	}
-
-	label {
-		display: inline-block;
-		font-size: $checkbox-font-size;
-		font-weight: $checkbox-font-weight;
-		line-height: $checkbox-line-height;
-		padding-left: $checkbox-label-padding-left;
-		position: relative;
-		width: $checkbox-label-width;
-
-		&:focus-within {
-			outline: $checkbox-focus-outline;
-			outline-offset: $checkbox-focus-outline-offset;
-		}
-
-		input[type=checkbox] {
-			background: transparent;
-			border-color: $color-white;
-			border-radius: 0;
-			cursor: $checkbox-input-cursor;
-			left: $checkbox-input-position-left;
-			margin: $checkbox-input-margin;
-			position: absolute;
-			top: $checkbox-input-position-top;
-
-			&::before {
-				@include icon-fill;
-				background: $checkbox-input-background-color;
-				border: $checkbox-input-border;
-				border-radius: $checkbox-input-border-radius;
-				box-shadow: $checkbox-input-box-shadow;
-				color: $checkbox-input-background-color;
-				content: '\e920';
-				display: block;
-				height: $checkbox-input-size;
-				text-align: center;
-				transition: $checkbox-transition;
-				width: $checkbox-input-size;
-			}
-
-			&:checked::before {  // sass-lint:disable-line
-				background-color: $checkbox-input-checked-background-color;
-				border: $checkbox-input-checked-border;
-				color: $checkbox-input-checked-color;
-				font-size: $checkbox-input-font-size;
-				line-height: $checkbox-line-height;
-			}
-		}
-	}
-}

package/src/accessible-components/checkbox/checkbox.html

@@ -1,8 +0,0 @@
-{{#if this.field}}
-<div class="checkbox">
-	<label>
-		<input type="checkbox" {{{addAttributes this.field 'type'}}} />
-		{{{this.field.text}}}
-	</label>
-</div>
-{{/if}}