mod-build 4.0.18 → 4.0.19-beta.2

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

@@ -1,153 +0,0 @@
-$checkbox-background-color: transparent !default;
-$checkbox-border: 0 !default;
-$checkbox-border-radius: 4px !default;
-$checkbox-color: $color-charcoal8 !default;
-$checkbox-font-size: 1rem !default;
-$checkbox-font-size-desktop: $checkbox-font-size !default;
-$checkbox-font-weight: normal !default;
-$checkbox-line-height: 1 !default;
-$checkbox-margin: 15px 0 !default;
-$checkbox-max-width: 100% !default;
-$checkbox-padding: 0 !default;
-$checkbox-text-align: left !default;
-$checkbox-transition: color .15s ease-in-out !default;
-
-$checkbox-label-margin: 0 !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;
-
-$checkbox-disclaimer-color: $checkbox-color !default;
-$checkbox-disclaimer-display: block !default;
-$checkbox-disclaimer-font-size: $checkbox-font-size !default;
-$checkbox-disclaimer-font-size-desktop: $checkbox-font-size-desktop !default;
-$checkbox-disclaimer-font-style: normal !default;
-$checkbox-disclaimer-font-weight: $checkbox-font-weight !default;
-$checkbox-disclaimer-line-height: 1.35 !default;
-$checkbox-disclaimer-margin: 15px 0 0 !default;
-
-// Focus
-$checkbox-focus-outline: 1px solid rgba($color-charcoal4, .5) !default;
-$checkbox-focus-outline-offset: 5px !default;
-
-// Checkbox Group
-$checkbox-group-legend-text-align: center !default;
-$checkbox-group-label-display: block !default;
-$checkbox-group-font-size: $checkbox-font-size !default;
-$checkbox-group-font-size-desktop: $checkbox-group-font-size !default;
-$checkbox-group-max-width: 100% !default;
-
-.checkbox {
-	background-color: $checkbox-background-color;
-	border: $checkbox-border;
-	border-radius: $checkbox-border-radius;
-	color: $checkbox-color;
-	margin: $checkbox-margin;
-	max-width: $checkbox-max-width;
-	padding: $checkbox-padding;
-	text-align: $checkbox-text-align;
-
-	label {
-		display: inline-block;
-		font-size: $checkbox-font-size;
-		font-weight: $checkbox-font-weight;
-		line-height: $checkbox-line-height;
-		margin: $checkbox-label-margin;
-		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;
-			}
-		}
-	}
-
-	&__disclaimer {
-		color: $checkbox-disclaimer-color;
-		display: $checkbox-disclaimer-display;
-		font-size: $checkbox-disclaimer-font-size;
-		font-style: $checkbox-disclaimer-font-style;
-		font-weight: $checkbox-disclaimer-font-weight;
-		line-height: $checkbox-disclaimer-line-height;
-		margin: $checkbox-disclaimer-margin;
-	}
-
-	&--group {
-		max-width: $checkbox-group-max-width;
-
-		legend {
-			text-align: $checkbox-group-legend-text-align;
-		}
-
-		label {
-			display: $checkbox-group-label-display;
-			font-size: $checkbox-group-font-size;
-		}
-	}
-}
-
-@include breakpoint-md {
-	.checkbox {
-		label {
-			font-size: $checkbox-font-size-desktop;
-		}
-
-		&__disclaimer {
-			font-size: $checkbox-disclaimer-font-size-desktop;
-		}
-
-		&--group {
-			label {
-				font-size: $checkbox-group-font-size-desktop;
-			}
-		}
-	}
-}

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

