mod-build 4.0.6 → 4.0.7

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

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

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

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

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

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

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