mod-build 3.6.71 → 4.0.0-alpha.1

package/src/accessible-components/header/_header.scss

@@ -0,0 +1,289 @@
+$header-background-color: $color-white !default;
+$header-padding: 10px 0 !default;
+$header-padding-desktop: 15px 0 !default;
+$header-position: relative !default;
+$header-position-top: 0 !default;
+$header-z-index: 2 !default;
+
+$header-container-padding: 0 15px !default;
+
+$header-content-align-items: center !default;
+$header-content-display: flex !default;
+$header-content-justify-content: center !default;
+$header-content-justify-content-desktop: space-between !default;
+
+$header-logo-display: inline-block !default;
+$header-logo-height: auto !default;
+$header-logo-width: 195px !default;
+$header-logo-margin: 0 !default;
+$header-logo-height-desktop: auto !default;
+$header-logo-width-desktop: 245px !default;
+$header-logo-margin-desktop: $header-logo-margin !default;
+$header-logo-vertical-align: middle !default;
+
+$header-secondary-logo-display: $header-logo-display !default;
+$header-secondary-logo-height: auto !default;
+$header-secondary-logo-width: 73px !default;
+$header-secondary-logo-height-desktop: auto !default;
+$header-secondary-logo-width-desktop: 113px !default;
+$header-secondary-logo-vertical-align: middle !default;
+
+$header-secondary-logo-padding-left: 20px !default;
+$header-secondary-logo-padding-left-desktop: 40px !default;
+$header-secondary-logo-divider-background-color: $color-charcoal3 !default;
+$header-secondary-logo-divider-height: calc(100% + 10px) !default;
+$header-secondary-logo-divider-position: absolute !default;
+$header-secondary-logo-divider-position-left: 10px !default;
+$header-secondary-logo-divider-position-left-desktop: 20px !default;
+$header-secondary-logo-divider-width: 1px !default;
+
+$header-back-button-background-color: transparent !default;
+$header-back-button-border-right: 1px solid darken($color-charcoal3, 5%) !default;
+$header-back-button-color: darken($color-charcoal3, 5%) !default;
+$header-back-button-font-size: 1.125rem !default;
+$header-back-button-line-height: 1 !default;
+$header-back-button-padding: 18px 0 !default;
+
+$header-show-button-button-flex: 0 15% !default;
+$header-show-button-logo-flex: 0 85% !default;
+$header-show-button-padding: 0 !default;
+$header-show-button-container-padding: 0 !default;
+$header-show-button-content-min-height: 55px !default;
+
+$header-bbb-logo-height: 30px !default;
+$header-bbb-logo-width: 82.5px !default;
+$header-bbb-logo-height-desktop: 42px !default;
+$header-bbb-logo-width-desktop: 115px !default;
+
+$header-tagline-color: $color-white !default;
+$header-tagline-font-size: 1.125rem !default;
+$header-tagline-font-weight: 700 !default;
+
+$callrail-display: none !default;
+$call-color: $color-black !default;
+$call-font-size: 1.125rem !default;
+$call-font-weight: 400 !default;
+$call-number-font-weight: 700 !default;
+$call-link-color: inherit !default;
+$call-link-text-decoration: none !default;
+$call-icon-width: 12px !default;
+$call-icon-width-desktop: 20px !default;
+
+$call-button-align-self: center !default;
+$call-button-background-color: $color-white !default;
+$call-button-border: 1px solid $call-color !default;
+$call-button-border-radius: 15px !default;
+$call-button-color: $call-color !default;
+$call-button-hover-color: $call-button-color !default;
+$call-button-display: inline-block !default;
+$call-button-font-size: .75rem !default;
+$call-button-font-size-desktop: $call-font-size !default;
+$call-button-font-weight: $call-font-weight !default;
+$call-button-margin: 0 0 0 15px !default;
+$call-button-padding: 4px 12px !default;
+$call-button-text-transform: uppercase !default;
+$call-button-transition: $base-transition !default;
+
+.header {
+	background-color: $header-background-color;
+	padding: $header-padding;
+	position: $header-position;
+	top: $header-position-top;
+	z-index: $header-z-index;
+
+	.container {
+		padding: $header-container-padding;
+	}
+
+	&__content {
+		align-items: $header-content-align-items;
+		display: $header-content-display;
+		justify-content: $header-content-justify-content;
+	}
+
+	&__logo {
+		img, svg {
+			display: $header-logo-display;
+			height: $header-logo-height;
+			margin: $header-logo-margin;
+			vertical-align: $header-logo-vertical-align;
+			width: $header-logo-width;
+		}
+	}
+
+	&__secondary-logo {
+		display: $header-secondary-logo-display;
+		padding-left: $header-secondary-logo-padding-left;
+		position: relative;
+		vertical-align: $header-secondary-logo-vertical-align;
+
+		img, svg {
+			height: $header-secondary-logo-height;
+			width: $header-secondary-logo-width;
+		}
+
+		&:before {
+			background-color: $header-secondary-logo-divider-background-color;
+			content: '';
+			height: $header-secondary-logo-divider-height;
+			position: $header-secondary-logo-divider-position;
+			left: $header-secondary-logo-divider-position-left;
+			top: 50%;
+			transform: translateY(-50%);
+			width: $header-secondary-logo-divider-width;
+		}
+	}
+
+	&__bbb-logo {
+		height: $header-bbb-logo-height;
+		width: $header-bbb-logo-width;
+	}
+
+	&__back-button {
+		background-color: $header-back-button-background-color;
+		border: 0;
+		border-right: $header-back-button-border-right;
+		color: $header-back-button-color;
+		display: none;
+		font-size: $header-back-button-font-size;
+		line-height: $header-back-button-line-height;
+		padding: $header-back-button-padding;
+	}
+
+	&__tagline {
+		color: $header-tagline-color;
+		font-size: $header-tagline-font-size;
+		font-weight: $header-tagline-font-weight;
+	}
+
+	&__call {
+		color: $call-color;
+		font-size: $call-font-size;
+		font-weight: $call-font-weight;
+
+		.header__call-icon {
+			width: $call-icon-width-desktop;
+		}
+	}
+
+	&__call-link {
+		color: $call-link-color;
+		text-decoration: $call-link-text-decoration;
+	}
+
+	&__call-number {
+		font-weight: $call-number-font-weight;
+	}
+
+	&__call-icon {
+		width: $call-icon-width;
+	}
+
+	&__call-button {
+		align-self: $call-button-align-self;
+		background-color: $call-button-background-color;
+		border: $call-button-border;
+		border-radius: $call-button-border-radius;
+		color: $call-button-color;
+		display: $call-button-display;
+		font-size: $call-button-font-size;
+		font-weight: $call-button-font-weight;
+		margin: $call-button-margin;
+		padding: $call-button-padding;
+		text-transform: $call-button-text-transform;
+		transition: $call-button-transition;
+
+		&:hover,
+		&:focus {
+			color: $call-button-hover-color;
+		}
+	}
+}
+
+.callNowControls {
+	display: $callrail-display;
+}
+
+@include breakpoint-phone {
+	.header {
+		&--transparent {
+			background-color: transparent;
+		}
+
+		&--show-back-button {
+			padding: $header-show-button-padding;
+
+			.header__content {
+				min-height: $header-show-button-content-min-height;
+			}
+
+			.container {
+				padding: $header-show-button-container-padding;
+			}
+
+			.header__back-button {
+				flex: $header-show-button-button-flex;
+			}
+			.header__logo {
+				flex: $header-show-button-logo-flex;
+				text-align: center;
+			}
+		}
+	}
+
+	.form-in-progress {
+		.header--show-back-button {
+			.header__back-button {
+				display: block;
+			}
+		}
+	}
+}
+
+@include breakpoint-md {
+	.header {
+		padding: $header-padding-desktop;
+
+		&__content {
+			justify-content: $header-content-justify-content-desktop;
+		}
+
+		&__back-button {
+			display: none;
+		}
+
+		&__logo {
+			img, svg {
+				height: $header-logo-height-desktop;
+				margin: $header-logo-margin-desktop;
+				width: $header-logo-width-desktop;
+			}
+		}
+
+		&__secondary-logo {
+			padding-left: $header-secondary-logo-padding-left-desktop;
+
+			img, svg {
+				height: $header-secondary-logo-height-desktop;
+				width: $header-secondary-logo-width-desktop;
+			}
+
+			&:before {
+				left: $header-secondary-logo-divider-position-left-desktop;
+			}
+		}
+
+		&__bbb-logo {
+			height: $header-bbb-logo-height-desktop;
+			width: $header-bbb-logo-width-desktop;
+		}
+	}
+}
+
+@include breakpoint-lg {
+	.header {
+		&__call-button {
+			font-size: $call-button-font-size-desktop;
+		}
+	}
+}

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