@@ -1,18 +0,0 @@
-{{#if this.field}}
-<fieldset class="checkbox checkbox--group{{#if this.field.attributes.class}} {{this.field.attributes.class}}{{/if}}" {{{addAttributes this.field 'class'}}}>
-	{{#if this.field.legend}}
-		<legend {{{addAttributes this.field.legend}}}>
-			{{{this.field.legend.text}}}
-			{{#if this.field.legend.disclaimer}}
-				<span class="checkbox__disclaimer">{{{this.field.legend.disclaimer}}}</span>
-			{{/if}}
-		</legend>
-	{{/if}}
-	{{#each this.field.options}}
-		<label>
-			<input type="checkbox" {{{addAttributes this 'type'}}} />
-			{{{this.text}}}
-		</label>
-	{{/each}}
-</fieldset>
-{{/if}}

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

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

@@ -1,129 +0,0 @@
-$expand-collapse-transition: $base-transition !default;
-
-$expand-collapse-toggle-wrapper-box-shadow: none !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-label-transition: background-color .15s ease-in-out !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, 10%) !default;
-$expand-collapse-icon-hover-color: darken($expand-collapse-icon-color, 10%) !default;
-
-.expand-collapse {
-	&__toggle-wrapper {
-		box-shadow: $expand-collapse-toggle-wrapper-box-shadow;
-	}
-
-	&__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-label-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

@@ -1,14 +0,0 @@
-{{#if this.expandCollapse.wrapper}}
-<div class="expand-collapse__toggle-wrapper{{#xif 'this.expandCollapse.wrapper.attributes && this.expandCollapse.wrapper.attributes.class'}} {{this.expandCollapse.wrapper.attributes.class}}{{/xif}}" {{{addAttributes this.expandCollapse.wrapper 'class'}}}>
-{{/if}}
-<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>
-{{#if this.expandCollapse.wrapper}}
-</div>
-{{/if}}

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

@@ -1,52 +0,0 @@
-"use strict";
-
-function scrollToElement(element, position, callback) {
-  element.scrollIntoView({
-    behavior: 'smooth',
-    block: position
-  });
-  if (callback && typeof callback === 'function') {
-    callback();
-  }
-}
-window.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);
-    }
-  });
-});

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

@@ -1,2 +0,0 @@
-"use strict";function scrollToElement(e,t,l){e.scrollIntoView({behavior:"smooth",block:t}),l&&"function"==typeof l&&l()}window.expandCollapseToggle=document.querySelectorAll(".expand-collapse__toggle"),expandCollapseToggle.forEach(function(e){var t=e.id,l=e.getAttribute("aria-expanded"),a=e.getAttribute("aria-controls"),s=document.getElementById(a),o=e.classList.contains("scroll-to-top");s.classList.add("expand-collapse__target"),"false"!==l||s.classList.contains("collapsed")||s.classList.add("collapsed"),document.getElementById(t).addEventListener("click",function(){var e="true"!==this.getAttribute("aria-expanded"),n=this.querySelector(".expand-collapse__label"),c=this.querySelector(".expand-collapse__icon i"),d=e?a:t;if(this.setAttribute("aria-expanded",e),n&&(n.innerHTML=n.dataset[e?"expandedLabel":"collapsedLabel"]),c&&(c.className=c.dataset[e?"expandedIcon":"collapsedIcon"]),"false"===l||s.classList.contains("collapsed")?s.classList.toggle("collapsed"):s.classList.add("collapsed"),o){var i=e?"start":"center",r=document.getElementById(t);setTimeout(function(){scrollToElement(r,i,function(){setTimeout(function(){document.getElementById(d).focus()},400)})},200)}})});
-//# sourceMappingURL=expand-collapse.min.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["accessible-components/expand-collapse/expand-collapse.js"],"names":["scrollToElement","element","position","callback","scrollIntoView","behavior","block","window","expandCollapseToggle","document","querySelectorAll","forEach","toggle","toggleId","id","ariaExpanded","getAttribute","ariaControls","expandCollapseTarget","getElementById","scrollToTop","classList","contains","add","addEventListener","shouldExpand","this","expandCollapseLabel","querySelector","expandCollapseIcon","focusOnElement","setAttribute","innerHTML","dataset","className","scrollPosition","setTimeout","focus"],"mappings":"YAAA,SAASA,iBAAgBC,EAASC,EAAUC,GAC3CF,EAAQG,gBACPC,SAAU,SACVC,MAAOJ,IAEJC,GAAgC,kBAAbA,IACtBA,IAIFI,OAAOC,qBAAuBC,SAASC,iBAAiB,4BACxDF,qBAAqBG,QAAQ,SAASC,GACrC,GAAIC,GAAWD,EAAOE,GACrBC,EAAeH,EAAOI,aAAa,iBACnCC,EAAeL,EAAOI,aAAa,iBACnCE,EAAuBT,SAASU,eAAeF,GAC/CG,EAAcR,EAAOS,UAAUC,SAAS,gBACzCJ,GAAqBG,UAAUE,IAAI,2BACd,UAAjBR,GAA6BG,EAAqBG,UAAUC,SAAS,cACxEJ,EAAqBG,UAAUE,IAAI,aAEpCd,SAASU,eAAeN,GAAUW,iBAAiB,QAAS,WAC3D,GAAIC,GAAsD,SAAvCC,KAAKV,aAAa,iBACpCW,EAAsBD,KAAKE,cAAc,2BACzCC,EAAqBH,KAAKE,cAAc,4BACxCE,EAAiBL,EAAeR,EAAeJ,CAahD,IAZAa,KAAKK,aAAa,gBAAiBN,GAC/BE,IACHA,EAAoBK,UAAYL,EAAoBM,QAAQR,EAAe,gBAAkB,mBAE1FI,IACHA,EAAmBK,UAAYL,EAAmBI,QAAQR,EAAe,eAAiB,kBAEtE,UAAjBV,GAA4BG,EAAqBG,UAAUC,SAAS,aACvEJ,EAAqBG,UAAUT,OAAO,aAEtCM,EAAqBG,UAAUE,IAAI,aAEhCH,EAAa,CAChB,GAAIe,GAAiBV,EAAe,QAAU,SAC7CxB,EAAUQ,SAASU,eAAeN,EACnCuB,YAAW,WACVpC,gBAAgBC,EAASkC,EAAgB,WACxCC,WAAW,WACV3B,SAASU,eAAeW,GAAgBO,SACtC,QAEF","file":"expand-collapse.min.js","sourcesContent":["function scrollToElement(element, position, callback) {\n\telement.scrollIntoView({\n\t\tbehavior: 'smooth',\n\t\tblock: position\n\t});\n\tif (callback && typeof callback === 'function') {\n\t\tcallback();\n\t}\n}\n\nwindow.expandCollapseToggle = document.querySelectorAll('.expand-collapse__toggle');\nexpandCollapseToggle.forEach(function(toggle) {\n\tvar toggleId = toggle.id,\n\t\tariaExpanded = toggle.getAttribute('aria-expanded'),\n\t\tariaControls = toggle.getAttribute('aria-controls'),\n\t\texpandCollapseTarget = document.getElementById(ariaControls),\n\t\tscrollToTop = toggle.classList.contains('scroll-to-top');\n\texpandCollapseTarget.classList.add('expand-collapse__target');\n\tif (ariaExpanded === 'false' && !expandCollapseTarget.classList.contains('collapsed')) {\n\t\texpandCollapseTarget.classList.add('collapsed');\n\t}\n\tdocument.getElementById(toggleId).addEventListener('click', function() {\n\t\tvar shouldExpand = this.getAttribute('aria-expanded') !== 'true',\n\t\t\texpandCollapseLabel = this.querySelector('.expand-collapse__label'),\n\t\t\texpandCollapseIcon = this.querySelector('.expand-collapse__icon i'),\n\t\t\tfocusOnElement = shouldExpand ? ariaControls : toggleId;\n\t\tthis.setAttribute('aria-expanded', shouldExpand);\n\t\tif (expandCollapseLabel) {\n\t\t\texpandCollapseLabel.innerHTML = expandCollapseLabel.dataset[shouldExpand ? 'expandedLabel' : 'collapsedLabel'];\n\t\t}\n\t\tif (expandCollapseIcon) {\n\t\t\texpandCollapseIcon.className = expandCollapseIcon.dataset[shouldExpand ? 'expandedIcon' : 'collapsedIcon'];\n\t\t}\n\t\tif (ariaExpanded === 'false' || expandCollapseTarget.classList.contains('collapsed')) {\n\t\t\texpandCollapseTarget.classList.toggle('collapsed');\n\t\t} else {\n\t\t\texpandCollapseTarget.classList.add('collapsed');\n\t\t}\n\t\tif (scrollToTop) {\n\t\t\tvar scrollPosition = shouldExpand ? 'start' : 'center',\n\t\t\t\telement = document.getElementById(toggleId);\n\t\t\tsetTimeout(function() {\n\t\t\t\tscrollToElement(element, scrollPosition, function() {\n\t\t\t\t\tsetTimeout(function() {\n\t\t\t\t\t\tdocument.getElementById(focusOnElement).focus();\n\t\t\t\t\t}, 400);\n\t\t\t\t});\n\t\t\t}, 200);\n\t\t}\n\t});\n});\n"]}

package/src/accessible-components/featured-block/_featured-block.scss

@@ -1,221 +0,0 @@
-$featured-block-background: $color-white !default;
-$featured-block-padding: 40px 0 !default;
-$featured-block-padding-tablet: 60px 0 !default;
-$featured-block-padding-desktop: 80px 0 !default;
-$featured-block-text-align: center !default;
-$featured-block-text-align-desktop: left !default;
-
-$featured-block-content-align-items: center !default;
-$featured-block-content-display: flex !default;
-$featured-block-content-justify-content: space-between !default;
-$featured-block-content-margin: 0 -15px !default;
-
-$featured-block-content-max-width-tablet: 550px !default;
-$featured-block-content-max-width-desktop: 100% !default;
-
-$featured-block-column-left-flex-desktop: 0 0 48% !default;
-$featured-block-column-right-flex-desktop: 0 0 48% !default;
-$featured-block-column-padding: 0 15px !default;
-
-$featured-block-title-color: $color-charcoal8 !default;
-$featured-block-title-font-family: inherit !default;
-$featured-block-title-font-size: 1.375rem !default;
-$featured-block-title-font-size-desktop: 1.5rem !default;
-$featured-block-title-font-weight: 700 !default;
-$featured-block-title-line-height: 1.25 !default;
-$featured-block-title-margin: 0 0 15px !default;
-
-$featured-block-subtitle-color: $color-charcoal8 !default;
-$featured-block-subtitle-font-size: 1rem !default;
-$featured-block-subtitle-font-size-desktop: 1.125rem !default;
-$featured-block-subtitle-font-weight: 400 !default;
-$featured-block-subtitle-line-height: 1.35 !default;
-$featured-block-subtitle-margin: 0 !default;
-$featured-block-subtitle-text-align: left !default;
-
-$featured-block-description-color: $color-charcoal8 !default;
-$featured-block-description-font-size: $featured-block-subtitle-font-size !default;
-$featured-block-description-font-size-desktop: $featured-block-subtitle-font-size-desktop !default;
-$featured-block-description-font-weight: $featured-block-subtitle-font-weight !default;
-$featured-block-description-line-height: $featured-block-subtitle-line-height !default;
-$featured-block-description-margin: $featured-block-subtitle-margin !default;
-$featured-block-description-text-align: $featured-block-subtitle-text-align !default;
-
-$featured-block-partner-margin: 20px 0 !default;
-$featured-block-partner-img-display: inline-block !default;
-$featured-block-partner-img-margin: 0 10px !default;
-$featured-block-partner-img-height: auto !default;
-$featured-block-partner-img-width: 100px !default;
-
-$featured-block-img-border-radius: 0 !default;
-$featured-block-img-display: inline-block !default;
-$featured-block-img-margin: 0 auto 25px !default;
-$featured-block-img-margin-desktop: 0 !default;
-$featured-block-img-max-width: 100% !default;
-$featured-block-img-width: 100% !default;
-
-$featured-block-btn-display: block !default;
-$featured-block-btn-margin: 25px auto 0 !default;
-$featured-block-btn-margin-desktop: 25px 0 0 !default;
-$featured-block-btn-max-width: 250px !default;
-
-$featured-block-inprogress-display: none !default;
-
-.featured-block {
-	background: $featured-block-background;
-	padding: $featured-block-padding;
-	text-align: $featured-block-text-align;
-
-	&__column {
-		padding: $featured-block-column-padding;
-	}
-
-	&__title {
-		color: $featured-block-title-color;
-		font-family: $featured-block-title-font-family;
-		font-size: $featured-block-title-font-size;
-		font-weight: $featured-block-title-font-weight;
-		line-height: $featured-block-title-line-height;
-		margin: $featured-block-title-margin;
-	}
-
-	&__subtitle {
-		color: $featured-block-subtitle-color;
-		font-size: $featured-block-subtitle-font-size;
-		font-weight: $featured-block-subtitle-font-weight;
-		line-height: $featured-block-subtitle-line-height;
-		margin: $featured-block-subtitle-margin;
-		text-align: $featured-block-subtitle-text-align;
-	}
-
-	&__description {
-		color: $featured-block-description-color;
-		font-size: $featured-block-description-font-size;
-		font-weight: $featured-block-description-font-weight;
-		line-height: $featured-block-description-line-height;
-		margin: $featured-block-description-margin;
-		text-align: $featured-block-description-text-align;
-	}
-
-	&__partners {
-		margin: $featured-block-partner-margin;
-
-		img {
-			display: $featured-block-partner-img-display;
-			height: $featured-block-partner-img-height;
-			margin: $featured-block-partner-img-margin;
-			vertical-align: middle;
-			width: $featured-block-partner-img-width;
-		}
-	}
-
-	&__image {
-		img {
-			border-radius: $featured-block-img-border-radius;
-			display: $featured-block-img-display;
-			height: auto;
-			margin: $featured-block-img-margin;
-			max-width: $featured-block-img-max-width;
-			width: $featured-block-img-width;
-		}
-	}
-
-	&__btn {
-		display: $featured-block-btn-display;
-		margin: $featured-block-btn-margin;
-		max-width: $featured-block-btn-max-width;
-	}
-}
-
-.form-in-progress {
-	.featured-block {
-		display: $featured-block-inprogress-display;
-	}
-}
-
-@include breakpoint-md {
-	.featured-block {
-		padding: $featured-block-padding-tablet;
-
-		&__content {
-			margin: 0 auto;
-			max-width: $featured-block-content-max-width-tablet;
-		}
-		&__title {
-			font-size: $featured-block-title-font-size-desktop;
-		}
-
-		&__subtitle {
-			font-size: $featured-block-subtitle-font-size-desktop;
-		}
-
-		&__description {
-			font-size: $featured-block-description-font-size-desktop;
-		}
-
-		&--flex-md {
-			text-align: $featured-block-text-align;
-
-			.featured-block {
-				&__content {
-					align-items: $featured-block-content-align-items;
-					display: $featured-block-content-display;
-					justify-content: $featured-block-content-justify-content;
-					margin: $featured-block-content-margin;
-					max-width: $featured-block-content-max-width-desktop;
-				}
-
-				&__column {
-					flex: $featured-block-column-left-flex-desktop;
-
-					~ .featured-block__column {
-						flex: $featured-block-column-right-flex-desktop;
-					}
-				}
-
-				&__image {
-					img {
-						margin: $featured-block-img-margin-desktop;
-					}
-				}
-
-				&__btn {
-					margin: $featured-block-btn-margin-desktop;
-				}
-			}
-		}
-	}
-}
-
-@include breakpoint-lg {
-	.featured-block {
-		padding: $featured-block-padding-desktop;
-		text-align: $featured-block-text-align-desktop;
-
-		&__content {
-			align-items: $featured-block-content-align-items;
-			display: $featured-block-content-display;
-			justify-content: $featured-block-content-justify-content;
-			margin: $featured-block-content-margin;
-			max-width: $featured-block-content-max-width-desktop;
-		}
-
-		&__column {
-			flex: $featured-block-column-left-flex-desktop;
-
-			~ .featured-block__column {
-				flex: $featured-block-column-right-flex-desktop;
-			}
-		}
-
-		&__image {
-			img {
-				margin: $featured-block-img-margin-desktop;
-			}
-		}
-
-		&__btn {
-			margin: $featured-block-btn-margin-desktop;
-		}
-	}
-}

package/src/accessible-components/featured-block/featured-block.html

@@ -1,54 +0,0 @@
-<section class="featured-block{{#xif 'this.block.attributes && this.block.attributes.class'}} {{this.block.attributes.class}}{{/xif}}" {{{addAttributes this.block 'class'}}}>
-	<div class="featured-block__container container">
-	{{#if this.block.title}}
-		<h2 class="featured-block__title{{#xif 'this.block.title.attributes && this.block.title.attributes.class'}} {{this.block.title.attributes.class}}{{/xif}}" {{{addAttributes this.block.title 'class'}}}>{{{this.block.title.text}}}</h2>
-	{{/if}}
-	{{#xif "this.block.columns.length > 1"}}<div class="featured-block__content row">{{/xif}}
-		{{#each this.block.columns}}
-			<div class="featured-block__column{{#xif 'this.attributes && this.attributes.class'}} {{this.attributes.class}}{{/xif}}" {{{addAttributes this 'class'}}}>
-				{{#if this.title}}
-					<h2 class="featured-block__title{{#xif 'this.title.attributes && this.title.attributes.class'}} {{this.title.attributes.class}}{{/xif}}" {{{addAttributes this.title 'class'}}}>{{{this.title.text}}}</h2>
-				{{/if}}
-				{{#if this.subtitle}}
-					<p class="featured-block__subtitle{{#xif 'this.subtitle.attributes && this.subtitle.attributes.class'}} {{this.subtitle.attributes.class}}{{/xif}}" {{{addAttributes this.subtitle 'class'}}}>{{{this.subtitle.text}}}</p>
-				{{/if}}
-				{{#if this.description}}
-					{{#unless this.description.placeUnderLogos}}
-						<p class="featured-block__description{{#xif 'this.description.attributes && this.description.attributes.class'}} {{this.description.attributes.class}}{{/xif}}" {{{addAttributes this.description 'class'}}}>{{{this.description.text}}}</p>
-					{{/unless}}
-				{{/if}}
-				{{#if this.picture}}
-					<div class="featured-block__image">
-						{{ fileInclude 'src/accessible-components/picture/picture.html'
-							picture = this.picture
-						}}
-					</div>
-				{{/if}}
-				{{#if this.customContentTemplate}}
-					{{ fileInclude this.customContentTemplate
-						content = this
-					}}
-				{{/if}}
-				{{#if this.featuredPartnerLogos}}
-					<div class="featured-block__partners">
-						{{#each this.featuredPartnerLogos}}
-							{{ fileInclude 'src/accessible-components/picture/picture.html'
-								picture = this.picture
-							}}
-						{{/each}}
-					</div>
-				{{/if}}
-				{{#if this.description.placeUnderLogos}}
-					<p class="featured-block__description{{#xif 'this.description.attributes && this.description.attributes.class'}} {{this.description.attributes.class}}{{/xif}}" {{{addAttributes this.description 'class'}}}>{{{this.description.text}}}</p>
-				{{/if}}
-				{{#if this.button}}
-					{{ fileInclude 'src/accessible-components/button/button.html'
-						button = this.button
-						class = 'featured-block__btn'
-					}}
-				{{/if}}
-			</div>
-		{{/each}}
-	{{#xif "this.block.columns.length > 1"}}</div>{{/xif}}
-	</div>
-</section>