mod-build 4.0.21 → 4.0.22-beta.2

package/src/shared-components/select/_select.scss

@@ -0,0 +1,61 @@
+$select-bg-color: transparent !default;
+$select-border: 1px solid $color-charcoal1 !default;
+$select-border-raius: 4px !default;
+$select-box-shadow: inset 2px 1px 2px 0 rgba($color-black, .08), inset -2px 0px 2px 0 rgba($color-black, .08) !default;
+$select-font-size: 16px !default;
+$select-line-height: 1.1875 !default;
+$select-margin: 0 0 15px !default;
+$select-padding: 14px 15px 13px !default;
+$select-text-color: $color-charcoal5 !default;
+$select-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
+
+$select-focus-border: 1px solid $color-charcoal2 !default;
+$select-focus-box-shadow: none !default;
+
+$select-option-bg-color: $color-white !default;
+$select-option-color: $color-charcoal5 !default;
+
+$select-arrow-position-right: 15px !default;
+$select-arrow-position-top: calc(50% - 7px) !default;
+$select-arrow-color: $select-text-color !default;
+
+.select-wrapper {
+	color: $select-text-color;
+	margin: $select-margin;
+	position: relative;
+}
+
+.select {
+	appearance: none;
+	background: $select-bg-color;
+	border: $select-border;
+	border-radius: $select-border-raius;
+	box-shadow: $select-box-shadow;
+	cursor: pointer;
+	font-size: $select-font-size;
+	line-height: $select-line-height;
+	margin: 0;
+	padding: $select-padding;
+	position: relative;
+	transition: $select-transition;
+	width: 100%;
+
+	&:focus {
+		border: $select-focus-border;
+		box-shadow: $select-focus-box-shadow;
+	}
+
+	option {
+		background: $select-option-bg-color;
+		color: $select-option-color;
+	}
+
+	.select-caret {
+		color: $select-arrow-color;
+		margin-top: 0;
+		pointer-events: none;
+		position: absolute;
+		right: $select-arrow-position-right;
+		top: $select-arrow-position-top;
+	}
+}

package/src/shared-components/select/select.html

