mod-build 3.6.71 → 4.0.0-alpha.1

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

@@ -0,0 +1,524 @@
+$step-header-align-items: center !default;
+$step-header-background-color: $color-charcoal6 !default;
+$step-header-display: block !default;
+$step-header-display-desktop: flex !default;
+$step-header-flex-direction: column !default;
+$step-header-justify-content: center !default;
+$step-header-min-height-desktop: 90px !default;
+$step-header-padding: 15px !default;
+$step-header-padding-desktop: $step-header-padding !default;
+$step-header-text-align: center !default;
+
+$step-header-title-color: $color-white !default;
+$step-header-title-font-size: 1.25rem !default;
+$step-header-title-font-size-desktop: 1.5rem !default;
+$step-header-title-font-weight: 400 !default;
+$step-header-title-line-height: 1.25 !default;
+
+$step-header-subtitle-color: $color-white !default;
+$step-header-subtitle-font-size: .875rem !default;
+$step-header-subtitle-font-size-desktop: 1rem !default;
+$step-header-subtitle-font-weight: 700 !default;
+$step-header-subtitle-line-height: 1.35 !default;
+$step-header-subtitle-margin: 10px 0 0 !default;
+
+$step-header-subtitle-list-color: $color-white !default;
+$step-header-subtitle-list-font-size: .875rem !default;
+$step-header-subtitle-list-font-weight: 400 !default;
+$step-header-subtitle-list-icon: '\e920' !default;
+$step-header-subtitle-list-icon-line-height: 1 !default;
+$step-header-subtitle-list-icon-margin: 0 5px 0 0 !default;
+$step-header-subtitle-list-line-height: 1.35 !default;
+$step-header-subtitle-list-margin: 0 !default;
+
+$step-content-padding: 30px 35px !default;
+$step-content-padding-desktop: 40px 60px 60px !default;
+$step-content-text-align: center !default;
+
+$step-title-color: $color-charcoal8 !default;
+$step-title-font-size: 1.375rem !default;
+$step-title-font-size-desktop: 1.5rem !default;
+$step-title-font-weight: 400 !default;
+$step-title-line-height: 1.25 !default;
+$step-title-margin: 0 0 25px !default;
+
+$step-subtitle-color: $color-charcoal6 !default;
+$step-subtitle-font-size: .875rem !default;
+$step-subtitle-font-size-desktop: 1rem !default;
+$step-subtitle-font-weight: 400 !default;
+$step-subtitle-line-height: 1.35 !default;
+$step-subtitle-margin: 0 !default;
+
+$step-overview-border: 1px solid $color-charcoal1 !default;
+$step-overview-color: $color-charcoal5 !default;
+$step-overview-display: flex !default;
+$step-overview-font-size: .8125rem !default;
+$step-overview-justify-content: space-between !default;
+$step-overview-letter-spacing: .1px !default;
+$step-overview-line-height: 1.35 !default;
+$step-overview-margin: 0 auto 25px !default;
+$step-overview-padding: 8px 0 !default;
+$step-overview-text-align: center !default;
+$step-overview-width: 100% !default;
+
+$step-overview-number-background: $step-overview-color !default;
+$step-overview-number-color: $color-white !default;
+$step-overview-number-font-size: .875rem !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;
+
+$step-fields-width: 100%;
+
+$step-extra-initial-display: none !default;
+
+$step-secure-text-include-border-background-color: $color-ivory5 !default;
+$step-secure-text-include-border-border: 1px solid $color-charcoal1 !default;
+$step-secure-text-include-border-padding: 4px 6px !default;
+$step-secure-text-color: $color-charcoal5 !default;
+$step-secure-text-display: inline-block !default;
+$step-secure-text-font-size: .875rem !default;
+$step-secure-text-font-weight: 700 !default;
+$step-secure-text-margin: 5px auto !default;
+
+$step-focus-outline: 1px solid rgba($color-charcoal4, .5) !default;
+$step-focus-outline-offset: -2px !default;
+
+// First Step
+$first-step-content-align-items-desktop: center !default;
+$first-step-content-display-desktop: flex !default;
+$first-step-content-flex-direction-desktop: column !default;
+$first-step-content-justify-content-desktop: center !default;
+$first-step-content-min-height-desktop: 380px !default;
+$first-step-button-max-width: 200px !default;
+$first-step-button-margin: 10px auto !default;
+$first-step-fields-margin: 0 auto !default;
+$first-step-fields-max-width: 280px !default;
+
+// Form Groups
+$form-position: relative !default;
+$form-group-legend-color: $step-title-color !default;
+$form-group-legend-font-size: $step-title-font-size !default;
+$form-group-legend-font-size-desktop: $step-title-font-size-desktop !default;
+$form-group-legend-font-weight: $step-title-font-weight !default;
+$form-group-legend-line-height: $step-title-line-height !default;
+$form-group-legend-margin: $step-title-margin !default;
+$form-group-legend-padding: 0 !default;
+
+$form-group-margin: 0 !default;
+$form-group-label-color: $color-charcoal5 !default;
+$form-group-label-font-size: 1rem !default;
+$form-group-label-font-size-desktop: 1.125rem !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: 17px !default;
+$form-group-label-in-input-left-position: 15px !default;
+$form-group-label-in-input-z-index: -1 !default;
+
+$form-group-error-message-color: $color-a11y-red !default;
+$form-group-error-message-font-size: .875rem !default;
+$form-group-error-message-margin: -10px 0 10px 2px !default;
+$form-group-error-message-padding: 0 !default;
+$form-group-error-message-text-align: left !default;
+
+$form-group-city-state-color: $color-charcoal4 !default;
+$form-group-city-state-font-size: .75rem !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: $color-charcoal4 !default;
+$form-group-note-font-size: .75rem !default;
+$form-group-note-font-style: italic !default;
+$form-group-note-margin: -7px 0 0 !default;
+
+$form-inprogress-min-height: 510px !default;
+$step-inprogress-content-padding-desktop: $step-content-padding-desktop !default;
+$step-inprogress-content-padding-lg: 60px 40px 40px !default;
+$step-inprogress-content-padding-xl: 70px 60px 60px !default;
+
+$form-inprogress-top-section-padding: 30px 35px 0 !default;
+$form-inprogress-top-section-padding-desktop: 40px 60px 0 !default;
+$form-inprogress-bottom-section-padding-desktop: 0 60px 60px !default;
+$form-inprogress-top-section-padding-lg: 60px 40px 0 !default;
+$form-inprogress-bottom-section-padding-lg: 0 40px 40px !default;
+$form-inprogress-top-section-padding-xl: 70px 60px 0 !default;
+$form-inprogress-bottom-section-padding-xl: 0 60px 60px !default;
+
+.step {
+	flex: 0 0 100%;
+
+	/* Step Header */
+	&__header {
+		background-color: $step-header-background-color;
+		display: $step-header-display;
+		padding: $step-header-padding;
+		text-align: $step-header-text-align;
+	}
+
+	&__header-title {
+		color: $step-header-title-color;
+		font-size: $step-header-title-font-size;
+		font-weight: $step-header-title-font-weight;
+		line-height: $step-header-title-line-height;
+	}
+
+	&__header-subtitle {
+		color: $step-header-subtitle-color;
+		font-size: $step-header-subtitle-font-size;
+		font-weight: $step-header-subtitle-font-weight;
+		line-height: $step-header-subtitle-line-height;
+		margin: $step-header-subtitle-margin;
+	}
+
+	&__header-subtitle-list {
+		list-style: none;
+		margin: $step-header-subtitle-list-margin;
+		padding-left: 0;
+
+		li {
+			color: $step-header-subtitle-list-color;
+			font-size: $step-header-subtitle-list-font-size;
+			font-weight: $step-header-subtitle-list-font-weight;
+			line-height: $step-header-subtitle-list-line-height;
+
+			&:before {
+				content: $step-header-subtitle-list-icon;
+				display: inline-block;
+				font-family: modicons-fill;
+				font-style: normal;
+				font-variant: normal;
+				font-weight: 400;
+				line-height: $step-header-subtitle-list-icon-line-height;
+				margin: $step-header-subtitle-list-icon-margin;
+				text-transform: none;
+			}
+		}
+	}
+
+	/* Step Content */
+	&__content {
+		padding: $step-content-padding;
+		text-align: $step-content-text-align;
+	}
+
+	&__title {
+		color: $step-title-color;
+		font-size: $step-title-font-size;
+		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;
+		font-weight: $step-subtitle-font-weight;
+		line-height: $step-subtitle-line-height;
+		margin: $step-subtitle-margin;
+	}
+
+	&__overview {
+		border-bottom: $step-overview-border;
+		border-top: $step-overview-border;
+		color: $step-overview-color;
+		display: $step-overview-display;
+		font-size: $step-overview-font-size;
+		justify-content: $step-overview-justify-content;
+		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;
+		width: $step-overview-width;
+
+		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;
+	}
+
+	&__fields {
+		width: $step-fields-width;
+	}
+
+	&__secure-text {
+		color: $step-secure-text-color;
+		display: $step-secure-text-display;
+		font-size: $step-secure-text-font-size;
+		font-weight: $step-secure-text-font-weight;
+		margin: $step-secure-text-margin;
+
+		&--border {
+			background-color: $step-secure-text-include-border-background-color;
+			border: $step-secure-text-include-border-border;
+			padding: $step-secure-text-include-border-padding;
+		}
+	}
+
+	&__extra {
+		display: $step-extra-initial-display;
+	}
+
+	&--first {
+		.step__fields {
+			margin: $first-step-fields-margin;
+			max-width: $first-step-fields-max-width;
+		}
+
+		.btn--primary {
+			max-width: $first-step-button-max-width;
+		}
+	}
+
+	&:focus {
+		outline: $step-focus-outline;
+		outline-offset: $step-focus-outline-offset;
+	}
+}
+
+.form {
+	position: $form-position;
+
+	&--disable-step-focus {
+		.step:focus {
+			outline: none;
+			outline-offset: 0;
+		}
+	}
+}
+
+.form-group {
+	margin: $form-group-margin;
+
+	legend {
+		color: $form-group-legend-color;
+		font-size: $form-group-legend-font-size;
+		font-weight: $form-group-legend-font-weight;
+		line-height: $form-group-legend-line-height;
+		margin: $form-group-legend-margin;
+		padding: $form-group-legend-padding;
+	}
+
+	&__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;
+	}
+
+	&__error-message {
+		color: $form-group-error-message-color;
+		font-size: $form-group-error-message-font-size;
+		display: none;
+		margin: $form-group-error-message-margin;
+		padding: $form-group-error-message-padding;
+		text-align: $form-group-error-message-text-align;
+	}
+
+	&__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-in-out, font-size 200ms ease-in-out;
+		user-select: none;
+		z-index: $form-group-label-in-input-z-index;
+	}
+
+	&__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;
+	}
+}
+
+.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;
+		}
+	}
+}
+
+.form-in-progress {
+	.form__top-section {
+		padding: $form-inprogress-top-section-padding;
+	}
+}
+
+@include breakpoint-md {
+	.step {
+		/* Step Header */
+		&__header {
+			align-items: $step-header-align-items;
+			display: $step-header-display-desktop;
+			flex-direction: $step-header-flex-direction;
+			justify-content: $step-header-justify-content;
+			min-height: $step-header-min-height-desktop;
+			padding: $step-header-padding-desktop;
+		}
+
+		&__header-title{
+			font-size: $step-header-title-font-size-desktop;
+		}
+
+		&__header-subtitle {
+			font-size: $step-header-subtitle-font-size-desktop;
+		}
+
+		/* Step Content */
+		&__content {
+			padding: $step-content-padding-desktop;
+		}
+
+		&--first {
+			.step__content {
+				align-items: $first-step-content-align-items-desktop;
+				display: $first-step-content-display-desktop;
+				flex-direction: $first-step-content-flex-direction-desktop;
+				justify-content: $first-step-content-justify-content-desktop;
+				min-height: $first-step-content-min-height-desktop;
+			}
+		}
+
+		&__title {
+			font-size: $step-title-font-size-desktop;
+		}
+
+		&__subtitle {
+			font-size: $step-subtitle-font-size-desktop;
+		}
+	}
+
+	.form-group {
+		legend {
+			font-size: $form-group-legend-font-size-desktop;
+		}
+
+		&__label {
+			font-size: $form-group-label-font-size-desktop;
+		}
+
+		&__label-input {
+			font-size: $form-group-label-font-size-desktop;
+		}
+	}
+
+	.form-in-progress {
+		.step__content {
+			padding: $step-inprogress-content-padding-desktop;
+		}
+
+		.form__top-section {
+			padding: $form-inprogress-top-section-padding-desktop;
+		}
+
+		.form__bottom-section {
+			padding: $form-inprogress-bottom-section-padding-desktop
+		}
+	}
+}
+
+@include breakpoint-lg {
+	.form-in-progress {
+		.swiper--form {
+			min-height: $form-inprogress-min-height;
+		}
+
+		.step__content {
+			padding: $step-inprogress-content-padding-lg;
+		}
+
+		.form__top-section {
+			padding: $form-inprogress-top-section-padding-lg;
+		}
+
+		.form__bottom-section {
+			padding: $form-inprogress-bottom-section-padding-lg
+		}
+	}
+}
+
+@include breakpoint-xl {
+	.form-in-progress {
+		.step__content {
+			padding: $step-inprogress-content-padding-xl;
+		}
+
+		.form__top-section {
+			padding: $form-inprogress-top-section-padding-xl;
+		}
+
+		.form__bottom-section {
+			padding: $form-inprogress-bottom-section-padding-xl
+		}
+	}
+}

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

