mod-build 4.0.9 → 4.0.10

package/src/accessible-components/button/_button.scss

@@ -0,0 +1,319 @@
+$button-border-radius: 2px !default;
+$button-cursor: pointer !default;
+$button-display: inline-block !default;
+$button-font-family: $base-font-family !default;
+$button-font-size: 1.25rem !default;
+$button-font-size-desktop: $button-font-size !default;
+$button-font-style: normal !default;
+$button-font-weight: 700 !default;
+$button-height: 50px !default;
+$button-height-desktop: $button-height !default;
+$button-letter-spacing: 0 !default;
+$button-line-height: 1.05 !default;
+$button-margin: 10px 0 !default;
+$button-padding: 15px 30px !default;
+$button-position: relative !default;
+$button-text-align: center !default;
+$button-text-decoration: none !default;
+$button-text-transform: uppercase !default;
+$button-transition: color .15s ease-in-out, background-color .15s ease-in-out, border .15s ease-in-out !default;
+$button-width: 100% !default;
+$button-z-index: 0 !default;
+
+$back-button-align-items: center !default;
+$back-button-background-color: transparent !default;
+$back-button-border: 0 !default;
+$back-button-border-radius: 0 !default;
+$back-button-color: $color-charcoal4 !default;
+$back-button-display: flex !default;
+$back-button-initial-display: none !default;
+$back-button-font-size: .875rem !default;
+$back-button-font-weight: 400 !default;
+$back-button-height: auto !default;
+$back-button-line-height: $button-line-height !default;
+$back-button-margin: 10px 0 0 !default;
+$back-button-padding: 2px 5px !default;
+$back-button-margin-desktop: $back-button-margin !default;
+$back-button-padding-desktop: $back-button-padding !default;
+$back-button-hover-background-color: transparent !default;
+$back-button-hover-color: darken($back-button-color, 10%) !default;
+$back-button-icon-font-size: 90% !default;
+$back-button-icon-margin-right: 4px !default;
+
+$back-button-focus-outline: 1px solid rgba($back-button-color, .5) !default;
+$back-button-focus-outline-offset: 2px !default;
+
+$button-primary-background-color: $color-a11y-default-button !default;
+$button-primary-border: 0 !default;
+$button-primary-color: $color-white !default;
+$button-primary-font-family: $button-font-family !default;
+$button-primary-max-width: 100% !default;
+$button-primary-hover-background-color: $color-a11y-default-button-hover !default;
+$button-primary-hover-border: $button-primary-border !default;
+$button-primary-hover-color: $color-white !default;
+
+$button-secondary-background-color: $button-primary-background-color !default;
+$button-secondary-border: $button-primary-border !default;
+$button-secondary-color: $button-primary-color !default;
+$button-secondary-font-family: $button-font-family !default;
+$button-secondary-font-size: $button-font-size !default;
+$button-secondary-font-size-desktop: $button-secondary-font-size !default;
+$button-secondary-font-style: $button-font-style !default;
+$button-secondary-height: $button-height !default;
+$button-secondary-height-desktop: $button-secondary-height !default;
+$button-secondary-max-width: 100% !default;
+$button-secondary-padding: $button-padding !default;
+$button-secondary-text-transform: $button-text-transform !default;
+$button-secondary-hover-background-color: $button-primary-hover-background-color !default;
+$button-secondary-hover-border: $button-primary-hover-border !default;
+$button-secondary-hover-color: $button-primary-hover-color !default;
+
+$button-icon-position: absolute !default;
+$button-icon-font-family: 'modicons-fill' !default;
+$button-icon-font-size: .875rem !default;
+$button-icon-bottom: unset !default;
+$button-icon-left: unset !default;
+$button-icon-right: 15px !default;
+$button-icon-top: 50% !default;
+$button-icon-transform: translateY(-50%) !default;
+
+$button-spinner-default-easing: cubic-bezier(.4, .1, .5, 1);
+$button-spinner-default-border-color: $button-primary-background-color !default;
+$button-spinner-default-border-right-color: $color-white !default;
+$button-spinner-default-border-top-color: $button-spinner-default-border-right-color !default;
+
+$button-spinner-primary-border-color: $button-primary-background-color !default;
+$button-spinner-primary-border-right-color: $color-white !default;
+$button-spinner-primary-border-top-color: $button-spinner-default-border-right-color !default;
+
+$button-spinner-secondary-border-color: $button-secondary-background-color!default;
+$button-spinner-secondary-border-right-color: $color-white !default;
+$button-spinner-secondary-border-top-color: $button-spinner-default-border-right-color !default;
+
+$button-disabled-cursor: not-allowed !default;
+$button-disabled-opacity: .65 !default;
+
+@keyframes spinnerAnim {
+	from { transform: rotate(0deg); }
+	to { transform: rotate(360deg); }
+}
+
+.btn {
+	border-radius: $button-border-radius;
+	cursor: $button-cursor;
+	display: $button-display;
+	font-family: $button-font-family;
+	font-size: $button-font-size;
+	font-style: $button-font-style;
+	font-weight: $button-font-weight;
+	height: $button-height;
+	letter-spacing: $button-letter-spacing;
+	line-height: $button-line-height;
+	margin: $button-margin;
+	padding: $button-padding;
+	position: $button-position;
+	text-align: $button-text-align;
+	text-decoration: $button-text-decoration;
+	text-transform: $button-text-transform;
+	transition: $button-transition;
+	width: $button-width;
+	z-index: $button-z-index;
+
+	&__spinner {
+		display: block;
+		margin: 0 auto;
+		height: 20px;
+		left: 50%;
+		opacity: 0;
+		position: absolute;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		transition: opacity .1s $button-spinner-default-easing;
+		visibility: hidden;
+		width: 20px;
+
+		&::before {
+			content: '';
+			display: inline-block;
+			height: 100%;
+			vertical-align: middle;
+		}
+
+		&::after {
+			animation: spinnerAnim 1.5s linear infinite;
+			border: 4px solid darken($button-spinner-default-border-color, 20);
+			border-radius: 50%;
+			border-right-color: $button-spinner-default-border-right-color;
+			border-top-color: $button-spinner-default-border-top-color;
+			content: '';
+			display: block;
+			height: 100%;
+			left: 0;
+			position: absolute;
+			top: 0;
+			width: 100%;
+		}
+	}
+
+	&__icon {
+		bottom: $button-icon-bottom;
+		font-family: $button-icon-font-family;
+		font-size: $button-icon-font-size;
+		left: $button-icon-left;
+		position: $button-icon-position;
+		right: $button-icon-right;
+		top: $button-icon-top;
+		transform: $button-icon-transform;
+	}
+
+	&--back {
+		align-items: $back-button-align-items;
+		background-color: $back-button-background-color;
+		border: $back-button-border;
+		border-radius: $back-button-border-radius;
+		color: $back-button-color;
+		cursor: $button-cursor;
+		display: $back-button-initial-display;
+		font-size: $back-button-font-size;
+		font-family: $button-font-family;
+		font-weight: $back-button-font-weight;
+		height: $back-button-height;
+		line-height: $back-button-line-height;
+		margin: $back-button-margin;
+		padding: $back-button-padding;
+		transition: $button-transition;
+
+		i {
+			font-size: $back-button-icon-font-size;
+			margin-right: $back-button-icon-margin-right;
+		}
+
+		&:focus {
+			outline: $back-button-focus-outline;
+			outline-offset: $back-button-focus-outline-offset;
+		}
+	}
+
+	&--primary {
+		background-color: $button-primary-background-color;
+		border: $button-primary-border;
+		color: $button-primary-color;
+		font-family: $button-primary-font-family;
+		max-width: $button-primary-max-width;
+
+		.btn__spinner {
+			&::after {
+				border: 4px solid darken($button-spinner-primary-border-color, 20);
+				border-right-color: $button-spinner-primary-border-right-color;
+				border-top-color: $button-spinner-primary-border-top-color;
+			}
+		}
+	}
+
+	&--secondary {
+		background-color: $button-secondary-background-color;
+		border: $button-secondary-border;
+		color: $button-secondary-color;
+		font-family: $button-secondary-font-family;
+		font-size: $button-secondary-font-size;
+		font-style: $button-secondary-font-style;
+		height: $button-secondary-height;
+		max-width: $button-secondary-max-width;
+		padding: $button-secondary-padding;
+		text-transform: $button-secondary-text-transform;
+
+		.btn__spinner {
+			&::after {
+				border: 4px solid darken($button-spinner-secondary-border-color, 20);
+				border-right-color: $button-spinner-secondary-border-right-color;
+				border-top-color: $button-spinner-secondary-border-top-color;
+			}
+		}
+	}
+
+	&--loading {
+		cursor: wait;
+
+		.btn__text {
+			visibility: hidden;
+		}
+
+		.btn__spinner {
+			opacity: 1;
+			visibility: visible;
+		}
+	}
+
+	&--primary,
+	&--secondary {
+		&:disabled {
+			cursor: $button-disabled-cursor;
+			opacity: $button-disabled-opacity;
+		}
+	}
+}
+
+.form--loading {
+	.btn {
+		cursor: wait;
+
+		&__text {
+			visibility: hidden;
+		}
+
+		&__spinner {
+			opacity: 1;
+			visibility: visible;
+		}
+	}
+}
+
+.form-in-progress {
+	.btn--back {
+		display: $back-button-display;
+	}
+}
+
+@include breakpoint-md {
+	.btn {
+		font-size: $button-font-size-desktop;
+		height: $button-height-desktop;
+
+		&--back {
+			margin: $back-button-margin-desktop;
+			padding: $back-button-padding-desktop;
+
+			&:hover,
+			&:active,
+			&:focus {
+				background-color: $back-button-hover-background-color;
+				color: $back-button-hover-color;
+			}
+		}
+
+		&--primary {
+			&:hover,
+			&:active,
+			&:focus {
+				background-color: $button-primary-hover-background-color;
+				border: $button-primary-hover-border;
+				color: $button-primary-hover-color;
+			}
+
+		}
+
+		&--secondary {
+			font-size: $button-secondary-font-size-desktop;
+			height: $button-secondary-height-desktop;
+
+			&:hover,
+			&:active,
+			&:focus {
+				background-color: $button-secondary-hover-background-color;
+				border: $button-secondary-hover-border;
+				color: $button-secondary-hover-color;
+			}
+
+		}
+	}
+}