@@ -0,0 +1,66 @@
+<header class="header{{#if this.header.attributes.class}} {{this.header.attributes.class}}{{/if}}{{#xif 'this.header.includeBackButton === true'}} header--show-back-button{{/xif}}" {{{addAttributes this.header 'class'}}}>
+    <div class="container">
+        <div class="header__content">
+			{{#xif "this.header.includeBackButton === true"}}
+			<button class="header__back-button" data-btn="back">
+				<i class="icon-caret-left">
+					<span class="visually-hidden">Back</span>
+				</i>
+			</button>
+			{{/xif}}
+			{{#if this.header.logo}}
+			<div class="header__logo">
+				{{ fileInclude 'src/accessible-components/picture/picture.html'
+					picture = this.header.logo.picture
+				}}
+				{{#if this.header.logo.secondaryLogo}}
+					<span class="header__secondary-logo">
+						{{ fileInclude 'src/accessible-components/picture/picture.html'
+							picture = this.header.logo.secondaryLogo.picture
+						}}
+					</span>
+				{{/if}}
+			</div>
+			{{/if}}
+			{{#if this.header.callRail}}
+			<div class="callNowControls">
+				{{#if this.header.callRail.showButtonSmallDevices}}
+				<div class="header__call hidden visible-lg-up">
+					{{#if this.header.callRail.picture}}
+						{{ fileInclude 'src/accessible-components/picture/picture.html'
+							picture = this.header.callRail.picture
+							class = 'header__call-icon'
+						}}
+					{{/if}}
+					{{{this.header.callRail.text}}}
+					<a class="header__call-link" href="tel:{{this.header.callRail.phoneNumber}}"><span class="header__call-number">{{this.header.callRail.phoneNumber}}</span></a>
+				</div>
+				{{/if}}
+				<a class="header__call-button {{#if this.header.callRail.showButtonSmallDevices}} visible-sm-down visible-md{{/if}}" href="tel:{{this.header.callRail.phoneNumber}}">
+					{{#if this.header.callRail.picture}}
+						{{ fileInclude 'src/accessible-components/picture/picture.html'
+							picture = this.header.callRail.picture
+							class = 'header__call-icon'
+						}}
+					{{/if}}
+					{{{this.header.callRail.mobileText}}}
+				</a>
+			</div>
+			{{/if}}
+			{{#if this.header.additionalLogos}}
+			<div class="header__additional-logos">
+				{{#each this.header.additionalLogos}}
+					{{ fileInclude 'src/accessible-components/picture/picture.html'
+						picture = this.picture
+					}}
+				{{/each}}
+			</div>
+			{{/if}}
+			{{#if this.header.tagline.text}}
+			<p class="header__tagline{{#if this.header.tagline.attributes.class}} {{this.header.tagline.attributes.class}}{{/if}}" {{{addAttributes this.header.tagline 'class'}}}>
+				{{{this.header.tagline.text}}}
+			</p>
+			{{/if}}
+        </div>
+    </div>
+</header>