@@ -0,0 +1,109 @@
+{
+  "zip": {
+    "fieldType": "input",
+    "attributes": {
+      "name": "zip",
+      "id": "zip",
+      "type": "text",
+      "pattern": "[0-9]*",
+      "placeholder": "Enter Zip Code",
+      "maxlength": "5",
+      "data": {
+        "required": "zip"
+      }
+    },
+    "errorMessage": "Please enter a valid zip code.",
+    "labelInInput": "Zip Code"
+  },
+  "firstName": {
+    "fieldType": "input",
+    "attributes": {
+      "name": "firstName",
+      "id": "firstName",
+      "type": "text",
+      "placeholder": "First Name",
+      "maxlength": "30",
+      "data": {
+        "required": "name",
+        "name-min": "2"
+      }
+    },
+    "errorMessage": "Please enter a valid first name.",
+    "labelInInput": "First Name"
+  },
+  "lastName": {
+    "fieldType": "input",
+    "attributes": {
+      "name": "lastName",
+      "id": "lastName",
+      "type": "text",
+      "placeholder": "Last Name",
+      "maxlength": "30",
+      "data": {
+        "required": "name",
+        "name-min": "2"
+      }
+    },
+    "errorMessage": "Please enter a valid last name.",
+    "labelInInput": "Last Name"
+  },
+  "zip1": {
+    "fieldType": "input",
+    "attributes": {
+      "name": "zip1",
+      "id": "zip1",
+      "type": "text",
+      "pattern": "[0-9]*",
+      "placeholder": "Enter Zip Code",
+      "maxlength": "5",
+      "data": {
+        "required": "zip"
+      }
+    },
+    "errorMessage": "Please enter a valid zip code.",
+    "labelInInput": "Zip Code"
+  },
+  "homePhone": {
+    "fieldType": "input",
+    "attributes": {
+      "name": "homePhone",
+      "id": "homePhone",
+      "type": "tel",
+      "placeholder": "Phone Number",
+      "maxlength": "14",
+      "data": {
+        "required": "phone"
+      }
+    },
+    "errorMessage": "Please enter a valid phone number.",
+    "labelInInput": "Phone Number"
+  },
+  "email": {
+    "fieldType": "input",
+    "attributes": {
+      "name": "email",
+      "id": "email",
+      "type": "email",
+      "placeholder": "Email",
+      "data": {
+        "required": "email"
+      }
+    },
+    "errorMessage": "Please enter a valid email address.",
+    "labelInInput": "Email Address"
+  },
+  "address": {
+    "fieldType": "input",
+    "attributes": {
+      "name": "address",
+      "id": "address",
+      "type": "text",
+      "placeholder": "123 Your St.",
+      "data": {
+        "required": "address"
+      }
+    },
+    "errorMessage": "Please enter a valid address.",
+    "labelInInput": "Address"
+  }
+}

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

