mod-build 4.0.21 → 4.0.22-beta.1

package/src/shared-components/radio-button/_radio-button.scss

@@ -0,0 +1,554 @@
+$primary-color: #6EB7C2 !default;
+$qs-primary-color: #FE8501 !default;
+
+$radio-button-wrapper-margin: 0 0 10px !default;
+$radio-button-bg-color: $color-white !default;
+$radio-button-border-color: $color-charcoal1 !default;
+$radio-button-border-radius: 4px !default;
+$radio-button-border-width: 1px !default;
+$radio-button-text-color: $color-charcoal5 !default;
+$radio-button-checked-bg-color: $color-white !default;
+$radio-button-checked-border-color: $color-charcoal1 !default;
+$radio-button-checked-border-width: 1px !default;
+$radio-button-checked-box-shadow: none !default;
+$radio-button-checked-font-weight: normal !default;
+$radio-button-checked-text-color: $radio-button-text-color !default;
+$radio-button-hover-bg-color: $color-white !default;
+$radio-button-hover-border-color: $color-charcoal1 !default;
+$radio-button-hover-border-width: 1px !default;
+$radio-button-hover-text-color: $radio-button-text-color !default;
+$radio-button-font-size: 16px !default;
+$radio-button-font-weight: 400 !default;
+$radio-button-line-height: 1.19 !default;
+$radio-button-margin: 0 0 10px !default;
+$radio-button-min-height: 48px !default;
+$radio-button-padding: 15px 16px 15px 40px !default;
+$radio-button-error-color: $color-red5 !default;
+
+$radio-button-select-background-color: $color-white !default;
+$radio-button-select-border: 1px solid $color-charcoal1 !default;
+$radio-button-select-box-shadow: inset 0 1px 3px 0 rgba($color-black, .1) !default;
+$radio-button-select-checked-background-color: $primary-color !default;
+$radio-button-select-checked-border-color: $radio-button-select-checked-background-color !default;
+$radio-button-select-checked-box-shadow: inset 0 1px 3px 0 rgba($color-black, .1) !default;
+$radio-button-select-size: 20px !default;
+$radio-button-select-top-position: 16px !default;
+$radio-button-select-left-position: 13px !default;
+$radio-button-select-inner-color: $color-white !default;
+$radio-button-select-inner-size: 10px !default;
+$radio-button-select-inner-top-position: 4px !default;
+$radio-button-select-inner-left-position: $radio-button-select-inner-top-position !default;
+
+$radio-border-transition: border-color .15s ease-in-out !default;
+
+$radio-checkmark-bg-color: $color-white !default;
+$radio-checkmark-border-color: rgba($color-black, .1) !default;
+$radio-checkmark-border-width: 2px !default;
+$radio-checkmark-border-radius: 3px !default;
+$radio-checkmark-checked-bg-color: $color-white !default;
+$radio-checkmark-checked-border-color: $primary-color !default;
+$radio-checkmark-checked-text-color: $radio-button-checked-text-color !default;
+$radio-checkmark-content: '\e920' !default;
+$radio-checkmark-font-family: modicons-fill !default;
+$radio-checkmark-margin: 0 0 15px !default;
+$radio-checkmark-padding: 15px 40px !default;
+$radio-checkmark-icon-color: $radio-checkmark-checked-border-color !default;
+
+$radio-group-border-color: $radio-button-border-color !default;
+$radio-group-border-width: 1px !default;
+$radio-group-border-radius: 3px !default;
+$radio-group-box-shadow: 0 2px 4px 0 rgba($color-black, .1) !default;
+$radio-group-tile-font-size: 14px !default;
+$radio-group-tile-height: 70px !default;
+$radio-group-tile-text-color: #8A8A8A !default;
+$radio-group-tile-checked-bg: $primary-color !default;
+$radio-group-tile-checked-border: 1px solid #58929B !default;
+$radio-group-tile-checked-box-shadow: inset 0 0 5px 0 rgba($color-black, .25) !default;
+$radio-group-tile-checked-font-weight: 700 !default;
+$radio-group-tile-checked-text-color: $color-white !default;
+$radio-group-tile-hover-bg: $color-ivory2 !default;
+$radio-group-tile-hover-text-color: $color-charcoal5 !default;
+
+$radio-icon-checked-border-color: $primary-color !default;
+$radio-icon-border-radius: $radio-button-border-radius !default;
+$radio-icon-checked-border-width: 3px !default;
+$radio-icon-height: 135px !default;
+$radio-icon-margin: 0 3px 10px 0 !default;
+$radio-icon-margin-mobile: 0 3px 5px 0 !default;
+$radio-icon-width: 32% !default;
+
+$radio-bg-checked-border-color: $primary-color !default;
+$radio-bg-border-radius: 5px !default;
+$radio-bg-default-bg-color: $color-charcoal2 !default;
+$radio-bg-height: 77px !default;
+$radio-bg-margin: 5px 4px 13px !default;
+$radio-bg-margin-mobile: 5px 4px !default;
+$radio-bg-width: calc(31% - 5px) !default;
+
+$radio-qs-bg-color: $color-white !default;
+$radio-qs-border-color: $qs-primary-color !default;
+$radio-qs-border-width: 1px !default;
+$radio-qs-border-radius: 3px !default;
+$radio-qs-text-color: $qs-primary-color !default;
+$radio-qs-checked-bg-color: $qs-primary-color !default;
+$radio-qs-checked-border-color: $qs-primary-color !default;
+$radio-qs-checked-text-color: $color-white !default;
+$radio-qs-hover-bg-color: $qs-primary-color !default;
+$radio-qs-hover-border-color: $qs-primary-color !default;
+$radio-qs-hover-text-color: $color-white !default;
+$radio-qs-font-size: 18px !default;
+$radio-qs-font-size-mobile: 14px !default;
+$radio-qs-line-height: 1.3 !default;
+$radio-qs-margin: 0 0 15px !default;
+$radio-qs-min-height: 67px !default;
+$radio-qs-min-height-mobile: 57px !default;
+$radio-qs-padding: 5px 40px !default;
+
+.radio {
+	margin: $radio-button-wrapper-margin;
+	overflow: hidden;
+
+	&__button {
+		font-size: $radio-button-font-size;
+		margin: $radio-button-margin;
+		min-height: $radio-button-min-height;
+
+		label {
+			font-weight: $radio-button-font-weight;
+			line-height: $radio-button-line-height;
+			padding: $radio-button-padding;
+			position: relative;
+
+			input[type=radio]{
+
+				+ span {
+					background-color: $radio-button-select-background-color;
+					border: $radio-button-select-border;
+					border-radius: 50%;
+					box-shadow: $radio-button-select-box-shadow;
+					display: block;
+					height: $radio-button-select-size;
+					left: $radio-button-select-left-position;
+					position: absolute;
+					top: $radio-button-select-top-position;
+					width: $radio-button-select-size;
+				}
+
+				&:checked + span { // sass-lint:disable-line
+					background-color: $radio-button-select-checked-background-color;
+					border-color: $radio-button-select-checked-border-color;
+					box-shadow: $radio-button-select-checked-box-shadow;
+
+					&:empty {
+						transition: all .15s ease-in-out;
+					}
+
+					&:after {
+						background: $radio-button-select-inner-color;
+						height: $radio-button-select-inner-size;
+						left: $radio-button-select-inner-left-position;
+						top: $radio-button-select-inner-top-position;
+						width: $radio-button-select-inner-size;
+					}
+
+					+ span {
+						color: $radio-button-checked-text-color;
+						font-weight: $radio-button-checked-font-weight;
+
+						&::before {
+							background-color: $radio-button-checked-bg-color;
+							border: $radio-button-checked-border-width solid $radio-button-checked-border-color;
+							box-shadow: $radio-button-checked-box-shadow;
+						}
+					}
+				}
+			}
+
+			&:hover {
+				input:not(:checked) + span + .radio__button-text { // sass-lint:disable-line
+					color: $radio-button-hover-text-color;
+					&::before {
+						background-color: $radio-button-hover-bg-color;
+						border: $radio-button-hover-border-width solid $radio-button-hover-border-color;
+					}
+				}
+			}
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	&__button-text {
+		color: $radio-button-text-color;
+		transition: all .15s ease;
+
+		&::before {
+			background-color: $radio-button-bg-color;
+			border: $radio-button-border-width solid $radio-button-border-color;
+			border-radius: $radio-button-border-radius;
+			content: '';
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+			transition: all .15s ease;
+			width: 100%;
+			z-index: -1;
+		}
+	}
+
+	&__custom-select {
+		&:empty {
+			display: none;
+		}
+	}
+
+	&--checkmark,
+	&--group,
+	&--icon,
+	&--backgroundImage,
+	&--qsRadio {
+		.radio__button label input[type=radio] { // sass-lint:disable-line
+			+ span {
+				background: none;
+				border: 0;
+				border-radius: 0;
+				box-shadow: none;
+				display: block;
+				height: auto;
+				left: 0;
+				position: unset;
+				text-align: center;
+				top: unset;
+				width: auto;
+			}
+
+			&:checked {
+				+ span {
+					background: none;
+					border: 0;
+				}
+			}
+		}
+	}
+
+	&--checkmark {
+		.radio__button {
+			border: 0;
+			margin: $radio-checkmark-margin;
+
+			label {
+				padding: $radio-checkmark-padding;
+				position: relative;
+
+				input[type=radio] {
+					+ span {
+						&::before {
+							background-color: transparent;
+							border: 0;
+							border-radius: 0;
+							box-shadow: none;
+							color: $radio-checkmark-icon-color;
+							content: $radio-checkmark-content;
+							font-family: $radio-checkmark-font-family !important;
+							font-size: 16px;
+							font-style: normal;
+							font-variant: normal;
+							font-weight: 400;
+							height: auto;
+							left: auto;
+							line-height: 16px;
+							opacity: 0;
+							right: 15px;
+							text-transform: none;
+							top: 50%;
+							transform: translateY(-50%);
+							transition: opacity ease .15s;
+							width: auto;
+							z-index: 1;
+						}
+
+						&::after {
+							background-color: $radio-checkmark-bg-color;
+							border: $radio-checkmark-border-width solid $radio-checkmark-border-color;
+							border-radius: $radio-checkmark-border-radius;
+							height: 100%;
+							left: 0;
+							opacity: 1;
+							position: absolute;
+							top: 0;
+							transition: $radio-border-transition;
+							width: 100%;
+							z-index: -1;
+						}
+					}
+
+					&:checked {
+						+ span {
+							color: $radio-checkmark-checked-text-color;
+
+							&::before {
+								opacity: 1;
+							}
+
+							&::after {
+								background-color: $radio-checkmark-checked-bg-color;
+								border-color: $radio-checkmark-checked-border-color;
+							}
+						}
+					}
+
+					&:hover {
+						+ span {
+							color: $radio-button-hover-text-color;
+
+							&::after {
+								background-color: $radio-button-hover-bg-color;
+								border-color: $radio-button-hover-border-color;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&--backgroundImage,
+	&--group,
+	&--icon {
+		overflow: hidden;
+		user-select: none;
+
+		.radio__button {
+			border-radius: $radio-icon-border-radius;
+			display: inline-flex;
+			flex-direction: column;
+			justify-content: center;
+			margin: $radio-icon-margin;
+			position: relative;
+			text-align: center;
+			vertical-align: top;
+			width: $radio-icon-width;
+
+			label {
+				cursor: pointer;
+				line-height: 1;
+				margin-bottom: 0;
+				padding: 0;
+				width: 100%;
+
+				input[type=radio] {
+
+					+ span {
+						&::before,
+						&::after {
+							display: none;
+						}
+					}
+				}
+			}
+
+			&-text {
+				&::before {
+					display: none;
+				}
+			}
+		}
+	}
+
+	&--group {
+		border: $radio-group-border-width solid $radio-group-border-color;
+		border-radius: $radio-group-border-radius;
+		box-shadow: $radio-group-box-shadow;
+		display: flex;
+
+		.radio__button {
+			border: 0;
+			border-radius: 0;
+			height: $radio-group-tile-height;
+			margin: 0;
+			width: 100%;
+
+			label {
+				height: 100%;
+				min-height: 0;
+
+				input[type=radio] {
+					+ span {
+						align-items: center;
+						color: $radio-group-tile-text-color;
+						display: flex;
+						font-size: $radio-group-tile-font-size;
+						font-weight: normal;
+						height: 100%;
+						justify-content: center;
+						transition: all .15s linear;
+					}
+
+					&:checked {
+						+ span {
+							background-color: $radio-group-tile-checked-bg;
+							border: $radio-group-tile-checked-border;
+							box-shadow: $radio-group-tile-checked-box-shadow;
+							color: $radio-group-tile-checked-text-color;
+							font-weight: $radio-group-tile-checked-font-weight;
+						}
+					}
+				}
+
+				&:hover {
+					input[type=radio]:not(:checked) + span { // sass-lint:disable-line
+						background-color: $radio-group-tile-hover-bg;
+						color: $radio-group-tile-hover-text-color;
+					}
+				}
+			}
+
+			~ .radio__button {
+				border-left: $radio-group-border-width solid $radio-group-border-color;
+			}
+		}
+	}
+
+	&--icon {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+
+		.radio__button {
+			border: 0;
+			height: $radio-icon-height;
+			line-height: 12px;
+			position: relative;
+
+			label {
+				display: inline-flex;
+				flex-direction: column;
+				height: 100%;
+				justify-content: center;
+
+				input[type=radio]:checked + .tile .tile__text::before { // sass-lint:disable-line
+					border: $radio-icon-checked-border-width solid $radio-icon-checked-border-color;
+				}
+			}
+		}
+	}
+
+	&--backgroundImage {
+		padding: 0 1px;
+
+		.radio__button {
+			background-color: $radio-bg-default-bg-color;
+			border-radius: $radio-bg-border-radius;
+			height: $radio-bg-height;
+			margin: $radio-bg-margin;
+			width: $radio-bg-width;
+
+			input:checked {
+				+ .tile .tile__background-image {
+					&::before {
+						border-color: $radio-bg-checked-border-color;
+					}
+				}
+			}
+
+			label {
+				align-items: center;
+				display: flex;
+				height: 100%;
+				justify-content: center;
+			}
+		}
+	}
+
+	&--qsRadio {
+		.radio__button {
+			border: 0;
+			font-size: $radio-qs-font-size;
+			margin: $radio-qs-margin;
+			min-height: $radio-qs-min-height;
+
+			label {
+				align-items: center;
+				display: flex;
+				justify-content: center;
+				min-height: inherit;
+				padding: $radio-qs-padding;
+				position: relative;
+
+				input[type=radio] {
+					+ span {
+						color: $radio-qs-text-color;
+						line-height: $radio-qs-line-height;
+
+						&::before {
+							background-color: $radio-qs-bg-color;
+							border: $radio-qs-border-width solid $radio-qs-border-color;
+							border-radius: $radio-qs-border-radius;
+							height: 100%;
+							left: 0;
+							opacity: 1;
+							position: absolute;
+							top: 0;
+							transition: all .15s ease-in-out;
+							width: 100%;
+							z-index: -1;
+						}
+
+						&::after {
+							display: none;
+						}
+					}
+
+					&:checked {
+						+ span {
+							color: $radio-qs-checked-text-color;
+							&::before {
+								background-color: $radio-qs-checked-bg-color;
+								border-color: $radio-qs-checked-border-color;
+							}
+						}
+					}
+
+					&:hover {
+						+ span {
+							color: $radio-qs-hover-text-color;
+							&::before {
+								background-color: $radio-qs-hover-bg-color;
+								border-color: $radio-qs-hover-border-color;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+.has-error, .has-error label:hover { // sass-lint:disable-line
+	input:not(:checked) + span + .radio__button-text { // sass-lint:disable-line
+		color: $radio-button-error-color;
+
+		&::before {
+			border-color: $radio-button-error-color;
+		}
+	}
+}
+
+@include breakpoint-phone {
+	.radio {
+		&--backgroundImage {
+			.radio__button {
+				margin: $radio-bg-margin-mobile;
+			}
+		}
+		&--qsRadio {
+			.radio__button {
+				font-size: $radio-qs-font-size-mobile;
+				min-height: $radio-qs-min-height-mobile;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,25 @@
+<div class="radio{{#if this.field.radioOptionType}} radio--{{this.field.radioOptionType}}{{/if}}">
+	{{#each this.field.options}}
+		<div class="radio__button{{#if this.class}} {{this.class}}{{/if}}"{{#if this.includeDataInputFor}} data-input-for="{{this.value}}"{{/if}}>
+			<label for="{{#if this.id}}{{this.id}}{{/if}}{{#unless this.id}}{{../this.field.name}}-{{x 'this.text.replace(/[^a-zA-Z ]/g, "").replace(/\s+/g, "-").toLowerCase();'}}{{/unless}}">
+				<input id="{{#if this.id}}{{this.id}}{{/if}}{{#unless this.id}}{{../this.field.name}}-{{x 'this.text.replace(/[^a-zA-Z ]/g, "").replace(/\s+/g, "-").toLowerCase();'}}{{/unless}}" type="radio" name="{{../this.field.name}}" value="{{this.value}}" {{#unless ../this.field.isOptional}}data-required="nonempty"{{/unless}} {{#if this.checked}}checked="checked"{{/if}}{{#if this.extraAttributes}}{{#each this.extraAttributes}} {{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}{{#if this.localSvgSpriteIconUrl}} data-icon="{{this.localSvgSpriteIconUrl}}"{{/if}}{{#if this.includeDataName}} data-name="{{this.text}}"{{/if}}{{#if this.projectscope}} data-projectscope="{{this.projectscope}}"{{/if}} />
+				{{#unless ../this.field.radioOptionType}}
+					<span class="radio__button-select"></span>
+				{{/unless}}
+				{{#xif "this.backgroundImageUrl || this.imageIconUrl || this.svgSpriteIconUrl || this.localSVGPath || this.localSvgSpriteIconUrl || this.localImageIconUrl"}}
+					{{fileInclude 'src/shared-components/tile/tile.html'
+						field = this
+					}}
+				{{else}}
+					{{#if this.stylizedFontGraphic}}
+						<span class="radio__button-stylized-font">{{{this.stylizedFontGraphic}}}</span>
+					{{/if}}
+					<span class="radio__button-text">{{{this.text}}}</span>
+					{{#if ../this.field.radioOptionType}}
+						<span class="radio__custom-select"></span>
+					{{/if}}
+				{{/xif}}
+			</label>
+		</div>
+	{{/each}}
+</div>

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

@@ -0,0 +1,79 @@
+$reviews-card-background: #FFF !default;
+$reviews-card-border: 1px solid $color-charcoal1 !default;
+$reviews-card-border-radius: 6px !default;
+$reviews-card-box-shadow: 0 8px 16px 0 rgba(#000, .1) !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-text-align: center !default;
+
+$reviews-avatar-border-radius: 100px !default;
+$reviews-avatar-height: 73px !default;
+$reviews-avatar-top-position: -40px !default;
+$reviews-avatar-width: $reviews-avatar-height !default;
+
+$reviews-review-font-size: 16px !default;
+$reviews-review-font-style: italic !default;
+$reviews-review-margin: 15px 0 !default;
+$reviews-review-text-align: left !default;
+
+$reviews-author-bottom-position: 25px !default;
+
+
+.reviews-card {
+	background: $reviews-card-background;
+	border: $reviews-card-border;
+	border-radius: $reviews-card-border-radius;
+	box-shadow: $reviews-card-box-shadow;
+	min-height: $reviews-card-min-height;
+	padding: $reviews-card-padding;
+	position: relative;
+	text-align: $reviews-card-text-align;
+
+	&__avatar {
+		border-radius: $reviews-avatar-border-radius;
+		height: $reviews-avatar-height;
+		left: 50%;
+		position: absolute;
+		top: $reviews-avatar-top-position;
+		transform: translate(-50%);
+		width: $reviews-avatar-width;
+
+		img {
+			border-radius: $reviews-avatar-border-radius;
+			height: 100%;
+			width: 100%;
+		}
+	}
+
+	&__review {
+		font-size: $reviews-review-font-size;
+		font-style: $reviews-review-font-style;
+		margin: $reviews-review-margin;
+		text-align: $reviews-review-text-align;
+	}
+
+	&__author {
+		bottom: $reviews-author-bottom-position;
+		left: 50%;
+		position: absolute;
+		transform: translate(-50%);
+
+		b {
+			display: block;
+		}
+	}
+}
+
+@include breakpoint-sm {
+	.reviews-card {
+		min-height: $reviews-card-min-height-tablet;
+	}
+}
+
+@include breakpoint-md {
+	.reviews-card {
+		min-height: $reviews-card-min-height-desktop;
+	}
+}

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

@@ -0,0 +1,27 @@
+{{#each this.items}}
+<li class="swiper-slide reviews-card {{#if ../this.classModifier}}{{../this.classModifier}}{{/if}}">
+	{{#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}}
+	<div class="swiper-lazy-preloader"></div>
+	<span class="star-rating star-rating--sm">
+		<span class="star-rating__stars star-rating__stars--{{this.starRating}}"></span>
+	</span>
+	{{#if this.excludeQuotes}}
+		<div class="reviews-card__review">{{{this.reviewText}}}</div>
+	{{else}}
+		<div class="reviews-card__review">"{{{this.reviewText}}}"</div>
+	{{/if}}
+	<div class="reviews-card__author">
+		<b>{{this.authorName}}</b>
+		{{#if this.useGeoLocation}}
+			<span class="user-location">{{this.location}}</span>
+		{{else}}
+			{{this.location}}
+		{{/if}}
+	</div>
+</li>
+{{/each}}