@@ -0,0 +1,8 @@
+<div class="select-wrapper{{#if this.field.class}} this.field.class{{/if}}">
+	<select class="select" name="{{this.field.name}}" id="{{#if this.field.id}}{{this.field.id}}{{else}}{{this.field.name}}{{/if}}" data-required="nonempty">
+		{{#each this.field.options}}
+			<option value="{{this.value}}">{{this.text}}</option>
+		{{/each}}
+	</select>
+	<span class="select-caret icon icon-caret-down"></span>
+</div>

package/src/shared-components/steps/_steps.scss

@@ -0,0 +1,414 @@
+$step-supertitle-bg-color: $color-blue5 !default;
+$step-supertitle-color: $color-white !default;
+$step-supertitle-font-size: 22px !default;
+$step-supertitle-font-size-mobile: 18px !default;
+$step-supertitle-font-weight: 300 !default;
+$step-supertitle-line-height: 1.36 !default;
+$step-supertitle-padding: 20px !default;
+$step-supertitle-padding-mobile: 15px !default;
+
+$step-supertitle-arrow-animation: AnimateArrowUpDown 10s linear 2s infinite !default;
+$step-supertitle-arrow-background-color: $step-supertitle-bg-color !default;
+$step-supertitle-arrow-color: $step-supertitle-color !default;
+$step-supertitle-arrow-content: '\e900' !default;
+$step-supertitle-arrow-font-size: 22px !default;
+$step-supertitle-arrow-font-family: modicons-basic !default;
+$step-supertitle-arrow-position: absolute !default;
+$step-supertitle-arrow-bottom: -24px !default;
+$step-supertitle-arrow-left: 50% !default;
+$step-supertitle-arrow-transform: translateX(-50%) !default;
+$step-supertitle-arrow-container-height: 75px !default;
+$step-supertitle-arrow-container-width: 140px !default;
+$step-supertitle-arrow-container-position: absolute !default;
+$step-supertitle-arrow-container-bottom: -40px !default;
+$step-supertitle-arrow-container-left: 50% !default;
+$step-supertitle-arrow-container-transform: translateX(-50%) !default;
+$step-supertitle-arrow-container-z-index: -1 !default;
+$step-supertitle-arrow-border-radius: 0 0 $step-supertitle-arrow-container-height $step-supertitle-arrow-container-height !default;
+$step-animated-arrow-title-margin-top: 75px !default;
+
+$step-title-container-bg-color: transparent !default;
+$step-title-container-margin: 0 !default;
+$step-title-container-padding: 0 20px !default;
+$step-title-container-text-align: center !default;
+
+$step-title-color: $color-blue5 !default;
+$step-title-font-size: 22px !default;
+$step-title-font-size-mobile: $step-title-font-size !default;
+$step-title-font-weight: bold !default;
+$step-title-line-height: 1.55 !default;
+$step-title-margin: 0 !default;
+
+$step-subtitle-color: $color-charcoal5 !default;
+$step-subtitle-font-size: 16px !default;
+$step-subtitle-font-size-mobile: $step-subtitle-font-size !default;
+$step-subtitle-font-weight: normal !default;
+$step-subtitle-line-height: $step-title-line-height !default;
+$step-subtitle-margin: 5px 0 25px !default;
+
+$step-subtitle-list-color: $color-white !default;
+$step-subtitle-list-font-size: 14px !default;
+$step-subtitle-list-font-weight: normal !default;
+$step-subtitle-list-icon: '\e920' !default;
+$step-subtitle-list-icon-margin: 0 10px 0 0 !default;
+$step-subtitle-list-line-height: 1.29 !default;
+$step-subtitle-list-margin: 0 !default;
+
+$step-overview-border: 1px solid $color-charcoal1 !default;
+$step-overview-color: $color-charcoal5 !default;
+$step-overview-font-size: 13px !default;
+$step-overview-letter-spacing: .1px !default;
+$step-overview-line-height: 1.38 !default;
+$step-overview-margin: 0 auto 20px !default;
+$step-overview-padding: 8px 0 !default;
+$step-overview-text-align: center !default;
+
+$step-overview-number-background: $step-overview-color !default;
+$step-overview-number-color: $color-white !default;
+$step-overview-number-font-size: 14px !default;
+$step-overview-number-font-weight: 700 !default;
+$step-overview-number-height: 22px !default;
+$step-overview-number-line-height: $step-overview-number-height !default;
+$step-overview-number-margin-right: 5px !default;
+$step-overview-number-width: $step-overview-number-height !default;
+
+$form-group-margin: 0 !default;
+$form-group-label-color: $color-charcoal5 !default;
+$form-group-label-font-size: 17px !default;
+$form-group-label-font-weight: normal !default;
+$form-group-label-margin: 10px 0 15px !default;
+
+$form-group-label-in-input-cursor: text !default;
+$form-group-label-in-input-top-position: 18px !default;
+$form-group-label-in-input-left-position: 17px !default;
+$form-group-label-in-input-z-index: -1 !default;
+
+$label-tool-tip-cursor: help !default;
+$label-tool-tip-bg-color: $color-charcoal5 !default;
+$label-tool-tip-border-radius: 6px !default;
+$label-tool-tip-color: $color-white !default;
+$label-tool-tip-font-size: 14px !default;
+$label-tool-tip-line-height: 1.2 !default;
+$label-tool-tip-margin-left: 15px !default;
+$label-tool-tip-padding: 15px !default;
+$label-tool-tip-width: 280px !default;
+$label-tool-tip-z-index: 10 !default;
+$label-tool-tip-arrow-margin: -5px 0 0 -5px !default;
+$label-tool-tip-arrow-size: 10px !default;
+
+$form-group-error-message-color: $color-red5 !default;
+$form-group-error-message-font-size: 14px !default;
+$form-group-error-message-margin: -10px 0 10px 2px !default;
+
+$form-group-city-state-color: $color-charcoal4 !default;
+$form-group-city-state-font-size: 13px !default;
+$form-group-city-state-font-weight: bold !default;
+$form-group-city-state-margin: -10px 0 0 !default;
+$form-group-city-state-padding: 0 2px 0 0 !default;
+$form-group-city-state-text-align: right !default;
+
+$form-group-note-color: #8a8a8a !default;
+$form-group-note-font-size: 11px !default;
+$form-group-note-font-style: italic !default;
+$form-group-note-margin: -7px 0 0 !default;
+
+@keyframes AnimateArrowUpDown {
+	0%,
+	20%,
+	40% {
+		bottom: -26%;
+		opacity: 1;
+	}
+
+	10%,
+	30%,
+	50% {
+		bottom: -10%;
+		opacity: 0;
+	}
+
+	60% {
+		bottom: -26%;
+		opacity: 1;
+	}
+}
+
+.step {
+	flex: 0 0 100%;
+
+	&__supertitle {
+		background-color: $step-supertitle-bg-color;
+		color: $step-supertitle-color;
+		font-size: $step-supertitle-font-size-mobile;
+		font-weight: $step-supertitle-font-weight;
+		line-height: $step-supertitle-line-height;
+		padding: $step-supertitle-padding-mobile;
+	}
+
+	&__title-container {
+		background-color: $step-title-container-bg-color;
+		margin: $step-title-container-margin;
+		padding: $step-title-container-padding;
+		text-align: $step-title-container-text-align;
+	}
+
+	&__title {
+		color: $step-title-color;
+		font-size: $step-title-font-size-mobile;
+		font-weight: $step-title-font-weight;
+		line-height: $step-title-line-height;
+		margin: $step-title-margin;
+	}
+
+	&__subtitle {
+		color: $step-subtitle-color;
+		font-size: $step-subtitle-font-size-mobile;
+		font-weight: $step-subtitle-font-weight;
+		line-height: $step-subtitle-line-height;
+		margin: $step-subtitle-margin;
+	}
+
+	&__subtitle-list {
+		list-style: none;
+		margin: $step-subtitle-list-margin;
+		padding-left: 0;
+
+		li {
+			color: $step-subtitle-list-color;
+			font-size: $step-subtitle-list-font-size;
+			font-weight: $step-subtitle-list-font-weight;
+			line-height: $step-subtitle-list-line-height;
+
+			&:before {
+				content: $step-subtitle-list-icon;
+				display: inline-block;
+				font-family: modicons-fill;
+				font-style: normal;
+				font-variant: normal;
+				font-weight: 400;
+				line-height: 1;
+				margin: $step-subtitle-list-icon-margin;
+				text-transform: none;
+			}
+		}
+	}
+
+	&__overview {
+		border-bottom: $step-overview-border;
+		border-top: $step-overview-border;
+		color: $step-overview-color;
+		font-size: $step-overview-font-size;
+		letter-spacing: $step-overview-letter-spacing;
+		line-height: $step-overview-line-height;
+		margin: $step-overview-margin;
+		padding: $step-overview-padding;
+		text-align: $step-overview-text-align;
+
+		span {
+			padding: 0;
+		}
+	}
+
+	&__overview-number {
+		background: $step-overview-number-background;
+		border-radius: 100%;
+		color: $step-overview-number-color;
+		display: inline-block;
+		font-size: $step-overview-number-font-size;
+		font-weight: $step-overview-number-font-weight;
+		height: $step-overview-number-height;
+		line-height: $step-overview-number-line-height;
+		margin-right: $step-overview-number-margin-right;
+		text-align: center;
+		width: $step-overview-number-width;
+	}
+}
+
+.form-group {
+	margin: $form-group-margin;
+
+	&__label {
+		color: $form-group-label-color;
+		font-size: $form-group-label-font-size;
+		font-weight: $form-group-label-font-weight;
+		margin: $form-group-label-margin;
+	}
+
+	&__label-input {
+		color: $form-group-label-color;
+		cursor: $form-group-label-in-input-cursor;
+		font-size: $form-group-label-font-size;
+		font-weight: $form-group-label-font-weight;
+		left: $form-group-label-in-input-left-position;
+		position: absolute;
+		top: $form-group-label-in-input-top-position;
+		transition: color 200ms ease, font-size 200ms ease;
+		user-select: none;
+		z-index: $form-group-label-in-input-z-index;
+	}
+
+	&__error-message {
+		color: $form-group-error-message-color;
+		font-size: $form-group-error-message-font-size;
+		display: none;
+		margin: $form-group-error-message-margin;
+	}
+
+	&__city-state {
+		color: $form-group-city-state-color;
+		font-size: $form-group-city-state-font-size;
+		font-weight: $form-group-city-state-font-weight;
+		margin: $form-group-city-state-margin;
+		padding: $form-group-city-state-padding;
+		text-align: $form-group-city-state-text-align;
+	}
+
+	&__note {
+		color: $form-group-note-color;
+		display: inline-block;
+		font-size: $form-group-note-font-size;
+		font-style: $form-group-note-font-style;
+		margin: $form-group-note-margin;
+	}
+
+	&__label-tooltip {
+		cursor: $label-tool-tip-cursor;
+		position: relative;
+
+		&-text {
+			background: $label-tool-tip-bg-color;
+			border-radius: $label-tool-tip-border-radius;
+			color: $label-tool-tip-color;
+			display: none;
+			font-size: $label-tool-tip-font-size;
+			left: 100%;
+			line-height: $label-tool-tip-line-height;
+			margin-left: $label-tool-tip-margin-left;
+			padding: $label-tool-tip-padding;
+			position: absolute;
+			text-align: center;
+			top: 50%;
+			transform: translateY(-50%);
+			width: $label-tool-tip-width;
+			z-index: $label-tool-tip-z-index;
+
+			&::before {
+				background: $label-tool-tip-bg-color;
+				content: '';
+				display: block;
+				height: $label-tool-tip-arrow-size;
+				left: 0;
+				margin: $label-tool-tip-arrow-margin;
+				position: absolute;
+				top: 50%;
+				transform: rotate(-45deg);
+				width: $label-tool-tip-arrow-size;
+			}
+		}
+
+		&:hover {
+			.form-group__label-tooltip-text {
+				display: block;
+			}
+		}
+	}
+}
+
+.has-error {
+	.form-group__error-message {
+		display: block;
+	}
+
+	.form-group__label-input {
+		color: $form-group-error-message-color;
+	}
+
+	&:focus-within {
+		.form-group__label-input {
+			color: $form-group-error-message-color;
+		}
+	}
+}
+
+.swiper--dynamic-step-height {
+	.step {
+		.step-inner {
+			max-height: 0;
+			opacity: 0;
+			transition: opacity 250ms 250ms ease-in;
+		}
+
+		&--active .step-inner {
+			max-height: 999px;
+			opacity: 1;
+		}
+	}
+}
+
+.disableAutofill {
+	.step-inner {
+		visibility: hidden;
+	}
+
+	.step--active {
+		.step-inner {
+			visibility: visible;
+		}
+	}
+}
+
+@include breakpoint-sm {
+	.step {
+		&__supertitle {
+			font-size: $step-supertitle-font-size;
+			padding: $step-supertitle-padding;
+		}
+
+		&__title {
+			font-size: $step-title-font-size;
+		}
+
+		&__subtitle {
+			font-size: $step-subtitle-font-size;
+		}
+	}
+}
+
+@include breakpoint-lg {
+	.step {
+		&__supertitle {
+			&--show-animated-arrow {
+				position: relative;
+
+				&:before {
+					animation: $step-supertitle-arrow-animation;
+					bottom: $step-supertitle-arrow-bottom;
+					color: $step-supertitle-arrow-color;
+					content: $step-supertitle-arrow-content;
+					font-size: $step-supertitle-arrow-font-size;
+					font-family: $step-supertitle-arrow-font-family;
+					left: $step-supertitle-arrow-left;
+					position: $step-supertitle-arrow-position;
+					transform: $step-supertitle-arrow-transform;
+				}
+
+				&:after {
+					background-color: $step-supertitle-arrow-background-color;
+					border-radius: $step-supertitle-arrow-border-radius;
+					bottom: $step-supertitle-arrow-container-bottom;
+					content: '';
+					height: $step-supertitle-arrow-container-height;
+					left: $step-supertitle-arrow-container-left;
+					position: $step-supertitle-arrow-container-position;
+					transform: $step-supertitle-arrow-container-transform;
+					width: $step-supertitle-arrow-container-width;
+					z-index: $step-supertitle-arrow-container-z-index;
+				}
+
+				+ .step__title {
+					margin-top: $step-animated-arrow-title-margin-top;
+				}
+			}
+		}
+	}
+}

package/src/shared-components/steps/defaultFormFieldConfig.json

@@ -0,0 +1,64 @@
+{
+  "zip": {
+    "fieldType": "input",
+    "type": "tel",
+    "placeholder": "Enter Zip Code",
+    "required": "zip",
+    "maxLength": "5",
+    "errorMessage": "Please enter a valid zip code."
+  },
+  "firstName": {
+    "fieldType": "input",
+    "name": "firstName",
+    "min": "2",
+    "maxLength": "30",
+    "type": "text",
+    "placeholder": "First Name",
+    "required": "name",
+    "errorMessage": "Please enter a valid first name."
+  },
+  "lastName": {
+    "fieldType": "input",
+    "name": "lastName",
+    "min": "2",
+    "maxLength": "30",
+    "type": "text",
+    "placeholder": "Last Name",
+    "required": "name",
+    "errorMessage": "Please enter a valid last name."
+  },
+  "zip1": {
+    "fieldType": "input",
+    "name": "zip1",
+    "type": "tel",
+    "placeholder": "Enter Zip Code",
+    "required": "zip",
+    "maxLength": "5",
+    "errorMessage": "Please enter a valid zip code."
+  },
+  "homePhone": {
+    "fieldType": "input",
+    "name": "homePhone",
+    "type": "tel",
+    "placeholder": "Phone Number",
+    "required": "phone",
+    "maxLength": "14",
+    "errorMessage": "Please enter a valid phone number."
+  },
+  "email": {
+    "fieldType": "input",
+    "name": "email",
+    "type": "email",
+    "placeholder": "Email",
+    "required": "email",
+    "errorMessage": "Please enter a valid email address."
+  },
+  "address": {
+    "fieldType": "input",
+    "name": "address",
+    "type": "text",
+    "placeholder": "123 Your St.",
+    "required": "address",
+    "errorMessage": "Please enter a valid address."
+  }
+}

package/src/shared-components/steps/step-fields.html

@@ -0,0 +1,36 @@
+{{#xif "this.stepFields.fieldType === 'radio'"}}
+	{{ fileInclude 'src/shared-components/radio-button/radio-button.html'
+		field = this.stepFields
+	}}
+{{/xif}}
+
+{{#xif "this.stepFields.fieldType === 'input'"}}
+	{{ fileInclude 'src/shared-components/input/input.html'
+		field = this.stepFields
+	}}
+{{/xif}}
+{{#xif "this.stepFields.fieldType === 'textarea'"}}
+	{{#if this.stepFields.labelInInput}}<div class="form-input-group form-input-group--includes-label">{{/if}}
+	{{ fileInclude 'src/shared-components/textarea/textarea.html'
+		field = this.stepFields
+	}}
+	{{#if this.stepFields.labelInInput}}<label class="form-group__label-input">{{{this.stepFields.labelInInput}}}</label></div>{{/if}}
+{{/xif}}
+{{#xif "this.stepFields.fieldType === 'select'"}}
+	{{ fileInclude 'src/shared-components/select/select.html'
+		field = this.stepFields
+	}}
+{{/xif}}
+{{#xif "this.stepFields.fieldType === 'checkbox'"}}
+	{{ fileInclude 'src/shared-components/checkbox/checkbox.html'
+		field = this.stepFields
+	}}
+{{/xif}}
+{{#xif "this.stepFields.fieldType === 'zip-control'"}}
+	{{ fileInclude 'src/shared-components/zip-control/zip-control.html'
+		field = this.stepFields
+	}}
+{{/xif}}
+{{#xif "this.stepFields.fieldType == 'utility-providers'"}}
+	<div class="utility-provider-wrapper"></div>
+{{/xif}}