mod-build 3.6.71 → 4.0.0-alpha.1

package/siteconfig.js

@@ -0,0 +1,38 @@
+export let siteData = {
+	primary_trade: 'Medical Alerts',
+	service: 'alerts_medical', // required to fetch the correct tcpa blurb
+	gtm_container_ID: 'GTM-TBJV3H', // e.g. GTM-N23VMDW
+	qs_gtm_container_ID: 'GTM-TBJV3H',
+	email: 'support@emedicalalerts.com', // e.g.  // e.g. support@homesolarsurvey.com
+	email_unsub: 'unsubscribe@emedicalalerts.com', // e.g. unsubscribe@homesolarsurvey.com
+	domain: 'emedicalalerts.com', // e.g. homesolarsurvey.com
+	company_name: 'eMedicalAlerts', // e.g. Home Solar Survey
+	website_name: 'eMedicalAlerts.com', // e.g. HomeSolarSurvey.com
+	useCDN: true,
+	isWhiteLabel: true,  
+	isQSPage: true, 
+	useAccessibleConfig: true 
+};
+ 
+export function setSiteData(newSiteData) {
+	siteData = newSiteData;
+} 
+ 
+export const defaultSettings = {
+	tmpFolder: '.tmp', 
+	srcFolder: 'src',
+	browserSyncServeFolders: ['.tmp', 'src', 'node_modules/mod-style-bootstrap/src', 'node_modules/mod-base/src'],
+	distFolder: 'dist',
+	fontsSubfolder: 'fonts',
+	imagesSubfolder: 'images', 
+	stylesSubfolder: 'styles',  
+	scriptsSubfolder: 'scripts',
+	scriptsCompiledFolder: 'scripts/compiled',
+	templatesSubfolder: 'templates', 
+	dataSubfolder: 'data',  
+	modBuild: '',  
+	resourceDomain: process.env.IS_LOCAL ? 'qa.modernize.com' : 'modernize.com',
+	nodeEnv: process.env.NODE_ENV,
+	isLocal: process.env.IS_LOCAL || import.meta?.env?.DEV,
+	buildPath: process.env.BUILD_PATH
+}

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

