mod-build 4.0.22 → 4.0.23

package/src/accessible-components/reviews/_reviews.scss

@@ -1,180 +0,0 @@
-$reviews-background: $color-white !default;
-$reviews-border-bottom: 0 !default;
-$reviews-padding: 40px 0 !default;
-$reviews-padding-tablet: 60px 0 !default;
-$reviews-padding-desktop: 80px 0 !default;
-$reviews-text-align: center !default;
-
-$reviews-title-color: $color-charcoal8 !default;
-$reviews-title-font-size: 1.375rem !default;
-$reviews-title-font-size-desktop: 1.5rem !default;
-$reviews-title-font-weight: 700 !default;
-$reviews-title-line-height: 1.25 !default;
-$reviews-title-margin: 0 0 35px !default;
-
-$reviews-content-margin: 0 auto !default;
-$reviews-content-max-width: 100% !default;
-
-$reviews-card-background: $color-white !default;
-$reviews-card-border: 1px solid $color-charcoal1 !default;
-$reviews-card-border-radius: 6px !default;
-$reviews-card-box-shadow: 0 8px 16px 0 rgba($color-black, .1) !default;
-$reviews-card-list-style: none !default;
-$reviews-card-min-height: 270px !default;
-$reviews-card-min-height-tablet: 335px !default;
-$reviews-card-min-height-desktop: 290px !default;
-$reviews-card-padding: 50px 25px 30px !default;
-$reviews-card-position: relative !default;
-$reviews-card-text-align: center !default;
-
-$reviews-avatar-border-radius: 100px !default;
-$reviews-avatar-height: 73px !default;
-$reviews-avatar-position-top: -40px !default;
-$reviews-avatar-position-left: 50% !default;
-$reviews-avatar-position: absolute !default;
-$reviews-avatar-transform: translate(-50%) !default;
-$reviews-avatar-width: $reviews-avatar-height !default;
-
-$reviews-review-color: $color-charcoal6 !default;
-$reviews-review-font-size: 1rem !default;
-$reviews-review-font-size-desktop: $reviews-review-font-size !default;
-$reviews-review-font-style: italic !default;
-$reviews-review-line-height: 1.35 !default;
-$reviews-review-margin: 15px 0 !default;
-$reviews-review-text-align: left !default;
-
-$reviews-author-color: $reviews-review-color !default;
-$reviews-author-font-size: $reviews-review-font-size !default;
-$reviews-author-position-bottom: 25px !default;
-$reviews-author-position-left: 50% !default;
-$reviews-author-position: absolute !default;
-$reviews-author-transform: translate(-50%) !default;
-$reviews-author-name-display: block !default;
-
-$reviews-author-includes-rating-name-display: inline-block !default;
-$reviews-author-includes-rating-name-vertical-align: middle !default;
-
-$reviews-location-display: block !default;
-$reviews-location-font-size: $reviews-author-font-size !default;
-$reviews-location-margin: 0 !default;
-
-$reviews-date-border-right: 1px solid $reviews-author-color !default;
-$reviews-date-margin-right: 4px !default;
-$reviews-date-padding-right: 7px !default;
-
-.reviews {
-	background: $reviews-background;
-	border-bottom: $reviews-border-bottom;
-	padding: $reviews-padding;
-	text-align: $reviews-text-align;
-
-	&__title {
-		color: $reviews-title-color;
-		font-size: $reviews-title-font-size;
-		font-weight: $reviews-title-font-weight;
-		line-height: $reviews-title-line-height;
-		margin: $reviews-title-margin;
-	}
-
-	&__content {
-		margin: $reviews-content-margin;
-		max-width: $reviews-content-max-width;
-	}
-}
-
-.reviews-card {
-	background: $reviews-card-background;
-	border: $reviews-card-border;
-	border-radius: $reviews-card-border-radius;
-	box-shadow: $reviews-card-box-shadow;
-	list-style: $reviews-card-list-style;
-	min-height: $reviews-card-min-height;
-	padding: $reviews-card-padding;
-	position: $reviews-card-position;
-	text-align: $reviews-card-text-align;
-
-	&__avatar {
-		border-radius: $reviews-avatar-border-radius;
-		height: $reviews-avatar-height;
-		left: $reviews-avatar-position-left;
-		position: $reviews-avatar-position;
-		top: $reviews-avatar-position-top;
-		transform: $reviews-avatar-transform;
-		width: $reviews-avatar-width;
-
-		img {
-			border-radius: $reviews-avatar-border-radius;
-			height: 100%;
-			width: 100%;
-		}
-	}
-
-	&__review {
-		color: $reviews-review-color;
-		font-size: $reviews-review-font-size;
-		font-style: $reviews-review-font-style;
-		line-height: $reviews-review-line-height;
-		margin: $reviews-review-margin;
-		text-align: $reviews-review-text-align;
-	}
-
-	&__author {
-		bottom: $reviews-author-position-bottom;
-		color: $reviews-author-color;
-		font-size: $reviews-author-font-size;
-		left: $reviews-author-position-left;
-		position: $reviews-author-position;
-		transform: $reviews-author-transform;
-
-		strong {
-			display: $reviews-author-name-display;
-		}
-
-		&--includes-rating {
-			strong {
-				display: $reviews-author-includes-rating-name-display;
-				vertical-align: $reviews-author-includes-rating-name-vertical-align;
-			}
-		}
-	}
-
-	&__location {
-		display: $reviews-location-display;
-		font-size: $reviews-location-font-size;
-		margin: $reviews-location-margin;
-	}
-
-	&__date {
-		border-right: $reviews-date-border-right;
-		margin-right: $reviews-date-margin-right;
-		padding-right: $reviews-date-padding-right;
-	}
-}
-
-@include breakpoint-md {
-	.reviews {
-		padding: $reviews-padding-tablet;
-
-		&__title {
-			font-size: $reviews-title-font-size-desktop;
-		}
-	}
-
-	.reviews-card {
-		min-height: $reviews-card-min-height-tablet;
-
-		&__review {
-			font-size: $reviews-review-font-size-desktop;
-		}
-	}
-}
-
-@include breakpoint-lg {
-	.reviews {
-		padding: $reviews-padding-desktop;
-	}
-
-	.reviews-card {
-		min-height: $reviews-card-min-height-desktop;
-	}
-}

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