package/src/accessible-components/button/back-button.html

@@ -0,0 +1,8 @@
+<button class="btn--back back-btn{{#if class}} {{class}}{{/if}}" data-btn="back" type="button">
+	<i class="{{#if icon}}{{icon}}{{else}}icon-caret-left{{/if}}"></i>
+	{{#if iconOnly}}
+		<span class="visually-hidden">Back</span>
+	{{else}}
+		Back
+	{{/if}}
+</button>

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

@@ -0,0 +1,17 @@
+{{#xif 'this.button.tag && this.button.tag === "a"'}}
+<a class="btn{{#xif 'this.button.attributes && this.button.attributes.class || this.class'}}{{#if this.button.attributes.class}} {{this.button.attributes.class}}{{/if}}{{#if this.class}} {{this.class}}{{/if}}{{/xif}}" {{{addAttributes this.button 'class'}}}>
+{{else}}
+<button class="btn{{#xif 'this.button.attributes && this.button.attributes.class'}} {{this.button.attributes.class}}{{/xif}}" {{{addAttributes this.button 'class'}}}>
+{{/xif}}
+	<span class="btn__text">{{{this.button.text}}}</span>
+	{{#if this.button.icon}}
+		<i class="btn__icon{{#xif 'this.button.icon.attributes && this.button.icon.attributes.class'}} {{this.button.icon.attributes.class}}{{/xif}}" {{{addAttributes this.button.icon 'class'}}}></i>
+	{{/if}}
+{{#xif 'this.button.tag && this.button.tag === "a"'}}
+</a>
+{{else}}
+	{{#unless this.button.hideSpinner}}
+		<span class="btn__spinner"></span>
+	{{/unless}}
+</button>
+{{/xif}}

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

@@ -0,0 +1,112 @@
+$swiper-margin-top: 0 !default;
+$swiper-padding-top: 0 !default;
+
+$swiper-controls-padding: 30px 15px !default;
+$swiper-controls-padding-desktop: 50px 15px !default;
+$swiper-navigation-color: $color-charcoal4 !default;
+$swiper-navigation-hover-color: darken($swiper-navigation-color, 10%) !default;
+$swiper-pagination-margin: 0 10px !default;
+$swiper-pagination-bottom-alignment: 0 !default;
+$swiper-pagination-bullet-background-color: 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-background-color: darken($swiper-navigation-color, 10%) !default;
+$swiper-pagination-bullet-hover-border: 0 !default;
+$swiper-pagination-bullet-active-background-color: $swiper-navigation-color !default;
+$swiper-pagination-bullet-active-border: 0 !default;
+
+$swiper-scrollbar-background-color: $color-charcoal1 !default;
+$swiper-scrollbar-drag-color: $color-charcoal4 !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;
+
+		i.icon {
+			color: $swiper-navigation-color;
+			cursor: pointer;
+			transition: $base-transition;
+
+			&:not(.swiper-button-disabled) {
+				&:active,
+				&:focus,
+				&:hover {
+					color: $swiper-navigation-hover-color;
+				}
+			}
+		}
+
+		.swiper-pagination {
+			margin: $swiper-pagination-margin;
+			position: relative;
+
+			.swiper-pagination-bullet {
+				background-color: $swiper-pagination-bullet-background-color;
+				border: $swiper-pagination-bullet-border;
+				height: $swiper-pagination-bullet-height;
+				opacity: 1;
+				transition: $base-transition;
+				width: $swiper-pagination-bullet-width;
+
+				&:active,
+				&:focus,
+				&:hover {
+					background-color: $swiper-pagination-bullet-hover-background-color;
+					border: $swiper-pagination-bullet-hover-border;
+					outline: 0;
+				}
+
+				&-active {
+					background-color: $swiper-pagination-bullet-active-background-color;
+					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-background-color;
+		height: $swiper-scrollbar-height;
+
+		&-drag {
+			background-color: $swiper-scrollbar-drag-color;
+			height: 100%;
+			width: 100%;
+		}
+	}
+
+	&--reviews {
+		padding-top: 50px !important;
+	}
+}
+
+@include breakpoint-md {
+	.swiper {
+		.swiper-controls {
+			padding: $swiper-controls-padding-desktop;
+		}
+	}
+}

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

@@ -0,0 +1,25 @@
+<div class="swiper{{#xif 'this.carousel.carouselOptions.attributes && this.carousel.carouselOptions.attributes.class'}} {{this.carousel.carouselOptions.attributes.class}}{{/xif}}" {{{addAttributes this.carousel.carouselOptions 'class'}}}>
+	{{#if this.carousel.carouselOptions.attributes.aria.describedby}}
+		<p class="visually-hidden" id="{{this.carousel.carouselOptions.attributes.aria.describedby}}">{{{this.carousel.carouselOptions.description}}}</p>
+	{{/if}}
+	<ul class="swiper-wrapper"{{#if this.carousel.carouselOptions.wrapper}} {{{addAttributes this.carousel.carouselOptions.wrapper 'class'}}}{{/if}}>
+		{{#if this.carousel.template}}
+			{{fileInclude this.carousel.template
+				items = this.carousel.items
+				classModifier = this.carousel.classModifier
+				carouselOptions = this.carousel.carouselOptions
+			}}
+		{{/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>