@@ -0,0 +1,195 @@
+$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: $base-transition !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-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-line-height: $button-line-height !default;
+$back-button-margin: 10px 0 0 !default;
+$back-button-padding: 2px 5px !default;
+$back-button-hover-background-color: transparent !default;
+$back-button-hover-color: darken($back-button-color, 20%) !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-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-size: $button-font-size !default;
+$button-secondary-font-size-desktop: $button-secondary-font-size !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;
+
+.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;
+
+	&__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;
+		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;
+		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;
+		max-width: $button-primary-max-width;
+	}
+
+	&--secondary {
+		background-color: $button-secondary-background-color;
+		border: $button-secondary-border;
+		color: $button-secondary-color;
+		font-size: $button-secondary-font-size;
+		height: $button-secondary-height;
+		max-width: $button-secondary-max-width;
+		padding: $button-secondary-padding;
+		text-transform: $button-secondary-text-transform;
+	}
+}
+
+.form-in-progress {
+	.btn--back {
+		display: $back-button-display;
+	}
+}
+
+@include breakpoint-md {
+	.btn {
+		font-size: $button-font-size-desktop;
+		height: $button-height-desktop;
+
+		&--back {
+			&: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,4 @@
+<button class="btn--back back-btn{{#if class}} {{class}}{{/if}}" data-btn="back" type="button">
+	<i class="icon-caret-left"></i>
+	Back
+</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, 20%) !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, 20%) !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>

package/src/accessible-components/checkbox/_checkbox.scss

@@ -0,0 +1,96 @@
+$checkbox-background-color: transparent !default;
+$checkbox-border: 0 !default;
+$checkbox-border-radius: 4px !default;
+$checkbox-font-size: 1rem !default;
+$checkbox-font-weight: normal !default;
+$checkbox-line-height: 1 !default;
+$checkbox-color: $color-charcoal8 !default;
+$checkbox-margin: 15px 0 !default;
+$checkbox-padding: 0 !default;
+$checkbox-text-align: left !default;
+$checkbox-transition: color .15s ease-in-out !default;
+
+$checkbox-label-padding-left: 30px !default;
+$checkbox-label-width: auto !default;
+
+$checkbox-input-background-color: $color-white !default;
+$checkbox-input-border: 1px solid $color-charcoal4 !default;
+$checkbox-input-border-radius: 2px !default;
+$checkbox-input-box-shadow: 0 !default;
+$checkbox-input-checked-background-color: $color-charcoal6 !default;
+$checkbox-input-checked-border: 1px solid $checkbox-input-checked-background-color !default;
+$checkbox-input-checked-color: $color-white !default;
+$checkbox-input-cursor: pointer !default;
+$checkbox-input-font-size: 1.125rem !default;
+$checkbox-input-margin: 0 !default;
+$checkbox-input-position-left: 0 !default;
+$checkbox-input-position-top: -2px !default;
+$checkbox-input-size: 1.25rem !default;
+
+// Focus
+$checkbox-focus-outline: 1px solid rgba($color-charcoal4, .5) !default;
+$checkbox-focus-outline-offset: 5px !default;
+
+
+.checkbox {
+	background-color: $checkbox-background-color;
+	border: $checkbox-border;
+	border-radius: $checkbox-border-radius;
+	color: $checkbox-color;
+	margin: $checkbox-margin;
+	padding: $checkbox-padding;
+	text-align: $checkbox-text-align;
+
+	+ .checkbox {
+		margin-top: 0;
+	}
+
+	label {
+		display: inline-block;
+		font-size: $checkbox-font-size;
+		font-weight: $checkbox-font-weight;
+		line-height: $checkbox-line-height;
+		padding-left: $checkbox-label-padding-left;
+		position: relative;
+		width: $checkbox-label-width;
+
+		&:focus-within {
+			outline: $checkbox-focus-outline;
+			outline-offset: $checkbox-focus-outline-offset;
+		}
+
+		input[type=checkbox] {
+			background: transparent;
+			border-color: $color-white;
+			border-radius: 0;
+			cursor: $checkbox-input-cursor;
+			left: $checkbox-input-position-left;
+			margin: $checkbox-input-margin;
+			position: absolute;
+			top: $checkbox-input-position-top;
+
+			&::before {
+				@include icon-fill;
+				background: $checkbox-input-background-color;
+				border: $checkbox-input-border;
+				border-radius: $checkbox-input-border-radius;
+				box-shadow: $checkbox-input-box-shadow;
+				color: $checkbox-input-background-color;
+				content: '\e920';
+				display: block;
+				height: $checkbox-input-size;
+				text-align: center;
+				transition: $checkbox-transition;
+				width: $checkbox-input-size;
+			}
+
+			&:checked::before {  // sass-lint:disable-line
+				background-color: $checkbox-input-checked-background-color;
+				border: $checkbox-input-checked-border;
+				color: $checkbox-input-checked-color;
+				font-size: $checkbox-input-font-size;
+				line-height: $checkbox-line-height;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,8 @@
+{{#if this.field}}
+<div class="checkbox">
+	<label>
+		<input type="checkbox" {{{addAttributes this.field 'type'}}} />
+		{{{this.field.text}}}
+	</label>
+</div>
+{{/if}}

package/src/accessible-components/expand-collapse/_expand-collapse.scss

@@ -0,0 +1,122 @@
+$expand-collapse-transition: $base-transition !default;
+
+$expand-collapse-toggle-background-color: transparent !default;
+$expand-collapse-toggle-border: 0 !default;
+$expand-collapse-toggle-border-radius: 0 !default;
+$expand-collapse-toggle-color: $color-charcoal4 !default;
+$expand-collapse-toggle-font-size: 1rem !default;
+$expand-collapse-toggle-font-weight: 400 !default;
+$expand-collapse-toggle-letter-spacing: 0 !default;
+$expand-collapse-toggle-margin: 0 auto 45px !default;
+$expand-collapse-toggle-padding: 0 !default;
+$expand-collapse-toggle-text-transform: capitalize !default;
+
+$expand-collapse-icon-background-color: $color-white !default;
+$expand-collapse-icon-border: 1px solid $color-charcoal1 !default;
+$expand-collapse-icon-border-top: 0 !default;
+$expand-collapse-icon-border-radius: 100px !default;
+$expand-collapse-icon-color: $color-charcoal4 !default;
+$expand-collapse-icon-display: block !default;
+$expand-collapse-icon-font-size: 1.125rem !default;
+$expand-collapse-icon-line-height: 1 !default;
+$expand-collapse-icon-margin: -1px auto 0 !default;
+$expand-collapse-icon-padding: 5px 0 9px !default;
+$expand-collapse-icon-position: relative !default;
+$expand-collapse-icon-width: 60px !default;
+$expand-collapse-icon-z-index: 2 !default;
+
+$expand-collapse-label-display: inline-block !default;
+$expand-collapse-label-margin: 20px auto 0 !default;
+$expand-collapse-label-text-decoration: underline !default;
+
+$expand-collapse-target-max-height: 2000px !default;
+$expand-collapse-target-transition: .5s !default;
+
+// Focus
+$expand-collapse-toggle-focus-outline: 1px solid rgba($expand-collapse-toggle-color, .5) !default;
+$expand-collapse-toggle-focus-outline-offset: 2px !default;
+
+// Hover
+$expand-collapse-label-hover-background-color: transparent !default;
+$expand-collapse-toggle-hover-color: darken($expand-collapse-toggle-color, 20%) !default;
+$expand-collapse-icon-hover-color: darken($expand-collapse-icon-color, 20%) !default;
+
+.expand-collapse {
+	&__toggle {
+		background-color: $expand-collapse-toggle-background-color;
+		border: $expand-collapse-toggle-border;
+		border-radius: $expand-collapse-toggle-border-radius;
+		color: $expand-collapse-toggle-color;
+		cursor: pointer;
+		font-size: $expand-collapse-toggle-font-size;
+		font-weight: $expand-collapse-toggle-font-weight;
+		letter-spacing: $expand-collapse-toggle-letter-spacing;
+		margin: $expand-collapse-toggle-margin;
+		padding: $expand-collapse-toggle-padding;
+		text-transform: $expand-collapse-toggle-text-transform;
+		transition: $expand-collapse-transition;
+
+		&:focus {
+			outline: $expand-collapse-toggle-focus-outline;
+			outline-offset: $expand-collapse-toggle-focus-outline-offset;
+		}
+	}
+
+	&__icon {
+		background-color: $expand-collapse-icon-background-color;
+		border: $expand-collapse-icon-border;
+		border-top: $expand-collapse-icon-border-top;
+		border-bottom-left-radius: $expand-collapse-icon-border-radius;
+		border-bottom-right-radius: $expand-collapse-icon-border-radius;
+		color: $expand-collapse-icon-color;
+		display: $expand-collapse-icon-display;
+		font-size: $expand-collapse-icon-font-size;
+		line-height: $expand-collapse-icon-line-height;
+		margin: $expand-collapse-icon-margin;
+		padding: $expand-collapse-icon-padding;
+		position: $expand-collapse-icon-position;
+		transition: $expand-collapse-transition;
+		width: $expand-collapse-icon-width;
+		z-index: $expand-collapse-icon-z-index;
+	}
+
+	&__label {
+		display: $expand-collapse-label-display;
+		margin: $expand-collapse-label-margin;
+		text-decoration: $expand-collapse-label-text-decoration;
+		transition: $expand-collapse-transition;
+	}
+
+	&__target {
+		max-height: $expand-collapse-target-max-height;
+		overflow: hidden;
+		transition: $expand-collapse-target-transition;
+
+		&.collapsed {
+			max-height: 0;
+			opacity: 0;
+			visibility: collapse;
+		}
+	}
+}
+
+@include breakpoint-md {
+	.expand-collapse {
+		&__toggle {
+			&:focus,
+			&:hover {
+				color: $expand-collapse-toggle-hover-color;
+
+				.expand-collapse {
+					&__label {
+						background-color: $expand-collapse-label-hover-background-color;
+					}
+
+					&__icon {
+						color: $expand-collapse-icon-hover-color;
+					}
+				}
+			}
+		}
+	}
+}

package/src/accessible-components/expand-collapse/expand-collapse.html

@@ -0,0 +1,8 @@
+<button class="expand-collapse__toggle{{#xif 'this.expandCollapse.attributes && this.expandCollapse.attributes.class'}} {{this.expandCollapse.attributes.class}}{{/xif}}{{#xif 'this.expandCollapse.scrollToTop === true'}} scroll-to-top{{/xif}}" {{{addAttributes this.expandCollapse 'class'}}}>
+	{{#if this.expandCollapse.icon}}
+		<span class="expand-collapse__icon">
+			<i class="{{#xif 'this.expandCollapse.collapsedByDefault === true'}}{{this.expandCollapse.icon.collapsed}}{{else}}{{this.expandCollapse.icon.expanded}}{{/xif}}" data-expanded-icon="{{this.expandCollapse.icon.expanded}}" data-collapsed-icon="{{this.expandCollapse.icon.collapsed}}"></i>
+		</span>
+	{{/if}}
+	<span class="expand-collapse__label" data-expanded-label="{{this.expandCollapse.label.expanded}}" data-collapsed-label="{{this.expandCollapse.label.collapsed}}">{{#xif 'this.expandCollapse.collapsedByDefault === true'}}{{this.expandCollapse.label.collapsed}}{{else}}{{this.expandCollapse.label.expanded}}{{/xif}}</span>
+</button>

package/src/accessible-components/expand-collapse/expand-collapse.js

@@ -0,0 +1,52 @@
+"use strict";
+
+function scrollToElement(element, position, callback) {
+  element.scrollIntoView({
+    behavior: 'smooth',
+    block: position
+  });
+  if (callback && typeof callback === 'function') {
+    callback();
+  }
+}
+var expandCollapseToggle = document.querySelectorAll('.expand-collapse__toggle');
+expandCollapseToggle.forEach(function (toggle) {
+  var toggleId = toggle.id,
+    ariaExpanded = toggle.getAttribute('aria-expanded'),
+    ariaControls = toggle.getAttribute('aria-controls'),
+    expandCollapseTarget = document.getElementById(ariaControls),
+    scrollToTop = toggle.classList.contains('scroll-to-top');
+  expandCollapseTarget.classList.add('expand-collapse__target');
+  if (ariaExpanded === 'false' && !expandCollapseTarget.classList.contains('collapsed')) {
+    expandCollapseTarget.classList.add('collapsed');
+  }
+  document.getElementById(toggleId).addEventListener('click', function () {
+    var shouldExpand = this.getAttribute('aria-expanded') !== 'true',
+      expandCollapseLabel = this.querySelector('.expand-collapse__label'),
+      expandCollapseIcon = this.querySelector('.expand-collapse__icon i'),
+      focusOnElement = shouldExpand ? ariaControls : toggleId;
+    this.setAttribute('aria-expanded', shouldExpand);
+    if (expandCollapseLabel) {
+      expandCollapseLabel.innerHTML = expandCollapseLabel.dataset[shouldExpand ? 'expandedLabel' : 'collapsedLabel'];
+    }
+    if (expandCollapseIcon) {
+      expandCollapseIcon.className = expandCollapseIcon.dataset[shouldExpand ? 'expandedIcon' : 'collapsedIcon'];
+    }
+    if (ariaExpanded === 'false' || expandCollapseTarget.classList.contains('collapsed')) {
+      expandCollapseTarget.classList.toggle('collapsed');
+    } else {
+      expandCollapseTarget.classList.add('collapsed');
+    }
+    if (scrollToTop) {
+      var scrollPosition = shouldExpand ? 'start' : 'center',
+        element = document.getElementById(toggleId);
+      setTimeout(function () {
+        scrollToElement(element, scrollPosition, function () {
+          setTimeout(function () {
+            document.getElementById(focusOnElement).focus();
+          }, 400);
+        });
+      }, 200);
+    }
+  });
+});