mod-build 4.0.49 → 4.0.50-beta.2

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

@@ -1,311 +0,0 @@
-$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

@@ -1,8 +0,0 @@
-{{#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

@@ -1,81 +0,0 @@
-{{#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

@@ -1,6 +0,0 @@
-<?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

@@ -1,49 +0,0 @@
-$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

@@ -1,9 +0,0 @@
-<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

@@ -1,106 +0,0 @@
-$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

@@ -1,23 +0,0 @@
-<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>