mod-build 4.0.91 → 4.0.92

package/src/shared-components/call-tracking/_call-tracking.scss

@@ -0,0 +1,311 @@
+$call-button-bg-color: #19e38f !default;
+$call-button-border-color: $call-button-bg-color !default;
+$call-button-border-radius: 2px !default;
+$call-button-margin: 15px auto 9px !default;
+$call-button-padding: 10px 21px !default;
+$call-button-font-size: 1.5rem !default;
+$call-button-font-weight: 700 !default;
+$call-button-gap: 8px !default;
+$call-button-text-color: $color-black !default;
+$call-button-width: 10.9375rem !default;
+$call-button-icon-width: 1.25rem !default;
+$call-button-display: none !default;
+$step-call-tracking-header-background-color: none !default;
+$step-header-display: none;
+$step-call-tracking-header-display: block !default;
+$step-call-tracking-header-controls-color: $color-white !default;
+$step-call-tracking-header-controls-display: block !default;
+$step-call-tracking-header-controls-md-display: none !default;
+$step-call-tracking-header-controls-font-size: 1.25rem !default;
+$step-call-tracking-header-controls-font-weight: 400 !default;
+$step-call-tracking-header-controls-margin: 0 !default;
+$step-call-tracking-header-call-link-color: $step-call-tracking-header-controls-color !default;
+$step-call-tracking-header-call-link-text-decoration: underline !default;
+$step-call-tracking-header-call-link-underline-offset: 2px !default;
+$step-call-tracking-header-call-icon-filter: invert(1) !default;
+$step-call-tracking-header-call-icon-width: auto !default;
+$form-call-tracking-controls-display: none !default;
+$form-in-progress-call-tracking-controls-display: block !default;
+$form-in-progress-call-tracking-controls-text-color: $color-black !default;
+$form-in-progress-call-tracking-controls-line-height: 1.5 !default;
+$form-in-progress-call-tracking-controls-margin: 0 auto !default;
+$form-in-progress-call-tracking-controls-padding: 0 16px 26px !default;
+$form-in-progress-call-tracking-controls-text-align: center !default;
+$form-in-progress-call-number-color: $color-black !default;
+$form-in-progress-call-number-text-decoration: underline !default;
+$form-in-progress-call-number-text-underline-offset: 2px !default;
+$form-in-progress-call-text-margin: 15px !default;
+$form-in-progress-call-icon-margin: 0 3px 0 0 !default;
+$form-in-progress-call-icon-width: 12px !default;
+$header-call-md-font-size: 1rem !default;
+$header-call-xl-font-size: 1.125rem !default;
+$step-header-md-display: flex !default;
+$step-call-tracking-header-md-display: none !default;
+$form-in-progress-call-tracking-controls-md-display: none !default;
+$hero-title-display: none !default;
+$hero-subtitle-display: none !default;
+$hero-call-tracking-title-display: block !default;
+$hero-call-tracking-subtitle-display: block !default;
+$hero-title-md-display: block !default;
+$hero-subtitle-md-display: block !default;
+$hero-call-tracking-title-md-display: none !default;
+$hero-call-tracking-subtitle-md-display: none !default;
+$hero-call-tracking-phone-controls-md-display: none !default;
+$hero-call-tracking-phone-controls-display: block !default;
+$header-call-tracking-controls-md-display: block !default;
+$header-call-tracking-controls-display: none !default;
+
+.call-tracking-controls {
+	display: none;
+}
+
+.hero {
+	&__header {
+		.hero__subtitle-call-button,
+		.hero__subtitle-call-button,
+		.hero__title--call-tracking {
+			display: none;
+		}
+	}
+}
+
+.step {
+	&__header {
+		&--call-tracking {
+			display: none;
+		}
+	}
+}
+
+.call-tracking {
+	.hero {
+		.call-tracking-controls {
+			display: $hero-call-tracking-phone-controls-display;
+		}
+
+		&__header {
+			.hero__title {
+				display: $hero-title-display;
+			}
+
+			.hero__subtitle {
+				display: $hero-subtitle-display;
+			}
+
+			.hero__title--call-tracking {
+				display: $hero-call-tracking-title-display;
+			}
+
+			.hero__subtitle-call-button {
+				display: $hero-call-tracking-subtitle-display;
+			}
+
+			.call-button {
+				align-items: center;
+				background-color: $call-button-bg-color;
+				border: 1px solid $call-button-border-color;
+				border-radius: $call-button-border-radius;
+				color: $call-button-text-color;
+				display: $call-button-display;
+				font-size: $call-button-font-size;
+				font-weight: $call-button-font-weight;
+				gap: $call-button-gap; // sass-lint:disable-line no-misspelled-properties
+				justify-content: center;
+				margin: $call-button-margin;
+				padding: $call-button-padding;
+				position: relative;
+				width: $call-button-width;
+			}
+
+			.call-icon {
+				width: $call-button-icon-width;
+			}
+		}
+	}
+
+	.step__supertitle {
+		display: $step-header-display;
+
+		&--call-tracking {
+			background-color: $step-call-tracking-header-background-color;
+			display: $step-call-tracking-header-display;
+		}
+
+		.call-tracking-controls {
+			// sass-lint:disable-line class-name-format
+			color: $step-call-tracking-header-controls-color;
+			display: $step-call-tracking-header-controls-display;
+			font-size: $step-call-tracking-header-controls-font-size;
+			font-weight: $step-call-tracking-header-controls-font-weight;
+			margin: $step-call-tracking-header-controls-margin;
+		}
+
+		.call-link {
+			color: $step-call-tracking-header-call-link-color;
+			text-decoration: $step-call-tracking-header-call-link-text-decoration;
+			text-underline-offset: $step-call-tracking-header-call-link-underline-offset; // sass-lint:disable-line no-misspelled-properties
+		}
+
+		.call-icon {
+			filter: $step-call-tracking-header-call-icon-filter;
+			width: $step-call-tracking-header-call-icon-width;
+		}
+	}
+
+	.form {
+		.call-tracking-controls {
+			display: $form-call-tracking-controls-display;
+		}
+	}
+
+	.form {
+		&--inverted {
+			.call-tracking-controls {
+				// sass-lint:disable-line class-name-format
+				color: $form-in-progress-call-tracking-controls-text-color;
+				display: $form-in-progress-call-tracking-controls-display;
+				line-height: $form-in-progress-call-tracking-controls-line-height;
+				margin: $form-in-progress-call-tracking-controls-margin;
+				padding: $form-in-progress-call-tracking-controls-padding;
+				text-align: $form-in-progress-call-tracking-controls-text-align;
+
+				.form-call-number,
+				.call-number {
+					color: $form-in-progress-call-number-color;
+					text-decoration: $form-in-progress-call-number-text-decoration;
+					text-underline-offset: $form-in-progress-call-number-text-underline-offset; // sass-lint:disable-line no-misspelled-properties
+				}
+
+				.call-text {
+					margin-left: $form-in-progress-call-text-margin;
+				}
+
+				.call-icon {
+					margin: $form-in-progress-call-icon-margin;
+					width: $form-in-progress-call-icon-width;
+				}
+
+				a {
+					color: inherit;
+				}
+			}
+		}
+	}
+
+	.header {
+		.call-tracking-controls {
+			display: $header-call-tracking-controls-display;
+		}
+	}
+
+	@include breakpoint-md {
+		.hero {
+			.call-tracking-controls {
+				display: $hero-call-tracking-phone-controls-md-display;
+			}
+
+			&__header {
+				.hero__title {
+					display: $hero-title-md-display;
+				}
+
+				.hero__subtitle {
+					display: $hero-subtitle-md-display;
+				}
+
+				.hero__title--call-tracking {
+					display: $hero-call-tracking-title-md-display;
+				}
+
+				.hero__subtitle-call-button {
+					display: $hero-call-tracking-subtitle-md-display;
+				}
+			}
+		}
+
+		.header {
+			.call-tracking-controls {
+				display: $header-call-tracking-controls-md-display;
+			}
+
+			&__call {
+				font-size: $header-call-md-font-size;
+			}
+		}
+
+		.step__supertitle {
+			display: $step-header-md-display;
+
+			&--call-tracking {
+				display: $step-call-tracking-header-md-display;
+			}
+
+			.call-tracking-controls {
+				display: $step-call-tracking-header-controls-md-display;
+			}
+		}
+
+		.form {
+			&--inverted {
+				.call-tracking-controls {
+					// sass-lint:disable-line class-name-format
+					display: $form-in-progress-call-tracking-controls-md-display;
+				}
+			}
+		}
+	}
+
+	@include breakpoint-xl {
+		.header {
+			&__call {
+				font-size: $header-call-xl-font-size;
+			}
+		}
+	}
+}
+
+@mixin darkmode($text-color) {
+	.header {
+		&__call {
+			color: $text-color;
+		}
+	}
+
+	.form {
+		&--inverted {
+			.call-tracking-controls {
+				color: $text-color;
+
+				.form-call-number,
+				.call-number,
+				.call-text {
+					color: $text-color;
+				}
+
+				.call-icon {
+					filter: invert(1);
+				}
+			}
+		}
+	}
+
+	@include breakpoint-lg {
+		.header {
+			&__call-icon {
+				filter: invert(1);
+			}
+		}
+	}
+}
+
+@if mixin-exists(dark-mode) {
+	@include dark-mode {
+		@include darkmode($text-color);
+	}
+}
+
+@if mixin-exists(theme-dark) {
+	@include theme-dark {
+		@include darkmode($text-color)
+	}
+}