@@ -0,0 +1,33 @@
+{{#xif "this.stepFields.fieldType === 'radio'"}}
+	{{ fileInclude 'src/accessible-components/radio-button/radio-button.html'
+		field = this.stepFields
+	}}
+{{/xif}}
+{{#xif "this.stepFields.fieldType === 'input'"}}
+	{{ fileInclude 'src/accessible-components/input/input.html'
+		field = this.stepFields
+	}}
+{{/xif}}
+{{#xif "this.stepFields.fieldType === 'textarea'"}}
+	{{ fileInclude 'src/accessible-components/input/textarea.html'
+		field = this.stepFields
+	}}
+{{/xif}}
+{{#xif "this.stepFields.fieldType === 'select'"}}
+	{{ fileInclude 'src/accessible-components/select/select.html'
+		field = this.stepFields
+	}}
+{{/xif}}
+{{#xif "this.stepFields.fieldType === 'checkbox'"}}
+	{{ fileInclude 'src/accessible-components/checkbox/checkbox.html'
+		field = this.stepFields
+	}}
+{{/xif}}
+{{#xif "this.stepFields.fieldType === 'zip-control'"}}
+	{{ fileInclude 'src/accessible-components/zip-control/zip-control.html'
+		field = this.stepFields
+	}}
+{{/xif}}
+{{#xif "this.stepFields.fieldType == 'utility-providers'"}}
+	<div class="utility-provider-wrapper"></div>
+{{/xif}}