@@ -1,12 +0,0 @@
-<section class="reviews{{#xif 'this.reviews.attributes && this.reviews.attributes.class'}} {{this.reviews.attributes.class}}{{/xif}}" {{{addAttributes this.reviews 'class'}}}>
-	<div class="reviews__container container">
-		{{#if this.reviews.title}}
-			<h2 class="reviews__title{{#xif 'this.reviews.title.attributes && this.reviews.title.attributes.class'}} {{this.reviews.title.attributes.class}}{{/xif}}" {{{addAttributes this.reviews.title 'class'}}}>{{{this.reviews.title.text}}}</h2>
-		{{/if}}
-		{{#reviews}}
-			{{ fileInclude 'src/accessible-components/carousel/carousel.html'
-				carousel = this
-			}}
-		{{/reviews}}
-	</div>
-</section>

package/src/accessible-components/reviews/reviews-static.html

@@ -1,12 +0,0 @@
-<section class="reviews{{#xif 'this.reviews.attributes && this.reviews.attributes.class'}} {{this.reviews.attributes.class}}{{/xif}}" {{{addAttributes this.reviews 'class'}}}>
-	<div class="reviews__container container">
-		{{#if this.reviews.title}}
-			<h2 class="reviews__title{{#xif 'this.reviews.title.attributes && this.reviews.title.attributes.class'}} {{this.reviews.title.attributes.class}}{{/xif}}" {{{addAttributes this.reviews.title 'class'}}}>{{{this.reviews.title.text}}}</h2>
-		{{/if}}
-		<ul class="reviews__content">
-			{{ fileInclude 'src/accessible-components/reviews/reviews.html'
-				items = this.reviews.items
-			}}
-		</ul>
-	</div>
-</section>

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

@@ -1,37 +0,0 @@
-{{#each this.items}}
-<li class="reviews-card{{#if ../this.carouselOptions}} swiper-slide{{/if}}{{#xif 'this.attributes && this.attributes.class'}} {{this.attributes.class}}{{/xif}}" {{{addAttributes this 'class'}}}>
-	{{#if this.avatar}}
-		<picture class="reviews-card__avatar">
-			<source data-srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/images/avatars/people/{{this.avatar}}.webp" type="image/webp">
-			<img data-src="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/images/avatars/people/{{this.avatar}}.jpg" class="swiper-lazy">
-		</picture>
-	{{/if}}
-	{{#if ../this.carouselOptions}}
-		<div class="swiper-lazy-preloader"></div>
-	{{/if}}
-	{{#unless this.showRatingNextToAuthor}}
-		<span class="star-rating star-rating--sm">
-			<span class="star-rating__stars star-rating__stars--{{this.starRating}}"></span>
-		</span>
-	{{/unless}}
-	<p class="reviews-card__review">{{#unless this.excludeQuotes}}"{{/unless}}{{{this.reviewText}}}{{#unless this.excludeQuotes}}"{{/unless}}</p>
-	<p class="reviews-card__author{{#if this.showRatingNextToAuthor}} reviews-card__author--includes-rating{{/if}}">
-		{{#if this.showRatingNextToAuthor}}
-			<span class="star-rating star-rating--sm">
-				<span class="star-rating__stars star-rating__stars--{{this.starRating}}"></span>
-			</span>
-		{{/if}}
-		<strong>{{this.authorName}}</strong>
-		<span class="reviews-card__location">
-			{{#if this.date}}
-				<span class="reviews-card__date">{{this.date}}</span>
-			{{/if}}
-			{{#if this.useGeoLocation}}
-				<span class="user-location">{{this.location}}</span>
-			{{else}}
-				{{this.location}}
-			{{/if}}
-		</span>
-	</p>
-</li>
-{{/each}}

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

@@ -1,87 +0,0 @@
-$select-background-color: transparent !default;
-$select-border: 1px solid darken($color-charcoal3, 5%) !default;
-$select-border-radius: 4px !default;
-$select-box-shadow: none !default;
-$select-font-size: 1rem !default;
-$select-font-size-desktop: 1.125rem !default;
-$select-line-height: 1.1875 !default;
-$select-margin: 0 0 15px !default;
-$select-padding: 14px 15px 13px !default;
-$select-text-color: $color-charcoal8 !default;
-$select-text-overflow: clip !default;
-$select-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s !default;
-$select-white-space: normal !default;
-$select-error-color: $color-a11y-red !default;
-
-$select-focus-border: 1px solid $color-charcoal5 !default;
-$select-focus-box-shadow: none !default;
-
-$select-option-color: initial !default;
-
-$select-arrow-position-right: 15px !default;
-$select-arrow-position-top: calc(50% - 7px) !default;
-$select-arrow-color: $color-charcoal4 !default;
-$select-arrow-font-size: 1rem !default;
-
-.select-wrapper {
-	margin: $select-margin;
-	position: relative;
-}
-
-.select {
-	appearance: none;
-	background-color: $select-background-color;
-	border: $select-border;
-	border-radius: $select-border-radius;
-	box-shadow: $select-box-shadow;
-	color: $select-text-color;
-	cursor: pointer;
-	font-size: $select-font-size;
-	line-height: $select-line-height;
-	margin: 0;
-	padding: $select-padding;
-	position: relative;
-	text-overflow: $select-text-overflow;
-	transition: $select-transition;
-	white-space: $select-white-space;
-	width: 100%;
-
-	&:focus {
-		border: $select-focus-border;
-		box-shadow: $select-focus-box-shadow;
-	}
-
-	&__caret {
-		color: $select-arrow-color;
-		font-size: $select-arrow-font-size;
-		margin-top: 0;
-		pointer-events: none;
-		position: absolute;
-		right: $select-arrow-position-right;
-		top: $select-arrow-position-top;
-	}
-
-	&--border-bottom-only {
-		border-left: 0 !important;
-		border-radius: 0;
-		border-right: 0 !important;
-		border-top: 0 !important;
-	}
-
-	option {
-		color: $select-option-color;
-	}
-}
-
-.has-error {
-	.select {
-		color: $select-error-color;
-		border-color: $select-error-color;
-	}
-}
-
-@include breakpoint-md {
-	.select {
-		font-size: $select-font-size-desktop;
-	}
-}

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

@@ -1,10 +0,0 @@
-{{#if this.field}}
-<div class="select-wrapper">
-	<select class="select{{#if this.field.attributes.class}} {{this.field.attributes.class}}{{/if}}" {{{addAttributes this.field 'class'}}}>
-		{{#each this.field.options}}
-			<option value="{{this.attributes.value}}" {{{addAttributes this 'value'}}}>{{this.text}}</option>
-		{{/each}}
-	</select>
-	<span class="select__caret icon icon-caret-down"></span>
-</div>
-{{/if}}