package/src/shared-components/call-tracking/call-tracking-icon.html

@@ -0,0 +1,8 @@
+{{#if this.callTracking.header.picture}}
+	{{ fileInclude 'src/accessible-components/picture/picture.html'
+		picture = this.callTracking.header.picture
+		class = this.class
+	}}
+{{else}}
+	<img class="{{this.class}}" src="/accessible-components/call-tracking/phone.svg" aria-hidden="true"/>
+{{/if}}

package/src/shared-components/call-tracking/call-tracking.html

@@ -0,0 +1,81 @@
+{{#if this.callTracking}}
+	{{#if isHeroTitle}}
+		<h1 class="hero__title hero__title--call-tracking" id="page-title" data-template="hero-headline"
+			data-theme-template="title">
+			{{this.callTracking.hero.title}}
+		</h1>
+	{{else}}
+		{{#if this.isStepHeader}}
+			<div class="step__header--call-tracking step__header">
+		{{else}}
+			<div class="call-tracking-controls">
+		{{/if}}
+		{{#if this.isHero}}
+			<a class="call-button pulse" href="tel:{{this.callTracking.defaultPhoneNumber}}">
+				{{ fileInclude 'src/accessible-components/call-tracking/call-tracking-icon.html'
+					class='call-icon'
+				}}
+				{{{this.callTracking.hero.button}}}
+			</a>
+		{{/if}}
+
+		{{#if this.isStepHeader}}
+			{{#unless this.callTracking.stepHeader.title}}
+				<div class="step__header--title-call step__header-title visible-xs">
+					<p class="call-text">{{{this.callTracking.form.title}}}</p>
+					{{ fileInclude 'src/accessible-components/call-tracking/call-tracking-icon.html'
+						class='call-icon'
+					}}
+					<a class="call-link" href="tel:{{this.callTracking.defaultPhoneNumber}}">
+						{{{this.callTracking.stepHeader.link.beforeNumber}}}
+						<span class="step__header-call-number">
+							{{formatPhoneNo this.callTracking.defaultPhoneNumber}}
+						</span>
+						{{{this.callTracking.stepHeader.link.afterNumber}}}
+					</a>
+				</div>
+			{{else}}
+				<p class="call-text step__header-title">{{{this.callTracking.stepHeader.title}}}</p>
+			{{/unless}}
+		{{/if}}
+
+		{{#if this.isForm}}
+			<p class="call-text">{{{this.callTracking.form.title}}}</p>
+			<div class="form-call-number">
+				{{ fileInclude 'src/accessible-components/call-tracking/call-tracking-icon.html'
+					class='call-icon'
+				}}
+				<a class="call-link form-call-link">
+					<span class="form-call-number">
+						{{formatPhoneNo this.callTracking.defaultPhoneNumber}}
+					</span>
+				</a>
+			</div>
+		{{/if}}
+
+		{{#if this.isHeader}}
+			<a class="header__call-button visible-sm visible-md" href="tel:{{this.callTracking.defaultPhoneNumber}}">
+				{{fileInclude 'src/accessible-components/call-tracking/call-tracking-icon.html'
+					class='header__call-icon'
+				}}
+				{{{this.callTracking.header.button}}}
+			</a>
+			<div class="header__call hidden visible-lg-up">
+				{{fileInclude 'src/accessible-components/call-tracking/call-tracking-icon.html'
+					class='header__call-icon'
+				}}
+				{{{this.callTracking.header.title}}}
+				<a class="header__call-link" href="tel:{{this.callTracking.defaultPhoneNumber}}">
+					<span class="header__call-number">
+						{{formatPhoneNo this.callTracking.defaultPhoneNumber}}
+					</span>
+				</a>
+			</div>
+		{{/if}}
+		{{#if this.isStepHeader}}
+			</div>
+		{{else}}
+			</div>
+		{{/if}}
+	{{/if}}
+{{/if}}

package/src/shared-components/call-tracking/phone.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" standalone="no"?>
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="17" height="20" viewBox="0 0 17 20" preserveAspectRatio="xMidYMid meet">
+    <g transform="translate(0,20) scale(0.1,-0.1)" fill="#000000" stroke="none">
+        <path d="M10 181 c-5 -11 -10 -28 -10 -39 0 -25 55 -106 85 -126 31 -20 74 -21 82 -1 7 19 -26 58 -44 51 -21 -8 -43 4 -58 34 -10 20 -11 30 -3 38 9 9 8 18 0 37 -14 30 -37 33 -52 6z"/>
+    </g>
+</svg>

package/src/shared-components/card-button/_card-button.scss

@@ -0,0 +1,49 @@
+$card-btn-wrapper-flex-wrap: wrap !default;
+
+$card-btn-animation: none !default;
+$card-btn-bg: $color-white !default;
+$card-btn-border-color: $color-charcoal1 !default;
+$card-btn-border-radius: 4px !default;
+$card-btn-border-width: 1px !default;
+$card-btn-box-shadow: 0 3px 0 0 $color-charcoal1, 0 5px 7px 0 rgba($color-black, .1) !default;
+$card-btn-flex-property: 0 0 45% !default;
+$card-btn-margin: 0 7px 15px !default;
+$card-btn-max-width: 165px !default;
+$card-btn-padding: 15px !default;
+$card-btn-transition: all .15s ease !default;
+
+$card-btn-hover-bg: $color-blue0 !default;
+$card-btn-hover-border-color: $color-blue2 !default;
+$card-btn-hover-box-shadow: 0 3px 0 0 $color-blue2, 0 5px 7px 0 rgba($color-black, .1) !default;
+
+.card-button-wrapper {
+	display: flex;
+	flex-wrap: $card-btn-wrapper-flex-wrap;
+	justify-content: center;
+}
+
+.card-button {
+	animation: $card-btn-animation;
+	background: $card-btn-bg;
+	border: $card-btn-border-width solid $card-btn-border-color;
+	border-radius: $card-btn-border-radius;
+	box-shadow: $card-btn-box-shadow;
+	cursor: pointer;
+	flex: $card-btn-flex-property;
+	margin: $card-btn-margin;
+	max-width: $card-btn-max-width;
+	padding: $card-btn-padding;
+	position: relative;
+	transition: $card-btn-transition;
+
+	&:focus,
+	&:hover {
+		background: $card-btn-hover-bg;
+		border-color: $card-btn-hover-border-color;
+		box-shadow: $card-btn-hover-box-shadow;
+	}
+
+	.tile--icon .tile__text::before { // sass-lint:disable-line
+		border: none;
+	}
+}

package/src/shared-components/card-button/card-button.html

@@ -0,0 +1,9 @@
+<div class="card-button-wrapper">
+{{#each this.field.options}}
+	<button class="card-button{{#if this.class}} {{this.class}}{{/if}}">
+		{{fileInclude 'src/shared-components/tile/tile.html'
+			field = this
+		}}
+	</button>
+{{/each}}
+</div>

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

@@ -0,0 +1,106 @@
+$swiper-margin-top: 0 !default;
+$swiper-padding-top: 0 !default;
+
+$swiper-controls-padding: 50px 15px !default;
+$swiper-controls-padding-mobile: 30px 15px !default;
+$swiper-navigation-color: $color-charcoal2 !default;
+$swiper-pagination-margin: 0 10px !default;
+$swiper-pagination-bottom-alignment: 0 !default;
+$swiper-pagination-bullet-bg: 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-bg: transparent !default;
+$swiper-pagination-bullet-active-bg: $swiper-navigation-color !default;
+$swiper-pagination-bullet-active-border: none !default;
+
+$swiper-scrollbar-bg-color: $color-ivory5 !default;
+$swiper-scrollbar-drag-color: $color-blue5 !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-mobile;
+
+		i.icon {
+			color: $swiper-navigation-color;
+			cursor: pointer;
+		}
+
+		.swiper-pagination {
+			margin: $swiper-pagination-margin;
+			position: relative;
+
+			&-bullet {
+				background-color: $swiper-pagination-bullet-bg;
+				border: $swiper-pagination-bullet-border;
+				height: $swiper-pagination-bullet-height;
+				opacity: 1;
+				transition: all .15s ease-in-out;
+				width: $swiper-pagination-bullet-width;
+
+				&:active, &:focus {
+					outline: 0;
+				}
+
+				&-active {
+					background-color: $swiper-pagination-bullet-active-bg;
+					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-bg-color;
+		height: $swiper-scrollbar-height;
+
+		&-drag {
+			background-color: $swiper-scrollbar-drag-color;
+			height: 100%;
+			width: 100%;
+		}
+	}
+}
+
+@include breakpoint-sm {
+	.swiper .swiper-controls {
+		padding: $swiper-controls-padding;
+	}
+}
+
+@include breakpoint-lg {
+	.swiper {
+		&-controls {
+			.swiper-pagination {
+				&-bullet {
+					&:hover {
+						background-color: $swiper-pagination-bullet-hover-bg;
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,23 @@
+<div id="{{ this.carousel.carouselOptions.swiperId }}" class="swiper{{#if this.carousel.carouselOptions.additionalSwiperClass }} {{ this.carousel.carouselOptions.additionalSwiperClass }}{{/if}}">
+	<ul class="swiper-wrapper"{{#if this.carousel.carouselOptions.swiperWrapperId}} id="{{this.carousel.carouselOptions.swiperWrapperId}}"{{/if}}>
+		{{#if this.carousel.template}}
+			{{fileInclude this.carousel.template
+				items = this.carousel.items
+				classModifier = this.carousel.classModifier
+				carouselOptions = this.carousel.carouselOptions
+				textAlignment = this.carousel.textAlignment
+			}}
+		{{/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>